:root { color-scheme: dark; --bg:#07100d; --panel:#0d1915; --line:#20332b; --muted:#8aa097; --text:#edf7f2; --green:#35d39a; --red:#ff6b6b; --amber:#f0b35a; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:radial-gradient(circle at 80% -20%,#17352a 0,transparent 35%),var(--bg); color:var(--text); font:14px/1.5 ui-sans-serif,system-ui,sans-serif; }
main { width:min(1800px,calc(100% - 24px)); height:100dvh; margin:auto; padding:8px 0; display:flex; flex-direction:column; overflow:hidden; }
h2,p { margin:0; } h2 { font-size:17px; }
.eyebrow { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.16em; }
.chart-controls,.legend { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chart-error{color:var(--red);font-size:12px}
select,button { border:1px solid var(--line); border-radius:8px; background:#111f1a; color:var(--text); padding:8px 10px; }
button { cursor:pointer; } button:disabled { opacity:.45; cursor:not-allowed; }
.summary { display:grid; grid-template-columns:repeat(5,minmax(140px,1fr)); gap:8px; margin-bottom:8px; flex:0 0 auto; }.summary-metrics{display:contents}
.metric,.panel { border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--panel) 94%,transparent); }
.metric { padding:10px 14px; } .metric span { color:var(--muted); font-size:11px; } .metric strong { display:block; margin-top:3px; font:700 21px/1.1 ui-monospace,monospace; }.status-metric{display:flex;flex-direction:column;justify-content:center}.status-metric .status{color:var(--muted);font:600 13px/1.25 ui-sans-serif,system-ui,sans-serif}.status-metric .status.error{color:var(--red)}
.positive { color:var(--green)!important; } .negative { color:var(--red)!important; }
.panel { padding:12px; margin-bottom:8px; } .panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.trade-layout { display:grid; grid-template-columns:300px minmax(480px,1fr) 300px; gap:8px; align-items:stretch; flex:1 1 auto; min-height:0; margin-bottom:8px; }.trade-layout>.panel{height:100%;min-height:0;margin-bottom:0}.chart-panel{min-width:0}.side-panel{display:flex;flex-direction:column;overflow:hidden}.side-panel>div:not(.panel-head){overflow:auto}
#chart { height:calc(100% - 58px); } .legend { color:var(--muted); font-size:11px; margin-top:6px; } .legend span::before { content:""; display:inline-block; width:14px; border-top:2px solid; margin-right:6px; vertical-align:middle; }
.position-line::before { color:#42a5f5; }.order-line::before{color:var(--amber)}.tp-line::before{color:var(--green)}.sl-line::before{color:var(--red)}.liq-line::before{color:#ab79ff}
.count { color:var(--muted); }
.item { padding:12px 0; border-top:1px solid var(--line); } .item:first-child { border:0; padding-top:0; } .item-head,.item-grid { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.item-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:9px; color:var(--muted); font-size:12px; }.item-grid b { display:block; color:var(--text); font:600 14px ui-monospace,monospace; }
.side-panel .item-grid{grid-template-columns:1fr 1fr}.trade-select{display:block;width:100%;border-width:0 0 1px;border-color:var(--line);border-radius:0;background:transparent;color:var(--text);text-align:left;font:inherit}.trade-select:hover,.trade-select.selected{background:#13231d}.trade-select.selected{box-shadow:inset 3px 0 var(--green);padding-left:12px}.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--muted)}.pagination button{width:34px;height:30px;padding:0;font-size:20px}
.side { padding:2px 7px; border-radius:6px; font-size:11px; font-weight:800; }.buy { background:#133e30;color:var(--green) }.sell { background:#452323;color:#ff8e8e }
.history-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:0 0 auto}.history-card{min-width:0;height:clamp(170px,22vh,220px);transition:width .2s}.history-card .panel-head{margin-bottom:2px}.history-card h2 strong{margin-left:8px;font:600 14px ui-monospace,monospace;color:var(--muted)}.history-controls{display:flex;gap:6px}.history-chart{height:calc(100% - 48px)}.expand-chart{font-size:17px}.history-grid.expand-equity{grid-template-columns:minmax(0,1fr) 54px}.history-grid.expand-pnl{grid-template-columns:54px minmax(0,1fr)}.history-card.expanded{height:clamp(300px,44vh,440px)}.history-card.expanded .history-chart{height:calc(100% - 48px)}.history-card.collapsed{height:clamp(300px,44vh,440px);padding:10px 7px}.history-card.collapsed .history-chart,.history-card.collapsed .eyebrow,.history-card.collapsed .history-range,.history-card.collapsed h2 strong{display:none}.history-card.collapsed .panel-head{height:100%;flex-direction:column;justify-content:flex-start}.history-card.collapsed h2{writing-mode:vertical-rl;margin-top:8px}
.empty { color:var(--muted); padding:30px 0; text-align:center; }
@media(max-width:1100px){main{height:auto;min-height:100dvh;overflow:visible}.summary{grid-template-columns:repeat(2,1fr)}.trade-layout{grid-template-columns:1fr;flex:none}.trade-layout>.panel{height:auto}.chart-panel{grid-row:1}.orders-panel{grid-row:2}.positions-panel{grid-row:3}.side-panel>div:not(.panel-head){max-height:480px}.item-grid{grid-template-columns:repeat(2,1fr)}#chart{height:420px}}
@media(max-width:700px){.history-grid,.history-grid.expand-equity,.history-grid.expand-pnl{grid-template-columns:1fr}.history-card.collapsed{display:none}.history-card.expanded{height:400px}.history-card.expanded .history-chart{height:325px}}
@media(max-width:560px){.summary{grid-template-columns:1fr 1fr}.metric strong{font-size:19px}.chart-panel{padding:10px}#chart{height:360px}}