/* ============ TOKENS (Buku tulis kotak-kotak) ============ */
:root{
  --bg:#F2F8FF; --grid:rgba(59,108,246,.13);
  --card:#FFFFFF; --soft:#FFF8DC; --ink:#1B2547; --muted:#55608A; --line:#1B2547;
  --pencil:#FFC72C; --on-pencil:#1B2547;
  --good:#12995A; --good-bg:#DCF6E8;
  --bad:#D6304F; --bad-bg:#FFE3E9;
  --info:#3B6CF6; --info-bg:#E2EAFF;
  --track:#DCE6F7;
  --c-vocab:#F0566A; --c-grammar:#8B5CF6; --c-time:#0FA99B; --c-reading:#E88A00; --c-sentence:#3B6CF6;
  --f-head:"Fredoka", ui-rounded, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --f-body:"Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10172E; --grid:rgba(127,160,255,.10);
    --card:#1B2547; --soft:#2A2E4D; --ink:#F4F1E6; --muted:#A9B4D8; --line:#060A1A;
    --good:#4BDB93; --good-bg:#12382A; --bad:#FF7C94; --bad-bg:#43202B;
    --info:#86A6FF; --info-bg:#22336B; --track:#2A3766;
    --c-vocab:#FF7A8B; --c-grammar:#A78BFA; --c-time:#2DD4BF; --c-reading:#FBB040; --c-sentence:#7FA0FF;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10172E; --grid:rgba(127,160,255,.10);
  --card:#1B2547; --soft:#2A2E4D; --ink:#F4F1E6; --muted:#A9B4D8; --line:#060A1A;
  --good:#4BDB93; --good-bg:#12382A; --bad:#FF7C94; --bad-bg:#43202B;
  --info:#86A6FF; --info-bg:#22336B; --track:#2A3766;
  --c-vocab:#FF7A8B; --c-grammar:#A78BFA; --c-time:#2DD4BF; --c-reading:#FBB040; --c-sentence:#7FA0FF;
  color-scheme:dark;
}
html{background:var(--bg);scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;min-height:100%;
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--ink);font:700 17px/1.5 var(--f-body);
}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:4px solid var(--info);outline-offset:3px;border-radius:12px}
.wrap{max-width:760px;margin:0 auto;padding:16px 16px 40px}
.wrap.has-bar{padding-bottom:170px}
h1,h2,h3{font-family:var(--f-head);margin:0;line-height:1.15;font-weight:600}
p{margin:0}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:12px 22px;
  font:600 1.08rem var(--f-head);
  background:var(--pencil);color:var(--on-pencil);
  border:3px solid var(--line);border-radius:16px;box-shadow:0 5px 0 var(--line);
  transition:transform .08s,box-shadow .08s;
}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:0 5px 0 var(--line)}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.info{background:var(--info);color:#fff}
.btn.bad{background:var(--bad);color:#fff}
.btn.block{width:100%}
.btn.big{min-height:64px;font-size:1.3rem}
.iconbtn{
  width:48px;height:48px;display:grid;place-items:center;font-size:1.3rem;
  background:var(--card);border:3px solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--line);
}
.iconbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}

/* ============ HOME ============ */
.hero{position:relative;padding:22px 4px 10px;text-align:left}
.hero .mascot{font-size:3.4rem;line-height:1;display:inline-block;transform-origin:70% 90%}
.hero h1{font-size:clamp(2.4rem,11vw,3.6rem);letter-spacing:-.01em;margin-top:6px}
.hero .sticker{
  display:inline-block;margin-top:12px;padding:6px 16px;
  background:var(--pencil);color:var(--on-pencil);
  border:3px solid var(--line);border-radius:12px;box-shadow:0 4px 0 var(--line);
  font:600 1.05rem var(--f-head);transform:rotate(-2.5deg);
}
.theme-btn{position:absolute;top:14px;right:0}
.card{
  background:var(--card);border:3px solid var(--line);border-radius:20px;
  box-shadow:0 5px 0 var(--line);padding:18px;margin-top:18px;
}
.card>h2{font-size:1.25rem;margin-bottom:12px}
.card .hint{color:var(--muted);font-size:.95rem;font-weight:700;margin-top:10px}

.namecard{padding:16px 18px 18px}
.namecard label{display:block;font:600 1.15rem var(--f-head);margin-bottom:4px}
.field{
  width:100%;min-height:56px;padding:8px 4px;
  font:700 1.4rem var(--f-head);
  background:transparent;border:0;border-bottom:4px dotted var(--line);border-radius:0;color:var(--ink);
}
.field::placeholder{color:var(--muted);opacity:.7}
.field:focus{outline:none;border-bottom-style:solid;border-bottom-color:var(--info)}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip-n{
  min-width:68px;min-height:52px;padding:8px 16px;
  font:600 1.2rem var(--f-head);background:var(--card);
  border:3px solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--line);
}
.chip-n.on{background:var(--pencil);color:var(--on-pencil)}
.chip-n:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.stepper{display:flex;align-items:center;gap:12px;margin-top:16px}
.stepper .val{flex:1;text-align:center;font:600 2rem var(--f-head)}
.stepper .val small{display:block;font:700 .9rem var(--f-body);color:var(--muted)}

.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.switch-row span{color:var(--muted);font-size:.95rem}
.switch{
  min-height:44px;padding:6px 16px;font:600 1rem var(--f-head);
  background:var(--card);border:3px solid var(--line);border-radius:999px;box-shadow:0 3px 0 var(--line);
}
.switch[aria-pressed="true"]{background:var(--info);color:#fff}
.pills{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:520px){.pills{grid-template-columns:1fr 1fr}}
.pill{
  --c:var(--info);
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  min-height:54px;padding:8px 14px;
  background:var(--card);
  background:color-mix(in srgb,var(--c) 16%,var(--card));
  border:3px solid var(--line);border-radius:14px;
}
button.pill{box-shadow:0 3px 0 var(--line)}
.pill .pe{font-size:1.5rem}
.pill .pn{flex:1;font:600 1rem/1.2 var(--f-head)}
.pill .pc{
  min-width:44px;text-align:center;padding:2px 10px;
  font:600 1.15rem var(--f-head);background:var(--c);color:#fff;
  border:3px solid var(--line);border-radius:10px;
}
.pill.off{opacity:.45;background:var(--card)}
.pill.off .pc{background:var(--track);color:var(--muted)}

.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  padding:14px;background:var(--card);
  border:3px solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--line);
}
.mode .me{font-size:1.8rem;line-height:1}
.mode b{font:600 1.15rem var(--f-head)}
.mode small{font-size:.88rem;line-height:1.3;color:var(--muted);font-weight:700}
.mode.on{background:var(--info-bg);border-color:var(--info);box-shadow:0 4px 0 var(--info)}
.mode.on b{color:var(--info)}
.sub-label{font:600 1.05rem var(--f-head);margin:18px 0 10px}
.chips.timer .chip-n{font-size:1rem;min-height:48px}

.history{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.history li{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:8px 12px;background:var(--soft);border:2px solid var(--line);border-radius:12px;
}
.history .hs{font:600 1.3rem var(--f-head);min-width:46px;text-align:center}
.history .hm{font-size:.9rem;color:var(--muted);line-height:1.3}
.history .hm b{color:var(--ink)}
.linkbtn{background:none;border:0;padding:8px 0;color:var(--muted);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.foot{margin-top:22px;text-align:center;color:var(--muted);font-size:.9rem}

/* ============ QUIZ ============ */
.qhead{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:10;
  background:var(--bg);padding:10px 0 10px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px);background-size:24px 24px;
}
.qhead .row{display:flex;align-items:center;gap:10px}
.qhead .count{flex:1;font:600 1.2rem var(--f-head);text-align:center}
.timer{
  display:flex;align-items:center;gap:6px;min-width:104px;justify-content:center;
  padding:8px 12px;font:600 1.15rem var(--f-head);font-variant-numeric:tabular-nums;
  background:var(--card);border:3px solid var(--line);border-radius:999px;box-shadow:0 3px 0 var(--line);
}
.timer.warn{background:var(--bad-bg);color:var(--bad);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.progress{margin-top:10px;height:16px;background:var(--card);border:3px solid var(--line);border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--pencil);border-right:3px solid var(--line);transition:width .3s}

.qcard{
  background:var(--card);border:3px solid var(--line);border-radius:22px;box-shadow:0 5px 0 var(--line);
  padding:18px;margin-top:14px;
}
.catbadge{
  --c:var(--info);
  display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 10px;
  font:600 .95rem var(--f-head);
  background:var(--c);color:#fff;border:3px solid var(--line);border-radius:999px;
}
.passage{
  margin-top:14px;padding:14px 16px;
  background:var(--soft);border:3px dashed var(--line);border-radius:16px;
  font-weight:700;line-height:1.65;max-width:68ch;
}
.passage h3{font-size:1rem;margin-bottom:6px}
.visual{font-size:5.4rem;line-height:1.1;text-align:center;margin:14px 0 2px}
.qtext{margin-top:14px;font:500 clamp(1.3rem,5vw,1.7rem)/1.4 var(--f-head);max-width:34ch}
.blank{display:inline-block;min-width:68px;height:1.1em;margin:0 4px;border-bottom:5px solid var(--pencil);transform:translateY(4px)}

.choices{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
@media (min-width:640px){.choices{grid-template-columns:1fr 1fr}}
.choice{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:64px;padding:10px 14px;
  font:800 1.15rem/1.3 var(--f-body);color:var(--ink);
  background:var(--card);border:3px solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--line);
  transition:transform .08s,box-shadow .08s;
}
.choice:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.choice .key{
  flex:none;width:38px;height:38px;display:grid;place-items:center;
  font:600 1.1rem var(--f-head);background:var(--soft);border:3px solid var(--line);border-radius:11px;
}
.choice .txt{flex:1}
.choice .mark{font:700 1.4rem var(--f-head)}
.choice.selected{background:var(--info-bg);border-color:var(--info);box-shadow:0 4px 0 var(--info)}
.choice.selected .key{background:var(--info);color:#fff;border-color:var(--info)}
.choice.correct{background:var(--good-bg);border-color:var(--good);box-shadow:0 4px 0 var(--good);color:var(--ink)}
.choice.correct .key{background:var(--good);border-color:var(--good);color:#fff}
.choice.correct .mark{color:var(--good)}
.choice.wrong{background:var(--bad-bg);border-color:var(--bad);box-shadow:0 4px 0 var(--bad);color:var(--ink)}
.choice.wrong .key{background:var(--bad);border-color:var(--bad);color:#fff}
.choice.wrong .mark{color:var(--bad)}
.choice.dim{opacity:.55}
.choice:disabled{cursor:default}

.fill{
  width:100%;min-height:62px;margin-top:18px;padding:10px 16px;
  font:600 1.5rem var(--f-head);color:var(--ink);
  background:var(--card);border:3px solid var(--line);border-radius:16px;box-shadow:inset 0 3px 0 rgba(0,0,0,.08);
}
.fill:focus{outline:none;border-color:var(--info);box-shadow:0 0 0 4px var(--info-bg)}
.fill.ok{background:var(--good-bg);border-color:var(--good)}
.fill.no{background:var(--bad-bg);border-color:var(--bad)}

.answerline{
  display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;
  min-height:76px;margin-top:18px;padding:12px;
  background:var(--soft);border:3px dashed var(--line);border-radius:16px;
}
.answerline.ok{background:var(--good-bg);border-color:var(--good);border-style:solid}
.answerline.no{background:var(--bad-bg);border-color:var(--bad);border-style:solid}
.answerline .ph{color:var(--muted);align-self:center;font-weight:700}
.bank{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;min-height:56px}
.wchip{
  min-height:50px;padding:6px 16px;font:600 1.15rem var(--f-head);
  background:var(--card);color:var(--ink);border:3px solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--line);
}
.wchip.placed{background:var(--pencil);color:var(--on-pencil)}
.wchip:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.wchip:disabled{cursor:default}

.feedback{
  margin-top:18px;padding:14px 16px;border:3px solid var(--line);border-radius:18px;scroll-margin-bottom:150px;
}
.feedback.good{background:var(--good-bg);border-color:var(--good)}
.feedback.bad{background:var(--bad-bg);border-color:var(--bad)}
.feedback .ft{font:600 1.3rem var(--f-head)}
.feedback.good .ft{color:var(--good)}
.feedback.bad .ft{color:var(--bad)}
.feedback .fa{margin-top:6px}
.feedback .fe{margin-top:6px;color:var(--ink);font-weight:700}

.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--bg);border-top:3px solid var(--line);
}
.bar .in{max-width:760px;margin:0 auto;display:flex;gap:10px}
.bar .btn{flex:1}
.bar .btn.narrow{flex:none;min-width:58px;padding:12px 16px}
.bar .btn.grow{flex:2}

/* modal */
.backdrop{position:fixed;inset:0;z-index:40;background:rgba(10,15,36,.6);display:grid;place-items:center;padding:20px}
.modal{width:100%;max-width:440px;max-height:86%;overflow:auto;background:var(--card);border:3px solid var(--line);border-radius:22px;box-shadow:0 6px 0 var(--line);padding:20px}
.modal h3{font-size:1.4rem}
.modal p{margin-top:8px;color:var(--muted)}
.modal .row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.modal .row .btn{flex:1;min-width:140px}
.numgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.numgrid button{
  min-height:48px;font:600 1.05rem var(--f-head);background:var(--card);
  border:3px solid var(--line);border-radius:12px;
}
.numgrid button.done{background:var(--info-bg);border-color:var(--info)}
.numgrid button.cur{background:var(--pencil);color:var(--on-pencil)}

/* ============ RESULT ============ */
.rescard{
  position:relative;text-align:center;padding:22px 18px 20px;margin-top:14px;
  background:var(--card);border:3px solid var(--line);border-radius:26px;box-shadow:0 6px 0 var(--line);
}
.timeup{display:inline-block;margin-bottom:10px;padding:6px 16px;background:var(--bad-bg);color:var(--bad);border:3px solid var(--bad);border-radius:999px;font:600 1.05rem var(--f-head)}
.stars{font-size:2.6rem;letter-spacing:6px;line-height:1}
.stars .off{filter:grayscale(1);opacity:.3}
.ring{
  --p:0;width:190px;height:190px;margin:14px auto 6px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--pencil) calc(var(--p) * 1%),var(--track) 0);
  border:3px solid var(--line);
}
.ring .rin{width:150px;height:150px;border-radius:50%;background:var(--card);border:3px solid var(--line);display:grid;place-content:center;text-align:center}
.ring .sc{font:700 4rem/1 var(--f-head)}
.ring .of{color:var(--muted);font-size:.95rem}
.resname{font:600 1.5rem var(--f-head);margin-top:10px}
.resmsg{margin:8px auto 0;max-width:36ch;font-size:1.1rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.stat{padding:10px 6px;background:var(--soft);border:3px solid var(--line);border-radius:14px}
.stat b{display:block;font:700 1.6rem/1.1 var(--f-head)}
.stat span{font-size:.88rem;color:var(--muted)}
.stat.g b{color:var(--good)}
.stat.r b{color:var(--bad)}
.brow{margin-top:14px}
.brow .bt{display:flex;justify-content:space-between;gap:10px;font:600 1rem var(--f-head)}
.brow .track{height:20px;margin-top:6px;background:var(--track);border:3px solid var(--line);border-radius:999px;overflow:hidden}
.brow .track i{display:block;height:100%;background:var(--c);border-right:3px solid var(--line)}
.brow .track i.zero{border-right:0}
.tip{margin-top:16px;padding:12px 14px;background:var(--info-bg);border:3px solid var(--info);border-radius:14px}
.actions{display:grid;gap:12px;margin-top:18px}

/* review */
.filters{display:flex;gap:10px;margin-top:14px}
.filters .chip-n{flex:1;min-width:0;font-size:1.05rem}
.rv{margin-top:14px;padding:14px 16px;background:var(--card);border:3px solid var(--line);border-left-width:10px;border-radius:16px}
.rv.ok{border-left-color:var(--good)}
.rv.no{border-left-color:var(--bad)}
.rv .rh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:600 1rem var(--f-head)}
.rv .num{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;background:var(--pencil);color:var(--on-pencil);border:3px solid var(--line);border-radius:10px}
.rv .st{margin-left:auto}
.rv .rq{margin-top:10px;font:500 1.15rem/1.4 var(--f-head)}
.rv .visual{font-size:3rem;margin:8px 0 0;text-align:left}
.rv .ya,.rv .ca,.rv .ex{margin-top:6px}
.rv .ca b{color:var(--good)}
.rv.no .ya b{color:var(--bad)}
.rv details{margin-top:10px}
.rv summary{font:600 .98rem var(--f-head);cursor:pointer;padding:6px 0}
.rv details p{padding:10px 12px;background:var(--soft);border-radius:12px;line-height:1.6}

.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.confetti span{position:absolute;top:-50px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(420deg)}}

@media (prefers-reduced-motion:no-preference){
  .hero .mascot{animation:wave 2.6s ease-in-out 1 .4s}
}
@keyframes wave{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(12deg)}80%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}