:root {
  --bg: #0f1115; --panel: #171a21; --border: #262b36; --text: #e6e8ec;
  --muted: #8b93a3; --ce: #3fa9f5; --pe: #f5793f; --accent: #4caf7d; --danger: #e5484d; --warn: #e0a030;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f5f6f8; --panel:#ffffff; --border:#e1e4ea; --text:#1b1e24; --muted:#5b6270; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family: -apple-system, Segoe UI, Roboto, sans-serif; padding: 20px 16px 60px; }
h1 { font-size: 1.3rem; margin: 0 0 4px; }
h2 { font-size: 1rem; margin: 0 0 10px; }
.sub { color: var(--muted); font-size: .85rem; margin-bottom: 18px; }
nav { margin-bottom: 14px; font-size: .85rem; }
nav a { color: var(--muted); text-decoration: none; margin-right: 14px; padding-bottom: 3px; }
nav a.active { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--accent); }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.toolbar label { font-size:.8rem; color:var(--muted); margin-right:4px; }
select, button, input[type=date], input[type=number], input[type=time] {
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:7px 10px; font-size:.85rem;
}
input[type=number] { width: 70px; }
button { cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#0b1a12; font-weight:600; }
button:disabled { opacity:.5; cursor:default; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.legs { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-bottom:16px; }
.leg-card h3 { margin:0 0 8px; font-size:.85rem; }
.leg-card.ce h3 { color: var(--ce); }
.leg-card.pe h3 { color: var(--pe); }
.leg-row { display:flex; justify-content:space-between; font-size:.8rem; padding:3px 0; border-bottom:1px dashed var(--border); }
.leg-row:last-child { border-bottom:none; }
.chart-wrap { position:relative; height: 320px; }
.status { font-size:.8rem; color:var(--muted); }
.err { color: var(--danger); font-size:.85rem; margin-top:8px; }
.empty { color:var(--muted); font-size:.9rem; padding:30px 0; text-align:center; }
.summary { display:grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
.stat { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.stat .label { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
.stat .value { font-size:1.3rem; font-weight:700; margin-top:2px; }
.value.pos, .pnl-pos { color: var(--accent); }
.value.neg, .pnl-neg { color: var(--danger); }
.pnl-pos, .pnl-neg { font-weight:700; }
.warn { color: var(--warn); }
table { width:100%; border-collapse: collapse; font-size:.82rem; }
th, td { text-align:right; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
th:first-child, td:first-child { text-align:left; }
th { color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
tr.rank-1 td { font-weight:700; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge.CE { background: rgba(63,169,245,.15); color: var(--ce); }
.badge.PE { background: rgba(245,121,63,.15); color: var(--pe); }
.badge.open { background: rgba(76,175,125,.15); color: var(--accent); }
.table-wrap { overflow-x:auto; }
.legend { color:var(--muted); font-size:.78rem; margin-top:10px; line-height:1.45; }
a.daylink, a.dl { color: inherit; text-decoration: underline; text-decoration-color: var(--border); }
a.dl { font-size:.8rem; }