:root { --ink:#e8edf2; --muted:#92a0ae; --line:#27323c; --surface:#121a20; --canvas:#0b1116; --green:#37c892; --red:#ff736a; --amber:#f0ba55; --cyan:#67c9df; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:14px; letter-spacing:0; }
button, input { font:inherit; }
.topbar { min-height:60px; padding:0 28px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:#0e151b; }
.brand, .topbar-actions { display:flex; align-items:center; gap:12px; }
.brand { font-weight:700; font-size:15px; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; background:var(--cyan); color:#071014; font-size:11px; font-weight:800; }
.mode { padding:4px 7px; font-size:11px; font-weight:800; letter-spacing:.08em; border:1px solid; }
.mode.paper { color:var(--amber); border-color:rgba(240,186,85,.55); } .mode.live { color:var(--red); border-color:rgba(255,115,106,.55); }
.updated, .section-heading > span { color:var(--muted); font-size:12px; }
.icon-button { width:30px; height:30px; padding:0; color:var(--ink); background:transparent; border:1px solid var(--line); cursor:pointer; }
.icon-button:hover { border-color:var(--cyan); color:var(--cyan); }
.layout { width:min(1440px, calc(100% - 40px)); margin:0 auto; padding:28px 0 44px; }
.status-row { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.metric, .panel { border:1px solid var(--line); background:var(--surface); border-radius:6px; }
.metric { min-height:112px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.metric span, .metric small { color:var(--muted); } .metric strong { font-size:22px; line-height:1.2; } .metric.risk.on strong { color:var(--green); } .metric.risk.off strong { color:var(--red); }
.notice { margin:0 0 22px; padding:11px 14px; background:rgba(240,186,85,.1); color:var(--amber); border-left:3px solid var(--amber); }
.panel { padding:20px; margin-bottom:18px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:18px; }
.eyebrow { margin:0 0 4px; color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:.08em; } h1, h2 { margin:0; } h2 { font-size:19px; }
.chart-layout { display:grid; grid-template-columns:76px minmax(0, 1fr); gap:10px; } .chart-scale { height:260px; display:flex; flex-direction:column; justify-content:space-between; padding:2px 0 3px; color:var(--muted); font-size:12px; text-align:right; } .equity-chart { width:100%; height:260px; display:block; overflow:visible; } .equity-chart line { stroke:var(--line); stroke-width:1; stroke-dasharray:4 6; } .equity-chart polyline { fill:none; stroke:var(--green); stroke-width:3; vector-effect:non-scaling-stroke; } .chart-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:9px; color:var(--muted); font-size:12px; } .chart-footer strong { color:var(--ink); font-size:13px; }
.empty-chart { height:260px; display:grid; place-items:center; color:var(--muted); border:1px dashed var(--line); }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; white-space:nowrap; } th { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.06em; text-align:left; } th, td { padding:12px 10px; border-bottom:1px solid var(--line); } th:first-child, td:first-child { padding-left:0; } th:last-child, td:last-child { padding-right:0; } tbody tr:last-child td { border-bottom:0; } .ticker { font-weight:750; } .empty-row { color:var(--muted); text-align:center; padding:28px; }
.order { display:inline-block; min-width:32px; text-transform:uppercase; font-size:10px; font-weight:800; } .order.buy { color:var(--green); } .order.sell { color:var(--red); }
.lower-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr); gap:18px; } .lower-grid .panel { min-width:0; }
dl { margin:0; } dl div { display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-bottom:1px solid var(--line); } dl div:last-child { border-bottom:0; } dt { color:var(--muted); } dd { margin:0; font-weight:650; text-align:right; }
.login-page { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg, #0b1116 0%, #111e24 100%); } .login-shell { width:min(100% - 36px, 390px); padding:30px; border:1px solid var(--line); border-radius:6px; background:var(--surface); } .login-shell h1 { margin-bottom:28px; font-size:30px; line-height:1.12; } .login-form { display:grid; gap:16px; } .login-form label { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:700; } .login-form input { width:100%; padding:11px 12px; color:var(--ink); background:var(--canvas); border:1px solid var(--line); border-radius:3px; outline:none; } .login-form input:focus { border-color:var(--cyan); } .login-form button { margin-top:4px; padding:11px 14px; color:#071014; background:var(--cyan); border:0; border-radius:3px; font-weight:800; cursor:pointer; } .form-error { margin:0; color:var(--red); font-size:12px; }
@media (max-width:900px) { .status-row { grid-template-columns:repeat(2, minmax(0,1fr)); } .lower-grid { grid-template-columns:1fr; } }
@media (max-width:580px) { .topbar { padding:0 16px; } .brand { font-size:13px; } .updated { display:none; } .layout { width:min(100% - 24px, 1440px); padding-top:16px; } .status-row { grid-template-columns:1fr 1fr; gap:8px; } .metric { min-height:105px; padding:13px; } .metric strong { font-size:18px; } .panel { padding:15px; } .section-heading { align-items:start; flex-direction:column; gap:5px; } .chart-layout { grid-template-columns:64px minmax(0, 1fr); gap:6px; } .chart-scale, .equity-chart { height:190px; } .chart-scale { font-size:10px; } .chart-footer { font-size:10px; } .chart-footer strong { font-size:11px; } }