:root{
  --bg:#0a0e13;--bg2:#0f151d;--line:#1d2836;--txt:#e6edf5;--dim:#8798ab;
  --acc:#38d39f;--acc2:#f0b429;--hot:#ff6b6b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:radial-gradient(1200px 600px at 15% -10%,#12202c 0%,transparent 60%),
  radial-gradient(900px 500px at 100% 0%,#1a1524 0%,transparent 55%),var(--bg);
  color:var(--txt);font:15px/1.5 "Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.app{display:flex;min-height:100vh}

/* ---------- side ---------- */
.side{
  width:230px;flex:0 0 230px;padding:26px 18px;border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(15,21,29,.92),rgba(10,14,19,.92));
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:26px;
}
.brand{font-size:18px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:9px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.nav{display:flex;flex-direction:column;gap:6px}
.navbtn{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:11px 13px;border-radius:10px;border:1px solid transparent;background:transparent;
  color:var(--dim);font-size:14.5px;font-weight:600;cursor:pointer;transition:.15s;text-align:left;
}
.navbtn:hover{background:#131c26;color:var(--txt)}
.navbtn.is-on{background:#13251f;border-color:#1f4638;color:var(--acc)}
.navbtn em{font-style:normal;font-size:12px;font-weight:500;color:var(--dim)}
.navbtn.is-on em{color:var(--acc)}
.meta{margin-top:auto;display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:var(--dim)}
.meta>div{display:flex;justify-content:space-between;gap:10px}
.meta b{color:#b9c8d8;font-weight:600}

/* ---------- main ---------- */
.main{flex:1;min-width:0;padding:30px 34px 60px}
.head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
h1{margin:0;font-size:26px;letter-spacing:.5px}
.search input{
  width:240px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);
  background:#0d131a;color:var(--txt);font-size:14px;outline:none;transition:.15s;
}
.search input:focus{border-color:#2b6b57;box-shadow:0 0 0 3px rgba(56,211,159,.12)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0}
.card{
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  background:linear-gradient(180deg,#111922,#0c1219);
}
.card span{display:block;font-size:12px;color:var(--dim);margin-bottom:6px}
.card b{font-size:22px;font-weight:700;letter-spacing:.5px}
.card.g b{color:var(--acc)}
.card.y b{color:var(--acc2)}

/* ---------- table ---------- */
.board{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0c1219}
.thead,.row{
  display:grid;grid-template-columns:64px minmax(140px,1fr) 96px 80px 80px 80px 96px;
  align-items:center;gap:8px;padding:12px 18px;
}
.thead{font-size:12px;color:var(--dim);text-transform:none;border-bottom:1px solid var(--line);background:#0e151d}
.tbody{max-height:none}
.row{border-bottom:1px solid #101922;font-size:14px;transition:background .12s}
.row:last-child{border-bottom:none}
.row:hover{background:#111b25}
.c-rank{font-variant-numeric:tabular-nums;color:var(--dim);font-weight:600}
.row.top1 .c-rank,.row.top2 .c-rank,.row.top3 .c-rank{color:var(--acc2)}
.row.top1 .c-name{color:var(--acc2);font-weight:700}
.c-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-pt{color:var(--acc);font-weight:700;font-variant-numeric:tabular-nums}
.c-w,.c-m,.c-r,.c-t{color:#a9b8c9;font-variant-numeric:tabular-nums}
.empty{padding:34px;text-align:center;color:var(--dim);font-size:14px}

@media (max-width:820px){
  .app{flex-direction:column}
  .side{width:auto;flex:none;height:auto;position:static;flex-direction:row;align-items:center;
        gap:14px;padding:14px 16px;border-right:none;border-bottom:1px solid var(--line);overflow-x:auto}
  .brand{font-size:16px;white-space:nowrap}
  .nav{flex-direction:row;gap:6px}
  .navbtn{padding:8px 11px;white-space:nowrap}
  .navbtn em{display:none}
  .meta{display:none}
  .main{padding:18px 14px 50px}
  .thead,.row{grid-template-columns:44px minmax(90px,1fr) 72px 58px 58px;padding:11px 12px}
  .c-r,.c-t{display:none}
  h1{font-size:20px}
  .search input{width:100%}
  .search{flex:1 1 100%}
}