/* ── gaya khusus tiap layar ───────────────────────────────────── */

/* Beranda: kartu sambutan */
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:var(--s-8);
  border:1px solid var(--line);background:
    linear-gradient(135deg,#6c5ce726,transparent 55%),
    linear-gradient(300deg,#17c49320,transparent 50%),var(--surface-2)}
.hero::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,#6c5ce730,transparent 70%);pointer-events:none}
.hero h1{font-family:var(--font-display);font-size:clamp(1.7rem,3.6vw,var(--fs-4xl));max-width:22ch}
.hero p{color:var(--text-soft);max-width:56ch;margin-top:var(--s-3)}
.hero__actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6)}
.hero__meta{display:flex;gap:var(--s-6);flex-wrap:wrap;margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:1px solid var(--line)}
.hero__meta div{display:grid}
.hero__meta b{font-size:var(--fs-xl);font-variant-numeric:tabular-nums}
.hero__meta span{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-mute)}

/* peta kurikulum */
.lv-track{display:grid;gap:var(--s-3)}
.lv-card{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-4);align-items:center;
  padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;transition:all var(--dur-2) var(--ease);position:relative;overflow:hidden}
.lv-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--lv,var(--brand))}
.lv-card:hover{transform:translateX(4px);border-color:var(--line-strong);box-shadow:var(--shadow-2);text-decoration:none}
.lv-card__badge{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:800;
  font-size:var(--fs-lg);color:#08121f;background:var(--lv,var(--brand))}
.lv-card__body h3{font-size:var(--fs-lg)}
.lv-card__body p{color:var(--text-mute);font-size:var(--fs-sm);margin-top:2px}
.lv-card__pct{text-align:right;font-variant-numeric:tabular-nums}
.lv-card__pct b{font-size:var(--fs-xl)}
.lv-card.is-locked{opacity:.55}

.unit-list{display:grid;gap:var(--s-2)}
.unit{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface-2);cursor:pointer;transition:all var(--dur-1) var(--ease)}
.unit:hover{background:var(--surface-3);text-decoration:none}
.unit__n{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-3);font-weight:700;font-size:var(--fs-sm)}
.unit.is-done .unit__n{background:var(--ok);color:#04231b}
.unit__b{flex:1;min-width:0}
.unit__b strong{display:block;font-size:var(--fs-md)}
.unit__b span{font-size:var(--fs-xs);color:var(--text-mute)}

/* pemutar pelajaran */
.lesson-top{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5)}
.lesson-top .bar{flex:1}
.lesson-step{display:grid;gap:var(--s-5)}
.q-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:var(--s-6)}
.q-prompt{font-size:var(--fs-xl);font-weight:600;line-height:1.5}
/* Written Expression (TOEFL ITP): empat bagian bergaris bawah berlabel A–D */
.we-seg{text-decoration:none;border-bottom:2.5px solid var(--brand);padding-bottom:1px;position:relative;margin-right:.15em;white-space:nowrap}
.we-seg i{font-style:normal;font-size:.62em;font-weight:800;color:var(--brand);vertical-align:super;margin-right:.18em;letter-spacing:.02em}
.q-prompt .blank{display:inline-block;min-width:96px;border-bottom:2px dashed var(--brand);
  text-align:center;color:var(--brand-text);font-weight:700}
.q-sub{color:var(--text-mute);font-size:var(--fs-sm);margin-top:var(--s-2)}
.opts{display:grid;gap:var(--s-2);margin-top:var(--s-5)}
.opt{display:flex;align-items:center;gap:var(--s-3);padding:.7rem var(--s-4);border-radius:var(--r-md);
  border:1.5px solid var(--line);background:var(--bg-elev);text-align:left;font-size:var(--fs-base);
  transition:all var(--dur-1) var(--ease);width:100%}
.opt:hover:not(:disabled){border-color:var(--brand);transform:translateX(3px)}
.opt__key{flex:none;width:24px;height:24px;border-radius:7px;background:var(--surface-3);display:grid;
  place-items:center;font-size:var(--fs-xs);font-weight:700}
.opt.is-right{border-color:var(--ok);background:var(--ok-soft)}
.opt.is-right .opt__key{background:var(--ok);color:#04231b}
.opt.is-wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.is-wrong .opt__key{background:var(--bad);color:#fff}
.opt:disabled{cursor:default}
.feedback{padding:var(--s-4);border-radius:var(--r-md);animation:viewIn .25s var(--ease-out) both}
.feedback--ok{background:var(--ok-soft);border:1px solid #17c49340}
.feedback--bad{background:var(--bad-soft);border:1px solid #f0576f40}
.feedback h4{display:flex;align-items:center;gap:var(--s-2);margin-bottom:4px}

/* kartu hafalan */
.flash{perspective:1400px;height:clamp(240px,42vh,340px)}
.flash__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .55s var(--ease-out)}
.flash.is-flip .flash__inner{transform:rotateY(180deg)}
.flash__face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r-xl);
  border:1px solid var(--line);background:var(--surface-2);display:grid;place-content:center;
  justify-items:center;gap:var(--s-3);padding:var(--s-6);text-align:center;cursor:pointer}
.flash__face--back{transform:rotateY(180deg);background:linear-gradient(160deg,#6c5ce71f,var(--surface-2))}
.flash__word{font-family:var(--font-display);font-size:clamp(1.7rem,5vw,2.6rem);font-weight:700}
.flash__ipa{font-family:var(--font-mono);color:var(--info)}
.flash__id{font-size:var(--fs-xl);color:var(--ok)}
.flash__ex{color:var(--text-soft);font-size:var(--fs-md);max-width:44ch}
.grade-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
.grade{padding:.6rem;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);
  font-weight:700;font-size:var(--fs-sm);transition:all var(--dur-1) var(--ease)}
.grade:hover{transform:translateY(-2px)}
.grade small{display:block;font-weight:500;font-size:var(--fs-2xs);color:var(--text-mute)}
.grade[data-g="0"]{color:var(--bad)} .grade[data-g="3"]{color:var(--warn)}
.grade[data-g="4"]{color:var(--info)} .grade[data-g="5"]{color:var(--ok)}

/* daftar kosakata */
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:var(--s-3)}
.vocab-item{padding:var(--s-4);border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);
  display:grid;gap:4px;transition:all var(--dur-1) var(--ease)}
.vocab-item:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.vocab-item__top{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.vocab-item__w{font-weight:700;font-size:var(--fs-lg)}
.vocab-item__id{color:var(--ok);font-size:var(--fs-md)}
.vocab-item__ex{font-size:var(--fs-sm);color:var(--text-mute);border-top:1px dashed var(--line);
  padding-top:6px;margin-top:4px}
.speak-btn{margin-left:auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--text-soft);font-size:.85rem}
.speak-btn:hover{background:var(--brand);color:#fff}
.speak-btn.is-on{background:var(--brand);color:#fff;animation:pulseSpk .9s infinite}
@keyframes pulseSpk{0%,100%{box-shadow:0 0 0 0 #6c5ce780}50%{box-shadow:0 0 0 7px #6c5ce700}}

/* grammar */
.gram-nav{display:grid;gap:var(--s-1);max-height:64vh;overflow:auto;padding-right:4px}
.gram-nav button{text-align:left;padding:.45rem var(--s-3);border-radius:8px;font-size:var(--fs-sm);
  color:var(--text-soft);display:flex;gap:var(--s-2);align-items:center}
.gram-nav button:hover{background:var(--surface-2);color:var(--text)}
.gram-nav button.is-active{background:var(--brand-soft);color:var(--text);font-weight:600}
.formula{font-family:var(--font-mono);font-size:var(--fs-md);padding:var(--s-3) var(--s-4);
  border-radius:var(--r-sm);background:var(--surface-3);border:1px dashed var(--line-strong);
  overflow-x:auto;white-space:pre-wrap}
.ex-list{display:grid;gap:var(--s-2)}
.ex{padding:var(--s-3);border-radius:var(--r-sm);background:var(--surface-2);border-left:3px solid var(--ok)}
.ex .en{display:block}
.ex .id-txt{display:block;font-size:var(--fs-sm)}
.ex--bad{border-left-color:var(--bad)}
.ex--bad .en{text-decoration:line-through;color:var(--bad)}

/* pelafalan */
.ipa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s-2)}
.ipa-cell{padding:var(--s-3);border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);
  text-align:center;cursor:pointer;transition:all var(--dur-1) var(--ease)}
.ipa-cell:hover{background:var(--brand-soft);transform:translateY(-2px)}
.ipa-cell b{font-family:var(--font-mono);font-size:var(--fs-xl);color:var(--info);display:block}
.ipa-cell span{font-size:var(--fs-2xs);color:var(--text-mute)}
.pair{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-3);align-items:center;
  padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.pair>button{display:flex;align-items:center;gap:var(--s-2);font-weight:600}
.pair__vs{color:var(--text-mute);font-size:var(--fs-xs)}

/* rekaman & pengenalan suara */
.rec-panel{display:grid;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface-2)}
.rec-btn{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;
  background:linear-gradient(160deg,var(--rose-400),var(--rose-600));color:#fff;margin-inline:auto;
  box-shadow:0 14px 34px -16px var(--rose-500);transition:transform var(--dur-1) var(--ease)}
.rec-btn:hover{transform:scale(1.05)}
.rec-btn.is-rec{animation:recPulse 1.3s infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 #f0576f70}50%{box-shadow:0 0 0 18px #f0576f00}}
.heard{font-size:var(--fs-lg);min-height:2.2em;padding:var(--s-3);border-radius:var(--r-sm);
  background:var(--bg-elev);border:1px dashed var(--line-strong)}
.heard .w-ok{color:var(--ok);font-weight:700}
.heard .w-bad{color:var(--bad);text-decoration:underline wavy}

/* ujian */
.exam-bar{position:sticky;top:var(--topbar-h);z-index:40;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--bg-elev) 92%,transparent);backdrop-filter:blur(12px);
  box-shadow:var(--shadow-2);margin-bottom:var(--s-5)}
.timer{font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:600;font-variant-numeric:tabular-nums}
.timer.is-low{color:var(--bad);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.45}}
.qnav{display:flex;gap:5px;flex-wrap:wrap}
.qnav button{width:29px;height:29px;border-radius:7px;font-size:var(--fs-xs);font-weight:700;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-mute)}
.qnav button.is-answered{background:var(--brand-soft);color:var(--brand-text);border-color:#6c5ce755}
.qnav button.is-current{outline:2px solid var(--brand);outline-offset:1px;color:var(--text)}
.qnav button.is-flag{border-color:var(--warn);color:var(--warn)}
.passage{max-height:none;line-height:1.85;font-size:var(--fs-lg);white-space:pre-wrap}
.passage p{margin-bottom:var(--s-4)}
.band-hero{display:grid;place-items:center;gap:var(--s-2);padding:var(--s-8);border-radius:var(--r-xl);
  background:linear-gradient(160deg,#6c5ce726,var(--surface-2));border:1px solid var(--line)}
.band-hero b{font-family:var(--font-display);font-size:var(--fs-5xl);line-height:1}
.band-hero span{color:var(--text-mute);letter-spacing:.12em;text-transform:uppercase;font-size:var(--fs-2xs)}

/* rencana harian */
.day-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-2)}
.day{padding:var(--s-3);border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);
  cursor:pointer;transition:all var(--dur-1) var(--ease);display:grid;gap:4px}
.day:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.day.is-today{border-color:var(--brand);box-shadow:var(--ring)}
.day.is-done{background:var(--ok-soft);border-color:#17c49340}
.day__n{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.day__t{font-size:var(--fs-sm);font-weight:600;line-height:1.35}

/* peta panas & radar */
.heat{display:grid;grid-template-columns:repeat(auto-fill,14px);gap:3px}
.heat i{width:14px;height:14px;border-radius:3px;background:var(--surface-3)}
.heat i[data-l="1"]{background:#17c49340} .heat i[data-l="2"]{background:#17c49375}
.heat i[data-l="3"]{background:#17c493b5} .heat i[data-l="4"]{background:var(--mint-400)}

/* buku catatan / tip */
.trick{padding:var(--s-5);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface-2);
  display:grid;gap:var(--s-2);position:relative;overflow:hidden}
.trick::before{content:attr(data-n);position:absolute;right:-6px;top:-18px;font-family:var(--font-display);
  font-size:4.6rem;font-weight:700;color:var(--line-strong);pointer-events:none}
.trick h4{font-size:var(--fs-lg)}
.trick p{color:var(--text-soft);font-size:var(--fs-md)}

/* penulisan */
.writing-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:900px){.writing-split{grid-template-columns:1fr}}
.wc-row{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-mute)}
.wc-row b{color:var(--text)}

/* dua kolom umum */
.split{display:grid;grid-template-columns:260px 1fr;gap:var(--s-5);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.sticky-col{position:sticky;top:calc(var(--topbar-h) + var(--s-4))}
@media(max-width:900px){.sticky-col{position:static}}

/* ── ikon garis ───────────────────────────────────────────────── */
.ico{flex:none;display:inline-block;vertical-align:-.18em}
.btn .ico,.badge .ico,.card__title .ico{margin-right:.1rem}
.card__title{display:flex;align-items:center;gap:.55rem}

/* ── kartu ujian di hub ───────────────────────────────────────── */
.exam-card__ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-text)}
.spec-list{display:grid;gap:.35rem;margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--line)}
.spec-list>div{display:flex;justify-content:space-between;gap:var(--s-3);font-size:var(--fs-sm)}
.spec-list dt{color:var(--text-mute)}
.spec-list dd{font-weight:600;text-align:right}

/* ── strip spesifikasi ────────────────────────────────────────── */
.spec-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.spec-strip>div{background:var(--surface-2);padding:var(--s-4) var(--s-5);display:grid;gap:.25rem}
.spec-strip span{font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.spec-strip b{font-size:var(--fs-sm);font-weight:600;line-height:1.45}

/* ── kartu bagian (format resmi) ──────────────────────────────── */
.sec-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.sec-card__head{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-5);
  border-bottom:1px solid var(--line);background:
    linear-gradient(100deg,var(--brand-soft),transparent 60%)}
.sec-card__n{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;
  color:var(--brand-text);line-height:1;opacity:.85}
.sec-card__head h3{font-size:var(--fs-xl)}
.sec-card__meta{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:.35rem;
  font-size:var(--fs-sm);color:var(--text-soft)}
.sec-card__meta span{display:inline-flex;align-items:center;gap:.3rem}
.sec-card__body{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s-5);padding:var(--s-5)}
@media(max-width:860px){.sec-card__body{grid-template-columns:1fr}}
.sec-parts{display:grid;gap:var(--s-3)}
.sec-part{padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--bg-elev);
  border:1px solid var(--line)}
.sec-part__top{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.3rem}
.sec-facts{padding:var(--s-4);border-radius:var(--r-md);background:var(--bg-elev);
  border:1px dashed var(--line-strong);align-self:start}
.sec-facts__k{font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-text);font-weight:700;margin-bottom:.3rem}

/* ── trik jitu ────────────────────────────────────────────────── */
.tabs--sub{background:transparent;border:0;padding:0;gap:var(--s-2)}
.tabs--sub button{border:1px solid var(--line);border-radius:var(--r-full);padding:.3rem .8rem}
.tabs--sub button.is-active{background:var(--brand);color:#fff;border-color:transparent;box-shadow:none}
.tactic{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);padding:var(--s-5);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);margin-bottom:var(--s-3)}
.tactic__n{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;
  color:var(--line-strong);line-height:1}
.tactic__body h4{font-size:var(--fs-lg)}
.tactic__steps{margin:.7rem 0 0;padding-left:1.1rem;list-style:decimal;display:grid;gap:.4rem;
  color:var(--text-soft);font-size:var(--fs-md)}
.tactic__steps li{padding-left:.2rem}
.tactic__why{display:flex;gap:.5rem;align-items:flex-start;margin-top:.9rem;padding-top:.7rem;
  border-top:1px dashed var(--line);color:var(--text-mute);font-size:var(--fs-sm)}
.tactic__why .ico{color:var(--warn);margin-top:.15rem}

/* ── band & konversi ──────────────────────────────────────────── */
.band-table{display:grid;gap:2px}
.band-row{display:grid;grid-template-columns:64px 1fr;gap:var(--s-4);align-items:center;
  padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--surface-2)}
.band-row__b{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;
  text-align:center;color:var(--brand-text)}
.conv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:5px}
.conv{display:flex;justify-content:space-between;gap:.4rem;padding:.25rem .5rem;border-radius:7px;
  background:var(--surface-3);font-size:var(--fs-xs)}
.conv b{font-variant-numeric:tabular-nums}

/* ── mitos ────────────────────────────────────────────────────── */
.myth{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);padding:var(--s-4);
  border:1px solid var(--line);border-left:3px solid var(--bad);border-radius:var(--r-md);
  background:var(--surface-2);margin-bottom:var(--s-3)}
.myth__x{color:var(--bad);margin-top:.15rem}
.prompt-row{display:flex;gap:var(--s-3);align-items:center;padding:.5rem var(--s-3);
  border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-md)}
.prompt-row .speak-btn{margin-left:auto}

/* ── simulasi ─────────────────────────────────────────────────── */
.mock-gate{display:grid;place-items:center;gap:var(--s-4);text-align:center;padding:var(--s-12) var(--s-5);
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(160deg,var(--brand-soft),var(--surface-2))}
.mock-gate h2{font-family:var(--font-display);font-size:var(--fs-3xl)}
.mock-gate__meta{display:flex;gap:var(--s-8);flex-wrap:wrap;justify-content:center}
.mock-gate__meta div{display:grid;gap:.1rem}
.mock-gate__meta b{font-size:var(--fs-2xl);font-variant-numeric:tabular-nums}
.mock-gate__meta span{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.mock-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s-3);
  width:100%;max-width:900px;text-align:left}
.mock-part{padding:var(--s-3);border-radius:var(--r-md);background:var(--bg-elev);border:1px solid var(--line);
  display:grid;gap:.2rem}
.mock-part b{font-size:var(--fs-sm)}
.mock-part span{font-size:var(--fs-2xs);color:var(--brand-text);font-weight:700}
.mock-part em{font-size:var(--fs-xs);color:var(--text-mute);font-style:normal}

.mock-grid{display:grid;gap:var(--s-4)}
.mock-grid.has-passage{grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:980px){.mock-grid.has-passage{grid-template-columns:1fr}}
.mock-passage{position:sticky;top:calc(var(--topbar-h) + 74px);max-height:calc(100dvh - var(--topbar-h) - 110px);
  overflow:auto}
@media(max-width:980px){.mock-passage{position:static;max-height:none}}
.mock-audio{display:grid;gap:.6rem;padding:var(--s-4);border-radius:var(--r-md);
  border:1px dashed var(--line-strong);background:var(--surface-2);margin-bottom:var(--s-4)}
.mock-num{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-weight:700;font-size:var(--fs-sm)}
.mock-part-label{font-size:var(--fs-sm);color:var(--text-soft);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:32ch}
.opt.is-picked{border-color:var(--brand);background:var(--brand-soft)}
.opt.is-picked .opt__key{background:var(--brand);color:#fff}
.rec-ring{display:grid;place-items:center}

/* ── platform multibahasa ─────────────────────────────────────── */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s-4)}
.lang-card{display:flex;flex-direction:column;gap:.4rem;padding:var(--s-5);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface-2);position:relative;overflow:hidden;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.lang-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent)}
.lang-card::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%);pointer-events:none}
.lang-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-2);text-decoration:none}
.lang-card.is-soon{opacity:.72}
.lang-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.lang-card__native{font-size:var(--fs-2xl);font-weight:700;color:var(--accent);line-height:1.1}
.lang-card h3{font-size:var(--fs-lg);margin-top:.1rem}
.lang-native{font-size:.6em;color:var(--text-mute);font-weight:500;vertical-align:middle;margin-left:.4rem}

/* huruf */
.jamo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:var(--s-2);margin-top:var(--s-3)}
.jamo{position:relative;display:grid;place-items:center;gap:2px;padding:.7rem .3rem;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--bg-elev);transition:all var(--dur-1) var(--ease)}
.jamo:hover{border-color:var(--brand);transform:translateY(-2px);background:var(--brand-soft)}
.jamo__c{font-size:1.9rem;line-height:1.1;font-weight:600}
.jamo__r{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--info)}
.jamo__n{position:absolute;top:4px;right:6px;font-size:var(--fs-2xs);color:var(--text-mute)}
.pair-row{display:flex;align-items:center;gap:var(--s-3);padding:.45rem var(--s-3);border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line)}
.pair-row .jamo__c{font-size:1.3rem;min-width:2ch;text-align:center}
.pair-row .small{flex:1}
.rule-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:.5rem var(--s-3);border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.syl-demo{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.syl{display:grid;place-items:center;gap:.3rem;padding:var(--s-3);border-radius:var(--r-md);
  background:var(--bg-elev);border:1px solid var(--line)}
.syl__block{font-size:2.4rem;font-weight:600;line-height:1}
.syl__parts{display:flex;align-items:center;gap:.25rem;font-size:1.05rem}
.syl__parts i{color:var(--text-mute);font-style:normal;font-size:.75rem}
.syl__rom{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--info)}
.phrase{display:grid;grid-template-columns:1fr auto;gap:.2rem var(--s-3);padding:.55rem var(--s-3);
  border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.phrase__t{font-size:var(--fs-lg);font-weight:600;grid-column:1}
.phrase__r{grid-column:1;font-size:var(--fs-xs);color:var(--info)}
.phrase__id{grid-column:1;font-size:var(--fs-sm);color:var(--text-soft)}
.phrase .speak-btn{grid-column:2;grid-row:1/4;align-self:center;margin:0}
.num-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:5px}
.num-cell{display:grid;place-items:center;padding:.4rem;border-radius:8px;background:var(--surface-3)}
.num-cell b{font-size:1.15rem}
.num-cell span{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--info)}
.num-cell em{font-style:normal;font-size:var(--fs-2xs);color:var(--text-mute)}

/* papan aksara */
.glyph-svg{background:var(--bg-elev);border-radius:var(--r-md);border:1px solid var(--line);touch-action:none}
.glyph-svg.is-tracing{cursor:crosshair}
.glyph-guide rect{fill:none;stroke:var(--line);stroke-width:.8}
.glyph-guide line{stroke:var(--line);stroke-width:.6;stroke-dasharray:3 3}
.glyph-guide line.diag{opacity:.45}
.glyph-ghost path{fill:none;stroke:var(--line-strong);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.glyph-ink path{fill:none;stroke:var(--brand);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.glyph-start{fill:var(--ok);opacity:.9}
.glyph-num{font-size:7px;font-weight:700;fill:#04231b;text-anchor:middle;font-family:var(--font-sans)}
.glyph-trace polyline{fill:none;stroke:var(--warn);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.glyph-trace polyline.is-ok{stroke:var(--ok)}
.glyph-trace polyline.is-bad{stroke:var(--bad)}
.glyph-modal__body{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);margin-top:var(--s-4);align-items:start}
@media(max-width:640px){.glyph-modal__body{grid-template-columns:1fr;justify-items:center}}

/* pelatih menulis */
.writer{display:grid;grid-template-columns:170px 1fr;gap:var(--s-5);align-items:start}
@media(max-width:900px){.writer{grid-template-columns:1fr}}
.writer__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px;
  max-height:70vh;overflow:auto;padding:var(--s-2);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface-2)}
@media(max-width:900px){.writer__list{max-height:170px}}
.writer__item{display:grid;place-items:center;padding:.4rem .2rem;border-radius:8px;
  border:1px solid transparent;transition:all var(--dur-1) var(--ease)}
.writer__item:hover{background:var(--surface-3)}
.writer__item.is-active{background:var(--brand-soft);border-color:var(--brand)}
.writer__item .jamo__c{font-size:1.35rem}
.writer__stage{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:var(--s-5)}
.writer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.writer__c{font-size:3.2rem;line-height:1;font-weight:600}
.writer__meta{font-size:var(--fs-sm);color:var(--text-soft);margin-top:.2rem}
.writer__board{display:grid;place-items:center;margin:var(--s-5) 0}
.writer__foot{display:flex;align-items:center;gap:var(--s-3)}
.writer__msg{min-height:1.4em;margin-top:var(--s-3);font-size:var(--fs-sm);font-weight:600}
.writer__msg.is-ok{color:var(--ok)}
.writer__msg.is-bad{color:var(--bad)}

/* ── spanduk status suara ─────────────────────────────────────── */
.vbanner{display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding:var(--s-4);
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2)}
.vbanner.is-ok{border-color:#17c49340;background:var(--ok-soft)}
.vbanner.is-ok .ico{color:var(--ok)}
.vbanner.is-warn{border-color:#f0a91d40;background:var(--warn-soft)}
.vbanner.is-warn .ico{color:var(--warn)}
.vbanner.is-bad{border-color:#f0576f40;background:var(--bad-soft)}
.vbanner.is-bad .ico{color:var(--bad)}
.vbanner .ico{margin-top:.15rem}
.vbanner b{display:block;font-size:var(--fs-md)}
.vbanner span{display:block;font-size:var(--fs-sm);color:var(--text-soft);margin-top:.15rem}
.vbanner details{margin-top:.6rem}
.vbanner summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--brand-text)}
.vbanner ol{margin:.5rem 0 .3rem;padding-left:1.1rem;display:grid;gap:.35rem;
  font-size:var(--fs-sm);color:var(--text-soft)}

/* bentuk sambung huruf Arab */
.forms-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);margin-top:var(--s-3)}
.form-cell{display:grid;place-items:center;gap:.2rem;padding:.6rem;border-radius:var(--r-md);
  background:var(--bg-elev);border:1px solid var(--line)}
.form-cell b{font-size:1.7rem;line-height:1}
.form-cell span{font-size:var(--fs-2xs);color:var(--text-mute)}

/* sel angka bisa diklik untuk dibunyikan */
.num-cell{cursor:pointer;transition:background var(--dur-1) var(--ease)}
.num-cell:hover{background:var(--brand-soft)}
/* ketebalan goresan mengikuti kotak koordinat glyph */
.glyph-ghost path,.glyph-ink path{stroke-width:var(--gw,7)}
.glyph-trace polyline{stroke-width:calc(var(--gw,7) * .72)}
/* umpan balik tombol bunyi huruf */
.writer__say{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-height:1.6em;
  margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--text-soft)}
.writer__say:empty{display:none}
.writer__say b{color:var(--text)}
.writer__say em{font-style:normal;font-size:var(--fs-2xs);color:var(--text-mute);margin-left:auto}
.writer__say.is-ok{color:var(--ok)}
.writer__say.is-warn{color:var(--warn)}
.writer__say.is-bad{color:var(--bad)}
.speak-btn.is-on,.btn.is-on{animation:pulse 1s var(--ease) infinite}
@keyframes pulse{50%{opacity:.5}}

/* ── Modul kanji ─────────────────────────────────────────────────
   Petak kanji sengaja lebih lega daripada .jamo-grid: tiap sel memuat
   hurufnya, artinya, dan jumlah coretannya sekaligus.               */
.kj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,96px),1fr));
  gap:var(--s-2)}
.kj-cell{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;
  gap:2px;padding:.75rem .35rem;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--bg-elev);transition:all var(--dur-1) var(--ease);min-width:0}
.kj-cell:hover{border-color:var(--brand);transform:translateY(-2px);background:var(--brand-soft)}
.kj-cell.is-hafal{border-color:var(--ok,var(--brand))}
.kj-cell.is-hafal::after{content:'';position:absolute;top:5px;left:6px;width:6px;height:6px;
  border-radius:50%;background:var(--ok,var(--brand))}
.kj-cell__k{font-size:2.1rem;line-height:1.05;font-weight:600}
.kj-cell__a{font-size:var(--fs-2xs);color:var(--text-mute);text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kj-cell__n{position:absolute;top:4px;right:6px;font-size:var(--fs-2xs);color:var(--text-mute)}

.kj-head{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--s-5);
  align-items:start;padding:var(--s-5)}
.kj-head__glyph{font-size:5.5rem;line-height:1;font-weight:600;text-align:center;min-width:0}
.kj-head__info{min-width:0}
.kj-bacaan{display:grid;gap:.5rem}
.kj-bacaan>div{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;min-width:0}
.kj-tag{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.04em;
  padding:.12rem .45rem;border-radius:var(--r-sm);background:var(--brand-soft);
  color:var(--brand-text);flex:none}
.kj-tag--kun{background:var(--surface-2);color:var(--info)}
.kj-baca{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .45rem;
  border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.kj-baca__r{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-mute);font-style:normal}

.kj-kata{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;padding:.55rem var(--s-3);
  border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.kj-kata__t{font-size:1.15rem;font-weight:600;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.kj-kata__b{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--info)}
.kj-kata__b i{color:var(--text-mute);font-style:normal}
.kj-kata__a{font-size:var(--fs-sm)}

@media (max-width:560px){
  .kj-head{grid-template-columns:minmax(0,1fr);gap:var(--s-3);justify-items:center;text-align:center}
  .kj-head__glyph{font-size:4.5rem}
  .kj-bacaan>div{justify-content:center}
}

/* ── Contoh pemakaian pada kartu kosakata ────────────────────────
   Dipisahkan dari makna kata dengan garis tipis supaya mata langsung
   tahu mana kata, mana kalimatnya.                                   */
.vocab-item__ex{margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--line);
  display:grid;gap:.15rem;min-width:0}
.vocab-item__ex-t{font-size:var(--fs-sm);line-height:1.45;display:flex;
  align-items:baseline;gap:.35rem;flex-wrap:wrap;min-width:0}
.vocab-item__ex .id-txt{color:var(--text-mute)}

/* ── Indeks tata bahasa ────────────────────────────────────────────
   162 topik dalam satu petak datar setinggi 41 layar: bisa dicari
   kalau sudah tahu namanya, tidak bisa ditelusuri kalau belum. Bagian
   ini memberi dua sumbu — tingkat (seberapa sulit) dan tema (tentang
   apa) — lalu memecah daftarnya jadi bagian bertajuk.               */
.gram-bar{display:grid;gap:var(--s-3);margin-bottom:var(--s-4)}
.gram-chips{display:flex;flex-wrap:wrap;gap:6px}
.gram-chips .chip{cursor:pointer;border:1px solid var(--line);background:var(--surface-2);
  color:var(--text-soft);font-size:var(--fs-xs);font-weight:600}
.gram-chips .chip.is-active{background:var(--brand-soft);border-color:var(--brand);color:var(--text)}
.gram-chips .chip b{margin-left:2px;color:var(--text-mute);font-weight:700}
.gram-chips .chip.is-active b{color:var(--brand-text)}
.gram-count{margin:0 0 var(--s-4)}

.gram-sec{margin-bottom:var(--s-8)}
/* Tajuk kelompok menempel di atas saat digulir supaya pembaca selalu
   tahu sedang berada di tema mana — daftar ini panjang. */
.gram-sec__h{position:sticky;top:calc(var(--topbar-h) + 2px);z-index:2;
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-3) 0;background:linear-gradient(var(--bg) 78%,transparent);
  border-bottom:1px solid var(--line)}
.gram-sec__h h2{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
.gram-sec .bar--thin{height:3px;margin-top:var(--s-2);border-radius:99px}

/* Topik yang sudah dikuasai ditandai garis hijau tipis di tepi kiri —
   terlihat sekilas tanpa menambah lencana baru ke kartunya. */
.gram-card{position:relative}
.gram-card.is-kuasa::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:99px;background:var(--ok)}

@media (max-width:720px){
  /* Tajuk lengket dimatikan di layar sempit: tinggi layarnya terlalu
     berharga untuk dipakai tajuk yang menetap. */
  .gram-sec__h{position:static;background:none}
  .gram-sec__h h2{font-size:var(--fs-md)}

  /* Dibungkus, tiga belas keping tema menumpuk setinggi 454px — lebih
     dari separuh layar ponsel terpakai sebelum topik pertama terlihat.
     Dijadikan satu jalur gulir mendatar, sama seperti tab tingkat di
     atasnya, sehingga hanya memakan satu baris. */
  .gram-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;
    scroll-snap-type:x proximity}
  .gram-chips::-webkit-scrollbar{display:none}
  .gram-chips .chip{flex:none;scroll-snap-align:start}
}

/* ── Sistem kala & kata kerja ──────────────────────────────────────
   Petak 12 kala ditampilkan sebagai petak sungguhan, bukan daftar.
   Itu intinya: pemelajar harus MELIHAT bahwa 3 waktu × 4 rupa = 12,
   dan bahwa keduabelasnya dibentuk dari pola yang sama. Daftar
   memanjang menyembunyikan justru hal yang mau diajarkan.           */
.tense-grid{display:grid;gap:8px;margin-bottom:var(--s-4)}
.tense-grid__h,.tense-grid__r{display:grid;grid-template-columns:120px repeat(4,1fr);gap:8px;align-items:stretch}
.tense-grid__h span{display:grid;gap:1px;padding:.4rem .2rem;text-align:center}
.tense-grid__h b{font-size:var(--fs-sm);font-weight:700}
.tense-grid__h i{font-style:normal;font-size:var(--fs-2xs);color:var(--text-mute)}
.tense-grid__w{display:grid;gap:1px;align-content:center;padding:.6rem;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line)}
.tense-grid__w b{font-size:var(--fs-md);font-weight:700}
.tense-grid__w i{font-style:normal;font-size:var(--fs-2xs);color:var(--text-mute)}

.tense-cell{display:grid;gap:5px;align-content:start;text-align:left;cursor:pointer;
  padding:.7rem .75rem;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);font:inherit;
  transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.tense-cell:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.tense-cell b{font-size:var(--fs-sm);font-weight:700;line-height:1.25}
.tense-cell code{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-mute);
  line-height:1.35;word-break:break-word}
.tense-cell.is-active{background:var(--brand-soft);border-color:var(--brand)}
.tense-cell.is-active code{color:var(--brand-text)}

.card--focus{border-color:var(--brand);box-shadow:var(--shadow-2)}
.tense-forms{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.tense-forms>div{display:grid;gap:3px;padding:.6rem .7rem;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line)}
.tense-forms span{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.tense-forms code{font-family:var(--font-mono);font-size:var(--fs-sm)}

.split-2{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

.tense-key{display:grid;gap:4px}
.tense-key__r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-4);
  padding:.42rem .6rem;border-radius:var(--r-sm);background:var(--surface-2);align-items:center}
.tense-key__r code{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--brand-text)}
.tense-key__r span{font-size:var(--fs-sm);font-weight:600}

.tense-alt{padding:.75rem .85rem;border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--line)}

/* Tabel konjugasi bisa lebar; ia bergulir DI DALAM kotaknya sendiri
   supaya badan halaman tidak ikut bergeser ke samping. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap .tbl{min-width:520px}

@media (max-width:820px){
  /* Di layar sempit petaknya dipecah per waktu, karena lima kolom
     memaksa tulisannya terlalu kecil untuk dibaca. */
  .tense-grid__h{display:none}
  .tense-grid__r{grid-template-columns:1fr 1fr}
  .tense-grid__w{grid-column:1 / -1}
  .tense-key__r{grid-template-columns:1fr;gap:2px}
}

/* Sorotan sementara untuk butir yang dituju hasil pencarian. */
.is-sorot{outline:2px solid var(--brand);outline-offset:3px;
  animation:sorot 2.4s ease-out}
@keyframes sorot{0%{background:var(--brand-soft)}100%{background:transparent}}

/* ── Badan pelajaran tata bahasa ───────────────────────────────────
   Keluhan yang memicu bagian ini: "terlalu padat, warnanya susah
   dibedakan". Dua akar masalahnya:

   1. Seluruh kartu memakai warna netral yang sama, jadi mata tidak
      punya pegangan — mana penjelasan, mana rumus, mana jebakan.
   2. Paragraf melar selebar layar. Pada monitor lebar satu baris bisa
      120 karakter; mata kehilangan awal baris berikutnya. Batas nyaman
      baca 65-75 karakter, dan proyek ini sudah punya --max-read:72ch
      yang belum dipakai di sini.

   Perbaikannya: tiap kartu diberi WARNA PERAN lewat satu variabel
   --acc, dan seluruh prosa dibatasi --max-read.                     */

.lesson-body {
  display: grid; gap: var(--s-5);
  /* --max-read global bernilai 72ch, tapi satuan ch diukur dari lebar
     angka "0" font yang dipakai — di sini 1ch = 11px, jadi 72ch jadi
     790px alias ~105 karakter per baris, jauh di atas batas nyaman.
     Satuan em bisa diramal: 36em = 36 x 15px = 540px = ~68 karakter. */
  --max-read: 36em;
}

/* Kalimat pembuka "kenapa ini perlu dipelajari". Sengaja BUKAN kartu:
   satu kartu lagi hanya menambah padat, padahal isinya cuma satu
   kalimat. Cukup garis ungu dan huruf sedikit lebih besar. */
.lesson-lead {
  max-width: var(--max-read); margin: 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 3px solid var(--ajar-ungu);
  font-size: var(--fs-lg); line-height: 1.7;
  color: var(--text); font-weight: 500;
}

.lesson-card {
  --acc: var(--brand);
  --acc-bg: var(--brand-soft);
  position: relative;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  padding-left: calc(var(--s-5) + 5px);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
/* Pita warna di tepi kiri: penanda peran yang terbaca bahkan saat
   kartunya tergulung setengah keluar layar. */
.lesson-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: 5px; background: var(--acc);
}
.lesson-card__head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.lesson-card__mark {
  width: 32px; height: 32px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--acc-bg); color: var(--acc);
}
.lesson-card__mark svg { width: 17px; height: 17px; }
.lesson-card__title {
  font-weight: 800; font-size: var(--fs-lg); letter-spacing: -.012em;
  color: var(--text); line-height: 1.25;
}
.lesson-prose {
  max-width: var(--max-read); margin: 0;
  line-height: 1.78; color: var(--text-soft);
}

/* Warna peran. Urutannya sengaja mengikuti alur belajar:
   biru memahami -> ungu rumus -> kuning catatan -> hijau contoh benar
   -> merah jebakan. Kelimanya token tetap, bukan --brand, supaya arti
   warnanya persis sama di sembilan bahasa. */
.lc--paham   { --acc: var(--info);      --acc-bg: var(--info-soft); }
.lc--rumus   { --acc: var(--ajar-ungu); --acc-bg: var(--ajar-ungu-soft); }
.lc--catatan { --acc: var(--warn);  --acc-bg: var(--warn-soft); }
.lc--contoh  { --acc: var(--ok);    --acc-bg: var(--ok-soft); }
.lc--jebakan { --acc: var(--bad);   --acc-bg: var(--bad-soft); }

/* ── Alur bernomor "Pahami dulu" ─────────────────────────────────
   Nomor dibuat lingkaran berwarna dan disambung garis tipis, supaya
   terbaca sebagai URUTAN — bukan tiga paragraf yang kebetulan
   bernomor. Jarak antarlangkah sengaja lebar: ruang kosong itulah
   yang menghilangkan kesan padat. */
.ajar { display: grid; gap: var(--s-6); }
.ajar__step {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4); position: relative;
}
.ajar__step:not(:last-child)::before {
  content: ''; position: absolute; left: 15px; top: 38px;
  bottom: calc(var(--s-6) * -1); width: 2px;
  background: var(--line-strong); border-radius: 2px;
}
.ajar__num {
  width: 32px; height: 32px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--acc); color: #fff;
  font-weight: 800; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px var(--surface-solid);
}
.ajar__title {
  font-weight: 700; font-size: var(--fs-base); color: var(--text);
  margin: .34rem 0 .5rem; line-height: 1.4;
}
.ajar__text { max-width: var(--max-read); margin: 0; line-height: 1.78; color: var(--text-soft); }

/* Contoh di dalam langkah memakai warna kartunya, bukan hijau —
   supaya tidak tertukar dengan kartu Contoh yang berdiri sendiri. */
.ajar__ex {
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); background: var(--acc-bg);
  border-left: 3px solid var(--acc); max-width: var(--max-read);
}
.ajar__ex .en { display: block; font-weight: 700; color: var(--text); }
.ajar__ex .id-txt { display: block; font-size: var(--fs-sm); margin-top: 2px; }
.ajar__ex .mono { display: block; margin-top: 1px; }

/* Catatan kunci: butir bertanda warna, jarak antarbutir dilonggarkan. */
.lesson-list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.lesson-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3);
  max-width: var(--max-read); line-height: 1.7; color: var(--text-soft);
}
.lesson-list li::before {
  content: ''; width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--acc); margin-top: .55em;
}

/* ── Rumus ────────────────────────────────────────────────────────
   Dulu rumus adalah satu balok monospace bergaris putus-putus: label,
   imbuhan, dan pemisah semuanya berbobot sama, jadi tidak ada yang
   menonjol. Sekarang tiap baris berdiri sendiri, label ditarik ke kolom
   kiri supaya sejajar, imbuhan diwarnai, dan pemisah diredupkan.
   Lihat rumusHTML() di js/ui.js untuk sisi markupnya. */
.rumus {
  max-width: var(--max-read);
  background: var(--acc-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-4);
  overflow-x: auto;
}
.rumus__baris {
  display: grid; grid-template-columns: subgrid;
  grid-column: 1 / -1; align-items: baseline;
  padding: var(--s-2) 0;
}
.rumus__baris + .rumus__baris { border-top: 1px solid var(--line); }
.rumus--berlabel { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.rumus:not(.rumus--berlabel) .rumus__baris { display: block; }
.rumus__jeda { height: var(--s-3); grid-column: 1 / -1; }

/* Label ("Negatif", "Langkah 1") — kecil, kapital, warna kartunya. */
.rumus__tag {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc); white-space: nowrap;
  padding-right: var(--s-4);
}
.rumus__tag--kosong { padding: 0; }

.rumus__isi {
  font-family: var(--font-mono); font-size: var(--fs-md);
  line-height: 1.85; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}

/* Imbuhan (-e, -st, -en): inti pelajarannya, jadi paling terang. */
.rumus__imbuhan {
  color: var(--acc); font-weight: 700;
  background: var(--surface-solid); border-radius: 5px;
  padding: 1px 5px; margin: 0 1px;
}
/* Pemisah dan panah cuma perekat kalimat — diredupkan supaya isinya
   yang terbaca duluan. <i> dipakai demi ringkas; miringnya dimatikan. */
.rumus__pisah, .rumus__panah {
  font-style: normal; color: var(--text-mute);
}
.rumus__pisah { padding: 0 .15em; }

@media (max-width: 640px) {
  .rumus--berlabel { grid-template-columns: minmax(0, 1fr); }
  .rumus__baris { display: block; }
  .rumus__tag { display: block; padding: 0 0 var(--s-1) 0; }
  .rumus__tag--kosong { display: none; }
}

@media (max-width: 640px) {
  .lesson-card { padding: var(--s-4); padding-left: calc(var(--s-4) + 5px); }
  .ajar { gap: var(--s-5); }
  .ajar__step { gap: var(--s-3); }
  .ajar__num { width: 28px; height: 28px; }
  .ajar__step:not(:last-child)::before { left: 13px; top: 34px; }
}

/* ── Kamus ────────────────────────────────────────────────────────
   Tiap entri adalah kartu kecil yang berdiri sendiri: lema besar di
   atas, lalu arti, bentuk kata, contoh kalimat, dan frasa. Urutannya
   sengaja begitu — mata mencari lemanya dulu, baru membaca ke bawah. */
.kamus-bar { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.kamus-bar .input { max-width: 420px; }

.kamus-list {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.kamus-item {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-4);
  display: grid; gap: var(--s-3); align-content: start;
}
.kamus-item__kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.kamus-item__k { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.01em; }
.kamus-item__r { color: var(--info); margin-left: .4rem; }
.kamus-item__a { margin: 0; color: var(--ok); font-size: var(--fs-md); font-weight: 600; }

/* Bentuk kata (V1/V2/V3, artikel+jamak, aspek) — dibariskan supaya
   pola perubahannya terbaca sekali lihat, bukan dieja satu per satu. */
.kamus-bentuk {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-sm);
  background: var(--surface-3); border: 1px solid var(--line);
}
.kamus-bentuk__i { display: grid; gap: 1px; min-width: 0; }
.kamus-bentuk__i b { font-family: var(--font-mono); font-size: var(--fs-sm); }
/* Tombol suara duduk sebaris dengan bentuknya, bukan di bawahnya:
   satu kartu memuat sampai empat bentuk, dan menumpuknya membuat
   kolomnya setinggi kartu contoh. */
.kamus-bentuk__v { display: flex; align-items: center; gap: var(--s-1); }
.kamus-bentuk__r { color: var(--info); opacity: .85; }

.kamus-contoh, .kamus-frasa { display: grid; gap: 2px; }
.kamus-contoh {
  padding-left: var(--s-3); border-left: 3px solid var(--info);
}
.kamus-frasa {
  padding-left: var(--s-3); border-left: 3px solid var(--warn);
}
.kamus-contoh__t, .kamus-frasa__t { font-weight: 600; }
.kamus-contoh__id, .kamus-frasa__id { font-size: var(--fs-sm); color: var(--text-mute); font-style: italic; }
.kamus-contoh .mono { color: var(--info); }

@media (max-width: 640px) {
  .kamus-list { grid-template-columns: minmax(0, 1fr); }
}

/* Lema, romanisasi, dan tombol suara harus satu baris. .speak-btn punya
   margin-left:auto dari gaya kosakata; di sini itu mendorongnya sampai
   turun baris sendiri di bawah lemanya. */
.kamus-item__kepala > div {
  display: flex; align-items: baseline; gap: .4rem;
  flex-wrap: wrap; min-width: 0;
}
.kamus-item__kepala .speak-btn { margin-left: 0; align-self: center; }
.kamus-contoh .speak-btn, .kamus-frasa .speak-btn { margin-left: .35rem; }