@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
:root {
  --bg:#0E2027; --bg2:#0A171C; --surface:#16303A; --surface2:#1E4150;
  --line:rgba(255,255,255,.08); --gold:#F2B93B; --gold2:#F7D27A;
  --coral:#FF6B4A; --green:#3FD68A; --text:#EAF2F1; --muted:#8FAAAB;
}
html,body { margin:0; }
body {
  font-family:'Inter',system-ui,sans-serif; color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%, #1a3a45 0%, var(--bg) 45%, var(--bg2) 100%);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.disp { font-family:'Bricolage Grotesque',sans-serif; letter-spacing:-.02em; }
.tnum { font-variant-numeric:tabular-nums; }

.shell { max-width:940px; margin:0 auto; padding:24px 18px 60px; }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px; width:400px; max-width:100%; }

.brand { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.coin { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:22px;
  background:radial-gradient(circle at 32% 28%, var(--gold2), var(--gold) 55%, #C9902A);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.25), 0 6px 14px rgba(242,185,59,.25); }
.avatar { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:16px; color:#0E2027; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.tabs { display:flex; gap:6px; background:var(--surface); border:1px solid var(--line); padding:5px; border-radius:14px; flex-wrap:wrap; margin-bottom:20px; }
.tab { border:0; background:transparent; color:var(--muted); font-weight:600; font-size:13.5px; padding:9px 14px; border-radius:10px; cursor:pointer; }
.tab.on { background:var(--gold); color:#0E2027; }
.ghost { background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:10px; padding:9px 13px; cursor:pointer; font-weight:600; font-size:13px; }
.ghost:hover { color:var(--text); border-color:var(--gold); }

.grid { display:grid; gap:14px; }
.g2 { grid-template-columns:1fr 1fr; }
.g3 { grid-template-columns:repeat(3,1fr); }
@media(max-width:640px){ .g2,.g3 { grid-template-columns:1fr; } }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; }
.eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.muted { color:var(--muted); }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface2); border:1px solid var(--line); }
.btn { background:var(--gold); color:#0E2027; border:0; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer; font-size:14px; }
.btn:hover { background:var(--gold2); }
.btn.full { width:100%; }
.btn.coral { background:var(--coral); color:#2a0d06; }
.btn.coral:hover { filter:brightness(1.08); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.input { width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:11px; padding:12px 13px; font-size:15px; font-family:inherit; }
.input:focus { outline:none; border-color:var(--gold); }
.label { font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px; display:block; }
.err { color:var(--coral); font-size:12.5px; margin-top:8px; }
.userbtn { display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-top:10px;
  color:var(--text); transition:transform .12s, border-color .12s; }
.userbtn:hover { transform:translateY(-2px); border-color:var(--gold); }

.mv { display:flex; align-items:center; justify-content:space-between; padding:12px 2px; border-bottom:1px solid var(--line); }
.mv:last-child { border-bottom:0; }
.mvicon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:15px; margin-right:12px; }
.plus { color:var(--green); font-weight:700; }
.minus { color:var(--coral); font-weight:700; }

.friend { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.friend:last-child { border-bottom:0; }
.streakwrap { display:flex; gap:3px; margin-top:6px; flex-wrap:wrap; }
.dot { width:14px; height:14px; border-radius:4px; background:var(--surface2); }
.dot.hit { background:linear-gradient(180deg,var(--coral),#e0431f); }

.jar { position:relative; height:130px; border-radius:16px; border:1px solid var(--line); overflow:hidden; background:var(--bg2); }
.jarfill { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(180deg,rgba(242,185,59,.85),rgba(242,185,59,.55)); transition:height .4s; }

.rank { display:flex; align-items:center; gap:12px; padding:12px 0; }
.rankbar { height:26px; border-radius:8px; background:linear-gradient(90deg,var(--gold),var(--gold2)); min-width:26px; display:flex; align-items:center; justify-content:flex-end; padding:0 8px; color:#0E2027; font-weight:800; font-size:12px; }
.medal { width:26px; text-align:center; font-size:16px; }

.linkbtn { background:none; border:0; color:var(--gold); cursor:pointer; font-weight:600; font-size:13px; padding:0; }
.tabsauth { display:flex; gap:6px; margin-bottom:16px; }