*{box-sizing:border-box}
body{margin:0;background:#f4f4f4;color:#111;font:12px Arial,Helvetica,sans-serif}
.shell{width:1120px;max-width:calc(100% - 24px);margin:16px auto}
header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;background:#eef3f8;border:1px solid #bac3cc;padding:10px}
h1{font-size:16px;margin:5px 0 0}
h1 span{font-size:10px;color:#22623d;background:#e7f4eb;padding:3px 6px;margin-left:8px}
nav{display:flex;gap:6px}
nav a{padding:6px 12px;text-decoration:none;color:#111;border:1px solid #afb9c4;background:white}
nav .active{background:#e1edff;border-color:#538cff}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;background:white;border:1px solid #bac3cc;margin-top:8px}
label{display:flex;align-items:center;gap:6px}
select{height:28px;min-width:60px;border:1px solid #bac3cc;background:white}
button{height:28px;border:1px solid #aaa;background:#eee;font-size:11px;padding:0 12px;cursor:pointer}
button:disabled{cursor:default;color:#888}
.quotes{display:grid;grid-template-columns:1fr 2fr 2fr 1fr;gap:0;margin-top:8px;background:white;border:1px solid #bac3cc}
.quotes div{padding:10px;border-right:1px solid #dde1e6;min-width:0}
small{font-size:10px}
.quotes small,.quotes strong,.quotes b,.quotes em{display:block;overflow-wrap:anywhere}
.quotes strong{font-size:13px;margin-top:5px}
.quotes b{margin-top:5px}
.quotes em{font-size:11px;font-style:normal;margin-top:4px}
.green{color:#17683c}.red{color:#a51d27}
.pnl-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;border:1px solid #bac3cc;margin-top:8px}
.pnl-summary div{padding:10px;min-width:0;border-right:1px solid #dde1e6}
.pnl-summary div:last-child{border-right:0}
.pnl-summary small,.pnl-summary strong{display:block;overflow-wrap:anywhere}
.pnl-summary strong{font-size:16px;margin-top:5px}
#message{border-left:3px solid #528bff;background:#edf4ff;padding:8px;min-height:30px;overflow-wrap:anywhere}
.report{overflow-x:auto;background:white;border:1px solid #bac3cc;padding:8px}
table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:11px}
th,td{text-align:left;border:1px solid #b8c0c8;padding:5px}
th{background:#eee;font-size:10px}
td button{height:22px}
.loss td{background:#fde8e8}.profit td{background:#e6f4ea}
.empty{text-align:center;padding:14px;color:#666}
.gray-area{height:240px;background:#aaa}
@media(max-width:640px){.quotes{grid-template-columns:1fr 1fr}.controls{gap:8px}.shell{max-width:calc(100% - 16px)}}