:root { --bg:#070d07; --card:#0e1a0e; --edge:#1d3a1c; --tx:#d7e8d4; --mut:#7d947b;
        --ac:#35e14e; --ac2:#7dff7a; --bad:#e05a4e; }
* { box-sizing:border-box; margin:0; }
body { background:radial-gradient(1200px 800px at 50% -10%, #12240f 0%, var(--bg) 60%);
       color:var(--tx); font:15px/1.55 system-ui, "Segoe UI", Roboto, sans-serif;
       min-height:100vh; }
a { color:var(--ac2); text-decoration:none; } a:hover { text-decoration:underline; }
.wrap { max-width:980px; margin:0 auto; padding:0 16px 64px; }
header.site { display:flex; align-items:center; gap:14px; padding:22px 0 8px; }
header.site .logo { width:52px; height:52px; flex:none; }
header.site h1 { font-size:26px; letter-spacing:0.5px; }
header.site h1 a { color:var(--tx); } header.site h1 a:hover { text-decoration:none; }
header.site .sub { color:var(--mut); font-size:13px; }
nav.top { display:flex; gap:4px; margin:14px 0 26px; flex-wrap:wrap; }
nav.top a { padding:7px 14px; border:1px solid var(--edge); border-radius:8px;
            color:var(--tx); font-size:14px; }
nav.top a.on, nav.top a:hover { background:var(--card); border-color:var(--ac);
                                text-decoration:none; }
.card { background:linear-gradient(180deg, #101f10 0%, var(--card) 100%);
        border:1px solid var(--edge); border-radius:14px; padding:20px 22px;
        margin-bottom:22px; }
.card h2 { font-size:17px; margin-bottom:14px; color:var(--ac2);
           text-transform:uppercase; letter-spacing:1.5px; }
.grid { display:grid; gap:22px; grid-template-columns:1fr 1fr; }
@media (max-width:760px) { .grid { grid-template-columns:1fr; } }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th { text-align:left; color:var(--mut); font-size:12px; text-transform:uppercase;
     letter-spacing:1px; padding:6px 10px; border-bottom:1px solid var(--edge); }
td { padding:8px 10px; border-bottom:1px solid rgba(29,58,28,0.5); }
tr:hover td { background:rgba(53,225,78,0.05); }
td.num, th.num { text-align:right; }
.rankpos { color:var(--mut); width:34px; }
.top1 td { background:rgba(255,233,168,0.05); }
.badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px;
         font-weight:600; letter-spacing:0.5px; color:var(--rc, var(--tx));
         border:1px solid var(--rc, var(--edge)); background:rgba(0,0,0,0.25); }
.badge.glow { box-shadow:0 0 12px var(--rc); }
.badge.unranked { --rc:#8b8b8b; font-style:italic; }
.chip { display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px;
        border:1px solid var(--edge); background:rgba(0,0,0,0.3); margin:0 6px 6px 0; }
.chip b { color:var(--ac2); }
.chart { width:100%; height:auto; display:block; }
.axis { fill:var(--mut); font-size:11px; }
.blabel { fill:var(--tx); font-size:13px; }
.bval { fill:var(--mut); font-size:12px; }
.hero { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.hero .big { font-size:30px; font-weight:700; }
.muted { color:var(--mut); }
.up { color:var(--ac); font-weight:600; } .down { color:var(--bad); font-weight:600; }
.statgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(118px,1fr));
            gap:12px; }
.stat { background:rgba(0,0,0,0.25); border:1px solid var(--edge); border-radius:10px;
        padding:10px 14px; }
.stat .v { font-size:22px; font-weight:700; color:var(--ac2); }
.stat .k { font-size:11px; color:var(--mut); text-transform:uppercase;
           letter-spacing:1px; }
.btn { display:inline-block; padding:9px 18px; border-radius:9px; font-weight:600;
       background:var(--ac); color:#04170a; border:none; }
.btn:hover { background:var(--ac2); text-decoration:none; }
.btn.ghost { background:transparent; color:var(--ac2); border:1px solid var(--edge); }
footer { color:var(--mut); font-size:12px; text-align:center; margin-top:34px; }
.pname a { color:var(--tx); font-weight:600; }
code { background:rgba(0,0,0,0.4); border:1px solid var(--edge); border-radius:6px;
       padding:2px 8px; font-size:13px; color:var(--ac2); }
.livecard { display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%;
       background:var(--ac); box-shadow:0 0 8px var(--ac); margin-right:7px; }
.dot.off { background:var(--bad); box-shadow:0 0 8px var(--bad); }
.av { border-radius:6px; vertical-align:middle; margin-right:8px;
      border:1px solid var(--edge); }
.noav { display:inline-block; background:#132513; vertical-align:middle;
        margin-right:8px; border-radius:6px; border:1px solid var(--edge); }
.achgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:10px; }
.ach { border:1px solid var(--edge); border-radius:10px; padding:10px 12px; background:rgba(0,0,0,0.25); }
.ach.locked { opacity:0.42; }
.ach .t { font-weight:600; color:var(--ac2); font-size:13px; }
.ach .d { font-size:11px; color:var(--mut); }
.ach .r { font-size:10px; color:var(--mut); margin-top:4px; }
.pbar { height:5px; border-radius:3px; background:rgba(0,0,0,0.5); margin-top:6px; overflow:hidden; }
.pbar i { display:block; height:100%; background:var(--ac); }
.lmap { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; }
.tscroll { overflow-x:auto; }
table.sortable th { cursor:pointer; user-select:none; white-space:nowrap; }
table.sortable th:hover { color:var(--ac); }
table.sortable th.asc::after { content:" ▲"; font-size:9px; color:var(--ac); }
table.sortable th.desc::after { content:" ▼"; font-size:9px; color:var(--ac); }
input.search { width:100%; padding:10px 14px; border-radius:9px; margin-bottom:12px;
               border:1px solid var(--edge); background:rgba(0,0,0,0.35);
               color:var(--tx); font-size:14px; }
input.search:focus { outline:none; border-color:var(--ac); }
.heat { border-radius:8px; }