*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ============================== */
/* THEME SYSTEM                   */
/* ============================== */

/* Midnight (Default Dark) */
[data-theme="midnight"]{
    --bg:#09090b;--bg-elevated:#18181b;--bg-hover:#27272a;
    --border:#27272a;--border-subtle:#1f1f23;
    --text:#fafafa;--text-dim:#a1a1aa;--text-muted:#52525b;
    --accent:#7fba24;--accent-dim:rgba(127,186,36,.12);--accent-hover:#6ea31e;
    --green:#22c55e;--green-dim:rgba(34,197,94,.12);
    --red:#ef4444;--red-dim:rgba(239,68,68,.12);
    --gold:#eab308;--gold-dim:rgba(234,179,8,.12);
    --blue:#3b82f6;--blue-dim:rgba(59,130,246,.12);
    --glass:rgba(9,9,11,.85);--shadow:rgba(0,0,0,.4);
    --grain-opacity:0.4;--card-hover:#3f3f46;
}

/* Light */
[data-theme="light"]{
    --bg:#f8fafc;--bg-elevated:#ffffff;--bg-hover:#f1f5f9;
    --border:#e2e8f0;--border-subtle:#f1f5f9;
    --text:#0f172a;--text-dim:#475569;--text-muted:#94a3b8;
    --accent:#6ea31e;--accent-dim:rgba(110,163,30,.08);--accent-hover:#5d8c18;
    --green:#16a34a;--green-dim:rgba(22,163,74,.08);
    --red:#dc2626;--red-dim:rgba(220,38,38,.08);
    --gold:#ca8a04;--gold-dim:rgba(202,138,4,.08);
    --blue:#2563eb;--blue-dim:rgba(37,99,235,.08);
    --glass:rgba(248,250,252,.9);--shadow:rgba(0,0,0,.08);
    --grain-opacity:0;--card-hover:#cbd5e1;
}

/* Cyberpunk */
[data-theme="cyberpunk"]{
    --bg:#0a0014;--bg-elevated:#150028;--bg-hover:#200040;
    --border:#2d005a;--border-subtle:#1a0033;
    --text:#e0d0ff;--text-dim:#a080d0;--text-muted:#604090;
    --accent:#ff00ff;--accent-dim:rgba(255,0,255,.12);--accent-hover:#cc00cc;
    --green:#00ff88;--green-dim:rgba(0,255,136,.12);
    --red:#ff3366;--red-dim:rgba(255,51,102,.12);
    --gold:#ffcc00;--gold-dim:rgba(255,204,0,.12);
    --blue:#00ccff;--blue-dim:rgba(0,204,255,.12);
    --glass:rgba(10,0,20,.85);--shadow:rgba(255,0,255,.15);
    --grain-opacity:0.3;--card-hover:#3d006a;
}

/* Retro */
[data-theme="retro"]{
    --bg:#1a1410;--bg-elevated:#2a2218;--bg-hover:#3a3020;
    --border:#4a3e28;--border-subtle:#332a1c;
    --text:#f5e6c8;--text-dim:#c4a875;--text-muted:#8a7450;
    --accent:#e8a020;--accent-dim:rgba(232,160,32,.12);--accent-hover:#d09018;
    --green:#7ab648;--green-dim:rgba(122,182,72,.12);
    --red:#cc4444;--red-dim:rgba(204,68,68,.12);
    --gold:#e8c820;--gold-dim:rgba(232,200,32,.12);
    --blue:#5588cc;--blue-dim:rgba(85,136,204,.12);
    --glass:rgba(26,20,16,.88);--shadow:rgba(0,0,0,.5);
    --grain-opacity:0.5;--card-hover:#5a4e38;
}

/* Ocean */
[data-theme="ocean"]{
    --bg:#0c1222;--bg-elevated:#131d33;--bg-hover:#1a2844;
    --border:#1e3355;--border-subtle:#152640;
    --text:#e0eaf5;--text-dim:#8aa4c8;--text-muted:#4a6a8a;
    --accent:#00b4d8;--accent-dim:rgba(0,180,216,.12);--accent-hover:#0090b0;
    --green:#2dd4bf;--green-dim:rgba(45,212,191,.12);
    --red:#f472b6;--red-dim:rgba(244,114,182,.12);
    --gold:#fbbf24;--gold-dim:rgba(251,191,36,.12);
    --blue:#60a5fa;--blue-dim:rgba(96,165,250,.12);
    --glass:rgba(12,18,34,.88);--shadow:rgba(0,0,0,.4);
    --grain-opacity:0.25;--card-hover:#2a3d60;
}

/* Mint */
[data-theme="mint"]{
    --bg:#0d4d47;--bg-elevated:#0f5e55;--bg-hover:#126b60;
    --border:#1a7a6d;--border-subtle:#14675d;
    --text:#d0f5f0;--text-dim:#7fd9ce;--text-muted:#4a9f95;
    --accent:#2dd4bf;--accent-dim:rgba(45,212,191,.12);--accent-hover:#1ec9b4;
    --green:#10b981;--green-dim:rgba(16,185,129,.12);
    --red:#f87171;--red-dim:rgba(248,113,113,.12);
    --gold:#fbbf24;--gold-dim:rgba(251,191,36,.12);
    --blue:#38bdf8;--blue-dim:rgba(56,189,248,.12);
    --glass:rgba(13,77,71,.88);--shadow:rgba(0,0,0,.3);
    --grain-opacity:0.2;--card-hover:#0f7868;
}

/* Sunset */
[data-theme="sunset"]{
    --bg:#4a1a2a;--bg-elevated:#5f2438;--bg-hover:#72284a;
    --border:#8a3a5a;--border-subtle:#6a2a47;
    --text:#fce0e6;--text-dim:#d9a3b0;--text-muted:#a87085;
    --accent:#f472b6;--accent-dim:rgba(244,114,182,.12);--accent-hover:#ec4899;
    --green:#34d399;--green-dim:rgba(52,211,153,.12);
    --red:#fb7185;--red-dim:rgba(251,113,133,.12);
    --gold:#fcd34d;--gold-dim:rgba(252,211,77,.12);
    --blue:#67e8f9;--blue-dim:rgba(103,232,249,.12);
    --glass:rgba(74,26,42,.88);--shadow:rgba(0,0,0,.4);
    --grain-opacity:0.3;--card-hover:#8a3a5a;
}

/* Forest */
[data-theme="forest"]{
    --bg:#1a3a2a;--bg-elevated:#1f4a38;--bg-hover:#275a48;
    --border:#2f6a58;--border-subtle:#265544;
    --text:#d4f0e5;--text-dim:#8fbfaf;--text-muted:#5a8f7f;
    --accent:#6ee7b7;--accent-dim:rgba(110,231,183,.12);--accent-hover:#5dd4a8;
    --green:#34d399;--green-dim:rgba(52,211,153,.12);
    --red:#f87171;--red-dim:rgba(248,113,113,.12);
    --gold:#fcd34d;--gold-dim:rgba(252,211,77,.12);
    --blue:#56cde1;--blue-dim:rgba(86,205,225,.12);
    --glass:rgba(26,58,42,.88);--shadow:rgba(0,0,0,.35);
    --grain-opacity:0.25;--card-hover:#2f7a68;
}

/* ovos CI */
[data-theme="ovos"]{
    --bg:#003c1e;--bg-elevated:#004d27;--bg-hover:#005e30;
    --border:#007a3e;--border-subtle:#006432;
    --text:#e0f5ea;--text-dim:#8fccaa;--text-muted:#5a9975;
    --accent:#7fba24;--accent-dim:rgba(127,186,36,.15);--accent-hover:#6ea31e;
    --green:#7fba24;--green-dim:rgba(127,186,36,.12);
    --red:#f87171;--red-dim:rgba(248,113,113,.12);
    --gold:#fcd34d;--gold-dim:rgba(252,211,77,.12);
    --blue:#60d4a0;--blue-dim:rgba(96,212,160,.12);
    --glass:rgba(0,60,30,.88);--shadow:rgba(0,0,0,.4);
    --grain-opacity:0.2;--card-hover:#008a48;
}

/* ovos play CI */
[data-theme="ovosplay"]{
    --bg:#0032a0;--bg-elevated:#003db8;--bg-hover:#0048d0;
    --border:#1060e0;--border-subtle:#004cc8;
    --text:#e0f0ff;--text-dim:#8cc4f0;--text-muted:#5a90c0;
    --accent:#1bbcef;--accent-dim:rgba(27,188,239,.15);--accent-hover:#12a5d6;
    --green:#34d399;--green-dim:rgba(52,211,153,.12);
    --red:#f87171;--red-dim:rgba(248,113,113,.12);
    --gold:#fcd34d;--gold-dim:rgba(252,211,77,.12);
    --blue:#1bbcef;--blue-dim:rgba(27,188,239,.12);
    --glass:rgba(0,50,160,.88);--shadow:rgba(0,0,0,.4);
    --grain-opacity:0.2;--card-hover:#1868e8;
}

:root{
    --font:'Space Grotesk',system-ui,sans-serif;
    --mono:'JetBrains Mono',monospace;
    --r:14px;--r-sm:10px;
}

body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    background-repeat:repeat;opacity:var(--grain-opacity)}

/* ===== Loading ===== */
#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);z-index:9999}
.spin{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-label{color:var(--text-muted);font-size:13px;margin-top:16px;letter-spacing:.04em}

/* ===== Auth ===== */
#auth{display:none;min-height:100dvh;align-items:center;justify-content:center;padding:24px;
    background:radial-gradient(ellipse at 50% 0%,var(--accent-dim) 0%,transparent 60%)}
#auth.show{display:flex}
.auth-box{background:var(--bg-elevated);border:1px solid var(--border);border-radius:24px;padding:48px 40px;text-align:center;max-width:420px;width:100%;position:relative;overflow:hidden}
.auth-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.auth-icon{font-size:48px;margin-bottom:20px;display:block}
.auth-title{font-size:28px;font-weight:700;letter-spacing:-.03em}
.auth-sub{color:var(--text-dim);font-size:14px;margin:8px 0 24px;line-height:1.5}
.auth-badge{display:inline-flex;align-items:center;gap:6px;background:var(--accent-dim);color:var(--accent);padding:6px 14px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.02em;margin-bottom:28px}
.g_id_signin,.auth-box [id^="g_id"]{display:flex!important;justify-content:center}
.dev-section{border-top:1px solid var(--border);padding-top:20px;margin-top:20px}
.dev-title{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:320px;overflow-y:auto;padding:2px}
.dev-btn{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;color:var(--text);font-size:13px;font-family:var(--font);cursor:pointer;transition:.15s;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-btn:hover{border-color:var(--accent);background:var(--accent-dim)}

/* ===== App Shell ===== */
#app{display:none}#app.show{display:block}

/* Header */
.hdr{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:100;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.hdr-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;cursor:pointer;letter-spacing:-.02em}
.hdr-logo{width:28px;height:28px;background:#7fba24;border-radius:8px;display:grid;place-items:center;font-size:16px}
.hdr-right{display:flex;align-items:center;gap:10px}
.hdr-rank{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gold);background:var(--gold-dim);padding:4px 8px;border-radius:6px}
.hdr-elo{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-dim);padding:4px 10px;border-radius:6px}
.hdr-avatar{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);object-fit:cover}

/* Language picker button in header */
.lang-btn{background:none;border:1px solid var(--border);width:42px;height:28px;border-radius:8px;cursor:pointer;display:grid;place-items:center;font-size:12px;font-weight:700;transition:.15s;position:relative;color:var(--accent)}
.lang-btn:hover{border-color:var(--accent)}
.lang-menu{position:absolute;top:100%;right:0;margin-top:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:6px;min-width:120px;box-shadow:0 8px 32px var(--shadow);z-index:200;display:none}
.lang-menu.show{display:block}
.lang-opt{display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);transition:.15s;border:none;background:none;width:100%;font-family:var(--font)}
.lang-opt:hover{background:var(--bg-hover)}
.lang-opt.active{color:var(--accent);font-weight:600}

/* Theme picker button in header */
.theme-btn{background:none;border:1px solid var(--border);width:28px;height:28px;border-radius:8px;cursor:pointer;display:grid;place-items:center;font-size:14px;transition:.15s;position:relative}
.theme-btn:hover{border-color:var(--accent)}
.theme-menu{position:absolute;top:100%;right:0;margin-top:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:6px;min-width:160px;box-shadow:0 8px 32px var(--shadow);z-index:200;display:none}
.theme-menu.show{display:block}
.theme-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);transition:.15s;border:none;background:none;width:100%;font-family:var(--font)}
.theme-opt:hover{background:var(--bg-hover)}
.theme-opt.active{color:var(--accent);font-weight:600}
.theme-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);flex-shrink:0}

.hdr-logout{background:none;border:1px solid var(--border);color:var(--text-muted);padding:5px 10px;border-radius:6px;font-size:12px;font-family:var(--font);cursor:pointer;transition:.15s}
.hdr-logout:hover{border-color:var(--red);color:var(--red)}

/* Nav */
.nav{display:flex;gap:2px;padding:8px 20px;border-bottom:1px solid var(--border-subtle);overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 16px;color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer;border-radius:8px;transition:.15s;white-space:nowrap;text-decoration:none;position:relative}
.nav a:hover{color:var(--text-dim);background:var(--bg-hover)}
.nav a.on{color:var(--text);background:var(--bg-hover)}
.nav a.on::after{content:'';position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);width:16px;height:2px;background:var(--accent);border-radius:1px}
.badge{position:absolute;top:2px;right:2px;width:16px;height:16px;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:50%;display:grid;place-items:center}

/* Main */
.main{max-width:960px;margin:0 auto;padding:24px 20px 120px}

/* Pages */
.pg{display:none;animation:fadeUp .25s ease}.pg.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}}

/* Section title */
.st{font-size:20px;font-weight:700;letter-spacing:-.03em;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.st-sm{font-size:16px}

/* Cards */
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:10px;transition:.15s}
.card:hover{border-color:var(--card-hover)}

/* Stat grid */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:24px}
.stat{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center}
.stat-val{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--accent);line-height:1}
.stat-lbl{color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}

/* Leaderboard */
.lb{display:flex;flex-direction:column;gap:4px}
.lb-row{display:flex;align-items:center;padding:12px 16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);transition:.15s;gap:14px;cursor:pointer}
.lb-row:hover{border-color:var(--accent);transform:translateX(2px)}
.lb-rank{width:32px;height:32px;display:grid;place-items:center;font-weight:700;font-size:14px;border-radius:8px;flex-shrink:0;font-family:var(--mono)}
.lb-rank.r1{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000}
.lb-rank.r2{background:linear-gradient(135deg,#94a3b8,#64748b);color:#000}
.lb-rank.r3{background:linear-gradient(135deg,#d97706,#92400e);color:#fff}
.lb-rank.rx{background:var(--bg);color:var(--text-muted)}
.lb-img{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;object-fit:cover}
.lb-info{flex:1;min-width:0}
.lb-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-rec{font-size:12px;color:var(--text-muted)}
.lb-elo{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--accent);text-align:right}
.lb-me{border-color:var(--accent);background:var(--accent-dim)}

/* Match card */
.mc{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:8px}
.mc.pending{border-left:3px solid var(--gold)}
.mc-top{display:flex;align-items:center;justify-content:center;gap:12px}
.mc-p{text-align:center;flex:1;min-width:0;cursor:pointer}
.mc-p:hover .mc-pn{text-decoration:underline}
.mc-p img{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);margin-bottom:4px;object-fit:cover}
.mc-pn{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-pn.w{color:var(--green)}
.mc-score{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:2px;flex-shrink:0}
.mc-elo{font-family:var(--mono);font-size:12px;font-weight:700;margin-top:2px}
.mc-elo.pos{color:var(--green)}.mc-elo.neg{color:var(--red)}
.mc-meta{text-align:center;font-size:11px;color:var(--text-muted);margin-top:10px}
.mc-actions{display:flex;gap:6px;justify-content:center;margin-top:12px}

/* Buttons */
.btn{padding:8px 18px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;border:none;font-family:var(--font);transition:.15s;display:inline-flex;align-items:center;gap:6px}
.btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:var(--accent-hover);box-shadow:0 0 24px var(--accent-dim)}
.btn-s{background:var(--bg);color:var(--text);border:1px solid var(--border)}.btn-s:hover{border-color:var(--text-muted)}
.btn-ok{background:var(--green);color:#fff}.btn-ok:hover{opacity:.85}
.btn-no{background:var(--red);color:#fff}.btn-no:hover{opacity:.85}
.btn-sm{padding:6px 12px;font-size:12px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* Forms */
.fg{margin-bottom:14px}
.fl{display:block;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.fi,.fs{width:100%;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;font-family:var(--font);transition:.15s;appearance:none}
.fi:focus,.fs:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.fs option{background:var(--bg-elevated);color:var(--text)}

/* Modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(6px);animation:fadeUp .15s ease}
.modal{background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;padding:28px;width:90%;max-width:440px}
.modal-t{font-size:18px;font-weight:700;margin-bottom:18px;letter-spacing:-.02em}

/* Hint */
.hint{background:var(--blue-dim);border:1px solid var(--blue);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--blue);margin-bottom:14px;display:flex;align-items:center;gap:8px;line-height:1.4}

/* Toast */
.toasts{position:fixed;top:68px;right:16px;z-index:300;display:flex;flex-direction:column;gap:6px}
.toast{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:12px 16px;font-size:13px;box-shadow:0 8px 24px var(--shadow);animation:slideR .2s ease;max-width:340px;display:flex;align-items:center;gap:8px}
.toast.ok{border-left:3px solid var(--green)}.toast.err{border-left:3px solid var(--red)}.toast.info{border-left:3px solid var(--blue)}
@keyframes slideR{from{transform:translateX(100%);opacity:0}}

/* Bracket */
.bracket-wrap{overflow-x:auto;padding:16px 0;-webkit-overflow-scrolling:touch}
.bracket{display:flex;gap:32px;min-width:max-content}
.bracket-rd{display:flex;flex-direction:column;justify-content:space-around;gap:12px}
.bracket-rd-t{text-align:center;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.bm{background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;width:200px;overflow:hidden}
.bp{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:12px;border-bottom:1px solid var(--border)}
.bp:last-child{border-bottom:none}
.bp.bw{background:var(--green-dim);color:var(--green);font-weight:600}
.bp.bl{color:var(--text-muted)}
.bp.tbd{color:var(--text-muted);font-style:italic}
.bp-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-s{font-family:var(--mono);font-weight:700;min-width:16px;text-align:right}

/* FAB */
.fab{position:fixed;bottom:24px;right:24px;width:52px;height:52px;background:var(--accent);border-radius:16px;border:none;color:#fff;font-size:24px;cursor:pointer;z-index:50;display:grid;place-items:center;transition:.2s;box-shadow:0 4px 24px var(--accent-dim)}
.fab:hover{transform:scale(1.05)}

/* Empty */
.empty{text-align:center;padding:40px 20px;color:var(--text-muted)}
.empty-icon{font-size:40px;margin-bottom:8px;opacity:.5}
.empty-text{font-size:14px}

/* Tabs */
.tabs{display:flex;gap:3px;margin-bottom:16px}
.tab{padding:7px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:12px;font-weight:500;cursor:pointer;transition:.15s;font-family:var(--font)}
.tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.tab:hover:not(.on){border-color:var(--text-muted)}

/* Info Page Grid */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
@media(max-width:768px){
    .info-grid{grid-template-columns:1fr}
}

/* ELO Explainer */
.elo-box{background:linear-gradient(135deg,var(--bg-elevated),var(--bg-hover));border:1px solid var(--border);border-radius:var(--r);padding:24px;position:relative;overflow:hidden}
.elo-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.elo-formula{font-family:var(--mono);background:var(--bg);padding:10px 14px;border-radius:8px;font-size:13px;color:var(--accent);margin:10px 0;overflow-x:auto}
.elo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.elo-ex{padding:12px;border-radius:8px;font-size:12px}

/* Player tag */
.ptag{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--border);border-radius:99px;padding:3px 10px 3px 3px;font-size:12px}
.ptag img{width:20px;height:20px;border-radius:50%}

/* ===== PROFILE PAGE ===== */
.profile-header{display:flex;align-items:center;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.profile-avatar{width:72px;height:72px;border-radius:50%;border:3px solid var(--accent);object-fit:cover}
.profile-name{font-size:24px;font-weight:700;letter-spacing:-.03em}
.profile-meta{font-size:13px;color:var(--text-dim);margin-top:4px}
.profile-rank-badge{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gold);background:var(--gold-dim);padding:4px 12px;border-radius:8px;display:inline-block;margin-top:6px}
.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px}
.profile-stats .stat{padding:12px}
.profile-stats .stat-val{font-size:22px}

/* ELO Chart */
.elo-chart-wrap{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:20px}
.elo-chart-title{font-size:14px;font-weight:600;margin-bottom:14px;color:var(--text-dim)}
.elo-chart{width:100%;height:200px}

/* Trend indicator */
.trend{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:13px;font-weight:700;padding:4px 10px;border-radius:6px}
.trend.up{color:var(--green);background:var(--green-dim)}
.trend.down{color:var(--red);background:var(--red-dim)}
.trend.flat{color:var(--text-muted);background:var(--bg-hover)}

/* Responsive — Tablet */
@media(max-width:768px){
    .main{padding:20px 16px 120px}
    .stats{grid-template-columns:1fr 1fr}
    .profile-stats{grid-template-columns:1fr 1fr}
    .bracket{gap:20px}
}

/* Responsive — Mobile */
@media(max-width:640px){
    .main{padding:16px 12px 120px}
    .card{padding:14px}
    .mc-score{font-size:22px}
    .auth-box{padding:32px 20px;margin:0 12px}
    .dev-grid{grid-template-columns:1fr}
    .profile-header{gap:14px;flex-direction:column;text-align:center}
    .profile-stats{grid-template-columns:1fr 1fr}
    .hdr{padding:0 12px}
    .hdr-brand span{font-size:15px}
    .modal{padding:22px 18px;width:92%}
    .fab{width:52px;height:52px;font-size:24px;bottom:24px;right:16px}
    .nav{padding:8px 4px}
    .nav-btn{font-size:11px;gap:2px}
    .bracket{gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .toast{max-width:calc(100vw - 32px)}
}

/* Responsive — Small phones */
@media(max-width:380px){
    .main{padding:12px 8px 120px}
    .auth-title{font-size:22px}
    .mc-p img{width:32px;height:32px}
    .mc-score{font-size:18px}
    .stats{grid-template-columns:1fr}
}

/* PWA Install Banner */
.pwa-banner{position:fixed;bottom:0;left:0;right:0;background:var(--bg-elevated);border-top:1px solid var(--border);padding:16px 20px;display:flex;align-items:center;gap:14px;z-index:250;transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -4px 24px var(--shadow)}
.pwa-banner.show{transform:translateY(0)}
.pwa-banner-icon{width:48px;height:48px;border-radius:12px;flex-shrink:0}
.pwa-banner-text{flex:1;min-width:0}
.pwa-banner-title{font-weight:700;font-size:15px;margin-bottom:2px}
.pwa-banner-desc{font-size:13px;color:var(--text-dim);line-height:1.4}
.pwa-banner-actions{display:flex;gap:6px;flex-shrink:0}
@media(max-width:640px){
    .pwa-banner{flex-wrap:wrap;gap:10px;padding:14px 16px}
    .pwa-banner-actions{width:100%;justify-content:stretch}
    .pwa-banner-actions .btn{flex:1;justify-content:center}
}

.hidden{display:none!important}