/* =====================================================================
   EXAM HUB — PART VIEWS
   Home · vocabulary · grammar · exam tips · writing · mock exams ·
   teachers. Grids are wide on purpose: they fill the screen on laptops
   and projectors and fold to one column on phones.
   ===================================================================== */

/* ---------- Home ---------- */
.view.is-home{padding-top:0;padding-left:0;padding-right:0}
.view.is-home>.band{margin-bottom:.25rem}
.view.is-home>*:not(.band){padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.home-grid{display:grid;gap:1.5rem;align-items:start}
@media (min-width:1200px){.home-grid{grid-template-columns:minmax(0,1fr) 22rem}}
.home-side{display:grid;gap:1rem}
.home-ready,.home-cert{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.25rem;border-radius:var(--r-xl);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.home-ready{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2)}
.home-cert{background:linear-gradient(160deg,#FFF9E6,#FFEDB8);border:1px solid #F5DE9E;box-shadow:var(--shadow-1)}
.home-ready:hover,.home-cert:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.home-ready>span,.home-cert>span{display:grid;gap:.15rem}
.home-ready b,.home-cert b{font-size:1.1rem;font-weight:900;color:var(--ink)}
.home-ready span span,.home-cert span span{font-size:var(--fs-sm);color:var(--fg-2)}
.home-cert .sc-medal{width:3.4rem;height:3.4rem}

.path{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
.path-step{
  position:relative;display:grid;gap:.5rem;align-content:start;height:100%;padding:1.1rem 1.15rem 1.2rem;border-radius:var(--r-xl);text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);box-shadow:0 3px 0 var(--gelw-lip),var(--shadow-1);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.path-step:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 3px 0 var(--gel-lip),var(--shadow-2)}
.ps-top{display:flex;align-items:center;justify-content:space-between}
.ps-n{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:1.05rem;color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 var(--gel-lip)}
.ps-n .i{width:1.1rem;height:1.1rem;stroke-width:3}
.path-step.is-done .ps-n{background:linear-gradient(180deg,var(--gelg-t),var(--gelg-b));color:var(--gelg-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 var(--gelg-lip)}
.path-step b{font-size:1.08rem;font-weight:900;color:var(--ink)}
.ps-text{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.5}
.ps-bar{height:6px;border-radius:999px;background:var(--bg-sunken);overflow:hidden;margin-top:auto}
.ps-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),var(--teal-deep))}
.ps-meta{font-size:.78rem;font-weight:800;color:var(--fg-3)}

.themes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
.theme{display:grid;gap:.8rem;align-content:start;padding:1.35rem 1.4rem;border-radius:var(--r-xl);background:linear-gradient(160deg,#fff,var(--teal-tint));border:1px solid var(--line)}
.theme-name{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem}
.theme-name b{font-size:var(--fs-xl);font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.theme-name .ar-inline{font-size:1rem;color:var(--fg-3)}
.theme ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.theme li{display:grid;grid-template-columns:6.5rem 1fr;gap:.75rem;padding:.55rem 0;border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.5}
.theme li .where{font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);padding-top:.15rem}
.theme li .what{color:var(--fg)}

/* ---------- Numbered methods ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;counter-reset:st;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.steps li{counter-increment:st;display:grid;gap:.4rem;align-content:start;padding:1.15rem 1.2rem 1.25rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:0 3px 0 var(--gelw-lip)}
.steps li::before{content:counter(st);width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:1.05rem;color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 var(--gel-lip);margin-bottom:.2rem}
.steps b{font-size:1.05rem;font-weight:800;color:var(--ink)}
.steps span{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}
.steps .ar{font-size:.95rem}

/* ---------- Toolbars, filters, search ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.filter{display:flex;flex-wrap:wrap;gap:.45rem}
.fchip{
  position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .9rem;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:800;color:var(--fg-2);
  background:linear-gradient(180deg,#fff,#F2FBFA);box-shadow:0 0 0 1px var(--line),0 2px 0 var(--gelw-lip);transition:transform .12s,box-shadow .2s,color .2s;
}
.fchip:active{transform:translateY(2px);box-shadow:0 0 0 1px var(--line)}
.fchip .n{font-size:.72rem;font-weight:900;padding:.05rem .45rem;border-radius:var(--r-pill);background:var(--teal-soft);color:var(--teal-ink)}
.fchip:hover{color:var(--fg);box-shadow:0 0 0 1.5px var(--teal),0 2px 0 var(--gelw-lip)}
.fchip[aria-pressed="true"]{color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 var(--gel-lip)}
.fchip[aria-pressed="true"] .n{background:rgba(255,255,255,.75)}
.search{display:flex;align-items:center;gap:.5rem;flex:1;min-width:12rem;padding:0 1rem;height:2.75rem;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 1px 3px rgba(0,60,70,.08),inset 0 0 0 1.5px var(--line-strong);color:var(--fg-3)}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--teal),0 0 0 4px var(--teal-soft)}
.search input{flex:1;min-width:0;border:0;background:transparent;font-size:var(--fs-base);color:var(--fg)}
.search input:focus{outline:none}

/* ---------- Word bank (dictionary) ---------- */
.dict{display:grid;gap:1.25rem}
@media (min-width:960px){.dict{grid-template-columns:minmax(19rem,24rem) minmax(0,1fr);align-items:start}}
.dict-side{display:grid;gap:.75rem;align-content:start;min-width:0}
.dict-filter .fchip{padding:.38rem .75rem;font-size:.8rem}
.dict-list{display:grid;gap:2px;max-height:34rem;overflow:auto;padding:.4rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);scrollbar-width:thin}
.dict-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:var(--r-sm);text-align:left;font-size:var(--fs-sm);color:var(--fg-2);transition:background .15s}
.dict-item b{flex:1;font-weight:700;color:var(--fg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dict-item:hover{background:var(--teal-tint)}
.dict-item[aria-selected="true"]{background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.dict-item[aria-selected="true"] b,.dict-item[aria-selected="true"] .di-pos{color:var(--gel-ink)}
.di-pos{font-size:.74rem;font-style:italic;color:var(--fg-3)}
.di-dot,.dc-theme i{width:.55rem;height:.55rem;border-radius:50%;flex:none;background:var(--teal)}
.dict-item[aria-selected="true"] .di-dot{background:#fff}
@media (max-width:959px){
  .dict-list{display:flex;overflow-x:auto;max-height:none;padding:.35rem;gap:.35rem}
  .dict-item{flex:none}
}
.dict-card{
  position:relative;display:grid;gap:1rem;align-content:start;min-width:0;overflow:hidden;
  padding:clamp(1.4rem,1rem + 2vw,2.75rem);border-radius:var(--r-xl);
  background:linear-gradient(160deg,#fff 55%,var(--teal-tint));border:1px solid var(--line);box-shadow:var(--shadow-2);
}
.dict-card::before{content:"";position:absolute;right:-6rem;top:-6rem;width:18rem;height:18rem;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(91,227,216,.35),rgba(91,227,216,0) 70%)}
.dict-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--teal-bright),var(--teal-deep))}
.dict-card>*{position:relative}
.dc-top{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.dc-theme{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.dc-count{margin-left:auto;font-size:.82rem;font-weight:800;color:var(--fg-3);font-variant-numeric:tabular-nums}
.dc-nav{display:flex;gap:.4rem;align-items:center}
.dc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem}
.dc-word{font-size:clamp(2.6rem,2rem + 2.8vw,4.3rem);font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.dc-pos{font-family:var(--font-read);font-style:italic;font-size:1.25rem;color:var(--teal-ink)}
.dc-mean{font-size:var(--fs-md);font-weight:600;line-height:1.5;color:var(--fg);max-width:60ch}
.dc-ar{margin:0;padding:.55rem 1rem;border-radius:var(--r-md);background:var(--sun-soft);color:var(--fg);font-size:1.2rem;text-align:right}
.dc-ex{margin:0;position:relative;padding:.3rem 0 .3rem 2.6rem;font-family:var(--font-read);font-size:1.3rem;font-style:italic;line-height:1.5;color:var(--fg-2)}
.dc-ex b{font-style:normal;font-weight:700;color:var(--teal-ink)}
.dc-q{position:absolute;left:0;top:-.7rem;font-family:var(--font-read);font-size:3.8rem;line-height:1;color:var(--teal)}
.dc-facets{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));padding-top:1rem;border-top:1px solid var(--line)}
.dc-f{display:grid;gap:.45rem;align-content:start}
.dc-lbl{font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.dc-f p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}
.dc-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.dc-chip{padding:.3rem .7rem;border-radius:var(--r-pill);font-size:.82rem;font-weight:700;background:#fff;color:var(--teal-ink);box-shadow:inset 0 0 0 1px var(--line),0 2px 0 var(--gelw-lip)}
.dc-note,.dc-up{display:flex;gap:.55rem;align-items:flex-start;padding:.75rem .95rem;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.5}
.dc-note{background:var(--coral-soft);color:var(--fg)}
.dc-note .i{color:var(--bad);margin-top:.15rem}
.dc-up{background:var(--violet-soft);color:var(--fg)}
.dc-up .i{color:var(--violet);margin-top:.15rem}

/* ---------- Flashcards ---------- */
.flash{perspective:1400px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.flash-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.flash.is-flipped .flash-in{transform:rotateY(180deg)}
.flash-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-xl);padding:1.6rem 1.8rem;display:flex;flex-direction:column;gap:.7rem;overflow:hidden}
.flash-front{
  justify-content:space-between;color:var(--gel-ink);
  background:radial-gradient(28rem 16rem at 100% 0%,rgba(255,255,255,.45),transparent 60%),linear-gradient(160deg,#7AEDE3 0%,#18BDB3 55%,#0A948C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 5px 0 #07766F,var(--shadow-3);
}
.flash-front::before{content:"";position:absolute;left:5%;right:5%;top:4px;height:38%;border-radius:999px 999px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.flash-front .word{position:relative;font-size:clamp(2.4rem,1.8rem + 3vw,4rem);font-weight:900;line-height:1;letter-spacing:-.03em;color:#03282D}
.flash-front .pos{position:relative;font-size:var(--fs-xs);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#05434A}
.flash-front .hint{position:relative;display:flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);font-weight:700;color:#05434A}
.flash-back{transform:rotateY(180deg);background:#fff;color:var(--fg);border:1px solid var(--line);box-shadow:0 5px 0 var(--gelw-lip),var(--shadow-3);justify-content:center}
.flash-back .meaning{font-size:var(--fs-md);font-weight:700;line-height:1.45}
.flash-back .example{font-family:var(--font-read);font-size:1.3rem;font-style:italic;color:var(--fg-2);line-height:1.5}
.flash-back .example b{font-style:normal;color:var(--teal-ink)}
.flash-back .fam{font-size:var(--fs-sm);color:var(--fg-3)}
.deck{display:grid;gap:1.1rem;justify-items:center;outline:none}
.deck-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;width:min(100%,58rem)}
.deck-prog{display:flex;align-items:center;gap:.75rem;flex:1;min-width:12rem}
.deck-known{font-size:var(--fs-sm);color:var(--fg-2);white-space:nowrap}
.deck-known b{font-size:1.35rem;font-weight:900;color:var(--ok)}
.deck-bar{flex:1;height:8px;border-radius:999px;background:var(--bg-sunken);overflow:hidden}
.deck-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gelg-t),var(--gelg-b));border-radius:inherit;transition:width .3s}
.deck-stage{width:min(100%,58rem);display:grid;gap:.5rem;justify-items:center}
.deck-card{width:100%;height:clamp(17rem,13rem + 11vw,24rem)}
.deck-tick{position:absolute;right:1.4rem;bottom:1.2rem;display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:900;color:#03282D;background:rgba(255,255,255,.7);padding:.25rem .6rem;border-radius:999px}
.deck-pos{font-size:var(--fs-sm);font-weight:800;color:var(--fg-3);font-variant-numeric:tabular-nums}
.deck-ctrl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem}
.deck-done{display:grid;gap:.4rem;place-items:center;text-align:center;width:100%;min-height:14rem;padding:2rem;border-radius:var(--r-xl);background:var(--bg-soft);border:2px dashed var(--line-strong)}
.deck-done b{font-size:1.5rem;font-weight:900}
.deck-keys{font-size:var(--fs-xs);color:var(--fg-3)}
@media (max-width:560px){.deck-ctrl .deck-no,.deck-ctrl .deck-yes{flex:1}}

/* ---------- Mix-ups ---------- */
.pairs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr))}
.pair{display:grid;gap:.55rem;align-content:start;padding:1.15rem 1.25rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:0 3px 0 var(--gelw-lip)}
.pair-words{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;font-size:1.3rem;font-weight:900;color:var(--ink)}
.pair-words .vs{font-family:var(--font-read);font-style:italic;font-weight:400;font-size:1rem;color:var(--fg-3)}
.pair p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}

/* ---------- Grammar ---------- */
.rule-steps{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.rule-step{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:var(--r-lg);text-align:left;
  background:linear-gradient(180deg,#fff,#F2FBFA);box-shadow:0 0 0 1px var(--line),0 3px 0 var(--gelw-lip);transition:transform .12s,box-shadow .2s;
}
.rule-step:hover{box-shadow:0 0 0 1.5px var(--teal),0 3px 0 var(--gelw-lip)}
.rule-step:active{transform:translateY(2px)}
.rule-step[aria-selected="true"]{background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 var(--gel-lip)}
.rs-n{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.95rem;background:var(--teal-soft);color:var(--teal-ink)}
.rule-step[aria-selected="true"] .rs-n{background:#fff}
.rs-t{font-size:.84rem;font-weight:800;line-height:1.25;color:var(--fg);min-width:0}
.rule-step[aria-selected="true"] .rs-t{color:var(--gel-ink)}
.rs-s{font-size:.7rem;font-weight:900;color:var(--ok);background:var(--ok-tint);padding:.1rem .4rem;border-radius:999px}
.rule-stage{display:grid;gap:1.25rem}
.rule-pane{display:grid;gap:.75rem}
.rule-pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem}
.rule{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-2)}
.rule-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;padding:1.25rem 1.6rem;background:linear-gradient(180deg,var(--teal-tint),#fff);border-bottom:1px solid var(--line)}
.rule-code{font-family:var(--font-mono);font-size:.76rem;font-weight:600;color:var(--teal-ink)}
.rule-title{font-size:var(--fs-xl);font-weight:900;color:var(--ink);letter-spacing:-.02em}
.rule-ar{flex-basis:100%;font-size:1rem;color:var(--fg-3)}
.rule-body{display:grid;gap:1.4rem 2.5rem;padding:1.5rem 1.6rem 1.7rem}
@media (min-width:1100px){.rule-body{grid-template-columns:1fr 1fr}.rule-body>.fix,.rule-body>.callout{grid-column:1 / -1}}
.rule-label{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.5rem}
.forms{display:grid;gap:.7rem}
.form-row{display:grid;gap:.35rem}
.form-label{font-size:var(--fs-xs);font-weight:800;color:var(--fg-2)}
.examples{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.examples li{font-family:var(--font-read);font-size:1.18rem;line-height:1.55;padding-left:1.2rem;position:relative;color:var(--paper-fg)}
.examples li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--teal)}
.signals{display:flex;flex-wrap:wrap;gap:.4rem}
.fix{display:grid;gap:.5rem}
.fix-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.fix-row>div{display:flex;gap:.55rem;align-items:flex-start;padding:.65rem .85rem;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.45}
.fix-row .wrong{background:var(--bad-tint)}
.fix-row .wrong s{text-decoration-color:var(--bad);text-decoration-thickness:2px}
.fix-row .right{background:var(--ok-tint)}
.fix-row .wrong .i{color:var(--bad);margin-top:.15rem}
.fix-row .right .i{color:var(--ok);margin-top:.15rem}
@media (max-width:560px){.fix-row{grid-template-columns:1fr}}
.rule-drill{min-width:0}

/* ---------- Exam tips ---------- */
.spec{display:grid;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow-1)}
.spec-row{display:grid;gap:.9rem 1.5rem;padding:1.25rem 1.5rem;border-top:1px solid var(--line);align-items:start}
.spec-row:first-child{border-top:0}
@media (min-width:900px){.spec-row{grid-template-columns:13rem minmax(0,1.4fr) minmax(0,1fr) 6rem}}
.spec-part{display:grid;gap:.3rem;align-content:start}
.spec-part .no{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.spec-part b{font-size:1.3rem;font-weight:900;line-height:1.15;color:var(--ink)}
.spec-part .lvl{font-size:var(--fs-xs);color:var(--fg-3);font-weight:700}
.spec-what{display:grid;gap:.35rem;font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}
.spec-what .task{font-weight:800;color:var(--fg)}
.spec-what .topic{font-family:var(--font-read);font-style:italic;color:var(--fg)}
.spec-skills{display:flex;flex-wrap:wrap;gap:.35rem;align-content:start}
.spec-skills .chip b{color:var(--teal-ink);font-weight:900}
.spec-marks{display:grid;justify-items:end;align-content:start}
.spec-marks .big{font-size:2.5rem;font-weight:900;line-height:1;color:var(--teal-ink);font-variant-numeric:lining-nums}
.spec-marks small{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);text-align:right}
@media (max-width:899px){.spec-row{grid-template-columns:minmax(0,1fr) auto}.spec-part{grid-column:1}.spec-marks{grid-column:2;grid-row:1}.spec-what,.spec-skills{grid-column:1 / -1}}
.spec-total{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;align-items:baseline;padding:1rem 1.5rem;background:var(--teal-tint);border-top:1px solid var(--line);font-size:var(--fs-sm);font-weight:700;color:var(--fg-2)}
.spec-total b{font-size:1.6rem;font-weight:900;color:var(--ink)}
.clues{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.clue{display:grid;gap:.55rem;align-content:start;padding:1.1rem 1.2rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line)}
.clue-n{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.9rem;color:var(--teal-ink);background:var(--teal-soft)}
.clue b{font-size:1.05rem;font-weight:900;color:var(--ink)}
.clue-ex{font-family:var(--font-read);font-size:1.02rem;color:var(--fg-2);line-height:1.5}
.skills{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.skill{display:grid;gap:.55rem;align-content:start;padding:1.15rem 1.25rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:0 3px 0 var(--gelw-lip)}
.skill-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .75rem}
.skill-top b{font-size:1.15rem;font-weight:900;color:var(--ink)}
.skill-top .ar-inline{font-size:.92rem;color:var(--fg-3)}
.skill-count{display:flex;gap:.35rem;flex-wrap:wrap}
.skill p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}
.stems{margin:0;padding:0;list-style:none;display:grid;gap:.3rem}
.stems li{font-family:var(--font-read);font-style:italic;font-size:1.05rem;color:var(--fg);padding-left:1rem;position:relative}
.stems li::before{content:"?";position:absolute;left:0;font-family:var(--font-ui);font-style:normal;font-weight:900;color:var(--teal-ink)}
.traps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.trap{display:grid;gap:.55rem;align-content:start;padding:1.2rem 1.25rem;border-radius:var(--r-xl);background:var(--coral-soft)}
.trap-n{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-weight:900;color:var(--gelc-ink);background:linear-gradient(180deg,var(--gelc-t),var(--gelc-b));box-shadow:0 2px 0 var(--gelc-lip)}
.trap b{font-size:1.05rem;font-weight:900}
.trap p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}
.trap-ex{display:flex;gap:.5rem;align-items:flex-start;padding:.6rem .75rem;border-radius:var(--r-md);background:#fff;color:var(--fg)!important}
.trap-ex .i{color:var(--bad);margin-top:.15rem}
.task-grid{display:grid;gap:1rem}
@media (min-width:900px){.task-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.exam-instr{display:grid;gap:.5rem;align-content:start;padding:1.35rem 1.45rem;border-radius:var(--r-xl);background:linear-gradient(160deg,#fff,var(--teal-tint));border:1px solid var(--line)}
.exam-instr p:first-of-type{font-family:var(--font-read);font-size:1.25rem;line-height:1.55;color:var(--paper-fg)}
.crit-list{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.crit-list li{display:grid;gap:.15rem;padding:.8rem 1rem;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);font-size:var(--fs-sm)}
.crit-list li span{color:var(--fg-2)}
.toolkit{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr))}
.tool{display:grid;gap:.6rem;align-content:start;padding:1.15rem 1.25rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line)}
.tool>b{font-size:1.05rem;font-weight:900;color:var(--ink)}
.tool ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.tool li{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center;font-size:var(--fs-sm);line-height:1.45}
.tool .before{color:var(--fg-3);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.tool .after{font-weight:700;color:var(--fg)}
.tool .i{color:var(--teal-deep)}
@media (max-width:520px){.tool li{grid-template-columns:1fr}.tool li .i{transform:rotate(90deg)}}
.anatomy{display:grid;gap:1.25rem}
@media (min-width:1000px){.anatomy{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}.anatomy-prompt{position:sticky;top:6.5rem}}
.plan{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.plan-item{display:grid;gap:.4rem;padding:1rem 1.2rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.plan-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem}
.plan-head b{font-size:1.08rem;font-weight:900;color:var(--ink)}
.plan-item p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}
.frame{display:flex;gap:.5rem;align-items:flex-start;padding:.55rem .8rem;border-radius:var(--r-md);background:var(--sun-soft);color:var(--fg)!important;font-family:var(--font-read);font-style:italic}
.frame .i{color:var(--sun-ink);margin-top:.2rem;flex:none}
.structs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.struct{display:grid;gap:.6rem;align-content:start;padding:1.2rem 1.3rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line)}
.struct>b{font-size:1.2rem;font-weight:900;color:var(--ink)}
.struct>p{font-size:var(--fs-sm);color:var(--fg-2)}
.struct ol{margin:0;padding:0;list-style:none;counter-reset:sp;display:grid;gap:.45rem}
.struct li{counter-increment:sp;display:grid;grid-template-columns:1.7rem 1fr;gap:.15rem .55rem;font-size:var(--fs-sm);line-height:1.5;color:var(--fg-2)}
.struct li::before{content:counter(sp);grid-row:span 2;width:1.55rem;height:1.55rem;border-radius:50%;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-ink);font-weight:900;font-size:.75rem}
.struct .sp{display:block;font-weight:800;color:var(--fg)}
.phrases{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.phrase-group{display:grid;gap:.6rem;align-content:start;padding:1.15rem 1.2rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line)}
.phrase-group>b{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-weight:900;color:var(--ink)}
.phrase-group ul{margin:0;padding:0;list-style:none;display:grid;gap:.3rem}
.phrase{width:100%;text-align:left;padding:.45rem .65rem;border-radius:var(--r-sm);font-family:var(--font-read);font-size:1.08rem;color:var(--fg);transition:background .15s,transform .1s}
.phrase:hover{background:var(--teal-tint)}
.phrase:active{transform:translateY(1px)}
.rubric{display:grid;gap:1rem}
.rcrit{display:grid;gap:.9rem;padding:1.25rem 1.35rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line)}
.crit-head{display:grid;gap:1rem}
@media (min-width:860px){.crit-head{grid-template-columns:minmax(0,1fr) minmax(17rem,22rem);align-items:start}}
.crit-head b{font-size:1.2rem;font-weight:900;color:var(--ink)}
.crit-head p{font-size:var(--fs-sm);color:var(--fg-2);margin-top:.3rem}
.bands{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.band{display:grid;gap:.1rem;padding:.55rem .6rem;border-radius:var(--r-md);text-align:center;background:linear-gradient(180deg,#fff,#F2FBFA);box-shadow:0 0 0 1px var(--line),0 2px 0 var(--gelw-lip);transition:transform .12s}
.band:active{transform:translateY(2px)}
.band b{font-size:1.25rem;font-weight:900;line-height:1}
.band span{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.band.is-on{color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 var(--gel-lip)}
.band.is-on span{color:var(--gel-ink)}
.crit-desc{padding:.95rem 1.05rem;border-radius:var(--r-md);background:var(--bg-soft)}
.official{font-size:var(--fs-sm);line-height:1.6;color:var(--fg)}

/* ---------- Writing ---------- */
.w11-grid{display:grid;gap:1.25rem;margin-bottom:1.25rem}
@media (min-width:1000px){.w11-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}}
.w12-grid{display:grid;gap:1.25rem}
@media (min-width:1000px){.w12-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.wtask .paper{background:var(--bg-soft);box-shadow:none}
.org{display:grid;gap:.75rem}
.org-cols{display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width:720px){.org-cols{grid-template-columns:1fr auto 1fr}}
.org-plan{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.org-box{display:grid;gap:.45rem;padding:.95rem 1.05rem;border-radius:var(--r-lg);background:#fff;border:2px dashed var(--line-strong);transition:border-color .2s,box-shadow .2s}
.org-box.solid{border-style:solid;border-color:var(--teal);background:var(--teal-tint)}
.org-tag{font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.org-q{font-size:var(--fs-sm);color:var(--fg-2)}
.org-box textarea{
  width:100%;min-height:4.2rem;resize:vertical;border:0;padding:0;background:transparent;color:var(--fg);
  font-family:var(--font-ui);font-size:var(--fs-sm);line-height:1.8rem;
  background-image:linear-gradient(transparent calc(1.8rem - 1px),var(--line) calc(1.8rem - 1px));background-size:100% 1.8rem;background-attachment:local;
}
.org-box textarea:focus{outline:none}
.org-box:focus-within{border-style:solid;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.org-vs{display:grid;place-items:center;font-family:var(--font-read);font-style:italic;font-size:1.4rem;color:var(--fg-3);padding:.25rem}
.writer{display:grid;gap:.7rem}
.writer textarea{
  width:100%;min-height:15rem;resize:vertical;padding:1rem 1.25rem;
  border:1.5px solid var(--line-strong);border-radius:var(--r-lg);color:var(--paper-fg);
  font-family:var(--font-read);font-size:1.15rem;line-height:2rem;background-color:#fff;
  background-image:linear-gradient(transparent calc(2rem - 1px),var(--paper-line) calc(2rem - 1px));
  background-size:100% 2rem;background-attachment:local;background-position:0 1rem;
}
.writer textarea:focus{outline:none;box-shadow:0 0 0 4px var(--teal-soft);border-color:var(--teal)}
.meter{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.meter-bar{flex:1;min-width:10rem;height:8px;border-radius:999px;background:var(--bg-sunken);overflow:hidden}
.meter-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#FFD25C,#F0A800);transition:width .3s,background .3s}
.meter.is-done .meter-fill{background:linear-gradient(90deg,var(--gelg-t),var(--gelg-b))}
.meter.is-over .meter-fill{background:linear-gradient(90deg,var(--gelc-t),var(--gelc-b))}
.meter-count{font-weight:900;font-size:1.15rem;font-variant-numeric:tabular-nums}
.meter-count small{font-size:var(--fs-xs);color:var(--fg-3);font-weight:700}
.meter-status{font-size:var(--fs-xs);font-weight:800;color:var(--warn)}
.meter.is-done .meter-status{color:var(--ok)}
.meter.is-over .meter-status{color:var(--bad)}
.check-grid{display:grid;gap:1rem;padding-top:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));align-items:start}
.tick-list{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;font-size:var(--fs-sm)}
.tick-list label{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;line-height:1.45}
.tick-list input{margin-top:.1rem;flex:none}
.tick-list li>span{display:block;padding-left:1.1rem;position:relative}
.tick-list li>span::before{content:"";position:absolute;left:0;top:.55em;width:.45rem;height:.45rem;border-radius:50%;background:var(--teal)}
.model-essay{font-size:1.05rem!important}
.score-pill{font-weight:900;font-size:1.2rem;color:var(--teal-ink);font-variant-numeric:tabular-nums}
.prompt-card{display:grid;gap:.6rem;padding:1.35rem 1.45rem;border-radius:var(--r-xl);background:linear-gradient(160deg,#fff,var(--teal-tint));border:1px solid var(--line);box-shadow:var(--shadow-1)}
.prompt-card .pc-intro{font-family:var(--font-read);font-size:1.22rem;line-height:1.55;color:var(--paper-fg)}
.prompt-card .pc-task{font-weight:800}
.prompt-card ul{margin:0;padding:0;list-style:none;counter-reset:b;display:grid;gap:.45rem}
.prompt-card li{counter-increment:b;display:grid;grid-template-columns:1.7rem 1fr;gap:.5rem;align-items:baseline;font-family:var(--font-read);font-size:1.12rem;color:var(--paper-fg)}
.prompt-card li::before{content:counter(b);width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));font-family:var(--font-ui);font-weight:900;font-size:.75rem}
.prompt-card .pc-words{font-size:var(--fs-sm);color:var(--fg-3);font-weight:700}
.prompt-peek{border-radius:var(--r-lg);background:var(--bg-soft);border:1px solid var(--line)}
.prompt-peek summary{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;font-weight:800;cursor:pointer;color:var(--teal-ink);list-style:none}
.prompt-peek summary::-webkit-details-marker{display:none}
.prompt-peek[open] summary{border-bottom:1px solid var(--line)}
.prompt-peek .prompt-card{border:0;border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:none}
.essay-grid{display:grid;gap:1.25rem}
@media (min-width:1000px){.essay-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}}
.essay{font-family:var(--font-read);font-size:1.18rem;line-height:1.8;color:var(--paper-fg)}
.essay p+p{margin-top:.9em}
.an{--c:var(--teal-ink);--t:var(--teal-soft);cursor:pointer;border-radius:3px;padding:0 .05em;background:linear-gradient(to top,var(--t) 0,var(--t) 42%,transparent 42%);transition:background .2s}
.an sup{font-family:var(--font-ui);font-size:.62rem;font-weight:900;color:var(--c);margin-left:.1rem}
.an:hover,.an.is-on{background:var(--t)}
.an-task{--c:#00716B;--t:#CDF3EF}
.an-struct{--c:#4A2F8A;--t:#E8E0F8}
.an-gram{--c:#8A5A00;--t:#FFEDB8}
.an-vocab{--c:#B0381B;--t:#FFE1D6}
.an-spell{--c:#1D5A8F;--t:#DDEBFA}
.notes{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.note{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;padding:.8rem .95rem;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);font-size:var(--fs-sm);line-height:1.5;transition:all .2s;cursor:pointer}
.note .n{grid-row:span 2;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;font-size:.74rem;font-weight:900;background:var(--t);color:var(--c)}
.note .crit{font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.note p{grid-column:2;color:var(--fg-2)}
.note.is-on{border-color:var(--c);box-shadow:0 0 0 3px var(--t)}
.legend{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:var(--fs-xs);font-weight:800;color:var(--fg-3)}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.legend span::before{content:"";width:.75rem;height:.75rem;border-radius:3px;background:var(--t);box-shadow:inset 0 0 0 1.5px var(--c)}
.rpick{display:grid;gap:1rem}
.rpick-row{display:grid;gap:.5rem;padding-top:.9rem;border-top:1px solid var(--line)}
.rpick-row:first-child{border-top:0;padding-top:0}
.rpick-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem}
.rpick-name .ar-inline{font-size:.9rem;color:var(--fg-3)}
.rpick-q{flex-basis:100%;font-size:var(--fs-sm);color:var(--fg-2)}
.rpick-bands{display:flex;gap:.45rem}
.rpick-band{width:2.5rem;height:2.5rem;border-radius:50%;font-weight:900;font-size:1rem;color:var(--fg-2);background:linear-gradient(180deg,#fff,#EEF9F8);box-shadow:0 0 0 1px var(--line),0 3px 0 var(--gelw-lip);transition:transform .12s,box-shadow .15s}
.rpick-band:active{transform:translateY(2px)}
.rpick-band:hover{box-shadow:0 0 0 1.5px var(--teal),0 3px 0 var(--gelw-lip)}
.rpick-band[aria-checked="true"]{color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 var(--gel-lip)}
.rpick-desc{font-size:var(--fs-xs);color:var(--fg-2);line-height:1.55}
.rpick-desc .ar{display:block;margin-top:.3rem;font-size:.9rem}
.rpick-desc:empty{display:none}

/* ---------- Mock exams ---------- */
.timer-pick{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.mock-list{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
.mock-card{display:grid;gap:.9rem;align-content:start;padding:1.5rem;border-radius:var(--r-xl);background:linear-gradient(160deg,#fff 60%,var(--teal-tint));border:1px solid var(--line);box-shadow:var(--shadow-2)}
.mock-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.mock-card h3{font-size:1.6rem;font-weight:900;color:var(--ink)}
.mock-parts{margin:0;padding:0;list-style:none;display:grid;gap:.1rem;font-size:var(--fs-sm);color:var(--fg-2)}
.mock-parts li{display:grid;grid-template-columns:4.4rem 1fr;gap:.5rem;padding:.4rem 0;border-top:1px solid var(--line)}
.mock-parts span{font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);padding-top:.15rem}
.mock-present{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding-top:.75rem;border-top:1px dashed var(--line-strong)}
.mock-present>span{font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-right:.25rem}
.mock-part{display:grid;gap:1.25rem}
.exam-q{font-size:var(--fs-base)}
.exam-bar{
  position:sticky;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:20;margin-top:1rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:.7rem .8rem .7rem 1.2rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--line),var(--shadow-3);
}
.eb-time{display:flex;align-items:center;gap:.5rem;font-size:1.4rem;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.eb-time .i{color:var(--teal-deep)}
.eb-time.is-low{color:var(--bad)}
.eb-count{font-size:var(--fs-sm);font-weight:700;color:var(--fg-2);flex:1}
.eb-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.eb-confirm{font-size:var(--fs-xs);font-weight:800;color:var(--bad)}
@media (max-width:560px){.exam-bar{border-radius:var(--r-xl)}.eb-count{flex-basis:100%;order:3}}
.mock-results:empty{display:none}
.mock-results{display:grid;gap:1.25rem;scroll-margin-top:7rem}
.result-card{display:grid;gap:1rem;padding:clamp(1.25rem,1rem + 1.5vw,2rem);border-radius:var(--r-xl);background:linear-gradient(160deg,#fff 50%,var(--sun-soft));border:1px solid var(--line);box-shadow:var(--shadow-2)}
.rc-top{display:grid;gap:1.5rem}
@media (min-width:860px){.rc-top{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center}}
.rc-total{line-height:1;margin:.3rem 0 .5rem}
.rc-total b{font-size:clamp(3.4rem,2.4rem + 3vw,5rem);font-weight:900;color:var(--ink);letter-spacing:-.03em}
.rc-total small{font-size:1.4rem;color:var(--fg-3);font-weight:700}
.rc-rows{display:grid;gap:.7rem}
.rc-row{display:grid;grid-template-columns:11rem 1fr 4.5rem;gap:.75rem;align-items:center;font-size:var(--fs-sm);font-weight:700}
.rc-row b{text-align:right;font-variant-numeric:tabular-nums}
.rc-bar{height:10px;border-radius:999px;background:var(--bg-sunken);overflow:hidden}
.rc-bar i{display:block;height:100%;border-radius:inherit;background:#0A9C93;transition:width .6s cubic-bezier(.2,.8,.2,1)}
@media (max-width:560px){.rc-row{grid-template-columns:1fr auto}.rc-bar{grid-column:1 / -1;grid-row:2}}
.mock-assess .essay{font-size:1rem}

/* ---------- Mistakes ---------- */
.mk-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,23rem),1fr))}
.mistake{display:grid;gap:.65rem;align-content:start;padding:1.15rem 1.25rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:0 3px 0 var(--gelw-lip);transition:opacity .25s,transform .25s}
.mistake.is-gone{opacity:0;transform:scale(.96)}
.mk-top{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.mk-title{font-size:var(--fs-xs);color:var(--fg-3);font-weight:700}
.mk-prompt{font-family:var(--font-read);font-size:1.15rem;line-height:1.55;color:var(--fg)}
.mk-ans{display:grid;gap:.4rem}
.mk-ans>div{display:flex;gap:.5rem;align-items:flex-start;padding:.5rem .75rem;border-radius:var(--r-md);font-size:var(--fs-sm)}
.mk-ans .wrong{background:var(--bad-tint)}.mk-ans .wrong .i{color:var(--bad)}
.mk-ans .right{background:var(--ok-tint)}.mk-ans .right .i{color:var(--ok)}
.mk-why{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}
.mk-done{justify-self:start}

/* ---------- Teachers ---------- */
.present-groups{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
.pgroup{display:grid;gap:.6rem;align-content:start;padding:1.15rem 1.25rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.pg-head{display:flex;align-items:center;gap:.65rem}
.pg-head b{flex:1;font-size:1.15rem;font-weight:900;color:var(--ink)}
.pgroup ul{margin:0;padding:0;list-style:none;display:grid}
.pgroup li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.pgroup li span{min-width:0}
.links{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.links li{display:grid;grid-template-columns:auto 10rem minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.55rem .8rem;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);font-size:var(--fs-sm)}
.links .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--teal)}
.links code{font-family:var(--font-mono);font-size:.76rem;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.links li{grid-template-columns:auto 1fr auto}.links code{display:none}}
.packs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.pack{display:grid;gap:.5rem;align-content:start;justify-items:start;padding:1.15rem 1.25rem;border-radius:var(--r-xl);background:linear-gradient(160deg,#fff,var(--teal-tint));border:1px solid var(--line)}
.pack b{font-size:1.1rem;font-weight:900;color:var(--ink)}
.pack p{font-size:var(--fs-sm);color:var(--fg-2)}
.keys{display:grid;gap:.45rem}
.key{border-radius:var(--r-md);background:#fff;border:1px solid var(--line)}
.key summary{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;font-weight:800;font-size:var(--fs-sm);list-style:none}
.key summary::-webkit-details-marker{display:none}
.key .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--teal);flex:none}
.key-ans{margin-left:auto;font-family:var(--font-mono);font-size:.8rem;color:var(--teal-ink);letter-spacing:.08em}
.key ol{margin:0;padding:.2rem 1rem 1rem 2.4rem;display:grid;gap:.35rem;font-size:var(--fs-sm)}

/* ---------- Writing help by level ---------- */
.starters{display:grid;gap:.45rem;margin-bottom:.9rem;padding:.85rem 1rem;border-radius:var(--r-lg);background:var(--sun-soft);border:1px solid #F5DE9E}
.starter-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.starter{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .8rem;border-radius:var(--r-pill);font-family:var(--font-read);font-size:.98rem;color:var(--fg);background:#fff;box-shadow:0 0 0 1px #F0D78E,0 2px 0 #E9C96B;transition:transform .12s}
.starter .i{width:.9rem;height:.9rem;color:var(--sun-ink)}
.starter:hover{box-shadow:0 0 0 1.5px var(--sun),0 2px 0 #E9C96B}
.starter:active{transform:translateY(2px);box-shadow:0 0 0 1px #F0D78E}
.org-frame{display:grid;gap:.45rem;padding:.6rem .75rem;border-radius:var(--r-md);background:var(--sun-soft);font-family:var(--font-read);font-size:.95rem;line-height:1.5;color:var(--fg)}
.org-frame .btn{justify-self:start}
.copy-check{display:flex;gap:.6rem;align-items:flex-start;margin-top:.75rem;padding:.75rem .95rem;border-radius:var(--r-md);background:var(--coral-soft);font-size:var(--fs-sm);line-height:1.55;color:var(--fg)}
.copy-check>.i{color:var(--bad);margin-top:.15rem;flex:none}
.cc-phrase{display:inline-block;margin:.1rem .1rem 0 0;padding:.05rem .45rem;border-radius:6px;background:#fff;font-family:var(--font-read);color:var(--bad)}
.band5{margin-top:1rem;padding:1rem 1.15rem;border-radius:var(--r-lg);background:linear-gradient(160deg,#fff,var(--violet-soft));border:1px solid #D9CDF2}
.b5-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;color:#3B2470}
.b5-head b{flex:1;font-weight:900;color:var(--ink)}
.b5-count{font-size:.85rem;font-weight:900;padding:.15rem .6rem;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #D9CDF2}
.band5.is-all .b5-count{color:#fff;background:var(--ok);box-shadow:none}
.band5 ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.band5 li{display:flex;gap:.55rem;align-items:flex-start;padding:.5rem .65rem;border-radius:var(--r-md);background:rgba(255,255,255,.75);font-size:var(--fs-sm);line-height:1.35}
.band5 li>span:last-child{display:grid;gap:.1rem;min-width:0}
.band5 li small{color:var(--fg-3);font-size:.78rem;overflow-wrap:anywhere}
.b5-ic{width:1.5rem;height:1.5rem;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--fg-3);background:#fff;box-shadow:inset 0 0 0 1px #D9CDF2}
.b5-ic .i{width:.85rem;height:.85rem}
.band5 li.is-met .b5-ic{color:#fff;background:var(--ok);box-shadow:none}
.band5 li.is-met b{color:var(--ok)}