:root{
  --bg:#272727;
  --bg2:#1f1f1f;
  --card:rgba(39,39,39,.88);
  --line:rgba(255,255,255,.10);
  --text:#f3f4f6;
  --muted:#b7b7b7;
  --accent:#14A76C;
  --warn:#FF652F;
  --hi:#FFE400;
  --shadow:0 16px 50px rgba(0,0,0,.55);
  --pillBg:rgba(0,0,0,.18);
  --thBg:rgba(20,20,20,.65);
}

body[data-theme="light"]{
  --bg:#f4f6f9;
  --bg2:#eef2f7;
  --card:#ffffff;
  --line:rgba(31,41,55,.12);
  --text:#1f2937;
  --muted:#6b7280;
  --shadow:0 14px 40px rgba(15,23,42,.10);
  --pillBg:rgba(255,255,255,.65);
  --thBg:#ffffff;
}

/* extra themes (CSS-only) */
body[data-theme="ember"]{
  --bg:#0c0c0f; --bg2:#12131a; --card:rgba(20,20,28,.88);
  --line:rgba(255,255,255,.10); --text:#f8fafc; --muted:rgba(248,250,252,.68);
  --accent:#ff4d2e; --hi:#ffb703; --warn:#ff4d2e;
  --shadow:0 18px 60px rgba(0,0,0,.6); --pillBg:rgba(0,0,0,.22); --thBg:rgba(12,12,15,.72);
}
body[data-theme="ocean"]{
  --bg:#071422; --bg2:#0b2238; --card:rgba(7,20,34,.78);
  --line:rgba(148,163,184,.18); --text:#e6f1ff; --muted:rgba(230,241,255,.70);
  --accent:#22d3ee; --hi:#60a5fa; --warn:#fb7185;
  --shadow:0 18px 60px rgba(0,0,0,.55); --pillBg:rgba(0,0,0,.22); --thBg:rgba(7,20,34,.78);
}
body[data-theme="grape"]{
  --bg:#110a1e; --bg2:#1a0f2e; --card:rgba(17,10,30,.78);
  --line:rgba(226,232,240,.14); --text:#f5f3ff; --muted:rgba(245,243,255,.72);
  --accent:#a78bfa; --hi:#f472b6; --warn:#fb7185;
  --shadow:0 18px 60px rgba(0,0,0,.55); --pillBg:rgba(0,0,0,.22); --thBg:rgba(17,10,30,.78);
}
body[data-theme="mono"]{
  --bg:#0b0c0e; --bg2:#101216; --card:rgba(16,18,22,.92);
  --line:rgba(255,255,255,.10); --text:#f3f4f6; --muted:rgba(243,244,246,.66);
  --accent:#ffffff; --hi:#a1a1aa; --warn:#e5e7eb;
  --shadow:0 18px 60px rgba(0,0,0,.65); --pillBg:rgba(0,0,0,.30); --thBg:rgba(11,12,14,.80);
}
body[data-theme="sand"]{
  --bg:#f7efe1; --bg2:#efe3cc; --card:#fffaf0;
  --line:rgba(120,113,108,.30); --text:#2a1f16; --muted:rgba(42,31,22,.70);
  --accent:#0f766e; --hi:#f59e0b; --warn:#b91c1c;
  --shadow:0 14px 40px rgba(15,23,42,.10); --pillBg:rgba(255,255,255,.65); --thBg:#fffaf0;
}

*{box-sizing:border-box;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;}
body{margin:0;color:var(--text);background:
  radial-gradient(1100px 600px at 20% 0%, rgba(20,167,108,.20), transparent 60%),
  radial-gradient(900px 520px at 90% 10%, rgba(255,228,0,.18), transparent 55%),
  radial-gradient(900px 520px at 70% 80%, rgba(255,101,47,.16), transparent 55%),
  linear-gradient(180deg,var(--bg2),var(--bg));
}

.wrap{max-width:none;margin:0 auto;padding:18px;}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.title{font-weight:1000;letter-spacing:1.2px;text-transform:uppercase}
.sub{color:var(--muted);font-size:12px;line-height:1.45;margin-top:6px}

.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:12px;text-decoration:none;background:var(--pillBg)}
.pill.a{border-color:rgba(20,167,108,.35);color:color-mix(in srgb, var(--accent) 30%, var(--text) 70%)}
.pill.y{border-color:rgba(255,228,0,.35);color:color-mix(in srgb, var(--hi) 40%, var(--text) 60%);background:color-mix(in srgb, var(--hi) 10%, transparent)}
.pill.o{border-color:rgba(255,101,47,.35);color:color-mix(in srgb, var(--warn) 35%, var(--text) 65%);background:color-mix(in srgb, var(--warn) 10%, transparent)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.span12{grid-column:span 12}
.span8{grid-column:span 8}
.span7{grid-column:span 7}
.span6{grid-column:span 6}
.span5{grid-column:span 5}
.span4{grid-column:span 4}
.span3{grid-column:span 3}
@media (max-width: 920px){.span3,.span4,.span5,.span6,.span7,.span8{grid-column:span 12}}

.k{color:var(--muted);font-size:12px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.3px}

table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}
th{color:var(--text);font-weight:900;position:sticky;top:0;background:var(--thBg);backdrop-filter: blur(6px);cursor:pointer}
body[data-theme="light"] th{color:rgba(31,41,55,.88)}
tr:hover td{background:rgba(255,255,255,.03)}
body[data-theme="light"] tr:hover td{background:rgba(37,99,235,.05)}

.bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
body[data-theme="light"] .bar{background:rgba(31,41,55,.10)}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--hi));width:0%}

a{color:var(--hi);text-decoration:none}
a:hover{text-decoration:underline}
a:visited{color:color-mix(in srgb, var(--hi) 70%, var(--text) 30%)}

code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;}