:root {
  --correct-t:#5dd87a; --wrong-t:#f07070; --multi-t:#5ab4f0;
  --radius:14px;
}
html { height:100%; height:-webkit-fill-available; }
body {
  min-height:100dvh; min-height:-webkit-fill-available;
  background:var(--bg); color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  display:flex; justify-content:center; overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}
#app {
  width:100%; max-width:680px; min-height:100dvh; display:flex; flex-direction:column;
  padding:
    calc(var(--safe-top) + clamp(20px,3vh,40px))
    calc(var(--safe-right) + clamp(16px,4vw,48px))
    calc(var(--safe-bottom) + clamp(20px,3vh,40px))
    calc(var(--safe-left) + clamp(16px,4vw,48px));
}

/* topbar */
.topbar { display:flex; align-items:center; gap:10px; margin-bottom:clamp(28px,6vh,52px); }
.logo-badge {
  width:clamp(32px,5vw,42px); height:clamp(32px,5vw,42px);
  background:var(--accent); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(13px,2vw,17px); font-weight:900; color:#fff;
  flex-shrink:0; font-family:monospace; letter-spacing:-1px;
}
.logo-text {
  font-size:clamp(10px,1.5vw,12px); font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--muted);
}

/* streak */
.streak-panel { display:none; gap:10px; margin-bottom:clamp(16px,3vh,28px); }
.streak-panel.visible { display:flex; }
.streak-box {
  flex:1; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:clamp(10px,2vw,16px);
  display:flex; align-items:center; gap:10px;
}
.streak-box.fire { border-color:#e07820; background:#1e1a10; }
.streak-box.best { border-color:var(--correct-t); background:#101e10; }
.streak-emoji { font-size:clamp(20px,4vw,26px); line-height:1; flex-shrink:0; }
.streak-info { display:flex; flex-direction:column; gap:2px; }
.streak-lbl { font-size:clamp(9px,1.1vw,11px); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.streak-val { font-size:clamp(18px,3.5vw,26px); font-weight:800; line-height:1; }
.streak-box.fire .streak-val { color:#f09030; }
.streak-box.best .streak-val { color:var(--correct-t); }

/* hero */
.hero-tag { font-size:clamp(10px,1.5vw,12px); font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.hero-title { font-size:clamp(26px,6vw,52px); font-weight:800; color:var(--text); line-height:1.1; margin-bottom:8px; }
.hero-sub { font-size:clamp(13px,1.8vw,16px); color:var(--muted); line-height:1.6; margin-bottom:clamp(24px,5vh,44px); max-width:440px; }

/* section */
.section-label { font-size:clamp(10px,1.4vw,12px); font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }

/* exam cards */
.exam-cards { display:flex; flex-direction:column; gap:12px; margin-bottom:auto; }
@media (min-width:500px) {
  .exam-cards { display:grid; grid-template-columns:1fr 1fr; }
  .exam-card.wide { grid-column:1/-1; }
}

.exam-card {
  background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--radius);
  padding:clamp(14px,2.5vw,22px); display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:inherit;
  transition:border-color 0.18s, background 0.18s, transform 0.1s;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.exam-card:active { transform:scale(0.98); background:var(--bg3); }
@media (hover:hover) {
  .exam-card:hover { background:#1a1a26; }
  .exam-card:hover .exam-icon { background:var(--accent); border-color:var(--accent); }
}
.exam-card.flash:hover .exam-icon { background:#7c3aed; border-color:#7c3aed; }

.card-top { display:flex; align-items:center; gap:12px; }
.exam-icon {
  width:clamp(38px,6vw,48px); height:clamp(38px,6vw,48px);
  border-radius:10px; background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(18px,3vw,24px); flex-shrink:0;
  transition:background 0.18s, border-color 0.18s;
  font-family:monospace; font-weight:900; color:var(--muted);
}
.exam-name { font-size:clamp(14px,2.2vw,17px); font-weight:700; color:var(--text); }
.exam-sub  { font-size:clamp(11px,1.5vw,13px); color:var(--muted); }
.exam-desc { font-size:clamp(12px,1.5vw,14px); color:var(--muted); line-height:1.45; }

.mode-row { display:flex; gap:8px; }
.mode-btn {
  flex:1; background:var(--bg3); border:1px solid var(--border); border-radius:9px;
  padding:9px 8px; font-size:clamp(11px,1.4vw,13px); font-weight:600;
  color:var(--muted); text-decoration:none; text-align:center;
  transition:background 0.12s, color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color:transparent;
}
.mode-btn:active { background:var(--border); color:var(--text); }
@media (hover:hover) {
  .mode-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--bg2); }
  .exam-card.flash .mode-btn:hover { border-color:#a78bfa; color:#a78bfa; }
}
.mode-btn.flash-link:hover { border-color:#a78bfa !important; color:#a78bfa !important; }

/* pwa banner */
#pwa-banner {
  display:none; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:16px; font-size:clamp(12px,1.5vw,13px); color:var(--muted);
}
#pwa-banner.visible { display:flex; }
#pwa-install-btn {
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:7px 14px; font-size:12px; font-weight:700; cursor:pointer; flex-shrink:0; white-space:nowrap;
}

.footer { margin-top:clamp(20px,3vh,36px); font-size:clamp(10px,1.3vw,12px); color:var(--muted); text-align:center; opacity:0.4; }
.card-stats { font-size:clamp(10px,1.2vw,11px); color:var(--muted); opacity:0.75; min-height:0; }

/* auth */
.auth-slot { margin-left:auto; display:flex; align-items:center; gap:8px; }
.auth-btn { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:6px 14px; font-size:clamp(11px,1.3vw,12px); font-weight:700; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color 0.12s,color 0.12s,background 0.12s; }
.auth-btn:active { background:var(--bg3); color:var(--text); }
@media (hover:hover) { .auth-btn:hover { border-color:var(--accent); color:var(--accent); } }
.auth-email { font-size:clamp(10px,1.2vw,12px); color:var(--muted); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#auth-modal { display:none; position:fixed; inset:0; z-index:9998; background:rgba(10,10,16,0.72); align-items:center; justify-content:center; padding:20px; }
#auth-modal.show { display:flex; }
.auth-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(20px,4vw,32px); width:100%; max-width:360px; display:flex; flex-direction:column; gap:14px; }
.auth-card h2 { font-size:clamp(16px,2.5vw,20px); color:var(--text); }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-field label { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.auth-field input { background:var(--bg3); border:1px solid var(--border); border-radius:9px; padding:10px 12px; color:var(--text); font-size:14px; font-family:inherit; }
.auth-field input:focus { outline:none; border-color:var(--accent); }
.auth-error { font-size:12px; color:var(--wrong-t); min-height:16px; }
.auth-submit { background:var(--accent); color:#fff; border:none; border-radius:9px; padding:12px 16px; font-size:14px; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.auth-submit:active { background:var(--accent-h); }
.auth-switch { font-size:12px; color:var(--muted); text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.auth-switch b { color:var(--accent); }