/* Light is the default theme; dark applies when <html data-theme="dark">. */
:root{
  --bg:#f4f6fa; --panel:#ffffff; --panel2:#eef1f6; --line:#dde3ec; --line2:#c9d2df; --text:#141a26; --muted:#5b6678;
  --head:#f7f9fc; --hover:#eef3fb; --stripe:#fafbfd; --menu-hover:#e8eef8;
  --accent:#d97706; --accent2:#2563eb; --on-accent:#ffffff; --up:#15803d; --down:#c62828;
  --topbar:rgba(255,255,255,.92); --shadow:0 10px 30px rgba(20,30,50,.15);
  --sup-track:#e3e8f0; --sup-tot:#a3b1c6; --sup-circ:#2563eb;
  --info-bg:#e3e8f0; --tip-bg:#ffffff; --gloss:#2b3445;
  --warn-bg:#fff7e6; --warn-line:#f0c36d; --warn-text:#7a4b00;
  --err-bg:#fdecee; --err-line:#f1a7b0; --err-text:#9b1c2c;
  --info2-bg:#e8f1fd; --info2-line:#a9c8f2; --info2-text:#174a8b;
  --rm-hover:#fdecee; --scrim:rgba(20,30,50,.35); --chip-off:#c3ccd9;
  --radius:12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, sans-serif;
  color-scheme: light;
}
html[data-theme="dark"]{
  --bg:#0b0f17; --panel:#121826; --panel2:#182033; --line:#243049; --line2:#3a4a6e; --text:#e6ebf5; --muted:#8b97b0;
  --head:#151c2c; --hover:#161e30; --stripe:#131a29; --menu-hover:#1f2a42;
  --accent:#f7931a; --accent2:#7aa2ff; --on-accent:#0b0f17; --up:#22c55e; --down:#ef4444;
  --topbar:rgba(11,15,23,.92); --shadow:0 10px 30px rgba(0,0,0,.5);
  --sup-track:#2a3550; --sup-tot:#55688f; --sup-circ:#7aa2ff;
  --info-bg:#26324d; --tip-bg:#0f1522; --gloss:#cfd6e6;
  --warn-bg:#2a2112; --warn-line:#6b4e14; --warn-text:#ffd58a;
  --err-bg:#2a1215; --err-line:#7a2530; --err-text:#ffb3bb;
  --info2-bg:#121f2a; --info2-line:#1f4a6b; --info2-text:#a8d4ff;
  --rm-hover:#2a1215; --scrim:rgba(0,0,0,.55); --chip-off:#3a4560;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;-webkit-text-size-adjust:100%}
a{color:var(--accent2)}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12px}
.topbar{position:sticky;top:0;z-index:20;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:12px 18px;padding-top:max(12px,env(safe-area-inset-top));background:var(--topbar);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center}
.logo{font-size:26px;color:var(--accent)}
h1{font-size:18px;margin:0} h2{font-size:16px;margin:0 0 4px}
.sub{color:var(--muted);font-size:12px}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
main{padding:16px 18px 40px;max-width:1700px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:0 1px 2px rgba(20,30,50,.05)}
.card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:3px;flex-wrap:wrap}
.seg button{background:none;border:0;color:var(--muted);padding:7px 12px;border-radius:7px;font:inherit;font-weight:600;cursor:pointer;min-height:34px}
.seg button.active{background:var(--accent2);color:#fff}
#denomSeg button.active{background:var(--accent);color:var(--on-accent)}
.btn{font:inherit;border-radius:9px;padding:8px 12px;border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer;min-height:36px}
.btn:hover{border-color:var(--line2)}
.seg button:hover{color:var(--text)}
.theme-toggle{font-weight:600;border-color:var(--line2);display:inline-flex;align-items:center;gap:6px}
.theme-toggle .ico{font-size:16px;line-height:1}
.status{margin:10px 18px 0;padding:9px 12px;border-radius:9px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-text);font-size:13px}
.status.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-text)}
.status.info{background:var(--info2-bg);border-color:var(--info2-line);color:var(--info2-text)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);cursor:pointer;font-weight:600;font-size:12px;user-select:none;min-height:30px}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--chip-off)}
.chip.on{color:var(--text);border-color:var(--line2);background:var(--panel)}
.chip.quick{border-style:dashed}
.chart-wrap{position:relative;height:min(52vh,520px);min-height:300px}
.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.table-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search{position:relative}
.search input{font:inherit;width:260px;max-width:70vw;padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);min-height:36px}
.search input:focus{outline:2px solid var(--accent2);outline-offset:-1px}
.search-results{position:absolute;right:0;top:calc(100% + 4px);width:340px;max-width:90vw;max-height:380px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;z-index:30;box-shadow:var(--shadow)}
.sr-item{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line);color:var(--text)}
.sr-item:hover{background:var(--menu-hover)}
.sr-item img{width:20px;height:20px;border-radius:50%}
.sr-item .rank{margin-left:auto;color:var(--muted);font-size:12px}
.sr-item.added{opacity:.5;cursor:default}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--line);border-radius:10px;z-index:30;min-width:230px;overflow:hidden;box-shadow:var(--shadow)}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);padding:11px 14px;font:inherit;cursor:pointer}
.menu button:hover{background:var(--menu-hover)}
.table-scroll{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;max-height:75vh}
table{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;white-space:nowrap;text-align:right;border-bottom:1px solid var(--line)}
tbody tr:nth-child(even) td{background:var(--stripe)}
thead th{position:sticky;top:0;background:var(--head);z-index:3;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);cursor:pointer;user-select:none;border-bottom:1px solid var(--line2)}
thead th.grp-start,td.grp-start{border-left:1px solid var(--line)}
thead th:hover{color:var(--text)}
thead th.sorted{color:var(--accent2)}
th .info{display:inline-block;margin-left:3px;width:14px;height:14px;line-height:14px;text-align:center;border-radius:50%;background:var(--info-bg);color:var(--muted);font-size:10px;text-transform:none}
th.left,td.left{text-align:left}
td.sticky,th.sticky{position:sticky;left:0;background:var(--panel);z-index:2}
thead th.sticky{z-index:4;background:var(--head)}
tbody tr:nth-child(even) td.sticky{background:var(--stripe)}
tbody tr:hover td,tbody tr:hover td.sticky{background:var(--hover)}
.coin-cell{display:flex;align-items:center;gap:8px}
.coin-cell img{width:20px;height:20px;border-radius:50%}
.coin-cell .sym{font-weight:700}
.coin-cell .nm{color:var(--muted);font-size:12px;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.up{color:var(--up)} .down{color:var(--down)}
.rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;padding:4px 6px;border-radius:6px}
.rm:hover{color:var(--down);background:var(--rm-hover)}
.chk{width:18px;height:18px;accent-color:var(--accent2);cursor:pointer}
.supbar{display:inline-block;width:90px;height:8px;border-radius:4px;background:var(--sup-track);position:relative;overflow:hidden;vertical-align:middle}
.supbar span{position:absolute;left:0;top:0;bottom:0}
.supbar .tot{background:var(--sup-tot)}
.supbar .circ{background:var(--sup-circ)}
.foot{margin-top:10px;line-height:1.5}
.drawer{position:fixed;inset:0;background:var(--scrim);z-index:50;display:flex;justify-content:flex-end}
.drawer-inner{width:min(520px,100%);height:100%;overflow:auto;background:var(--panel);color:var(--text);border-left:1px solid var(--line);padding:18px 20px;padding-top:max(18px,env(safe-area-inset-top));box-shadow:var(--shadow)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.glossary dt{font-weight:700;margin-top:14px;color:var(--accent2)}
.glossary dd{margin:4px 0 0;line-height:1.5;color:var(--gloss)}
.tip{position:fixed;z-index:60;max-width:300px;background:var(--tip-bg);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.45;color:var(--gloss);pointer-events:none;box-shadow:var(--shadow)}
.loading{opacity:.55}
@media (max-width:700px){ main{padding:10px} .card{padding:12px} .search input{width:200px} }