/* ---------- Theme tokens ---------- */
:root, [data-theme="light"]{
  --bg:#ffffff; --bg2:#ffffff; --card:#ffffff; --card2:#f4f5f7;
  --txt:#15181d; --muted:#6b7280; --accent:#2563eb; --on-accent:#ffffff;
  --green:#16a34a; --amber:#d97706; --red:#dc2626; --line:#e6e8eb;
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
[data-theme="dark"]{
  --bg:#0c1016; --bg2:#0c1016; --card:#141a22; --card2:#1c232d;
  --txt:#e7ebf0; --muted:#98a2b0; --accent:#3b82f6; --on-accent:#ffffff;
  --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --line:#242d38;
  --shadow:none;
}
:root{ --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom); --maxw:720px; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; min-height:100dvh; overflow:hidden;
}

/* ---------- Top bar ---------- */
#topbar{background:var(--bg2); padding-top:var(--safe-t); flex:0 0 auto; z-index:5;
  border-bottom:1px solid var(--line)}
.bar-inner{display:flex; align-items:center; gap:8px; padding:10px 14px;
  max-width:var(--maxw); margin:0 auto; width:100%}
.title{flex:1; display:flex; flex-direction:column; line-height:1.15}
.title strong{font-size:16px; font-weight:600}
.title #counter{font-size:12px; color:var(--muted)}
.icon-btn{
  background:transparent; color:var(--txt); border:1px solid var(--line); border-radius:10px;
  min-width:40px; height:40px; font-size:17px; font-weight:600; cursor:pointer;
}
.icon-btn:active{background:var(--card2)}
#langBtn{font-size:13px; padding:0 12px; letter-spacing:.3px}
#progress{height:3px; background:var(--line)}
#progressFill{height:100%; width:0; background:var(--accent); transition:width .25s}

/* ---------- Card ---------- */
#card-area{flex:1 1 auto; overflow-y:auto; padding:16px; display:flex; justify-content:center}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow);
  padding:20px; width:100%; max-width:var(--maxw); display:flex; flex-direction:column; gap:16px;
  align-self:flex-start;
  transition:opacity .2s ease, transform .2s ease;
}
.card-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.qnum{font-size:12px; font-weight:600; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
  padding:3px 10px; border-radius:999px}
.badge{font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px;
  letter-spacing:.3px}
.badge.vid{background:color-mix(in srgb, var(--red) 14%, transparent); color:var(--red)}
.badge.case{background:color-mix(in srgb, var(--amber) 16%, transparent); color:var(--amber)}
.badge.info{background:var(--card2); color:var(--muted)}
.badge.known{background:color-mix(in srgb, var(--green) 15%, transparent); color:var(--green)}
.badge.grp{background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber);
  border:none; cursor:pointer; font-weight:600}

.context{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.context summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--accent); list-style:none}
.context summary::-webkit-details-marker{display:none}
.context summary::before{content:"📖 "; }
.context #contextBody{margin-top:10px; font-size:15px; line-height:1.5; color:var(--txt)}
.context #contextBody .alt{display:block; margin-top:8px; font-size:13px; color:var(--muted)}

.qimg{width:100%; max-height:46dvh; object-fit:contain; border-radius:12px;
  background:#fff; padding:6px; border:1px solid var(--line)}
.question{font-size:20px; line-height:1.45; font-weight:600}
.question .alt{display:block; margin-top:10px; font-size:15px; font-weight:400; color:var(--muted)}

.answer-wrap{background:var(--card2); border-radius:12px; padding:14px; border-left:3px solid var(--green)}
.answer-label{font-size:12px; font-weight:600; color:var(--green); margin-bottom:6px}
.answer{font-size:18px; line-height:1.45}
.answer .alt{display:block; margin-top:8px; font-size:14px; color:var(--muted)}

/* mark feedback: subtle colour pulse */
@keyframes flashGreen{0%{background:var(--card)}35%{background:color-mix(in srgb,var(--green) 16%,var(--card))}100%{background:var(--card)}}
@keyframes flashAmber{0%{background:var(--card)}35%{background:color-mix(in srgb,var(--amber) 16%,var(--card))}100%{background:var(--card)}}
.card.flash-green{animation:flashGreen .42s ease}
.card.flash-amber{animation:flashAmber .42s ease}

/* ---------- Quiz options ---------- */
.options{display:flex; flex-direction:column; gap:10px}
.opt{
  background:var(--card); color:var(--txt); border:1.5px solid var(--line);
  border-radius:12px; padding:14px; font-size:16px; line-height:1.35; text-align:left;
  cursor:pointer; width:100%; transition:border-color .15s, background .15s;
}
.opt .alt{display:block; margin-top:5px; font-size:13px; color:var(--muted)}
.opt:active{background:var(--card2)}
.opt.correct{border-color:var(--green); background:color-mix(in srgb,var(--green) 12%,var(--card))}
.opt.wrong{border-color:var(--red); background:color-mix(in srgb,var(--red) 12%,var(--card))}
.opt.disabled{cursor:default}
.opt .tick{font-weight:800}
.opt.correct .tick{color:var(--green)}
.opt.wrong .tick{color:var(--red)}

.reveal-btn{
  background:var(--accent); color:var(--on-accent); border:none; border-radius:12px;
  padding:14px; font-size:16px; font-weight:600; cursor:pointer; margin-top:auto;
}
.reveal-btn:active{opacity:.9}

/* ---------- Bottom nav ---------- */
#bottomnav{
  flex:0 0 auto; padding:10px 14px;
  padding-bottom:calc(10px + var(--safe-b)); background:var(--bg2); border-top:1px solid var(--line);
}
.nav-inner{display:flex; gap:8px; max-width:var(--maxw); margin:0 auto; width:100%}
.nav-btn{
  background:transparent; color:var(--txt); border:1px solid var(--line); border-radius:12px;
  width:48px; font-size:24px; font-weight:600; cursor:pointer;
}
.nav-btn:active{background:var(--card2)}
.mark-btn{flex:1; border:none; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; color:#fff}
.mark-yes{background:var(--green)}
.mark-no{background:var(--amber)}
.mark-unsei{background:var(--red)}
.mark-btn:active{opacity:.9}

/* ---------- Drawer ---------- */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9}
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:85%; max-width:340px; z-index:10;
  background:var(--bg); border-right:1px solid var(--line);
  padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  transform:translateX(-105%); transition:transform .25s; overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.panel{display:flex; flex-direction:column; gap:14px}
.drawer h2{margin:0; font-size:18px; font-weight:600}
.drawer h3.sub{margin:0; font-size:12px; color:var(--muted); font-weight:700;
  text-transform:uppercase; letter-spacing:.6px}
.group{display:flex; flex-direction:column; gap:12px; padding:14px;
  background:var(--card); border:1px solid var(--line); border-radius:14px}
.seg-label{font-size:14px; font-weight:600; color:var(--txt)}
.hint{margin:0; font-size:12px; line-height:1.4; color:var(--muted)}
.hint b{color:var(--txt); font-weight:600}
.nav-to{display:flex; justify-content:space-between; align-items:center; font-weight:600}
.back-link{align-self:flex-start; background:none; border:none; color:var(--accent);
  font-size:15px; padding:0; cursor:pointer}

.field{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.field input{background:var(--card); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:12px; font-size:16px}
.field input:focus{outline:none; border-color:var(--accent)}
.search-results{display:flex; flex-direction:column; gap:6px; max-height:30dvh; overflow-y:auto}
.search-results .res{background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:10px; font-size:13px; cursor:pointer}
.search-results .res:active{background:var(--card2)}
.search-results .res b{color:var(--accent)}

.seg{display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--muted)}
.seg-btns{display:flex; flex-wrap:wrap; gap:6px}
.seg-btn,.mode-btn,.skip-btn,.theme-btn{
  background:var(--card2); border:1px solid var(--line); color:var(--txt);
  border-radius:999px; padding:8px 14px; font-size:13px; cursor:pointer}
.mode-btn,.skip-btn,.theme-btn{flex:1; padding:9px 16px; font-size:14px; text-align:center}
.seg-btn.active,.skip-btn.active,.theme-btn.active{
  background:var(--accent); color:var(--on-accent); font-weight:600; border-color:var(--accent)}
.mode-btn.active{background:var(--green); color:#fff; font-weight:600; border-color:var(--green)}

.wide-btn{background:var(--card); border:1px solid var(--line); color:var(--txt);
  border-radius:12px; padding:13px; font-size:15px; cursor:pointer; text-align:left}
.wide-btn:active{background:var(--card2)}
.wide-btn.danger{color:var(--red)}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.stats div{background:var(--card2); border-radius:10px; padding:10px 4px; text-align:center}
.stats strong{display:block; font-size:18px}
.stats span{font-size:10px; color:var(--muted)}
.muted{color:var(--muted); font-size:12px; text-align:center}

/* ---------- Onboarding ---------- */
.onb{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  padding-bottom:calc(20px + var(--safe-b)); padding-top:calc(20px + var(--safe-t))}
.onb-card{background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.25); width:100%; max-width:380px; padding:26px 22px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px}
.onb-icon{font-size:44px; line-height:1}
.onb-card h2{margin:0; font-size:20px; font-weight:700}
.onb-card p{margin:0; font-size:15px; line-height:1.55; color:var(--muted)}
.onb-card p b{color:var(--txt); font-weight:600}
.onb-dots{display:flex; gap:7px; margin:6px 0 2px}
.onb-dots i{width:8px; height:8px; border-radius:999px; background:var(--line); transition:background .2s, width .2s}
.onb-dots i.on{background:var(--accent); width:20px}
.onb-actions{display:flex; gap:10px; width:100%; margin-top:6px}
.onb-skip{flex:0 0 auto; background:none; border:none; color:var(--muted);
  font-size:14px; padding:12px 14px; cursor:pointer}
.onb-next{flex:1; background:var(--accent); color:var(--on-accent); border:none;
  border-radius:12px; padding:13px; font-size:15px; font-weight:600; cursor:pointer}
.onb-next:active{opacity:.9}

.lang-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px}
.lang-grid button{background:var(--card2); border:1px solid var(--line); color:var(--txt);
  border-radius:12px; padding:13px 10px; font-size:15px; cursor:pointer; text-align:center}
.lang-grid button:active{background:var(--accent); color:var(--on-accent)}
.onb-langsub{font-size:14px; color:var(--muted)}
.lang-select{background:var(--card2); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:11px 12px; font-size:15px; width:100%; cursor:pointer}

.hidden{display:none !important}

.btn-row{display:flex; gap:8px}
.btn-row .wide-btn{flex:1; text-align:center}

/* ---------- Mock test ---------- */
.mock-cta{background:var(--accent); color:var(--on-accent); border:none; font-weight:700; text-align:center}
.mock{position:fixed; inset:0; z-index:60; background:var(--bg); display:flex; flex-direction:column;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b)}
.mock-top{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line);
  max-width:var(--maxw); margin:0 auto; width:100%}
.mock-x{background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; width:34px}
.mock-count{font-size:14px; font-weight:600; color:var(--muted)}
.mock-timer{flex:1; text-align:center; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.mock-timer.low{color:var(--red)}
.mock-finish{background:var(--green); color:#fff; border:none; border-radius:10px; padding:9px 14px; font-size:14px; font-weight:700; cursor:pointer}
.mock-body{flex:1 1 auto; overflow-y:auto; padding:18px; max-width:var(--maxw); margin:0 auto; width:100%;
  display:flex; flex-direction:column; gap:16px}
.mock-body .question{font-size:20px; line-height:1.45; font-weight:600}
.mock-body .question .alt{display:block; margin-top:10px; font-size:15px; font-weight:400; color:var(--muted)}
.mock-body .opt.chosen{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--card))}
.mock-nav{display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line);
  max-width:var(--maxw); margin:0 auto; width:100%}
.mock-jump{flex:1; display:flex; flex-wrap:wrap; gap:4px; justify-content:center; max-height:64px; overflow-y:auto}
.mock-jump button{width:26px; height:26px; border-radius:6px; border:1px solid var(--line); background:var(--card2);
  color:var(--txt); font-size:11px; cursor:pointer; padding:0}
.mock-jump button.answered{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.mock-jump button.current{outline:2px solid var(--accent); outline-offset:1px}

/* result */
.mock-result{max-width:var(--maxw); margin:0 auto; width:100%; padding:24px 18px; overflow-y:auto; height:100%;
  display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center}
.mock-verdict{font-size:40px; font-weight:800; margin-top:10px}
.mock-verdict.pass{color:var(--green)} .mock-verdict.fail{color:var(--red)}
.mock-scorebig{font-size:52px; font-weight:800; line-height:1}
.mock-sub{color:var(--muted); font-size:14px}
.mock-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; max-width:360px}
.mock-stats div{background:var(--card2); border-radius:12px; padding:12px 6px}
.mock-stats strong{display:block; font-size:22px}
.mock-stats span{font-size:11px; color:var(--muted)}
.mock-review{width:100%; max-width:460px; text-align:left; display:flex; flex-direction:column; gap:8px}
.mock-review .rev{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13px; cursor:pointer}
.mock-review .rev .q{font-weight:600; margin-bottom:4px}
.mock-review .rev .ok{color:var(--green)} .mock-review .rev .no{color:var(--red)}
.mock-actions{display:flex; gap:10px; width:100%; max-width:360px; margin-top:4px}
.mock-actions button{flex:1; border:none; border-radius:12px; padding:14px; font-size:15px; font-weight:700; cursor:pointer}
.mb-primary{background:var(--accent); color:var(--on-accent)}
.mb-ghost{background:var(--card2); color:var(--txt)}

/* progress bar in mock footer */
.mock-prog{flex:1; display:flex; flex-direction:column; gap:4px; align-items:center}
.mock-prog-bar{width:100%; max-width:260px; height:6px; background:var(--line); border-radius:999px; overflow:hidden}
.mock-prog-bar #mockProgFill{height:100%; width:0; background:var(--accent); transition:width .2s}
.mock-prog-text{font-size:11px; color:var(--muted)}

/* branded dialog */
.dialog-overlay{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; padding:24px;
  padding-top:calc(24px + var(--safe-t)); padding-bottom:calc(24px + var(--safe-b))}
.dialog-card{background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.3); width:100%; max-width:360px; padding:22px; text-align:center}
.dialog-msg{font-size:16px; line-height:1.5; color:var(--txt); margin-bottom:18px}
.dialog-actions{display:flex; gap:10px}
.dialog-btn{flex:1; border:none; border-radius:12px; padding:13px; font-size:15px; font-weight:700; cursor:pointer}
.dialog-btn.ghost{background:var(--card2); color:var(--txt)}
.dialog-btn.primary{background:var(--accent); color:var(--on-accent)}
.dialog-btn.primary.danger{background:var(--red); color:#fff}

.qimg.refimg{max-height:none; background:#fff}