/* ═══ DESIGN SYSTEM ═══════════════════════════════════════════════ */
:root{
  --bg0:#070810;--bg1:#0b0d1a;--bg2:#0f1220;--bg3:#141728;--bg4:#1a1f35;
  --s1:#181c30;--s2:#1e2338;--s3:#242a42;--sh:rgba(42,48,80,.8);
  --ac:#6c63ff;--ac2:#8b85ff;--acdim:rgba(108,99,255,.12);--acglow:rgba(108,99,255,.3);
  --green:#10b981;--gdim:rgba(16,185,129,.12);
  --red:#ef4444;--rdim:rgba(239,68,68,.12);
  --gold:#f59e0b;--cyan:#06b6d4;
  --t-tin:#6b7280;--t-bro:#b45309;--t-sil:#94a3b8;--t-gol:#f59e0b;--t-pla:#0ea5e9;--t-dia:#8b5cf6;--t-val:#ef4444;
  --tx1:#f0f2ff;--tx2:#9ba3c8;--tx3:#5a6380;--tx4:#3a4060;
  --b1:rgba(255,255,255,.06);--b2:rgba(255,255,255,.10);--b3:rgba(108,99,255,.20);--ba:rgba(108,99,255,.4);
  --fd:'Space Grotesk',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif;
  --rsm:6px;--rmd:10px;--rlg:14px;--rxl:20px;--rfl:999px;
  --ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg0);color:var(--tx1);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
input,textarea,select{user-select:text;-webkit-user-select:text}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;background:none;font-family:inherit}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg1)}::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--ac)}

/* ── APP LAYOUT ───────────────────────────────────────────────── */
.app{display:flex;min-height:100vh}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar{width:228px;flex-shrink:0;background:var(--bg1);border-right:1px solid var(--b1);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .3s var(--ease)}
.sb-logo{padding:20px 18px 16px;border-bottom:1px solid var(--b1)}
.logo-mark{font-family:var(--fd);font-size:20px;font-weight:700;letter-spacing:-.5px;cursor:pointer;transition:opacity .15s;color:var(--tx1)}
.logo-mark:hover{opacity:.82}.logo-mark span{color:var(--ac2)}
.sb-search{padding:11px 10px;border-bottom:1px solid var(--b1)}
.srch-box{display:flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--rmd);padding:7px 11px;transition:border-color .2s}
.srch-box:focus-within{border-color:var(--ba)}.srch-box svg{color:var(--tx3);flex-shrink:0}
.srch-box input{background:none;border:none;outline:none;color:var(--tx1);font-size:13px;width:100%}
.srch-box input::placeholder{color:var(--tx3)}
.sb-nav{flex:1;padding:5px 0;overflow-y:auto}
.nav-sec-lbl{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tx4);padding:13px 18px 5px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 18px;font-size:13px;font-weight:500;color:var(--tx2);cursor:pointer;border-left:2px solid transparent;transition:all .12s var(--ease)}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.65;transition:opacity .12s}
.nav-item:hover{color:var(--tx1);background:var(--acdim)}
.nav-item.active{color:var(--ac2);background:var(--acdim);border-left-color:var(--ac);font-weight:600}
.nav-item.active svg{opacity:1}
.sb-settings{padding:0 10px 8px}
.sel-row{display:flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--rmd);padding:6px 10px;margin-bottom:5px;transition:border-color .2s}
.sel-row:hover{border-color:var(--b3)}.sel-row select{background:none;border:none;outline:none;color:var(--tx2);font-size:12px;font-weight:500;width:100%;cursor:pointer;appearance:none}
.sel-row select option{background:var(--bg3);color:var(--tx1)}
.sel-chev{width:9px;height:9px;color:var(--tx3);flex-shrink:0}
.sb-foot{padding:13px 18px;border-top:1px solid var(--b1);font-size:11px;color:var(--tx4);line-height:1.6}

/* ── MAIN ────────────────────────────────────────────────────── */
.main{flex:1;margin-left:228px;display:flex;flex-direction:column;min-height:100vh}
.topbar{height:52px;background:var(--bg1);border-bottom:1px solid var(--b1);display:flex;align-items:center;padding:0 22px;gap:12px;position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}
.topbar-title{font-family:var(--fd);font-size:15px;font-weight:600;flex:1}
.menu-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--rmd);background:var(--bg3);border:1px solid var(--b2);color:var(--tx2);font-size:17px;cursor:pointer}
.content{flex:1;padding:22px}

/* ── PAGES ───────────────────────────────────────────────────── */
.rpage{display:none;animation:rpIn .18s var(--ease)}
.rpage.active{display:block}
@keyframes rpIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
/* Card */
.card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rlg);overflow:hidden;transition:border-color .2s}
.card:hover{border-color:var(--b2)}
.card-hdr{padding:13px 18px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between}
.card-title{font-family:var(--fd);font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.card-bar{width:3px;height:14px;border-radius:2px;background:var(--ac);flex-shrink:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--rmd);font-size:13px;font-weight:600;transition:all .2s var(--ease);white-space:nowrap}
.btn-p{background:var(--ac);color:#fff;box-shadow:0 2px 8px var(--acglow)}.btn-p:hover{background:var(--ac2);transform:translateY(-1px);box-shadow:0 4px 14px var(--acglow)}
.btn-g{background:transparent;color:var(--tx2);border:1px solid var(--b2)}.btn-g:hover{background:var(--s2);color:var(--tx1);border-color:var(--b3)}
.btn-sm{padding:5px 11px;font-size:12px}.btn:disabled{opacity:.4;cursor:not-allowed}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--rfl);font-size:11px;font-weight:600;border:1px solid}
.bd-ac{background:var(--acdim);color:var(--ac2);border-color:rgba(108,99,255,.25)}
.bd-gn{background:var(--gdim);color:var(--green);border-color:rgba(16,185,129,.25)}
.bd-nt{background:rgba(255,255,255,.04);color:var(--tx2);border-color:var(--b2)}
.bd-or{background:rgba(249,115,22,.1);color:#f97316;border-color:rgba(249,115,22,.25)}

/* Tier badges */
.tbadge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;font-size:15px;flex-shrink:0;border:1px solid rgba(255,255,255,.08)}
.tbadge.lg{width:48px;height:48px;font-size:25px;border-radius:11px}
.tb-tin{background:linear-gradient(135deg,#1f2122,#374151)}.tb-bro{background:linear-gradient(135deg,#1c0f00,#78350f)}
.tb-sil{background:linear-gradient(135deg,#0f1520,#334155)}.tb-gol{background:linear-gradient(135deg,#1c1400,#92400e);box-shadow:0 0 8px rgba(245,158,11,.2)}
.tb-pla{background:linear-gradient(135deg,#001220,#075985);box-shadow:0 0 8px rgba(14,165,233,.2)}.tb-dia{background:linear-gradient(135deg,#0f0520,#4c1d95);box-shadow:0 0 10px rgba(139,92,246,.3)}
.tb-val{background:linear-gradient(135deg,#1c0000,#7f1d1d);box-shadow:0 0 12px rgba(239,68,68,.3)}

/* Loading */
.spin{width:18px;height:18px;border:2px solid var(--b2);border-top-color:var(--ac);border-radius:50%;animation:sp .7s linear infinite;flex-shrink:0}
@keyframes sp{to{transform:rotate(360deg)}}
.ld{display:flex;align-items:center;justify-content:center;gap:10px;padding:48px 20px;color:var(--tx3);font-size:13px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:48px 20px;color:var(--tx3);text-align:center}
.empty-ico{font-size:34px;opacity:.35}.empty-t{font-size:15px;font-weight:600;color:var(--tx2)}.empty-s{font-size:13px}
.err-box{background:var(--rdim);border:1px solid rgba(239,68,68,.2);border-radius:var(--rmd);padding:11px 15px;font-size:13px;color:#fca5a5}

/* Toast */
.toast-wrap{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.toast{background:var(--s3);border:1px solid var(--b2);border-radius:var(--rlg);padding:9px 17px;font-size:13px;font-weight:500;box-shadow:0 8px 32px rgba(0,0,0,.6);animation:ti .2s var(--ease);white-space:nowrap}
.toast.ok{border-color:rgba(16,185,129,.3);color:var(--green)}.toast.err{border-color:rgba(239,68,68,.3);color:var(--red)}
@keyframes ti{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── LEADERBOARD TABLE ───────────────────────────────────────── */
.lb-wrap{overflow-x:auto}
.lb-tbl{width:100%;border-collapse:collapse}
.lb-tbl th{padding:9px 13px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx3);text-align:left;border-bottom:1px solid var(--b1);white-space:nowrap;background:var(--s1)}
.lb-tbl td{border-bottom:1px solid var(--b1);vertical-align:middle}
.lb-tbl tbody tr:last-child td{border-bottom:none}
.lb-ri{display:flex;align-items:center;padding:10px 13px;cursor:pointer;transition:background .1s;overflow:hidden}
.lb-tbl tbody tr:hover .lb-ri{background:rgba(255,255,255,.04)}
.lb-tbl tr.r1 .lb-ri{background:rgba(108,99,255,.04)}.lb-tbl tr.r2 .lb-ri{background:rgba(108,99,255,.02)}.lb-tbl tr.r3 .lb-ri{background:rgba(108,99,255,.02)}
.lb-rk{width:48px;font-family:var(--fd);font-size:13px;font-weight:700;color:var(--tx3);flex-shrink:0}
.lb-rk.t1{font-size:17px;color:var(--gold)}.lb-rk.t2{font-size:15px;color:var(--t-sil)}.lb-rk.t3{font-size:15px;color:var(--t-bro)}
.lb-tc{width:40px;flex-shrink:0;display:flex}.lb-rc{width:58px;flex-shrink:0;font-size:11px;font-weight:600;color:var(--tx3)}
.lb-pc{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.lb-pn{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-gc{width:65px;text-align:right;font-size:12px;color:var(--tx2);flex-shrink:0}
.lb-wlc{width:148px;flex-shrink:0;padding:0 8px}
.wls{display:flex;flex-direction:column;gap:3px}
.wlb{display:flex;height:4px;border-radius:2px;overflow:hidden;gap:1px}
.wlbw{background:var(--green);border-radius:2px;min-width:2px}.wlbl{background:var(--red);border-radius:2px;min-width:0}
.wln{display:flex;justify-content:space-between;font-size:10px;font-weight:600}
.wlnw{color:var(--green)}.wlnl{color:var(--red)}
.lb-wrc{width:72px;text-align:right;font-size:13px;font-weight:700;flex-shrink:0}
.lb-ec{width:142px;text-align:right;flex-shrink:0;padding-right:4px}
.em{font-family:var(--fd);font-size:16px;font-weight:700}.ep{font-size:11px;color:var(--tx3);margin-top:1px}

/* ── HERO HOME ───────────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,var(--s1),var(--bg2));border:1px solid var(--b1);border-radius:var(--rxl);padding:40px 32px;margin-bottom:20px;position:relative;overflow:hidden;text-align:center}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(108,99,255,.1),transparent);pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--acdim);border:1px solid var(--b3);color:var(--ac2);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:var(--rfl);margin-bottom:16px}
.ldot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:pl 2s infinite}
@keyframes pl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
.hero-title{font-family:var(--fd);font-size:clamp(24px,4.5vw,44px);font-weight:700;letter-spacing:-1.5px;line-height:1.1;margin-bottom:12px}
.hero-title em{font-style:normal;color:var(--ac2)}
.hero-sub{font-size:15px;color:var(--tx2);max-width:440px;margin:0 auto 22px;line-height:1.6}
.hero-srch-rel{position:relative;max-width:500px;margin:0 auto 14px}
.hero-srch{display:flex;gap:7px;background:var(--bg3);border:1.5px solid var(--b2);border-radius:var(--rxl);padding:5px 5px 5px 18px;transition:all .2s}
.hero-srch:focus-within{border-color:var(--ba);box-shadow:0 0 0 3px var(--acdim)}
.hero-srch input{flex:1;background:none;border:none;outline:none;font-size:14px;color:var(--tx1);padding:7px 0}.hero-srch input::placeholder{color:var(--tx3)}
.chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.chip{background:var(--bg4);border:1px solid var(--b2);color:var(--tx2);padding:3px 11px;border-radius:var(--rfl);font-size:12px;font-weight:500;cursor:pointer;transition:all .12s}
.chip:hover{border-color:var(--b3);color:var(--tx1);background:var(--s2)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px;margin-bottom:20px}
.kpi{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rlg);padding:17px;text-align:center;transition:all .2s}
.kpi:hover{border-color:var(--b3);transform:translateY(-2px);box-shadow:0 0 20px var(--acglow)}
.kpi-v{font-family:var(--fd);font-size:1.8rem;font-weight:700;color:var(--ac2);letter-spacing:-1px;margin-bottom:3px}
.kpi-l{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--tx3)}

/* Favourites */
.fav-list{display:flex;gap:7px;flex-wrap:wrap;padding:13px}
.fav-c{display:flex;align-items:center;gap:7px;background:var(--s2);border:1px solid var(--b2);border-radius:var(--rfl);padding:5px 12px 5px 5px;cursor:pointer;transition:all .12s;font-size:13px;font-weight:500;color:var(--tx2)}
.fav-c:hover{border-color:var(--b3);color:var(--tx1)}
.fav-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff;flex-shrink:0}
.fav-x{margin-left:3px;color:var(--tx4);font-size:13px;line-height:1;transition:color .12s}.fav-x:hover{color:var(--red)}

/* Suggest */
.sug-box{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--s2);border:1px solid var(--b2);border-radius:var(--rlg);overflow:hidden;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,.6)}
.sug-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--b1)}
.sug-item:last-child{border-bottom:none}.sug-item:hover{background:var(--sh)}

/* ── PROFILE ─────────────────────────────────────────────────── */
.prof-hdr{background:linear-gradient(135deg,var(--s1),var(--bg2));border:1px solid var(--b1);border-radius:var(--rxl);padding:22px;display:flex;align-items:flex-start;gap:18px;margin-bottom:16px;position:relative;overflow:hidden}
.prof-hdr::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 0% 50%,rgba(108,99,255,.06),transparent);pointer-events:none}
.prof-av{width:74px;height:74px;border-radius:var(--rlg);border:2px solid var(--b3);overflow:hidden;flex-shrink:0;background:var(--bg4);box-shadow:0 0 20px var(--acglow)}
.prof-av img{width:100%;height:100%;object-fit:cover}
.prof-name{font-family:var(--fd);font-size:22px;font-weight:700;letter-spacing:-.5px;margin-bottom:7px}
.prof-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1px;background:var(--b1);border-radius:var(--rmd);overflow:hidden;margin-bottom:16px}
.psc{background:var(--s1);padding:12px 14px;transition:background .15s}.psc:hover{background:var(--s2)}
.psl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx3);margin-bottom:3px}
.psv{font-family:var(--fd);font-size:18px;font-weight:700}.psv.gn{color:var(--green)}.psv.rd{color:var(--red)}.psv.ac{color:var(--ac2)}.psv.gd{color:var(--gold)}

/* Ranked card */
.rc-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rxl);overflow:hidden;margin-bottom:16px}
.rc-hdr{padding:18px 22px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--b1)}
.rc-tier-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px}
.rc-elo{font-family:var(--fd);font-size:2rem;font-weight:700;letter-spacing:-1px;color:var(--ac2);line-height:1}
.rc-pk{font-size:13px;color:var(--tx3);margin-left:6px}
.rc-wl{padding:13px 22px;border-bottom:1px solid var(--b1)}
.rc-wlb{display:flex;height:7px;border-radius:4px;overflow:hidden;gap:2px;margin-bottom:7px}
.rc-wlb .wlbw{border-radius:4px}.rc-wlb .wlbl{border-radius:4px}
.rc-wln{display:flex;justify-content:space-between;font-size:12px;font-weight:600}
.rc-glory{padding:13px 22px;display:flex;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--b1)}
.gi-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx3);margin-bottom:2px}
.gi-v{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--gold)}.gi-v.nt{color:var(--tx1)}
.elo-bar-s{padding:0 22px 14px}
.elo-segs{display:flex;height:9px;border-radius:5px;overflow:hidden;position:relative}
.elo-seg{height:100%}
.elo-gp{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;margin-top:-8px;transform:translateX(-50%);transition:left .6s var(--ease)}
.elo-lbls{display:flex;justify-content:space-between;margin-top:5px;font-size:10px;color:var(--tx4)}

/* Legends table */
.leg-t{width:100%;border-collapse:collapse}
.leg-t th{padding:9px 12px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx3);text-align:left;border-bottom:1px solid var(--b1);white-space:nowrap;cursor:pointer;user-select:none;transition:color .12s}
.leg-t th:hover{color:var(--tx2)}.leg-t th.srt{color:var(--ac2)}
.leg-t td{padding:9px 12px;border-bottom:1px solid var(--b1);vertical-align:middle;font-size:13px}
.leg-t tr:last-child td{border-bottom:none}.leg-t tbody tr:hover td{background:rgba(255,255,255,.02)}
.lc{display:flex;align-items:center;gap:9px}
.lic{width:30px;height:30px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:13px}
.lic img{width:100%;height:100%;object-fit:cover}
.ln{font-weight:600}.lw{font-size:11px;color:var(--tx3);margin-top:1px}
.wr-mini{display:flex;align-items:center;gap:7px}
.wr-tr{height:3px;border-radius:2px;background:var(--bg4);overflow:hidden;min-width:55px}
.wr-fi{height:100%;border-radius:2px}

/* Gadgets */
.gad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;padding:16px}
.gad-c{background:var(--s2);border:1px solid var(--b1);border-radius:var(--rlg);padding:14px 10px;text-align:center;transition:all .2s}
.gad-c:hover{border-color:var(--b3);transform:translateY(-2px);background:var(--s3)}
.gad-i{font-size:26px;margin-bottom:7px;display:block}
.gad-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx3);margin-bottom:5px}
.gad-v{font-family:var(--fd);font-size:18px;font-weight:700}.gad-s{font-size:11px;color:var(--tx3);margin-top:2px}

/* Tabs */
.tabs-bar{display:flex;gap:2px;background:var(--bg3);padding:3px;border-radius:var(--rmd);width:fit-content}
.tb{padding:5px 14px;border-radius:6px;font-size:13px;font-weight:500;color:var(--tx2);cursor:pointer;transition:all .12s;border:1px solid transparent}
.tb:hover{color:var(--tx1)}.tb.active{background:var(--s2);color:var(--tx1);border-color:var(--b2);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* Section header */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.sh-t{font-family:var(--fd);font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.sh-bar{width:3px;height:16px;border-radius:2px;background:var(--ac);flex-shrink:0}

/* Pagination */
.pagination{display:flex;align-items:center;gap:3px;padding:13px;justify-content:center;flex-wrap:wrap}
.pg-btn{width:33px;height:33px;display:flex;align-items:center;justify-content:center;border-radius:var(--rmd);font-size:13px;font-weight:600;color:var(--tx2);background:var(--s2);border:1px solid var(--b1);cursor:pointer;transition:all .12s}
.pg-btn:hover{border-color:var(--b3);color:var(--tx1)}.pg-btn.active{background:var(--ac);border-color:var(--ac);color:#fff}.pg-btn:disabled{opacity:.3;cursor:not-allowed}

/* Legends page */
.leg-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px}
.lsg-c{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rlg);padding:13px;transition:all .2s}
.lsg-c:hover{border-color:var(--b3);transform:translateY(-2px)}
.lsg-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.lsg-ico{width:36px;height:36px;border-radius:9px;overflow:hidden;flex-shrink:0;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:15px}
.lsg-ico img{width:100%;height:100%;object-fit:cover}
.lsg-n{font-weight:700;font-size:13px}.lsg-w{font-size:11px;color:var(--tx3)}
.lsg-r{display:flex;justify-content:space-between;font-size:12px;margin-top:5px}

/* XP bar */
.xp-bw{display:flex;align-items:center;gap:7px}.xp-b{flex:1;height:4px;border-radius:2px;background:var(--bg4);overflow:hidden;min-width:70px}.xp-bf{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--ac),var(--ac2))}

/* Compare */
.cmp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start}

/* Scroll top */
.scroll-top{position:fixed;bottom:18px;right:18px;width:36px;height:36px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;opacity:0;transform:scale(.7);transition:all .2s var(--ease);box-shadow:0 0 16px var(--acglow);z-index:90}
.scroll-top.vis{opacity:1;transform:scale(1)}.scroll-top:hover{transform:scale(1.1)!important}

/* Sidebar overlay */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;backdrop-filter:blur(3px)}

/* Mobile */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}
  .sb-overlay.open{display:block}
  .main{margin-left:0}.menu-btn{display:flex}.content{padding:13px}
  .hero{padding:26px 16px}.kpis{grid-template-columns:repeat(2,1fr)}
  .prof-hdr{flex-direction:column}
  .cmp-grid{grid-template-columns:1fr}
  #compareInputs{grid-template-columns:1fr!important}
  .topbar{padding:0 13px}
}

/* Custom lang dropdown */
.lang-custom{position:relative;margin-bottom:5px;}
.lang-btn{display:flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--rmd);padding:6px 10px;cursor:pointer;transition:border-color .2s;}
.lang-btn:hover{border-color:var(--b3);}
.lang-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--s2);border:1px solid var(--b2);border-radius:var(--rmd);overflow:hidden;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.7);max-height:280px;overflow-y:auto;}
.lang-opt{display:flex;align-items:center;gap:9px;padding:8px 11px;cursor:pointer;font-size:13px;color:var(--tx2);transition:background .1s;}
.lang-opt:hover{background:var(--sh);color:var(--tx1);}
.lang-opt.active{color:var(--ac2);background:var(--acdim);}
.lang-opt img{width:18px;height:13px;border-radius:2px;object-fit:cover;flex-shrink:0;}

/* Utils */
.c-gn{color:var(--green)}.c-rd{color:var(--red)}.c-gd{color:var(--gold)}.c-ac{color:var(--ac2)}.c-dim{color:var(--tx3)}.fw7{font-weight:700}.fd{font-family:var(--fd)}

/* RANK BANNER IMAGES */
.rank-img{width:28px;height:38px;object-fit:contain;flex-shrink:0;}
.rank-img.lg{width:52px;height:70px;}
.rank-img.xl{width:64px;height:86px;}
/* ── LIGHT THEME ─────────────────────────────────────────────────── */
[data-theme="light"]{
  --bg0:#f0f2f8;--bg1:#ffffff;--bg2:#f5f6fc;--bg3:#eaecf5;--bg4:#dde0ee;
  --s1:#ffffff;--s2:#f5f6fc;--s3:#eaecf5;--sh:rgba(200,205,230,.5);
  --ac:#5b53f0;--ac2:#6c63ff;--acdim:rgba(108,99,255,.10);--acglow:rgba(108,99,255,.2);
  --green:#059669;--gdim:rgba(5,150,105,.10);
  --red:#dc2626;--rdim:rgba(220,38,38,.10);
  --gold:#d97706;--cyan:#0891b2;
  --t-tin:#6b7280;--t-bro:#92400e;--t-sil:#64748b;--t-gol:#b45309;--t-pla:#0369a1;--t-dia:#6d28d9;--t-val:#b91c1c;
  --tx1:#1e2035;--tx2:#4a5270;--tx3:#8890b0;--tx4:#b8bdd8;
  --b1:rgba(0,0,0,.08);--b2:rgba(0,0,0,.12);--b3:rgba(108,99,255,.25);--ba:rgba(108,99,255,.5);
}
[data-theme="light"] body{background:var(--bg0);color:var(--tx1);}
[data-theme="light"] ::-webkit-scrollbar-track{background:var(--bg2);}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--bg4);}
[data-theme="light"] .sidebar{background:var(--bg1);border-color:var(--b1);}
[data-theme="light"] .topbar{background:var(--bg1);border-color:var(--b1);}
[data-theme="light"] .srch-box{background:var(--bg3);}
[data-theme="light"] .srch-box input{color:var(--tx1);}
[data-theme="light"] .hero{background:linear-gradient(135deg,#fff,var(--bg2));}
[data-theme="light"] .card{background:var(--s1);border-color:var(--b1);}
[data-theme="light"] .lb-tbl th{background:var(--s1);}
[data-theme="light"] .lb-tbl tbody tr:hover .lb-ri{background:rgba(0,0,0,.04);}
[data-theme="light"] select{background:var(--s1)!important;color:var(--tx2)!important;}
[data-theme="light"] select option{background:var(--s1);}
[data-theme="light"] .toast{background:var(--s3);border-color:var(--b2);}
[data-theme="light"] .sug-box{background:var(--s2);border-color:var(--b2);}
[data-theme="light"] .lang-menu{background:var(--s2);border-color:var(--b2);}
[data-theme="light"] .psc{background:var(--s1);}
[data-theme="light"] .psc:hover{background:var(--s2);}
[data-theme="light"] .rc-card{background:var(--s1);}
[data-theme="light"] .gad-c{background:var(--s2);}
[data-theme="light"] .gad-c:hover{background:var(--s3);}
[data-theme="light"] .lsg-c{background:var(--s1);}
[data-theme="light"] .chip{background:var(--bg4);border-color:var(--b2);}
[data-theme="light"] .chip:hover{background:var(--s3);}
[data-theme="light"] .fav-c{background:var(--s2);border-color:var(--b2);}
[data-theme="light"] .btn-g{border-color:var(--b2);}
[data-theme="light"] input[type="text"]{background:var(--s1)!important;color:var(--tx1)!important;}

/* ── THEME TOGGLE BUTTON ─────────────────────────────────────────── */
.theme-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--rmd);background:var(--bg3);border:1px solid var(--b2);color:var(--tx2);font-size:16px;cursor:pointer;transition:all .2s var(--ease);flex-shrink:0;}
.theme-btn:hover{background:var(--s2);border-color:var(--b3);transform:scale(1.05);}

/* ── SEARCH HISTORY ──────────────────────────────────────────────── */
.history-list{display:flex;gap:7px;flex-wrap:wrap;padding:13px;}

/* ── COPY LINK BUTTON ────────────────────────────────────────────── */
.copy-link-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--rmd);font-size:12px;font-weight:600;background:rgba(108,99,255,.12);border:1px solid rgba(108,99,255,.25);color:var(--ac2);cursor:pointer;transition:all .2s;white-space:nowrap;}
.copy-link-btn:hover{background:rgba(108,99,255,.22);transform:translateY(-1px);}