/* ============================================================= TOKENS */
:root{
  /* surfaces */
  --bg-0:#020617; --bg-1:#0b1220; --panel:#111827; --panel-2:#1f2937;
  --border:#374151; --border-strong:#4b5563;
  /* accent + status */
  --accent:#2563eb; --accent-2:#4f46e5;
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  /* text */
  --text-1:#e5e7eb; --text-2:#9ca3af; --text-3:#6b7280;
  /* rank ladder E..SSR */
  --rank-e:#64748b; --rank-d:#38bdf8; --rank-c:#22c55e; --rank-b:#a78bfa;
  --rank-a:#f472b6; --rank-s:#fbbf24; --rank-ss:#fb923c; --rank-ssr:#f87171;
  /* type */
  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:18px; --fs-xl:24px;
  --font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  /* space (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* radius / elevation / motion */
  --r-sm:6px; --r-ctl:8px; --r-md:10px; --r-lg:16px; --r-full:9999px;
  --elev-1:0 1px 2px rgba(0,0,0,.4); --elev-2:0 4px 12px rgba(0,0,0,.45); --elev-3:0 12px 32px rgba(0,0,0,.5);
  --dur-fast:120ms; --dur-med:220ms;
  --tap:44px;
  --rail:56px; --side:380px; --topbar:52px;
  --cell:172px;
}
[data-density="comfortable"]{ --cell:150px; }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font); font-size:var(--fs-sm); color:var(--text-1);
  background:radial-gradient(1400px 700px at 68% -8%, rgba(37,99,235,.07), transparent 60%), var(--bg-0);
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; color:inherit; cursor:pointer; background:none; border:none; }
input,select,textarea{ font-family:inherit; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--border-strong); }
::selection{ background:rgba(37,99,235,.35); }
.mono{ font-family:var(--font-mono); }
.ico{ width:18px; height:auto; aspect-ratio:1/1; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
@keyframes ico-spin{ to{ transform:rotate(360deg); } }
#loadmore .ico, .load-spinner .ico{ animation:ico-spin .8s linear infinite; }
.muted{ color:var(--text-2); }
.dim{ color:var(--text-3); }