:root { --bg:#111418; --card:#1b2027; --fg:#e8eaed; --muted:#9aa0a6; --ok:#5bd17f; --bad:#f28b82; --warn:#e3b341; --line:#2c323a; --sig:#b39ddb; --ema-f:#f0a73c; --ema-s:#6fb1ff; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
main { max-width:1100px; margin:0 auto; padding:0 16px 24px; }
a { color:inherit; }
.top { position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); }
.top .in { max-width:1100px; margin:0 auto; padding:10px 16px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.brand { font-weight:700; }
.badge { padding:2px 10px; border-radius:999px; background:var(--warn); color:#000; font-weight:700; font-size:13px; white-space:nowrap; }
nav { display:flex; gap:4px; flex-wrap:wrap; }
nav a { text-decoration:none; padding:5px 10px; border-radius:8px; color:var(--muted); }
nav a.on { background:var(--card); color:var(--fg); border:1px solid var(--line); }
.pills { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; align-items:center; }
.pill { padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:13px; white-space:nowrap; }
button { font:inherit; padding:6px 14px; border-radius:8px; border:1px solid var(--line); cursor:pointer; background:var(--card); color:var(--fg); }
button.primary { background:var(--ok); color:#06210f; border-color:var(--ok); font-weight:600; }
button:disabled { opacity:.4; cursor:default; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; min-width:0; }
section { margin-top:12px; }
h1 { font-size:20px; margin:16px 0 4px; }
h2 { font-size:12px; font-weight:600; color:var(--muted); margin:0 0 4px; text-transform:uppercase; letter-spacing:.03em; }
.hero { font-size:38px; font-weight:750; line-height:1.15; overflow-wrap:anywhere; }
.big { font-size:20px; font-weight:650; overflow-wrap:anywhere; }
.ok { color:var(--ok); } .bad { color:var(--bad); } .warn { color:var(--warn); } .muted { color:var(--muted); font-size:13px; }
dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:6px 0 0; font-size:14px; }
dt { color:var(--muted); } dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.chart { height:420px; }
@media (max-width:600px) { .chart { height:300px; } .hero { font-size:30px; } }
.legend { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted); margin-bottom:6px; }
.legend i { display:inline-block; width:12px; height:3px; vertical-align:middle; margin-right:4px; }
.detail { min-height:22px; font-size:14px; margin-top:6px; }
.tbl { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:right; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
th:first-child, td:first-child { text-align:left; }
tr.click { cursor:pointer; } tr.click:hover { background:#ffffff10; }
.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:8px; }
.filters { display:flex; gap:6px; margin:8px 0; }
.tag { font-size:15px; font-weight:600; }
.why { font-size:16px; line-height:1.55; }

/* icons + simple wallet */
.ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.bub { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:#ffffff0d; flex:none; }
.bub.ok { background:color-mix(in srgb, var(--ok) 16%, transparent); } .bub.bad { background:color-mix(in srgb, var(--bad) 16%, transparent); }
.bub.warn { background:color-mix(in srgb, var(--warn) 16%, transparent); } .bub.blue { color:var(--ema-s); background:color-mix(in srgb, var(--ema-s) 16%, transparent); }
.bub.gold { color:var(--ema-f); background:color-mix(in srgb, var(--ema-f) 16%, transparent); }
.th { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.th h2 { margin:0; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-weight:650; font-size:15px; }
.chip.ok { background:color-mix(in srgb, var(--ok) 15%, transparent); } .chip.bad { background:color-mix(in srgb, var(--bad) 15%, transparent); }
.chip.flat { background:#ffffff10; }
.split { display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--line); margin:14px 0 6px; }
.split i { display:block; }
.legend2 { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--muted); }
.legend2 b { color:var(--fg); font-weight:600; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:18px; font-weight:650; margin:4px 0 8px; }
.flow .lbl { display:block; font-size:12px; font-weight:500; color:var(--muted); }
.flow .arr { font-size:22px; }
.plain { font-size:15px; line-height:1.5; }
details summary { cursor:pointer; color:var(--muted); font-size:13px; margin-top:8px; }
.trades { list-style:none; margin:0; padding:0; }
.trades li { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.trades li:last-child { border-bottom:0; }
.trades .grow { flex:1; min-width:0; }

/* story: every page opens with its question and a one-line live answer */
.story { margin:14px 0 4px; padding:14px 16px; border-radius:12px; background:linear-gradient(135deg, #1f2a3a, #1b2027); border:1px solid var(--line); }
.story .q { font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.story .a { font-size:18px; font-weight:650; line-height:1.4; margin-top:4px; }
.story .a small { display:block; font-size:14px; font-weight:400; color:var(--muted); margin-top:4px; }
.sec { font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin:18px 0 6px; }
.only-m { display:none; }
.tabs a { display:inline-flex; align-items:center; gap:6px; }
.tabs .ic { width:16px; height:16px; }
button, select, .tabs a { min-height:36px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; }

@media (max-width:640px) {
  body { font-size:15px; padding-bottom:76px; }
  main { padding:0 12px 16px; }
  .top .in { padding:8px 12px; gap:8px; flex-wrap:nowrap; }
  .brand { display:none; }
  .top .in { justify-content:space-between; }
  .pills { margin-left:0; min-width:0; }
  #p-summary { font-size:12px; padding:3px 8px; gap:4px; align-items:center; }
  .pills { gap:6px; flex-wrap:nowrap; }
  .pills .pill:not(.only-m) { display:none; }
  .only-m { display:inline-flex; }
  #logout { display:none; }
  #ctl-btn { padding:6px 10px; font-size:14px; white-space:nowrap; }
  /* bottom tab bar: thumb-reachable navigation */
  .tabs { position:fixed; left:0; right:0; bottom:0; z-index:10; background:var(--card); border-top:1px solid var(--line);
          display:grid; grid-template-columns:repeat(5, 1fr); gap:0; padding:4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .tabs a { flex-direction:column; gap:2px; font-size:11px; padding:6px 2px; border:0 !important; background:none !important; text-align:center; }
  .tabs a.on { color:var(--ema-s); }
  .tabs .ic { width:22px; height:22px; }
  .story { margin-top:10px; }
  .story .a { font-size:17px; }
  .hero { font-size:32px; }
  .card { padding:12px; }
  h1 { font-size:18px; }
  .grid2 { grid-template-columns:1fr 1fr; }
  .grid2 > .card:last-child:nth-child(odd) { grid-column:1 / -1; }
  /* tables become stacked cards */
  .stack thead { display:none; }
  .stack tr { display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; padding:10px 0; border-bottom:1px solid var(--line); }
  .stack td { border:0; padding:2px 0; text-align:left !important; white-space:normal; }
  .stack td::before { content:attr(data-l); display:block; font-size:11px; color:var(--muted); }
  .stack td.lead { grid-column:1 / -1; font-weight:600; }
  .stack td.lead::before { display:none; }
  .flow { font-size:16px; }
  dl { font-size:13px; }
}