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

:root{
  --green:#22c55e;
  --green-2:#16a34a;
  --green-deep:#0e7a3a;
  --bg:#0c0e0c;
  --surface:#15181a;
  --surface-2:#1c2022;
  --line:#272c2c;
  --text:#f3f5f4;
  --muted:#9aa3a0;
  --red:#ef4444;
  --shadow:0 2px 10px rgba(0,0,0,.35);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#000;color:var(--text);
  display:flex;justify-content:center;min-height:100vh;
}
#app{
  width:100%;max-width:460px;min-height:100vh;background:var(--bg);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}

/* ---------- header ---------- */
.header{background:linear-gradient(135deg,var(--green) 0%,var(--green-2) 100%);color:#04210f;padding:16px 18px 18px}
.header-top{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:17px;letter-spacing:-.02em;color:#04210f}
.header-top .dots{opacity:.7;font-size:20px;letter-spacing:2px}
.header-main{display:flex;align-items:center;gap:10px;margin-top:14px}
.header-main .h-icon{font-size:20px}
.header-main h1{font-size:26px;font-weight:800;margin:0;letter-spacing:-.03em;color:#04210f}
.header-sub{font-size:13px;opacity:.8;margin-top:2px;color:#063a1c}
.header-actions{margin-left:auto;display:flex;gap:14px;font-size:18px;opacity:.85}

/* ---------- banner ---------- */
.banner{background:var(--surface);border-bottom:1px solid var(--line);border-left:3px solid var(--green);
  color:var(--text);display:flex;align-items:center;gap:12px;padding:12px 16px}
.banner .b-text{font-size:13px;font-weight:600;line-height:1.25;flex:1;color:#cdd4d1}
.banner .b-btn{background:var(--green);color:#04210f;font-weight:800;border:none;border-radius:22px;padding:9px 16px;font-size:13px;cursor:pointer;white-space:nowrap}

/* ---------- content ---------- */
.content{flex:1;background:var(--bg);padding:18px 16px 90px;overflow-y:auto}
.center-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;background:var(--bg);padding:24px}

/* ---------- splash / logo ---------- */
.logo-tile{width:96px;height:96px;border-radius:26px;background:linear-gradient(135deg,var(--green),var(--green-2));
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(34,197,94,.35)}
.logo-tile .mk{font-weight:800;color:#fff;font-size:52px;transform:skewX(-10deg);letter-spacing:-4px}
.logo-name{font-weight:800;color:#fff;font-size:30px;letter-spacing:.04em;margin-top:18px}
.logo-name b{color:var(--green)}
.logo-tag{color:var(--muted);font-size:11px;letter-spacing:.22em;margin-top:4px;text-transform:uppercase}
.splash-tagline{color:var(--green);font-weight:700;margin-top:24px;font-size:17px;line-height:1.4}

/* ---------- generic ---------- */
.muted{color:var(--muted)}
.section-label{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:18px 2px 10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.icon-tile{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;border-radius:14px;
  background:var(--green);color:#04210f;font-weight:800;font-size:16px;padding:15px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--green-2)}
.btn:disabled{background:#26302a;color:#5d665f;cursor:not-allowed}
.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{background:#232827}
.row{display:flex;gap:10px;align-items:center}

/* onboarding */
.progress{height:4px;background:#22282a;border-radius:4px;overflow:hidden;margin-bottom:22px}
.progress > i{display:block;height:100%;background:var(--green);border-radius:4px;transition:.3s}
.q-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.q-head .dot{color:var(--green);font-size:20px}
.q-head h2{font-size:24px;font-weight:800;margin:0;letter-spacing:-.03em}
.q-sub{color:var(--muted);font-size:14px;margin:0 0 20px 0}
.input{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:12px;padding:16px;font-size:16px;outline:none;font-family:inherit}
.input:focus{border-color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:.12s}
.chip:hover{border-color:#3a4140}
.chip.active{border-color:var(--green);color:var(--green);background:rgba(34,197,94,.08)}
.opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:15px 16px;margin-bottom:12px;cursor:pointer;font-weight:600}
.opt .box{width:22px;height:22px;border:2px solid var(--line);border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;color:#04210f}
.opt.active{border-color:var(--green)}
.opt.active .box{background:var(--green);border-color:var(--green)}
.welcome-icon{width:64px;height:64px;border-radius:18px;background:rgba(34,197,94,.12);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 18px}
.welcome-h{font-size:30px;font-weight:800;margin:0 0 10px;letter-spacing:-.03em}
.terms{display:flex;gap:10px;align-items:flex-start;margin:26px 0;font-size:15px;text-align:left}
.terms a{color:var(--green);font-weight:700}
.scoregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}

/* home */
.greet{display:flex;align-items:center;justify-content:space-between}
.greet h2{font-size:30px;font-weight:800;margin:0;letter-spacing:-.03em}
.badge{background:rgba(34,197,94,.14);color:var(--green);font-weight:700;font-size:12px;padding:6px 12px;border-radius:20px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;border-top:3px solid var(--green)}
.stat .lbl{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.stat .val{font-size:26px;font-weight:800;margin-top:6px}
.activity{display:flex;align-items:center;gap:18px}
.act-box{display:flex;align-items:center;gap:10px}
.act-box .em{width:40px;height:40px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:18px}
.week{display:flex;justify-content:space-between;margin-top:14px}
.day{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.day .ring{width:30px;height:30px;border-radius:50%;border:2px solid #2b3130}
.day.done .ring{background:var(--green);border-color:var(--green)}
.day.today .ring{border-color:var(--text)}
.list-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;cursor:pointer;border-left:4px solid var(--green);box-shadow:var(--shadow)}
.list-card .t{font-weight:700;font-size:15px}
.list-card .s{color:var(--muted);font-size:12.5px;margin-top:2px}
.list-card .chev{margin-left:auto;color:#5d665f;font-size:20px}
.pill{font-size:10px;font-weight:800;letter-spacing:.05em;padding:3px 8px;border-radius:6px;color:#04210f;display:inline-block}

/* quiz */
.quiz-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.timer{font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
.qcount{color:var(--muted);font-weight:700;font-size:14px}
.qprompt{font-size:19px;font-weight:700;line-height:1.4;margin:14px 0 20px}
.answer{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:16px;margin-bottom:12px;cursor:pointer;font-size:16px;font-weight:600;transition:.12s}
.answer:hover{border-color:#3a4140}
.answer.sel{border-color:var(--green);color:var(--green)}
.answer.correct{border-color:var(--green);background:rgba(34,197,94,.12);color:var(--green)}
.answer.wrong{border-color:var(--red);background:rgba(239,68,68,.12);color:#fca5a5}
.expl{font-size:14px;color:#c9d1ce;background:var(--surface-2);border-radius:10px;padding:12px;margin:-2px 0 14px}
.result-big{font-size:54px;font-weight:800;color:var(--green);text-align:center;line-height:1}

/* leaderboard */
.tabs{display:flex;gap:10px;margin-bottom:16px}
.tab{flex:1;text-align:center;border-radius:12px;padding:13px;font-weight:700;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.tab.active{background:var(--green);color:#04210f;border-color:var(--green)}
.rankcard{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--surface)}
.rankrow{display:flex;align-items:center;justify-content:space-between}
.lb-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.lb-row.me{border-color:var(--green)}
.lb-row .pos{width:26px;font-weight:800;color:var(--muted);text-align:center}
.lb-row .pts{margin-left:auto;font-weight:800;color:var(--green)}

/* profile */
.avatar{width:74px;height:74px;border-radius:50%;border:3px solid rgba(34,197,94,.4);object-fit:cover;background:var(--surface-2)}
.kv{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.kv .k{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.kv .v{margin-left:auto;font-weight:700}
.bars{display:flex;justify-content:space-between;align-items:flex-end;height:90px;gap:8px;margin-top:10px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:10px}
.bar .b{width:100%;background:#262b2a;border-radius:6px 6px 0 0;min-height:4px}

/* bottom nav */
.nav{position:sticky;bottom:0;background:#0a0c0a;border-top:1px solid var(--line);display:flex;padding:8px 4px}
.nav button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:#6b7370;font-size:11px;font-weight:600;cursor:pointer;padding:6px 0}
.nav button .ic{font-size:20px}
.nav button.active{color:var(--green)}
.footer{text-align:center;color:#5d665f;font-size:13px;padding:12px;background:#0a0c0a}
.demo-note{font-size:11px;color:var(--muted);text-align:center;margin-top:6px}
.hide{display:none !important}

/* ===== СВЕТЛАЯ ТЕМА ===== */
[data-theme="light"] {
  --bg:#f0f7f0;
  --surface:#ffffff;
  --surface-2:#f3f8f3;
  --line:#d4e8d4;
  --text:#0f1f0f;
  --muted:#5a7a5a;
  --shadow:0 2px 10px rgba(0,0,0,.10);
}
[data-theme="light"] body{background:#e8f5e8}
[data-theme="light"] .nav{background:#fff}
[data-theme="light"] .footer{background:#fff}
[data-theme="light"] .chip{background:#fff;color:var(--text)}
[data-theme="light"] .answer{background:#fff}
[data-theme="light"] .opt{background:#fff}
[data-theme="light"] .input{background:#f3f8f3;color:var(--text)}
[data-theme="light"] .tab{background:#fff;color:var(--text)}
[data-theme="light"] .lb-row{background:#fff}
[data-theme="light"] .rankcard{background:#fff}
[data-theme="light"] .banner{background:#e8f5e8;border-left:3px solid var(--green)}
[data-theme="light"] .btn:disabled{background:#c8dcc8;color:#8aaa8a}

/* тема-кнопка в шапке */
.theme-btn{cursor:pointer;font-size:18px;background:rgba(255,255,255,.25);
  border:none;border-radius:50%;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.theme-btn:hover{background:rgba(255,255,255,.4)}

/* логотип на сплэше */
.logo-circle{width:110px;height:110px;border-radius:50%;overflow:hidden;
  box-shadow:0 10px 40px rgba(34,197,94,.4)}
.logo-circle img{width:100%;height:100%;object-fit:cover}