:root{
    --ink:#1C2740; --navy:#24345C; --paper:#F5F6F9; --card:#FFFFFF;
    --red:#C93A3A; --red-soft:#FBEFEF; --hl:#FFE873; --hl-soft:#FFF7CC;
    --line:#DDE1EA; --mut:#69718A; --ok:#2E7D5B; --ok-soft:#E8F4EE;
    --bad:#C93A3A; --bad-soft:#FBEFEF;
    --ff-disp:'Newsreader', Georgia, serif;
    --ff-body:'Public Sans', -apple-system, sans-serif;
    --ff-mono:'IBM Plex Mono', ui-monospace, monospace;
    --field:#FDFDFE; --btn-fg:#fff;
  }
  /* exam colour modes — like BC/IDP computer-based display settings */
  body[data-theme="dark"]{
    --paper:#0F1524; --card:#1A2338; --ink:#E9ECF5; --navy:#5471B8; --line:#2E3A57;
    --mut:#9AA5C0; --red:#E57373; --red-soft:#33222A; --hl-soft:#3A3416;
    --ok:#59BE93; --ok-soft:#1C382C; --bad-soft:#33222A; --field:#141C30; --btn-fg:#fff;
  }
  body[data-theme="contrast"]{
    --paper:#000000; --card:#0D0D0D; --ink:#FFE100; --navy:#FFE100; --line:#4D4D4D;
    --mut:#CBB900; --red:#FFE100; --red-soft:#1A1A00; --hl-soft:#1A1A00;
    --ok:#FFE100; --ok-soft:#1A1A00; --bad-soft:#1A1A00; --field:#111111; --btn-fg:#000000;
  }
  body[data-theme="dark"] .swipe::after, body[data-theme="contrast"] .swipe::after{background:rgba(255,232,115,.25) !important}
  body[data-theme="dark"] .custom-tag, body[data-theme="contrast"] .custom-tag{background:var(--hl-soft); color:var(--ink); border-color:var(--line)}
  /* text size — like the exam's Standard / Large / Extra large */
  body.fs-2 .pane{font-size:17px}
  body.fs-3 .pane{font-size:19.5px}
  .pane input, .pane select{font-size:inherit}

  /* display settings panel */
  .dsp-wrap{position:relative}
  .dsp-btn{font-family:var(--ff-mono); font-size:12.5px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:7px 12px; font-weight:600}
  .dsp-btn:hover{border-color:var(--navy)}
  .dsp-panel{position:absolute; right:0; top:calc(100% + 10px); background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:16px; width:288px; box-shadow:0 14px 34px rgba(0,0,0,.22); z-index:45}
  .dsp-panel h4{font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; color:var(--mut); margin-bottom:8px}
  .mode-row,.size-row{display:flex; gap:8px}
  .mode-sw{flex:1; border-radius:8px; border:2px solid var(--line); padding:10px 0; text-align:center; font-weight:700; cursor:pointer; font-size:15px}
  .mode-sw.on{border-color:var(--red); outline:1px solid var(--red)}
  .mode-sw.m-light{background:#FFFFFF; color:#1C2740}
  .mode-sw.m-dark{background:#0F1524; color:#E9ECF5}
  .mode-sw.m-contrast{background:#000; color:#FFE100}
  .size-sw{flex:1; border:2px solid var(--line); background:var(--field); color:var(--ink); border-radius:8px; cursor:pointer; font-weight:700; padding:8px 0}
  .size-sw.on{border-color:var(--red); outline:1px solid var(--red)}
  .dsp-panel .hint{font-size:12.5px; color:var(--mut); line-height:1.45}

  /* highlighter */
  mark.hlmark{background:var(--hl); color:#1C2740; padding:0 1px; border-radius:2px; cursor:pointer}
  mark.hlmark.hl-y{background:#FFE873}
  mark.hlmark.hl-g{background:#B9F2C5}
  mark.hlmark.hl-b{background:#BFE0FB}
  mark.hlmark.hl-p{background:#FAC9DE}
  .hl-toolbar{position:fixed; z-index:70; background:#1C2740; color:#fff; border-radius:8px; padding:5px 6px; display:none; gap:6px; align-items:center; box-shadow:0 8px 22px rgba(0,0,0,.3)}
  .hl-toolbar button{background:transparent; border:none; color:#fff; font-weight:600; padding:6px 10px; font-size:13px; border-radius:6px}
  .hl-toolbar button:hover{background:rgba(255,255,255,.16)}
  .hl-dot{width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.45); cursor:pointer; padding:0; flex:0 0 auto}
  .hl-dot:hover{border-color:#fff; transform:scale(1.12)}
  .hl-dot.d-y{background:#FFE873}
  .hl-dot.d-g{background:#B9F2C5}
  .hl-dot.d-b{background:#BFE0FB}
  .hl-dot.d-p{background:#FAC9DE}
  .hl-sep{width:1px; align-self:stretch; background:rgba(255,255,255,.25); margin:2px 2px}
  /* little caret so it's obvious which phrase the bar belongs to */
  .hl-toolbar::after{content:""; position:absolute; left:var(--hl-caret,50%); width:0; height:0; margin-left:-6px; border:6px solid transparent}
  .hl-toolbar.hl-above::after{top:100%; border-top-color:#1C2740}
  .hl-toolbar.hl-below::after{bottom:100%; border-bottom-color:#1C2740}

  /* ---------- review & reports ---------- */
  .rev-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:10px 0 6px}
  .rev-part{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:18px; margin-bottom:16px}
  .rev-part h3{font-family:var(--ff-disp); font-size:19px; margin-bottom:4px}
  .rev-part .sub{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-bottom:8px}
  .rev-row{display:flex; gap:12px; padding:11px 0; border-top:1px dashed var(--line); align-items:flex-start; flex-wrap:wrap}
  .rev-row:first-of-type{border-top:none}
  .rev-badge{font-family:var(--ff-mono); font-weight:600; font-size:13px; border-radius:6px; min-width:44px; text-align:center; padding:4px 6px; flex:0 0 auto}
  .rev-badge.ok{background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok)}
  .rev-badge.bad{background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad)}
  .rev-badge.part{background:var(--hl-soft); color:#7A6A12; border:1px solid #EAD87A}
  body[data-theme="dark"] .rev-badge.part, body[data-theme="contrast"] .rev-badge.part{color:var(--ink); border-color:var(--line)}
  .rev-body{flex:1 1 260px}
  .rev-body .rq{margin-bottom:6px}
  .your-ans{font-family:var(--ff-mono); font-size:13.5px; background:var(--field); border:1px solid var(--line); border-radius:6px; padding:3px 9px; display:inline-block}
  .att-card{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:12px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
  .att-card .ascore{font-family:var(--ff-mono); font-weight:600; font-size:22px; color:var(--btn-fg); background:var(--navy); border-radius:10px; padding:10px 14px}
  .att-card .amid{flex:1 1 200px}
  .att-card .amid b{font-family:var(--ff-disp); font-size:17px; font-weight:600}
  .att-card .amid .adate{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-top:2px}

  .fpron{display:flex; gap:10px; justify-content:center; align-items:center; margin-top:2px}
  .ipa{font-size:17px; color:var(--mut)}
  .say{border:1.5px solid var(--line); background:var(--field); color:var(--ink); border-radius:999px; width:36px; height:36px; cursor:pointer; font-size:16px; flex:0 0 auto}
  .say:hover{border-color:var(--navy)}

  /* THE ROOM THE FOOT STACK NEEDS, applied where the page actually scrolls.
     hlFootStack() measures the stack and publishes its height as --hl-foot-pad; this is the
     only rule that spends it. Without it the pills float over the last card on the page:
     measured 3 Sep 2026, a vocabulary word's own 🔊 button sat underneath 🌙 Từ của em.
     A fallback of 0 means a page that never calls hlFootStack() looks exactly as before. */
  #app{padding-bottom:var(--hl-foot-pad, 0px)}

  /* pocket dictionary */
  /* sits directly above the Dictionary button, same shape, quieter until something is due */
  .dtdfab{position:fixed; right:18px; bottom:var(--hl-foot-2,70px); z-index:60; border:1.5px solid var(--navy);
          border-radius:999px; background:var(--card); color:var(--navy); font-weight:700;
          font-size:14.5px; padding:11px 18px; box-shadow:0 8px 20px rgba(0,0,0,.18);
          cursor:pointer; display:none}
  .dtd-hint{margin-top:8px}
  .dtdfab i{font-style:normal; font-family:var(--ff-mono); font-size:12px; opacity:.8;
            margin-left:4px}
  .dtdfab.has-due{background:var(--navy); color:var(--btn-fg); border-color:var(--navy)}
  .dtdfab.has-due i{opacity:.9}
  @media (max-width:520px){ .dtdfab{padding:10px 14px; font-size:13.5px} }
  .dictfab{position:fixed; right:18px; bottom:var(--hl-foot-1,18px); z-index:60; border:none; border-radius:999px; background:var(--navy); color:var(--btn-fg); font-weight:700; font-size:14.5px; padding:13px 20px; box-shadow:0 10px 26px rgba(0,0,0,.28); cursor:pointer; display:none}
  .dictpanel{position:fixed; right:0; top:0; bottom:0; width:min(400px,94vw); background:var(--card); border-left:1.5px solid var(--line); z-index:65; box-shadow:-14px 0 34px rgba(0,0,0,.2); transform:translateX(105%); transition:transform .3s; display:flex; flex-direction:column}
  .dictpanel.open{transform:translateX(0)}
  .dictpanel .dhead{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px}
  .dictpanel .dhead b{font-family:var(--ff-disp); font-size:20px}
  .dictpanel .dsearch{display:flex; gap:8px; padding:0 18px 12px}
  .dictpanel .dsearch input{flex:1; border:1.5px solid var(--line); border-radius:8px; padding:11px 12px; font-size:16px; background:var(--field); color:var(--ink)}
  .dictpanel .dbody{flex:1; overflow-y:auto; padding:6px 18px 24px; font-size:14.5px}
  .dictpanel .dword{font-family:var(--ff-disp); font-size:26px; font-weight:600}
  .dictpanel .dpos{font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; color:var(--red); text-transform:uppercase; margin:12px 0 4px}
  .dictpanel .ddef{margin:5px 0 3px}
  .dictpanel .dex{color:var(--mut); font-style:italic; font-size:13.5px; margin-bottom:5px}
  .dictpanel .dnote{color:var(--mut); font-size:13px; line-height:1.5; padding-top:8px}
  .dtabs{display:flex; gap:6px; padding:0 18px 10px}
  .dtab{border:1.5px solid var(--line); background:var(--field); color:var(--mut); border-radius:999px; padding:6px 14px; font-weight:600; font-size:13px; cursor:pointer}
  .dtab.on{background:var(--navy); border-color:var(--navy); color:var(--btn-fg)}
  .dtracau{font-size:14.5px; line-height:1.55; margin-top:8px}
  .dtracau img{max-width:100%}
  .dtracau table{max-width:100%; border-collapse:collapse}
  .dtracau hr{border:none; border-top:1px dashed var(--line); margin:12px 0}
  .dtracau a{pointer-events:none; text-decoration:none; color:inherit}
  @media (prefers-reduced-motion: reduce){ .dictpanel{transition:none} }

  /* review split layout */
  .rev-split{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
  .rev-passage{position:sticky; top:14px; max-height:calc(100vh - 30px); overflow-y:auto; background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:20px}
  .rev-key{font-family:var(--ff-mono); font-weight:600; font-size:13.5px; background:var(--hl); color:#1C2740; padding:2px 8px; border-radius:4px; display:inline-block; margin-left:8px}
  .rev-exp{font-size:13.5px; color:var(--mut); margin-top:7px; line-height:1.5}
  @media (max-width:900px){ .rev-split{grid-template-columns:1fr} .rev-passage{position:static; max-height:340px} }

  /* vocab lab */
  .vchips{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 22px}
  .vchip{border:1.5px solid var(--line); background:var(--card); color:var(--mut); border-radius:999px; padding:7px 16px; font-weight:600; font-size:13.5px; cursor:pointer; font-family:var(--ff-mono)}
  .vchip.on{background:var(--navy); border-color:var(--navy); color:var(--btn-fg)}
  .actgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; padding-bottom:50px}
  .actcard{background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:10px}
  .actcard h3{font-family:var(--ff-disp); font-size:21px; font-weight:600}
  .actcard .desc{color:var(--mut); font-size:13.5px; flex:1}
  .actcard .stat{font-family:var(--ff-mono); font-size:12px; color:var(--red)}
  .flashwrap{max-width:560px; margin:26px auto 60px}
  .flashcard{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:38px 30px; text-align:center; min-height:280px; display:flex; flex-direction:column; justify-content:center; gap:10px}
  .flashcard .fw{font-family:var(--ff-disp); font-weight:600; font-size:40px}
  .flashcard .fpos{font-family:var(--ff-mono); font-size:12px; color:var(--mut); letter-spacing:.08em}
  .flashcard .fdef{font-size:16.5px; margin-top:6px}
  .flashcard .fex{font-size:14px; color:var(--mut); font-style:italic; margin-top:6px}
  .flashcard .fsrc{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut); margin-top:8px}
  .lvl-pill{font-family:var(--ff-mono); font-size:11.5px; background:var(--hl-soft); border:1px solid #EAD87A; color:#7A6A12; border-radius:4px; padding:2px 8px; align-self:center}
  body[data-theme="dark"] .lvl-pill, body[data-theme="contrast"] .lvl-pill{color:var(--ink); border-color:var(--line)}
  .fc-rates{display:flex; gap:8px; justify-content:center; margin-top:16px}
  .fc-rates .btn.again{background:var(--red); color:var(--btn-fg); border:none}
  .fc-progress{font-family:var(--ff-mono); font-size:12.5px; color:var(--mut); text-align:center; margin-bottom:10px}
  .wfbox{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:30px; max-width:560px; margin:26px auto 60px}
  .wfbox .given{font-family:var(--ff-disp); font-weight:600; font-size:32px; text-align:center}
  .wfbox .ask{text-align:center; color:var(--mut); margin:8px 0 16px}
  .wfbox .ask b{color:var(--red); text-transform:uppercase; font-family:var(--ff-mono); font-size:14px}
  .feedback{border-radius:10px; padding:12px 14px; margin-top:14px; font-size:14.5px}
  .feedback.good{background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok)}
  .feedback.bad2{background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad)}
  .qzopt{display:block; width:100%; text-align:left; border:1.5px solid var(--line); background:var(--field); color:var(--ink); border-radius:10px; padding:12px 14px; margin-top:8px; font-size:14.5px; cursor:pointer}
  .qzopt:hover{border-color:var(--navy)}
  .qzopt.right{border-color:var(--ok); background:var(--ok-soft); color:var(--ok); font-weight:600}
  .qzopt.wrongpick{border-color:var(--bad); background:var(--bad-soft); color:var(--bad)}
  .vocab-promo{background:var(--hl-soft); border:1.5px solid #EAD87A; border-radius:14px; padding:20px 22px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:22px}
  body[data-theme="dark"] .vocab-promo, body[data-theme="contrast"] .vocab-promo{border-color:var(--line)}
  .vocab-promo .vp-ic{font-size:30px}
  .vocab-promo .vp-mid{flex:1 1 220px}
  .vocab-promo b{font-family:var(--ff-disp); font-size:18px}
  .vocab-promo p{color:var(--mut); font-size:13.5px; margin-top:2px}

  /* scaffolded vocab lab */
  .statrow{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0}
  .statbox{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:14px 20px; min-width:120px}
  .statbox .sv{font-family:var(--ff-mono); font-weight:600; font-size:26px}
  .statbox .sl{font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; color:var(--mut); text-transform:uppercase; margin-top:2px}
  .statbox.hot .sv{color:var(--red)}
  .sess-card{background:linear-gradient(120deg, var(--navy), #16223F); color:#fff; border-radius:16px; padding:26px 28px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin:8px 0 26px}
  body[data-theme="contrast"] .sess-card{background:#0D0D0D; border:1.5px solid var(--line); color:var(--ink)}
  .sess-card .sc-mid{flex:1 1 280px}
  .sess-card h3{font-family:var(--ff-disp); font-size:24px; font-weight:600}
  .sess-card p{opacity:.85; font-size:14px; margin-top:4px}
  .sess-card .btn.primary{background:var(--hl); color:#1C2740; font-size:16px; padding:13px 24px}
  .sess-card .done-mark{font-family:var(--ff-mono); font-weight:600; font-size:15px; color:var(--hl)}
  .pb-wrap{margin-bottom:26px}
  .pb-legend{display:flex; gap:16px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-bottom:10px}
  .pb-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px}
  .pb-grid{display:flex; flex-wrap:wrap; gap:6px}
  .pb-chip{font-family:var(--ff-mono); font-size:11.5px; border-radius:6px; padding:4px 9px; border:1.5px solid var(--line); color:var(--mut); background:var(--card)}
  .pb-chip.st-learning{background:var(--hl-soft); border-color:#EAD87A; color:#7A6A12}
  .pb-chip.st-reviewing{background:#E3EEFB; border-color:#9CC3EE; color:#2B5B93}
  .pb-chip.st-mastered{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
  body[data-theme="dark"] .pb-chip.st-learning, body[data-theme="contrast"] .pb-chip.st-learning{color:var(--ink)}
  body[data-theme="dark"] .pb-chip.st-reviewing{background:#1E2C44; border-color:#3D5E8C; color:#8FB6E8}
  body[data-theme="contrast"] .pb-chip.st-reviewing{background:#1A1A00; border-color:var(--line); color:var(--ink)}
  .lockbox{border:1.5px dashed var(--line); border-radius:14px; padding:22px 24px; color:var(--mut); font-size:14.5px; display:flex; gap:12px; align-items:center}
  .lockbox .lk{font-size:24px}
  .hlword{background:var(--hl-soft); border-bottom:2px solid var(--hl); font-weight:700; padding:0 3px; border-radius:3px}
  .ctx-sent{font-size:17.5px; line-height:1.65; text-align:center; margin:10px 0 4px; font-style:italic}
  .ctx-sent b{font-style:normal}
  .locate-btn{border:1.5px solid var(--line); background:var(--field); color:var(--navy); border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:600; cursor:pointer; margin-left:8px}
  .locate-btn:hover{border-color:var(--navy)}
  mark.ev-flash{background:var(--hl); padding:1px 2px; border-radius:3px; animation:evpulse 1.2s ease 2}
  .para-flash{outline:3px solid var(--hl); outline-offset:4px; border-radius:6px; animation:evpulse 1.2s ease 2}
  @keyframes evpulse{0%{box-shadow:0 0 0 0 rgba(232,185,49,.55)} 70%{box-shadow:0 0 0 12px rgba(232,185,49,0)} 100%{box-shadow:none}}
  @media (prefers-reduced-motion: reduce){ mark.ev-flash,.para-flash{animation:none} }
  .ans-chip{background:var(--ok-soft); color:var(--ok); border:1.5px solid var(--ok); padding:2px 10px; border-radius:7px; font-weight:700; display:inline-block}
  mark.ev{background:var(--hl-soft); color:inherit; padding:0 2px; border-radius:3px}
  .sess-tag{font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; border-radius:4px; padding:3px 9px; display:table; margin:0 auto 10px}
  .sess-tag.t-rev{background:#E3EEFB; color:#2B5B93}
  .sess-tag.t-new{background:var(--hl-soft); color:#7A6A12}
  body[data-theme="dark"] .sess-tag.t-rev{background:#1E2C44; color:#8FB6E8}
  body[data-theme="dark"] .sess-tag.t-new, body[data-theme="contrast"] .sess-tag.t-new, body[data-theme="contrast"] .sess-tag.t-rev{background:#1A1A00; color:var(--ink)}

  /* bigger, more visible vocab text */
  .flashcard .fw{font-size:46px}
  .flashcard .fdef{font-size:19px; line-height:1.5}
  .flashcard .fex{font-size:15.5px}
  .flashcard .fpos{font-size:13px}
  .wfbox .given{font-size:38px}
  .wfbox .ask{font-size:16.5px}
  .qzopt{font-size:16px; padding:14px 16px}
  .feedback{font-size:16px}
  .wfbox .gapinput{font-size:17px; padding:11px 14px}
  .lvl-pill{font-size:12.5px}
  .fc-progress{font-size:13.5px}
  .pb-chip{font-size:12.5px}

  /* flip-able flashcards */
  .flip-card{perspective:1400px; cursor:pointer; position:relative; min-height:380px}
  .flip-inner{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.4,.1,.2,1)}
  .flip-card.flipped .flip-inner{transform:rotateY(180deg)}
  .flip-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow-y:auto}
  .flip-back{transform:rotateY(180deg)}
  .flip-hint{font-family:var(--ff-mono); font-size:12.5px; color:var(--mut); margin-top:14px}
  @media (prefers-reduced-motion: reduce){ .flip-inner{transition:none} }

  /* session progress bar */
  .sessbar{height:12px; border-radius:999px; background:var(--card); border:1.5px solid var(--line); overflow:hidden; margin:6px 0 4px}
  .sessbar i{display:block; height:100%; background:linear-gradient(90deg, var(--navy), var(--ok)); transition:width .3s; border-radius:999px}
  .sess-cheer{text-align:center; font-size:14px; color:var(--red); font-weight:600; min-height:20px; margin-bottom:8px}
  .fb-cheer{font-weight:700; font-size:16.5px}

  /* mastery bar (hub) */
  .mastbar{display:flex; height:14px; border-radius:999px; overflow:hidden; border:1.5px solid var(--line); background:var(--card); margin:4px 0 6px}
  .mastbar .seg-l{background:#EAD87A}
  .mastbar .seg-r{background:#9CC3EE}
  .mastbar .seg-m{background:var(--ok)}
  .mastbar-label{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-bottom:16px}
  .cal-strip{display:flex; gap:5px; flex-wrap:wrap; margin-top:4px}
  .cal-cell{font-family:var(--ff-mono); font-size:12.5px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1.5px solid var(--line); color:var(--mut); background:var(--card)}
  .cal-cell.done{background:var(--ok-soft); border-color:var(--ok); color:var(--ok); font-weight:700}
  .cal-cell.today{outline:2px solid var(--red); outline-offset:1px}

  /* difficulty picker */
  .diffrow{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px}
  .diffchip{border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:10px 16px; cursor:pointer; text-align:left; min-width:150px}
  .diffchip b{display:block; font-size:14.5px}
  .diffchip span{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut)}
  .diffchip.on{border-color:var(--red); background:var(--red-soft)}
  .diffchip.on b{color:var(--red)}
  .diff-note{font-size:12.5px; color:var(--mut); margin:4px 0 18px}





  *{box-sizing:border-box; margin:0; padding:0}
  html,body{height:100%}
  body{font-family:var(--ff-body); background:var(--paper); color:var(--ink); font-size:15px; line-height:1.55}

/* ===== v10.27 · scenery behind the app (student choice) ===== */
/* 6 Nov 2026 · Flow scenery */ .scn-ph,.scn-mv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none}.scn-mv{opacity:0;transition:opacity 1.4s ease}.scn-mv.on{opacity:1}body.calm .scn-mv{display:none}@media (prefers-reduced-motion:reduce){.scn-mv{display:none}}
#hl-scene{position:fixed; inset:0; z-index:-1; pointer-events:none; transition:opacity .5s}
#hl-scene svg{width:100%; height:100%; display:block}
#hl-scene::after{content:""; position:absolute; inset:0; background:rgba(246,247,251,.52)}
body[data-theme="dark"] #hl-scene::after{background:rgba(10,14,26,.58)}
body.has-scene{background:transparent}
html:has(body.has-scene):not(:has(.testbar)):not(:has(.gm-cbtnav)){background:#1d2550}
body.has-scene:has(.testbar) #hl-scene, body.has-scene:has(.gm-cbtnav) #hl-scene{display:none}
body.has-scene:has(.testbar), body.has-scene:has(.gm-cbtnav){background:var(--paper)}
#hl-theme-sheet .pv.rot{display:grid; place-items:center; background:conic-gradient(from 200deg,#f6b37a,#9fd3c7,#c9b6f2,#f4a7b9,#f6b37a); color:#fff; font-size:22px; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.25)}
#hl-scene .drift{animation:hls-drift var(--d,80s) linear infinite alternate}
@keyframes hls-drift{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
#hl-scene .pulse{transform-origin:1060px 660px; animation:hls-pulse 7s ease-in-out infinite}
@keyframes hls-pulse{50%{transform:scale(1.06); opacity:.85}}
#hl-scene .glint{animation:hls-glint 3.2s ease-in-out infinite; animation-delay:var(--t)}
@keyframes hls-glint{50%{opacity:.15}}
#hl-scene .glide{animation:hls-glide 26s ease-in-out infinite alternate}
@keyframes hls-glide{to{transform:translate(120px,-30px)}}
#hl-scene .wave{animation:hls-wave 6s ease-in-out infinite; animation-delay:var(--t)}
@keyframes hls-wave{50%{transform:translateX(-60px); stroke-opacity:.15}}
#hl-scene .wash{animation:hls-wash 7s ease-in-out infinite}
@keyframes hls-wash{50%{transform:translateY(-10px)}}
#hl-scene .sway{animation:hls-sway 6s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:bottom center}
@keyframes hls-sway{to{transform:rotate(-2deg)}}
#hl-scene .mist{animation:hls-mist 18s ease-in-out infinite alternate}
@keyframes hls-mist{to{transform:translateX(80px); opacity:.2}}
#hl-scene .ripple{transform-box:fill-box; transform-origin:center; animation:hls-ripple 6s ease-out infinite; animation-delay:var(--t); opacity:0}
@keyframes hls-ripple{0%{transform:scale(.4); opacity:.8}100%{transform:scale(2.2); opacity:0}}
#hl-scene .bob{animation:hls-bob 5s ease-in-out infinite alternate}
@keyframes hls-bob{to{translate:0 -6px}}
#hl-scene .fly{animation:hls-fly 30s linear infinite}
@keyframes hls-fly{0%{transform:translate(-80px,560px)}50%{transform:translate(800px,500px)}100%{transform:translate(1700px,580px)}}
#hl-scene .fall{animation:hls-fall var(--d,16s) linear infinite; animation-delay:calc(var(--t) * -1)}
@keyframes hls-fall{from{transform:translate(var(--x),-40px) rotate(0)}to{transform:translate(calc(var(--x) - 260px),1040px) rotate(540deg)}}
#hl-scene .tw{animation:hls-tw 3.6s ease-in-out infinite; animation-delay:var(--t)}
@keyframes hls-tw{50%{opacity:.2}}
#hl-scene .rise{animation:hls-rise 22s linear infinite; animation-delay:calc(var(--t) * -1)}
@keyframes hls-rise{from{transform:translate(var(--x),1000px)}to{transform:translate(calc(var(--x) + 90px),-60px)}}
@media (prefers-reduced-motion:reduce){#hl-scene *{animation:none!important}}
/* the theme sheet */
#hl-theme-sheet{position:fixed; z-index:200; width:min(340px,calc(100vw - 20px)); background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:0 24px 60px -20px rgba(10,14,40,.5); animation:hls-in .18s ease-out}
@keyframes hls-in{from{opacity:0; transform:translateY(-6px)}}
#hl-theme-sheet h4{margin:0 0 8px; font:600 10.5px var(--ff-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
#hl-theme-sheet .ts-row{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:14px}
#hl-theme-sheet .ts-row button{border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:10px; padding:8px 4px; font:600 12.5px var(--ff-body); cursor:pointer}
#hl-theme-sheet button.on{outline:2.5px solid var(--navy); outline-offset:1px}
#hl-theme-sheet .ts-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
#hl-theme-sheet .ts-grid button{border:1px solid var(--line); background:var(--paper); padding:0; border-radius:12px; overflow:hidden; cursor:pointer; text-align:left; color:var(--ink)}
#hl-theme-sheet .ts-grid .pv{height:54px; display:block; position:relative}
#hl-theme-sheet .ts-grid .pv svg{width:100%; height:100%; display:block}
#hl-theme-sheet .ts-grid .pv.none{background:repeating-linear-gradient(135deg,var(--paper) 0 8px,var(--line) 8px 9px)}
#hl-theme-sheet .ts-grid b{display:block; font:600 11px var(--ff-body); padding:5px 7px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#hl-theme-sheet .ts-note{margin:10px 0 0; font-size:11.5px; color:var(--mut)}
  button{font-family:inherit; cursor:pointer}
  input,select,textarea{font-family:inherit; font-size:14px; color:var(--ink)}
  a{color:var(--navy)}
  ::selection{background:var(--hl)}

  .wrap{max-width:1180px; margin:0 auto; padding:0 20px}

  .mark-ic svg{width:34px; height:34px; display:block}
  /* ================= BRAND SYSTEM =================
     Everything below is derived from the wordmark so the interface and the logo read
     as one thing. See LOGO_STACK for the mark itself. */
  :root{
    --gold:#E8B931;          /* the rule under "Linguo"the single brand accent */
    --gold-soft:#FBF0D2;
    --brand:#24345C;         /* = --navy, named by role so intent is readable */
  }
  body[data-theme="dark"]{ --gold:#FFC94A; --gold-soft:#3A3416; --brand:#C3D2F5; }
  body[data-theme="contrast"]{ --gold:#FFE100; --gold-soft:#1A1A00; --brand:#FFE100; }

  /* the wordmark's move — a light word against a bold one — as a heading device */
  .hl-h{font-family:var(--ff-disp); line-height:1.04; letter-spacing:-.012em; color:var(--brand)}
  .hl-h .lt{font-weight:200}
  .hl-h .bd{font-weight:700}

  /* the gold rule under "Linguo", reusable as a divider and an active marker */
  .hl-rule{height:2.6px; width:2.1em; background:var(--gold); border-radius:2px; margin-top:11px}
  .hl-rule.wide{width:100%; max-width:none; height:1.5px; opacity:.75}

  /* ---- T4 wordmark ---- */
  .brand-wm{display:block; line-height:0; color:var(--navy)}
  .brand-wm svg{height:26px; width:auto; display:block}
  body[data-theme="dark"] .brand-wm, body[data-theme="contrast"] .brand-wm{color:var(--ink)}
  .track-chip-solo{display:inline-flex; align-items:center}
  .track-chip-solo .track-chip{margin-left:2px}
  .hl-flat .hl-gold{fill:currentColor}
  @media(max-width:560px){ .brand-wm svg{height:21px} }
  /* the wordmark inherits currentColor, so it needs no per-theme swap */
  .brand{align-items:center}

  /* identity gate */
  .gate{position:fixed; inset:0; z-index:90; background:var(--paper); display:flex; align-items:center; justify-content:center; padding:20px; overflow:auto}
  .gate-card{max-width:480px; width:100%; background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:38px 34px; text-align:center}
  .gate-card .glogo{color:var(--brand)} .gate-card .glogo svg{width:auto; height:78px; margin:0 0 26px; display:block}
  .gate-card{text-align:left}
  .gate-card h1{font-family:var(--ff-disp); font-size:31px; line-height:1.06; letter-spacing:-.012em; color:var(--brand); font-weight:200}
  .gate-card h1 em{font-style:normal; font-weight:700; display:block}
  .gate-card .gate-rule{height:2.6px; width:56px; background:var(--gold); border-radius:2px; margin:14px 0 18px}
  .gate-card p{color:var(--mut); font-size:14.5px; margin:0 0 18px; text-align:left; line-height:1.6}
  .gate-card label{display:block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:7px}
  .gate-card input{width:100%; border:1.5px solid var(--line); border-radius:10px; padding:14px 15px; font-size:17px; background:var(--field); color:var(--ink); text-align:left; margin-bottom:8px; min-height:48px}
  .gate-card input:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
  .gate-card .gate-hint{font-size:12.5px; color:var(--mut); margin:0 0 16px}
  .gate-card .gate-note{text-align:center}
  .gate-card .btn.primary{width:100%; font-size:16px; padding:13px}
  .gate-note{margin-top:16px; font-size:13px; color:var(--mut)}
  .gate-note a{color:var(--navy); cursor:pointer; text-decoration:underline}
  .splash{position:fixed; inset:0; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; background:var(--paper)}
  .splash{color:var(--navy)} .splash svg{width:auto; height:74px}
  .splash span{font-family:var(--ff-mono); font-size:13px; color:var(--mut)}

  /* Touch: bigger tap targets, but the bar still floats next to the words the
     student pressed, never parked at the bottom of the screen. */
  @media (max-width: 700px), (pointer: coarse){
    .hl-toolbar{padding:8px 10px; gap:9px; box-shadow:0 10px 28px rgba(0,0,0,.34)}
    .hl-toolbar button{min-height:38px}
    .hl-toolbar button[data-hl]{min-width:44px; padding:8px 12px; font-size:14px}
    .hl-toolbar .hl-dot{width:34px; height:34px; min-width:34px; min-height:34px}
  }
  /* mobile optimization */
  @media (max-width: 700px){
    input, select, textarea{font-size:16px}
    .btn{min-height:42px}
    .dchip{min-height:42px; padding:9px 13px; font-size:13.5px}
    .dropslot{min-height:42px}
    .dropslot.inline{min-height:32px}
    .slotx{min-width:30px; min-height:30px; font-size:14px}
    .mcq-opt{padding:12px 13px}
    .radios label{min-height:40px}
    .lettersel{min-height:42px; font-size:16px}
    .qzopt{min-height:44px}
    .say{width:42px; height:42px}
    .testbar{gap:6px}
    .dragbank{max-height:32vh}
    .gate-card{padding:28px 20px}
  }
  /* ---------- top bar ---------- */
  .navbar-outer{border-top:1px solid var(--line); border-bottom:1.5px solid var(--line); background:var(--card); margin-bottom:4px}
  .navbar{display:flex; align-items:center; gap:12px; padding:6px 0}
  .navbtns{display:flex; gap:5px; flex:0 0 auto}
  .navarrow{display:flex; align-items:center; gap:5px; border:1.5px solid var(--line); background:var(--field); color:var(--ink); height:40px; padding:0 12px; border-radius:10px; cursor:pointer; font-size:15px; font-weight:600}
  .navarrow i{font-style:normal; font-size:13px}
  .navarrow:disabled{opacity:.35; cursor:default}
  .navarrow:not(:disabled):hover{border-color:var(--navy)}
  .navtabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0; scroll-behavior:smooth}
  .navtabs::-webkit-scrollbar{display:none}
  /* edge fades = "there are more tabs this way" */
  .navtabs.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)}
  .navtabs.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 100%); mask-image:linear-gradient(90deg,transparent,#000 34px,#000 100%)}
  .navtabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
  .navtab{display:flex; align-items:center; gap:7px; border:none; background:transparent; color:var(--mut); font-weight:600; font-size:15px; padding:9px 14px; border-radius:10px; cursor:pointer; white-space:nowrap; position:relative}
  .navtab .nt-ic svg{width:18px; height:18px; display:block}
  .navtab:not(:disabled):hover{color:var(--ink); background:var(--field)}
  .navtab.on{color:var(--navy); background:var(--hl-soft)}
  .navtab.on::after{content:""; position:absolute; left:14px; right:14px; bottom:2px; height:3px; border-radius:2px; background:var(--red)}
  body[data-theme="dark"] .navtab.on, body[data-theme="contrast"] .navtab.on{color:var(--ink)}
  .navtab:disabled{opacity:.4; cursor:default}
  @media (max-width: 700px){
    .navarrow i{display:none}
    .navarrow{padding:0 11px}
    .navtab{padding:8px 9px; font-size:13.5px; gap:5px}
    .navtab .nt-ic svg{width:16px; height:16px}
  }
  /* v9.63 · At 360 px this strip was 800 px of tabs in a 239 px slot: six of the nine
     destinations were entirely off-screen, with nothing to say they existed. On the nine
     courses with no phone bar the strip IS the navigation, so the words go and the icons
     stay. Three things are kept on purpose: the ACTIVE tab keeps its word, so a student
     always reads where they are; the Error Log count stays, because it is the one number
     on this bar that changes; and every tab keeps a title, so the icon is never mute.
     The Back arrow stays too. It is the only way out of a locked activity. */
  /* ⚠ AMENDED 3 September 2026. The rule above says every tab keeps a `title` "so the icon
     is never mute". A `title` is a HOVER tooltip and there is no hover on a phone, which is
     the only device this block applies to, so the mitigation did not exist where it was
     needed. Measured on Global Success at 390 px: a student saw `Units · ◎ · 📊`, and a
     bullseye is not a common icon for "the questions you got wrong".
     The words come back, as a caption under the icon at 9.5 px. The strip goes from one
     line to two rows of glyph+word inside the same 44 px tap target, so nothing shrinks and
     nothing is guessed. The active tab keeps its larger label, exactly as before. */
  @media (max-width: 560px){
    .navtab{padding:5px 7px 4px; gap:0; flex-direction:column; line-height:1.05}
    .navtab .nt-lb{font-size:9.5px; letter-spacing:.01em; opacity:.78; font-weight:600;
                   max-width:62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .navtab .nt-ic{transform:scale(.94)}
    .navtab .nt-lb .err-badge{font-size:10px; margin-left:2px}
    .navtab.on{padding:5px 8px 4px}
    .navtab.on .nt-lb{font-size:10.5px; opacity:1}
    .navtab.on::after{left:6px; right:6px}
  }
  /* At 360 px even that leaves My Results 35 px past the edge, so the narrowest phones
     drop the active word too. Nothing is lost: the tab still carries its highlight and
     its red underline, and the breadcrumb directly beneath the bar names the page in
     full"IELTS > Reading > History & Discovery". Nine of nine now fit. */
  /* At 360 px the words used to be dropped from the active tab as well, to make nine tabs
     fit on one line. They fit stacked, so what gives instead is the gap and the padding. */
  @media (max-width: 380px){
    .navbar{gap:6px}
    .navtab{padding:5px 5px 4px}
    .navtab .nt-lb{font-size:9px; max-width:54px}
    .navtab.on{padding:5px 6px 4px}
    .navtab.on .nt-lb{font-size:9.5px}
    .navtab.on::after{left:5px; right:5px}
  }

  @media (max-width: 860px){
    .topbar{flex-wrap:wrap}
    }

  .topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:12px}
  /* v9.63 · the chip group. It was an inline style with no wrap and no min-width, so a
     long course name pushed the row past the viewport and the chips wrapped their own
     labels to two lines instead. Let the GROUP wrap and cap the course name. */
  .tb-chips{display:flex; gap:8px; align-items:center; flex-wrap:nowrap;
    justify-content:flex-end; min-width:0; flex:1 1 auto}
  .tb-chips .role-pill{white-space:nowrap; flex:0 0 auto}
  @media (max-width:700px){
    .tb-chips{gap:6px}
    .tb-chips .role-pill{padding:7px 10px}
    /* The course name is the only chip that can be any length, so it is the only one
       allowed to shrink: capped and ellipsised rather than wrapping its own label to a
       second line and taking the whole topbar to three rows with it. */
    .course-switch{min-width:0; flex:1 1 auto}
    .course-switch > .role-pill{max-width:100%; overflow:hidden; text-overflow:ellipsis;
      display:block; line-height:1.9}
    /* Forward is a history step nobody takes on a phone, and it was eating 42 px of a
       360 px row that the tab strip needed. */
    .navbtns .navarrow[data-act="nav-fwd"]{display:none}
  }
  .rp-lb{font-style:normal}
  /* Under 430 px the row cannot hold four worded chips AND the course name. The two
     that lose their word are the two a STUDENT never reads: the theme toggle and
     Teacher access. Both keep their glyph and their title attribute. */
  @media (max-width:430px){ .tb-chips [data-act="theme-quick"] .rp-lb,
    .tb-chips [data-act="teacher-toggle"] .rp-lb{display:none} }
  /* The resume bar is one transient offer, shown on hubs and lists only (see
     RESUME_BAR_VIEWS, never inside an activity). While it is up on a phone the two
     pills step aside rather than stacking 277 px of chrome over the page. */
  .dictfab.foot-crowded, .dtdfab.foot-crowded{display:none !important}
  .brand{display:flex; align-items:center; gap:10px; cursor:pointer; min-width:0}
  .brand .mark{font-family:var(--ff-mono); font-size:12px; font-weight:600; letter-spacing:.12em; color:var(--btn-fg); background:var(--navy); padding:4px 8px; border-radius:4px}
  .brand .name{font-family:var(--ff-disp); font-weight:600; font-size:19px}
  .role-pill{font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; border:1.5px solid var(--line); background:var(--card); color:var(--mut); border-radius:999px; padding:7px 14px; display:inline-flex; align-items:center; gap:7px}
  .role-pill:hover{border-color:var(--navy); color:var(--navy)}
  .role-pill.on{border-color:var(--red); color:var(--red); background:var(--red-soft)}

  /* ---------- full test ---------- */
  .fulltest-card{background:linear-gradient(120deg, var(--navy), #16223F); color:#fff; border-radius:14px; padding:22px 24px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-bottom:20px}
  body[data-theme="contrast"] .fulltest-card{background:#0D0D0D; border:1.5px solid var(--line); color:var(--ink)}
  .fulltest-card .ftclock{font-family:var(--ff-mono); font-weight:600; font-size:22px; background:rgba(255,232,115,.14); border:1.5px solid var(--hl); color:var(--hl); border-radius:12px; padding:14px 16px; white-space:nowrap}
  .fulltest-card .ftmid{flex:1 1 260px}
  .fulltest-card h3{font-family:var(--ff-disp); font-size:22px; font-weight:600}
  .fulltest-card p{opacity:.85; font-size:14px; margin-top:3px}
  .fulltest-card .btn.primary{background:var(--hl); color:#1C2740}
  .btn[disabled]{opacity:.4; cursor:default}
  .partnav{position:fixed; left:0; right:0; bottom:0; z-index:35; background:var(--card); border-top:1.5px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px}
  .parttabs{display:flex; gap:6px; overflow-x:auto}
  .ptab{border:1.5px solid var(--line); background:var(--field); color:var(--ink); border-radius:8px; padding:5px 12px; font-weight:600; font-size:13px; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:78px; cursor:pointer}
  .ptab span{font-family:var(--ff-mono); font-size:11px; color:var(--mut); font-weight:400}
  .ptab.on{border-color:var(--red); background:var(--red-soft); color:var(--red)}
  .ptab.on span{color:var(--red)}
  .split.with-partnav{height:calc(100vh - 62px - 60px)}
  .split.with-partnav .pane{padding-bottom:110px}
  .band{font-family:var(--ff-mono); font-weight:600; font-size:20px; background:var(--hl); color:#1C2740; border-radius:8px; padding:6px 14px; display:inline-block; transform:rotate(-.6deg); margin-top:6px}
  .partline{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px dashed var(--line); font-size:14px}
  .partline b{font-family:var(--ff-mono)}
  @media (max-width:860px){
    .split.with-partnav{height:auto; margin-bottom:74px}
    .partnav{flex-wrap:wrap; justify-content:center}
  }

  /* ---------- welcome hero (redesigned · every course home) ---------- */
  .hlw{position:relative; overflow:hidden; isolation:isolate; border-radius:22px; margin-top:6px;
    display:flex; justify-content:center; align-items:center;
    padding:clamp(30px,4.2vw,56px) clamp(18px,4vw,44px) clamp(36px,4.6vw,62px);
    background:linear-gradient(180deg,#0A1024 0%, #16213F 30%, #2A3A66 52%, #5B4468 72%, #B24E3F 88%, #E6884A 100%);
    box-shadow:0 20px 50px -28px rgba(10,16,36,.7)}
  /* ⚠ THE HERO IS A FIRST-VISIT MOMENT, NOT A DAILY TOLL. — 3 September 2026
     Measured at 390 x 844: the first unit card's top sat at y=873, so a student who opens
     the app to do their homework scrolls a whole screen past a second "Welcome to Horizon
     Linguo" wordmark, the same wordmark that is 100 px above it in the topbar, plus a
     "Get started" button whose only job is to scroll to the list that would have been
     visible without it. Once is a welcome. Every day is a toll.
     After the first course home, the hero keeps its sunrise and its one line of orientation
     and loses the parts that repeat what is already on screen. `hlHeroSeen()` owns the flag;
     clearing site data brings the full hero back, which is right. That is a new device. */
  .hlw.is-compact{padding:16px clamp(16px,4vw,30px) 18px; border-radius:18px; margin-top:6px}
  .hlw.is-compact .hlw-welcome,
  .hlw.is-compact .hlw-logo,
  .hlw.is-compact .hlw-cta{display:none}
  .hlw.is-compact .hlw-tag{margin-top:6px; font-size:14.5px; line-height:1.5}
  .hlw.is-compact .hlw-tag .wl-vn{margin-top:3px; font-size:13px}
  .hlw.is-compact .hlw-sun{bottom:-140px; opacity:.75}
  .hlw.is-compact .hlw-stars{height:100%}
  .hlw-sky{position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:22px}
  .hlw-stars{position:absolute; left:0; right:0; top:0; height:66%; z-index:0; opacity:.75;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent),
      radial-gradient(1.2px 1.2px at 28% 12%, #eaf1ff, transparent),
      radial-gradient(1.6px 1.6px at 44% 26%, #fff, transparent),
      radial-gradient(1.1px 1.1px at 58% 10%, #fff, transparent),
      radial-gradient(1.4px 1.4px at 72% 22%, #eaf1ff, transparent),
      radial-gradient(1.2px 1.2px at 86% 14%, #fff, transparent),
      radial-gradient(1px 1px at 20% 34%, #fff, transparent),
      radial-gradient(1px 1px at 64% 32%, #fff, transparent),
      radial-gradient(1.3px 1.3px at 92% 30%, #fff, transparent),
      radial-gradient(1px 1px at 37% 6%, #fff, transparent);
    animation:hlwTwinkle 4.5s ease-in-out infinite alternate}
  @keyframes hlwTwinkle{from{opacity:.4} to{opacity:.85}}
  .hlw-rays{position:absolute; left:50%; bottom:-360px; width:780px; height:780px; transform:translateX(-50%);
    z-index:1; opacity:.5; border-radius:50%; will-change:transform;
    background:conic-gradient(from 0deg,
      rgba(255,238,160,.20), transparent 13deg, rgba(255,238,160,.13) 30deg, transparent 45deg,
      rgba(255,238,160,.20) 60deg, transparent 74deg, rgba(255,238,160,.13) 90deg, transparent 105deg,
      rgba(255,238,160,.20) 120deg, transparent 134deg, rgba(255,238,160,.13) 150deg, transparent 165deg,
      rgba(255,238,160,.20) 180deg, transparent 194deg, rgba(255,238,160,.13) 210deg, transparent 225deg,
      rgba(255,238,160,.20) 240deg, transparent 254deg, rgba(255,238,160,.13) 270deg, transparent 285deg,
      rgba(255,238,160,.20) 300deg, transparent 314deg, rgba(255,238,160,.13) 330deg, transparent 345deg,
      rgba(255,238,160,.20) 360deg);
    -webkit-mask-image:radial-gradient(circle, #000 26%, transparent 58%);
            mask-image:radial-gradient(circle, #000 26%, transparent 58%);
    animation:hlwSpin 120s linear infinite}
  @keyframes hlwSpin{to{transform:translateX(-50%) rotate(1turn)}}
  .hlw-glow{position:absolute; left:50%; bottom:-56px; transform:translateX(-50%); z-index:1;
    width:560px; height:320px; filter:blur(4px);
    background:radial-gradient(ellipse at 50% 100%, rgba(255,214,138,.55), rgba(255,175,110,.14) 54%, transparent 72%)}
  .hlw-sun{position:absolute; left:50%; bottom:-86px; transform:translateX(-50%); z-index:1;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle at 50% 42%, #FFF7C8 0%, #FFE873 34%, #F7B24A 70%, #E8894A 100%);
    box-shadow:0 0 130px 50px rgba(255,224,120,.42), 0 0 46px 10px rgba(255,242,190,.6);
    animation:hlwRise 1.9s cubic-bezier(.2,.8,.2,1) both}
  @keyframes hlwRise{from{transform:translateX(-50%) translateY(130px); opacity:0} to{transform:translateX(-50%) translateY(0); opacity:1}}
  .hlw-ground{position:absolute; left:0; right:0; bottom:0; height:15%; z-index:2;
    background:linear-gradient(180deg, rgba(20,26,48,0), rgba(15,20,40,.9) 60%, #0D1428)}
  .hlw-line{position:absolute; left:0; right:0; bottom:15%; height:2px; z-index:2;
    background:linear-gradient(90deg, transparent, rgba(255,236,150,.85) 22%, rgba(255,236,150,.85) 78%, transparent);
    box-shadow:0 0 22px 3px rgba(255,210,120,.4)}
  .hlw-card{position:relative; z-index:3; max-width:530px; width:100%; text-align:center;
    padding:clamp(22px,2.8vw,32px) clamp(20px,3vw,38px);
    background:rgba(18,26,50,.34); border:1px solid rgba(255,255,255,.18); border-radius:20px;
    -webkit-backdrop-filter:blur(15px) saturate(1.25); backdrop-filter:blur(15px) saturate(1.25);
    box-shadow:0 26px 64px -22px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.24)}
  .hlw-eyebrow{font-family:var(--ff-mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
    color:#FFE873; margin-bottom:14px}
  .hlw-welcome{font-family:var(--ff-disp); font-weight:500; font-style:italic; color:#EAEEF8;
    font-size:clamp(16px,2.1vw,22px); line-height:1; text-shadow:0 2px 14px rgba(8,12,28,.6)}
  .hlw-logo{width:min(50%,190px); margin:9px auto 2px; color:#FFF4DC;
    filter:drop-shadow(0 4px 18px rgba(255,224,120,.3))}
  .hlw-logo svg{width:100%; height:auto; display:block}
  .hlw-logo .hl-gold{transform:translateX(57.5px)}   /* centre the underline beneath the wordmark */
  .hlw-tag{margin:14px auto 0; max-width:490px; color:#E4E9F5; font-size:16px; line-height:1.62;
    text-shadow:0 1px 8px rgba(8,12,28,.6)}
  .hlw-tag .wl-vn{display:block; margin-top:6px; color:#C6D0E8; font-size:14px}
  .hlw-cta{margin-top:22px}
  .hlw-cta button{font-family:var(--ff-mono); font-size:13px; letter-spacing:.03em; font-weight:700; color:#1C2740;
    background:linear-gradient(180deg,#FFF3B8,#FFE873); border:none; border-radius:999px; padding:13px 26px; cursor:pointer;
    box-shadow:0 12px 26px -8px rgba(255,224,120,.6); transition:transform .15s, box-shadow .15s}
  .hlw-cta button:hover{transform:translateY(-2px); box-shadow:0 18px 32px -8px rgba(255,224,120,.72)}
  .hlw-cta button:active{transform:translateY(0)}
  /* functional widgets carried inside the glass (exam countdown, teacher grade switch) */
  .hlw-card .countdown{margin:20px auto 0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2)}
  .hlw-card .countdown .cd-num{color:#FFE873}
  .hlw-card .countdown .cd-lb, .hlw-card .countdown small{color:#DCE3F2}
  .hlw-card .gs-tswitch, .hlw-card .gs-tgradebar{margin-top:18px}
  @media (prefers-reduced-motion: reduce){
    .hlw-sun,.hlw-rays,.hlw-stars{animation:none}
    .hlw-sun{transform:translateX(-50%)}
  }
  @media (max-width:760px){
    .hlw{padding:44px 16px 60px}
    .hlw-sun{width:186px; height:186px; bottom:-78px}
    .hlw-rays{width:560px; height:560px; bottom:-270px}
    .hlw-logo{width:min(58%,168px)}
  }
  /* 6 Nov 2026 · scene-window hero ─ the course hero is a clear window onto the page's Flow scene: photo (and loop) sharp, a
     soft left-hand scrim for the words, a hairline frame, the place name bottom-right (it also covers the
     generator's corner mark). Replaces the drawn sunrise. Compact (every visit after the first) stays short. */
  .hlw.hlw-win{background:#1d2550; justify-content:flex-start; align-items:flex-end; min-height:clamp(300px,38vw,420px);
    padding:clamp(26px,4vw,48px) clamp(20px,4.4vw,52px); border-radius:26px; box-shadow:0 26px 60px -30px rgba(10,16,36,.75)}
  .hlw.hlw-win.is-compact{min-height:clamp(128px,14vw,168px); align-items:center; border-radius:22px; padding:18px clamp(20px,4vw,40px)}
  .hlw-win .hlw-sky{border-radius:inherit; background:#1d2550}
  .hlw-win .hlw-sky .scn-ph,.hlw-win .hlw-sky .scn-mv{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .hlw-win .hlw-sky::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(90deg,rgba(9,13,30,.72) 0%,rgba(9,13,30,.42) 38%,rgba(9,13,30,.06) 72%,rgba(9,13,30,0) 100%),
               linear-gradient(0deg,rgba(9,13,30,.38),rgba(9,13,30,0) 46%)}
  .hlw-win::after{content:""; position:absolute; inset:8px; z-index:3; border:1px solid rgba(255,255,255,.34); border-radius:19px; pointer-events:none}
  .hlw-win.is-compact::after{border-radius:15px}
  .hlw-win .hlw-card{max-width:560px; text-align:left; padding:0; background:none; border:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none; z-index:4}
  .hlw-win .hlw-kicker{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,244,220,.86); margin-bottom:8px}
  .hlw-win .hlw-eyebrow{font-family:var(--ff-disp); font-weight:600; font-size:clamp(27px,3.6vw,42px); line-height:1.08; letter-spacing:-.01em;
    text-transform:none; color:#fff; margin:0; text-shadow:0 2px 20px rgba(6,10,26,.45)}
  .hlw-win .hlw-eyebrow::after{content:""; display:block; width:54px; height:3px; border-radius:3px; margin-top:12px; background:#FFE873}
  .hlw-win .hlw-welcome{margin-top:18px; text-align:left}
  .hlw-win .hlw-logo{margin:8px 0 0; width:min(44%,170px)}
  .hlw-win .hlw-logo .hl-gold{transform:none}
  .hlw-win .hlw-tag{margin:12px 0 0; text-align:left}
  .hlw-win .hlw-cta{margin-top:20px}
  .hlw-win .hlw-card .countdown{margin:16px 0 0; display:inline-flex; background:rgba(12,18,40,.42); border:1px solid rgba(255,255,255,.26);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  .hlw-win .hlw-card .gs-tswitch,.hlw-win .hlw-card .gs-tgradebar{margin-top:14px}
  .hlw-place{position:absolute; right:18px; bottom:16px; z-index:4; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em;
    text-transform:uppercase; color:#fff; padding:6px 11px; border-radius:999px; background:rgba(9,13,30,.5);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22)}
  .hlw-win.is-compact .hlw-place{bottom:12px; right:14px}
  @media (max-width:760px){
    .hlw.hlw-win{min-height:300px; padding:28px 20px 54px}
    .hlw.hlw-win.is-compact{min-height:132px; padding:44px 20px 22px; align-items:flex-end}
    .hlw-win.is-compact .hlw-place{top:12px; bottom:auto}
    .hlw-win .hlw-sky::after{background:linear-gradient(180deg,rgba(9,13,30,.58) 0%,rgba(9,13,30,.3) 42%,rgba(9,13,30,.66) 100%)}
    .hlw-place{right:12px; bottom:10px}
  }

  /* ---------- landing (Horizon Linguo) ---------- */
  .land-hero{position:relative; overflow:hidden; border-radius:18px; margin-top:6px;
    background:linear-gradient(180deg,#141E38 0%, #24345C 46%, #3D5288 72%, #C6553F 96%);
    color:#fff; padding:74px 34px 90px; text-align:center; isolation:isolate}
  .land-hero .sun{position:absolute; left:50%; bottom:-72px; transform:translateX(-50%);
    width:190px; height:190px; border-radius:50%; background:radial-gradient(circle at 50% 38%, #FFF3B0, var(--hl) 55%, #F5B84A 100%);
    box-shadow:0 0 90px 30px rgba(255,232,115,.35); z-index:0; animation:sunrise 1.6s ease-out both}
  @keyframes sunrise{from{transform:translateX(-50%) translateY(90px); opacity:0} to{transform:translateX(-50%) translateY(0); opacity:1}}
  .land-hero .horizon{position:absolute; left:0; right:0; bottom:0; height:26px; background:var(--ink); z-index:1;
    border-top:2px solid rgba(255,232,115,.65)}
  .land-hero .inner{position:relative; z-index:2}
  .land-hero .eyebrow{font-family:var(--ff-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--hl); margin-bottom:16px}
  .land-hero h1{font-family:var(--ff-disp); font-weight:600; font-size:clamp(36px,6vw,62px); line-height:1.06; text-shadow:0 1px 10px rgba(12,18,38,.55)}
  .land-hero h1 em{font-style:italic; color:var(--hl)}
  .land-hero p{margin:16px auto 0; max-width:520px; color:#E2E7F3; font-size:16.5px; text-shadow:0 1px 8px rgba(12,18,38,.75)}
  /* keep the sunrise clear of the words on narrow screens */
  @media (max-width:760px){
    .land-hero{padding:56px 22px 168px}
    .land-hero .sun{width:150px; height:150px; bottom:-64px; box-shadow:0 0 70px 22px rgba(255,232,115,.28)}
  }
  /* flex-wrap: "Lộ trình & mục tiêu" was squeezed to 151px and wrapped to two lines
     while the cadence chip sat jammed against it. One word. */
  .skills-head{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; justify-content:space-between; margin:30px 0 14px; border-top:1.5px solid var(--ink); padding-top:14px}
  .skills-head h2{font-family:var(--ff-disp); font-size:22px; font-weight:600}
  .skills-head span{font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
  .skillgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding-bottom:60px}
  .skill{background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:24px 22px 20px; text-align:left; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, transform .15s; position:relative}
  .skill.live{cursor:pointer}
  .skill.live:hover{border-color:var(--red); transform:translateY(-3px)}
  .skill.soon{opacity:.62}
  .skill .icon{width:44px; height:44px; border-radius:10px; background:var(--paper); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center}
  .skill.live .icon{background:var(--hl-soft); border-color:#EAD87A}
  .skill .icon svg{width:22px; height:22px; stroke:var(--navy)}
  .skill h3{font-family:var(--ff-disp); font-size:22px; font-weight:600}
  .skill .desc{color:var(--mut); font-size:13.5px; line-height:1.45}
  .skill .status{margin-top:auto; padding-top:10px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em}
  .skill.live .status{color:var(--red); font-weight:600}
  .skill.soon .status{color:var(--mut)}
  .crumb{font-family:var(--ff-mono); font-size:12.5px; color:var(--mut); margin-top:6px}
  .crumb a{color:var(--navy); text-decoration:none; cursor:pointer}
  .crumb a:hover{text-decoration:underline}
  button.practice-card{color:var(--ink)}   /* 10.48 · dark-mode legibility */
  /* 10.61 · Ask Horizon (IELTS chatbot) */
  #hl-chat{position:fixed; right:18px; bottom:22px; z-index:400; font-family:var(--ff-body)}
  @media (max-width:760px){ #hl-chat{right:12px; bottom:78px} }
  .hc-fab{display:flex; align-items:center; gap:8px; font:600 14px var(--ff-body); color:#fff; background:var(--navy); border:0; border-radius:30px; padding:11px 18px 11px 14px; box-shadow:0 8px 24px rgba(20,28,50,.28); cursor:pointer}
  .hc-fab[disabled]{background:var(--mut); cursor:default; box-shadow:none; opacity:.85}
  .hc-dot{width:9px; height:9px; border-radius:50%; background:var(--hl); box-shadow:0 0 0 3px rgba(255,232,115,.25)}
  .hc-dot.off{background:#fff; box-shadow:none; opacity:.6}
  #hl-chat.open .hc-fab{display:none}
  .hc-panel{display:none; width:min(380px, calc(100vw - 24px)); height:min(560px, calc(100vh - 140px)); flex-direction:column; background:var(--card); color:var(--ink); border:1.5px solid var(--line); border-radius:16px; box-shadow:0 18px 48px rgba(20,28,50,.25); overflow:hidden}
  #hl-chat.open .hc-panel{display:flex}
  .hc-panel header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--navy); color:#fff}
  .hc-panel header b{font:600 17px var(--ff-disp); display:block}
  .hc-panel header small{font:500 10.5px var(--ff-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.75}
  .hc-x{background:none; border:0; color:#fff; font-size:24px; line-height:1; cursor:pointer; padding:2px 6px}
  .hc-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--paper)}
  .hc-m{max-width:88%; font-size:14.5px; line-height:1.5; padding:9px 12px; border-radius:12px}
  .hc-m.me{align-self:flex-end; background:var(--navy); color:#fff; border-bottom-right-radius:4px; white-space:pre-wrap}
  .hc-m.ai{align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:4px}
  .hc-m.err{border-color:var(--red); color:var(--red)}
  .hc-vi{display:block; margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); color:var(--mut); font-size:13px; font-style:italic}
  .hc-free{display:block; margin-top:6px; font:500 10.5px var(--ff-mono); color:var(--mut)}
  .hc-typing{display:flex; gap:4px} .hc-typing i{width:6px; height:6px; border-radius:50%; background:var(--mut); animation:hcB 1s infinite} .hc-typing i:nth-child(2){animation-delay:.15s} .hc-typing i:nth-child(3){animation-delay:.3s}
  @keyframes hcB{0%,80%,100%{opacity:.3}40%{opacity:1}}
  .hc-empty{display:flex; flex-direction:column; gap:6px; color:var(--mut); font-size:13.5px; line-height:1.5}
  .hc-empty b{color:var(--ink); font:600 16px var(--ff-disp)}
  .hc-sugg{display:flex; flex-direction:column; gap:6px; margin-top:8px}
  .hc-sugg button{text-align:left; font:500 13.5px var(--ff-body); color:var(--ink); background:var(--card); border:1.5px solid var(--line); border-radius:10px; padding:8px 11px; cursor:pointer}
  .hc-form{display:flex; gap:8px; align-items:flex-end; padding:10px; border-top:1px solid var(--line); background:var(--card)}
  .hc-form textarea{flex:1; resize:none; font:14.5px var(--ff-body); color:var(--ink); background:var(--field); border:1.5px solid var(--line); border-radius:10px; padding:8px 10px; max-height:110px}
  .hc-left{font:500 10.5px var(--ff-mono); color:var(--mut); padding:0 12px 9px; background:var(--card)}
  /* 20 Oct · the IELTS test bank: one card for Reading and Listening */
  .hb{max-width:760px; margin:6px 0 26px}
  .hb .lv2{--lvc:var(--ok)} .hb .lv3{--lvc:var(--navy)} .hb .lv4{--lvc:var(--red)}
  .hb-tabs{display:flex; gap:0; border-bottom:1.5px solid var(--line); margin-bottom:14px}
  .hb-tabs button{font:600 14.5px var(--ff-body); color:var(--mut); background:none; border:0; padding:10px 16px 11px; margin-bottom:-1.5px; border-bottom:2.5px solid transparent; cursor:pointer}
  .hb-tabs button b{font:500 11.5px var(--ff-mono); margin-left:6px; padding:2px 7px; border-radius:20px; background:var(--paper); color:var(--mut)}
  .hb-tabs button.on{color:var(--ink); border-bottom-color:var(--ink)}
  .hb-tabs button.on b{background:var(--ink); color:var(--card)}
  .hb-tabs button[disabled]{cursor:default}
  .hb-tools{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:10px}
  .hb-chips{display:flex; flex-wrap:wrap; gap:6px}
  .hb-chips button{font:500 13px var(--ff-body); color:var(--ink); background:var(--card); border:1.5px solid var(--line); border-radius:30px; padding:6px 12px; cursor:pointer}
  .hb-chips button b{font:500 11px var(--ff-mono); color:var(--mut); margin-left:4px}
  .hb-chips button.on{border-color:var(--lvc, var(--ink)); box-shadow:inset 0 0 0 1px var(--lvc, var(--ink))}
  .hb-chips button.lv2::before, .hb-chips button.lv3::before, .hb-chips button.lv4::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lvc); margin-right:6px; vertical-align:1px}
  .hb-find{flex:1 1 220px; min-width:0; font:14px var(--ff-body); color:var(--ink); background:var(--field); border:1.5px solid var(--line); border-radius:10px; padding:8px 12px}
  .hb-count{font:500 11.5px var(--ff-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin:4px 0 10px}
  .hb-list{display:flex; flex-direction:column; gap:10px}
  .hb-card{display:grid; grid-template-columns:76px 1fr; background:var(--card); border:1.5px solid var(--line); border-left:4px solid var(--lvc); border-radius:12px; overflow:hidden}
  .hb-num{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font:600 28px/1 var(--ff-mono); color:var(--ink); background:var(--paper); border-right:1px solid var(--line); padding:14px 4px}
  .hb-num small{font:500 9px var(--ff-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
  .hb-mid{padding:14px 16px 14px; min-width:0}
  .hb-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
  .hb-top h3{font:600 20px/1.2 var(--ff-disp); margin:0; color:var(--ink)}
  .hb-lv{flex:none; font:600 10.5px var(--ff-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--lvc); border:1.5px solid var(--lvc); border-radius:20px; padding:3px 9px}
  .hb-sub{margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--ink)}
  .hb-sub i{font-style:normal; color:var(--mut); margin:0 7px}
  .hb-card .meta{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-top:8px; display:flex; gap:4px 14px; flex-wrap:wrap; align-items:center}
  .hb-cam{color:var(--red) !important}
  .hb-acts{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px}
  .hb-or{font:500 11.5px var(--ff-mono); color:var(--mut); margin:0 2px 0 8px}
  .hb-acts .btn.xs{min-width:34px}
  .hb-why{margin-top:16px; font-size:13.5px; color:var(--mut); max-width:680px}
  .hb-why summary{cursor:pointer; font-weight:600; color:var(--ink)}
  .hb-why p{margin:8px 0 0; line-height:1.55}
  @media (max-width:520px){ .hb-card{grid-template-columns:58px 1fr} .hb-num{font-size:22px} .hb-top{flex-direction:column; align-items:flex-start; gap:6px} .hb-top h3{font-size:18px} }
  .practice-card{background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:24px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; max-width:680px; transition:border-color .15s}
  .practice-card:hover{border-color:var(--navy)}
  .practice-card .pnum{font-family:var(--ff-mono); font-weight:600; font-size:26px; color:var(--btn-fg); background:var(--navy); border-radius:12px; padding:16px 18px}
  /* v9.80 · an unsized SVG in a shrink-to-fit box draws at zero width: the GS badge was blank */
  .practice-card .pnum svg{width:26px; height:26px; display:block}
  .practice-card .pnum.gs-n{min-width:62px; text-align:center; font-size:22px; padding:16px 10px}
  .gs-toc{max-width:720px; border:1.5px solid var(--line); border-radius:14px; padding:14px 18px; margin:0 0 16px; background:var(--card)}
  .gs-toc h3{font-size:15px; margin:0 0 8px}
  .gs-toc a{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line); cursor:pointer; color:var(--ink); text-decoration:none; font-size:14.5px}
  .gs-toc a:last-child{border-bottom:0}
  .gs-toc a span{color:var(--mut); font-family:var(--ff-mono); font-size:13px; white-space:nowrap}
  .gs-part{max-width:720px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:20px 0 8px; padding-bottom:6px; border-bottom:2px solid var(--navy); scroll-margin-top:80px}
  .gs-part b{font-size:17px}
  .gs-part span{color:var(--mut); font-size:13.5px}
  .gap-now{background:#ffe58a; color:#1b2440; border-radius:4px; padding:0 3px; font-weight:700}
  .gd-gap{display:inline-block; background:var(--navy); color:var(--btn-fg); border-radius:8px; padding:3px 10px; font-weight:700; margin-bottom:10px}
  .practice-card .pmid{flex:1 1 220px}
  .practice-card h3{font-family:var(--ff-disp); font-size:23px; font-weight:600}
  .practice-card .meta{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-top:4px; display:flex; gap:14px; flex-wrap:wrap}
  /* gifted-classify 23Sep */
  .gd-sec{max-width:760px}
  .gd-sec .skills-head{margin-top:26px}
  .gd-mc{margin:22px 0 8px; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px}
  .gd-mc h3{font-family:var(--ff-disp); font-size:20px; font-weight:600}
  .gd-mc .gd-vi{font-size:13.5px; color:var(--mut)}
  .gd-part{background:var(--card); border:1.5px solid var(--line); border-radius:14px; margin:0 0 12px; overflow:hidden}
  .gd-part-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:12px 16px; border-bottom:1px solid var(--line)}
  .gd-part-h b{font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--navy)}
  .gd-part-h .gd-skill{font-family:var(--ff-disp); font-size:17px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink); margin-left:8px}
  .gd-part-h .caf-handouts{display:flex; gap:6px; flex-wrap:wrap}
  .gd-row{display:flex; align-items:center; gap:12px 16px; padding:12px 16px; min-height:56px; cursor:pointer}
  .gd-row + .gd-row{border-top:1px solid var(--line)}
  .gd-row .gd-l{flex:1 1 auto; min-width:0}
  .gd-row .gd-t{font-weight:600; font-size:16px}
  .gd-row .meta{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-top:3px; display:flex; gap:4px 14px; flex-wrap:wrap}
  .gd-row .btn{flex:0 0 auto; min-width:84px}
  @media (hover:hover){ .gd-row:hover{background:var(--paper)} }
  .gd-row:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--navy)}
  .gd-warm .gd-row .gd-b{color:var(--mut); font-size:13.5px; margin-top:2px}
  @media (max-width:480px){ .gd-row{padding:12px} .gd-row .btn{min-width:72px} .gd-part-h{padding:12px} }
  .soon-strip{border:1.5px dashed var(--line); border-radius:14px; padding:20px 24px; color:var(--mut); font-size:14px; max-width:680px; margin-top:14px}

  /* ---------- v9.72 · CONTENTS, the index above a long list of tests ----------
     Fourteen reading papers and eight listening tests scroll for pages. This is the panel
     that lets a student find one by name instead. It sits directly above the cards it
     indexes and borrows their .meta and .prog-chip, so a row here reads like a shrunken
     version of the card it points at rather than a second design.
     The rows scroll INSIDE the panel (.toc-rows max-height): an index that pushes the
     list it indexes off the screen has replaced the problem with itself. */
  .toc{border:1.5px solid var(--line); border-radius:14px; background:var(--card); max-width:680px; margin:18px 0 8px}
  .toc-head{display:flex; align-items:center; gap:10px; width:100%; padding:12px 16px; background:transparent; border:none; border-radius:14px; text-align:left; font:inherit; color:var(--ink); cursor:pointer}
  .toc-head h3{font-family:var(--ff-disp); font-size:17px; font-weight:600; flex:1 1 auto; margin:0}
  .toc-head .count{font-family:var(--ff-mono); font-size:12px; color:var(--mut); white-space:nowrap}
  .toc-head .caret{font-family:var(--ff-mono); font-size:11px; color:var(--mut); transition:transform .15s}
  .toc.open .toc-head .caret{transform:rotate(90deg)}
  .toc-head:hover{color:var(--navy)}
  .toc-body{border-top:1.5px solid var(--line); padding:12px 16px 14px}
  .toc-find{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px}
  /* flex:0 0 auto or the label is the thing that shrinks: at 1280 px "FIND A PAPER ·
     TÌM ĐỀ" was squeezed under the input's left edge and the gloss lost its last letters. */
  .toc-find label{flex:0 0 auto; white-space:nowrap; font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}
  /* 16px or iOS zooms the whole page on focus — the same size .acc-find input uses. */
  .toc-find input{flex:1 1 240px; min-width:180px; font:inherit; font-size:16px; padding:8px 12px; border:1.5px solid var(--line); border-radius:9px; background:var(--field); color:var(--ink)}
  .toc-rows{max-height:46vh; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .toc-row{display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; padding:9px 6px; border:none; border-bottom:1px solid var(--line); background:transparent; font:inherit; color:var(--ink); cursor:pointer}
  .toc-row:last-child{border-bottom:none}
  .toc-row:hover{background:var(--field)}
  .toc-n{font-family:var(--ff-mono); font-size:12px; font-weight:600; color:var(--navy); flex:0 0 54px; padding-top:2px}
  .toc-t{flex:1 1 auto; min-width:0; display:block}
  .toc-t b{display:block; font-weight:600; font-size:14.5px; line-height:1.3}
  .toc-sub{display:block; color:var(--mut); font-size:12.5px; line-height:1.5; margin-top:2px}
  .toc-row .meta{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut); margin-top:4px; display:flex; gap:12px; flex-wrap:wrap; align-items:center}
  .toc-none{color:var(--mut); font-size:13.5px; padding:10px 2px}

  /* ---------- welcome ---------- */
  .hero{padding:38px 0 26px}
  .hero .eyebrow{font-family:var(--ff-mono); font-size:12px; letter-spacing:.18em; color:var(--red); text-transform:uppercase; margin-bottom:12px}
  .hero h1{font-family:var(--ff-disp); font-weight:600; font-size:clamp(34px,5vw,54px); line-height:1.08; max-width:640px}
  .hero h1 .swipe{position:relative; white-space:nowrap}
  .hero h1 .swipe::after{content:""; position:absolute; left:-4px; right:-6px; bottom:4px; height:.42em; background:var(--hl); z-index:-1; transform:rotate(-1.2deg); border-radius:2px}
  .hero p{color:var(--mut); max-width:560px; margin-top:14px; font-size:16px}
  .namefield{margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
  .namefield label{font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; color:var(--mut)}
  .namefield input{border:1.5px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--card); width:220px}
  .namefield input:focus{outline:2px solid var(--navy); outline-offset:1px; border-color:var(--navy)}

  .shelf-head{display:flex; align-items:baseline; justify-content:space-between; margin:26px 0 14px; border-top:1.5px solid var(--ink); padding-top:14px}
  .shelf-head h2{font-family:var(--ff-disp); font-size:22px; font-weight:600}
  .shelf-head .count{font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
  .cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; padding-bottom:60px}
  .tcard{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:20px 20px 16px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, transform .15s}
  .tcard:hover{border-color:var(--navy); transform:translateY(-2px)}
  .tcard .sec{font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; color:var(--red); text-transform:uppercase}
  .tcard h3{font-family:var(--ff-disp); font-size:21px; font-weight:600; line-height:1.2}
  .tcard .meta{font-family:var(--ff-mono); font-size:12px; color:var(--mut); display:flex; gap:14px; flex-wrap:wrap}
  .tcard .actions{margin-top:auto; display:flex; gap:8px; padding-top:8px}
  .btn{border:none; border-radius:8px; padding:10px 16px; font-weight:600; font-size:14px}
  .btn.primary{background:var(--navy); color:var(--btn-fg)}
  .btn.primary:hover{background:#1B2748}
  .btn.ghost{background:transparent; border:1.5px solid var(--line); color:var(--ink)}
  .btn.ghost:hover{border-color:var(--navy)}
  .btn.danger{background:var(--red); color:var(--btn-fg)}
  .btn.small{padding:7px 12px; font-size:13px}
  .custom-tag{font-family:var(--ff-mono); font-size:11px; background:var(--hl-soft); border:1px solid #EAD87A; color:#7A6A12; border-radius:4px; padding:2px 6px}
  .prog-chip{display:inline-flex; align-items:center; gap:4px; font-family:var(--ff-mono); font-size:11px; font-weight:700; color:var(--ok); background:var(--ok-soft); border:1px solid var(--ok); border-radius:999px; padding:2px 9px; white-space:nowrap}
  /* sentence-ordering drill (University track) */
  .ord-wrap{display:flex; flex-direction:column; gap:12px}
  .ord-picked{display:flex; flex-direction:column; gap:6px}
  .ord-pool{display:flex; flex-direction:column; gap:6px}
  .ord-chip,.ord-step{display:flex; gap:9px; align-items:flex-start; text-align:left; width:100%;
    border:1px solid var(--line); border-radius:10px; padding:9px 12px; cursor:pointer;
    font:inherit; font-size:14px; line-height:1.5; color:inherit; background:var(--field)}
  .ord-chip b,.ord-step b{font-family:var(--ff-mono); font-size:12px; flex-shrink:0; margin-top:1px}
  .ord-chip:disabled{opacity:.32; cursor:default}
  .ord-step{background:var(--ok-soft); border-style:dashed}
  .ord-step.ok{border-color:var(--ok); border-style:solid}
  .ord-step.no{border-color:var(--red); border-style:solid; background:var(--bad-soft)}
  .ord-step:disabled{cursor:default}
  .ord-note{font-size:12.5px; color:var(--mut)}
  .adv-tag{font-family:var(--ff-mono); font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--red); border:1px solid var(--red); border-radius:4px; padding:1px 5px; vertical-align:2px}
  /* course switcher dropdown */
  .course-switch{position:relative; display:inline-block}
  .course-switch .cs-caret{font-size:9px; opacity:.7}
  .course-menu{position:absolute; right:0; top:calc(100% + 6px); z-index:80; min-width:184px; background:var(--card); border:1.5px solid var(--line); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.16); padding:6px; display:flex; flex-direction:column; gap:2px}
  .course-menu-item{display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:transparent; color:var(--ink); border-radius:8px; padding:9px 10px; font:inherit; font-size:14px; cursor:pointer}
  .course-menu-item:hover{background:var(--field)}
  .course-menu-item.on{background:var(--red-soft); font-weight:600}
  .course-menu-item .cmi-ic{width:20px; height:20px; flex:0 0 auto; color:var(--red); display:inline-flex}
  .course-menu-item .cmi-ic svg{width:20px; height:20px; stroke:currentColor}
  .course-menu-item .cmi-check{margin-left:auto; color:var(--ok); font-weight:700}
  .drill-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px}
  .conf-toggle{display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:var(--field); color:var(--mut); border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; user-select:none}
  .conf-toggle.on{border-color:#C98A16; background:var(--hl-soft); color:#7A5B0E; font-weight:600}
  .btn.tolog{border:1.5px solid var(--line); background:var(--field); color:var(--ink)}
  .btn.tolog.done{border-color:var(--ok); color:var(--ok); background:var(--ok-soft)}
  .conf-note{font-size:12.5px; color:#7A5B0E; background:var(--hl-soft); border-radius:8px; padding:6px 10px; margin-top:8px}
  /* personalized to-do panel + streak */
  .todo-panel{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:18px 20px; margin:18px 0 6px; box-shadow:0 4px 16px rgba(0,0,0,.04)}
  .todo-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:12px}
  .todo-head h2{font-size:clamp(19px,2.4vw,23px)}
  .streak-badge{display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:8px; align-items:center; background:var(--field); border:1.5px solid var(--line); border-radius:12px; padding:8px 12px; min-width:150px}
  .streak-badge .fire{grid-row:1/3; font-size:22px; align-self:center}
  .streak-badge .streak-n{font-size:14px} .streak-badge .streak-n b{font-size:18px; font-family:var(--ff-disp)}
  .streak-badge .streak-bar{grid-column:2; height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:3px}
  .streak-badge .streak-bar i{display:block; height:100%; background:#E8912A; border-radius:3px}
  .streak-badge .streak-lb{grid-column:2; font-family:var(--ff-mono); font-size:11px; color:var(--mut); margin-top:3px}
  .streak-badge.met{border-color:var(--ok)} .streak-badge.met .streak-bar i{background:var(--ok)}
  .todo-list{display:flex; flex-direction:column; gap:8px}
  .todo-item{display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1.5px solid var(--line); background:var(--field); border-radius:12px; padding:12px 14px; cursor:pointer; font:inherit; color:inherit; transition:border-color .12s, transform .12s}
  .todo-item:hover{border-color:var(--red); transform:translateX(2px)}
  .todo-ic{width:30px; height:30px; flex:0 0 auto; color:var(--red); background:var(--red-soft); border-radius:8px; display:inline-flex; align-items:center; justify-content:center}
  .todo-ic svg{width:18px; height:18px}
  .todo-tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
  .todo-tx b{font-size:15px; font-weight:600} .todo-tx small{color:var(--mut); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .todo-go{color:var(--mut); font-size:18px; flex:0 0 auto}
  @media (max-width:560px){ .streak-badge{min-width:0} .todo-tx small{white-space:normal} }

  /* ---------- test view (split pane) ---------- */
  .testbar{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1.5px solid var(--line); }
  .testbar .in{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0}
  .testbar .title{font-family:var(--ff-disp); font-weight:600; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  /* 10.49 · on a small phone a long passage title pushed under "Aa Display": let the title shrink (ellipsis), keep the buttons whole */
  .testbar .title{min-width:0; flex:1 1 auto}
  .testbar .in > :not(.title){flex-shrink:0}
  .timer{font-family:var(--ff-mono); font-size:15px; font-weight:600; background:var(--ink); color:var(--paper); border-radius:8px; padding:7px 12px; min-width:88px; text-align:center}
  .timer.low{background:var(--red); animation:pulse 1s infinite}
  .timer.over{background:#b7791f; color:#fff; animation:none}
  #hl-timeup{position:fixed; left:50%; top:76px; transform:translateX(-50%); z-index:80; max-width:min(560px,calc(100vw - 32px));
    background:#b7791f; color:#fff; border-radius:12px; padding:12px 16px; box-shadow:0 10px 30px rgba(0,0,0,.25);
    display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.4}
  /* Foundations stage 4: same exam screen, deliberately no clock */
  .timer.prac{background:transparent; color:var(--mut); border:1.5px dashed var(--line); font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px}
  @keyframes pulse{50%{opacity:.65}}
  .split{display:grid; grid-template-columns:1fr 1fr; gap:0; height:calc(100vh - 62px)}
  .pane{overflow-y:auto; padding:26px 28px 80px}
  /* A phrase the question quotes, bolded where it sits in the passage. */
  .q-focus{font-weight:700}
  .dtd-chip{position:relative} .dtd-chip.has-due{border-color:var(--navy)}
  .sb-jdetail{display:block; margin-top:6px; font:400 12px/1.5 var(--ff-mono); color:var(--mut)}
  /* the four candidate slots of a sentence-insertion question */
  .q-ins{display:inline-block; min-width:18px; padding:1px 4px; margin:0 3px; border:1.4px solid var(--red);
         border-radius:4px; font:700 11.5px/1.35 var(--ff-mono); color:var(--red);
         background:var(--red-soft); text-align:center; vertical-align:1px}
  .pane.passage{background:var(--card); border-right:1.5px solid var(--line)}
  .pane.passage h2{font-family:var(--ff-disp); font-size:26px; font-weight:600; margin-bottom:6px}
  .pane.passage .rubric{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-bottom:20px}
  .para{margin-bottom:16px; display:flex; gap:12px}
  .para .plabel{font-family:var(--ff-mono); font-weight:600; font-size:13px; color:var(--red); flex:0 0 18px; padding-top:2px}
  .para p{white-space:pre-wrap}
  .ppass-h{font-family:var(--ff-disp); font-size:19px; font-weight:600; margin:22px 0 10px 30px; color:var(--ink)}
  .ppass-h:first-child{margin-top:4px}
  .mobile-tabs{display:none}

  .qgroup{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:18px; margin-bottom:18px}
  .qgroup .ghead{font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; color:var(--red); text-transform:uppercase; margin-bottom:6px}
  .qgroup .ginstr{color:var(--mut); font-size:14px; margin-bottom:14px; white-space:pre-wrap}
  .optlist{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:14px; font-size:14px}
  /* 10.49 · 17 Oct 2026: diagram labelling, table and flow-chart completion show their picture/table/boxes above
     the gap questions, as on the real test. The figure sits on a white card so its lines stay legible in every theme. */
  .rdfig{background:#fff; color:#24345C; border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:4px 0 12px}
  .rdfig svg{width:100%; height:auto; display:block}
  /* 10.50: picture diagrams keep their numbers readable on phones: the picture stays at least 620px wide and the card scrolls sideways */
  .rdfig{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .rdfig svg.dg-pic{min-width:620px}
  .rdtitle{font-weight:700; text-align:center; margin:4px 0 8px}
  .rdtbl{width:100%; border-collapse:collapse; margin:0 0 12px; font-size:14px}
  .rdtbl th, .rdtbl td{border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top}
  .rdtbl th{background:var(--paper)}
  .rdflow{margin:0 0 12px}
  .rdflow .rdbox{border:1.5px solid var(--line); border-radius:8px; padding:8px 12px; background:var(--paper); font-size:14px}
  .rdflow .rdarr{text-align:center; line-height:1.3; opacity:.7}
  .rdgap{display:inline-block; min-width:2.6em; border-bottom:1.5px dotted currentColor; text-align:center; font-weight:700; padding:0 4px}
  .optlist div{display:flex; gap:10px; margin:4px 0}
  .optlist b{font-family:var(--ff-mono); color:var(--navy)}
  .qrow{display:flex; gap:12px; padding:11px 0; border-top:1px dashed var(--line); align-items:flex-start; flex-wrap:wrap}
  .qrow:first-of-type{border-top:none}
  .qnum{font-family:var(--ff-mono); font-weight:600; font-size:14px; color:var(--btn-fg); background:var(--navy); border-radius:6px; min-width:34px; text-align:center; padding:3px 0; flex:0 0 auto}
  .qbody{flex:1 1 260px}
  .qbody .prompt{margin-bottom:8px}
  .gapinput{border:1.5px solid var(--line); border-bottom:2px solid var(--navy); border-radius:6px; padding:8px 10px; width:220px; background:var(--field)}
  .gapinput:focus{outline:2px solid var(--navy); outline-offset:1px}
  .radios{display:flex; gap:8px; flex-wrap:wrap}
  .radios label{border:1.5px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13.5px; display:inline-flex; align-items:center; gap:6px; background:var(--field)}
  .radios label:hover{border-color:var(--navy)}
  .radios input{accent-color:var(--navy)}
  .radios label:has(input:checked){background:var(--navy); color:var(--btn-fg); border-color:var(--navy)}
  select.lettersel{border:1.5px solid var(--line); border-radius:6px; padding:8px 10px; background:var(--field); font-family:var(--ff-mono)}
  /* drag / tap question type */
  .dragbank{position:sticky; top:0; z-index:6; background:var(--card); border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; max-height:36vh; overflow-y:auto; box-shadow:0 8px 18px rgba(0,0,0,.08); margin-bottom:12px}
  .dragbank-label{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-bottom:8px}
  .chips{display:flex; flex-wrap:wrap; gap:7px}
  .drag-clone{position:fixed; left:0; top:0; z-index:200; pointer-events:none; margin:0; box-shadow:0 16px 34px rgba(0,0,0,.28); border-color:var(--navy); background:var(--card); will-change:transform; opacity:.97}
  .dchip{user-select:none; -webkit-user-select:none; touch-action:none}
  .dchip{border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:7px 11px; font-size:13.5px; text-align:left; cursor:grab; max-width:100%; line-height:1.3}
  .dchip b{font-family:var(--ff-mono); color:var(--navy); margin-right:2px}
  .dchip:hover{border-color:var(--navy)}
  .dchip.sel{border-color:var(--red); background:var(--red-soft); outline:2px solid var(--red)}
  .dchip.used{opacity:.32; cursor:default; text-decoration:line-through}
  .dchip.used b{color:var(--mut)}
  .dchip.dragging{opacity:.5}
  .wbtitle{font-family:var(--ff-disp); font-weight:600; font-size:16px; margin:4px 0 8px}
  .dropslot{display:inline-flex; align-items:center; gap:6px; min-width:120px; min-height:34px; border:1.5px dashed var(--line); border-radius:8px; padding:5px 10px; font-size:13px; color:var(--mut); background:var(--field); vertical-align:middle}
  .dropslot.ready{border-color:var(--red); color:var(--red)}
  .dropslot.filled{border-style:solid; border-color:var(--navy); background:var(--card); color:var(--ink); font-size:13.5px}
  .dropslot.filled b{font-family:var(--ff-mono); color:var(--navy)}
  .dropslot.dragover{border-color:var(--red); background:var(--red-soft)}
  .slotx{border:none; background:transparent; color:var(--mut); cursor:pointer; font-size:12px; padding:0 2px; margin-left:2px}
  .slotx:hover{color:var(--red)}
  .draprows .qrow .prompt span{line-height:2.1}
  .wbsummary{line-height:2.6; font-size:15px}
  .dropslot.inline{min-width:70px; min-height:26px; padding:2px 8px; margin:0 2px}
  .dropslot.inline.filled{min-width:0}
  .mcq{display:flex; flex-direction:column; gap:7px; margin-top:8px}
  .mcq-opt{position:relative; display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--line); border-radius:9px; padding:10px 13px; background:var(--field); cursor:pointer; font-size:14.5px; line-height:1.45}
  .mcq-opt:hover{border-color:var(--navy)}
  .mcq-opt input{position:absolute; left:8px; top:8px; width:1px; height:1px; opacity:0; pointer-events:none}
  .mcq-opt b{font-family:var(--ff-mono); color:var(--navy); flex:0 0 auto; min-width:16px}
  .mcq-opt.on{background:var(--navy); border-color:var(--navy); color:var(--btn-fg)}
  .mcq-opt.on b{color:var(--hl)}
  .checks{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
  .checks label{border:1.5px solid var(--line); border-radius:8px; padding:8px 12px; display:flex; gap:8px; align-items:flex-start; font-size:13.5px; background:var(--field)}
  .checks input{accent-color:var(--navy); margin-top:2px}
  .checks label:has(input:checked){background:var(--navy); color:var(--btn-fg); border-color:var(--navy)}
  .setnote{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-top:8px}
  .submitzone{padding:8px 0 40px; display:flex; gap:10px; align-items:center}
  .answered-count{font-family:var(--ff-mono); font-size:12px; color:var(--mut)}

  /* ---------- results ---------- */
  .resultcard{max-width:640px; margin:50px auto; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:34px}
  .resultcard .eyebrow{font-family:var(--ff-mono); font-size:12px; letter-spacing:.16em; color:var(--red); text-transform:uppercase}
  .bigscore{font-family:var(--ff-mono); font-weight:600; font-size:56px; margin:10px 0 2px}
  .bigscore small{font-size:22px; color:var(--mut)}
  .scorebar{height:10px; border-radius:999px; background:var(--paper); border:1px solid var(--line); overflow:hidden; margin:16px 0}
  .scorebar i{display:block; height:100%; background:var(--ok)}
  .wrongchips{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px}
  .wrongchips span{font-family:var(--ff-mono); font-size:13px; background:var(--bad-soft); color:var(--bad); border:1px solid #EDC9C9; border-radius:6px; padding:4px 10px}
  .resultnote{color:var(--mut); font-size:14px; margin-top:14px}

  /* ---------- teacher ---------- */
  .teacher-tabs{display:flex; gap:10px 18px; margin:22px 0 20px; flex-wrap:wrap; align-items:flex-end}
  .teacher-tabs button{border:1.5px solid var(--line); background:var(--card); border-radius:999px; padding:8px 16px; font-weight:600; font-size:13.5px; color:var(--mut)}
  .teacher-tabs button.on{background:var(--red); border-color:var(--red); color:var(--btn-fg)}
  /* group the tools so the teacher scans a short labelled section, not nine loose chips */
  .tt-group{display:flex; flex-direction:column; gap:6px}
  .tt-group .tt-lab{font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); padding-left:4px}
  .tt-group .tt-row{display:flex; gap:7px; flex-wrap:wrap; padding-right:14px; border-right:1.5px solid var(--line)}
  .tt-group:last-child .tt-row{border-right:none; padding-right:0}
  @media(max-width:720px){ .tt-group .tt-row{border-right:none; padding-right:0} }
  .keycard{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px}
  .keycard h3{font-family:var(--ff-disp); font-size:20px; margin-bottom:4px}
  .keyrow{display:flex; gap:14px; padding:12px 0; border-top:1px dashed var(--line); align-items:flex-start; flex-wrap:wrap}
  .keyans{font-family:var(--ff-mono); font-weight:600; font-size:14px; background:var(--hl); color:#1C2740; padding:3px 8px; border-radius:4px; transform:rotate(-.6deg); display:inline-block; flex:0 0 auto; max-width:100%}
  .keyexp{flex:1 1 300px; font-size:14px; color:#3B455F}
  .keyexp .flag{color:var(--red); font-weight:600}
  .keypick{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
  .keypick button{border:1.5px solid var(--line); background:var(--card); border-radius:8px; padding:9px 16px; font-weight:600; font-size:14px}
  .keypick button.on{border-color:var(--navy); background:var(--navy); color:var(--btn-fg)}
  .ghead2{font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; color:var(--red); text-transform:uppercase; margin:18px 0 4px}

  /* builder */
  .builder{max-width:840px}
  .field{margin-bottom:14px}
  .field label{display:block; font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; color:var(--mut); margin-bottom:5px}
  .field input[type=text], .field input[type=number], .field textarea, .field select{width:100%; border:1.5px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--field)}
  .field textarea{min-height:110px; resize:vertical}
  .field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--navy); outline-offset:1px}
  .grpbox{border:1.5px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; background:var(--card)}
  .grpbox .gtop{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
  .grpbox .gtop b{font-family:var(--ff-mono); font-size:13px; color:var(--navy)}
  .qbox{border:1px dashed var(--line); border-radius:8px; padding:12px; margin-top:10px; background:var(--paper)}
  .qbox .row2{display:grid; grid-template-columns:90px 1fr; gap:10px}
  .hint{font-size:12.5px; color:var(--mut); margin-top:4px}
  .banner{border-radius:10px; padding:12px 16px; font-size:14px; margin-bottom:16px}
  .banner.ok{background:var(--ok-soft); color:var(--ok); border:1px solid #BEDFCF}
  .banner.warn{background:var(--hl-soft); border:1px solid #EAD87A; color:#6B5D0E}

  /* The same message, on every screen. See hlBannerPaint(). Sits above the two floating
     pills (z-60) but below a modal (z-130), and clears the iOS home indicator. */
  .hl-toast{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px));
    z-index:120; display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
    border-radius:12px; padding:13px 14px; font-size:14px; line-height:1.45;
    background:var(--card,#fff); color:var(--ink,#1C2740); border:1px solid #D8DEEA;
    box-shadow:0 8px 28px rgba(28,39,64,.22); animation:hlToastIn .18s ease-out}
  .hl-toast.err{background:#FDF2F2; border-color:#E9BDBD; color:#8A2222}
  .hl-toast.ok{background:var(--ok-soft,#EAF6EF); border-color:#BEDFCF; color:var(--ok,#1D7A46)}
  .hl-toast.warn{background:var(--hl-soft,#FDF8E3); border-color:#EAD87A; color:#6B5D0E}
  .hl-toast-x{background:none; border:0; font-size:22px; line-height:1; cursor:pointer;
    color:inherit; opacity:.65; min-width:44px; min-height:44px; margin:-11px -8px -11px 0}
  .hl-toast-x:hover{opacity:1}
  @keyframes hlToastIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
  @media (min-width:720px){ .hl-toast{left:auto; right:20px; max-width:520px} }
  @media (prefers-reduced-motion:reduce){ .hl-toast{animation:none} }

  /* ---- tap targets ------------------------------------------------------------------
     Measured at 375x812, the phone most of these students hold: nav tabs 32px, nav arrows
     39x40, dictionary tabs 29, flashcard toggles 32, the typed-gap box 37, teacher tabs 33.
     Nothing in the chrome layer reached the 44px floor, so every one of them was a miss
     waiting to happen with a thumb. Scoped to small screens so the desktop layout, which
     is comfortable already, does not grow. */
  @media (max-width:640px){
    .navtabs button, .navarrow, .role-pill, .dtab, .vchip, .btn.small,
    .dtdfab, .dictfab, .teachtabs button{ min-height:44px }
    .navtabs button, .dtab, .vchip{ padding-top:10px; padding-bottom:10px }
    input.gm-gap, .gapinput{ min-height:44px }
    /* The two floating pills sat in the same corner and covered ~14% of the explanation
       box, and, on the IPA drill, the speaker buttons for options B and C. Give the page
       a safe zone under them. */
    .wrap{ padding-bottom:96px }
    /* v9.58 · ...but that safe zone is for CONTENT. It was also being applied to the
       wrap around the topbar and the one inside the nav bar, which put 194 px of dead
       space above the first thing on the screen: 23% of a 844 px phone, before a
       student saw anything. The chrome wraps opt out. */
    .navbar-outer > .wrap, .fp-stagebar > .wrap{ padding-bottom:0 }
    .wrap:has(> .topbar){ padding-bottom:0 }
    /* 10.40 · the test chrome too: each of these got 96 px of empty space on a phone. */
    .testbar > .wrap, .gm-secbar > .wrap, .gm-navmap > .wrap, .gm-cbtnav > .wrap, .lnav > .wrap{ padding-bottom:0 }
    /* 10.40 · the test header: the chips (Focus, count, clock) overflowed leftwards over the title. The title
       now takes the room left and wraps to two short lines; the answered count is on the Map already. */
    .gm-testbar .in{ gap:8px }
    body .gm-testbar .title{ flex:1 1 auto; min-width:0; font-size:14px; line-height:1.25; white-space:normal;
      overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
    .gm-testbar .tb-chips{ flex:none; width:auto }
    .gm-testbar .gm-count{ display:none }
    /* the section tabs scroll with the page on a phone (two sticky bars left the passage ~40% of the screen),
       and the sticky passage sits right under the header instead of 30 px below it, where text peeked through */
    body .gm-secbar{ position:static }
    body .gm-sectabs{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none }
    body .gm-bpassage{ top:72px; max-height:40vh }
    body .gm-bpassage .gm-passage{ padding:10px 16px 14px }
    .topbar{ padding:10px 0 }
  }

  /* My Results progress strip — see myProgressStripHtml() */
  .mp-strip{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 6px}
  .mp-tile{flex:1 1 120px; min-width:120px; border:1.5px solid var(--ink); border-radius:12px;
    padding:12px 14px; background:var(--card,#fff)}
  .mp-n{font-size:26px; font-weight:700; line-height:1.1}
  .mp-l{font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; margin-top:2px}
  .mp-l em{display:block; text-transform:none; letter-spacing:0; font-style:normal;
    color:var(--mut); font-size:12.5px}
  .mp-note{color:var(--mut); font-size:13.5px; margin:8px 0 16px}
  .mp-note em{display:block; font-style:normal}

  /* modal */
  .modal-back{position:fixed; inset:0; background:rgba(28,39,64,.45); display:flex; align-items:center; justify-content:center; z-index:130; padding:20px}
  .modal{background:var(--card); border-radius:14px; padding:28px; width:100%; max-width:400px}
  .modal h3{font-family:var(--ff-disp); font-size:22px; margin-bottom:6px}
  .modal p{color:var(--mut); font-size:14px; margin-bottom:14px}
  .modal input{width:100%; background:var(--field); color:var(--ink); border:1.5px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:12px}
  .modal .err{color:var(--red); font-size:13px; margin:-6px 0 10px; display:none}
  .modal .btns{display:flex; gap:8px; justify-content:flex-end}

  /* glassmorphism speaking-feedback popup */
  .fb-back{position:fixed; inset:0; background:rgba(20,28,48,.5); display:flex; align-items:center; justify-content:center; z-index:140; padding:16px; animation:fbfade .18s ease}
  @keyframes fbfade{from{opacity:0}to{opacity:1}}
  .fb-modal{width:100%; max-width:1060px; max-height:92vh; overflow:auto; border-radius:22px; padding:22px 22px 20px;
    background:var(--card);
    background:color-mix(in srgb, var(--card) 62%, transparent);
    -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 18px 60px rgba(10,16,32,.42), inset 0 1px 0 rgba(255,255,255,.25)}
  .fb-mhead{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
  .fb-eyebrow{font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); opacity:.85}
  .fb-modal h3{font-family:var(--ff-disp); font-size:20px; margin:3px 0 2px; line-height:1.2}
  .fb-for{font-size:13.5px; color:var(--mut)}
  .fb-x{margin-left:auto; flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
    background:color-mix(in srgb, var(--field) 55%, transparent); color:var(--ink); font-size:20px; line-height:1; cursor:pointer}
  .fb-crits{display:flex; flex-direction:column; gap:12px}
  .fb-row{border-radius:14px; padding:11px 13px; background:color-mix(in srgb, var(--field) 45%, transparent); border:1px solid rgba(255,255,255,.14)}
  .fb-crit{font-size:14px; font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:8px}
  .fb-selband{font-family:var(--ff-mono); background:var(--navy); color:#fff; border-radius:7px; padding:1px 7px; font-size:12.5px}
  .fb-bands{display:flex; flex-wrap:wrap; gap:6px}
  .fb-band{font-family:var(--ff-mono); font-size:13px; min-width:44px; padding:7px 0; text-align:center; cursor:pointer;
    border-radius:9px; border:1px solid rgba(255,255,255,.2); color:var(--ink);
    background:color-mix(in srgb, var(--card) 40%, transparent); transition:transform .06s ease}
  .fb-band:hover{border-color:var(--navy)}
  .fb-band:active{transform:scale(.94)}
  .fb-band.on{background:var(--navy); color:#fff; border-color:var(--navy); font-weight:700; box-shadow:0 4px 14px rgba(28,39,64,.35)}
  .fb-overall{margin:14px 0 6px; font-size:15px; padding:12px 14px; border-radius:14px;
    background:color-mix(in srgb, var(--navy) 14%, transparent); border:1px solid rgba(255,255,255,.16)}
  .fb-overall b{font-family:var(--ff-mono); font-size:18px; color:var(--navy)}
  .fb-overall span{display:block; color:var(--mut); font-size:12px; margin-top:2px}
  .fb-clabel{font-size:13px; font-weight:600; margin:10px 0 6px}
  .fb-comment{width:100%; min-height:90px; resize:vertical; border-radius:12px; padding:11px 13px; font-family:inherit; font-size:14.5px; line-height:1.5;
    color:var(--ink); background:color-mix(in srgb, var(--field) 60%, transparent); border:1px solid rgba(255,255,255,.2)}
  .fb-guidetog{margin-left:8px; font-size:12px; font-family:inherit; color:var(--navy); background:none; border:none; cursor:pointer; padding:2px 4px; border-radius:6px; font-weight:600}
  .fb-guidetog:hover{background:color-mix(in srgb, var(--navy) 12%, transparent)}
  .fb-selnote{margin-top:8px; font-size:12.5px; line-height:1.45; color:var(--ink); background:color-mix(in srgb, var(--navy) 10%, transparent); border-radius:8px; padding:7px 10px}
  .fb-selnote b{font-family:var(--ff-mono); color:var(--navy); margin-right:4px}
  .fb-guide{margin-top:9px; display:flex; flex-direction:column; gap:5px}
  .fb-grow{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.4; padding:6px 9px; border-radius:8px; background:color-mix(in srgb, var(--field) 45%, transparent); border:1px solid rgba(255,255,255,.12)}
  .fb-grow b{font-family:var(--ff-mono); color:var(--mut); flex:0 0 auto}
  .fb-grow.on{background:color-mix(in srgb, var(--navy) 16%, transparent); border-color:var(--navy)}
  .fb-grow.on b{color:var(--navy)}
  .fb-err{color:var(--red); font-size:13px; margin-top:8px}
  .fb-btns{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}
  .fb-hint{font-size:13px; color:var(--mut); margin:-4px 0 14px}
  .fb-rubric{display:flex; flex-direction:column; gap:16px}
  .rub-crit{border-top:1px solid rgba(255,255,255,.14); padding-top:14px}
  .rub-crit:first-child{border-top:none; padding-top:0}
  .rub-head{display:flex; align-items:baseline; gap:10px; margin-bottom:9px}
  .rub-head h4{font-size:15.5px; font-weight:700; margin:0}
  .rub-pts{margin-left:auto; font-family:var(--ff-mono); font-size:13px; color:var(--navy); background:color-mix(in srgb, var(--navy) 12%, transparent); border-radius:8px; padding:2px 10px}
  .rub-cells{display:flex; gap:8px; overflow-x:auto; padding-bottom:5px}
  .rub-cell{flex:1 0 152px; min-width:152px; position:relative; cursor:pointer; border:1.5px solid rgba(255,255,255,.26); border-radius:12px; padding:10px 11px 24px; background:color-mix(in srgb, var(--card) 52%, transparent); transition:border-color .12s ease, background .12s ease}
  .rub-cell:hover{border-color:var(--navy)}
  .rub-band{font-size:11.5px; font-weight:700; font-family:var(--ff-mono); letter-spacing:.03em; color:var(--mut); margin-bottom:5px}
  .rub-desc{font-size:12.5px; line-height:1.42}
  .rub-foot{position:absolute; left:11px; bottom:7px; font-family:var(--ff-mono); font-size:11.5px; color:var(--mut)}
  .rub-cell.on{border-color:var(--ok); border-width:2px; padding:9.5px 10.5px 23.5px; background:color-mix(in srgb, var(--ok) 15%, transparent)}
  .rub-cell.on .rub-band{color:var(--ok)}
  .rub-cell.on::after{content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:9px solid var(--ok)}
  .rub-tools{margin-top:9px}
  .rub-halfbtn{font-size:12px; font-family:inherit; border:1px solid rgba(255,255,255,.25); background:color-mix(in srgb, var(--field) 55%, transparent); color:var(--ink); border-radius:8px; padding:5px 11px; cursor:pointer}
  .rub-halfbtn.on{background:var(--navy); color:#fff; border-color:var(--navy)}
  .rub-halfbtn:disabled{opacity:.45; cursor:default}
  .rub-cin{width:100%; margin-top:9px; border:1px solid rgba(255,255,255,.25); background:color-mix(in srgb, var(--field) 55%, transparent); color:var(--ink); border-radius:8px; padding:8px 11px; font-family:inherit; font-size:13.5px}
  .rub-cell.ro{cursor:default}
  .rub-cell.ro:hover{border-color:rgba(255,255,255,.26)}
  /* AI writing rubric renders on a normal card (not the glass modal): solid cells */
  .wb-rubric{display:flex; flex-direction:column; gap:16px; margin-top:6px}
  .wb-rubric .rub-crit{border-top:1px solid var(--line); padding-top:14px}
  .wb-rubric .rub-crit:first-child{border-top:none; padding-top:0}
  .wb-rubric .rub-cell{background:var(--field); border-color:var(--line)}
  .wb-rubric .rub-cell.ro:hover{border-color:var(--line)}
  .wb-rubric .rub-cell.on{border-color:var(--ok); background:var(--ok-soft)}
  .wb-rubric .rub-pts{background:var(--field); border:1px solid var(--line)}
  .wb-rb-comment{font-size:13px; margin-top:8px; background:var(--field); border-left:3px solid var(--navy); border-radius:0 8px 8px 0; padding:8px 11px}
  @supports not (backdrop-filter: blur(2px)){ .fb-modal{background:var(--card)} }
  /* student: received speaking feedback */
  .mf-list{display:flex; flex-direction:column; gap:12px; margin-bottom:20px}
  .mf-card{border:1.5px solid var(--line); background:var(--card); border-radius:14px; padding:14px 16px}
  .mf-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:15px}
  .mf-part{font-family:var(--ff-mono); font-size:11.5px; background:var(--field); border:1px solid var(--line); border-radius:6px; padding:1px 7px}
  .mf-date{color:var(--mut); font-size:12.5px; margin-left:auto}
  .mf-overall{margin-top:8px; font-size:14px}
  .mf-overall b{font-family:var(--ff-mono); font-size:18px; color:var(--navy); background:var(--ok-soft); border-radius:7px; padding:1px 9px; margin-left:4px}
  .mf-crits{display:flex; flex-direction:column; gap:8px; margin-top:10px}
  .mf-crit{background:var(--field); border:1px solid var(--line); border-radius:9px; padding:7px 11px; font-size:13px}
  .mf-critline{display:flex; align-items:center; gap:8px}
  .mf-critline b{font-family:var(--ff-mono); color:var(--navy); margin-left:auto}
  .mf-cnote{color:var(--mut); font-size:12.5px; margin-top:3px; line-height:1.4}
  .mf-comment{margin-top:10px; font-size:14px; line-height:1.5; background:var(--field); border-left:3px solid var(--navy); border-radius:0 8px 8px 0; padding:9px 12px}
  .mf-comment span{color:var(--mut); font-weight:600; font-size:12.5px; display:block; margin-bottom:2px}
  .fb-nb{border-color:var(--navy)}
  .wr-sub{margin-top:8px; background:var(--field); border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:13.5px; line-height:1.55; max-height:280px; overflow:auto; white-space:normal}
  .wr-sub p{margin:0 0 8px}
  .wr-sub p:last-child{margin-bottom:0}

  @media (max-width: 860px){
    .split{display:block; height:auto}
    .pane{height:auto; overflow:visible; padding:20px 16px 40px}
    .pane.passage{border-right:none; border-bottom:1.5px solid var(--line)}
    .mobile-tabs{display:flex; gap:0; position:sticky; top:62px; z-index:15; background:var(--paper); border-bottom:1.5px solid var(--line)}
    .mobile-tabs button{flex:1; border:none; background:transparent; padding:12px; font-weight:600; color:var(--mut); border-bottom:3px solid transparent}
    .mobile-tabs button.on{color:var(--navy); border-bottom-color:var(--red)}
    .hidden-m{display:none !important}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important}
  }
  /* ---- Listening player + dictation ---- */
  .lplayer{background:var(--card,#fff); border:1px solid var(--line,#e5e2dc); border-radius:16px; padding:22px; box-shadow:0 6px 22px rgba(0,0,0,.05)}
  .lplayer.exam{border-color:#d9b48a}
  .lp-badge{display:inline-block; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.08em; font-weight:700; color:#a9691f; background:#f6e7d2; padding:5px 10px; border-radius:999px}
  .lp-badge.alt{color:#2b6a52; background:#dcefe6}
  .lp-status{margin:16px 0 10px; font-weight:600; font-size:15px}
  .lp-progress{height:8px; border-radius:6px; background:var(--line,#e9e6df); overflow:hidden}
  .lp-progress i{display:block; height:100%; background:linear-gradient(90deg,#e0a458,#c9803a); width:0; transition:width .25s linear}
  .lp-note{margin-top:12px; font-size:13px; color:var(--mut,#77716a); line-height:1.5}
  .lp-controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px}
  .lp-speed{font-size:13px; color:var(--mut,#77716a); display:inline-flex; gap:4px; align-items:center; margin-left:6px}
  .spd{font-family:var(--ff-mono); font-size:12px; padding:4px 8px; border:1px solid var(--line,#ddd); background:transparent; border-radius:8px; cursor:pointer}
  .spd.on{background:#2b6a52; color:#fff; border-color:#2b6a52}
  .lp-eq{display:flex; gap:4px; align-items:flex-end; height:34px; margin-top:16px}
  .lp-eq span{width:6px; background:linear-gradient(#e0a458,#c9803a); border-radius:3px; height:30%; animation:eqb 1s ease-in-out infinite}
  .lp-eq span:nth-child(2){animation-delay:.12s} .lp-eq span:nth-child(3){animation-delay:.24s}
  .lp-eq span:nth-child(4){animation-delay:.36s} .lp-eq span:nth-child(5){animation-delay:.48s}
  .lp-eq span:nth-child(6){animation-delay:.6s} .lp-eq span:nth-child(7){animation-delay:.72s}
  @keyframes eqb{0%,100%{height:25%}50%{height:95%}}
  .l-transcript{margin-top:14px; border-top:1px dashed var(--line,#ddd); padding-top:12px; max-height:340px; overflow:auto}
  .ltr{display:flex; gap:10px; padding:4px 0; font-size:14px; line-height:1.5}
  .ltr-who{flex:0 0 96px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; color:var(--accent,#c9803a); text-transform:uppercase; padding-top:2px}
  .l-sample{margin-top:14px; font-size:13px; color:var(--mut,#77716a); background:var(--card2,#faf7f2); border:1px dashed var(--line,#e2ddd4); border-radius:12px; padding:12px 14px}
  .dictcard{background:var(--card,#fff); border:1px solid var(--line,#e5e2dc); border-radius:16px; padding:24px; box-shadow:0 6px 22px rgba(0,0,0,.05); margin-top:10px}
  .dict-tip{margin-left:12px; font-size:14px; color:var(--mut,#77716a)}
  .dict-feedback{margin-top:14px; padding:12px 14px; border-radius:12px; font-weight:600}
  .dict-feedback.ok{background:#dcefe6; color:#1f6b4d} .dict-feedback.no{background:#fbe4e1; color:#a33526}
  .dict-alt{font-weight:400; font-size:13px; margin-top:6px; opacity:.85}
  .dict-score{margin-top:16px; font-family:var(--ff-mono); font-size:12.5px; color:var(--mut,#77716a)}
  .lp-sections{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:14px}
  .lp-seclab{font-size:12.5px; color:var(--mut,#77716a); margin-right:2px}
  .lp-sections .spd.on{background:#2b6a52; color:#fff; border-color:#2b6a52}
  .lp-skiprow{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:10px}
  .lp-vol{display:inline-flex; gap:8px; align-items:center}
  .lp-vol input[type=range]{width:110px; accent-color:#2b6a52; cursor:pointer}
  .lp-vollab{font-size:12.5px; color:var(--mut,#77716a)}
  /* real-exam listening layout */
  .lbar{position:sticky; top:0; z-index:30; background:var(--card,#fff); border-bottom:1px solid var(--line,#e5e2dc); box-shadow:0 2px 10px rgba(0,0,0,.04)}
  .lbar.exam{background:#fbf3e8}
  .lbar-in{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 0}
  .lb-badge{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.06em; font-weight:700; color:#a9691f; background:#f3e2cc; padding:5px 9px; border-radius:999px; white-space:nowrap}
  .lb-badge.alt{color:#2b6a52; background:#dcefe6}
  .lb-progress{flex:1 1 120px; min-width:90px; height:7px; border-radius:6px; background:var(--line,#e9e6df); overflow:hidden}
  .lb-progress i{display:block; height:100%; background:linear-gradient(90deg,#e0a458,#c9803a); width:0; transition:width .25s linear}
  .lb-status{font-size:12.5px; color:var(--mut,#6f6a63); min-width:120px; flex:0 1 auto}
  .lb-eq{display:inline-flex; gap:3px; align-items:flex-end; height:18px}
  .lb-eq span{width:4px; background:linear-gradient(#e0a458,#c9803a); border-radius:2px; height:35%; animation:eqb 1s ease-in-out infinite}
  .lb-eq span:nth-child(2){animation-delay:.15s} .lb-eq span:nth-child(3){animation-delay:.3s} .lb-eq span:nth-child(4){animation-delay:.45s} .lb-eq span:nth-child(5){animation-delay:.6s}
  .lb-spd,.lb-sec{display:inline-flex; gap:3px}
  .btn.xs{padding:5px 9px; font-size:12px; min-height:0}
  .lstage{padding:22px 0 130px}
  .lpart-head{border-bottom:2px solid var(--line,#e9e6df); padding-bottom:12px; margin-bottom:18px}
  .lpart-head h2{font-family:var(--ff-disp); font-size:24px; font-weight:600; margin:0}
  .lpart-head p{color:var(--mut,#77716a); margin:4px 0 0; font-size:14px}
  .lnav{position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--card,#fff); border-top:1px solid var(--line,#e5e2dc); box-shadow:0 -4px 16px rgba(0,0,0,.06)}
  .lnav-in{display:flex; gap:12px; align-items:center; padding:10px 0; flex-wrap:wrap}
  .lnav-parts{display:flex; gap:6px}
  .lnav-part{display:flex; flex-direction:column; align-items:center; line-height:1.1; padding:6px 12px; border:1px solid var(--line,#ddd); border-radius:10px; background:transparent; cursor:pointer; font-size:11px; color:var(--mut,#77716a)}
  .lnav-part b{font-size:13px; color:var(--ink,#2a2a2a)}
  .lnav-part.on{background:#2b6a52; border-color:#2b6a52} .lnav-part.on b,.lnav-part.on{color:#fff}
  .lnav-nums{display:flex; gap:5px; flex-wrap:wrap; flex:1 1 auto}
  .lnav-n{width:30px; height:30px; border:1px solid var(--line,#d8d3ca); border-radius:7px; background:transparent; cursor:pointer; font-family:var(--ff-mono); font-size:12.5px; color:var(--mut,#77716a)}
  .lnav-n.done{background:#e7f1ec; border-color:#8fc3ab; color:#1f6b4d; font-weight:700}
  .lnav-n.flag{position:relative} .lnav-n.flag::after{content:""; position:absolute; top:-3px; right:-3px; width:8px; height:8px; background:#d98324; border-radius:50%}
  @media (max-width:640px){ .lnav-nums{display:none} .lstage{padding-bottom:96px} }
  /* inline gap-fill: input sits within the sentence */
  .prompt.inlinegap{line-height:2.1}
  .gapinput.inline{display:inline-block; width:150px; margin:0 4px; padding:4px 8px; vertical-align:baseline; border:1px solid var(--line,#c9c4bb); border-radius:6px; font-size:15px; background:var(--card,#fff)}
  .gapinput.inline:focus{border-color:#2b6a52; outline:2px solid rgba(43,106,82,.15)}
  /* flag-for-review button */
  .qrow{position:relative}
  .qflag{position:absolute; top:6px; right:0; border:none; background:transparent; cursor:pointer; font-size:16px; color:var(--line,#c9c4bb); padding:4px; line-height:1; transition:color .15s}
  .qflag:hover{color:#d98324}
  .qflag.on{color:#d98324}
  .lcard-lab{font-size:12px; color:var(--mut,#77716a); text-transform:uppercase; letter-spacing:.04em}
  .lcard-parts{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:10px}
  /* flagged-questions review panel */
  .lnav-flagbtn{display:inline-flex; gap:5px; align-items:center; border:1px solid var(--line,#d8d3ca); border-radius:10px; background:transparent; cursor:pointer; padding:7px 11px; font-size:14px; color:var(--mut,#77716a)}
  .lnav-flagbtn.has{color:#d98324; border-color:#d98324}
  .lnav-flagbtn span{font-family:var(--ff-mono); font-size:12px}
  .lflag-panel{position:fixed; right:16px; bottom:74px; z-index:50; width:min(320px, calc(100vw - 32px)); background:var(--card,#fff); border:1px solid var(--line,#e5e2dc); border-radius:14px; box-shadow:0 12px 34px rgba(0,0,0,.16); overflow:hidden}
  .lfp-head{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; font-weight:700; font-size:14px; color:#d98324; border-bottom:1px solid var(--line,#eee)}
  .lfp-x{border:none; background:transparent; cursor:pointer; font-size:14px; color:var(--mut,#999); padding:2px 6px}
  #lfp-body{max-height:260px; overflow:auto; padding:6px}
  .lfp-row{display:flex; gap:10px; align-items:center; width:100%; text-align:left; border:none; background:transparent; cursor:pointer; padding:8px 10px; border-radius:8px; font-size:13.5px}
  .lfp-row:hover{background:var(--card2,#f6f3ee)}
  .lfp-row b{font-family:var(--ff-mono); color:#d98324; min-width:34px}
  .lfp-row span{color:var(--mut,#77716a); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .lfp-empty{padding:14px; font-size:13px; color:var(--mut,#77716a); line-height:1.5}
  .lmap{margin:10px 0 16px}
  .lmap-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 4px}
  .lmap-hint{font-size:12.5px; color:var(--mut,#77716a)}
  .lmap[data-qs] .hp-pin{cursor:pointer}
  .lmap[data-qs] .hp-pin:hover circle:nth-of-type(2){stroke-width:3.5}
  .lmap .hp-pin{outline:none}
  .lmap[data-qs] .hp-pin:focus-visible circle:nth-of-type(2){stroke-width:3.5; stroke-dasharray:3 2}
  .lmap .hp-pin.sel circle:nth-of-type(2){fill:#f5d76e; stroke:#8a6d1a}
  .lmap .hp-pin.sel .hp-ltr{fill:#4a3a08}
  .lmap .hp-pin.sel .hp-tag{fill:#8a6d1a}
  .lmap .hp-pin.ok circle:nth-of-type(2){fill:#2e7d4f; stroke:#1d5435}
  .lmap .hp-pin.ok .hp-ltr{fill:#fff}
  .lmap .hp-pin.ok .hp-tag{fill:#1d5435}
  .lmap .hp-pin.bad circle:nth-of-type(2){fill:#c0392b; stroke:#7d241a}
  .lmap .hp-pin.bad .hp-ltr{fill:#fff}
  .lmap .hp-pin.bad .hp-tag{fill:#7d241a}
  .lmap.bw svg{background:#fff !important}
  .lmap.bw .hp-dec{display:none}
  .lmap.bw .hp-park{fill:#fff}
  .lmap.bw .hp-fence{stroke:#333}
  .lmap.bw .hp-lake{fill:#fff; stroke:#555}
  .lmap.bw .hp-ripple{stroke:#bbb}
  .lmap.bw .hp-lake-t{fill:#444}
  .lmap.bw .hp-road-o{stroke:#666}
  .lmap.bw .hp-road-i{stroke:#fff}
  .lmap.bw .hp-post{fill:#333}
  .lmap.bw .hp-pill{fill:#fff; stroke:#333}
  .lmap.bw .hp-lab{fill:#111}
  .lmap.bw .hp-sm{fill:#333}
  .lmap.bw .hp-hut{fill:#fff; stroke:#333}
  .lmap.bw .hp-roof{fill:#fff; stroke:#333}
  .lmap.bw .hp-n{fill:#333}
  .lmap.bw .hp-compass{stroke:#333}
  .lmap.bw .hp-pin circle{stroke:#111}
  .lmap.bw .hp-pin .hp-ltr{fill:#111}
  .lmap.bw .hp-pin.sel circle:nth-of-type(2){fill:#f5d76e; stroke:#8a6d1a}
  .lmap.bw .hp-pin.sel .hp-ltr{fill:#4a3a08}
  .lmap.bw .hp-pin.ok circle:nth-of-type(2){fill:#2e7d4f; stroke:#1d5435}
  .lmap.bw .hp-pin.ok .hp-ltr{fill:#fff}
  .lmap.bw .hp-pin.bad circle:nth-of-type(2){fill:#c0392b; stroke:#7d241a}
  .lmap.bw .hp-pin.bad .hp-ltr{fill:#fff}
  .lmap.revmap .hp-pin{cursor:default}
  /* writing exam room */
  .wr-editor{width:100%; min-height:56vh; resize:vertical; padding:18px; font-size:15.5px; line-height:1.75; font-family:inherit; color:var(--ink,#2a2a2a); background:var(--card,#fff); border:1px solid var(--line,#d8d3ca); border-radius:14px; outline:none}
  .wr-editor:focus{border-color:#2b6a52; box-shadow:0 0 0 3px rgba(43,106,82,.12)}
  .wr-notes{margin-top:16px; display:flex; flex-direction:column; gap:8px}
  .wr-note{padding:10px 14px; border-radius:10px; font-size:13.5px; line-height:1.5}
  .wr-note.bad{background:#fbeee2; color:#8a5a1c}
  .wr-note.good{background:#e7f1ec; color:#1f6b4d}
  .wr-essay,.wr-modeltext{background:var(--card2,#faf8f4); border:1px solid var(--line,#e5e0d6); border-radius:12px; padding:16px 18px; line-height:1.75; font-size:15px}
  .wr-essay p,.wr-modeltext p{margin:0 0 12px} .wr-essay p:last-child,.wr-modeltext p:last-child{margin-bottom:0}
  .wr-modeltext{background:#f2f6f3; border-color:#cfe0d6}
  /* 10.58 · full Writing tests */
  .wt-intro{max-width:680px; color:var(--mut); font-size:14.5px; margin:10px 0 4px}
  .wt-intro .wl-vn{display:block; margin-top:4px}
  .wt-parts{margin:6px 0 0; padding-left:0; list-style:none; font-size:14px; line-height:1.5}
  .wt-parts li{margin:2px 0} .wt-parts b{font-family:var(--ff-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--navy); margin-right:6px}
  body[data-theme="dark"] .wt-parts b, body[data-theme="contrast"] .wt-parts b{color:var(--ink)}
  .wt-tabs{display:flex; gap:8px; max-width:1180px; margin:10px auto 0; padding:0 16px}
  .wt-tabs button{flex:1 1 0; text-align:left; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:12px; padding:9px 14px; cursor:pointer; font:inherit}
  .wt-tabs button b{display:block; font-size:15px} .wt-tabs button span{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut)}
  .wt-tabs button.on{border-color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--navy)}
  .wt-model{margin-top:12px; border:1px solid var(--line); border-radius:12px; padding:10px 14px; background:var(--card)}
  .wt-model summary{cursor:pointer; font-weight:700}
  .wb-switch:has(> :nth-child(3)){grid-template-columns:1fr 1fr 1fr}
  @media (max-width:560px){ .wb-switch:has(> :nth-child(3)){grid-template-columns:1fr 1fr} .wb-switch > :nth-child(3){grid-column:1 / -1} }
  /* 10.57 · the writing bank */
  .wb-switch{display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:680px; margin:14px 0 4px}
  .wb-switch button{text-align:left; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:14px; padding:12px 16px; cursor:pointer; font:inherit}
  .wb-switch button b{display:block; font-size:17px}
  .wb-switch button span{display:block; font-family:var(--ff-mono); font-size:11.5px; color:var(--mut); margin-top:2px}
  .wb-switch button.on{border-color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--navy)}
  .wb-chips{margin:12px 0 6px}
  /* 10.59 · Speaking tests */
  .st-mic{width:64px; height:64px; border-radius:14px; display:grid; place-items:center; font-size:28px; background:var(--card2,#faf8f4); border:1px solid var(--line)}
  .st-samples .st-ph{margin:18px 0 8px}
  .st-why{color:var(--mut); font-size:14px; margin:8px 0 4px}
  .st-qa{border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:8px 0; background:var(--card)}
  .st-q{font-weight:700; margin-bottom:6px}
  .st-a p{margin:0 0 8px; line-height:1.7}
  .st-a p:last-child{margin-bottom:0}
  /* the cue card and notes had a light fallback background under light dark-mode text: unreadable */
  body[data-theme="dark"] .sp-cue, body[data-theme="contrast"] .sp-cue,
  body[data-theme="dark"] .sp-notesview, body[data-theme="contrast"] .sp-notesview,
  body[data-theme="dark"] .st-mic, body[data-theme="contrast"] .st-mic{background:var(--card); color:var(--ink); border-color:var(--line)}
  body[data-theme="dark"] .sp-cuelab{color:var(--ink); opacity:.8}
  .wb-topics{display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; max-width:100%; scrollbar-width:thin}
  .wb-topics .vchip{flex:0 0 auto; padding:5px 12px; font-size:12px}
  .wb-tools{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; max-width:680px; margin:8px 0 14px}
  .wb-todo{display:flex; align-items:center; gap:7px; font-size:14px; cursor:pointer}
  .wb-todo input{width:18px; height:18px}
  .wb-count{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-right:auto}
  .wb-list{display:flex; flex-direction:column; gap:12px; max-width:680px}
  .wb-card{display:flex; gap:16px; align-items:flex-start; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; transition:border-color .2s, box-shadow .2s}
  .wb-card.done{border-style:dashed}
  .wb-card.wb-flash{border-color:var(--red); box-shadow:0 0 0 4px rgba(200,60,50,.15)}
  .wb-side{flex:0 0 132px; display:flex; flex-direction:column; gap:6px}
  .wb-side.t2{flex-basis:96px}
  .wb-thumb{width:132px; height:84px; overflow:hidden; border-radius:9px; border:1px solid var(--line); background:#fff; pointer-events:none}
  .wb-thumb svg{width:100% !important; max-width:none !important; min-width:0 !important; height:auto; border:0 !important; border-radius:0 !important; display:block}
  .wb-kind{font-family:var(--ff-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); border:1.5px solid var(--line); border-radius:8px; padding:5px 6px; text-align:center; line-height:1.3}
  body[data-theme="dark"] .wb-kind, body[data-theme="contrast"] .wb-kind{color:var(--ink)}
  .wb-mid{flex:1; min-width:0}
  .wb-mid h3{font-size:16.5px; line-height:1.35; margin:0}
  .wb-mid .meta{display:flex; flex-wrap:wrap; gap:6px 12px; font-family:var(--ff-mono); font-size:11.5px; color:var(--mut); margin-top:6px}
  .wb-src{font-size:12.5px; color:var(--mut); margin-top:6px; font-style:italic}
  .wb-btns{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
  .wb-empty{color:var(--mut)}
  .wb-plan,.wb-notes{margin-top:14px; border:1px solid var(--line); border-radius:12px; padding:12px 16px; background:var(--card)}
  .wb-plan ol{margin:0; padding-left:20px; line-height:1.6; font-size:14.5px}
  .wb-note{padding:8px 0; border-top:1px dashed var(--line); font-size:14.5px; line-height:1.5}
  .wb-note:first-of-type{border-top:0}
  .wb-note .wl-vn{color:var(--mut); font-size:13.5px; margin-top:2px}
  body[data-theme="dark"] .wr-modeltext, body[data-theme="contrast"] .wr-modeltext,
  body[data-theme="dark"] .wr-essay, body[data-theme="contrast"] .wr-essay{background:var(--card); border-color:var(--line); color:var(--ink)}
  .lmap .wfig-wrap{margin:0 0 10px; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .lmap svg.wpic{min-width:640px}
  .lmap svg.wfig{display:block}
  @media (max-width:560px){ .wb-card{gap:12px; padding:14px} .wb-side{flex:0 0 92px} .wb-side.t2{flex-basis:78px} .wb-thumb{width:92px; height:60px} .wb-btns{flex-wrap:nowrap; gap:6px} .wb-btns .btn{flex:1 1 0; min-width:0; padding-left:8px; padding-right:8px; font-size:13px; white-space:nowrap} .wb-switch button b{font-size:15px} .wb-switch button span{font-size:10.5px} }
  /* speaking interview room */
  .sp-card{background:var(--card,#fff); border:1px solid var(--line,#e5e2dc); border-radius:16px; padding:26px; max-width:760px; margin:22px auto; box-shadow:0 6px 22px rgba(0,0,0,.05)}
  .sp-part{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent,#c9803a); margin-bottom:12px}
  .sp-qtext{font-size:19px; line-height:1.6; font-family:var(--ff-disp); margin:0 0 18px}
  .sp-clockrow{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:14px 0; font-size:13.5px; color:var(--mut,#77716a)}
  .sp-clock{font-family:var(--ff-mono); font-size:22px; font-weight:700; color:var(--ink,#2a2a2a)}
  .sp-clock.over{color:#c0392b}
  .sp-controls{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
  .sp-cue{background:var(--card2,#faf7f2); border:1px solid var(--line,#e2ddd4); border-radius:12px; padding:16px 18px; margin-bottom:8px}
  .sp-cue b{font-size:16.5px}
  .sp-cuelab{font-size:12.5px; color:var(--mut,#77716a); margin-top:8px}
  .sp-cue ul{margin:6px 0 0 20px; line-height:1.7}
  .sp-notesview{font-size:13.5px; color:var(--mut,#6f6a63); background:var(--card2,#faf8f4); border-radius:10px; padding:10px 12px; margin:8px 0}
  .sp-rec{font-size:12.5px; color:var(--mut,#77716a); display:flex; align-items:center; gap:7px}
  .sp-rec.on{color:#c0392b; font-weight:700}
  .sp-rec .dot{width:9px; height:9px; border-radius:50%; background:#c0392b; animation:spblink 1.2s ease-in-out infinite}
  @keyframes spblink{0%,100%{opacity:1}50%{opacity:.25}}

                /* ============================ GIFTED TRACK ============================ */
  .track-chip{font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--red); color:#fff; border-radius:6px; padding:2px 7px; vertical-align:middle; margin-left:6px; font-weight:700}
  .err-badge{display:inline-block; min-width:17px; text-align:center; background:var(--red); color:#fff; border-radius:999px; font-size:11px; font-weight:700; padding:1px 5px; margin-left:2px}

  /* course chooser */
  .course-hero{text-align:center; padding:46px 0 26px}
  .course-hero h1{font-family:var(--ff-disp); font-weight:600; font-size:clamp(30px,5vw,48px)}
  .course-hero p{color:var(--mut); max-width:460px; margin:12px auto 0; font-size:16px}
  .course-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; max-width:760px; margin:0 auto 60px}
  .course-card{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:28px 26px; cursor:pointer; transition:border-color .15s, transform .15s; display:flex; flex-direction:column; gap:12px}
  .course-card:hover{border-color:var(--navy); transform:translateY(-3px)}
  .course-card.gifted:hover{border-color:var(--red)}
  .course-card .cc-ic{width:52px; height:52px; border-radius:12px; background:var(--hl-soft); border:1.5px solid #EAD87A; display:flex; align-items:center; justify-content:center}
  .course-card.gifted .cc-ic{background:var(--red-soft); border-color:var(--red)}
  .course-card .cc-ic svg{width:26px; height:26px; stroke:var(--navy)}
  .course-card.gifted .cc-ic svg{stroke:var(--red)}
  .course-card h3{font-family:var(--ff-disp); font-size:24px; font-weight:600}
  .course-card p{color:var(--mut); font-size:14px; line-height:1.5}
  .course-card .cc-go{margin-top:auto; font-family:var(--ff-mono); font-size:12.5px; font-weight:600; color:var(--red)}

  /* gifted home */
  .gift-hero{position:relative; overflow:hidden; border-radius:18px; margin-top:6px; padding:44px 34px 40px; background:linear-gradient(135deg, var(--ink), var(--navy)); color:#fff}
  .gift-hero .eyebrow{font-family:var(--ff-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--hl); margin-bottom:14px}
  .gift-hero h1{font-family:var(--ff-disp); font-weight:600; font-size:clamp(32px,5.5vw,56px); line-height:1.08}
  .gift-hero h1 em{font-style:italic; color:var(--hl)}
  .gift-hero p{margin:16px 0 0; max-width:560px; color:#D7DDEC; font-size:16px; line-height:1.55}
  /* In dark / contrast modes --ink and --navy invert to light colours, which would put
     white hero text on a pale gradient. Pin the hero to its own dark surface instead. */
  body[data-theme="dark"] .gift-hero{background:linear-gradient(135deg,#141C2E,#22335C)}
  body[data-theme="contrast"] .gift-hero{background:#000; border:1.5px solid var(--line)}
  body[data-theme="contrast"] .gift-hero p{color:var(--ink)}
  .countdown{display:inline-flex; align-items:center; gap:14px; margin-top:22px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:14px 20px}
  .countdown .cd-num{font-family:var(--ff-disp); font-size:44px; font-weight:600; color:var(--hl); line-height:1}
  .countdown .cd-lb{font-size:13.5px; color:#E7EBF5; line-height:1.35}
  .countdown .cd-lb small{color:#AEB8D4; font-family:var(--ff-mono); font-size:11px}
  /* 10.81 · Gifted Real exam papers: an archive of index cards */
  .rp-hero{padding:26px 0 8px}
  .rp-credit{font:600 11px var(--ff-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--mut); display:flex; align-items:center; gap:10px; margin:2px 0 18px}
  .rp-credit:before{content:""; width:28px; height:2px; background:var(--gold)}
  .rp-filter{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px}
  .rp-filter button{font:600 12.5px inherit; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:6px 13px; cursor:pointer}
  .rp-filter button.on{background:var(--navy); border-color:var(--navy); color:#fff}
  .rp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; align-items:start; padding-bottom:24px}
  .rp-card{position:relative; background:var(--card); border:1.5px solid var(--line); border-radius:4px 14px 14px 14px; padding:20px 20px 16px; display:flex; flex-direction:column; gap:10px; overflow:hidden}
  .rp-card:before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:repeating-linear-gradient(180deg,var(--line) 0 6px,transparent 6px 12px)}
  .rp-card.home{grid-column:1/-1; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft,rgba(232,185,49,.18))}
  .rp-card.home:before{background:var(--gold)}
  .rp-stamp{font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:.1em; flex-wrap:wrap; text-transform:uppercase; color:var(--mut); display:flex; justify-content:space-between; gap:8px}
  .rp-stamp b{color:var(--gold); font-weight:700}
  .rp-name{font-family:Newsreader,Georgia,serif; font-size:clamp(24px,3.2vw,30px); line-height:1.08; margin:0}
  .rp-card.home .rp-name{font-size:clamp(30px,4.6vw,42px)}
  .rp-school{font-size:13px; color:var(--mut); margin-top:-4px}
  .rp-rule{height:2px; width:44px; background:var(--gold)}
  .rp-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font:500 12px var(--ff-mono); color:var(--mut)}
  .rp-acts{display:flex; flex-wrap:wrap; gap:6px}
  .rp-ed{border:1.5px solid var(--navy); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:8px}
  .rp-edtag{font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--navy)}
  .rp-audio{display:flex; flex-direction:column; gap:6px; border-top:1px dashed var(--line); padding-top:10px}
  .rp-audio .row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .rp-audio .row span{font:600 11.5px var(--ff-mono); min-width:58px; color:var(--mut)}
  .rp-audio audio{flex:1; min-width:200px; height:36px}
  .rp-teach{display:flex; flex-wrap:wrap; gap:6px; border-top:1px dashed var(--gold); padding-top:10px}
  .rp-teach:before{content:"Teacher"; font:700 10px var(--ff-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); width:100%}
  @media (max-width:520px){ .rp-grid{grid-template-columns:1fr} .rp-card{padding:18px 16px 14px} }
  .gcardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; padding-bottom:20px}
  .gcard{background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:22px 20px; cursor:pointer; transition:border-color .15s, transform .15s; display:flex; flex-direction:column; gap:9px}
  /* ============ Chuyên Anh Foundations — glassmorphism ============ */
  .caf-wrap{position:relative}
  .caf-wrap::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(60% 50% at 12% 0%, rgba(58,80,160,.22), transparent 60%), radial-gradient(55% 45% at 100% 20%, rgba(200,120,60,.16), transparent 60%)}
  .glass{background:rgba(255,255,255,.60); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(255,255,255,.65); box-shadow:0 8px 30px rgba(20,30,70,.12); border-radius:18px}
  body[data-theme="dark"] .glass, body[data-theme="contrast"] .glass{background:rgba(30,36,54,.55); border-color:rgba(255,255,255,.14); box-shadow:0 8px 30px rgba(0,0,0,.35)}
  .caf-hero{padding:26px 28px; margin-top:6px}
  .caf-hero .eyebrow{color:var(--navy)}
  body[data-theme="dark"] .caf-hero .eyebrow, body[data-theme="contrast"] .caf-hero .eyebrow{color:var(--ac,#FFE873)}
  .caf-hero h1{font-family:var(--ff-disp); font-size:clamp(28px,4vw,40px); font-weight:700; margin:4px 0 8px; color:var(--fg)}
  .caf-sub{color:var(--fg); font-size:14.5px; line-height:1.6; max-width:70ch; opacity:.9}
  .caf-prog{display:flex; align-items:center; gap:12px; margin-top:14px; font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
  .caf-prog-bar{flex:1; height:8px; background:rgba(0,0,0,.10); border-radius:99px; overflow:hidden; max-width:340px}
  .caf-prog-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--navy),var(--red)); border-radius:99px}
  .caf-list{display:flex; flex-direction:column; gap:12px; margin-top:16px}
  .caf-card{display:flex; align-items:center; gap:16px; padding:16px 18px}
  .caf-card[role="button"]{cursor:pointer; transition:transform .14s, box-shadow .14s}
  .caf-card[role="button"]:hover{transform:translateY(-2px); box-shadow:0 12px 36px rgba(20,30,70,.18)}
  .caf-card.is-dim{opacity:.6}
  .caf-n{flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-family:var(--ff-disp); font-size:20px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--ink),var(--navy)); box-shadow:0 4px 14px rgba(20,30,70,.3)}
  .caf-mid{flex:1 1 auto; min-width:0}
  .caf-skill{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}
  .caf-mid h3{font-family:var(--ff-disp); font-size:18px; font-weight:600; margin:2px 0 1px; color:var(--fg)}
  .caf-vi{font-size:13px; color:var(--mut); margin:0}
  .caf-right{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right}
  .caf-go{font-family:var(--ff-mono); font-size:12px; color:var(--navy); font-weight:600}
  body[data-theme="dark"] .caf-go, body[data-theme="contrast"] .caf-go{color:var(--ac,#FFE873)}
  .caf-chip{font-family:var(--ff-mono); font-size:11px; padding:3px 9px; border-radius:99px; white-space:nowrap}
  .caf-chip.ready{background:var(--navy); color:#fff}
  .caf-chip.done{background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok)}
  .caf-chip.soon{background:rgba(0,0,0,.06); color:var(--mut)}
  .caf-chip.lock{background:rgba(0,0,0,.06); color:var(--mut)}
  .caf-step{padding:18px 20px; margin-top:14px}
  .caf-step-head{display:flex; align-items:center; gap:11px; margin-bottom:6px; flex-wrap:wrap}
  .caf-step-n{flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-family:var(--ff-mono); font-weight:700; font-size:14px; background:var(--navy); color:#fff}
  .caf-step-head h3{font-family:var(--ff-disp); font-size:19px; font-weight:600; margin:0; color:var(--fg)}
  .caf-step-head h3 em{font-style:normal; font-weight:400; color:var(--mut); font-size:14px}
  .caf-toggle{margin-left:auto; background:none; border:1.3px solid var(--line); border-radius:99px; padding:5px 13px; font-family:var(--ff-mono); font-size:12px; color:var(--fg); cursor:pointer}
  .caf-hint{color:var(--mut); font-size:13.5px; line-height:1.5; margin:4px 0 12px}
  /* ---- lesson view: signalled, segmented, learner-paced ---- */
  .caf-lesson{margin-top:10px}

  /* contents strip — shows the shape of the lesson before any of its detail */
  .caf-toc{border:1px solid var(--line); border-radius:14px; padding:14px 16px 12px; margin-bottom:14px; background:var(--field)}
  .caf-toc-head{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:10px}
  .caf-toc-row{display:flex; flex-wrap:wrap; gap:7px}
  .caf-toc-chip{display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--line); background:var(--card);
    color:var(--ink); border-radius:999px; padding:6px 12px 6px 6px; font-size:13px; cursor:pointer; font-family:inherit; text-align:left}
  .caf-toc-chip:hover{border-color:var(--brand)}
  .caf-toc-chip.on{border-color:var(--gold); background:var(--gold-soft)}
  .caf-toc-n{width:20px; height:20px; border-radius:50%; background:var(--brand); color:var(--card);
    display:grid; place-items:center; font-family:var(--ff-mono); font-size:11px; font-weight:600; flex:0 0 auto}
  .caf-toc-chip.on .caf-toc-n{background:#C08F16; color:#fff}
  .caf-toc-c{font-family:var(--ff-mono); font-size:10.5px; color:var(--mut)}
  .caf-toc-all{margin-top:11px; background:none; border:none; padding:0; color:var(--brand);
    font-family:var(--ff-mono); font-size:11.5px; cursor:pointer; text-decoration:underline}

  /* one section = one card, opened on its own */
  .caf-lsec{border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden; background:var(--card)}
  .caf-lsec.open{border-color:var(--brand)}
  .caf-lsec-h{width:100%; display:flex; align-items:center; gap:12px; padding:13px 16px; background:none;
    border:none; cursor:pointer; font-family:inherit; text-align:left; color:var(--ink)}
  .caf-lsec-h:hover{background:var(--field)}
  .caf-lsec-n{width:26px; height:26px; border-radius:8px; background:var(--brand); color:var(--card);
    display:grid; place-items:center; font-family:var(--ff-mono); font-size:12.5px; font-weight:600; flex:0 0 auto}
  .caf-lsec-h h4{flex:1; font-family:var(--ff-disp); font-size:16.5px; font-weight:600; color:var(--ink); margin:0; line-height:1.25}
  .caf-lsec-meta{font-family:var(--ff-mono); font-size:10.5px; color:var(--mut); white-space:nowrap}
  .caf-lsec-caret{font-size:10px; color:var(--mut)}

  /* one rule = term + rule + Vietnamese gloss, each looking like what it is */
  .caf-rules{list-style:none; margin:0; padding:0 16px 14px}
  .caf-rule{display:block; padding:11px 0 11px 14px; border-left:2.5px solid var(--line); margin-bottom:2px}
  .caf-rule:hover{border-left-color:var(--gold)}
  .caf-term{display:inline-block; font-family:var(--ff-mono); font-size:12px; font-weight:600; letter-spacing:.02em;
    color:var(--brand); background:var(--gold-soft); border-radius:5px; padding:2px 8px; margin-bottom:5px}
  .caf-body{display:block; font-size:14.5px; line-height:1.62; color:var(--ink)}
  /* italic + colour only: a padded background pushed the following comma away and made
     lists of examples read as though they were mis-punctuated */
  .caf-body i{font-style:italic; color:var(--brand); font-weight:500}
  body[data-theme="dark"] .caf-body i, body[data-theme="contrast"] .caf-body i{color:var(--gold)}
  .caf-body u{text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:2px}
  .caf-vi{display:block; margin-top:6px; font-size:13px; line-height:1.55; color:var(--mut)}
  .caf-vi-l{display:inline-block; font-family:var(--ff-mono); font-size:9px; letter-spacing:.1em; color:var(--mut);
    border:1px solid var(--line); border-radius:3px; padding:0 4px; margin-right:7px; vertical-align:1px}
  @media(max-width:560px){ .caf-rules{padding:0 12px 12px} .caf-body{font-size:14px} }
  .caf-handouts{display:flex; gap:10px; flex-wrap:wrap}
  /* 24 Aug 2026 · one row per review paper on the Ascent home. Wraps to two lines on a
     phone instead of squeezing the buttons under 44px, which is the tap-target floor
     the rest of the chrome layer keeps. */
  .asc-rev-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;
    padding:12px 0; border-top:1px solid var(--line)}
  .asc-rev-row:first-of-type{border-top:0}
  .asc-rev-row .btn.xs{min-height:44px}
  @media(max-width:560px){ .asc-rev-row .caf-handouts{width:100%} }
  .caf-gcard .gc-ic{color:var(--navy)}
  @media(max-width:560px){ .caf-card{gap:12px; padding:14px} .caf-n{width:38px; height:38px; font-size:17px} .caf-right{flex-direction:row; align-items:center} }
  /* ---- printable handout: styled as a real chuyên exam paper ----
     Layout follows the Đồng Nai chuyên Tiếng Anh paper: a candidate block, a centred
     title with time/items/marks, then numbered PART headings each carrying their own
     question range and mark value, an italic exam instruction line, and an answer grid.
     Deliberately NOT labelled "student paper" / "teacher paper"the two versions are
     distinguished by what they contain (đề vs đề + đáp án), never by who holds them. */
  /* ---- offline handout viewer (PDF-style HTML served on demand, printed in-browser) ---- */
  .asc-blk{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:10px 0; max-width:920px}
  .asc-blk h4{margin:0 0 8px; font-size:15px; color:var(--navy)}
  .asc-blk h4 em{font-style:italic; font-weight:400; opacity:.7; font-size:13px}
  .asc-vi{display:block; font-style:italic; opacity:.72; font-size:12.5px; margin-top:2px; line-height:1.45}
  .asc-lead{font-size:13.5px; margin-bottom:8px}
  .asc-note{margin-top:8px; background:var(--tint); border-radius:8px; padding:8px 11px; font-size:13px}
  .asc-eg{margin-top:3px; font-size:13px}
  .asc-steps{margin:8px 0 0 18px; padding:0; font-size:13.5px}
  .asc-steps li{margin:5px 0}
  .asc-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .asc-t2{width:100%; border-collapse:collapse; font-size:13.5px}
  .asc-t2 td{border-top:1px solid var(--line); padding:6px 8px; vertical-align:top}
  .asc-t2 td.k{width:34%; font-weight:600; color:var(--navy)}
  .asc-conj,.asc-contrast,.asc-vocab{width:100%; border-collapse:collapse; font-size:13px; min-width:520px}
  .asc-conj th,.asc-contrast th,.asc-vocab th{background:var(--tint); text-align:left; padding:6px 8px;
    font-size:11px; letter-spacing:.05em; text-transform:uppercase; opacity:.75; white-space:nowrap}
  .asc-conj td,.asc-contrast td,.asc-vocab td{border-top:1px solid var(--line); padding:6px 8px; vertical-align:top}
  .asc-conj td.f{font-weight:600; color:var(--navy); white-space:nowrap}
  .asc-conj td.f .asc-form{display:block; font-family:var(--ff-mono,ui-monospace),monospace;
    font-size:11.5px; font-weight:500; color:var(--ink-2,#5A6480); white-space:normal; margin:2px 0 1px}
  .asc-conj th em{font-style:italic; font-weight:400; opacity:.75}
  /* a spoken option is COVERED, not removed: the row keeps its height so the four options
     do not jump under the student's cursor at the moment they are revealed */
  .gm-spoken{visibility:hidden}
  .gm-spoken-note{font-size:13px; color:var(--ink-2,#5A6480); background:var(--tint,#F6F8FC);
    border-radius:8px; padding:7px 11px; margin:2px 0 8px; line-height:1.5}
  .gm-spoken-note em{display:block; font-size:12px; opacity:.8; margin-top:2px}
  .gm-rev-script{font-size:13px; margin-top:8px; padding:7px 11px; border-radius:8px;
    background:var(--tint,#F6F8FC); color:var(--ink,#12203D)}
  .gm-rev-script b{color:var(--accent,#3A5BBC); margin-right:6px; letter-spacing:.04em;
    font-size:11px; text-transform:uppercase}
  .gm-spoken-note.exam{background:#FDF3F3; color:#7A2E2E}
  .lc-exam{display:flex; align-items:center; gap:10px; margin:6px 0 2px; flex-wrap:wrap}
  .lc-exam button.spent{opacity:.45; cursor:default}
  .lc-exam-st{font-size:12px; color:var(--mut,#6B7590)}
  .gm-sectab.locked{opacity:.45; cursor:not-allowed}
  .gm-mode{font-size:11px; letter-spacing:.08em; padding:2px 7px; border-radius:999px;
    background:var(--tint,#F6F8FC); color:var(--mut,#6B7590); vertical-align:middle}
  .gm-mode.exam{background:#7A2E2E; color:#fff}
  .asc-gate{background:var(--tint,#F6F8FC); border-left:3px solid var(--gold,#C89B3C);
    border-radius:8px; padding:11px 14px; margin:2px 0 12px; font-size:14px; line-height:1.55}
  .asc-gate em{display:block; font-size:12.5px; opacity:.8; margin-top:3px}
  .practice-card.asc-locked{filter:grayscale(.35)}
  .asc-conj tr.nopass td:last-child{color:#b04a4a; font-style:italic}
  .asc-contrast td.bad{color:#b04a4a}
  .asc-contrast td.good{color:var(--ok)}
  .asc-vocab td.w{font-weight:600}
  .asc-vocab td.i{font-family:var(--ff-mono); font-size:12px; opacity:.85; white-space:nowrap}
  #hl-handout-host{display:none}
  body.hl-handout-open{overflow:hidden}
  body.hl-handout-open #hl-handout-host{display:flex; flex-direction:column; position:fixed; inset:0; z-index:9999; background:#e9edf3}
  .hlho-bar{flex:0 0 auto; display:flex; gap:10px; justify-content:center; align-items:center; padding:10px; background:var(--card); border-bottom:1.5px solid var(--line)}
  .hlho-frame{flex:1 1 auto; width:100%; border:0; background:#fff}
  .hlho-load{flex:1 1 auto; display:flex; align-items:center; justify-content:center; color:var(--mut); font-family:var(--ff-mono); font-size:14px}
  #caf-print-host{display:none}
  #caf-print-host, #caf-print-host *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  body.caf-printing{overflow:hidden}
  body.caf-printing #caf-print-host{display:block; position:fixed; inset:0; z-index:9999; background:#e9edf3; overflow:auto; padding:24px 0 96px}
  /* The document is a stack of real A4 pages, not a reflowing column. Page padding
     lives INSIDE the page and @page margin is 0, so the printed output matches the
     preview exactly. */
  .ph-doc{width:210mm; margin:0 auto; background:transparent; box-shadow:none; padding:0}
  .ph-page{position:relative; width:210mm; height:297mm; padding:15mm; background:#fff; color:#12203D;
    margin:0 auto 18px; box-shadow:0 8px 30px rgba(0,0,0,.18); overflow:hidden; border-radius:2px}
  .ph-area{position:relative; z-index:1}
  .ph-stamp{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.07;
    background-repeat:repeat; background-position:center}
  .ph-copy{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.68px; color:#9AA3B8}

  .ph-pfoot{position:absolute; left:15mm; right:15mm; bottom:8mm; z-index:1;
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    font-family:'Public Sans',system-ui,sans-serif; font-size:12.41px; letter-spacing:.04em; color:#8891A8;
    border-top:1px solid #E2E7F0; padding-top:5px}
  .ph-bar{position:fixed; bottom:0; left:0; right:0; background:var(--paper); border-top:1.5px solid var(--line);
    display:flex; gap:12px; justify-content:center; align-items:center; padding:12px; z-index:2}
  .ph-bar-note{font-family:var(--ff-mono); font-size:16.79px; color:var(--mut)}
  .ph-for{display:inline-flex; align-items:center; gap:7px; font-size:18.25px; color:var(--mut)}
  .ph-for label{font-family:var(--ff-mono); font-size:15.33px; letter-spacing:.1em; text-transform:uppercase}
  .ph-for input{border:1.5px solid var(--line); border-radius:8px; padding:6px 10px; font-size:18.98px;
    background:var(--field); color:var(--ink); min-width:170px}
  .ph-for input:focus{outline:2px solid var(--brand); border-color:var(--brand)}
  @media(max-width:640px){ .ph-for{display:none} }
  .ph-body{font-family:'HL Serif','Tinos','Liberation Serif','Times New Roman',serif; color:#12203D; line-height:1.5}
  .ph-credit{font-family:'Public Sans',system-ui,sans-serif; font-size:12.41px; font-style:italic;
    color:#6B7590; text-align:right; margin-top:6px}
  /* The two ends of the locate-me pair. The passage end is bolded by hlMarkQuoted; the
     QUESTION end is the author's own <u>, which renderStem's allow-list lets through:
     both are stated here so the pair can never print at different weights. */
  #caf-print-host .ph-passage b.q-focus{font-weight:700; color:inherit}
  #caf-print-host .ph-qs u, #caf-print-host .ph-q u{font-weight:700; text-decoration:none}

  /* Watermark: the full wordmark flattened to one navy ink. Baked into a page-proportioned
     tile that repeats down the document, so a 3-page handout gets a watermark on EVERY
     page: a single absolutely-positioned mark would only appear on one of them. */
  /* z-index 2, not 0: at 0 the mark sits UNDER `.ph-area` (z-index 1) and every block with
     a background fill paints over it. Measured on the gs12 papers, which had the identical
     rule: zero watermark pixels inside any content box, two pages with no visible mark at
     all. The Gifted handout is generated by cafPrint() from this same furniture, so it had
     the same defect. Overlaying is the fix that no future block can undo.
     opacity .055 -> .07: .055 rasterises to roughly 251/255, which a laser rounds to paper.
.07 lands near 10% ink: visible on the desk, quiet under the text. */
  .ph-wm{position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.07;
    background-image:url("data:image/svg+xml,%3Csvg%20width=%22820%22%20height=%221100%22%20viewBox=%220%200%20820%201100%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%20%20%3Cg%20transform=%22translate(410,550)%20rotate(-16)%20scale(1.009)%20translate(-162.5,-129.5)%22%20fill=%22%2324345C%22%3E%0A%20%20%20%20%3Cpath%20d=%22M16.65%2035.1L16.65%2097.25L25.7%2098.65L25.7%20100L3.85%20100L3.85%2098.65L12.85%2097.25L12.85%2035.1L3.85%2033.75L3.85%2032.4L25.7%2032.4L25.7%2033.7L16.65%2035.1M62.2%2035.1L62.2%2097.25L71.2%2098.65L71.2%20100L49.35%20100L49.35%2098.65L58.35%2097.25L58.35%2035.1L49.35%2033.75L49.35%2032.4L71.2%2032.4L71.2%2033.7L62.2%2035.1M61.25%2066.45L13.75%2066.45L13.75%2063.95L61.25%2063.95%20M99.75%2098.95Q104.7%2098.95%20108.6%2096.73Q112.5%2094.5%20114.78%2089.98Q117.05%2085.45%20117.05%2078.65Q117.05%2072.1%20114.9%2067.22Q112.75%2062.35%20108.83%2059.68Q104.9%2057%2099.55%2057Q94.65%2057%2090.73%2059.25Q86.8%2061.5%2084.53%2066Q82.25%2070.5%2082.25%2077.35Q82.25%2083.85%2084.4%2088.73Q86.55%2093.6%2090.5%2096.28Q94.45%2098.95%2099.75%2098.95M99.6%20101Q93.4%20101%2088.55%2098.25Q83.7%2095.5%2080.93%2090.4Q78.15%2085.3%2078.15%2078.35Q78.15%2071.05%2080.9%2065.83Q83.65%2060.6%2088.53%2057.78Q93.4%2054.95%2099.7%2054.95Q105.95%2054.95%20110.78%2057.7Q115.6%2060.45%20118.38%2065.53Q121.15%2070.6%20121.15%2077.6Q121.15%2084.9%20118.4%2090.15Q115.65%2095.4%20110.8%2098.2Q105.95%20101%2099.6%20101%20M153.25%2055.25Q154.85%2055.25%20155.5%2056Q156.15%2056.75%20156.15%2058.05Q156.15%2059.35%20155.4%2060.23Q154.65%2061.1%20153.35%2061.1Q152.5%2061.1%20151.75%2060.95Q151%2060.8%20150.15%2060.68Q149.3%2060.55%20148.1%2060.55Q146.9%2060.55%20145.4%2060.93Q143.9%2061.3%20142.13%2062.23Q140.35%2063.15%20138.15%2064.75L137.3%2063.9Q141.15%2061%20143.78%2059.25Q146.4%2057.5%20148.18%2056.65Q149.95%2055.8%20151.13%2055.53Q152.3%2055.25%20153.25%2055.25M138.5%2054.95L138.55%2063.15L138.55%2097.4L147.3%2098.65L147.3%20100L127.3%20100L127.3%2098.65L135%2097.4L135%2060.25Q134.35%2060.1%20133.1%2059.88Q131.85%2059.65%20130.18%2059.33Q128.5%2059%20126.65%2058.7L126.65%2057.5L138%2054.95%20M168.5%2036.7Q166.6%2036.7%20165.45%2035.53Q164.3%2034.35%20164.3%2032.5Q164.3%2030.75%20165.45%2029.63Q166.6%2028.5%20168.5%2028.5Q170.45%2028.5%20171.55%2029.63Q172.65%2030.75%20172.65%2032.5Q172.65%2034.35%20171.55%2035.53Q170.45%2036.7%20168.5%2036.7M170.95%2054.95L171.45%2054.95L170.95%2059.8L170.95%2097.4L178.65%2098.65L178.65%20100L159.7%20100L159.7%2098.65L167.4%2097.4L167.4%2060.25Q166.85%2060.15%20165.45%2059.88Q164.05%2059.6%20162.32%2059.28Q160.6%2058.95%20159.05%2058.7L159.05%2057.5%20M216%20100L183.25%20100L183.25%2098.95L213.15%2057.55L214.75%2058.1L187.85%2058.1L191.1%2057.3L185.4%2069.65L184%2069.65L185.95%2054.95L186.85%2054.95L190.35%2055.95L217.35%2055.95L217.35%2057L187.4%2098.55L185.9%2097.85L212.65%2097.85L210.9%2098.45L217.8%2086L219.35%2086%20M246.25%2098.95Q251.2%2098.95%20255.1%2096.73Q259%2094.5%20261.27%2089.98Q263.55%2085.45%20263.55%2078.65Q263.55%2072.1%20261.4%2067.22Q259.25%2062.35%20255.33%2059.68Q251.4%2057%20246.05%2057Q241.15%2057%20237.23%2059.25Q233.3%2061.5%20231.03%2066Q228.75%2070.5%20228.75%2077.35Q228.75%2083.85%20230.9%2088.73Q233.05%2093.6%20237%2096.28Q240.95%2098.95%20246.25%2098.95M246.1%20101Q239.9%20101%20235.05%2098.25Q230.2%2095.5%20227.43%2090.4Q224.65%2085.3%20224.65%2078.35Q224.65%2071.05%20227.4%2065.83Q230.15%2060.6%20235.03%2057.78Q239.9%2054.95%20246.2%2054.95Q252.45%2054.95%20257.27%2057.7Q262.1%2060.45%20264.88%2065.53Q267.65%2070.6%20267.65%2077.6Q267.65%2084.9%20264.9%2090.15Q262.15%2095.4%20257.3%2098.2Q252.45%20101%20246.1%20101%20M285%2054.95L285.05%2063.15L285.05%2097.4L292.8%2098.65L292.8%20100L273.8%20100L273.8%2098.65L281.5%2097.4L281.5%2060.25Q280.7%2060.1%20278.63%2059.73Q276.55%2059.35%20273.15%2058.7L273.15%2057.5L284.5%2054.95L285%2054.95M304.8%20100L304.8%2098.65L312.55%2097.4L312.55%2071.85Q312.55%2066.65%20311.48%2063.75Q310.4%2060.85%20307.8%2059.68Q305.2%2058.5%20300.6%2058.5Q297.5%2058.5%20293.48%2059.75Q289.45%2061%20284.75%2064.6L283.6%2063.95Q287.15%2061%20289.83%2059.2Q292.5%2057.4%20294.68%2056.5Q296.85%2055.6%20298.8%2055.28Q300.75%2054.95%20302.75%2054.95Q310.05%2054.95%20313.08%2058.45Q316.1%2061.95%20316.1%2069.65L316.1%2097.4L323.8%2098.65L323.8%20100%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M64.3%20178.75L59.3%20206.1L56.35%20206.1L49.7%20202L19.25%20202L19.3%20194.85L52.65%20194.85L47.8%20197.65L60.4%20178.15L64.3%20178.75M35.15%20137.25L27.6%20140.1L27.6%20202L3.65%20202L3.65%20199.15L11.2%20196.3L11.2%20140.1L3.65%20137.25L3.65%20134.4L35.15%20134.4%20M80.45%20146.4Q76.4%20146.4%2074.03%20144.1Q71.65%20141.8%2071.65%20138.25Q71.65%20134.7%2074.03%20132.45Q76.4%20130.2%2080.45%20130.2Q84.5%20130.2%2086.85%20132.45Q89.2%20134.7%2089.2%20138.25Q89.2%20141.8%2086.85%20144.1Q84.5%20146.4%2080.45%20146.4M85.9%20156L88.7%20156L88%20167.3L88%20196.9L94.25%20199.4L94.25%20202L67.1%20202L67.1%20199.4L73.3%20196.9L73.3%20168.25Q72.65%20167.35%2071.58%20166.48Q70.5%20165.6%2069.2%20164.78Q67.9%20163.95%2066.5%20163.25L66.5%20160.9%20M115.4%20156L118.4%20166.4L118.4%20197.25L123.6%20199.4L123.6%20202L97.5%20202L97.5%20199.4L103.7%20196.9L103.7%20169Q102.6%20167.55%20101.03%20166.43Q99.45%20165.3%2096.9%20164.1L96.9%20161.85L113.45%20156L115.4%20156M128.8%20202L128.8%20199.4L134.05%20197.25L134.05%20173.4Q134.05%20171.15%20133.25%20169.7Q132.45%20168.25%20130.8%20167.53Q129.15%20166.8%20126.6%20166.8Q123.7%20166.8%20121.15%20167.6Q118.6%20168.4%20116.95%20169.65L115.1%20167.2Q118.65%20163.6%20121.35%20161.4Q124.05%20159.2%20126.25%20158.03Q128.45%20156.85%20130.57%20156.43Q132.7%20156%20135%20156Q142%20156%20145.35%20160.05Q148.7%20164.1%20148.7%20172.4L148.7%20196.9L155.05%20199.4L155.05%20202%20M179%20227.95Q173.05%20227.95%20168.7%20227.2Q164.35%20226.45%20161.6%20225Q158.85%20223.55%20157.53%20221.58Q156.2%20219.6%20156.2%20217.2Q156.2%20215.3%20157.07%20213.68Q157.95%20212.05%20160.18%20210.7Q162.4%20209.35%20166.33%20208.23Q170.25%20207.1%20176.35%20206.15L180.9%20206.15L180.95%20207.15Q175.55%20207.85%20172.68%20209Q169.8%20210.15%20168.78%20211.7Q167.75%20213.25%20167.75%20215.2Q167.75%20217.5%20169.2%20219.18Q170.65%20220.85%20173.65%20221.75Q176.65%20222.65%20181.35%20222.65Q186.05%20222.65%20189.33%20221.65Q192.6%20220.65%20194.33%20218.95Q196.05%20217.25%20196.05%20215.2Q196.05%20213.7%20195.25%20212.65Q194.45%20211.6%20192.48%20210.85Q190.5%20210.1%20186.88%20209.6Q183.25%20209.1%20177.55%20208.75Q171.9%20208.35%20168.3%20207.33Q164.7%20206.3%20162.78%20204.75Q160.85%20203.2%20160.13%20201.25Q159.4%20199.3%20159.45%20197.15Q159.55%20192.75%20163.05%20190.03Q166.55%20187.3%20173.4%20186.45L175.05%20188.25Q172.05%20188.55%20170.88%20189.5Q169.7%20190.45%20169.7%20192Q169.7%20193.1%20170.25%20193.85Q170.8%20194.6%20172.38%20195.15Q173.95%20195.7%20177.05%20196.03Q180.15%20196.35%20185.3%20196.6Q190.9%20196.9%20194.93%20197.75Q198.95%20198.6%20201.5%20200.2Q204.05%20201.8%20205.3%20204.23Q206.55%20206.65%20206.55%20210.05Q206.55%20215.15%20203.38%20219.2Q200.2%20223.25%20194.05%20225.6Q187.9%20227.95%20179%20227.95M179.2%20189.15Q172.65%20189.15%20168%20187.08Q163.35%20185%20160.88%20181.25Q158.4%20177.5%20158.4%20172.6Q158.4%20167.45%20161.03%20163.73Q163.65%20160%20168.38%20158Q173.1%20156%20179.25%20156Q184.45%20156%20188.33%20157.43Q192.2%20158.85%20194.8%20161.25Q197.4%20163.65%20198.73%20166.58Q200.05%20169.5%20200.05%20172.55Q200.05%20177.65%20197.4%20181.4Q194.75%20185.15%20190.08%20187.15Q185.4%20189.15%20179.2%20189.15M179.6%20183.95Q182.5%20183.95%20184.18%20181.53Q185.85%20179.1%20185.85%20173.5Q185.85%20166.9%20183.98%20164Q182.1%20161.1%20178.9%20161.1Q176%20161.1%20174.3%20163.5Q172.6%20165.9%20172.6%20171.55Q172.6%20178.15%20174.5%20181.05Q176.4%20183.95%20179.6%20183.95M186.35%20160.2L185.25%20156.8Q189.25%20157.25%20192.35%20157.18Q195.45%20157.1%20197.83%20156.78Q200.2%20156.45%20202.08%20156.13Q203.95%20155.8%20205.5%20155.8Q207.15%20155.8%20208%20156.75Q208.85%20157.7%20208.85%20159.9Q208.85%20162.95%20207.55%20164.33Q206.25%20165.7%20204.6%20165.7Q203.05%20165.7%20201.6%20164.7Q200.15%20163.7%20198.25%20162.48Q196.35%20161.25%20193.53%20160.5Q190.7%20159.75%20186.35%20160.2%20M229.25%20163.45L229.25%20186.4Q229.25%20188.65%20229.93%20189.98Q230.6%20191.3%20232.1%20191.9Q233.6%20192.5%20236.1%20192.5Q238.7%20192.5%20241.08%20191.8Q243.45%20191.1%20245%20189.9L246.8%20192.55Q243.4%20196%20240.85%20198.15Q238.3%20200.3%20236.18%20201.4Q234.05%20202.5%20232.08%20202.9Q230.1%20203.3%20227.85%20203.3Q221.1%20203.3%20217.83%20199.38Q214.55%20195.45%20214.55%20187.6L214.55%20164.4L207.95%20161L207.95%20158.05L229.95%20156.5L229.25%20163.45M246.65%20203L244.85%20203L243.15%20192.8L243.15%20163.85L238.15%20160.85L238.15%20157.95L258.55%20156.55L257.85%20163.8L257.85%20192.6Q258.4%20193.15%20259.18%20193.75Q259.95%20194.35%20260.88%20194.93Q261.8%20195.5%20262.77%20195.98Q263.75%20196.45%20264.7%20196.8L264.7%20199.05%20M292.45%20197.2Q295.2%20197.2%20297.2%20195.7Q299.2%20194.2%20300.27%20190.8Q301.35%20187.4%20301.35%20181.65Q301.35%20175.15%20300.3%20170.83Q299.25%20166.5%20297.2%20164.3Q295.15%20162.1%20292.05%20162.1Q289.35%20162.1%20287.33%20163.6Q285.3%20165.1%20284.2%20168.5Q283.1%20171.9%20283.1%20177.65Q283.1%20184.15%20284.15%20188.5Q285.2%20192.85%20287.3%20195.03Q289.4%20197.2%20292.45%20197.2M291.8%20203.3Q284.35%20203.3%20278.98%20200.43Q273.6%20197.55%20270.73%20192.35Q267.85%20187.15%20267.85%20180.25Q267.85%20173.05%20270.98%20167.6Q274.1%20162.15%20279.68%20159.07Q285.25%20156%20292.7%20156Q300.15%20156%20305.52%20158.88Q310.9%20161.75%20313.77%20166.93Q316.65%20172.1%20316.65%20179.05Q316.65%20186.2%20313.52%20191.7Q310.4%20197.2%20304.8%20200.25Q299.2%20203.3%20291.8%20203.3%22/%3E%0A%20%20%20%20%3Crect%20x=%220%22%20y=%22227%22%20width=%22210%22%20height=%225.91%22%20rx=%222.95%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
    background-repeat:no-repeat; background-position:center center; background-size:100% auto}
  .ph-page{position:relative; z-index:1}

  /* header: brand left, candidate block right */
  .ph-head{display:flex; justify-content:space-between; align-items:flex-end; gap:22px; border-bottom:2px solid #12203D; padding-bottom:11px}
  .ph-brand{color:#24345C; line-height:0}
  .ph-brand svg{height:44px; width:auto; display:block}
  .ph-brandwrap{min-width:0}
  .ph-by{font-family:'Public Sans',system-ui,sans-serif; font-size:13.87px; color:#3B4763; margin-top:6px; letter-spacing:.01em}
  .ph-class{font-family:'Public Sans',system-ui,sans-serif; font-size:13.14px; color:#6B7590; margin-top:2px}
  .ph-imprint{margin-top:10px; border-top:1px solid #DCE2ED; padding-top:6px;
    font-family:'Public Sans',system-ui,sans-serif; font-size:12.41px; color:#6B7590; line-height:1.6;
    display:flex; align-items:flex-start; gap:12px; justify-content:space-between}
  .ph-imprint-txt{flex:1 1 auto; min-width:0}
  .ph-imprint b{color:#24345C}
  .ph-imprint span{display:block; font-style:italic; color:#8891A8}
  .ph-qr{flex:0 0 auto; text-align:center; line-height:1}
  .ph-qr .ph-qr-svg{width:52px; height:52px; display:block}
  .ph-qr-cap{display:block; font-family:'Public Sans',system-ui,sans-serif; font-size:10.22px;
    font-style:normal; color:#8891A8; margin-top:2px; letter-spacing:.2px}
  .ph-cand{font-family:'Public Sans',system-ui,sans-serif; font-size:16.06px; color:#3B4763; text-align:right; line-height:2}
  .ph-score{display:inline-block; border:1.5px solid #12203D; border-radius:4px; padding:2px 12px; margin-left:6px; font-weight:600; min-width:58px; text-align:center}

  /* centred title block */
  .ph-title{text-align:center; margin:16px 0 4px}
  .ph-title .ph-kicker{font-family:'Public Sans',system-ui,sans-serif; font-size:13.87px; letter-spacing:.24em; text-transform:uppercase; color:#6B7590; margin-bottom:3px}
  .ph-title h1{font-family:'HL Serif','Tinos','Liberation Serif',Georgia,serif; font-size:27.74px; font-weight:600; letter-spacing:.01em; line-height:1.25}
  .ph-title .ph-sub{font-family:'Public Sans',system-ui,sans-serif; font-size:15.33px; color:#4F5A75; margin-top:4px}
  .ph-rule{height:1px; background:#12203D; opacity:.35; margin:12px 0 0}

  /* theory / lesson block */
  .ph-lesson{margin-top:16px}
  .ph-sec{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid #B9C2D6; padding-bottom:3px; margin:16px 0 8px}
  .ph-sec b{font-family:'Public Sans',system-ui,sans-serif; font-size:16.06px; letter-spacing:.1em; text-transform:uppercase; color:#12203D}
  .ph-sec i{font-family:'Public Sans',system-ui,sans-serif; font-size:13.87px; font-style:normal; color:#5A6480; white-space:nowrap}
  /* Printed theory follows the same signalling as the screen: the term sits in its own
     column so the page can be scanned down the left edge, and the Vietnamese gloss is
     set smaller so it supports the rule instead of competing with it. */
  .ph-lsec{margin-bottom:11px; page-break-inside:avoid}
  .ph-lsec h3{font-family:'Public Sans',system-ui,sans-serif; font-size:15.33px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:#24345C; margin:0 0 5px; border-bottom:1px solid #DCE2ED; padding-bottom:2px}
  .ph-lsec ul{margin:0; padding:0; list-style:none}
  .ph-lrule{display:flex; gap:9px; align-items:baseline; font-size:16.35px; line-height:1.5;
    margin-bottom:5px; page-break-inside:avoid}
  .ph-lrule-t{flex:0 0 118px; font-family:'Public Sans',system-ui,sans-serif; font-weight:700; font-size:15.04px;
    color:#24345C; line-height:1.42}
  .ph-lrule-t.none{flex-basis:0}
  .ph-lrule-b{flex:1}
  .ph-lrule-b i{font-style:italic; color:#2A3A62}
  .ph-lrule-b u{text-decoration-thickness:1.2px; text-underline-offset:1.5px}
  .ph-vi{display:block; font-size:14.60px; color:#5A6480; margin-top:1px; line-height:1.42}
  .ph-vi:before{content:"VN "; font-family:'Public Sans',system-ui,sans-serif; font-size:10.95px; letter-spacing:.1em;
    border:1px solid #C6CEDE; border-radius:2px; padding:0 3px; margin-right:5px; color:#7C86A0}

  /* structured grammar block: term | [ structure ] + theory + worked example + VN gloss */
  .caf-grow{display:flex; gap:11px; align-items:baseline; margin-bottom:9px; page-break-inside:avoid}
  .caf-gt{flex:0 0 140px; font-weight:700; color:#24345C; line-height:1.4}
  .caf-gbody{flex:1; min-width:0}
  .caf-gf{display:inline-block; background:#F1F5FB; border:1px solid #D3DCEA; border-radius:4px;
    padding:1px 9px; color:#1B2A4A; font-weight:600; margin-bottom:3px}
  .caf-gb{margin:2px 0; line-height:1.5}
  .caf-geg{color:#33415F; line-height:1.5}
  .caf-geg b{color:#0F6B39; font-style:normal; margin-right:4px}
  /* The colours above are the PRINTED ink (fixed, on white paper). The same block is now
     also rendered on screen inside the lesson list, where it has to follow the theme:
     otherwise dark mode shows navy-on-navy. Screen-scoped override, print untouched. */
  .caf-rules .caf-grow{margin-bottom:0; font-size:14.5px}
  .caf-rules .caf-gt{flex:0 0 130px; color:var(--navy); font-family:var(--ff-mono); font-size:12.5px;
    letter-spacing:.01em; text-transform:none}
  .caf-rules .caf-gf{background:var(--tint); border-color:var(--line); color:var(--ink); font-size:13px}
  .caf-rules .caf-gb{color:var(--ink); font-size:14.5px; line-height:1.62}
  .caf-rules .caf-geg{color:var(--mut); font-size:14px}
  .caf-rules .caf-geg b{color:var(--ok)}
  @media(max-width:560px){
    .caf-rules .caf-grow{display:block}
    .caf-rules .caf-gt{display:block; margin-bottom:4px}
  }

  /* exam instruction line */
  .ph-instr{font-style:italic; font-size:16.06px; color:#2B3856; margin-bottom:8px; line-height:1.5}

  /* questions */
  .ph-block{page-break-inside:avoid; break-inside:avoid}
  .ph-q{margin-bottom:9px}
  .ph-lsec-h{font-family:'Public Sans',system-ui,sans-serif; font-size:15.33px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:#24345C; margin:9px 0 5px; border-bottom:1px solid #DCE2ED; padding-bottom:2px}
  .ph-parts{font-family:'Public Sans',system-ui,sans-serif; font-size:13.14px; color:#5A6480; margin-top:5px}
  .ph-gridnote{font-family:'Public Sans',system-ui,sans-serif; font-size:12.41px; color:#7C86A0; margin-top:4px}
  .ph-qs{font-size:17.23px; line-height:1.62}
  .ph-qn{font-weight:700; margin-right:2px}
  .ph-opts{display:flex; flex-wrap:wrap; gap:2px 20px; padding-left:17px; font-size:16.35px; margin-top:1px}
  .ph-opt{white-space:nowrap; min-width:20%}
  .ph-correct{font-weight:700; color:#0F6B39; text-decoration:underline; text-underline-offset:2px}
  .ph-cue{display:inline-block; font-family:'Public Sans',system-ui,sans-serif; font-size:13.87px; letter-spacing:.1em;
    border:1px solid #9AA6BF; border-radius:3px; padding:1px 6px; margin-left:6px; vertical-align:middle; color:#24345C}
  .ph-lead{font-size:16.79px; margin:2px 0 0 17px; font-style:italic; color:#33415F}
  .ph-write{margin:3px 0 0 17px; border-bottom:1px dotted #6E7A96; min-height:15px; font-size:16.79px}
  .ph-alt{color:#4F5A75; font-style:italic; font-weight:400; text-decoration:none}
  .ph-passage{border:1px solid #C6CEDE; border-radius:5px; padding:11px 14px; margin:10px 0 12px; background:#FAFBFD; page-break-inside:avoid}
  .ph-passage-h{font-family:'Public Sans',system-ui,sans-serif; font-size:14.60px; letter-spacing:.09em; text-transform:uppercase;
    font-weight:700; color:#24345C; margin-bottom:6px; border-bottom:1px solid #DCE2ED; padding-bottom:3px}
  .ph-passage-h i{float:right; font-style:normal; font-weight:400; color:#5A6480; text-transform:none; letter-spacing:0}
  .ph-passage p{font-size:16.50px; line-height:1.62; margin-bottom:6px; text-align:justify}
  .ph-passage p:last-child{margin-bottom:0}
  .ph-ans{font-size:15.77px; color:#0F6B39; padding-left:17px; margin-top:2px; line-height:1.45}

  /* answer grid — the sheet students actually fill in */
  .ph-grid{margin-top:14px; page-break-inside:avoid}
  .ph-grid table{border-collapse:collapse; width:100%; font-family:'Public Sans',system-ui,sans-serif}
  .ph-grid td{border:1px solid #9AA6BF; text-align:center; font-size:13.87px; padding:0; height:19px}
  .ph-grid td.n{background:#EDF1F7; font-weight:700; color:#3B4763; width:2.4%}
  .ph-grid td.a{color:#0F6B39; font-weight:700}

  .ph-foot{margin-top:20px; border-top:1px solid #C6CEDE; padding-top:7px; font-size:13.87px; color:#7C86A0; text-align:center; font-family:'Public Sans',system-ui,sans-serif; letter-spacing:.04em}

  /* --- current layout: one HL Serif family + one 16.5px type scale (5 Aug), matching the
     ascent/found + gs9/gs12 handouts. Scoped to .ph-body (the handout root) and placed LAST in
     the block so it wins over the scaled patchwork above without unpicking every value. --- */
  .ph-body, .ph-body *{font-family:'HL Serif','Tinos','Liberation Serif','Times New Roman',serif !important}
  .ph-body{font-size:16.5px; line-height:1.45}
  .ph-body .ph-qs, .ph-body .ph-q, .ph-body .ph-lrule, .ph-body .ph-instr,
  .ph-body .ph-passage p, .ph-body .ph-lead, .ph-body .ph-write,
  .ph-body .ph-opts, .ph-body .ph-opts span, .ph-body .ph-opt{font-size:16.5px}
  .ph-body .ph-qs, .ph-body .ph-q, .ph-body .ph-lrule, .ph-body .ph-passage p{line-height:1.45}
  .ph-body .ph-sec b{font-size:15px}
  .ph-body .ph-lsec h3, .ph-body .ph-lsec-h, .ph-body .ph-lrule-t{font-size:15px}
  .ph-body .ph-vi, .ph-body .ph-ans, .ph-body .ph-foot{font-size:13.5px}
  .ph-body .ph-sec i, .ph-body .ph-parts, .ph-body .ph-gridnote, .ph-body .ph-cue,
  .ph-body .ph-passage-h, .ph-body .ph-grid td{font-size:13px}
  .ph-body .ph-title h1{font-size:24px}
  .ph-body .ph-title .ph-sub, .ph-body .ph-title .ph-kicker{font-size:14px}
  /* masthead furniture onto the scale too (was 13.87 / 16.06) */
  .ph-body .ph-by{font-size:13.5px}
  .ph-body .ph-cand, .ph-body .ph-score{font-size:14.5px}
  /* structured grammar block onto the one scale */
  .ph-body .caf-gt, .ph-body .caf-gf{font-size:15px}
  .ph-body .caf-gb, .ph-body .caf-geg{font-size:16.5px}
  /* a serif separates on its own — drop the caps tracking that split the headers */
  .ph-body .ph-sec b, .ph-body .ph-lsec h3, .ph-body .ph-lsec-h, .ph-body .ph-passage-h,
  .ph-body .ph-lrule-t, .ph-body .ph-parts{letter-spacing:0 !important}

  @media print{
    @page{size:A4; margin:0}
    body.caf-printing *{visibility:hidden}
    body.caf-printing #caf-print-host, body.caf-printing #caf-print-host *{visibility:visible}
    body.caf-printing #caf-print-host{position:absolute; inset:auto; top:0; left:0; background:#fff; padding:0; overflow:visible}
    .ph-doc{width:auto; margin:0}
    .ph-page{margin:0; box-shadow:none; border-radius:0; page-break-after:always; break-after:page}
    .ph-page:last-child{page-break-after:auto; break-after:auto}
    .ph-bar{display:none}
  }
  .gcard:hover{border-color:var(--red); transform:translateY(-3px)}
  .gcard .gc-ic{width:42px; height:42px; border-radius:10px; background:var(--hl-soft); border:1.5px solid #EAD87A; display:flex; align-items:center; justify-content:center}
  .gcard .gc-ic svg{width:22px; height:22px; stroke:var(--navy)}
  .gcard.has-err .gc-ic{background:var(--red-soft); border-color:var(--red)}
  .gcard.has-err .gc-ic svg{stroke:var(--red)}
  .gcard h3{font-family:var(--ff-disp); font-size:21px; font-weight:600}
  .gcard p{color:var(--mut); font-size:13.5px; line-height:1.45}
  .gcard .gc-go{margin-top:auto; padding-top:8px; font-family:var(--ff-mono); font-size:12px; color:var(--red); font-weight:600}
  .gift-plan{margin:36px 0 70px; border-top:1.5px solid var(--ink); padding-top:20px}
  .gift-plan h2{font-family:var(--ff-disp); font-size:22px; font-weight:600; margin-bottom:14px}
  .plan-rows{display:flex; flex-direction:column; gap:12px}
  .plan-row{display:flex; gap:16px; align-items:flex-start; background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:16px 18px}
  .plan-row .pr-ph{font-family:var(--ff-mono); font-size:12px; font-weight:700; color:var(--btn-fg); background:var(--navy); border-radius:8px; padding:6px 10px; white-space:nowrap}
  .plan-row b{font-size:16px}
  .plan-row p{color:var(--mut); font-size:13.5px; margin-top:3px; line-height:1.45}

  /* drills */
  .gd-bar{height:7px; background:var(--line); border-radius:99px; margin:14px 0 8px; overflow:hidden}
  .gd-fill{height:100%; background:var(--red); border-radius:99px; transition:width .3s}
  .gd-head{display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:12.5px; color:var(--mut); margin-bottom:12px}
  .gd-card{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:26px 24px}
  .gd-stem{font-size:19px; line-height:1.5; margin-bottom:18px}
  .push-card{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--card); border:1.5px solid var(--navy); border-radius:14px; padding:12px 16px; margin:0 0 12px}
  .push-card .pc-ic{font-size:22px} .push-card .pc-txt{flex:1 1 260px; display:flex; flex-direction:column; gap:2px} .push-card .pc-txt span{font-size:13.5px; color:var(--mut); line-height:1.45}
  .gd-pic{display:block;width:min(220px,60vw);aspect-ratio:1/1;object-fit:contain;margin:0 auto 14px;border-radius:16px;background:#fff}
/* ---- v9.21 · the update popup ---- */
.newspop-back{position:fixed; inset:0; background:rgba(12,14,20,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:9000; padding:18px}
.newspop{background:var(--card,#fff); color:var(--ink,#14171f); border-radius:18px; max-width:520px; width:100%;
  padding:24px 24px 20px; box-shadow:0 24px 60px rgba(0,0,0,.35); border:1px solid var(--line,#e6e8ef)}
.newspop h3{margin:10px 0 6px; font-size:23px; line-height:1.25}
.npx-tag{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--acc,#b8891f); font-weight:700}
.npx-body p{margin:.45em 0; font-size:15.5px; line-height:1.55; color:var(--mut,#565d6e)}
.npx-btns{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.tn-addr{border:1px solid var(--line,#e6e8ef); border-radius:12px; padding:12px 14px; margin:10px 0; display:grid; gap:10px}
.tn-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tn-lb{font-size:13px; font-weight:700; min-width:130px; color:var(--mut,#565d6e)}
.tn-chips{display:flex; gap:8px; flex-wrap:wrap}
.tn-chip{font-size:13px; display:inline-flex; gap:5px; align-items:center; border:1px solid var(--line,#e6e8ef);
  border-radius:999px; padding:4px 10px}
.tn-pop{font-size:13.5px; display:flex; gap:7px; align-items:center}
  .ipa-say{display:inline-flex; align-items:center; gap:7px; margin:-6px 0 18px; border:1.5px solid var(--navy); background:var(--field); color:var(--navy); border-radius:999px; padding:8px 16px; font-size:14.5px; font-weight:600; cursor:pointer; transition:transform .05s}
  .ipa-say:hover{background:var(--navy); color:var(--btn-fg)}
  .ipa-say:active{transform:scale(.96)}
  .ipa-say .ipa-say-n{font-family:var(--ff-mono); font-size:11px; background:var(--navy); color:var(--btn-fg); border-radius:999px; padding:1px 7px}
  .ipa-say:hover .ipa-say-n{background:var(--btn-fg); color:var(--navy)}
  body[data-theme="dark"] .ipa-say, body[data-theme="contrast"] .ipa-say{border-color:var(--ac, #FFE873); color:var(--ac, #FFE873)}
  body[data-theme="dark"] .ipa-say:hover, body[data-theme="contrast"] .ipa-say:hover{background:var(--ac, #FFE873); color:#111}
  body[data-theme="dark"] .ipa-say .ipa-say-n, body[data-theme="contrast"] .ipa-say .ipa-say-n{background:var(--ac, #FFE873); color:#111}
  /* v9.22 — the speed toggle sits with the speaker, never on its own line */
  .ipa-say-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-6px 0 18px}
  .ipa-say-row .ipa-say{margin:0}
  .ipa-rate{flex:none; border:1.5px solid var(--navy); background:transparent; color:var(--navy); border-radius:999px; padding:8px 13px; font-family:var(--ff-mono); font-size:13px; font-weight:700; cursor:pointer; transition:transform .05s}
  .ipa-rate.slow{background:var(--navy); color:var(--btn-fg)}
  .ipa-rate:active{transform:scale(.96)}
  body[data-theme="dark"] .ipa-rate, body[data-theme="contrast"] .ipa-rate{border-color:var(--ac, #FFE873); color:var(--ac, #FFE873)}
  body[data-theme="dark"] .ipa-rate.slow, body[data-theme="contrast"] .ipa-rate.slow{background:var(--ac, #FFE873); color:#111}
  .gd-stem u{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px}
  .gd-opts{display:flex; flex-direction:column; gap:10px}
  .gd-opt{display:flex; gap:12px; align-items:flex-start; text-align:left; border:1.5px solid var(--line); background:var(--field); border-radius:11px; padding:13px 15px; cursor:pointer; font-size:15.5px; color:var(--ink); transition:border-color .12s}
  .gd-opt:not(:disabled):hover{border-color:var(--navy)}
  .gd-opt b{font-family:var(--ff-mono); color:var(--navy); flex-shrink:0}
  .gd-opt.picked{border-color:var(--navy); background:var(--hl-soft)}
  .gd-opt.correct{border-color:var(--ok); background:var(--ok-soft)}
  .gd-opt.correct b{color:var(--ok)}
  .gd-opt.wrong{border-color:var(--bad); background:var(--bad-soft)}
  .gd-opt.wrong b{color:var(--bad)}
  /* v9.30 — one speaker PER WORD (Hai: "a play button for separate words, not one for
     all like the existing one"). The speaker cannot live INSIDE the option button: a
     <button> inside a <button> is invalid and the browser hoists it out of the row. So
     an audible option is a flex ROW holding the option and its own speaker as siblings. */
  .gd-optrow{display:flex; gap:8px; align-items:stretch}
  .gd-optrow > .gd-opt{flex:1 1 auto; min-width:0}
  .gd-say{flex:0 0 auto; width:48px; display:inline-flex; align-items:center; justify-content:center;
    border:1.5px solid var(--line); background:var(--field); border-radius:11px; font-size:17px;
    cursor:pointer; color:var(--navy); transition:border-color .12s, background .12s}
  .gd-say:hover{border-color:var(--navy); background:var(--hl-soft)}
  .gd-say:active{transform:scale(.95)}
  body[data-theme="dark"] .gd-say, body[data-theme="contrast"] .gd-say{color:var(--ac, #FFE873)}
  .ipa-say.chip{font-size:13.5px; padding:7px 13px; max-width:min(100%, 340px);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block}
  .ipa-say.all{border-style:dashed; font-weight:500}
  .ipa-say-note{flex-basis:100%; font-size:12.5px; color:var(--mut); margin:2px 0 0}
  /* When the stem names no word the bar is just the speed pill, and a pill on its own
     line above a sentence reads as a stray control. Inline it: the sentence is what
     explains the pill. */
  .ipa-say-note.inline{flex-basis:auto; margin:0; align-self:center}
  /* v9.31 — the theory panel. Same <details class="fnd-theory"> the Foundations topic page
     uses, so a student meets one pattern and not two; everything below only fills it in. */
  /* ---------- the interactive sound chart ---------- */
  .ipa-chart{background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:16px 16px 14px; margin:0 0 18px}
  .ipa-chart-tabs{display:flex; gap:8px; margin:0 0 16px}
  .ipa-chart-tabs button{flex:1; border:1.5px solid var(--line); background:var(--field);
    color:var(--mut); border-radius:11px; padding:9px 10px; font:600 14px/1.25 var(--ff);
    cursor:pointer; transition:.15s}
  .ipa-chart-tabs button em{display:block; font:400 11.5px/1.3 var(--ff-mono); font-style:normal; opacity:.75}
  .ipa-chart-tabs button:hover{border-color:var(--navy); color:var(--ink)}
  .ipa-chart-tabs button.on{background:var(--navy); border-color:var(--navy); color:var(--btn-fg)}

  .ipa-grid-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px 4px}
  .ipa-grid{display:grid; grid-template-columns:74px repeat(8, minmax(58px, 1fr)); gap:3px; min-width:600px}
  .ipa-g-cell{display:flex; align-items:center; justify-content:center; gap:3px; min-height:42px;
    border-radius:8px; background:var(--field)}
  .ipa-g-cell.empty{background:transparent}
  .ipa-g-corner{background:transparent}
  .ipa-g-place, .ipa-g-manner{flex-direction:column; gap:0; background:transparent; min-height:0;
    padding:3px 2px; text-align:center; line-height:1.2}
  .ipa-g-place span, .ipa-g-manner span{font:600 11px/1.25 var(--ff); color:var(--ink)}
  .ipa-g-place em, .ipa-g-manner em{font:400 9.5px/1.25 var(--ff); font-style:normal; color:var(--mut)}
  .ipa-g-manner{align-items:flex-end; text-align:right; padding-right:6px; cursor:help}

  /* A tile. Voice off is an outline, voice on is filled — the pair in one cell is one mouth
     position with the voice switched off and then on, and the fill says which is which. */
  .ipa-tile{min-width:34px; height:34px; padding:0 7px; border-radius:9px; cursor:pointer;
    font:600 16px/1 var(--ff-ipa, var(--ff-mono)); border:1.5px solid var(--navy);
    background:var(--card); color:var(--navy); transition:transform .09s, box-shadow .15s, background .15s;
    display:inline-flex; align-items:center; justify-content:center}
  .ipa-tile.voiced{background:var(--navy); color:var(--btn-fg)}
  .ipa-tile:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(36,52,92,.22)}
  .ipa-tile:active{transform:translateY(0) scale(.94)}
  .ipa-tile:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
  .ipa-tile.on{box-shadow:0 0 0 3px var(--gold); transform:translateY(-2px)}
  /* GREYED, never highlighted. The theory's own sentence calls this a greyed row, and the
     two surfaces have to agree: a highlight says "look at this", grey says "your first
     language never made you produce this". */
  .ipa-tile.hard{border-style:dashed; opacity:.82}
  .ipa-tile.hard.voiced{background:var(--navy); border-color:var(--mut)}
  .ipa-tile.hard:not(.voiced){border-color:var(--mut); color:var(--mut)}
  .ipa-tile.wide{min-width:52px}

  .ipa-chart-legend{display:flex; align-items:center; gap:7px; flex-wrap:wrap;
    font-size:11.5px; color:var(--mut); margin:11px 0 0}
  .ipa-chart-legend .lg{width:15px; height:15px; border-radius:5px; border:1.5px solid var(--navy);
    display:inline-block; margin-left:8px}
  .ipa-chart-legend .lg:first-child{margin-left:0}
  .ipa-chart-legend .lg.voiced{background:var(--navy)}
  .ipa-chart-legend .lg.hard{border-style:dashed; border-color:var(--mut)}
  .ipa-chart-legend .lg-note{flex-basis:100%; margin-top:3px}

  /* ---------- the vowel trapezoid ---------- */
  .ipa-trap-wrap{background:var(--field); border-radius:12px; padding:8px 6px;
    max-width:600px; margin:0 auto}
  .ipa-trap{width:100%; height:auto; display:block}
  .ipa-trap-box{fill:none; stroke:var(--line); stroke-width:2}
  .ipa-ax{font:400 10px var(--ff-mono); fill:var(--mut)}
  .ipa-ax.end{text-anchor:end}
  .ipa-v{cursor:pointer}
  .ipa-v circle{fill:var(--card); stroke:var(--navy); stroke-width:1.5; transition:.15s}
  .ipa-v text{font:600 14px var(--ff-ipa, var(--ff-mono)); fill:var(--navy); pointer-events:none}
  .ipa-v.round circle{stroke-dasharray:0; stroke-width:3}      /* rounded lips = a thicker ring */
  .ipa-v.hard circle{stroke:var(--mut); stroke-dasharray:3 2.5}
  .ipa-v.hard text{fill:var(--mut)}
  .ipa-v:hover circle{fill:var(--navy)}
  .ipa-v:hover text{fill:var(--btn-fg)}
  .ipa-v.on circle{fill:var(--navy); stroke:var(--gold); stroke-width:3.5}
  .ipa-v.on text{fill:var(--btn-fg)}
  .ipa-v:focus{outline:none}
  .ipa-v:focus-visible circle{stroke:var(--gold); stroke-width:3.5}
  .ipa-glide line{stroke:var(--gold); stroke-width:3.5; stroke-linecap:round}
  .ipa-glide circle{fill:var(--gold)}
  .ipa-glide path, #ipa-arrow path{fill:var(--gold)}
  .ipa-glide{animation:ipaGlideIn .35s ease-out}
  @keyframes ipaGlideIn{from{opacity:0} to{opacity:1}}
  @media (prefers-reduced-motion: reduce){
    .ipa-glide{animation:none}
    .ipa-tile{transition:none}
    .ipa-tile:hover{transform:none}
  }
  .ipa-diph-head{font:600 13px/1.4 var(--ff); color:var(--ink); margin:14px 0 7px}
  .ipa-diph-head em{font:400 12px var(--ff); font-style:normal; color:var(--mut)}
  .ipa-diph{display:flex; gap:6px; flex-wrap:wrap}

  /* ---------- the panel ---------- */
  .ipa-panel{margin-top:14px; border:1.5px solid var(--navy); border-radius:13px;
    padding:14px 15px; background:var(--field); min-height:118px}
  .ipa-panel.empty{border-style:dashed; border-color:var(--line); display:flex;
    flex-direction:column; justify-content:center; gap:4px}
  .ipa-panel.empty b{font-size:14px; color:var(--ink)}
  .ipa-panel.empty span{font-size:12.5px; color:var(--mut); line-height:1.6}
  .ipa-panel-top{display:flex; align-items:center; gap:13px; margin-bottom:10px}
  .ipa-panel-sym{font:700 30px/1 var(--ff-ipa, var(--ff-mono)); color:var(--btn-fg);
    background:var(--navy); border:none; border-radius:11px; padding:11px 15px; cursor:pointer;
    transition:transform .09s}
  .ipa-panel-sym:hover{transform:scale(1.05)}
  .ipa-panel-sym:active{transform:scale(.95)}
  .ipa-panel-lab b{display:block; font-size:14.5px; color:var(--ink)}
  .ipa-panel-lab em{font:400 12.5px var(--ff); font-style:normal; color:var(--mut)}
  .ipa-panel-warn{background:var(--hl-soft); border-radius:9px; padding:8px 11px;
    font-size:12.5px; line-height:1.55; color:var(--ink); margin-bottom:10px}
  .ipa-panel-words{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px}
  .ipa-panel-words .ipa-say.chip{margin:0}
  .ipa-panel-words .ipa-say.chip b{font-weight:800; text-decoration:underline; text-underline-offset:2px}
  .ipa-panel-how{font-size:13px; line-height:1.65; color:var(--ink); margin:0}
  .ipa-panel-also{font-size:12px; line-height:1.6; color:var(--mut); margin:7px 0 0}
  .ipa-chart-foot{font-size:11.5px; line-height:1.6; color:var(--mut); margin:12px 0 0}

  body[data-theme="dark"] .ipa-tile, body[data-theme="contrast"] .ipa-tile{border-color:var(--navy)}
  body[data-theme="dark"] .ipa-tile.on, body[data-theme="contrast"] .ipa-tile.on{box-shadow:0 0 0 3px var(--hl)}
  body[data-theme="dark"] .ipa-v.on circle, body[data-theme="contrast"] .ipa-v.on circle{stroke:var(--hl)}
  body[data-theme="dark"] .ipa-glide line, body[data-theme="contrast"] .ipa-glide line{stroke:var(--hl)}
  body[data-theme="dark"] .ipa-glide circle, body[data-theme="contrast"] .ipa-glide circle{fill:var(--hl)}
  body[data-theme="dark"] #ipa-arrow path, body[data-theme="contrast"] #ipa-arrow path{fill:var(--hl)}
  body[data-theme="dark"] .ipa-tile:focus-visible, body[data-theme="contrast"] .ipa-tile:focus-visible{outline-color:var(--hl)}

  @media (max-width:560px){
    .ipa-chart{padding:13px 11px 12px}
    .ipa-grid{grid-template-columns:64px repeat(8, minmax(52px, 1fr)); min-width:540px}
    .ipa-panel-sym{font-size:25px; padding:9px 12px}
  }

  .ipa-skew{border:1.5px solid var(--gold); background:var(--field); border-radius:12px;
    padding:13px 16px; font-size:13.5px; line-height:1.6; color:var(--ink); margin:0 0 18px}
  .ipa-skew-vi{display:block; font-size:12.5px; color:var(--mut); margin-top:4px}
  .ipa-buoi{margin:0 0 14px}
  .ipa-buoi .ipa-th{margin:0 0 8px}
  .ipa-print{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .ipa-print-note{font-size:12.5px; color:var(--mut)}
  .fl-locked.ipa-teacher-open{border-style:solid; border-color:var(--gold)}
  .fl-locked.ipa-teacher-open em{font-style:normal; color:var(--mut)}
  .ipa-th{margin:0 0 12px}
  .ipa-th > summary{cursor:pointer; font-weight:700; color:var(--navy); line-height:1.5}
  .ipa-th-sum{font-weight:400; color:var(--mut); font-size:13.5px}
  .ipa-th-body{margin-top:12px}
  .ipa-th-aim{font-size:14.5px; margin:0 0 14px; color:var(--ink)}
  .ipa-th-h{font-family:var(--ff-disp); font-size:17px; font-weight:600; color:var(--navy); margin:18px 0 8px}
  .ipa-th-h em{font-style:normal; font-weight:400; color:var(--mut); font-size:14px}
  .ipa-th-lead{font-size:13.5px; color:var(--mut); margin:0 0 8px}
  .ipa-th-vi{display:block; font-size:12.5px; color:var(--mut); line-height:1.45; margin-top:2px}
  .ipa-th-eg{margin-top:3px}
  .ipa-th-t{width:100%; border-collapse:collapse; font-size:14px; margin:0 0 6px}
  .ipa-th-t th{text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--mut); border-bottom:1.5px solid var(--line); padding:5px 8px 5px 0; font-weight:600}
  .ipa-th-t th i{font-style:normal; text-transform:none; letter-spacing:0; font-weight:400}
  .ipa-th-t td{vertical-align:top; padding:7px 8px 7px 0; border-bottom:1px solid var(--line)}
  .ipa-th-t td.k, .ipa-th-t td.f{font-weight:600; color:var(--navy); width:26%}
  .ipa-th-t code{font-family:var(--ff-mono); font-size:12.5px; background:var(--hl-soft);
    border-radius:5px; padding:1px 6px; margin-left:6px}
  .ipa-th-steps{margin:8px 0 4px; padding-left:20px; font-size:14px}
  .ipa-th-steps li{margin-bottom:7px}
  /* A sound Vietnamese does not have. The theory's own lead sentence calls this a GREYED
     row, so it is greyed. The first version tinted it with --hl-soft, which is the
     highlight colour, and a highlighted row says "look at this" where a greyed one says
     "your first language never made you produce this". Same treatment on paper, because
     the sentence that describes it is the same sentence. */
  .ipa-th-chart tr.hard td{color:var(--mut)}
  .ipa-th-chart tr.hard td.f{color:var(--mut)}
  .ipa-th-contrast td.bad{color:var(--bad)}
  .ipa-th-contrast td.good{color:var(--ok)}
  .ipa-th-note{font-size:13.5px; color:var(--mut); border-left:2.5px solid var(--gold);
    padding:2px 0 2px 11px; margin:6px 0 14px}
  body[data-theme="dark"] .ipa-th > summary, body[data-theme="contrast"] .ipa-th > summary{color:var(--ac, #FFE873)}
  body[data-theme="dark"] .ipa-th-h, body[data-theme="contrast"] .ipa-th-h{color:var(--ac, #FFE873)}
  .gd-exp{margin-top:16px; border-radius:11px; padding:13px 15px; font-size:14px; line-height:1.5}
  .gd-exp.ok{background:var(--ok-soft); color:var(--ink); border:1px solid var(--ok)}
  .gd-exp.no{background:var(--red-soft); color:var(--ink); border:1px solid var(--bad)}
  .gd-actions{display:flex; gap:10px; align-items:center; margin-top:18px; flex-wrap:wrap}

  /* error log */
  .err-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
  .err-group{margin-bottom:22px}
  .eg-head{font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); border-bottom:1.5px solid var(--line); padding-bottom:6px; margin-bottom:10px; display:flex; justify-content:space-between}
  .eg-head span{color:var(--red); font-weight:700}
  .err-item{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px}
  /* THE TEXT A QUESTION IS ABOUT, wherever a saved question is shown again. Collapsed by
     default so a 400-word Part 7 letter does not bury twenty log entries, open on a tap. */
  .ei-pas, .gd-pas{border:1px solid var(--line); border-radius:10px; background:var(--field);
    margin:0 0 10px; font-size:14px; line-height:1.55}
  .ei-pas>summary, .gd-pas>summary{cursor:pointer; list-style:none; padding:8px 12px;
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--mut)}
  .ei-pas>summary::-webkit-details-marker, .gd-pas>summary::-webkit-details-marker{display:none}
  .ei-pas>summary::before, .gd-pas>summary::before{content:"\25B8 "; display:inline-block; margin-right:6px}
  .ei-pas[open]>summary::before, .gd-pas[open]>summary::before{content:"\25BE "}
  .ei-pas .ei-pas-b, .gd-pas .gd-pas-b{padding:0 12px 11px; color:var(--ink)}
  .gd-pas{font-size:15px; margin-bottom:14px}
  .ei-stem{font-size:15px; line-height:1.5}
  .ei-stem u{text-decoration:underline; text-decoration-thickness:2px}
  .ei-meta{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-top:8px}
  .ei-meta b{color:var(--ok)}
  .ei-exp{font-size:13.5px; color:var(--mut); margin-top:6px; line-height:1.45; border-left:2px solid var(--line); padding-left:10px}

  /* mock: shared passage/option boxes */
  .g-optbox{background:var(--field); border:1.5px solid var(--line); border-radius:10px; padding:14px 16px; margin:10px 0; line-height:1.7; font-size:15px}
  .g-para-opts p{margin:0 0 10px; line-height:1.55; font-size:14.5px}
  .g-para-opts p:last-child{margin-bottom:0}
  .g-dialogue{margin:12px 0}
  .g-dialogue p{margin:4px 0; line-height:1.6}
  .g-ptitle{font-family:var(--ff-disp); font-size:21px; font-weight:600; margin:2px 0 12px; text-align:center}
  .gm-passage p{margin:0 0 12px; line-height:1.72; font-size:15.5px}
  .gm-passage i{color:var(--mut)}
  .g-gap{background:var(--hl-soft); border:1px dashed #EAD87A; border-radius:8px; text-align:center; font-family:var(--ff-mono); font-weight:700; color:var(--navy); padding:8px; margin:12px 0}
  .g-notes ul{margin:8px 0 0; padding-left:20px; line-height:1.9}
  .g-notes li{margin-bottom:2px}
  .g-tasknote{background:var(--field); border-left:3px solid var(--navy); padding:10px 14px; border-radius:6px; font-size:14.5px; margin:6px 0}
  .g-prompt{background:var(--field); border:1.5px solid var(--line); border-radius:10px; padding:16px 18px; line-height:1.6}
  .g-prompt i{color:var(--mut)}

  /* mock: exam room */
  .gm-testbar .in{gap:12px}
  .gm-testbar .title{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .gm-testbar .tb-chips{flex:none}
  .gm-count{font-family:var(--ff-mono); font-size:13px; color:var(--mut); font-weight:600}
  .gm-secbar{position:sticky; top:0; z-index:30; background:var(--card); border-bottom:1.5px solid var(--line)}
  .gm-sectabs{display:flex; gap:6px; padding:8px 0; overflow-x:auto; scrollbar-width:none; align-items:center}
  .gm-sectabs::-webkit-scrollbar{display:none}
  .gm-sectab{border:1.5px solid var(--line); background:var(--field); color:var(--mut); border-radius:9px; padding:7px 13px; font-size:13px; white-space:nowrap; cursor:pointer}
  .gm-sectab b{font-family:var(--ff-mono); color:var(--navy); margin-right:4px}
  .gm-sectab.on{border-color:var(--red); background:var(--red-soft); color:var(--ink)}
  .gm-navtoggle{margin-left:auto; border:1.5px solid var(--line); background:var(--field); color:var(--ink); border-radius:9px; padding:7px 13px; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer}
  .gm-navmap{background:var(--card); border-bottom:1.5px solid var(--line); padding:14px 0}
  .gm-cells{display:flex; flex-wrap:wrap; gap:6px}
  .gm-cell{position:relative; width:38px; height:34px; border:1.5px solid var(--line); background:var(--field); border-radius:7px; font-family:var(--ff-mono); font-size:12.5px; color:var(--mut); cursor:pointer}
  .gm-cell.done{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
  .gm-cell.flag{border-color:var(--red)}
  .gm-cell i{position:absolute; top:-4px; right:-3px; color:var(--red); font-size:10px; font-style:normal}
  .gm-navlegend{display:flex; gap:16px; margin-top:10px; font-family:var(--ff-mono); font-size:11.5px; color:var(--mut)}
  .gm-navlegend i.lg{display:inline-block; width:12px; height:12px; border-radius:3px; border:1.5px solid var(--line); background:var(--field); vertical-align:-2px; margin-right:4px}
  .gm-navlegend i.lg.done{background:var(--ok-soft); border-color:var(--ok)}
  .gm-navlegend i.lg.flag{border-color:var(--red)}
  .gm-stage{padding:22px 0 90px}
  .gm-block{margin-bottom:30px}
  .gm-bhead{font-family:var(--ff-disp); font-size:20px; font-weight:600; border-bottom:1.5px solid var(--ink); padding-bottom:6px; margin-bottom:6px}
  .gm-binstr{color:var(--mut); font-size:14px; line-height:1.5; margin-bottom:12px}
  .gm-passage{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:16px}
  .gm-intro{margin-bottom:14px}
  .gm-q{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px dashed var(--line)}
  .gm-q:first-of-type{border-top:none}
  .gm-q.flagged{background:var(--red-soft); border-radius:8px; padding-left:8px; padding-right:8px}
  .gm-flag{flex-shrink:0; width:34px; height:34px; border:1.5px solid var(--line); background:var(--field); border-radius:8px; font-family:var(--ff-mono); font-size:13px; font-weight:600; color:var(--navy); cursor:pointer}
  .gm-flag.on{border-color:var(--red); background:var(--red); color:#fff}
  /* 10.94 · Not sure flag */
  .unsure-btn{display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding:4px 11px; border:1.5px dashed var(--line); border-radius:999px; background:transparent; color:var(--mut); font:600 12.5px var(--ff-body); cursor:pointer}
  .unsure-btn:hover{border-color:#C98A00; color:#8A5A00}
  .unsure-btn.on{border-style:solid; border-color:#C98A00; background:#FFF3C4; color:#7A4E00}
  .still-btn{margin-top:8px; padding:5px 12px; border:1.5px solid var(--line); border-radius:999px; background:var(--field); color:var(--ink); font:600 12.5px var(--ff-body); cursor:pointer}
  .still-btn.on{border-color:#C98A00; background:#FFF3C4; color:#7A4E00}
  .unsure-tag{display:inline-block; padding:1px 8px; border-radius:999px; background:#FFF3C4; color:#7A4E00; font:600 11.5px var(--ff-body); margin-left:6px}
  body[data-theme="dark"] .unsure-btn.on, body[data-theme="dark"] .still-btn.on, body[data-theme="dark"] .unsure-tag{background:#5a4300; color:#ffe7a3}
  .gm-qbody{flex:1; min-width:0}
  .gm-stem{font-size:15.5px; line-height:1.55; margin-bottom:10px}
  .gm-stem u{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px}
  .gm-mcq{display:flex; flex-direction:column; gap:7px}
  .gm-mcq .mcq-opt{display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--line); background:var(--field); border-radius:9px; padding:10px 12px; cursor:pointer; font-size:14.5px}
  .gm-mcq .mcq-opt.on{border-color:var(--red); background:var(--red-soft)}
  .gm-mcq .mcq-opt b{font-family:var(--ff-mono); color:var(--navy); flex-shrink:0}
  .gm-mcq .mcq-opt input{position:absolute; opacity:0; pointer-events:none}
  .gm-tfng{display:flex; gap:16px; flex-wrap:wrap}
  .gm-tfng label{display:flex; gap:6px; align-items:center; font-size:14px; cursor:pointer}
  .gm-gap{width:min(320px,100%)}
  .gm-gapw{width:min(580px,100%)}
  /* listening block inside a mock: the device voice reads an original transcript aloud */
  .gm-narr{border:1.5px solid var(--line); border-radius:12px; background:var(--field); padding:12px 14px; margin:0 0 16px}
  .gm-nrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
  .gm-nleft{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-left:auto}
  .gm-nbar{height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin:11px 0 8px}
  .gm-nbar i{display:block; height:100%; width:0; background:var(--navy); transition:width .3s}
  .gm-nstat{font-size:13px; color:var(--mut); line-height:1.5}
  .gm-transcript{margin-top:20px; border-top:1.5px dashed var(--line); padding-top:12px; font-size:14.5px; line-height:1.75}
  .gm-transcript p{margin:7px 0}
  .gm-tl{font-weight:800; color:var(--navy)}
  @media(max-width:430px){ .gm-nleft{margin-left:0} .gm-narr{padding:11px 12px} }
  .gm-essay{width:100%; min-height:220px; border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--field); color:var(--ink); font-family:var(--ff-body); font-size:15.5px; line-height:1.6; resize:vertical}
  .gm-essay:focus{outline:2px solid var(--navy); outline-offset:1px}
  .gm-wc{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-top:8px}
  .gm-task{margin-top:16px; border-top:1.5px dashed var(--line); padding-top:14px}
  .gm-thead{font-family:var(--ff-disp); font-size:17px; font-weight:600; margin-bottom:4px}
  .gm-secnav{display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:12px}
  .gm-submitrow{text-align:center; margin-top:14px}
  .gm-jump{outline:2px solid var(--red); outline-offset:3px; border-radius:8px; transition:outline .2s}
  /* CBT one-screen-at-a-time navigator */
  .gm-cell.cur{border-color:var(--navy); box-shadow:0 0 0 2px var(--navy) inset}
  .gm-cbtstage{padding-top:16px; padding-bottom:120px; min-height:calc(100vh - 220px)}
  .gm-cbtinfo{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
  .gm-cbtinfo .gm-part{font-weight:700; color:var(--ink)}
  .gm-progline{height:4px; border-radius:3px; background:var(--line); overflow:hidden; margin:8px 0 18px}
  .gm-progline i{display:block; height:100%; background:var(--red); border-radius:3px; transition:width .2s}
  .gm-single{max-width:780px; margin:0 auto}
  .gm-single .gm-q{border-top:none; padding-top:4px}
  .gm-single .gm-stem{font-size:16.5px}
  .gm-cbtnav{position:sticky; bottom:0; z-index:25; background:var(--paper); border-top:1.5px solid var(--line); box-shadow:0 -4px 16px rgba(0,0,0,.05)}
  .gm-cbtnav-in{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0}
  .gm-cbtnav .btn.primary{min-width:150px}
  @media (max-width:560px){ .gm-cbtnav .gm-mapbtn{display:none} .gm-cbtnav .btn.primary{min-width:120px} .gm-cbtstage{padding-bottom:110px} }
  /* resume-an-interrupted-mock strip */
  .resume-strip{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--navy); color:#fff; border-radius:14px; padding:14px 18px; margin:14px 0}
  .resume-strip .rs-tx{display:flex; flex-direction:column; gap:2px}
  .resume-strip .rs-tx b{font-size:15px} .resume-strip .rs-tx span{font-family:var(--ff-mono); font-size:12.5px; opacity:.85}
  .resume-strip .rs-btns{display:flex; gap:8px}
  .resume-strip .btn.ghost{color:#fff; border-color:rgba(255,255,255,.4); background:transparent}
  /* the floating "Continue where you left off" bar (auto-save/resume for any activity) */
  #hl-resume-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:var(--hl-foot-0,18px); z-index:60;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between;
    background:var(--navy); color:#fff; border-radius:14px; padding:11px 16px;
    box-shadow:0 10px 34px rgba(0,0,0,.28); max-width:min(620px,92vw); width:max-content;
    font-family:var(--ff-sans)}
  #hl-resume-bar .rb-tx{font-size:14px} #hl-resume-bar .rb-tx b{color:var(--gold)}
  #hl-resume-bar .rb-bt{display:flex; gap:8px}
  #hl-resume-bar .btn.ghost{color:#fff; border-color:rgba(255,255,255,.4); background:transparent}
  @media(max-width:560px){ #hl-resume-bar{left:8px; right:8px; transform:none; width:auto; max-width:none} }
  /* focus mode: bigger text, fewer distractions */
  .gm-focusbtn.on{background:var(--navy); color:#fff; border-color:var(--navy)}
  .gm-focus .gm-secbar{display:none}
  .gm-focus .gm-single{max-width:900px}
  .gm-focus .gm-stem{font-size:19px; line-height:1.6}
  .gm-focus .gm-mcq .mcq-opt{font-size:17px; padding:14px 16px}
  .gm-focus .gm-passage{font-size:17px}
  .gm-focus .gm-passage p{line-height:1.85}
  .gm-focus .gm-bhead{font-size:22px}
  .gm-focus .gm-cbtinfo{font-size:13px}
  /* read-only review of a submitted paper */
  .gm-mcq.rev .mcq-opt{cursor:default}
  .gm-mcq.rev .mcq-opt.correct{border-color:var(--ok); background:var(--ok-soft)}
  .gm-mcq.rev .mcq-opt.wrong{border-color:var(--red); background:var(--bad-soft)}
  .gm-tfng.rev label.correct{color:var(--ok); font-weight:700}
  .gm-tfng.rev label.wrong{color:var(--red); text-decoration:line-through}
  .gm-flag.rok{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
  .gm-flag.rno{background:var(--bad-soft); border-color:var(--red); color:var(--red)}
  .gm-rev-exp{margin-top:8px; font-size:13.5px; color:var(--mut); background:var(--field); border-left:3px solid var(--navy); border-radius:6px; padding:8px 12px; line-height:1.55}
  .gm-rev-gap{font-size:14.5px; margin-top:4px}
  .gm-rev-gap .ok{color:var(--ok)} .gm-rev-gap .no{color:var(--red)}
  .gm-rev-essay{white-space:pre-wrap; line-height:1.7; font-size:15px; background:var(--field); border:1.5px solid var(--line); border-radius:10px; padding:14px 16px}
  /* mock: split reading layout — passage beside its questions */
  .gm-block.has-passage .gm-splitrow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; align-items:start}
  .gm-bpassage{position:sticky; top:104px; max-height:calc(100vh - 124px); overflow:auto; align-self:start}
  .gm-bpassage .gm-passage{margin-bottom:0}
  .gm-bq{min-width:0}
  .gm-hltip{display:flex; align-items:center; gap:6px; font-family:var(--ff-mono); font-size:11px; color:var(--mut); margin:0 2px 8px; user-select:none}
  .gm-hltip b{color:var(--red)}
  mark.hlmark{border-radius:2px; padding:0 1px}
  @media (max-width:860px){
    .gm-block.has-passage .gm-splitrow{grid-template-columns:1fr; gap:12px}
    .gm-bpassage{position:sticky; top:100px; max-height:44vh; z-index:6; background:var(--card); border:1.5px solid var(--line); border-radius:12px; box-shadow:0 8px 16px rgba(0,0,0,.08)}
    .gm-bpassage .gm-passage{border:none; border-radius:12px}
  }

  /* mock result + review */
  .gr-secs{margin:18px 0 6px; text-align:left; max-width:520px; margin-left:auto; margin-right:auto}
  .gr-secrow{display:flex; align-items:center; gap:12px; margin-bottom:9px}
  .gr-secrow .gr-lb{flex:1 1 190px; font-size:13.5px}
  .gr-secrow .gr-bar{flex:2 1 120px; height:9px; background:var(--line); border-radius:99px; overflow:hidden}
  .gr-secrow .gr-bar span{display:block; height:100%; background:var(--ok); border-radius:99px}
  .gr-secrow .gr-num{font-family:var(--ff-mono); font-size:13px; color:var(--mut); flex-shrink:0}
  .gr-essay{text-align:left; margin-top:18px; border-top:1.5px dashed var(--line); padding-top:14px; font-size:14px}
  .gr-essaytext{margin-top:8px; line-height:1.6}
  .gr-essaytext p{margin:0 0 8px}
  .grv-sec{margin-top:22px}
  .grv-sec h3{font-family:var(--ff-disp); font-size:19px; font-weight:600; border-bottom:1.5px solid var(--ink); padding-bottom:5px; margin-bottom:8px}
  .rev-row.correct{opacity:.85}
  .rev-prompt{font-size:14.5px; line-height:1.5}
  .rev-ans{font-size:13.5px; margin-top:4px}
  .rev-ans .ra-lb{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut); margin-right:5px}
  .rev-ans b.ok{color:var(--ok)}
  .rev-ans b.no{color:var(--bad)}
  .rev-exp{font-size:13px; color:var(--mut); margin-top:5px; line-height:1.45; border-left:2px solid var(--line); padding-left:10px}
  .ft-banner{background:var(--hl-soft); border:1px solid #EAD87A; border-radius:12px; padding:14px 18px; font-size:14px; line-height:1.5; margin-bottom:18px; max-width:720px}
  body[data-theme="dark"] .ft-banner, body[data-theme="contrast"] .ft-banner{color:var(--ink)}

  /* ---------- access control ---------- */
  .acc-err{background:var(--red-soft); border:1px solid var(--red); color:var(--ink); border-radius:9px; padding:10px 13px; font-size:13.5px; margin:-6px 0 12px; text-align:left}
  .acc-tools{display:flex; flex-direction:column; gap:9px; background:var(--card); border:1.5px solid var(--line);
    border-radius:12px; padding:12px 14px; margin-bottom:12px}
  .acc-tools input[type=search]{border:1.5px solid var(--line); border-radius:9px; padding:9px 12px;
    background:var(--field); color:var(--ink); width:100%; font-size:14.5px}
  .acc-tool-group{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
  .acc-tool-group i{font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--mut); font-style:normal; min-width:64px}
  .acc-pill{border:1.5px solid var(--line); background:var(--field); color:var(--ink); border-radius:999px;
    padding:4px 11px; font-size:12.5px; cursor:pointer; font-family:inherit}
  .acc-pill:hover{border-color:var(--brand)}
  .acc-pill.on{border-color:var(--gold); background:var(--gold-soft); font-weight:600}
  .acc-pill b{font-family:var(--ff-mono); font-size:10.5px; color:var(--mut); font-weight:600}
  .acc-cls{border:1.5px solid var(--line); border-radius:7px; padding:4px 9px; background:var(--field);
    color:var(--ink); font-size:12.5px; min-width:150px}
  .acc-warn{font-size:12.5px; color:#A33; background:var(--red-soft); border:1px solid rgba(201,58,58,.3);
    border-radius:8px; padding:6px 10px; margin-top:6px}
  @media(max-width:640px){ .acc-tool-group i{min-width:auto; width:100%} }
  .acc-add{display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--card); border:1.5px dashed var(--line); border-radius:12px; padding:12px 14px; margin-bottom:12px}
  .acc-add input{border:1.5px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--field); color:var(--ink); flex:1 1 180px; min-width:140px}
  .acc-sel{border:1.5px solid var(--line); border-radius:8px; padding:9px 10px; background:var(--field); color:var(--ink)}
  .acc-row{display:flex; gap:14px; align-items:center; background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:8px; flex-wrap:wrap}
  .acc-row.off{opacity:.55}
  .acc-code{font-family:var(--ff-mono); font-weight:700; font-size:17px; letter-spacing:.06em; background:var(--hl-soft); border:1.5px solid #EAD87A; border-radius:8px; padding:7px 11px; white-space:nowrap}
  .acc-mid{flex:1 1 220px; min-width:0}
  .acc-mid b{font-size:15px}
  .acc-meta{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut); margin-top:3px}
  .acc-btns{display:flex; gap:6px; flex-wrap:wrap}
  .acc-chip{font-family:var(--ff-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; border-radius:6px; padding:2px 7px; vertical-align:1px; margin-left:4px}
  .acc-chip.ielts{background:#E3EEFB; color:#1d3a5f; border:1px solid #9CC3EE}
  .acc-chip.gifted{background:var(--red-soft); color:var(--red); border:1px solid var(--red)}
  .acc-chip.both{background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok)}
  .acc-chip.offc{background:var(--line); color:var(--mut); border:1px solid var(--mut)}
  body[data-theme="dark"] .acc-chip.ielts, body[data-theme="contrast"] .acc-chip.ielts{background:transparent; color:var(--ink); border-color:var(--line)}
  .acc-editrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .acc-name{border:1.5px solid var(--line); border-radius:8px; padding:7px 10px; background:var(--field); color:var(--ink); font-size:14px; font-weight:600; width:min(240px,100%)}
  .acc-name:focus{outline:2px solid var(--navy); outline-offset:1px; border-color:var(--navy)}
  .acc-track{border:1.5px solid var(--line); border-radius:8px; padding:7px 8px; background:var(--field); color:var(--ink); font-size:13px}
  .acc-tracks{display:inline-flex; gap:5px; flex-wrap:wrap}
  .acc-opts{display:flex; flex-direction:column; gap:5px; min-width:0}
  /* v9.93 · 29 Sep 2026 · `hidden` must win. `.acc-opts{display:flex}` above overrode the
     attribute, so every row drew its full editor and the summary design never showed:
     77 rows x 10 checkboxes, a 20,895 px page. */
  .acc-row [hidden]{display:none !important}
  /* The create bars style every input as a text field (`.acc-add input`); the course
     checkboxes inside them must not stretch. */
  .acc-add .acc-pick input[type=checkbox]{flex:0 0 auto; min-width:0; width:13px; height:13px; padding:0; margin:0; border:0}
  .acc-add .acc-pick .acc-tck{flex:0 0 auto}
  .acc-optrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .acc-optlb{font-style:normal; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); flex:0 0 52px}
  .acc-tck{display:inline-flex; align-items:center; gap:4px; border:1.5px solid var(--line); border-radius:999px; padding:3px 9px; font-size:12px; color:var(--mut); background:var(--field); cursor:pointer}
  .acc-tck.on{border-color:var(--red); background:var(--red-soft); color:var(--ink); font-weight:600}
  .acc-tck input{margin:0; width:13px; height:13px}

  /* ---------- announcements + contact ---------- */
  .role-pill.bell{position:relative; font-size:14px; padding:7px 11px}
  .role-pill.bell.has-new{border-color:var(--red); color:var(--red)}
  .bell-badge{position:absolute; top:-6px; right:-6px; background:var(--red); color:#fff; border-radius:999px; font-size:10.5px; font-weight:700; min-width:17px; text-align:center; padding:1px 4px; font-family:var(--ff-mono)}
  .news-banner{display:flex; gap:12px; align-items:center; background:var(--hl-soft); border:1.5px solid #EAD87A; border-radius:12px; padding:12px 16px; margin:12px 0 4px; cursor:pointer; transition:border-color .15s}
  .news-banner:hover{border-color:var(--red)}
  .news-banner .nb-ic{font-size:19px}
  .news-banner .nb-txt{flex:1; font-size:14px; color:var(--ink); min-width:0}
  .news-banner .nb-more{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut)}
  .news-banner .nb-go{font-family:var(--ff-mono); font-size:12px; font-weight:700; color:var(--red); white-space:nowrap}
  .news-post{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:12px}
  .np-head{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
  .np-head b{font-size:16.5px; font-family:var(--ff-disp)}
  .np-new{background:var(--red); color:#fff; border-radius:6px; font-family:var(--ff-mono); font-size:10px; font-weight:700; letter-spacing:.08em; padding:2px 7px; align-self:center}
  .np-date{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut)}
  .np-body{margin-top:8px; line-height:1.55; font-size:14.5px}
  .np-body p{margin:0 0 8px}
  .np-body p:last-child{margin-bottom:0}
  .contact-card{display:flex; gap:14px; align-items:center; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; flex-wrap:wrap}
  .contact-card .tc-avatar{width:46px; height:46px; flex-shrink:0}
  .contact-card .tc-avatar svg{width:100%; height:100%}
  .contact-card .tc-mid{flex:1 1 180px; min-width:0}
  .contact-card .tc-name{font-family:var(--ff-disp); font-size:19px; font-weight:600}
  .contact-card .tc-sub{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut); margin-top:2px}
  .contact-card .tc-btns{display:flex; gap:8px; flex-wrap:wrap}
  .contact-btn{display:inline-flex; align-items:center; gap:6px; border-radius:9px; padding:8px 14px; font-size:13.5px; font-weight:700; text-decoration:none; border:1.5px solid transparent}
  .contact-btn.call{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}
  .contact-btn.zalo{background:#E8F1FF; color:#0068FF; border-color:#8FBEFF}
  .contact-btn.fb{background:#EAF0FB; color:#1877F2; border-color:#9BBFF5}
  body[data-theme="dark"] .contact-btn.zalo, body[data-theme="contrast"] .contact-btn.zalo{background:transparent}
  body[data-theme="dark"] .contact-btn.fb, body[data-theme="contrast"] .contact-btn.fb{background:transparent}
  .tn-compose{display:flex; flex-direction:column; gap:8px; background:var(--card); border:1.5px dashed var(--line); border-radius:12px; padding:14px 16px; max-width:640px}
  .tn-compose input,.tn-contact input{border:1.5px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--field); color:var(--ink)}
  .tn-compose textarea{border:1.5px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--field); color:var(--ink); min-height:90px; resize:vertical; font-family:var(--ff-body); font-size:14px}
  .tn-compose .btn{align-self:flex-start}
  .tn-contact{display:flex; gap:8px; flex-wrap:wrap; align-items:center; max-width:760px}
  .tn-contact input{flex:1 1 180px; min-width:150px}

  /* ---------- writing builder ---------- */
  .np-app{background:var(--navy); color:#fff; border-radius:6px; font-family:var(--ff-mono); font-size:10px; font-weight:700; letter-spacing:.06em; padding:2px 7px; align-self:center}
  .wl-intro{display:flex; gap:14px; align-items:flex-start; background:var(--hl-soft); border:1.5px solid #EAD87A; border-radius:14px; padding:16px 18px; margin-bottom:18px}
  .wl-intro-ic{width:34px; height:34px; flex-shrink:0; color:var(--navy)}
  .wl-intro-ic svg{width:100%; height:100%}
  .wl-intro b{font-size:16px}
  .wl-vn{color:var(--mut); font-style:italic}
  body[data-theme="dark"] .wl-intro, body[data-theme="contrast"] .wl-intro{color:var(--ink)}
  .wl-ladder{display:flex; flex-direction:column; gap:0}
  .wl-rung{display:flex; gap:16px; align-items:center; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:18px 20px; cursor:pointer; transition:border-color .15s, transform .15s; position:relative}
  .wl-rung:hover{border-color:var(--red); transform:translateX(3px)}
  .wl-step{width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--ff-mono); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px}
  .wl-ic{width:40px; height:40px; flex-shrink:0; border-radius:10px; background:var(--hl-soft); border:1.5px solid #EAD87A; display:flex; align-items:center; justify-content:center}
  .wl-ic svg{width:22px; height:22px; stroke:var(--navy)}
  .wl-mid{flex:1; min-width:0}
  .wl-level{font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); font-weight:600}
  .wl-level span{color:var(--mut)}
  .wl-mid h3{font-family:var(--ff-disp); font-size:19px; font-weight:600; margin:2px 0 4px}
  .wl-mid h3 em{font-style:italic; color:var(--mut); font-size:15px; font-weight:400}
  .wl-mid p{color:var(--mut); font-size:13.5px; line-height:1.45}
  .wl-meta{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut); margin-top:6px; display:flex; gap:10px; align-items:center}
  .wl-badge{background:var(--field); border:1.5px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--mut)}
  .wl-badge.done{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
  .wl-go{font-family:var(--ff-mono); font-size:12px; font-weight:700; color:var(--red); white-space:nowrap}
  .wl-link{width:2px; height:16px; background:var(--line); margin:0 0 0 46px}
  .wb-card{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:24px 22px}
  .wb-prompt{font-size:21px; line-height:1.5; font-family:var(--ff-disp)}
  .wb-prompt.small{font-size:18px; font-family:var(--ff-body)}
  .wb-gap-mark{color:var(--red); font-weight:700; letter-spacing:1px}
  .wb-label{display:block; font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; color:var(--mut); margin:16px 0 6px; text-transform:uppercase}
  .wb-label span{text-transform:none; letter-spacing:0; font-style:italic; color:var(--mut)}
  .wb-input{width:100%; border:1.5px solid var(--line); border-radius:10px; padding:11px 14px; background:var(--field); color:var(--ink); font-size:16px; font-family:var(--ff-body); resize:vertical}
  .wb-input.one{font-size:17px}
  .wb-input:focus{outline:2px solid var(--navy); outline-offset:1px; border-color:var(--navy)}
  .wb-vi{font-size:20px; font-family:var(--ff-disp); line-height:1.4; color:var(--ink)}
  .wb-hints{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
  .wb-hint{background:var(--hl-soft); border:1.5px solid #EAD87A; border-radius:8px; padding:5px 11px; font-size:13.5px; color:var(--ink); font-weight:600}
  body[data-theme="dark"] .wb-hint, body[data-theme="contrast"] .wb-hint{color:var(--ink)}
  .wb-cue{font-family:var(--ff-mono); font-size:16px; background:var(--field); border:1.5px dashed var(--line); border-radius:10px; padding:12px 14px; margin-top:4px; letter-spacing:.02em}
  .wb-two{display:flex; flex-direction:column; gap:6px; margin:4px 0}
  .wb-two span{background:var(--field); border:1.5px solid var(--line); border-radius:9px; padding:9px 13px; font-size:15.5px}
  .wb-tip{font-size:13.5px; color:var(--mut); margin:10px 0}
  .wb-tip b{color:var(--navy); font-family:var(--ff-mono)}
  .wb-fb{border-radius:10px; padding:11px 14px; font-size:15px; margin-top:14px; font-weight:600}
  .wb-fb.ok{background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok)}
  .wb-fb.no{background:var(--red-soft); color:var(--bad); border:1px solid var(--bad)}
  .wb-fb b{color:inherit}
  .wb-exp{font-size:13.5px; color:var(--mut); margin-top:8px; line-height:1.45; border-left:2px solid var(--line); padding-left:10px}
  .wb-model{background:var(--ok-soft); border:1px solid var(--ok); border-radius:10px; padding:12px 14px; margin-top:12px; font-size:15.5px; line-height:1.5}
  .wb-model-vn{margin-top:7px; padding-top:7px; border-top:1px dashed var(--ok); font-size:14.5px; color:var(--fg); line-height:1.5}
  .wb-model-vn span{font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin-right:4px}
  .wb-model b{color:var(--ok); font-family:var(--ff-mono); font-size:12px}
  .wb-selfq{font-size:14px; color:var(--mut); margin-top:14px; margin-bottom:2px}
  .wb-actions{display:flex; gap:10px; align-items:center; margin-top:16px; flex-wrap:wrap}
  .wb-ptopic{font-family:var(--ff-disp); font-size:22px; font-weight:600}
  .wb-ptopic em{font-style:italic; color:var(--mut); font-size:16px; font-weight:400}
  .wb-phint{color:var(--mut); font-size:13.5px; margin:6px 0 14px; line-height:1.45}
  .wb-frame{display:flex; flex-direction:column; gap:16px}
  /* v5.1: each blank is now a full-width auto-growing box on its own line, so a
     student can see and spell-check everything they typed (was a single-line
     input that scrolled sideways). */
  .wb-frow{display:flex; flex-direction:column; gap:6px; line-height:1.6}
  .wb-frow-lead{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
  .wb-ftext{font-size:16px}
  .wb-finput{display:block; width:100%; box-sizing:border-box; border:1.5px solid var(--navy); background:var(--field); padding:9px 11px; border-radius:9px; font-size:15.5px; font-family:inherit; color:var(--ink); line-height:1.55; resize:none; overflow:hidden; min-height:42px}
  .wb-finput:focus{outline:none; background:var(--hl-soft); border-color:var(--navy)}
  .wb-finput.ok{border-color:var(--ok); background:var(--ok-soft)}
  .wb-finput.no{border-color:var(--bad); background:var(--bad-soft)}
  .wb-ftag{font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); background:var(--hl-soft); border-radius:5px; padding:2px 6px}
  .wb-ftag.auto{background:var(--field); border:1px solid var(--line)}
  .wb-sample{background:var(--field); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:16px; line-height:1.7}
  .wb-sample b{font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
  .wb-sample u{text-decoration-color:var(--hl); text-decoration-thickness:2px}

  /* ---------- writing builder: level chips + assessment ---------- */
  .wb-lvl{display:inline-block; font-family:var(--ff-mono); font-size:10px; font-weight:700; letter-spacing:.06em; border-radius:5px; padding:2px 7px; margin-bottom:10px}
  .wb-lvl.b1{background:#E3EEFB; color:#1d3a5f; border:1px solid #9CC3EE}
  .wb-lvl.b2{background:var(--red-soft); color:var(--red); border:1px solid var(--red)}
  body[data-theme="dark"] .wb-lvl.b1, body[data-theme="contrast"] .wb-lvl.b1{background:transparent; color:var(--ink); border-color:var(--line)}
  .wb-verdict{font-weight:700; font-size:16px; border-radius:10px; padding:11px 14px; margin-top:14px}
  .wb-verdict.match{background:var(--hl-soft); color:var(--ink); border:1.5px solid #EAD87A}
  .wb-verdict.good{background:var(--ok-soft); color:var(--ok); border:1.5px solid var(--ok)}
  .wb-verdict.revise{background:var(--red-soft); color:var(--bad); border:1.5px solid var(--bad)}
  body[data-theme="dark"] .wb-verdict.match, body[data-theme="contrast"] .wb-verdict.match{color:var(--ink)}
  .wb-checks{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
  .wb-checks li{font-size:14px; padding:6px 10px; border-radius:8px; background:var(--field)}
  .wb-checks li.ok{color:var(--ok)}
  .wb-checks li.no{color:var(--bad)}
  .wb-checks li em{color:var(--mut); font-style:normal; font-size:12.5px}
  .wb-your{margin-top:14px; background:var(--field); border:1.5px solid var(--line); border-radius:10px; padding:11px 14px; font-size:15px; line-height:1.55}
  .wb-your b{font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
  .wb-your u{text-decoration-color:var(--hl); text-decoration-thickness:2px}
  .wb-alt{margin-top:12px; font-size:14px; line-height:1.5}
  .wb-alt b{font-size:13.5px}
  .wb-alt ul{margin:6px 0 0; padding-left:18px; color:var(--mut)}
  .wb-alt li{margin-bottom:3px}
  .wb-fnote{flex-basis:100%; font-size:12.5px; color:var(--mut); margin-top:2px; padding-left:2px}
  .wb-fnote.tip{color:var(--navy)}
  .wb-fnote b{color:var(--ok)}
  .wb-parev{margin-top:16px}
  /* v5.1 power-words panel */
  .wb-power{margin-top:14px; border:1.5px solid var(--line); border-radius:12px; padding:13px 15px; background:var(--card)}
  .wb-power-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px}
  .wb-power-head b{font-size:15px}
  .wb-power-head span{font-family:var(--ff-mono); font-size:11px; color:var(--mut)}
  .wb-pw-list{display:flex; flex-wrap:wrap; gap:7px}
  .wb-pw{display:inline-flex; align-items:baseline; gap:5px; border:1.3px solid var(--line); border-radius:99px; padding:5px 11px; font-size:14px; background:var(--field)}
  .wb-pw em{font-style:normal; color:var(--mut); font-size:12.5px}
  .wb-pw.used{border-color:var(--ok); background:var(--ok-soft); font-weight:600}
  .wb-pw.used em{color:var(--fg)}
  .wb-power-tip{margin-top:10px; font-size:13px; color:var(--mut); line-height:1.5}
  /* v5.1 AI correction card + word diff */
  .wb-para-ai{margin-top:14px}
  .wb-para-ai-cta{display:flex; gap:12px; align-items:center; flex-wrap:wrap; border:1.5px dashed var(--navy); border-radius:12px; padding:13px 15px; background:var(--field)}
  .wb-para-ai-note{font-size:13px; color:var(--mut); line-height:1.45; flex:1 1 200px}
  .wb-correct{margin-top:14px; border:1.5px solid var(--red); border-radius:12px; padding:14px 16px; background:var(--bad-soft)}
  .wb-cc-head{font-family:var(--ff-disp); font-size:16px; font-weight:600; margin-bottom:10px}
  .wb-cc-diff{font-size:15.5px; line-height:1.9; background:var(--card); border:1px solid var(--line); border-radius:9px; padding:12px 14px}
  .wb-cc-diff del{color:var(--bad); text-decoration:line-through; text-decoration-thickness:2px; margin:0 1px}
  .wb-cc-diff ins{color:var(--ok); text-decoration:none; font-weight:600; margin:0 1px}
  body[data-theme="dark"] .wb-cc-diff del, body[data-theme="contrast"] .wb-cc-diff del{color:#ff8a8a}
  body[data-theme="dark"] .wb-cc-diff ins, body[data-theme="contrast"] .wb-cc-diff ins{color:#7fe6a6}
  .wb-cc-legend{margin-top:8px; font-family:var(--ff-mono); font-size:11px; color:var(--mut); display:flex; gap:14px; flex-wrap:wrap}
  .wb-cc-legend .lg-del{text-decoration:line-through; text-decoration-thickness:2px; color:var(--bad)}
  .wb-cc-legend .lg-ins{color:var(--ok); font-weight:700}
  .wb-cc-clean{margin-top:10px; background:var(--card); border:1px solid var(--ok); border-radius:9px; padding:11px 14px; font-size:15px; line-height:1.6}
  .wb-cc-clean.ok{border-color:var(--ok); color:var(--fg)}
  .wb-cc-clean b{font-family:var(--ff-mono); font-size:12px; color:var(--ok)}
  .wb-cc-improve{margin-top:11px; font-size:14px; line-height:1.5}
  .wb-cc-improve b{font-family:var(--ff-mono); font-size:12px; color:var(--bad)}
  .wb-cc-improve ul{margin:6px 0 0; padding-left:20px}
  .wb-cc-improve li{margin-bottom:4px}
  .wb-cc-list{margin-top:11px; font-size:14px; line-height:1.5}
  .wb-cc-list b{font-family:var(--ff-mono); font-size:12px; color:var(--navy)}
  body[data-theme="dark"] .wb-cc-list b, body[data-theme="contrast"] .wb-cc-list b{color:var(--ac, #FFE873)}
  .wb-cc-list ul{margin:7px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
  .wb-cc-list li{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 11px}
  .wb-cc-list .cc-wrong{color:var(--bad); text-decoration:line-through; text-decoration-thickness:1.5px}
  .wb-cc-list .cc-arrow{color:var(--mut); margin:0 4px}
  .wb-cc-list .cc-right{color:var(--ok); font-weight:600}
  body[data-theme="dark"] .wb-cc-list .cc-wrong, body[data-theme="contrast"] .wb-cc-list .cc-wrong{color:#ff8a8a}
  body[data-theme="dark"] .wb-cc-list .cc-right, body[data-theme="contrast"] .wb-cc-list .cc-right{color:#7fe6a6}
  .wb-cc-list .cc-why{display:block; margin-top:3px; font-size:13px; color:var(--mut); line-height:1.45}
  .wb-pscore{font-family:var(--ff-mono); font-size:12.5px; color:var(--mut); margin-top:8px}
  .wb-pscore b{color:var(--ink)}

  /* ---------- writing builder: progress dashboard ---------- */
  .wl-progress{background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:18px}
  .wl-prog-top{display:flex; justify-content:space-between; align-items:baseline; font-size:15px}
  .wl-prog-top b{font-family:var(--ff-disp); font-size:17px}
  .wl-prog-top span{font-family:var(--ff-mono); font-size:12.5px; color:var(--mut)}
  .wl-prog-bar{height:10px; background:var(--line); border-radius:99px; overflow:hidden; margin:10px 0}
  .wl-prog-bar>div{height:100%; background:linear-gradient(90deg,var(--ok),var(--navy)); border-radius:99px; transition:width .4s}
  .wl-next{display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--hl-soft); border:1.5px solid #EAD87A; border-radius:10px; padding:10px 14px; font-size:14px; color:var(--ink)}
  .wl-next.done{background:var(--ok-soft); border-color:var(--ok)}
  .wl-next span{flex:1 1 auto}
  .wl-next-ic{font-size:17px; flex:0 0 auto}
  body[data-theme="dark"] .wl-next, body[data-theme="contrast"] .wl-next{color:var(--ink)}
  .wl-prog-note{font-size:12px; color:var(--mut); margin-top:10px; line-height:1.4}
  .wl-rbar{height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin:10px 0 6px; max-width:280px}
  .wl-rbar>div{height:100%; background:var(--ok); border-radius:99px; transition:width .3s}
  .wl-rung.is-done{border-color:var(--ok)}
  .wl-rung.is-done .wl-step{background:var(--ok)}
  .wl-rung.is-prog .wl-step{background:var(--red)}
  .wl-badge.prog{background:var(--red-soft); border-color:var(--red); color:var(--red)}
  .wb-restart{font-family:var(--ff-mono); font-size:11.5px; color:var(--red); cursor:pointer; text-decoration:none}
  .wb-restart:hover{text-decoration:underline}
  .wb-resume{background:var(--ok-soft); border:1px solid var(--ok); border-radius:8px; padding:8px 12px; font-size:13px; color:var(--ink); margin-top:8px}
  body[data-theme="dark"] .wb-resume, body[data-theme="contrast"] .wb-resume{color:var(--ink)}

  /* ---------- writing builder: topic hub + task ---------- */
  .wt-secthead{font-family:var(--ff-disp); font-size:20px; font-weight:600; margin:6px 0 12px; border-top:1.5px solid var(--ink); padding-top:14px}
  .wt-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
  .wt-card{background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:18px 20px; cursor:pointer; transition:border-color .15s, transform .15s; display:flex; flex-direction:column; gap:8px}
  .wt-card:hover{border-color:var(--red); transform:translateY(-3px)}
  .wt-card.is-done{border-color:var(--ok)}
  .wt-top{display:flex; justify-content:space-between; align-items:center}
  .wt-badge{font-family:var(--ff-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; border-radius:6px; padding:3px 9px}
  .wt-badge.t2{background:#E3EEFB; color:#1d3a5f; border:1px solid #9CC3EE}
  .wt-badge.t1{background:var(--hl-soft); color:var(--navy); border:1px solid #EAD87A}
.wt-badge.para{background:#E9F5EC; color:#1f4a30; border:1px solid #A6D3B4}
body[data-theme="contrast"] .wt-badge.para{background:transparent;color:var(--ink);border-color:var(--line)}
  body[data-theme="dark"] .wt-badge.t2,body[data-theme="contrast"] .wt-badge.t2{background:transparent;color:var(--ink);border-color:var(--line)}
  .wt-steps{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut)}
  .wt-card h3{font-family:var(--ff-disp); font-size:20px; font-weight:600}
  .wt-card h3 em{font-style:italic; color:var(--mut); font-size:14px; font-weight:400}
  .wt-card p{color:var(--mut); font-size:13px; line-height:1.45}
  .wt-go{margin-top:auto; padding-top:6px; font-family:var(--ff-mono); font-size:12px; color:var(--red); font-weight:600}
  .wl-rung.is-task{border-style:solid; border-color:#EAD87A; background:linear-gradient(0deg,var(--hl-soft),var(--card))}
  /* task view */
  .wb-task-head{display:flex; gap:10px; align-items:center; margin:8px 0 12px; flex-wrap:wrap}
  .wb-ai-chip{font-family:var(--ff-mono); font-size:11px; font-weight:700; color:var(--red); background:var(--red-soft); border:1px solid var(--red); border-radius:6px; padding:3px 9px}
  .wb-prompt-box{background:var(--field); border:1.5px solid var(--line); border-left:4px solid var(--navy); border-radius:8px; padding:14px 16px; font-size:15.5px; line-height:1.5}
  .wb-prompt-box b{font-family:var(--ff-mono); font-size:12px; color:var(--navy)}
  .wb-chart{background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:12px; margin:12px 0; max-width:420px}
  .wb-chart svg{width:100%; height:auto; display:block}
  .wb-plan{background:var(--card); border:1.5px solid var(--line); border-radius:10px; padding:10px 14px; margin-top:12px; font-size:14px}
  .wb-plan summary{cursor:pointer; font-weight:600}
  .wb-plan summary span{color:var(--mut); font-weight:400; font-size:12.5px}
  .wb-plan ul{margin:8px 0 2px; padding-left:20px; color:var(--mut); line-height:1.5}
  .wb-judging{display:flex; gap:10px; align-items:center; margin-top:14px; color:var(--mut); font-size:14px}
  .wb-spin{width:18px; height:18px; border:2.5px solid var(--line); border-top-color:var(--red); border-radius:50%; animation:wbspin .8s linear infinite}
  @keyframes wbspin{to{transform:rotate(360deg)}}
  /* feedback card */
  .wb-feedback{margin-top:18px; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:18px 20px}
  .wb-fb-head{font-family:var(--ff-disp); font-size:19px; font-weight:600; margin-bottom:6px}
  .wb-fb-overall{font-size:15px; line-height:1.5; margin-bottom:10px}
  .wb-sense{border-radius:9px; padding:9px 13px; font-size:14px; font-weight:600; margin-bottom:14px}
  .wb-sense.ok{background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok)}
  .wb-sense.no{background:var(--red-soft); color:var(--bad); border:1px solid var(--bad)}
  /* rubric-style criteria (named rating ladder per IELTS criterion) */
  .wb-fb-rubric-tag{font-family:var(--ff-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--red); border:1px solid var(--red); border-radius:99px; padding:1px 7px; vertical-align:middle; margin-left:4px}
  .wb-rb-overall{display:flex; align-items:center; gap:10px; background:var(--field); border:1.5px solid var(--line); border-radius:10px; padding:9px 14px; margin-bottom:12px; font-size:13px}
  .wb-rb-overall>span:first-child{color:var(--mut); font-weight:700}
  .wb-rb-overall>b{font-family:var(--ff-disp); font-size:24px; color:var(--navy); margin-left:auto}
  .wb-rubric{display:flex; flex-direction:column; gap:12px}
  .wb-rb-row{background:var(--field); border:1.5px solid var(--line); border-radius:11px; padding:12px 14px}
  .wb-rb-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
  .wb-rb-crit{font-size:14px; font-weight:700}
  .wb-rb-score{display:flex; align-items:center; gap:8px}
  .wb-rb-band{font-family:var(--ff-disp); font-size:20px; color:var(--navy)}
  .wb-rb-tiername{font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:99px; color:#fff}
  .wb-rb-ladder{display:flex; gap:5px; margin:9px 0 9px; flex-wrap:wrap}
  .wb-rb-chip{flex:1 1 auto; text-align:center; font-size:10.5px; font-weight:600; color:var(--mut); background:var(--card); border:1px solid var(--line); border-radius:7px; padding:5px 4px; white-space:nowrap; opacity:.55}
  .wb-rb-chip.on{opacity:1; color:#fff; font-weight:700; box-shadow:0 1px 5px rgba(0,0,0,.14)}
  .wb-rb-chip.hd.on,.wb-rb-tiername.hd{background:#1f9d6b}
  .wb-rb-chip.dist.on,.wb-rb-tiername.dist{background:#3f8f6f}
  .wb-rb-chip.cred.on,.wb-rb-tiername.cred{background:var(--navy)}
  .wb-rb-chip.pass.on,.wb-rb-tiername.pass{background:#c9922b}
  .wb-rb-chip.dev.on,.wb-rb-tiername.dev{background:var(--red)}
  .wb-rb-desc{font-size:12.8px; line-height:1.45; color:var(--ink)}
  .wb-rb-comment{font-size:12.5px; line-height:1.45; color:var(--mut); margin-top:7px; border-top:1px dashed var(--line); padding-top:7px}
  .wb-rb-comment b{color:var(--navy)}
  .wb-fb-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:14px}
  .wb-fb-col{border-radius:10px; padding:11px 14px; font-size:13.5px}
  .wb-fb-col.good{background:var(--ok-soft); border:1px solid var(--ok)}
  .wb-fb-col.imp{background:var(--hl-soft); border:1px solid #EAD87A}
  body[data-theme="dark"] .wb-fb-col.imp,body[data-theme="contrast"] .wb-fb-col.imp{color:var(--ink)}
  .wb-fb-col b{font-size:13px}
  .wb-fb-col ul{margin:6px 0 0; padding-left:16px; line-height:1.5}
  .wb-revised{margin-top:12px; background:var(--field); border:1.5px solid var(--line); border-radius:9px; padding:11px 14px; font-size:14px; line-height:1.5}
  .wb-revised b{font-family:var(--ff-mono); font-size:12px; color:var(--ok)}
  .wb-fb-note{font-size:12px; color:var(--mut); margin-top:12px; line-height:1.4}

  /* Global Success track */
  .gs-gradegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; max-width:680px; margin-top:8px}
  .gs-gradebtn{border:1.5px solid var(--line); background:var(--card); border-radius:14px; padding:18px 12px; font-size:17px; font-weight:700; color:var(--fg); cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s; text-align:center}
  .gs-gradebtn:hover{border-color:var(--navy); background:var(--field)}
  .gs-gradebtn.soon{opacity:.5; cursor:default}
  .gs-gradebtn.soon:hover{border-color:var(--line); background:var(--card)}
  .gs-gbsub{display:block; margin-top:4px; font-size:11.5px; font-weight:600; font-style:normal; opacity:.65; letter-spacing:.02em}
  /* Teacher grade switcher (sits on the dark Global Success hero) */
  .gs-tswitch{margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px}
  .gs-tlb{font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#fff; opacity:.72}
  .gs-tbtns{display:flex; flex-wrap:wrap; gap:6px}
  .gs-tbtn{font-family:inherit; font-size:13.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.14);
    border:1.5px solid rgba(255,255,255,.42); border-radius:999px; padding:6px 12px; cursor:pointer;
    transition:background .15s, border-color .15s, color .15s; min-height:34px}
  .gs-tbtn:hover{background:rgba(255,255,255,.28); border-color:#fff}
  .gs-tbtn.on{background:#fff; border-color:#fff; color:#1C2740}
  .gs-tbtn.all{background:transparent; border-style:dashed}
  .gs-tbtn.all:hover{background:rgba(255,255,255,.22); border-style:solid}
  body[data-theme="contrast"] .gs-tbtn{background:transparent; color:var(--ink); border-color:var(--ink)}
  body[data-theme="contrast"] .gs-tbtn.on{background:var(--ink); color:#000; border-color:var(--ink)}
  body[data-theme="contrast"] .gs-tlb{color:var(--ink); opacity:1}
  @media(max-width:430px){ .gs-tbtn{font-size:13px; padding:6px 10px} .gs-tswitch{gap:6px 8px} }
  .gs-soon{opacity:.62}
  .gs-ticket{display:flex; max-width:680px; margin:0; background:#fffdf7; border:1px solid #e8e0cc; border-radius:14px; overflow:hidden; box-shadow:0 8px 24px -16px rgba(80,60,20,.5); cursor:pointer}
  .gs-ticket .stub{width:86px; flex:0 0 86px; background:#f6efdc; border-right:2px dashed #d9ceb2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#7a5a1e; padding:10px 0}
  .gs-ticket .stub b{font-family:var(--ff-serif,serif); font-size:26px; line-height:1} .gs-ticket .stub small{font:600 10px var(--ff-mono); letter-spacing:.14em}
  .gs-ticket .body{flex:1; min-width:0; padding:16px 18px; display:flex; gap:12px; align-items:center}
  .gs-ticket .txt{flex:1; min-width:0}
  .gs-ticket h3{font-family:var(--ff-serif,serif); font-size:21px; margin:0 0 5px; color:#2b2416}
  .gs-ticket .meta{font:12.5px var(--ff-mono); color:#8a7a58}
  .gs-ticket .tag{display:inline-block; margin-top:6px; font:600 11px var(--ff-mono); border:1px solid #c9b88f; color:#7a5a1e; padding:2px 8px; border-radius:999px}
  .gs-ticket .go{flex:0 0 auto; background:#2b2416; color:#fffdf7; border:0; border-radius:10px; padding:11px 16px; font-weight:700; cursor:pointer}
  .gs-ticket .go.lock{background:transparent; color:#8a7a58}
  .gs-ticket.locked{cursor:default; opacity:.7}
  .gs-ticket:not(.locked):hover{box-shadow:0 12px 28px -14px rgba(80,60,20,.65)}
  @media (max-width:560px){ .gs-ticket .body{flex-wrap:wrap} .gs-ticket .stub{width:64px; flex-basis:64px} }
  body[data-theme="dark"] .gs-ticket, body[data-theme="contrast"] .gs-ticket{background:#2a261d; border-color:#4a4232}
  body[data-theme="dark"] .gs-ticket .stub, body[data-theme="contrast"] .gs-ticket .stub{background:#3a3325; color:#e8d7ae; border-right-color:#5a4f39}
  body[data-theme="dark"] .gs-ticket h3, body[data-theme="contrast"] .gs-ticket h3{color:#f6ecd6}
  body[data-theme="dark"] .gs-ticket .go, body[data-theme="contrast"] .gs-ticket .go{background:#e8d7ae; color:#2a261d}
  .gs-gate{max-width:720px; margin:4px 0 16px; border:1px dashed var(--navy); border-radius:16px; padding:12px 14px; background:var(--card,#fff)}
  .gs-gate-h{display:flex; flex-direction:column; gap:2px} .gs-gate-h span{color:var(--mut); font-size:13px}
  .gs-gate-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0 6px}
  .gs-gate-sw{cursor:pointer; display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:6px 12px; font:inherit; font-weight:600}
  .gs-gate-sw i{width:30px; height:16px; border-radius:999px; background:var(--line); position:relative}
  .gs-gate-sw i:after{content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:left .15s}
  .gs-gate-sw.on{border-color:#2e7d57} .gs-gate-sw.on i{background:#2e7d57} .gs-gate-sw.on i:after{left:16px}
  .gs-gate-sel{display:inline-flex; gap:6px; align-items:center; font-size:14px} .gs-gate-sel select{font:inherit; padding:6px 8px; border-radius:8px; border:1.5px solid var(--line); background:var(--field); color:var(--ink); max-width:100%}
  .gs-gate-note{font-size:12.5px; color:var(--mut)}
  .gs-revsub{color:var(--mut); margin-top:6px}
  .gs-revsub span{font-size:13px}
  .gs-revtasks{display:grid; gap:10px; max-width:720px}
  .gs-revtask{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card, #fff)}
  .gs-revtask ul{margin:6px 0 0 18px}
  .gs-revtask details{margin-top:8px} .gs-revtask summary{cursor:pointer; font-weight:600}
  .gs-revvi{color:var(--mut); font-size:13px; margin-top:2px}
  .gsv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-top:8px}
  .gsv-item{border:1.5px solid var(--line); background:var(--card); border-radius:14px; padding:13px 15px}
  .gsv-head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
  .gsv-head b{font-size:16.5px; color:var(--fg)}
  .gsv-pos{font-size:11.5px; color:var(--mut); font-style:italic; font-family:var(--ff-mono)}
  /* CEFR band on a word card. A unit whose list is pitched at a level (Global Success 12
     Unit 2 onward) sets `lvl` on every entry; older units have no lvl and show nothing. */
  .gsv-lvl{font-family:var(--ff-mono); font-size:10.5px; font-weight:700; letter-spacing:.4px;
    border:1px solid; border-radius:4px; padding:1px 5px; margin-left:2px}
  .lvl-B1{color:#0F6B39; border-color:#BFE0CC; background:#F1F9F4}
  .lvl-B2{color:#24345C; border-color:#CBD6E8; background:#F2F6FC}
  .lvl-C1{color:#8A4B10; border-color:#EBD4B4; background:#FDF6EC}
  .gsv-def{font-size:14px; color:var(--fg); margin-top:5px; line-height:1.45}
  .gsv-ex{font-size:13px; color:var(--mut); margin-top:5px; line-height:1.45; font-style:italic}

  /* IELTS Foundations */
  .f-tip{background:var(--field); border:1.5px solid var(--line); border-left:4px solid var(--navy); border-radius:10px; padding:10px 14px; font-size:13.5px; line-height:1.5; color:var(--fg); margin:10px 0 2px}
  .f-tip b{color:var(--navy)}
  body[data-theme="dark"] .f-tip b, body[data-theme="contrast"] .f-tip b{color:var(--ac, #FFE873)}

  .fsyn{font-size:13.5px; color:var(--navy); margin-top:4px; font-weight:600}
  body[data-theme="dark"] .fsyn, body[data-theme="contrast"] .fsyn{color:var(--ac, #FFE873)}

  /* ---------- Foundations v5: paragraph workshop ---------- */
  /* The paragraph stays on screen while the student answers — that is the
     whole point of this level, so it is sticky on desktop and collapsible
     on a phone, where a 130-word block would otherwise eat the screen. */
  .fw-para{position:sticky; top:8px; z-index:8; background:var(--card); border:1.5px solid var(--line);
    border-radius:14px; padding:16px 18px; margin:12px 0 14px; box-shadow:0 6px 18px rgba(0,0,0,.05)}
  .fw-para h4{font-family:var(--ff-disp); font-size:17px; font-weight:600; margin:0 0 8px; color:var(--fg)}
  .fw-para .fw-lab{display:inline-block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--mut); border:1.2px solid var(--line); border-radius:6px; padding:2px 7px; margin-bottom:8px}
  .fw-para p{font-size:15.5px; line-height:1.75; margin:0; color:var(--fg)}
  .fw-para .fw-body{max-height:none; overflow:visible}
  .fw-para .fw-body b.q-focus{font-weight:700}
  .fw-credit{font-size:12.5px; font-style:italic; color:var(--mut); text-align:right; margin-top:8px}
  /* A tapescript hides its words until the child asks for them — otherwise the listening
     exercise is a reading exercise with a speaker attached. */
  .fw-para.is-script.collapsed .fw-body{display:none}
  .fw-para.is-script .fw-toggle{display:inline-block}
  .fy-play{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 10px}
  .fy-play-n{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut)}
  .fw-toggle{display:none; margin-top:10px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.05em; color:var(--navy);
    background:none; border:none; cursor:pointer; padding:0; text-decoration:underline}
  body[data-theme="dark"] .fw-toggle, body[data-theme="contrast"] .fw-toggle{color:var(--ac, #FFE873)}
  /* On a phone a 130-word block would push the question off screen, so it
     collapses behind a fade until tapped. On desktop it is always fully open. */
  @media(max-width:640px){
    .fw-para{position:static; box-shadow:none}
    .fw-para p{font-size:15px; line-height:1.7}
    .fw-toggle{display:inline-block}
    .fw-para.collapsed .fw-body{max-height:104px; overflow:hidden;
      -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 100%); mask-image:linear-gradient(to bottom, #000 55%, transparent 100%)}
  }

  /* hint button + panel inside a drill card */
  .fw-hint{background:none; border:1.5px dashed var(--line); border-radius:99px; padding:6px 13px; cursor:pointer;
    font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--mut)}
  .fw-hint:hover{border-style:solid; color:var(--fg)}
  .fw-hintbox{margin-top:12px; border-left:4px solid var(--gold, #C8A24A); background:var(--field);
    border-radius:0 10px 10px 0; padding:10px 14px; font-size:14px; line-height:1.55; color:var(--fg)}
  .fw-hintbox b{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); display:block; margin-bottom:3px}

  /* ---------- Foundations v5: the five-stage ladder on a topic page ---------- */
  .fl-stage{display:flex; gap:14px; align-items:flex-start; padding:2px 0 0}
  .fl-rail{display:flex; flex-direction:column; align-items:center; flex:0 0 auto; width:34px; align-self:stretch}
  .fl-dot{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
    font-family:var(--ff-mono); font-size:13px; font-weight:700; border:2px solid var(--line); background:var(--card); color:var(--mut)}
  .fl-dot.on{background:var(--navy); border-color:var(--navy); color:#fff}
  .fl-dot.done{background:var(--ok); border-color:var(--ok); color:#fff}
  .fl-line{flex:1 1 auto; width:2px; background:var(--line); margin:6px 0 0; min-height:18px}
  .fl-body{flex:1 1 auto; min-width:0; padding-bottom:22px}
  .fl-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:2px}
  .fl-head h3{font-family:var(--ff-disp); font-size:20px; font-weight:600; margin:0; color:var(--fg)}
  .fl-head span{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}
  .fl-body > p.fl-why{color:var(--mut); font-size:13.5px; line-height:1.55; margin:4px 0 10px; max-width:66ch}
  .fl-locked{border:1.5px dashed var(--line); border-radius:12px; padding:14px 16px; color:var(--mut); font-size:13.5px; line-height:1.55}
  @media(max-width:560px){ .fl-stage{gap:10px} .fl-rail{width:28px} .fl-dot{width:26px; height:26px; font-size:12px} .fl-head h3{font-size:18px} }

  /* ---------- word-bank cards: IPA, Vietnamese meaning, speaker ---------- */
  .gsv-head{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
  .gsv-ipa{font-family:var(--ff-mono); font-size:12.5px; color:var(--mut); white-space:nowrap}
  .gsv-vn{font-size:13.5px; font-weight:600; color:var(--navy); margin-top:2px}
  body[data-theme="dark"] .gsv-vn, body[data-theme="contrast"] .gsv-vn{color:var(--ac, #FFE873)}
  .gsv-say{margin-left:auto; border:1px solid var(--line); background:var(--field); color:var(--ink); border-radius:8px; font-size:13px; line-height:1; padding:4px 7px; cursor:pointer}
  .gsv-say:active{transform:scale(.94)}

  /* ---------- Listening Builder ---------- */
  .lb-instr{background:var(--field); border:1.5px solid var(--line); border-left:4px solid var(--navy); border-radius:10px; padding:12px 15px; font-size:14px; line-height:1.55; margin:8px 0 14px}
  .lb-player{border:1.5px solid var(--line); background:var(--card); border-radius:14px; padding:14px 16px; margin-bottom:14px}
  .lb-nrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .lb-nleft{font-family:var(--ff-mono); font-size:12.5px; color:var(--mut); margin-left:auto}
  .lb-nbarwrap{height:5px; background:var(--line); border-radius:99px; margin:11px 0 8px; overflow:hidden}
  .lb-nbar{display:block; height:100%; width:0; background:var(--navy); border-radius:99px; transition:width .25s}
  .lb-nstat{font-size:13px; color:var(--mut)}
  .lb-nacc{font-size:12.5px; color:var(--mut); margin-top:8px; padding-top:8px; border-top:1px dashed var(--line)}
  .lb-opts.wrap{flex-direction:row; flex-wrap:wrap}
  .lb-opts.wrap .lb-opt{display:inline-flex}
  .lbv-words{display:flex; flex-direction:column; gap:10px; margin-top:4px}
  .lbv-word{border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:12px 14px}
  .lbv-w{display:flex; align-items:center; gap:8px; font-size:17px}
  .lbv-w b{font-size:17px}
  .lbv-ipa{font-family:var(--ff-mono); font-size:13px; color:var(--navy)}
  .lbv-word .say{margin-left:auto}
  .lbv-mean{font-size:14px; margin-top:4px}
  .lbv-vi{color:var(--mut)}
  .lbv-eg{font-size:13px; color:var(--mut); font-style:italic; margin-top:3px}
  .lb-qs{display:flex; flex-direction:column; gap:12px; margin-top:4px}
  .lb-q{display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:14px 15px}
  .lb-qnum{flex:0 0 28px; height:28px; border-radius:8px; background:var(--field); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-size:13px; font-weight:700}
  .lb-qbody{flex:1; min-width:0}
  .lb-stem{font-size:15px; line-height:1.5; margin-bottom:8px}
  .lb-in{max-width:280px}
  .lb-opts{display:flex; flex-direction:column; gap:7px}
  .lb-opt{display:flex; gap:10px; align-items:flex-start; text-align:left; border:1.5px solid var(--line); background:var(--field); color:var(--ink); border-radius:10px; padding:9px 13px; font-size:14.5px; cursor:pointer}
  .lb-opt b{font-family:var(--ff-mono); font-size:12.5px; flex-shrink:0}
  .lb-opt.picked{border-color:var(--navy); background:var(--field)}
  .lb-opt.correct{border-color:var(--ok); background:var(--ok-soft); font-weight:600}
  .lb-opt.wrong{border-color:var(--red); background:var(--bad-soft); text-decoration:line-through}
  .lb-opt:disabled{cursor:default}
  .lb-fb{margin-top:8px; font-size:13px; padding:7px 11px; border-radius:9px; line-height:1.45}
  .lb-fb.ok{background:var(--ok-soft); border-left:3px solid var(--ok)}
  .lb-fb.no{background:var(--bad-soft); border-left:3px solid var(--red)}
  .lb-result{margin:16px 0 6px; font-size:15.5px; text-align:center; background:var(--field); border:1.5px solid var(--line); border-radius:12px; padding:14px}
  .lb-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0}

  /* ---------- Speaking Builder ---------- */
  .sb-phrases{display:flex; flex-direction:column; gap:8px}
  .sb-phrase{border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:11px 14px}
  .sb-frame{display:flex; align-items:center; gap:8px; font-size:15.5px}
  .sb-use{font-size:12.5px; color:var(--mut); margin-top:3px}
  .sb-qbox{border:1.5px solid var(--navy); background:var(--field); border-radius:14px; padding:16px 18px}
  .sb-qlabel{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--mut)}
  .sb-q{font-size:18px; font-weight:600; margin:6px 0 10px; line-height:1.4}
  .sb-frame2{font-size:13.5px; color:var(--mut); margin-bottom:10px}
  .sb-card{border:1.5px solid #EAD87A; background:linear-gradient(0deg,var(--hl-soft),var(--card)); border-radius:14px; padding:16px 18px}
  .sb-cardt{font-size:17px; font-weight:700; margin-bottom:8px}
  .sb-points{margin:0 0 12px 18px; font-size:14.5px; line-height:1.7}
  .sb-build{display:flex; flex-direction:column; gap:9px}
  .sb-buildrow{display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:12px 14px}
  .sb-bnum{flex:0 0 26px; height:26px; border-radius:50%; background:var(--navy); color:var(--btn-fg); display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-size:13px; font-weight:700}
  .sb-bhint{font-size:13px; color:var(--mut); margin:2px 0}
  .sb-beg{font-size:13.5px; font-style:italic; color:var(--fg); background:var(--field); border-radius:8px; padding:5px 9px; margin-top:4px}
  .sb-in{width:100%; min-height:130px; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font-size:15px; line-height:1.55; background:var(--card); color:var(--ink); resize:vertical; font-family:inherit}
  .sb-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0}
  .sb-rec{border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:12px 14px; margin-top:10px; font-size:13.5px}
  .sb-recsent{color:var(--ok); font-weight:600; font-size:13.5px; margin-top:4px}
  .sb-fbcard{border:1.5px solid var(--navy); background:var(--card); border-radius:16px; padding:16px 18px; margin-top:14px}
  .sb-fbhead{font-weight:700; font-size:15.5px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
  .sb-fbhead span{font-weight:400; font-size:12px; color:var(--mut)}
  .sb-fbwarn{background:var(--bad-soft); border-left:3px solid var(--red); border-radius:8px; padding:7px 11px; font-size:13px; margin:8px 0}
  .sb-overall{font-size:14.5px; line-height:1.55; margin:8px 0 12px}
  .sb-crits{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
  .sb-crit{display:grid; grid-template-columns:130px 44px 1fr; gap:8px; align-items:baseline; font-size:13px; border-bottom:1px dashed var(--line); padding-bottom:5px}
  .sb-crit-lb{font-weight:600}
  .sb-band{font-family:var(--ff-mono); color:var(--navy); font-weight:700}
  .sb-crit-c{color:var(--mut)}
  .sb-fbcols{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .sb-fblist{margin:6px 0 0 16px; font-size:13px; line-height:1.5}
  .sb-good{color:var(--ok)} .sb-imp{color:var(--red)}
  .sb-revised{margin-top:12px; font-size:13.5px; background:var(--field); border-radius:8px; padding:8px 11px; line-height:1.5}
  .sb-fbnote{margin-top:10px; font-size:12.5px; color:var(--mut); border-top:1px dashed var(--line); padding-top:8px}
  /* --- bilingual gloss. Instructions only: the models and frames stay English, or the
     student reads the Vietnamese and never processes the English. --- */
  .sb-vi{font-size:12.5px; font-style:italic; color:var(--mut); margin-top:3px; line-height:1.5}
  /* --- hear-your-own-answer --- */
  /* No box, no heading: the chips sit directly under the textarea and read as the
     student's own sentence, which is what they are. */
  .sb-say{margin-top:8px}
  .sb-say-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 4px}
  .sb-words{font-size:15.5px; line-height:1.95; margin-top:4px}
  /* Twenty-four outlined buttons read as a form to fill in. A dotted underline says
     "tappable" quite well enough. */
  .sb-w{font:inherit; color:var(--ink); background:none; border:0; border-bottom:1px dotted var(--line);
        border-radius:0; padding:0 1px; cursor:pointer}
  .sb-w:hover,.sb-w:focus-visible{border-bottom-color:var(--navy); background:var(--hl-soft)}
  /* One toolbar for everything you can do to your answer. */
  .sb-bar{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:10px 0 4px}
  .sb-bar .sep{width:1px; height:20px; background:var(--line); margin:0 2px}
  .sb-w-p{color:var(--mut)}
  .sb-w-empty{font-size:13.5px; color:var(--mut); font-style:italic; line-height:1.5}
  /* --- vocabulary + frames, in the task view --- */
  .sb-help{border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:0 14px; margin:12px 0}
  .sb-help>summary{cursor:pointer; padding:11px 0; font-weight:700; font-size:14.5px; list-style:none}
  .sb-help>summary::-webkit-details-marker{display:none}
  .sb-help>summary::before{content:"\25B8"; display:inline-block; margin-right:8px; color:var(--mut); transition:transform .15s}
  .sb-help[open]>summary::before{transform:rotate(90deg)}
  .sb-help>summary em{font-weight:400; font-style:normal; font-size:12px; color:var(--mut); margin-left:6px}
  .sb-helpb{padding:0 0 12px}
  /* One line per word, not two. Twelve words at two lines each was half a screen. */
  .sb-vrow{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
           border-bottom:1px dashed var(--line); padding:5px 0; font-size:13.5px}
  .sb-vrow:last-child{border-bottom:0}
  .sb-vw{font-weight:700}
  .sb-vipa{font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
  .sb-vvi{font-size:12.5px; color:var(--navy)}
  .sb-vmean{font-size:12.5px; color:var(--mut); flex:1 1 auto; min-width:180px}
  .sb-vtext{font-size:14.5px; line-height:1.6; margin:2px 0 0}
  /* --- takes --- */
  .sb-takes{border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:12px 14px; margin-top:10px}
  .sb-takes-h{font-weight:700; font-size:14.5px}
  .sb-take{display:grid; grid-template-columns:auto 1fr auto auto; gap:9px; align-items:center;
           border:1.5px solid var(--line); border-radius:10px; padding:8px 10px; margin-top:8px}
  .sb-take.on{border-color:var(--navy); background:var(--field)}
  .sb-take audio{width:100%; min-width:0; height:34px}
  .sb-pick{display:flex; gap:6px; align-items:center; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap}
  .sb-take-n{font-size:12px; color:var(--mut); white-space:nowrap}
  .sb-take-n b{color:var(--ok)}
  .sb-take-x{border:1.5px solid var(--line); background:var(--card); border-radius:8px; cursor:pointer;
             padding:3px 8px; font-size:14px; line-height:1.4}
  .sb-take-x:hover:not(:disabled){border-color:var(--red)}
  .sb-take-x:disabled{opacity:.35; cursor:not-allowed}
  /* --- done bar + revealed model --- */
  .sb-donebar{display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:13.5px;
              background:var(--ok-soft,var(--field)); border-radius:10px; padding:9px 12px; margin-top:10px}
  /* --- coach --- */
  .sb-co{border:1.5px solid var(--navy); background:var(--card); border-radius:16px; padding:16px 18px; margin-top:14px}
  .sb-co-h{font-weight:700; font-size:15.5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .sb-lin{width:20px; height:20px; color:var(--navy); flex:0 0 auto}
  /* --- Dusk-till-dawn --- */
  .dtd-arc{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:14px 0 4px}
  .dtd-arcbox{border:1.5px solid var(--line); border-radius:10px; padding:8px 4px; text-align:center;
              background:var(--card); opacity:.55}
  .dtd-arcbox.has{opacity:1; border-color:var(--navy)}
  .dtd-arcbox:nth-child(6).has{border-color:#E8B931; background:var(--hl-soft)}
  .dtd-arcn{font-family:var(--ff-mono); font-size:17px; font-weight:700; color:var(--navy)}
  .dtd-arcl{font-size:11px; font-weight:600; margin-top:1px}
  .dtd-arcv{font-size:10px; color:var(--mut)}
  .dtd-list{display:flex; flex-direction:column}
  .dtd-row{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
           border-bottom:1px dashed var(--line); padding:7px 0; font-size:13.5px}
  .dtd-w{font-weight:700; font-size:15px}
  .dtd-src{font-size:11px; color:var(--mut); border:1px dashed var(--line); border-radius:999px; padding:0 7px}
  .dtd-stage{font-family:var(--ff-mono); font-size:10px; font-weight:700; letter-spacing:.05em;
             text-transform:uppercase; border-radius:5px; padding:1px 6px; border:1px solid var(--line); color:var(--mut)}
  .dtd-stage.s5{color:#8A6A14; border-color:#EBD4B4; background:#FDF6EC}
  .dtd-stage.s4,.dtd-stage.s3{color:#24345C; border-color:#CBD6E8; background:#F2F6FC}
  /* the study round — no question, no stakes: the word as a thing to look at */
  .dtd-learn{border:1.5px solid var(--line); border-left:4px solid #E8B931; border-radius:14px;
    padding:18px 18px 14px; margin-top:12px; background:var(--card)}
  .dtd-lw{font-size:30px; font-weight:800; letter-spacing:-.01em; line-height:1.15}
  .dtd-lipa{font-family:var(--ff-mono); font-size:14px; color:var(--mut); margin-top:2px}
  .dtd-lpos{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--mut); margin-top:8px}
  .dtd-ldef{font-size:17px; line-height:1.5; margin-top:4px}
  .dtd-lex{margin-top:12px; padding-left:12px; border-left:2px solid var(--line);
    font-size:15.5px; line-height:1.55; font-style:italic; color:var(--ink)}
  .dtd-lsyn{margin-top:10px; font-size:13px; color:var(--mut)}
  .dtd-lfoot{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line);
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; color:var(--mut)}
  .dtd-opts{display:flex; flex-direction:column; gap:8px; margin-top:10px}
  /* the + that keeps a word */
  .dtd-add{font:inherit; font-size:12px; line-height:1; color:var(--navy); background:var(--card);
           border:1.5px solid var(--line); border-radius:6px; padding:2px 6px; cursor:pointer; margin-left:4px}
  .dtd-add:hover{border-color:#E8B931; background:var(--hl-soft)}
  .dtd-add.on{color:#8A6A14; border-color:#EBD4B4; background:var(--hl-soft); cursor:default}
  @media (max-width:560px){ .dtd-arc{grid-template-columns:repeat(3,1fr)} }
  body[data-theme="dark"] .sb-lin, body[data-theme="contrast"] .sb-lin{color:var(--ac,#FFE873)}
  .sb-co-h span{font-weight:400; font-size:12px; color:var(--mut)}
  .sb-und{background:var(--field); border-left:3px solid var(--navy); border-radius:0 8px 8px 0;
          padding:9px 12px; margin:9px 0; font-size:14px; line-height:1.55}
  .sb-ideas{display:flex; gap:6px; flex-wrap:wrap; margin:7px 0 2px}
  .sb-idea{background:var(--hl-soft); border:1px solid #EAD87A; border-radius:999px; padding:2px 10px; font-size:12.5px}
  .sb-ver{border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; margin-top:9px}
  .sb-ver.on{border-color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok)}
  .sb-ver-h{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:5px}
  .sb-lv{font-family:var(--ff-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em;
         text-transform:uppercase; border-radius:5px; padding:2px 7px; border:1px solid}
  .sb-lv.easy{color:#0F6B39; border-color:#BFE0CC; background:#F1F9F4}
  .sb-lv.natural{color:#24345C; border-color:#CBD6E8; background:#F2F6FC}
  .sb-lv.advanced{color:#8A4B10; border-color:#EBD4B4; background:#FDF6EC}
  .sb-uses{display:flex; gap:5px; flex-wrap:wrap; margin:5px 0 0}
  .sb-use-chip{font-size:11.5px; background:var(--field); border:1px dashed var(--line);
               border-radius:999px; padding:1px 8px; color:var(--mut)}
  .sb-why{font-size:12.5px; color:var(--mut); margin-top:5px; line-height:1.5}
  .sb-lad{width:100%; border-collapse:collapse; margin-top:8px; font-size:13.5px}
  .sb-lad th{text-align:left; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.05em;
             text-transform:uppercase; color:var(--mut); border-bottom:1.5px solid var(--line); padding:4px 6px}
  .sb-lad td{border-bottom:1px dashed var(--line); padding:6px; vertical-align:top}
  .sb-lad td.y{color:var(--mut); text-decoration:line-through}
  .sb-lad .sb-note2{display:block; font-size:11.5px; color:var(--mut); font-style:italic; margin-top:2px}
  .sb-fixrow{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:baseline;
             border-bottom:1px dashed var(--line); padding:6px 0; font-size:13.5px}
  .sb-fixw{color:var(--red); text-decoration:line-through}
  .sb-fixr{color:var(--ok); font-weight:600}
  .sb-fixy{grid-column:1/-1; font-size:12px; color:var(--mut)}
  .sb-restore{margin-top:8px}
  @media (max-width:560px){ .sb-lad{font-size:12.5px} .sb-fixrow{grid-template-columns:1fr} }
  .sb-model{border:1.5px solid #EAD87A; background:linear-gradient(0deg,var(--hl-soft),var(--card));
            border-radius:12px; padding:12px 14px; margin-top:10px}
  .sb-model-h{font-weight:700; font-size:14.5px}
  @media (max-width:560px){ .sb-take{grid-template-columns:1fr auto auto} .sb-take audio{grid-column:1/-1} }
  body[data-theme="dark"] .sb-band, body[data-theme="contrast"] .sb-band{color:var(--ac, #FFE873)}
  @media (max-width:480px){ .sb-crit{grid-template-columns:110px 38px 1fr} .sb-fbcols{grid-template-columns:1fr} }

  /* ---------- flashcard study mode (Global Success pilot) ---------- */
  /* Lộ trình & mục tiêu — the unit's curriculum, shown where the work is */
  .gsc-wrap{border:1.5px solid var(--line); border-radius:14px; padding:14px 16px 12px; margin:0 0 18px; background:var(--card)}
  .gsc-goal{font-size:14px; margin-bottom:10px}
  .gsc-days{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px}
  .gsc-day{border:1px solid var(--line); border-radius:10px; padding:8px 9px}
  .gsc-day b{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.05em; color:var(--mut); display:block}
  .gsc-day span{font-size:12.5px; line-height:1.35; display:block; margin-top:3px}
  .gsc-lo{display:flex; gap:8px; align-items:baseline; padding:5px 0; border-top:1px dashed var(--line); font-size:13.5px}
  .gsc-lo .t{flex:1}
  .gsc-lo .ck{font-family:var(--ff-mono); font-size:11px; white-space:nowrap; color:var(--mut)}
  .gsc-lo.met .ck{color:var(--ok, #0F6B39); font-weight:700}
  .gsc-lo .tick{width:18px; text-align:center}
  @media (max-width:560px){ .gsc-days{grid-template-columns:repeat(2,1fr)} }
  .gsv-toggle{display:flex; gap:8px; margin:2px 0 12px}
  .gsv-tab{border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:7px 14px; font-size:13.5px; cursor:pointer}
  .gswl-head{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; color:var(--mut); font-size:13.5px; margin:4px 0 6px}
  .gsv-tab.on{border-color:var(--navy); background:var(--navy); color:var(--btn-fg); font-weight:700}
  .gsf-wrap{max-width:560px}
  .gsf-top{display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:12.5px; color:var(--mut); margin-bottom:6px}
  .gsf-card{border:2px solid var(--navy); background:var(--card); border-radius:18px; min-height:250px; margin-top:10px; padding:26px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; cursor:pointer; user-select:none}
  .gsf-card.flipped{border-style:solid; border-color:var(--ok); cursor:default}
  .gsf-card.gsf-done{border-color:var(--ok); cursor:default}
  .gsf-word{font-family:var(--ff-disp); font-size:clamp(26px,7vw,36px); font-weight:700}
  .gsf-word-sm{font-size:clamp(20px,5vw,26px)}
  .gsf-ipa{font-family:var(--ff-mono); font-size:15px; color:var(--mut)}
  .gsf-ipa-in{font-family:var(--ff-mono); font-size:13px; color:var(--mut); font-weight:400}
  .gsf-pos{font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--mut); font-family:var(--ff-mono)}
  .gsf-vn{font-size:17px; font-weight:700; color:var(--navy)}
  body[data-theme="dark"] .gsf-vn, body[data-theme="contrast"] .gsf-vn{color:var(--ac, #FFE873)}
  .gsf-def{font-size:14.5px; line-height:1.55}
  .gsf-ex{font-size:13.5px; color:var(--mut); font-style:italic; line-height:1.5}
  .gsf-hint{font-size:12.5px; color:var(--mut); margin-top:6px}
  .gsf-big{font-size:40px}
  .gsf-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px}
  .gsf-note{font-size:12.5px; color:var(--mut); margin-top:10px}

  /* ---------- PTE & Flyers additions ---------- */
  .gm-msq-note{flex-basis:100%; font-size:12.5px; color:var(--mut); margin-top:4px}
  .gd-spell-note{font-size:12.5px; color:var(--mut); margin-top:8px}
  .gd-spellin{max-width:340px}
  /* ---- type -> reveal -> self-check ---- */
  .gd-typein{width:100%; max-width:640px; min-height:64px; resize:vertical; line-height:1.55; font-family:inherit}
  .gd-cue{display:inline-flex; align-items:center; gap:10px; margin-bottom:12px; padding:6px 14px 6px 10px;
    border:1.5px solid var(--line); border-radius:999px; background:var(--hl-soft)}
  .gd-cue-l{font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut)}
  .gd-cue b{font-family:var(--ff-mono); font-size:14px; letter-spacing:.06em; color:var(--ink)}
  .gd-lead{font-size:15.5px; margin-bottom:10px; color:var(--ink)}
  .gd-lbl{display:block; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-bottom:4px}
  .gd-mine, .gd-model{border-radius:10px; padding:11px 14px; margin-bottom:10px; font-size:15px; line-height:1.6}
  .gd-mine{border:1.5px solid var(--line); background:var(--field)}
  .gd-mine.ok{border-color:var(--ok); background:var(--ok-soft)}
  .gd-mine.no{border-color:var(--bad); background:var(--bad-soft)}
  .gd-model{border:1.5px solid var(--ok); background:var(--ok-soft)}
  .gd-model div+div{margin-top:4px; padding-top:4px; border-top:1px dashed rgba(120,130,160,.35)}
  .gd-self{border:1.5px dashed var(--line); border-radius:10px; padding:12px 14px; margin-top:2px}
  .gd-self p{font-size:13.5px; color:var(--mut); margin-bottom:9px}
  .gd-self-done{font-size:13.5px; color:var(--ok); font-weight:600; margin-top:2px}
  .gm-wordbox{border:1.5px dashed var(--line); background:var(--card); border-radius:12px; padding:10px 14px; margin:10px 0; font-size:14px; line-height:1.9}
  .gm-wordbox b{font-family:var(--ff-mono); font-size:12px; letter-spacing:.4px; display:block; margin-bottom:2px; color:var(--mut)}
  .gm-wordbox span{display:inline-block; border:1px solid var(--line); border-radius:8px; padding:1px 9px; margin:2px 4px 2px 0; background:var(--field)}
  /* PTE speaking room */
  .psp-card{border:1.5px solid var(--line); background:var(--card); border-radius:14px; padding:16px 18px; margin:10px 0}
  .psp-card h3{font-size:16.5px; margin-bottom:4px}
  .psp-kind{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--mut)}
  .psp-text{margin:10px 0; font-size:15px; line-height:1.65}
  .psp-tip{font-size:13px; color:var(--mut); border-top:1px dashed var(--line); padding-top:8px; margin-top:10px}
  .psp-ans{margin-top:8px; font-size:14px; border-left:3px solid var(--ok); padding:6px 10px; background:var(--ok-soft); border-radius:0 8px 8px 0}
  .psp-chart{max-width:420px; margin:8px 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff}
  /* Flyers walkthrough */
  .fdn-dots{display:flex; gap:5px; flex-wrap:wrap; margin:12px 0}
  .fdn-dot{width:10px; height:10px; border-radius:50%; border:1.5px solid var(--line); background:var(--card)}
  .fdn-dot.done{background:var(--ok); border-color:var(--ok)}
  .fdn-dot.cur{background:var(--navy); border-color:var(--navy); transform:scale(1.25)}
  .fdn-card{border:1.5px solid var(--line); background:var(--card); border-radius:16px; padding:18px 20px; margin:12px 0}
  .fdn-part{font-family:var(--ff-mono); font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--mut)}
  .fdn-what{font-size:15px; line-height:1.65; margin:8px 0 4px}
  .fdn-ex{border:1.5px dashed var(--navy); border-radius:12px; padding:12px 15px; margin:12px 0; font-size:14.5px; line-height:1.7}
  .fdn-ex .fdn-exlb{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--navy); display:block; margin-bottom:6px}
  .fdn-ex .fdn-exans{margin-top:8px; padding:6px 10px; background:var(--ok-soft); border-radius:8px; font-size:13.5px}
  body[data-theme="dark"] .fdn-ex .fdn-exlb, body[data-theme="contrast"] .fdn-ex .fdn-exlb{color:var(--ac, #FFE873)}
  .fdn-try{margin-top:14px}
  .fdn-try .fdn-trylb{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--mut); display:block; margin-bottom:8px}
  .fdn-q{border-top:1px dashed var(--line); padding:12px 0 4px; font-size:14.5px}
  .fdn-opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
  .fdn-opt{border:1.5px solid var(--line); background:var(--field); border-radius:10px; padding:8px 14px; font-size:14px; cursor:pointer; text-align:left; color:var(--ink)}
  .fdn-opt.ok{border-color:var(--ok); background:var(--ok-soft); font-weight:700}
  .fdn-opt.no{border-color:var(--red); background:var(--bad-soft); text-decoration:line-through}
  .fdn-opt:disabled{cursor:default; opacity:.85}
  /* v9.75 · the Writing Builder's choice card reuses .fdn-opt entirely — border, the ok and
     no states, the disabled look. It adds only a stacked column, because a Task 1 option is
     a sentence and not a word, and a 'selected but not yet checked' state, which the
     Foundations drill does not need (it checks on tap; this one has a Check button). */
  .wb-choices{display:flex; flex-direction:column; gap:8px; margin-top:10px}
  .wb-choices .fdn-opt{width:100%; line-height:1.5}
  .wb-choices .fdn-opt.sel{border-color:var(--navy); background:var(--card); font-weight:700}
  .fdn-fb{margin-top:8px; font-size:13.5px; padding:7px 11px; border-radius:9px}
  .fdn-fb.ok{background:var(--ok-soft); border-left:3px solid var(--ok)}
  .fdn-fb.no{background:var(--bad-soft); border-left:3px solid var(--red)}
  .fdn-in{border:1.5px solid var(--line); border-radius:10px; padding:8px 12px; font-size:15px; background:var(--field); color:var(--ink); max-width:260px}
  .fdn-nav{display:flex; gap:10px; justify-content:space-between; align-items:center; margin:16px 0 60px}
  /* Flyers result shields */
  .fy-shields{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:14px 0}
  .fy-shield{text-align:center}
  .fy-shield .fs-icons{font-size:22px; letter-spacing:2px}
  .fy-shield .fs-lb{font-size:12.5px; color:var(--mut); margin-top:3px}
  @media (max-width:480px){ .psp-chart{max-width:100%} .fdn-card{padding:14px 14px} }

/* ---- v9.57 · the class home, rebuilt around progress ---------------------- */
.fp-pick{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:14px 0 0;padding:9px 12px;
  border:1px dashed var(--line);border-radius:10px}
.fp-pick i{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut);font-style:normal;margin-right:4px}
.fp-pickbtn{font:inherit;font-size:12.5px;padding:4px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--mut)}
.fp-pickbtn.on{background:var(--navy);border-color:var(--navy);color:#fff}
/* v9.70 · the create-bar course picker — the row's own control, in the create bar */
.acc-pick{flex:1 1 100%;display:flex;flex-direction:column;gap:7px;margin:2px 0 0}
.acc-pick-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.acc-pick-lb{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);font-style:normal;flex:0 0 auto;min-width:118px}
.acc-pick-note{font-size:12.5px;color:var(--mut)}
.acc-pick .acc-tck{cursor:pointer}
/* v9.70 · find-a-student, the compact row summary, and the class groups */
.acc-find{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px;padding:14px 16px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--field)}
.acc-find label{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.acc-find input{flex:1 1 320px;min-width:220px;font:inherit;font-size:16px;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}
.acc-find-note{flex:1 1 100%;font-size:12.5px;color:var(--mut);line-height:1.5}
.acc-minis{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.acc-mini{font-family:var(--ff-mono);font-size:11px;letter-spacing:.02em;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.acc-mini.sub{border-color:var(--navy);color:var(--navy)}
.acc-mini.warn{border-color:var(--gold);color:#8a6a12;background:rgba(212,168,40,.10)}
.acc-group{margin:0 0 18px}
.acc-group-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:14px 0 8px;padding-bottom:5px;
  border-bottom:1.5px solid var(--line);font-weight:600;font-size:15px}
.acc-group-h b{font-family:var(--ff-mono);font-size:12px;font-weight:400;color:var(--mut)}
.acc-group-note{font-weight:400;font-size:12.5px;color:var(--mut)}
.acc-row.open{border-color:var(--navy)}
.acc-who{font-size:15.5px;font-weight:600;margin-right:2px}
.acc-row .acc-who + .acc-code{font-size:11.5px;opacity:.75;background:none;padding:0 6px 0 0}
/* v9.69 · the object count on each class button. Two classes holding the same objects is
   invisible on a screen and obvious in a number. */
.fp-pickn{font-family:var(--ff-mono);font-size:10.5px;font-style:normal;margin-left:6px;
  opacity:.72;letter-spacing:.02em}

.fp-classbar{margin:16px 0 0;padding:22px 24px;border-radius:16px;color:#fff;
  background:linear-gradient(160deg,#1B2740 0%,#243458 62%,#2C3F68 100%)}
.fp-cb-top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.fp-cb-eyeb{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#FFE873}
.fp-classbar h2{font-family:var(--ff-disp);font-weight:500;font-size:clamp(30px,5.6vw,42px);
  line-height:1;margin:7px 0 3px;color:#fff}
.fp-cb-band{font-family:var(--ff-mono);font-size:13.5px;color:#CBD4EC}
.fp-cb-vi{font-size:13px;color:#98A6CC;margin-top:5px;max-width:56ch}
.fp-streak{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.10);
  border-radius:999px;padding:6px 13px;font-family:var(--ff-mono);font-size:12px;color:#CBD4EC;flex:none}
.fp-streak b{color:#fff;font-size:15px}
.fp-streak.met{background:rgba(255,232,115,.18);color:#FFE873}
.fp-cb-prog{margin-top:18px}
.fp-cb-lab{display:flex;justify-content:space-between;gap:10px;font-family:var(--ff-mono);
  font-size:10.5px;letter-spacing:.1em;color:#98A6CC;margin-bottom:6px}
.fp-termbar{height:7px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.fp-termbar i{display:block;height:100%;background:#FFE873;border-radius:99px;transition:width .5s ease}

.fp-next{display:flex;gap:14px;align-items:center;background:var(--card);border:1.5px solid var(--line);
  border-left:4px solid var(--red);border-radius:14px;padding:15px 18px;margin-top:12px;
  cursor:pointer;width:100%;text-align:left}
.fp-next:hover{border-color:var(--navy);border-left-color:var(--red)}
.fp-next-ic{width:34px;height:34px;display:grid;place-items:center;flex:none;color:var(--red)}
.fp-next-ic svg{width:22px;height:22px}
.fp-next-tx{flex:1;min-width:0}
.fp-next-tx i{display:block;font-style:normal;font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.fp-next-tx b{display:block;font-size:16.5px;margin:3px 0 2px}
.fp-next-tx small{display:block;font-size:12.5px;color:var(--mut)}
.fp-next-go{font-family:var(--ff-mono);font-size:12.5px;color:var(--navy);font-weight:600;
  white-space:nowrap;flex:none}
.fp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.fp-chip{font:inherit;font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink)}
.fp-chip:hover{border-color:var(--navy);color:var(--navy)}

.fp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:30px 0 12px;border-top:1px solid var(--line);padding-top:18px}
.fp-head h2{font-family:var(--ff-disp);font-weight:500;font-size:23px;margin:0}
.fp-head span{font-family:var(--ff-mono);font-size:11px;color:var(--mut)}

/* Four strands in a 2x2. auto-fit gave three columns on a laptop and left a hole
   bottom-right, which is most of why v9.56 read as unfinished. */
.fp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.fp-grid{grid-template-columns:1fr}}
.fp-strand{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px 14px}
.fp-strand.empty{background:transparent;border-style:dashed}
.fp-soon{margin:11px 0 2px;font-size:12.5px;line-height:1.5;color:var(--mut)}
.fp-soon b{color:var(--ink)}
.fp-srow{display:flex;align-items:center;gap:10px}
.fp-dot{width:28px;height:28px;border-radius:8px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:14px;flex:none}
.fp-strand h3{flex:1;margin:0;font-size:17.5px}
.fp-frac{font-family:var(--ff-mono);font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.fp-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:11px 0 12px}
.fp-bar.none{background:transparent;height:6px}
.fp-bar i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .5s ease}
.fp-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.fp-st{border:1px solid var(--line);border-radius:9px;padding:8px 10px;cursor:pointer;background:var(--card);
  display:flex;flex-direction:column;gap:2px;text-align:left}
.fp-st:hover{border-color:var(--navy)}
.fp-st b{font-size:12.5px;font-weight:600}
.fp-st em{font-style:normal;font-family:var(--ff-mono);font-size:10.5px;color:var(--mut);line-height:1.35}
.fp-st.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.fp-st.on em{color:var(--navy)}
.fp-st.done{border-color:var(--ok);background:var(--ok-soft)}
.fp-st.done em{color:var(--ok)}
.fp-st.off{opacity:.45;border-style:dashed;cursor:default}
.fp-st.off:hover{border-color:var(--line)}

.fp-clo{margin-top:12px;border-top:1px solid var(--line);padding-top:9px}
.fp-clo summary{cursor:pointer;font-size:12px;color:var(--mut);list-style:none}
.fp-clo summary::-webkit-details-marker{display:none}
.fp-clo summary::before{content:"▸ ";color:var(--navy)}
.fp-clo[open] summary::before{content:"▾ "}
.fp-clo summary b{font-family:var(--ff-mono);font-size:11px;color:var(--ink)}
.fp-clo p{margin:8px 0 2px;font-size:12.5px;line-height:1.5;color:var(--mut)}
.fp-clo p span{display:block;margin-top:4px;opacity:.85}

.fp-locked{display:flex;gap:11px;align-items:center;margin-top:12px;padding:12px 15px;
  border:1px dashed var(--line);border-radius:12px;font-size:12.5px;color:var(--mut)}
.fp-locked b{color:var(--ink)}
.fp-locked > div > span{display:block;margin-top:2px}

.fp-vocab{display:flex;gap:15px;align-items:center;margin-top:12px;padding:16px 18px;flex-wrap:wrap;
  border-radius:14px;background:#1B2740;color:#fff}
.fp-v-ic{font-size:24px;flex:none}
.fp-v-tx{flex:1}
.fp-v-tx b{display:block;font-family:var(--ff-disp);font-weight:500;font-size:20px}
.fp-v-tx span{display:block;font-size:12.5px;color:#B9C4E2;margin-top:2px}

/* Phone: the strands become short rows, which is most of the 5.4 screens v9.56 spent. */
@media (max-width:620px){
  .fp-classbar{padding:18px 17px;border-radius:14px}
  .fp-cb-top{flex-direction:column;gap:12px}
  .fp-grid{grid-template-columns:1fr;gap:9px}
  .fp-strand{padding:13px 14px 12px}
  .fp-stages{grid-template-columns:1fr 1fr 1fr;gap:5px}
  .fp-st{padding:7px 8px}
  .fp-st b{font-size:11.5px}
  .fp-st em{font-size:9.5px}
  .fp-next{padding:13px 14px;gap:10px}
  .fp-next-tx b{font-size:15px}
  .fp-next-go{font-size:0}
  .fp-next-go::after{content:"\2192";font-size:19px}
  .fp-head{flex-direction:column;align-items:flex-start;gap:3px}
  .fp-vocab{flex-direction:column;align-items:flex-start;gap:11px}
  .fp-vocab .btn{width:100%}
  .fp-v-tx span{max-width:none}
}

/* ---- v9.58 · sticky nav, stage switcher, phone bottom bar ----------------- */
/* The global nav stops scrolling away. NN/g: a breadcrumb supplements a global
   nav bar, so the bar has to still be there when the crumb is read. */
.navbar-outer{position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.6) blur(6px)}

.crumb b{color:var(--mut); font-weight:400; margin:0 2px}

.fp-stagebar{position:sticky; top:47px; z-index:35; background:var(--card);
  border-bottom:1px solid var(--line); margin:0 0 14px}
.fp-sb-in{display:flex; align-items:center; gap:14px; padding:9px 0}
.fp-sb-lb{font-family:var(--ff-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mut); flex:none}
.fp-sb-btns{display:flex; gap:7px; flex:1; min-width:0}
.fp-sb-btn{flex:1; min-width:0; font:inherit; text-align:left; cursor:pointer; background:transparent;
  border:1px solid var(--line); border-radius:9px; padding:7px 11px; color:var(--ink);
  display:flex; flex-direction:column; gap:1px}
.fp-sb-btn b{font-size:13px; font-weight:600}
.fp-sb-btn em{font-style:normal; font-family:var(--ff-mono); font-size:10.5px; color:var(--mut)}
.fp-sb-btn:hover{border-color:var(--navy)}
.fp-sb-btn.on{background:var(--navy); border-color:var(--navy); color:#fff}
.fp-sb-btn.on em{color:#CBD4EC}
.fp-sb-btn.off{opacity:.4; cursor:default; display:flex; flex-direction:column}
.fp-sb-note{font-size:12px; color:var(--mut); padding:0 0 9px; border-top:1px dashed var(--line); margin-top:2px; padding-top:8px}


/* ---- 10.87 · MY DASHBOARD (the student's flight log) ------------------------------ */
.dsb{padding-bottom:90px}
.dsb-head{display:grid; grid-template-columns:1fr auto; gap:22px; align-items:end; padding:24px 0 18px;
  border-bottom:1.5px solid var(--ink); margin-bottom:22px}
.dsb-eye{font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--red)}
.dsb-h1{font-family:var(--ff-disp); font-weight:500; font-size:clamp(32px,5vw,52px); line-height:1.02; margin:8px 0 6px; color:var(--ink)}
.dsb-h1 em{font-style:italic; font-weight:400}
.dsb-sub{font-size:14px; color:var(--mut)}
.dsb-pass{display:flex; border:1.5px solid var(--ink); border-radius:12px; background:var(--card); overflow:hidden; min-width:300px}
.dsb-pass > div{padding:10px 14px}
.dsb-pass .stub{border-left:1.5px dashed var(--line); text-align:center; min-width:92px; display:flex; flex-direction:column; justify-content:center}
.dsb-pass small{display:block; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
.dsb-pass b{display:block; font-family:var(--ff-disp); font-size:22px; font-weight:600; color:var(--ink); line-height:1.15}
.dsb-pass .bar{height:4px; background:var(--line); border-radius:3px; margin-top:6px; overflow:hidden}
.dsb-pass .bar i{display:block; height:100%; background:var(--gold,#E8B931)}
.dsb-inst{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:14px; background:var(--card); margin-bottom:18px}
.dsb-inst > div{padding:14px 16px 13px; border-left:1px solid var(--line)}
.dsb-inst > div:first-child{border-left:none}
.dsb-inst .n{font-family:var(--ff-disp); font-size:38px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.dsb-inst .n sub{font-size:15px; color:var(--mut); vertical-align:baseline; margin-left:2px}
.dsb-inst .l{font-size:13px; font-weight:600; color:var(--ink); margin-top:6px}
.dsb-inst .l em{display:block; font-style:normal; font-weight:400; color:var(--mut); font-size:12px}
.dsb-inst .ok .n{color:var(--ok)} .dsb-inst .warn .n{color:var(--red)}
.dsb-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:18px}
.dsb-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; min-width:0}
.dsb-card.wide{grid-column:1 / -1}
.dsb-ch{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.dsb-ch h2{font-family:var(--ff-disp); font-weight:500; font-size:23px; margin:0; color:var(--ink)}
.dsb-ch h2 span{font-family:var(--ff-body); font-size:13px; color:var(--mut); font-weight:400; margin-left:6px}
.dsb-ch .k{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.dsb-chips{display:flex; gap:6px}
.dsb-chips button{font:inherit; font-size:12.5px; border:1px solid var(--line); background:transparent; color:var(--mut); border-radius:20px; padding:4px 11px; cursor:pointer}
.dsb-chips button.on{background:var(--navy); border-color:var(--navy); color:#fff}
.dsb-svg{width:100%; height:auto; display:block}
.dsb-svg .grid{stroke:var(--line); stroke-width:1}
.dsb-svg .pass{stroke:var(--gold,#E8B931); stroke-width:2; stroke-dasharray:6 5}
.dsb-svg .path{fill:none; stroke:var(--navy); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.dsb-svg .area{fill:var(--navy); opacity:.07}
.dsb-svg .dot-ok{fill:var(--ok); stroke:var(--card); stroke-width:2}
.dsb-svg .dot-no{fill:var(--card); stroke:var(--red); stroke-width:2.2}
.dsb-svg text{font-family:var(--ff-mono); font-size:10px; fill:var(--mut)}
.dsb-svg .pl{fill:var(--ink); font-weight:600}
.dsb-key{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--mut); margin-top:8px}
.dsb-key i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:-1px}
.dsb-empty{font-size:14px; color:var(--mut); padding:26px 8px; text-align:center; border:1px dashed var(--line); border-radius:10px}
.dsb-row{padding:10px 0; border-top:1px solid var(--line); cursor:pointer}
.dsb-row:first-of-type{border-top:none; padding-top:2px}
.dsb-row .t{display:flex; justify-content:space-between; gap:10px; font-size:14px}
.dsb-row .t b{font-weight:600; color:var(--ink)}
.dsb-row .t span{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut); white-space:nowrap}
.dsb-seg{display:flex; height:9px; border-radius:5px; overflow:hidden; background:var(--line); margin-top:7px}
.dsb-seg .a{background:var(--ok)} .dsb-seg .b{background:var(--red); opacity:.75}
.dsb-redo{margin-top:12px; border-top:1.5px solid var(--ink); padding-top:10px}
.dsb-redo h3{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:0 0 6px; font-weight:600}
.dsb-redo button{display:flex; width:100%; justify-content:space-between; gap:10px; font:inherit; font-size:13.5px; text-align:left;
  background:transparent; border:none; border-bottom:1px dotted var(--line); padding:7px 2px; color:var(--ink); cursor:pointer}
.dsb-redo button span{font-family:var(--ff-mono); font-size:12px; color:var(--red); white-space:nowrap}
.dsb-redo button:hover{background:var(--field)}
.dsb-mis{display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; font-size:13.5px}
.dsb-mis .bar{grid-column:1 / -1; height:5px; background:var(--red-soft); border-radius:3px; margin:-2px 0 6px}
.dsb-mis .bar i{display:block; height:100%; background:var(--red); border-radius:3px}
.dsb-mis b{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dsb-mis span{font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
.dsb-go{margin-top:12px}
.dsb-next{counter-reset:nx; display:flex; flex-direction:column}
.dsb-next button{counter-increment:nx; display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; font:inherit; text-align:left;
  background:transparent; border:none; border-top:1px solid var(--line); padding:10px 2px; cursor:pointer; color:var(--ink)}
.dsb-next button:first-child{border-top:none}
.dsb-next button::before{content:counter(nx, decimal-leading-zero); font-family:var(--ff-mono); font-size:13px; color:var(--red)}
.dsb-next b{display:block; font-size:14px; font-weight:600}
.dsb-next small{display:block; font-size:12.5px; color:var(--mut)}
.dsb-next button:hover{background:var(--field)}
.dsb-cal{display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr); gap:3px; justify-content:start}
.dsb-cal i{width:13px; height:13px; border-radius:3px; background:var(--line); opacity:.55}
.dsb-cal i.l1{background:var(--ok); opacity:.35} .dsb-cal i.l2{background:var(--ok); opacity:.65} .dsb-cal i.l3{background:var(--ok); opacity:1}
.dsb-cal i.today{outline:1.5px solid var(--ink); outline-offset:1px}
.dsb-calnote{font-size:13px; color:var(--mut); margin-top:10px}
.dsb-calnote b{color:var(--ink)}
.dsb-sec{margin-top:26px}
@media (max-width:900px){
  .dsb-grid{grid-template-columns:1fr}
  .dsb-head{grid-template-columns:1fr}
  .dsb-pass{min-width:0}
}
@media (max-width:620px){
  .dsb-inst{grid-template-columns:1fr 1fr}
  .dsb-inst > div:nth-child(3){border-left:none}
  .dsb-inst > div:nth-child(n+3){border-top:1px solid var(--line)}
  .dsb-inst .n{font-size:32px}
  .dsb-card{padding:15px 14px 14px}
  .dsb-cal i{width:10px; height:10px}
}
/* ---- THE SIDE RAIL · v9.77 ----------------------------------------------
   Desktop only, >= 1100px. Below that this file is inert and the phone layout
   of v9.63/v9.76 stands untouched. See patch_app_rail.py for the measurement
   this replaces: 420px of stacked menus above the first passage, in a window
   whose right-hand 460px were empty. */
.hl-rail{display:none}
@media (min-width:1100px){
  body.rail-on .hl-rail{
    display:flex; flex-direction:column; gap:12px;
    position:fixed; left:0; top:0; bottom:0; width:236px; z-index:60;
    background:var(--card); border-right:1px solid var(--line);
    padding:16px 12px 18px; overflow-y:auto; overscroll-behavior:contain}
  body.rail-on #app{padding-left:236px}
  /* the two menus the rail replaces */
  body.rail-on .navbar-outer{display:none}
  /* the wordmark moves INTO the rail, so the topbar keeps only the chips */
  body.rail-on .topbar .brand{display:none}
  body.rail-on .topbar{justify-content:flex-end}
  body.rail-on .fp-stagebar{display:none}

  .rail-brand{display:flex; align-items:center; padding:2px 8px 0; cursor:pointer}
  .rail-brand svg{max-width:150px; height:auto}
  .rail-class{font-family:var(--ff-mono); font-size:11px; letter-spacing:.11em;
    text-transform:uppercase; color:var(--mut); padding:0 9px; line-height:1.5;
    word-break:break-word}
  .rail-arrows{display:flex; gap:6px; padding:0 6px}
  .rail-arrows button{flex:1; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
    background:transparent; border:1px solid var(--line); border-radius:8px; padding:5px 0;
    color:var(--mut)}
  .rail-arrows button:not(:disabled):hover{border-color:var(--navy); color:var(--ink)}
  .rail-arrows button:disabled{opacity:.35; cursor:default}
  .rail-nav{display:flex; flex-direction:column; gap:2px}
  .rail-it{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    font:inherit; font-size:14.5px; font-weight:600; color:var(--mut); cursor:pointer;
    background:transparent; border:none; border-radius:9px; padding:9px 10px; position:relative}
  .rail-it .nt-ic svg{width:18px; height:18px; display:block}
  .rail-it:not(:disabled):hover{color:var(--ink); background:var(--field)}
  .rail-it.on{color:var(--navy); background:var(--hl-soft)}
  .rail-it.on::before{content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px;
    border-radius:0 3px 3px 0; background:var(--red)}
  body[data-theme="dark"] .rail-it.on, body[data-theme="contrast"] .rail-it.on{color:var(--ink)}
  .rail-it:disabled{opacity:.4; cursor:default}
  .rail-grp{font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--mut); padding:12px 10px 3px; display:flex; align-items:center; gap:8px}
  .rail-grp::after{content:""; flex:1; height:1px; background:var(--line)}
  /* the Learn/Practise/Perform group, nested under the skill it belongs to */
  .rail-stages{display:flex; flex-direction:column; gap:3px; margin:1px 0 5px 20px;
    padding-left:11px; border-left:1px solid var(--line)}
  .rail-st{display:flex; justify-content:space-between; align-items:baseline; gap:8px;
    font:inherit; text-align:left; cursor:pointer; background:transparent;
    border:1px solid transparent; border-radius:8px; padding:5px 9px; color:var(--ink)}
  .rail-st b{font-size:12.5px; font-weight:600}
  .rail-st em{font-style:normal; font-family:var(--ff-mono); font-size:10px; color:var(--mut)}
  .rail-st:not(:disabled):hover{border-color:var(--line); background:var(--field)}
  .rail-st.on{background:var(--navy); color:#fff}
  .rail-st.on em{color:#CBD4EC}
  .rail-st.off{opacity:.4; cursor:default}
  .rail-note{font-size:11.5px; line-height:1.45; color:var(--mut); padding:2px 9px 0}
  .rail-foot{margin-top:auto; padding:8px 9px 0; border-top:1px solid var(--line);
    font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; color:var(--mut)}
}

/* ---- phone: the menu goes to the thumb ---------------------------------- */
.fp-bottombar{display:none}
.fp-sheet, .fp-sheet-bg{display:none}
@media (max-width:760px){
  .navbar-outer{position:sticky; top:0}
  .fp-stagebar{top:44px}
  .fp-sb-in{gap:8px; padding:8px 0}
  .fp-sb-lb{display:none}
  .fp-sb-btn{padding:6px 8px}
  .fp-sb-btn b{font-size:12px}
  .fp-sb-btn em{font-size:9.5px}
  /* v9.63 · fpBottomBarHtml() renders the bar for IELTS ONLY, so only IELTS pays
     for it. Nine courses were reserving 64 px for a bar they never draw. */
  body:has(.fp-bottombar){padding-bottom:64px}
  .fp-bottombar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--card); border-top:1px solid var(--line); padding:5px 4px calc(5px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 18px rgba(0,0,0,.07)}
  .fp-bb-item{flex:1; min-width:0; background:transparent; border:0; cursor:pointer; padding:6px 2px;
    display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--mut);
    font-family:var(--ff-body); font-size:10.5px; min-height:48px}
  .fp-bb-item.on{color:var(--navy); font-weight:600}
  .fp-bb-ic{font-size:17px; line-height:1}
  .fp-bb-ic svg{width:19px; height:19px}
  /* v9.63 · this used to read `.dictfab{bottom:74px !important}`. The comment said
     BUTTONS, plural; only one of them got the offset, and it got it on every course
     rather than the one with a bar. hlFootStack() now owns every bottom in the
     stack and measures the bar instead of assuming it. */
  .fp-sheet-bg{display:block; position:fixed; inset:0; background:rgba(12,18,32,.5); z-index:80}
  .fp-sheet{display:block; position:fixed; left:0; right:0; bottom:0; z-index:81;
    background:var(--card); border-radius:18px 18px 0 0; padding:10px 16px calc(18px + env(safe-area-inset-bottom));
    max-height:78vh; overflow:auto; box-shadow:0 -14px 40px rgba(0,0,0,.3)}
  .fp-sheet-grab{width:38px; height:4px; border-radius:99px; background:var(--line); margin:2px auto 12px}
  .fp-sheet h3{margin:0 0 10px; font-size:16px}
  .fp-sheet-row{border-top:1px solid var(--line); padding:11px 0}
  .fp-sheet-nm{display:flex; align-items:center; gap:9px; margin-bottom:8px}
  .fp-sheet-nm b{flex:1; font-size:15px}
  .fp-sheet-nm i{font-style:normal; font-family:var(--ff-mono); font-size:11.5px; color:var(--mut)}
  .fp-sheet-st{display:flex; gap:7px}
  .fp-sheet-st button, .fp-sheet-st span{flex:1; font:inherit; font-size:12.5px; padding:9px 6px;
    border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; text-align:center}
  .fp-sheet-st span{opacity:.35; cursor:default}
  .fp-sheet-x{width:100%; margin-top:14px; padding:12px; border-radius:11px; border:1px solid var(--line);
    background:transparent; font:inherit; font-size:14px; color:var(--mut); cursor:pointer}
}

/* ---- v9.60 · the Flight Path, interactive -------------------------------- */
.ol-wrap{max-width:980px; padding-bottom:80px}
.ol-hero{padding:20px 0 18px}
.ol-eyeb{font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mut)}
.ol-hero h1{font-family:var(--ff-disp); font-weight:500; font-size:clamp(34px,6vw,54px); line-height:1.03; margin:8px 0 12px}
.ol-sub{font-size:16px; line-height:1.6; color:var(--mut); max-width:66ch; margin:0 0 8px}
.ol-sub b{color:var(--ink)}
.ol-sub.vn{font-size:14px; opacity:.9}

/* the chart — data marks validated in both modes, see the note in viewOutline */
.viz-root{ --viz-data:#2a78d6; --viz-here:#C93A3A; --viz-grid:var(--line); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .viz-root{ --viz-data:#3987e5; --viz-here:#e34948; }
}
body[data-theme="dark"] .viz-root{ --viz-data:#3987e5; --viz-here:#e34948; }
.ol-chartbox{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px 14px}
.ol-c-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:4px}
.ol-c-head h2{font-family:var(--ff-disp); font-weight:500; font-size:21px; margin:0}
.ol-c-head span{font-size:12.5px; color:var(--mut)}
.ol-svg{width:100%; height:auto; display:block; margin:6px 0 2px; overflow:visible}
.ol-grid line{stroke:var(--viz-grid); stroke-width:1}
.ol-ax{font-family:var(--ff-mono); font-size:10.5px; fill:var(--mut)}
.ol-area{fill:var(--viz-data); opacity:.10}
.ol-line{fill:none; stroke:var(--viz-data); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.ol-line.dim{stroke:var(--mut); opacity:.4}
.ol-ahead{fill:none; stroke:var(--viz-data); stroke-width:3; stroke-linejoin:round; stroke-linecap:round}
.ol-node.past .ol-dot{fill:var(--mut); opacity:.5}
.ol-node.past .ol-nlab{fill:var(--mut); opacity:.7}
.ol-node{cursor:pointer}
.ol-hit{fill:transparent}
.ol-dot{fill:var(--viz-data); stroke:var(--card); stroke-width:2; transition:r .15s ease}
.ol-node:hover .ol-dot{r:9}
.ol-node.on .ol-dot{stroke:var(--ink); stroke-width:2.5}
.ol-node:focus-visible{outline:none}
.ol-node:focus-visible .ol-dot{stroke:var(--ink); stroke-width:3}
.ol-nlab{font-family:var(--ff-body); font-size:12.5px; font-weight:600; fill:var(--ink)}
.ol-node.on .ol-nlab{fill:var(--viz-data)}
.ol-here line{stroke:var(--viz-here); stroke-width:1.5; stroke-dasharray:3 3}
.ol-here circle{fill:none; stroke:var(--viz-here); stroke-width:2.5}
.ol-here text{font-family:var(--ff-mono); font-size:10px; fill:var(--viz-here); letter-spacing:.06em}

.ol-where{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:10px;
  border-top:1px solid var(--line); padding-top:12px}
.ol-where-lb{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mut); margin-right:4px}
.ol-chip{font:inherit; font-size:13px; padding:7px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink); line-height:1.25; text-align:left}
.ol-chip i{display:block; font-style:normal; font-size:10.5px; color:var(--mut)}
.ol-chip:hover{border-color:var(--viz-data)}
.ol-chip.on{background:var(--viz-here); border-color:var(--viz-here); color:#fff}
.ol-chip.on i{color:rgba(255,255,255,.8)}
.ol-chip.clear{opacity:.6}
.ol-ans{margin-top:12px; background:var(--paper); border-radius:12px; padding:14px 16px}
.ol-ans.none{margin-top:12px; font-size:13px; color:var(--mut); padding:12px 0 2px}
.ol-ans.none span{display:block; font-size:12px; opacity:.85}
.ol-ans-row{display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px}
.ol-ans-row b{display:block; font-size:17px; line-height:1.25}
.ol-ans-row span{display:block; font-size:11.5px; color:var(--mut); margin-top:2px}
.ol-ans-note{margin:11px 0 0; font-size:12.5px; color:var(--mut); line-height:1.5}
.ol-ans-note i{display:block; font-style:normal; margin-top:3px}

.ol-tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0 10px}
.ol-tab{font:inherit; cursor:pointer; text-align:left; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; padding:11px 13px}
.ol-tab b{display:block; font-family:var(--ff-disp); font-weight:500; font-size:19px}
.ol-tab span{display:block; font-family:var(--ff-mono); font-size:11px; color:var(--mut); margin-top:1px}
.ol-tab i{display:block; font-style:normal; font-family:var(--ff-mono); font-size:11px; color:var(--mut); margin-top:5px}
.ol-tab:hover{border-color:var(--viz-data)}
.ol-tab.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.ol-tab.on b{color:var(--ink)}

.ol-panel{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:8px}
.ol-panel.empty{border-style:dashed; text-align:center; padding:26px 22px; color:var(--mut); font-size:14px}
.ol-panel.empty span{display:block; font-size:12.5px; opacity:.85; margin-top:4px}
.ol-p-head{display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:flex-start}
.ol-p-eyeb{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--mut)}
.ol-panel h3{font-family:var(--ff-disp); font-weight:500; font-size:30px; margin:4px 0 2px}
.ol-p-band{font-family:var(--ff-mono); font-size:13px; color:var(--viz-data)}
.ol-p-vi{font-size:12.5px; color:var(--mut); margin-top:3px}
.ol-p-nums{display:flex; gap:20px}
.ol-p-nums b{display:block; font-family:var(--ff-mono); font-size:22px; line-height:1}
.ol-p-nums span{display:block; font-size:10.5px; color:var(--mut); margin-top:3px; font-family:var(--ff-mono)}
.ol-p-tag{margin:12px 0 14px; font-size:14.5px; color:var(--mut); max-width:64ch}
.ol-p-skills{display:grid; grid-template-columns:repeat(2,1fr); gap:9px}
.ol-p-skills > div{background:var(--paper); border-radius:10px; padding:11px 13px}
.ol-p-skills b{display:block; font-size:13.5px}
.ol-p-skills span{display:block; font-size:12.5px; color:var(--mut); line-height:1.5; margin-top:2px}
.ol-p-check{margin-top:12px; font-family:var(--ff-mono); font-size:11.5px; color:var(--ok)}

.ol-box{margin:26px 0; padding-top:20px; border-top:1px solid var(--line)}
.ol-box h2{font-family:var(--ff-disp); font-weight:500; font-size:24px; margin:0 0 12px}
.ol-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.ol-grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.ol-grid3 > div, .ol-grid2 > div{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:14px 16px}
.ol-grid3 b, .ol-grid2 b{display:block; font-size:15.5px; margin-bottom:5px}
.ol-grid3 span, .ol-grid2 span{display:block; font-size:13px; line-height:1.55; color:var(--mut)}
.ol-grid2 i{display:block; font-style:normal; margin-top:6px; font-size:12px}
.ol-note{margin:12px 0 0; font-size:14px; background:var(--hl-soft); border-radius:9px; padding:11px 14px}
.ol-honest .ol-grid2 > div{border-left:3px solid var(--viz-here)}
.ol-steps{display:grid; gap:10px}
.ol-steps > div{display:grid; grid-template-columns:32px 1fr; gap:11px; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:11px; padding:13px 15px}
.ol-steps > div > span{display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--navy); color:#fff; font-family:var(--ff-mono); font-size:12.5px}
.ol-steps b{font-size:15px}
.ol-steps p{margin:3px 0 0; font-size:13px; color:var(--mut); line-height:1.55}
.ol-foot{margin-top:30px; padding-top:14px; border-top:2px solid var(--ink); font-size:12.5px; color:var(--mut)}
.ol-fine{font-size:11px; line-height:1.6; margin-top:6px}

@media (max-width:820px){
  /* The SVG's text is in viewBox units, so a 760-unit box drawn at ~308 px renders a
     12.5-unit label at about 5 px: unreadable, and invisible in a desktop screenshot.
     Scale the type up in viewBox units so it lands at roughly the same real size. */
  .ol-ax{font-size:21px}
  .ol-nlab{font-size:25px}
  .ol-here text{font-size:20px}
  .ol-dot{stroke-width:4}
  .ol-line, .ol-ahead{stroke-width:5}
  .ol-line.dim{stroke-width:4}
  .ol-here line{stroke-width:3}
  .ol-here circle{stroke-width:5}
  /* let the chart rise up the page — the intro is for reading, the chart is the point */
  .ol-hero{padding:14px 0 12px}
  .ol-hero h1{font-size:clamp(30px,8vw,40px); margin:6px 0 9px}
  .ol-sub{font-size:14.5px; line-height:1.55}
  .ol-sub.vn{font-size:13px}
  .ol-c-head h2{font-size:19px}
  .ol-chartbox{padding:15px 14px 12px}
  .ol-tabs{grid-template-columns:repeat(2,1fr)}
  .ol-grid3, .ol-grid2, .ol-p-skills{grid-template-columns:1fr}
  .ol-ans-row{grid-template-columns:1fr; gap:9px}
  .ol-p-nums{gap:16px}
  .ol-panel h3{font-size:25px}
  .ol-c-head{flex-direction:column; gap:8px}
}
@media print{
  .topbar,.navbar-outer,.fp-stagebar,.fp-bottombar,.dictfab,.dtdfab,.crumb,.ol-print,.hl-rail,
  .news-banner,.fb-banner,.ol-where,.ol-tabs{display:none !important}
  body{background:#fff}
  .ol-wrap{max-width:none; padding:0}
  .ol-chartbox,.ol-panel,.ol-box,.ol-steps > div{break-inside:avoid}
  /* on paper every class is shown, because there is nothing to tap */
  .ol-panel.empty{display:none}
  .ol-print-all{display:block !important}
  a{text-decoration:none; color:inherit}
}
.ol-print-all{display:none}

.fp-outline-link{display:flex; gap:14px; align-items:center; margin-top:12px; padding:15px 18px; cursor:pointer;
  border:1px solid var(--line); border-radius:14px; background:var(--card)}
.fp-outline-link:hover{border-color:var(--navy)}
.fp-outline-link > span{font-size:20px}
.fp-outline-link div{flex:1}
.fp-outline-link b{display:block; font-size:15.5px}
.fp-outline-link div span{display:block; font-size:12.5px; color:var(--mut); margin-top:2px}
.fp-outline-link i{font-style:normal}
.fp-outline-link em{font-style:normal; font-family:var(--ff-mono); font-size:12px; color:var(--navy); white-space:nowrap}

/* v9.59 · teacher codes are a different kind of thing and look like it */
.acc-teach{border-color:var(--red) !important; border-style:solid !important}
.acc-teach-warn{background:var(--red-soft); border:1px solid var(--red); border-radius:10px;
  padding:11px 14px; margin-bottom:12px; font-size:13px; line-height:1.55; color:var(--ink)}
.acc-teach-warn span{display:block; margin-top:5px; color:var(--mut)}
.acc-chip.teach{background:var(--red); color:#fff}
/* v9.94 · 29 Sep 2026 · the rebuilt Access codes page (Hai approved the design). */
.ax{--ax-hover:color-mix(in srgb,var(--navy) 9%,var(--card)); display:flex; flex-direction:column; gap:14px; margin-top:6px}
.ax [hidden]{display:none !important}
.ax-top{display:flex; gap:12px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap}
.ax-lede{margin:0; color:var(--mut); max-width:62ch; font-size:14px}
.ax-topbtns{display:flex; gap:8px; align-items:center}
.ax-note{font-size:12.5px; color:var(--mut); margin:0}
.ax-drawer{background:var(--card); border:1.5px solid var(--navy); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px}
.ax-dh{display:flex; justify-content:space-between; align-items:center; gap:8px}
.ax-dh h2{font:600 20px var(--ff-disp); margin:0}
.ax-drawer .acc-add{margin:0; border-style:solid}
.ax-drawer textarea{flex:1 1 100%; border:1.5px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--field); color:var(--ink); font-family:inherit; font-size:14px}
.ax-tabs{display:flex; gap:6px; flex-wrap:wrap}
.ax-tab,.ax-tog{cursor:pointer; border:1.5px solid var(--line); border-radius:999px; padding:4px 12px; font:inherit; font-size:13.5px; background:var(--card); color:var(--ink)}
.ax-tab.on,.ax-tog.on{background:var(--navy); color:var(--btn-fg); border-color:var(--navy)}
.ax-kpis{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.ax-kpi{cursor:pointer; border:0; border-right:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; text-align:left; padding:12px 16px; display:flex; flex-direction:column; gap:2px}
.ax-kpi:last-child{border-right:0}
.ax-kpi .l{font:600 10.5px var(--ff-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.ax-kpi .n{font:600 28px/1.1 var(--ff-disp); font-variant-numeric:tabular-nums}
.ax-kpi .s{font-size:12px; color:var(--mut)}
.ax-kpi.on{background:var(--ax-hover); box-shadow:inset 0 -3px 0 var(--navy)}
.ax-kpi.warn .n{color:var(--red)}
.ax-main{display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start}
.ax-rail{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:2px; position:sticky; top:12px}
.ax-rail h3{font:600 10.5px var(--ff-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin:10px 8px 4px}
.ax-cls{cursor:pointer; border:0; background:transparent; color:var(--ink); font:inherit; text-align:left; display:flex; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:6px; font-size:14px}
.ax-cls b{font:500 12px var(--ff-mono); color:var(--mut); font-variant-numeric:tabular-nums}
.ax-cls.on{background:var(--navy); color:var(--btn-fg)} .ax-cls.on b{color:var(--btn-fg)}
.ax-clsrow{display:flex; align-items:center; gap:4px} .ax-clsrow .ax-cls{flex:1 1 auto; min-width:0}
.ax-clscopy{cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--mut); font:500 11.5px var(--ff-mono); padding:4px 7px; border-radius:6px; flex:0 0 auto}
.ax-clscopy:hover{color:var(--navy); border-color:var(--navy)}
.ax-list{display:flex; flex-direction:column; gap:10px; min-width:0}
.ax-bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ax-search{flex:1 1 260px; min-width:0; font:inherit; font-size:16px; padding:10px 12px; border:1.5px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink)}
.ax-select{font:inherit; font-size:14px; padding:9px 10px; border:1.5px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink)}
.ax-copyset{display:flex; gap:6px; flex-wrap:wrap; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.ax-lb{font:600 10.5px var(--ff-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin:0 2px 0 6px}
.ax-lb:first-child{margin-left:0}
.ax-copyset .ax-tog{font-size:12.5px; padding:3px 10px}
.ax-preview{flex:1 1 100%; margin:4px 0 0; font:12.5px/1.5 var(--ff-mono); color:var(--mut); background:var(--paper); border:1px dashed var(--line); border-radius:8px; padding:8px 10px; white-space:pre-wrap; overflow-x:auto}
.ax-scope{font-size:13px; color:var(--mut); display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ax-scope b{color:var(--ink)}
.ax-selbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--navy); color:var(--btn-fg); padding:8px 12px; border-radius:10px}
.ax-selbar .btn{background:transparent; color:var(--btn-fg); border-color:color-mix(in srgb,var(--btn-fg) 45%,transparent)}
.ax-clipfb{display:flex; flex-direction:column; gap:8px; background:var(--gold-soft); border:1px solid var(--gold); border-radius:10px; padding:10px 12px; font-size:13.5px}
.ax-clipfb textarea{font:13px var(--ff-mono); border:1px solid var(--line); border-radius:6px; padding:8px; background:var(--field); color:var(--ink)}
.ax-clipfb .btn{align-self:flex-start}
.ax-table{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.ax-row{display:grid; grid-template-columns:24px minmax(150px,1.4fr) 116px minmax(150px,1.6fr) 118px 46px auto; gap:10px; align-items:center; padding:10px 14px; border-top:1px solid var(--line)}
.ax-row:first-child{border-top:0}
.ax-row.head{font:600 10.5px var(--ff-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mut); background:var(--paper)}
.ax-row.off>*:not(.ax-sw):not(.ax-acts):not(.ax-editor):not(.ax-cb){opacity:.5}
.ax-row.open{background:var(--ax-hover)}
.ax-cb{margin:0; width:16px; height:16px}
.ax-who{min-width:0}
.ax-who b{display:block; font-weight:700; overflow-wrap:anywhere}
.ax-who small{color:var(--mut); font-size:12.5px}
.ax-code{font:600 13px var(--ff-mono); letter-spacing:.04em; cursor:pointer; background:none; border:1px dashed var(--line); border-radius:6px; padding:3px 7px; color:var(--ink); justify-self:start; white-space:nowrap}
.ax-chips{display:flex; gap:4px; flex-wrap:wrap; min-width:0}
.ax-chip{font:500 11.5px var(--ff-mono); border:1px solid var(--line); border-radius:999px; padding:1px 8px; white-space:nowrap}
.ax-chip.g{border-color:var(--navy); color:var(--navy)}
.ax-chip.w{background:var(--gold-soft); border-color:var(--gold)}
.ax-chip.t{border-color:var(--red); color:var(--red)}
.ax-used{font-size:13px; font-variant-numeric:tabular-nums}
.ax-used small{display:block; color:var(--mut); font-size:12px}
.ax-used.never{color:var(--mut)} .ax-used.shared{color:var(--red); font-weight:600}
.ax-sw{cursor:pointer; border:0; padding:0; width:40px; height:22px; border-radius:999px; background:var(--line); position:relative; transition:background .15s ease-out}
.ax-sw::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--card); transition:transform .15s ease-out}
.ax-sw[aria-checked="true"]{background:var(--ok)} .ax-sw[aria-checked="true"]::after{transform:translateX(18px)}
.ax-acts{display:flex; gap:6px; justify-content:flex-end}
.ax-editor{grid-column:2/-1; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:10px}
.ax-editor .r{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ax-editor .l{font:600 10.5px var(--ff-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mut); min-width:92px}
.ax-editor input[type=text],.ax-editor select{font:inherit; font-size:15px; padding:6px 9px; border:1.5px solid var(--line); border-radius:7px; background:var(--field); color:var(--ink)}
.ax-empty{padding:28px; text-align:center; color:var(--mut)}
.ax button:focus-visible,.ax input:focus-visible,.ax select:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
@media (hover:hover){ .ax-kpi:hover,.ax-cls:not(.on):hover{background:var(--ax-hover)} }
@media (max-width:860px){
  .ax-main{grid-template-columns:1fr}
  .ax-rail{position:static; flex-direction:row; flex-wrap:nowrap; gap:6px; overflow-x:auto; padding:8px; -webkit-overflow-scrolling:touch}
  .ax-rail h3{display:none}
  .ax-cls{border:1px solid var(--line); white-space:nowrap; flex:0 0 auto}
  .ax-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ax-kpi:nth-child(3){border-right:0} .ax-kpi:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .ax-row.head{display:none}
  .ax-row{grid-template-columns:24px minmax(0,1fr) auto; grid-template-areas:"c w s" ". k k" ". h h" ". u a"}
  .ax-row>.ax-cb{grid-area:c} .ax-row>.ax-who{grid-area:w} .ax-row>.ax-code{grid-area:k} .ax-row>.ax-chips{grid-area:h}
  .ax-row>.ax-used{grid-area:u} .ax-row>.ax-sw{grid-area:s; justify-self:end} .ax-row>.ax-acts{grid-area:a}
  .ax-editor{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){ .ax-sw,.ax-sw::after{transition:none} }


  /* v10.17 · TOEIC: the test at a glance */
  .ot-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:4px 0 8px}
  .ot-step{background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:18px 18px 16px; text-align:left; cursor:pointer; position:relative; font:inherit; color:inherit}
  .ot-step:hover{border-color:var(--ink)}
  .ot-step .n{font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; color:var(--red); text-transform:uppercase}
  .ot-step h3{margin:6px 0 4px; font-size:19px}
  .ot-step p{margin:0; color:var(--mut); font-size:13.5px; line-height:1.45}
  .ot-step .vi{display:block; font-style:italic; opacity:.72; font-size:12.5px; margin-top:4px}
  .ot-map{display:grid; grid-template-columns:4fr 3fr; gap:14px; margin:6px 0 10px}
  @media (max-width:860px){ .ot-map{grid-template-columns:1fr} }
  .ot-half{border:1.5px solid var(--ink); border-radius:16px; overflow:hidden; background:var(--card)}
  .ot-half-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:12px 16px; background:var(--navy); color:#fff}
  .ot-half-h b{font-family:var(--ff-serif,Georgia,serif); font-size:20px; letter-spacing:.01em}
  .ot-half-h span{font-family:var(--ff-mono); font-size:12px; opacity:.85}
  .ot-tiles{display:grid; grid-template-columns:repeat(4,1fr)}
  .ot-half.rc .ot-tiles{grid-template-columns:repeat(3,1fr)}
  @media (max-width:640px){ .ot-tiles, .ot-half.rc .ot-tiles{grid-template-columns:1fr 1fr} }
  .ot-tile{border:0; border-right:1px solid var(--line); border-top:1px solid var(--line); background:transparent; text-align:left; padding:14px 14px 12px; cursor:pointer; font:inherit; color:inherit; display:flex; flex-direction:column; gap:3px; min-height:150px}
  .ot-tile:hover{background:var(--soft,rgba(255,232,115,.18))}
  .ot-tile .pn{font-family:var(--ff-serif,Georgia,serif); font-size:34px; line-height:1; color:var(--ink)}
  .ot-tile .pn small{font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; color:var(--mut); margin-right:4px; vertical-align:middle}
  .ot-tile .nm{font-weight:700; font-size:14.5px}
  .ot-tile .vi{font-style:italic; opacity:.72; font-size:12px}
  .ot-tile .dt{color:var(--mut); font-size:12.5px; line-height:1.4; margin-top:4px}
  .ot-tile .go{margin-top:auto; padding-top:8px; font-family:var(--ff-mono); font-size:11.5px; color:var(--red)}
  .ot-test{background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:18px 20px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; max-width:820px; margin-bottom:10px}
  .ot-test.first{border-color:var(--gold,#E8B931); box-shadow:0 0 0 3px rgba(232,185,49,.18)}
  .ot-test .mid{flex:1 1 280px; min-width:0}
  .ot-test h3{margin:0; font-size:20px}
  .ot-test .meta{font-family:var(--ff-mono); font-size:12px; color:var(--mut); margin-top:4px}
  .ot-test .tag{display:inline-block; background:var(--gold,#E8B931); color:#1C2740; font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; padding:2px 8px; border-radius:20px; margin-left:8px; vertical-align:middle}
  .ot-test .acts{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
  .ot-test .print{font-size:12.5px; color:var(--mut); background:none; border:0; text-decoration:underline; cursor:pointer; padding:4px}
  .ot-wstep{display:flex; align-items:center; gap:12px; width:100%; margin-top:10px; padding:10px 12px; background:var(--hl-soft); border:1.5px solid #EAD87A; border-radius:12px; color:var(--ink); text-align:left; cursor:pointer; font:inherit}
  .ot-wstep:hover{border-color:var(--red)}
  .ot-chunks{display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:1 1 100%; padding-top:12px; border-top:1px dashed var(--line)}
  .ot-chunks .lb{font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-right:2px}
  .ot-chunks .lb i{text-transform:none; letter-spacing:0; font-family:var(--ff-body); font-size:12.5px; opacity:.85}
  .ot-chunk{display:flex; flex-direction:column; gap:1px; padding:7px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:inherit; text-align:left; cursor:pointer; min-width:0}
  .ot-chunk:hover{border-color:var(--red)}
  .ot-chunk b{font-family:var(--ff-mono); font-size:13.5px}
  .ot-chunk small{font-size:12px; color:var(--mut)}
  .ot-chunk.done{background:var(--ok-soft); border-color:var(--ok)}
  body[data-theme="dark"] .ot-chunk, body[data-theme="contrast"] .ot-chunk{background:transparent}
  @media (max-width:640px){ .ot-chunk{flex:1 1 calc(33% - 8px)} .ot-chunks .lb{width:100%} }
  /* 10.92 · a bottom Part bar (IELTS full test, Foundations two passages) sits where the corner
     pills were, and they covered its Next / Submit button. Lift them above the bar. */
  body:has(.partnav) #hl-chat.locked{display:none}
  body:has(.partnav) .dictfab{bottom:calc(var(--hl-foot-1,18px) + 62px)}
  body:has(.partnav) .dtdfab{bottom:calc(var(--hl-foot-2,70px) + 62px)}
  @media (max-width:640px){ body:has(.partnav) .dictfab{bottom:calc(var(--hl-foot-1,18px) + 112px)} body:has(.partnav) .dtdfab{bottom:calc(var(--hl-foot-2,70px) + 112px)} }
  .ot-wstep.done{background:var(--ok-soft); border-color:var(--ok)}
  .ot-wstep .n{flex:0 0 auto; font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:var(--navy); color:#fff; border-radius:20px; padding:3px 9px}
  .ot-wstep .tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
  .ot-wstep .tx b{font-size:15px}
  .ot-wstep .tx small{font-size:12.5px; color:var(--mut); line-height:1.35}
  .ot-wstep .pg{flex:0 0 auto; font-family:var(--ff-mono); font-size:12px; font-weight:700; color:var(--red); white-space:nowrap}
  body[data-theme="dark"] .ot-wstep, body[data-theme="contrast"] .ot-wstep{color:var(--ink)}
  @media (max-width:640px){ .ot-wstep{flex-wrap:wrap; align-items:flex-start} .ot-wstep .tx{flex-basis:calc(100% - 90px)} .ot-wstep .pg{width:100%; text-align:right} }
  .ot-go{display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; margin:18px 0 8px; max-width:820px}
  .ot-go .tx{flex:1 1 240px; min-width:0}
  .ot-go .tx b{font-size:16px}
  .ot-go .tx small{display:block; color:var(--mut); font-size:13px; margin-top:2px}
  .ot-modes{display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:820px; margin:0 0 6px}
  @media (max-width:640px){ .ot-modes{grid-template-columns:1fr} }
  .ot-modes div{border:1.5px dashed var(--line); border-radius:12px; padding:12px 14px; font-size:13.5px; color:var(--mut)}
  .ot-modes b{color:var(--ink)}
  .ot-part{border-top:1.5px solid var(--ink); padding:18px 0 6px; max-width:860px; scroll-margin-top:90px}
  .ot-part-h{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
  .ot-part-h .pn{font-family:var(--ff-serif,Georgia,serif); font-size:40px; line-height:1}
  .ot-part-h h3{margin:0; font-size:21px}
  .ot-part-h .vi{font-style:italic; opacity:.72; font-size:13px}
  .ot-part p{color:var(--mut); font-size:14px; margin:6px 0 10px; max-width:720px}
  .ot-sets{display:flex; flex-wrap:wrap; gap:8px}
  .ot-set{border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:10px 14px; cursor:pointer; font:inherit; color:inherit; text-align:left; min-width:150px}
  .ot-set:hover{border-color:var(--ink)}
  .ot-set b{display:block; font-size:14px}
  .ot-set small{font-family:var(--ff-mono); font-size:11.5px; color:var(--mut)}
  .ot-set.done{border-color:var(--ok)}

  /* ---------- Speaking Builder 10.18 · lesson page, drill, shadowing, class screen ---------- */
  .sbx-lead{font-size:14.5px; line-height:1.55; margin:6px 0 0; color:var(--ink)}
  .sbx-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 6px}
  .sbx-step{border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:10px 12px 12px; cursor:pointer; text-align:left; font:inherit; color:var(--ink); position:relative}
  .sbx-step b{display:block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--mut); font-weight:600}
  .sbx-step span{display:block; font-weight:700; font-size:15.5px; margin-top:2px}
  .sbx-step em{display:block; font-style:normal; font-size:12.5px; color:var(--mut); margin-top:2px}
  .sbx-step.done{border-color:var(--ok)} .sbx-step.done b{color:var(--ok)}
  .sbx-step:hover{border-color:var(--navy)}
  .sbx-bar{display:block; height:4px; background:var(--field); border-radius:3px; margin-top:8px; overflow:hidden}
  .sbx-bar i{display:block; height:100%; background:var(--ok)}
  .sbx-phase{border-top:2px solid var(--ink); padding-top:14px; margin-top:30px}
  .sbx-phase-h{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
  .sbx-num{font-family:var(--ff-disp); font-size:38px; line-height:1; color:var(--red); font-weight:600}
  .sbx-phase-h h2{font-family:var(--ff-disp); font-size:26px; margin:0; font-weight:600}
  .sbx-when{font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
  .sbx-tools{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0 4px}
  .sbx-tool{border:1.5px solid var(--line); background:var(--card); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:7px}
  .sbx-tool p{margin:0; font-size:14px; line-height:1.5}
  .sbx-tool-h{display:flex; align-items:center; gap:9px}
  .sbx-tool-h h3{margin:0; font-size:17px}
  .sbx-tag{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:var(--ink); color:var(--paper); font-family:var(--ff-mono); font-size:12px; font-weight:700; margin-right:4px}
  .sbx-meter{height:6px; background:var(--field); border:1px solid var(--line); border-radius:4px; overflow:hidden}
  .sbx-meter i{display:block; height:100%; background:var(--ok); transition:width .3s}
  .sbx-src{font-size:12px; color:var(--mut)}
  .sbx-ok{font-size:12px; color:var(--ok); font-weight:600}
  .sbx-wait{font-family:var(--ff-mono); font-size:11.5px; color:var(--red); margin-top:2px}
  .sbx-empty{font-size:13.5px; color:var(--mut); border:1.5px dashed var(--line); border-radius:10px; padding:10px 12px}
  .sbx-clip{display:flex; gap:11px; align-items:center; padding:8px 6px; border-top:1px dashed var(--line); cursor:pointer; border-radius:8px}
  .sbx-clip:hover{background:var(--hl-soft)}
  .sbx-clip img{width:104px; height:58px; object-fit:cover; border-radius:6px; flex:0 0 auto; background:var(--field)}
  .sbx-clip b{font-size:14px}
  .sbx-more>summary .sbx-tag{vertical-align:1px}
  .sbx-more>summary em{font-style:normal; font-weight:400; font-size:12.5px; color:var(--mut); margin-left:8px}
  .sbx-iq{border-top:1px dashed var(--line); padding:4px 0}
  .sbx-iq>summary{cursor:pointer; font-weight:600; font-size:14.5px; padding:6px 0}
  .sbx-ideas{margin:4px 0 10px 20px; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px}
  .sbx-ideg{font-style:italic; margin-top:2px}
  .sbx-h4{font-size:13px; font-family:var(--ff-mono); text-transform:uppercase; letter-spacing:.5px; color:var(--mut); margin:14px 0 4px}
  .sbx-stressgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px 14px; margin:8px 0}
  .sbx-srow{display:flex; flex-direction:column; gap:1px; align-items:flex-start; font-size:14px; padding:4px 0 6px; border-bottom:1px dotted var(--line)}
  .sbx-srow .sb-vipa{font-size:12px; color:var(--mut)}
  .sbx-stress{font-family:var(--ff-mono); font-size:13.5px; letter-spacing:.3px}
  .sbx-stress b{color:var(--red)}
  .sbx-dot{font-style:normal; color:var(--mut); margin:0 1px}
  .sbx-pron{border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; margin:8px 0; background:var(--field)}
  .sbx-chunks{font-size:16.5px; line-height:1.6}
  .sbx-slash{color:var(--red); font-weight:700}
  .sbx-links{font-size:13.5px; color:var(--mut); margin-top:3px}
  .sbx-link{color:var(--red); font-weight:700; position:relative; top:-.25em}
  .sbx-tip{font-size:13.5px; margin-top:4px}
  .sbx-teach{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; border:1.5px solid var(--navy); border-radius:12px; padding:12px 14px; margin-top:12px; background:var(--field); font-size:14px}
  .sbx-stt{border-left:3px solid var(--navy); background:var(--field); border-radius:8px; padding:10px 13px; margin:10px 0; font-size:14px}
  .sbx-sttn{display:flex; gap:16px; flex-wrap:wrap; margin:8px 0 6px; font-size:13.5px}
  .sbx-sttn b{font-family:var(--ff-mono); font-size:16px}
  @media (max-width:720px){ .sbx-steps{grid-template-columns:1fr} .sbx-tools{grid-template-columns:1fr} }
  /* drill */
  .sbd-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin:16px 0 6px}
  .sbd-stage{font-family:var(--ff-disp); font-size:24px; font-weight:600}
  .sbd-count{font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
  .sbd-card{border:1.5px solid var(--line); background:var(--card); border-radius:16px; padding:22px 20px; margin-top:12px; text-align:center}
  .sbd-word{font-family:var(--ff-disp); font-size:clamp(30px,6vw,46px); font-weight:600; line-height:1.15}
  .sbd-meta{margin:6px 0 2px}
  .sbd-mean{font-size:16px; margin:12px 0 4px}
  .sbd-vi{font-size:22px; font-weight:600; margin:4px 0}
  .sbd-eg{font-style:italic; font-size:15px; margin:12px auto 6px; max-width:520px; line-height:1.55}
  .sbd-eg.big{font-size:18px; font-style:normal}
  .sbd-gap{display:inline-block; min-width:70px; border-bottom:2px solid var(--red); color:transparent}
  .sbd-opts{display:flex; flex-direction:column; gap:8px; margin-top:12px; text-align:left}
  .sbd-opt{font:inherit; font-size:15px; text-align:left; border:1.5px solid var(--line); background:var(--field); color:var(--ink); border-radius:10px; padding:11px 14px; cursor:pointer}
  .sbd-opt:hover:not([disabled]){border-color:var(--navy)}
  .sbd-opt.ok{border-color:var(--ok); background:var(--ok-soft)} .sbd-opt.bad{border-color:var(--bad); background:var(--bad-soft)}
  .sbd-type{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px}
  .sbd-type input{font:inherit; font-size:18px; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--field); color:var(--ink); min-width:240px; text-align:center}
  .sbd-fb{margin-top:14px; padding:12px 14px; border-radius:10px; font-size:15px; display:flex; flex-direction:column; gap:8px; align-items:center}
  .sbd-fb.ok{background:var(--ok-soft); color:var(--ok)} .sbd-fb.bad{background:var(--bad-soft)}
  .sbd-dots{display:flex; gap:6px; justify-content:center; margin-top:12px}
  .sbd-dots i{width:9px; height:9px; border-radius:50%; background:var(--line)} .sbd-dots i.on{background:var(--ok)} .sbd-dots i.now{background:var(--navy)}
  .sbd-learned{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
  .sbd-learned span{border:1.5px solid var(--ok); color:var(--ok); border-radius:999px; padding:4px 11px; font-size:14px}
  /* shadowing */
  .sbs-clips{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 10px}
  .sbs-ctab{font:inherit; font-size:13px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:5px 12px; cursor:pointer}
  .sbs-ctab.on{border-color:var(--navy); background:var(--navy); color:var(--btn-fg)}
  .sbs-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:6px 0 10px}
  .sbs-step{font:inherit; font-size:13px; text-align:left; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:8px 10px; cursor:pointer}
  .sbs-step b{font-family:var(--ff-mono); margin-right:6px; color:var(--mut)}
  .sbs-step.on{border-color:var(--navy); box-shadow:inset 0 -3px 0 var(--navy)} .sbs-step.past b{color:var(--ok)}
  .sbs-now{font-size:14.5px; line-height:1.55; margin:4px 0 10px}
  .sbs-video{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden}
  .sbs-video iframe,.sbs-video #sbs-player{position:absolute; inset:0; width:100%; height:100%; border:0}
  .sbs-ctrl{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:10px 0}
  .sbs-ctrl .sep{width:1px; height:22px; background:var(--line)}
  .sbs-ctrl .on{border-color:var(--navy); background:var(--hl-soft)}
  .sbs-ab{font-family:var(--ff-mono); font-size:12.5px; color:var(--mut); margin-left:4px}
  .sbs-rec{border:1.5px solid var(--line); border-radius:12px; padding:6px 12px 10px; margin-top:8px; background:var(--card)}
  .sbs-heard{margin-top:6px} .sbs-heard-t{font-size:16px; margin:3px 0}
  @media (max-width:720px){ .sbs-steps{grid-template-columns:1fr 1fr} }
  /* class screen */
  .sbc-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0 14px}
  .sbc-title{font-family:var(--ff-disp); font-size:30px; font-weight:600}
  .sbc-tabs{display:flex; gap:4px; flex-wrap:wrap}
  .sbc-tab{font:inherit; font-size:15px; font-weight:600; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:8px 14px; cursor:pointer}
  .sbc-tab.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
  .sbc-main{display:grid; grid-template-columns:1fr 260px; gap:18px; align-items:start}
  .sbc-stage{min-height:360px}
  .sbc-big{font-family:var(--ff-disp); font-size:clamp(28px,4.4vw,54px); line-height:1.2; font-weight:600; margin:10px 0 18px}
  .sbc-qn{font-family:var(--ff-mono); font-size:13px; color:var(--mut)}
  .sbc-hint{font-size:13px; color:var(--mut)}
  .sbc-ideas{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
  .sbc-ideas div{border:1.5px solid var(--line); border-radius:12px; padding:12px; background:var(--card); font-size:17px; display:flex; flex-direction:column; gap:6px}
  .sbc-ideas span{font-style:italic; font-size:15px; color:var(--mut)}
  .sbc-frame{margin-top:10px; font-size:17px}
  .sbc-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; margin:10px 0}
  .sbc-tile{font:inherit; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:12px; padding:12px; min-height:96px; cursor:pointer; display:flex; flex-direction:column; gap:5px; justify-content:center; text-align:center}
  .sbc-tile.on{border-color:var(--ok); background:var(--ok-soft)}
  .sbc-tvi{font-size:15px} .sbc-ten{font-family:var(--ff-disp); font-size:24px; font-weight:600} .sbc-tq{font-size:24px; color:var(--mut)}
  .sbc-card{border:1.5px solid #EAD87A; background:linear-gradient(0deg,var(--hl-soft),var(--card)); border-radius:16px; padding:18px 22px}
  .sbc-card ul{font-size:clamp(18px,2.2vw,26px); line-height:1.6; margin:6px 0 0 22px}
  .sbc-say{font-size:18px; color:var(--mut)}
  .sbc-side{border:1.5px solid var(--line); border-radius:14px; padding:14px; background:var(--card); display:flex; flex-direction:column; gap:10px; position:sticky; top:12px}
  .sbc-clockbox{text-align:center}
  .sbc-clock{font-family:var(--ff-mono); font-size:56px; font-weight:700; line-height:1}
  .sbc-clock.up{color:var(--red)}
  .sbc-who{font-family:var(--ff-disp); font-size:28px; font-weight:600; text-align:center; min-height:36px}
  .sbc-list textarea{width:100%; min-height:140px; font:inherit; font-size:14px; border:1.5px solid var(--line); border-radius:8px; padding:8px; background:var(--field); color:var(--ink)}
  .sbc-list summary{cursor:pointer; font-weight:600; font-size:14px}
  .sbc-mform{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; align-items:end; margin:8px 0}
  .sbc-mform label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600}
  .sbc-mform .wide{grid-column:1/-1}
  .sbc-mform input,.sbc-mform select{font:inherit; font-size:15px; padding:8px; border:1.5px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink)}
  .sbc-table{width:100%; border-collapse:collapse; font-size:14.5px; margin:8px 0}
  .sbc-table th,.sbc-table td{border-bottom:1px solid var(--line); padding:6px 8px; text-align:left}
  .sbc-table th{font-family:var(--ff-mono); font-size:12px; color:var(--mut); font-weight:600}
  @media (max-width:860px){ .sbc-main{grid-template-columns:1fr} .sbc-side{position:static} .sbc-ideas{grid-template-columns:1fr} }
  /* 10.20 · Watch & talk scenes */
  .sbc-card{background:var(--card); border:1px solid var(--line); border-left:5px solid var(--sw2,#FFC9DE); border-radius:14px; padding:14px 16px; margin:0 0 12px}
  .sbc-q{font-size:18px; font-weight:700; line-height:1.4; margin:4px 0 6px; color:var(--ink)}
  .sbc-hint{font-size:13.5px; color:var(--mut); margin-top:4px}
  .sbc-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
  .sbc-chip{font:inherit; font-weight:600; font-size:14px; padding:6px 12px; border-radius:999px; border:1.5px solid var(--line); background:var(--sw1,#FFE38A); color:var(--sw-ink,#14182B); cursor:pointer}
  .sbc-item{padding:8px 0 10px; border-bottom:1px dashed var(--line)} .sbc-item:last-child{border-bottom:0}
  .sbc-qq{font-weight:700; font-size:15px; margin-bottom:8px; color:var(--ink)}
  .sbc-opts{display:grid; gap:8px}
  .sbc-opt{font:inherit; font-size:14.5px; text-align:left; padding:10px 12px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer}
  .sbc-opt:hover:not([disabled]){border-color:var(--ink)}
  .sbc-opt.right{border-color:var(--ok); background:var(--ok-soft)}
  .sbc-opt.wrong{border-color:var(--bad); background:var(--bad-soft)}
  .sbc-opt.dim{opacity:.55}
  .sbc-opt[disabled]{cursor:default}
  .sbc-fb{font-size:13.5px; margin-top:6px; font-weight:600} .sbc-fb.ok{color:var(--ok)} .sbc-fb.no{color:var(--bad)}
  body[data-theme="contrast"] .sbc-opt.right{border-color:#FFE100} body[data-theme="contrast"] .sbc-chip{background:#000; color:#FFE100}
  .sbx-cin{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:10px 0 12px }
  .sbx-cinc{ font:inherit; position:relative; text-align:left; padding:0; border:0; background:none; color:var(--ink); cursor:pointer }
  .sbx-cinc img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; display:block; box-shadow:0 8px 20px -10px rgba(0,0,0,.5) }
  .sbx-cinc span{ display:block; font-size:13px; font-weight:600; line-height:1.3; margin-top:6px }
  .sbx-cinc i{ position:absolute; left:6px; top:6px; width:22px; height:22px; border-radius:50%; background:#2f7d55; color:#fff; font-style:normal; font-size:12px; display:grid; place-items:center }
  /* ---------- Word lessons 10.19 (Promova-style word cards) ---------- */
  :root{ --sw0:#C9CCFF; --sw1:#FFE38A; --sw2:#FFC9DE; --sw3:#BFEBD2; --sw-ink:#14182B; }
  body[data-theme="dark"]{ --sw0:#363C78; --sw1:#574A1A; --sw2:#552C41; --sw3:#214B37; --sw-ink:#F2F3FA; }
  body[data-theme="contrast"]{ --sw0:#1A1A00; --sw1:#1A1A00; --sw2:#1A1A00; --sw3:#1A1A00; --sw-ink:#FFE100; }
  .tint0{--sw:var(--sw0)} .tint1{--sw:var(--sw1)} .tint2{--sw:var(--sw2)} .tint3{--sw:var(--sw3)}
  /* the feed */
  .sbw-feed{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:14px 0 6px}
  .sbw-fcard{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; font:inherit; color:var(--sw-ink);
    background:var(--sw); border:0; border-radius:22px; padding:16px 16px 14px; min-height:200px; cursor:pointer; overflow:hidden;
    transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s}
  .sbw-fcard:hover{transform:translateY(-3px); box-shadow:0 10px 24px -14px rgba(20,24,43,.45)}
  .sbw-fcard:focus-visible{outline:3px solid var(--navy); outline-offset:2px}
  .sbw-ftag{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; opacity:.75}
  .sbw-fimg{align-self:center; height:96px; width:auto; max-width:80%; object-fit:contain; margin:4px 0 2px}
  .sbw-fword{align-self:center; font-family:var(--ff-body); font-weight:800; font-size:26px; letter-spacing:-.02em; opacity:.22; margin:28px 0 22px}
  .sbw-ftitle{font-family:var(--ff-body); font-weight:800; font-size:20px; line-height:1.12; letter-spacing:-.02em}
  .sbw-fsub{font-size:13px; opacity:.8}
  .sbw-fgo{margin-top:auto; padding-top:10px; font-weight:700; font-size:13px}
  .sbw-fcard.done .sbw-fgo{opacity:.7}
  /* lesson frame */
  .sbw .crumb{margin-bottom:6px}
  .sbw-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 8px}
  .sbw-step{background:var(--sw); color:var(--sw-ink); border-radius:12px; padding:7px 12px; font-weight:700; font-size:13px}
  .sbw-x{width:38px; height:38px; border-radius:12px; border:0; background:var(--sw); color:var(--sw-ink); font-size:16px; cursor:pointer}
  .sbw-segs{display:flex; gap:4px; margin-bottom:12px}
  .sbw-segs i{flex:1; height:5px; border-radius:3px; background:var(--line)}
  .sbw-segs i.on{background:var(--sw-ink); opacity:.8}
  .sbw-card{background:var(--card); border:1.5px solid var(--sw); border-radius:26px; padding:20px 20px 18px; box-shadow:0 18px 40px -30px rgba(20,24,43,.5)}
  .sbw-card.inR{animation:sbwInR .32s cubic-bezier(.2,.8,.2,1) both}
  .sbw-card.inL{animation:sbwInL .32s cubic-bezier(.2,.8,.2,1) both}
  @keyframes sbwInR{from{opacity:0; transform:translateX(36px)}to{opacity:1; transform:none}}
  @keyframes sbwInL{from{opacity:0; transform:translateX(-36px)}to{opacity:1; transform:none}}
  .sbw-pic{position:relative; display:flex; align-items:center; justify-content:center; height:190px; margin:2px 0 10px}
  .sbw-pic.big{height:240px}
  .sbw-blob{position:absolute; inset:8% 10%; background:var(--sw); border-radius:46% 54% 60% 40% / 44% 42% 58% 56%; animation:sbwBlob .5s cubic-bezier(.2,.8,.2,1) both}
  @keyframes sbwBlob{from{transform:scale(.86); opacity:.4}to{transform:none; opacity:1}}
  .sbw-pic img{position:relative; max-height:100%; max-width:88%; object-fit:contain; animation:sbwPop .45s .06s cubic-bezier(.2,.8,.2,1) both}
  @keyframes sbwPop{from{transform:scale(.92) translateY(6px); opacity:0}to{transform:none; opacity:1}}
  .sbw-stressbig{position:relative; font-family:var(--ff-mono); font-size:26px; color:var(--sw-ink); text-align:center; padding:0 18px; line-height:1.3}
  .sbw-stressbig b{color:var(--red)}
  .sbw-word{font-family:var(--ff-body); font-weight:800; font-size:clamp(28px,6vw,38px); letter-spacing:-.025em; line-height:1.1; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .sbw-word.sm{font-size:24px}
  .sbw-say{width:34px; height:34px; border-radius:50%; border:0; background:var(--sw-ink); color:var(--card); font-size:15px; cursor:pointer; flex:0 0 auto}
  .sbw-say.mini{width:26px; height:26px; font-size:12px; margin-left:6px; vertical-align:middle; background:transparent; color:inherit; border:1.5px solid currentColor; opacity:.55}
  .sbw-mean{font-size:16px; color:var(--mut); margin-top:6px}
  .sbw-more{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); animation:sbwPop .3s both}
  .sbw-vi{font-style:italic; color:var(--ink)} .sbw-vi.c{text-align:center; color:var(--mut); margin-top:4px}
  .sbw-slow{font:inherit; font-size:13px; background:none; border:0; color:var(--navy); cursor:pointer; padding:0}
  .sbw-pill{display:inline-block; margin-top:12px; font:inherit; font-size:13px; font-weight:600; border:0; border-radius:999px; padding:8px 14px; background:var(--sw); color:var(--sw-ink); cursor:pointer}
  .sbw-pill.ghost{background:transparent; border:1.5px solid var(--line); color:var(--mut); font-weight:500}
  .sbw-clip{margin-top:12px} .sbw-clip iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:14px}
  .sbw-usehead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
  .sbw-howto{font-size:13px; color:var(--mut); margin-top:2px}
  .sbw-thumb{width:64px; height:64px; object-fit:contain; background:var(--sw); border-radius:18px; padding:6px; flex:0 0 auto}
  .sbw-chat{display:flex; flex-direction:column; gap:10px; margin-top:16px}
  .sbw-b{max-width:86%; padding:11px 14px; border-radius:18px; font-size:15.5px; line-height:1.5; position:relative}
  .sbw-b.ex{align-self:flex-start; background:var(--field); border:1px solid var(--line); border-bottom-left-radius:6px}
  .sbw-b.me{align-self:flex-end; background:var(--sw); color:var(--sw-ink); border-bottom-right-radius:6px}
  .sbw-b.me b{font-weight:800}
  .sbw-b.big{max-width:100%; font-size:18px; margin:12px 0}
  .sbw-who{display:block; font-family:var(--ff-mono); font-size:10px; letter-spacing:.6px; text-transform:uppercase; opacity:.6; margin-bottom:3px}
  .sbw-chat .sbw-b:nth-child(2){animation:sbwPop .4s .25s both}
  .sbw-tip{font-size:13.5px; margin:14px 0 0; color:var(--ink)}
  /* 10.32 · tappable words, slow button and Vietnamese meaning inside the chat bubbles */
  .sbw-b .sb-w{color:inherit; font-weight:inherit; border-bottom:1px dotted transparent; padding:0}
  .sbw-b .sb-w:hover,.sbw-b .sb-w:focus-visible{border-bottom-color:currentColor; background:rgba(255,214,90,.35)}
  .sbw-b .sb-w.on{background:rgba(255,214,90,.55); border-radius:4px}
  .sbw-ctl{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
  .sbw-b.me .sbw-ctl{justify-content:flex-end}
  .sbw-mini{font:inherit; font-size:12.5px; line-height:1; display:inline-flex; align-items:center; gap:4px; padding:6px 10px; border-radius:999px;
    border:1.5px solid currentColor; background:transparent; color:inherit; opacity:.75; cursor:pointer}
  .sbw-mini:hover{opacity:1}
  .sbw-bvi{margin-top:7px; padding-top:7px; border-top:1px dashed currentColor; font-size:14px; opacity:.85; font-style:italic}
  .sbw-bvi b{font-style:normal}
  .sbw-vitog{display:inline-flex; align-items:center; gap:7px; margin-top:12px; font:inherit; font-size:13px; padding:7px 12px; border-radius:999px;
    border:1.5px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer}
  .sbw-vitog i{width:28px; height:16px; border-radius:999px; background:var(--line); position:relative; transition:background .15s}
  .sbw-vitog i::after{content:""; position:absolute; left:2px; top:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:left .15s}
  .sbw-vitog.on i{background:var(--ok)} .sbw-vitog.on i::after{left:14px}
  .sbw-taphint{font-size:12.5px; color:var(--mut); margin:8px 2px 0}
  .hl-send{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:10px}
  .hl-send .ok{font-weight:700; color:var(--ok)}
  .hl-send .bad{color:var(--red); font-size:13px; flex-basis:100%; text-align:center}
  .prog-chip.hl-done100{background:var(--ok); color:#fff; border-color:var(--ok)}
  .hl-pct{display:inline-flex; font-family:var(--ff-mono); font-size:11px; font-weight:700; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:2px 9px; white-space:nowrap}
  /* 10.36 · How to ... series */
  .how-sec{border:2px solid var(--navy); border-radius:22px; padding:16px 18px; background:var(--card)}
  .how-route{list-style:none; margin:12px 0 10px; padding:0; display:flex; flex-direction:column; gap:8px; position:relative}
  .how-route::before{content:""; position:absolute; left:21px; top:14px; bottom:14px; border-left:2px dashed var(--line)}
  .how-stop,.how-prob{position:relative; width:100%; display:flex; align-items:center; gap:12px; text-align:left; font:inherit; color:var(--ink);
    border:1.5px solid var(--line); border-radius:16px; padding:10px 14px 10px 8px; background:var(--card); cursor:pointer}
  .how-stop:hover,.how-prob:hover{border-color:var(--navy)}
  .how-n{flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; background:var(--navy); color:#fff; font-family:var(--ff-mono); font-size:13px; font-weight:700; z-index:1}
  .how-stop.done .how-n,.how-prob.done .how-n{background:var(--ok)}
  .how-prob .how-n{background:var(--red)}
  .how-st{flex:1; min-width:0; display:flex; flex-direction:column} .how-st small{color:var(--mut); font-size:12.5px}
  .how-go{color:var(--mut)}
  .how-grp{margin:12px 0} .how-grp h3{font-size:16px; margin:0 0 6px} .how-grp h3 span,.how-pcard h3 span{font-weight:400; font-size:12.5px; color:var(--mut)}
  .how-grp h4{font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--mut); margin:8px 0 4px; font-family:var(--ff-mono)}
  .how-b{max-width:88%; padding:10px 13px; border-radius:16px; font-size:15.5px; line-height:1.5; margin:6px 0}
  .how-b.them{background:var(--field); border:1px solid var(--line); border-bottom-left-radius:6px; margin-right:auto}
  .how-b.you{background:var(--sw, var(--sw0)); color:var(--sw-ink, var(--ink)); border-bottom-right-radius:6px; margin-left:auto}
  .how-b .sb-w{color:inherit; border-bottom:1px dotted transparent} .how-b .sb-w:hover{border-bottom-color:currentColor}
  .how-b.hid{opacity:.8; font-style:italic} .how-turn{margin-right:8px}
  .how-note{font-size:12.5px; opacity:.75; margin-top:4px}
  .how-chat{display:flex; flex-direction:column; margin:10px 0}
  .how-goal{border-radius:14px; padding:10px 12px; background:var(--hl-soft); font-size:15px}
  .how-must{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px} .how-must span{border:1px solid var(--line); background:var(--card); border-radius:999px; padding:3px 10px; font-size:12.5px}
  .how-better{margin-top:6px; padding-top:6px; border-top:1px dashed currentColor; font-size:13.5px}
  .how-better span{display:block; font-size:12.5px; opacity:.8}
  .how-win{border-radius:14px; padding:10px 12px; background:var(--ok-soft); color:var(--ok); font-weight:700; margin:8px 0}
  .how-input textarea{width:100%; box-sizing:border-box; font:inherit; font-size:15px; border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--field); color:var(--ink)}
  .how-probs{display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px}
  .how-pcard{border:1.5px solid var(--line); border-radius:16px; padding:12px 14px; background:var(--card)}
  .how-pcard h3{margin:0; font-size:16.5px}
  .how-tip{margin-top:6px; font-size:14px; border-radius:10px; background:var(--hl-soft); padding:8px 10px} .how-tip .sb-vi{display:block}
  .sb-series-h{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:22px 0 8px} .sb-series-h h2{margin:0; font-size:22px; white-space:nowrap} .sb-series-h span{color:var(--mut); font-size:13px}
  /* 10.33 · in-class exercises (speak/ic1033.js) */
  .ic{margin-top:6px}
  .ic-sheet{background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:22px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.12)}
  @media (max-width:640px){ .ic-sheet{padding:12px; border-radius:18px} }
  .ic-head{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px}
  .ic-head h3{margin:0; font-size:20px} .ic-head p{margin:2px 0 0; color:var(--mut); font-size:13.5px}
  .ic-letter{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:inline-grid; place-items:center; background:var(--navy); color:#fff; font-family:var(--ff-mono); font-weight:700}
  .ic-pick,.ic-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px}
  .ic-pbtn{font:inherit; font-size:13px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:7px 12px; cursor:pointer}
  .ic-pbtn b{font-family:var(--ff-mono)} .ic-pbtn.on{background:var(--navy); border-color:var(--navy); color:#fff}
  .ic-q{background:var(--field); border:1px solid var(--line); border-radius:16px; padding:12px 14px; font-size:17px; margin:10px 0}
  .ic-q.class{font-family:var(--ff-disp); font-size:clamp(22px,3vw,36px); line-height:1.25}
  .ic-who,.ic-tag{display:block; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; opacity:.65; margin-bottom:4px}
  .ic-pair{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0}
  .ic-ans{border-radius:16px; padding:12px 14px; font-size:16px; line-height:1.55; border:1.5px solid var(--line); background:var(--card)}
  .ic-ans.weak{border-style:dashed; color:var(--mut)}
  .ic.class .ic-ans{font-size:clamp(17px,1.8vw,24px)}
  .ic-seg{border-radius:6px; padding:1px 3px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
  .ic-seg i{font-style:normal; font-family:var(--ff-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; margin-right:4px; opacity:.8; vertical-align:2px}
  .k-answer{background:rgba(70,110,200,.16)} .k-reason{background:rgba(230,150,40,.22)} .k-example{background:rgba(60,160,110,.2)}
  .k-link{background:rgba(200,70,90,.18)} .k-result{background:rgba(140,90,200,.18)}
  .ic-legend{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0}
  .ic-do{font-size:15px; margin:12px 0 2px; color:var(--ink)}
  .ic-chips{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0}
  .ic-chip{font:inherit; font-size:13px; padding:5px 10px; border-radius:999px; border:1px dashed var(--navy); background:transparent; color:var(--navy); cursor:pointer}
  .ic-in{width:100%; box-sizing:border-box; font:inherit; font-size:15px; border:1.5px solid var(--line); border-radius:10px; padding:9px 11px; background:var(--field); color:var(--ink); margin:6px 0; resize:vertical}
  .ic-ladder,.ic-sides{display:flex; flex-direction:column; gap:8px; margin:10px 0}
  .ic-rung{display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--card)}
  .ic-rung > b{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; background:var(--line); font-size:13px}
  .ic-rung.on > b{background:var(--ok); color:#fff} .ic-rung.off{opacity:.6}
  .ic-soon{font-size:12px; color:var(--mut); margin-top:2px}
  .ic-rbody{flex:1; min-width:0}
  .ic-rh{font-size:14px} .ic-rh span{font-weight:700}
  .ic-model{margin-top:6px; padding:8px 11px; border-left:3px solid var(--ok); background:var(--ok-soft); border-radius:6px; font-size:15px}
  .ic-peek{font:inherit; font-size:12.5px; background:none; border:0; color:var(--navy); text-decoration:underline; cursor:pointer; padding:4px 0}
  .ic-upstep{border:1.5px solid var(--ok); border-radius:14px; padding:10px 12px; margin:8px 0; background:var(--card); animation:sbwPop .35s both}
  .ic-focus{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0} .ic-focus span{background:var(--hl-soft); border-radius:999px; padding:4px 10px; font-size:13px}
  .ic-cues{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin:12px 0}
  .ic-cue{border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--card)}
  .ic-card{border:1.5px solid var(--line); border-radius:16px; padding:12px 16px; background:var(--card); margin:6px 0}
  .ic-card b{font-size:17px} .ic-card ul{margin:6px 0 0 18px; padding:0}
  .ic-boxes{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0}
  .ic-box{border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--card)}
  .ic-boxh{font-weight:700} .ic-boxh span{font-weight:400; font-size:12px; color:var(--mut)}
  .ic-boxq{font-size:13.5px; color:var(--mut); margin:4px 0}
  .ic-notes{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px} .ic-notes span{font-family:var(--ff-mono); font-size:12px; border:1px solid var(--line); border-radius:6px; padding:2px 7px}
  .ic-rounds{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0}
  .ic-round{font:inherit; text-align:left; border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--card); color:var(--ink); cursor:pointer}
  .ic-round b{display:block} .ic-round span{font-size:12.5px; color:var(--mut)}
  .ic-round.on{border-color:var(--navy); box-shadow:0 0 0 2px var(--navy) inset} .ic-round.done{opacity:.6}
  .ic-listen{border-radius:12px; background:var(--hl-soft); padding:10px 12px; font-size:14.5px}
  .ic-listen .sb-vi{display:block}
  .ic-timer{display:flex; align-items:center; gap:12px; justify-content:center; margin:12px 0}
  #ic-clock{font-family:var(--ff-mono); font-size:clamp(34px,6vw,64px); font-weight:700}
  #ic-clock.up{color:var(--red)}
  .ic-think{margin:6px 0} .ic-think summary{cursor:pointer; font-size:13.5px; color:var(--navy)}
  .ic-side.off{display:none} .ic-side{border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--card)}
  .ic-nav{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
  .ic-count{font-family:var(--ff-mono); font-size:12px; color:var(--mut)}
  .ic-rec{margin-top:10px}
  .ic-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:10px}
  .ic-gcard{font:inherit; text-align:left; display:flex; flex-direction:column; gap:3px; border:1.5px solid var(--line); border-radius:16px; padding:12px; background:var(--card); color:var(--ink); cursor:pointer}
  .ic-gcard small{color:var(--mut)} .ic-gcard.done{border-color:var(--ok)}
  .ic-gpart{font-family:var(--ff-mono); font-size:10.5px; text-transform:uppercase; opacity:.6}
  .ic-send-tag{font-size:11.5px; color:var(--navy)}
  @media (max-width:640px){ .ic-pair,.ic-boxes,.ic-rounds{grid-template-columns:1fr} }
  /* 10.35 · idea bank + check and send */
  .ic-bank{margin:10px 0; border:1.5px dashed var(--line); border-radius:14px; padding:8px 12px; background:var(--card)}
  .ic-bank summary{cursor:pointer; font-weight:700; font-size:14.5px}
  .ic-bank summary span{font-weight:400; font-size:12.5px; color:var(--mut); margin-left:6px}
  .ic-bhint{font-size:13px; color:var(--mut); margin:6px 0}
  .ic-bgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; margin-top:6px}
  .ic-idea{border:1px solid var(--line); border-radius:12px; padding:9px 10px; background:var(--field); display:flex; flex-direction:column; gap:4px}
  .ic-idea b{font-size:14px} .ic-ivi{font-size:12px; color:var(--mut); font-style:italic}
  .ic-ieg{font-size:13.5px}
  .ic-iw{display:flex; gap:5px; flex-wrap:wrap}
  .ic-iw .ic-chip{font-size:12px; padding:3px 8px; border-style:solid}
  .ic-chip i{font-style:normal; font-family:var(--ff-mono); font-size:9.5px; margin-right:4px; opacity:.75}
  .ic-chip.lv-B1{border-color:#5c9a6e; color:#2f6b43} .ic-chip.lv-B2{border-color:#c48a2c; color:#8a5a12} .ic-chip.lv-C1{border-color:#8a5cc4; color:#5b3496}
  .ic-check{margin-top:14px; border:1.5px solid var(--navy); border-radius:16px; padding:12px 14px; background:var(--card)}
  .ic-checkh{font-weight:700; font-size:15.5px}
  .ic-ai,.ic-tfb{margin-top:10px; border-radius:12px; padding:10px 12px; background:var(--field); border:1px solid var(--line)}
  .ic-tfb{border-color:var(--ok); background:var(--ok-soft)}
  .ic-aih{font-weight:700; font-size:13.5px; margin:8px 0 4px} .ic-aih.ok{color:var(--ok)}
  .ic-aiu{font-size:14px; margin:4px 0} .ic-aiu .sb-vi{display:block}
  .ic-fix{font-size:14px; margin:3px 0} .ic-fix s{color:var(--red)} .ic-fix span{display:block; font-size:12.5px; color:var(--mut)}
  .ic-ver{font-size:14.5px; margin:5px 0; line-height:1.5}
  .ic-tfix{font-size:15.5px; line-height:1.55; padding:6px 0}
  .ic-wait{margin-top:10px; font-size:13.5px; color:var(--ok)}
  .sbw-nav{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
  .sbw-arrow{height:52px; border-radius:16px; border:1.5px solid var(--sw); background:var(--card); color:var(--ink); font-size:26px; cursor:pointer}
  .sbw-arrow.go{background:var(--sw-ink); color:var(--card); border-color:var(--sw-ink)}
  .sbw-arrow:disabled{opacity:.35; cursor:default}
  /* practice */
  .sbw-card.q{text-align:center}
  .sbw-ask{font-size:13px; color:var(--mut); margin-bottom:10px}
  .sbw-chat.q{text-align:left; margin-top:4px}
  .sbw-gap{display:inline-block; min-width:90px; border-bottom:2.5px solid var(--sw-ink); color:transparent}
  .sbw-gap.fill{min-width:0; padding:0 4px; border-radius:6px; font-weight:700; border-bottom-width:2.5px}
  .sbw-gap.fill.ok{color:var(--ink); background:var(--ok-soft); border-bottom-color:var(--ok)}
  .sbw-gap.fill.bad{color:var(--ink); background:var(--bad-soft); border-bottom-color:var(--bad)}
  .sbw-gap.fill.bad s{text-decoration-thickness:2px}
  .sbw-defq{font-family:var(--ff-body); font-weight:800; font-size:22px; letter-spacing:-.015em; line-height:1.25; margin:6px 0}
  .sbw-hear{width:92px; height:92px; border-radius:50%; border:0; background:var(--sw); color:var(--sw-ink); font-size:36px; cursor:pointer; margin:6px auto 4px; display:block}
  .sbw-hint{font-size:13px; color:var(--mut); margin-top:8px}
  .sbw-opts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
  .sbw-opt{font:inherit; font-weight:600; font-size:15.5px; text-align:left; display:flex; gap:10px; align-items:center; padding:14px; border-radius:16px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; transition:transform .12s, border-color .12s}
  .sbw-opt:hover:not([disabled]){border-color:var(--sw-ink); transform:translateY(-1px)}
  .sbw-k{font-family:var(--ff-mono); font-size:11px; width:20px; height:20px; border-radius:6px; background:var(--field); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--mut)}
  .sbw-opt.ok{border-color:var(--ok); background:var(--ok-soft); animation:sbwYes .35s both}
  .sbw-opt.bad{border-color:var(--bad); background:var(--bad-soft); animation:sbwNo .35s both}
  .sbw-opt.dim{opacity:.62}
  .sbw-opt[disabled]{color:var(--ink); -webkit-text-fill-color:var(--ink)}
  @keyframes sbwYes{40%{transform:scale(1.04)}}
  @keyframes sbwNo{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
  .sbw-type{display:flex; gap:8px; margin-top:12px}
  .sbw-type input:disabled{opacity:1; color:var(--ink); -webkit-text-fill-color:var(--ink)}
  .sbw-type input{flex:1; font:inherit; font-size:18px; padding:13px 14px; border-radius:16px; border:1.5px solid var(--line); background:var(--card); color:var(--ink)}
  .sbw-cta{background:var(--sw-ink)!important; color:var(--card)!important; border:0!important; border-radius:14px!important; padding:13px 22px!important; font-weight:700!important; letter-spacing:.02em}
  .sbw-cta.sm{padding:10px 16px!important}
  .sbw-sheet{margin-top:14px; padding:16px 18px; display:flex; flex-direction:column; gap:6px; border-radius:22px;
    animation:sbwUp .3s cubic-bezier(.2,.8,.2,1) both; font-size:15px}
  .sbw-sheet.ok{background:var(--ok-soft); color:var(--ink)} .sbw-sheet.bad{background:var(--bad-soft); color:var(--ink)}
  .sbw-sheet-h{font-family:var(--ff-body); font-weight:800; font-size:20px}
  .sbw-sheet.ok .sbw-sheet-h{color:var(--ok)} .sbw-sheet.bad .sbw-sheet-h{color:var(--bad)}
  .sbw-again{font-size:13px; color:var(--mut)}
  .sbw-sheet .sbw-cta{margin-top:6px}
  @keyframes sbwUp{from{transform:translateY(24px); opacity:0}to{transform:none; opacity:1}}
  /* say it, break, done */
  .sbw-targets{display:flex; flex-wrap:wrap; gap:8px}
  .sbw-targets span{background:var(--sw); color:var(--sw-ink); border-radius:999px; padding:6px 12px; font-weight:700; font-size:14px}
  .sbw-targets span.hit{background:var(--ok-soft); color:var(--ok)} .sbw-targets span.miss{background:var(--field); color:var(--mut); text-decoration:line-through}
  .sbw-heard{font-size:16px; margin:10px 0 4px; font-style:italic}
  .sbw-verdict{font-weight:700; margin-bottom:6px}
  .sbw-break{text-align:center; background:var(--sw); color:var(--sw-ink); border-radius:28px; padding:48px 22px 30px; margin-top:16px; animation:sbwPop .4s both}
  .sbw-break h2{font-family:var(--ff-body); font-weight:800; font-size:clamp(32px,7vw,44px); letter-spacing:-.03em; margin:8px 0}
  .sbw-break p{font-size:15px} .sbw-break .sb-vi{color:inherit; opacity:.75}
  .sbw-burst{width:76px; height:76px; margin:0 auto; display:block; fill:var(--sw-ink); animation:sbwSpin .6s cubic-bezier(.2,.8,.2,1) both}
  @keyframes sbwSpin{from{transform:rotate(-60deg) scale(.5); opacity:0}to{transform:none; opacity:1}}
  .sbw-check{width:88px; height:88px; margin:0 auto; border-radius:50%; background:var(--card); color:var(--sw-ink); font-size:44px; display:flex; align-items:center; justify-content:center; animation:sbwSpin .6s both}
  .sbw-stats{display:flex; justify-content:center; gap:10px; margin:16px 0 10px; flex-wrap:wrap}
  .sbw-stats div{background:var(--card); color:var(--ink); border-radius:16px; padding:10px 16px; min-width:92px}
  .sbw-stats b{display:block; font-size:20px} .sbw-stats span{font-size:12px; color:var(--mut)}
  .sbw-break .sbd-learned{justify-content:center}
  .sbw-break .sbd-learned span{background:var(--card)}
  @media (max-width:560px){ .sbw-feed{grid-template-columns:1fr 1fr; gap:10px} .sbw-fcard{min-height:180px; padding:14px} .sbw-ftitle{font-size:17px} .sbw-opts{grid-template-columns:1fr} }
  @media (prefers-reduced-motion: reduce){ .sbw *, .sbw-feed *{animation:none!important; transition:none!important} }
  .sbx-tools.one{grid-template-columns:1fr}
  .sbw-real{display:flex; gap:12px; align-items:center; text-align:left; width:100%; margin-top:14px; font:inherit; font-size:14.5px; line-height:1.45; color:var(--ink); background:var(--field); border:1.5px dashed var(--sw-ink); border-radius:16px; padding:10px 12px; cursor:pointer}
  .sbw-play{flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px}
  /* ===== Speaking Builder · Cinema (10.20) ===== the room dims; the screen glows */
  .cin-room{ --cin-bg:#0d0c12; --cin-ink:#efeaf4; --cin-mut:#a39cb3; --cin-card:#17151f; --cin-line:#2b2738; --cin-acc:#ffcf5a; --cin-acc-ink:#1a1400;
    position:relative; min-height:calc(100vh - 60px); background:var(--cin-bg); color:var(--cin-ink); overflow:hidden; transition:background .5s, color .5s; }
  .cin-room.lights{ --cin-bg:var(--bg,#f6f5f2); --cin-ink:var(--ink,#14182B); --cin-mut:var(--mut,#667); --cin-card:var(--card,#fff); --cin-line:var(--line,#e3e3e8); --cin-acc:#1f2a55; --cin-acc-ink:#fff; }
  .cin-glow{ position:absolute; left:50%; top:-120px; width:1200px; max-width:160%; transform:translateX(-50%); filter:blur(90px) saturate(1.4); opacity:.42; pointer-events:none; transition:opacity .6s; }
  .cin-room.lights .cin-glow{ opacity:.12; }
  .cin-wrap{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; max-width:1260px; margin:0 auto; padding:14px 18px 110px; }
  .cin-crumb{ font-size:13px; color:var(--cin-mut); display:flex; align-items:center; gap:6px; flex-wrap:wrap }
  .cin-crumb a{ color:var(--cin-mut); cursor:pointer; text-decoration:underline; text-underline-offset:3px }
  .cin-tools{ margin-left:auto; display:flex; gap:6px }
  .cin-ic{ font:inherit; font-size:12.5px; color:var(--cin-ink); background:transparent; border:1px solid var(--cin-line); border-radius:999px; padding:5px 11px; cursor:pointer }
  .cin-h{ font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:clamp(22px,3vw,32px); margin:10px 0 2px; color:var(--cin-ink); letter-spacing:-.01em }
  .cin-sub{ color:var(--cin-mut); font-size:13.5px; margin-bottom:8px }
  .cin-note{ font-size:12.5px; color:#ffb4a8; background:rgba(255,120,100,.08); border:1px dashed rgba(255,140,120,.4); border-radius:10px; padding:7px 10px; margin:6px 0 10px }
  .cin-modes{ display:flex; gap:6px; overflow-x:auto; padding:4px 0 12px; scrollbar-width:none }
  .cin-modes::-webkit-scrollbar{ display:none }
  .cin-mode{ flex:none; font:inherit; font-size:13.5px; font-weight:600; color:var(--cin-mut); background:transparent; border:1px solid var(--cin-line); border-radius:999px; padding:7px 14px; cursor:pointer; transition:all .15s }
  .cin-mode:hover{ color:var(--cin-ink); border-color:var(--cin-mut) }
  .cin-mode.on{ background:var(--cin-acc); color:var(--cin-acc-ink); border-color:var(--cin-acc) }
  .cin-mode.t{ border-style:dashed }
  .cin-modes:has(.cin-nocc){ flex-wrap:wrap }
  .cin-mode.off{ opacity:.35; cursor:not-allowed; border-style:dashed }
  .cin-nocc{ flex-basis:100%; width:100%; font-size:12.5px; color:var(--cin-mut); padding:6px 2px 0 }
  .cin-nocc b, .cin-tags i.cc{ font-style:normal; font-weight:700; font-size:10px; letter-spacing:.04em; border:1px solid currentColor; border-radius:4px; padding:0 4px }
  .cin-screen{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) }
  .cin-video{ position:relative; aspect-ratio:16/9; background:#000 }
  .cin-cover{ position:absolute; left:0; right:0; bottom:0; height:20%; display:none; pointer-events:none; z-index:2;
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:rgba(12,10,16,.62);
    align-items:flex-end; justify-content:flex-end; padding:0 12px 8px }
  .cin-cover.on{ display:flex }
  .cin-cover span{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55) }
  .cin-mode.vi{ margin-left:auto }
  .cin-vil{ display:block; font-style:normal; font-size:.82em; opacity:.72; margin-top:2px }
  .cin-voc{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:4px }
  .cin-voc sup{ font-size:.55em; letter-spacing:.04em; margin-left:2px; opacity:.7 }
  .cin-voc:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.35); border-radius:3px }
  .cin-vpop{ margin-top:8px; font-size:14px; line-height:1.4; text-align:left; background:rgba(0,0,0,.55); border-radius:10px; padding:10px 12px }
  .cin-vpop i{ font-style:normal; opacity:.7; font-size:12px }
  .cin-vpop .vi{ opacity:.8 }
  .cin-video iframe,.cin-video #cin-player{ position:absolute; inset:0; width:100%; height:100%; border:0 }
  .cin-line{ position:absolute; left:0; right:0; bottom:9%; text-align:center; pointer-events:none; padding:0 6%; opacity:0; transition:opacity .15s }
  .cin-line.on{ opacity:1 }
  .cin-line span{ display:inline; font-size:clamp(15px,2.3vw,22px); line-height:1.5; font-weight:600; color:#fff; background:rgba(8,8,12,.78); padding:3px 10px; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone }
  .cin-ctrl{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; justify-content:center; margin:12px 0 }
  .cin-b{ font:inherit; font-size:13px; color:var(--cin-ink); background:var(--cin-card); border:1px solid var(--cin-line); border-radius:10px; padding:8px 12px; cursor:pointer; min-height:38px }
  .cin-b.big{ font-size:18px; padding:6px 20px; background:var(--cin-acc); color:var(--cin-acc-ink); border-color:var(--cin-acc) }
  .cin-b.on{ border-color:var(--cin-acc); color:var(--cin-acc) }
  .cin-b.sm{ padding:4px 8px; min-height:30px; font-size:12px }
  .cin-card{ background:var(--cin-card); border:1px solid var(--cin-line); border-radius:16px; padding:16px 18px; margin-top:4px }
  .cin-help{ font-size:13px; color:var(--cin-mut); margin-bottom:10px }
  .cin-wait{ font-size:14.5px; color:var(--cin-mut); padding:6px 0 }
  .cin-wait.sm{ font-size:12.5px; border-left:3px solid var(--cin-acc); padding-left:10px; margin-bottom:10px }
  .cin-q{ font-weight:700; font-size:16px; margin:2px 0 8px }
  .cin-big{ font-family:Georgia,serif; font-size:clamp(18px,2.4vw,23px); line-height:1.45; margin:6px 0 10px }
  .cin-hint{ font-size:13px; color:var(--cin-mut) }
  .cin-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px }
  .cin-fs{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--cin-mut); margin:2px 0 10px }
  .cin-f{ font:inherit; font-size:12.5px; color:var(--cin-ink); background:transparent; border:1px solid var(--cin-line); border-radius:999px; padding:4px 11px; cursor:pointer; display:inline-flex; gap:5px; align-items:baseline }
  .cin-f small{ color:var(--cin-mut); font-size:10.5px }
  .cin-f.on{ background:var(--cin-ink); color:var(--cin-bg); border-color:var(--cin-ink) }
  .cin-f.on small{ color:var(--cin-bg); opacity:.7 }
  .cin-script{ max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:2px; scroll-behavior:smooth }
  .cin-sl{ font:inherit; text-align:left; background:transparent; color:var(--cin-mut); border:0; border-radius:8px; padding:6px 8px; cursor:pointer; font-size:14.5px; line-height:1.45; display:flex; gap:10px }
  .cin-sl span{ font-family:ui-monospace,Menlo,monospace; font-size:11px; opacity:.6; padding-top:3px; flex:none }
  .cin-sl.on{ color:var(--cin-ink); background:rgba(255,207,90,.12) }
  .cin-room.lights .cin-sl.on{ background:rgba(31,42,85,.08) }
  .cin-tog{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--cin-mut); margin-top:10px }
  .cin-gapline{ font-family:Georgia,serif; font-size:19px; line-height:2.1 }
  .cin-in,.cin-ta,.cin-ein{ font:inherit; color:var(--cin-ink); background:transparent; border:0; border-bottom:2px solid var(--cin-acc); padding:2px 4px; outline:none }
  .cin-in{ font-family:inherit; font-size:17px; text-align:center }
  .cin-ta{ width:100%; border:1px solid var(--cin-line); border-radius:12px; padding:10px 12px; font-size:16px; resize:vertical; box-sizing:border-box }
  .cin-ans{ padding:0 4px; border-radius:5px } .cin-ans.ok{ color:#7be3a4 } .cin-ans.no{ color:#ff9b8f; text-decoration:underline wavy }
  .cin-room.lights .cin-ans.ok{ color:var(--ok,#1a7a45) } .cin-room.lights .cin-ans.no{ color:var(--bad,#b3261e) }
  .cin-fb{ font-size:13.5px; font-weight:600; margin-top:8px } .cin-fb.ok{ color:#7be3a4 } .cin-fb.no{ color:#ffb08f }
  .cin-room.lights .cin-fb.ok{ color:var(--ok,#1a7a45) } .cin-room.lights .cin-fb.no{ color:var(--bad,#b3261e) }
  .cin-diff{ font-size:16px; line-height:1.8 } .cin-diff .ok{ color:#7be3a4 } .cin-diff .no{ color:#ffb08f; text-decoration:underline }
  .cin-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 }
  .cin-chip{ font:inherit; font-weight:600; font-size:14px; padding:8px 13px; border-radius:999px; border:1.5px solid var(--cin-line); background:transparent; color:var(--cin-ink); cursor:pointer; transition:transform .12s }
  .cin-chip:active{ transform:scale(.95) } .cin-chip.ok{ background:#2f7d55; border-color:#2f7d55; color:#fff } .cin-chip.no{ border-color:#d0574b; animation:cinShake .3s }
  @keyframes cinShake{ 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
  .cin-ord{ display:grid; gap:8px }
  .cin-oi{ font:inherit; text-align:left; font-size:14.5px; line-height:1.4; padding:10px 12px; border-radius:12px; border:1px solid var(--cin-line); background:transparent; color:var(--cin-ink); cursor:pointer; display:flex; gap:10px; align-items:flex-start }
  .cin-oi b{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--cin-acc); color:var(--cin-acc-ink); display:grid; place-items:center; font-size:12px }
  .cin-oi.on{ border-color:var(--cin-acc) } .cin-oi.ok{ border-color:#2f7d55 } .cin-oi.no{ border-color:#d0574b }
  .cin-sol{ font-size:13.5px; color:var(--cin-mut); margin:8px 0 0 18px }
  .cin-src2{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cin-acc); margin:14px 0 2px }
  .cin-item-q{ padding:8px 0 }
  .cin-qq{ font-weight:600; margin-bottom:6px }
  .cin-opts{ display:grid; gap:6px }
  .cin-opt{ font:inherit; font-size:14px; text-align:left; padding:9px 12px; border-radius:10px; border:1px solid var(--cin-line); background:transparent; color:var(--cin-ink); cursor:pointer }
  .cin-opt.ok{ border-color:#2f7d55; background:rgba(47,125,85,.18) } .cin-opt.no{ border-color:#d0574b; background:rgba(208,87,75,.14) } .cin-opt.dim{ opacity:.45 }
  .cin-rec{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px; padding-top:12px; border-top:1px dashed var(--cin-line) }
  .cin-rec audio{ height:34px }
  .cin-heard{ width:100%; font-style:italic; color:var(--cin-mut) }
  .cin-done{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }
  /* the library */
  .cin-panel{ align-self:start; position:sticky; top:12px; max-height:calc(100vh - 90px); display:flex; flex-direction:column; background:var(--cin-card); border:1px solid var(--cin-line); border-radius:16px; overflow:hidden }
  .cin-ph{ display:flex; align-items:baseline; gap:8px; padding:14px 14px 6px } .cin-ph b{ font-size:15px } .cin-ph span{ font-size:12px; color:var(--cin-mut) }
  .cin-x{ display:none; margin-left:auto; font-size:22px; background:none; border:0; color:var(--cin-ink); cursor:pointer }
  .cin-panel .cin-fs{ padding:0 12px; margin:4px 0 }
  .cin-list{ overflow:auto; padding:6px 8px 12px; display:flex; flex-direction:column; gap:4px }
  .cin-item{ font:inherit; text-align:left; display:flex; gap:10px; padding:7px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--cin-ink); cursor:pointer }
  .cin-item:hover{ background:rgba(255,255,255,.04) } .cin-room.lights .cin-item:hover{ background:rgba(0,0,0,.03) }
  .cin-item.on{ border-color:var(--cin-acc); background:rgba(255,207,90,.08) }
  .cin-thumb{ position:relative; flex:none; width:122px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000 }
  .cin-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
  .cin-dur{ position:absolute; right:4px; bottom:4px; font-size:10.5px; background:rgba(0,0,0,.8); color:#fff; padding:1px 5px; border-radius:4px }
  .cin-tick{ position:absolute; left:4px; top:4px; width:20px; height:20px; border-radius:50%; background:#2f7d55; color:#fff; font-size:12px; display:grid; place-items:center }
  .cin-meta{ display:flex; flex-direction:column; gap:3px; min-width:0 }
  .cin-meta b{ font-size:13.5px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
  .cin-src{ font-size:11.5px; color:var(--cin-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .cin-tags{ display:flex; gap:4px; flex-wrap:wrap } .cin-tags i{ font-style:normal; font-size:10.5px; padding:1px 6px; border-radius:999px; border:1px solid var(--cin-line); color:var(--cin-mut) }
  .cin-tags i.lv.runway{ color:#7be3a4; border-color:#2f7d55 } .cin-tags i.lv.takeoff{ color:#8fc7ff; border-color:#3a6ea5 } .cin-tags i.lv.altitude{ color:#ffcf5a; border-color:#9a7a20 } .cin-tags i.lv.horizon{ color:#ff9b8f; border-color:#a8473d }
  .cin-tags i.age{ color:#ffb4a8; border-color:#a8473d }
  .cin-empty{ font-size:13px; color:var(--cin-mut); padding:12px }
  /* caption editor */
  .cin-erows{ display:flex; flex-direction:column; gap:4px; max-height:420px; overflow:auto; margin-top:10px }
  .cin-erow{ display:flex; gap:5px; align-items:center } .cin-erow.on{ background:rgba(255,207,90,.08); border-radius:8px }
  .cin-et{ font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--cin-mut); width:78px; flex:none }
  .cin-ein{ flex:1; min-width:0; font-size:14.5px; border-bottom:1px solid var(--cin-line) } .cin-ein:focus{ border-bottom-color:var(--cin-acc) }
  body.cin-on .bottom-nav, body.cin-on .bnav{ opacity:.9 }
  @media (max-width: 980px){
    .cin-wrap{ grid-template-columns:minmax(0,1fr); padding:10px 12px 110px }
    .cin-panel{ position:fixed; z-index:60; inset:auto 0 0 0; top:auto; max-height:78vh; border-radius:18px 18px 0 0; transform:translateY(105%); transition:transform .3s; box-shadow:0 -20px 60px rgba(0,0,0,.5) }
    .cin-panel.open{ transform:none } .cin-x{ display:block }
    .cin-screen{ margin:0 -12px; border-radius:0 }
  }
  @media (prefers-reduced-motion: reduce){ .cin-room,.cin-glow,.cin-panel{ transition:none } }
  .cin-room .btn.ghost{ color:var(--cin-ink); border-color:var(--cin-line); background:transparent }
  .cin-room .btn.primary{ background:var(--cin-acc); color:var(--cin-acc-ink); border-color:var(--cin-acc) }

/* 10.99 · Exam Lab */
.xl-wrap{max-width:900px}.xl-head{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card,#fff);border:1px solid var(--line,#dde);border-radius:12px;padding:10px 14px;margin:10px 0}
.xl-sub{color:var(--mut);font-size:13px}.xl-clock{font:600 22px 'IBM Plex Mono',monospace}.xl-clock.low{color:#B3261E}
.xl-sec{background:var(--card,#fff);border:1px solid var(--line,#dde);border-radius:12px;padding:14px 16px}.xl-instr{font-weight:600;margin-bottom:8px}
.xl-passage{background:var(--soft,#F6F7FB);border-radius:10px;padding:10px 14px;margin:8px 0 12px;line-height:1.6}.xl-passage p{margin:6px 0}
.xl-item{margin:14px 0;padding-top:8px;border-top:1px dashed var(--line,#dde)}.xl-stem{margin-bottom:6px;line-height:1.5}
.xl-opts{display:grid;gap:6px}.xl-opt{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line,#dde);border-radius:10px;cursor:pointer}.xl-opt.on{border-color:var(--navy,#1B2236);background:var(--soft,#EEF1FA)}
.xl-note{font-size:13px;color:var(--mut);margin:4px 0}.xl-in,.xl-ta{width:100%;box-sizing:border-box;font:inherit;padding:8px 10px;border:1px solid var(--line,#ccd);border-radius:10px}
.xl-wc{font-size:13px;color:var(--mut);text-align:right}.xl-wc.bad{color:#B3261E}.xl-prompt{background:var(--soft,#F6F7FB);border-radius:10px;padding:10px 12px;margin:6px 0}
.xl-order{list-style:none;padding:0;margin:6px 0;display:grid;gap:6px;counter-reset:xo}.xl-order li{display:flex;gap:8px;align-items:center;border:1px solid var(--line,#dde);border-radius:10px;padding:8px 10px;background:var(--card,#fff);cursor:grab}
.xl-order li.dragging{opacity:.5}.xl-grip{color:var(--mut)}.xl-ptext{flex:1}.xl-arrows{display:flex;gap:4px}
.xl-hiw{line-height:2}.xl-w{cursor:pointer;border-radius:4px;padding:1px 2px}.xl-w.on{background:#FFE08A;outline:1px solid #C99A00}
.xl-spk{padding:10px 12px;border-radius:10px;background:var(--soft,#F6F7FB);margin:8px 0}.xl-spk.rec{background:#FDECEC;color:#B3261E}.xl-spk.done{background:#E8F5EC}
.xl-mark{margin-top:8px;padding:10px 12px;border-radius:10px;background:#F2F6FF;font-size:14px}.xl-mark.bad,.xl-spk.bad{background:#FDECEC}.xl-prov{font-size:12px;color:#8A5A00;background:#FFF4D6;border-radius:6px;padding:1px 6px}.xl-ok{color:#0F6B39;font-weight:600}
.xl-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:14px 0 30px;flex-wrap:wrap}.xl-dots{display:flex;gap:4px;flex-wrap:wrap}.xl-dot{min-width:30px;height:30px;border-radius:15px;border:1px solid var(--line,#ccd);background:var(--card,#fff);cursor:pointer}.xl-dot.on{background:var(--navy,#1B2236);color:#fff}
.xl-big{font:700 30px 'Newsreader',serif;margin:6px 0}.xl-big.ok{color:#0F6B39}.xl-tab{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}.xl-tab td,.xl-tab th{border-bottom:1px solid var(--line,#eee);padding:5px 6px;text-align:left;vertical-align:top}.xl-tab tr.bad td:first-child{color:#B3261E;font-weight:700}.xl-tab tr.ok td:first-child{color:#0F6B39;font-weight:700}.xl-exp td{color:var(--mut);font-size:13px}
.xl-edit label{display:inline-block;margin:4px 8px 4px 0}.xl-edit input[type=number]{width:70px}.xl-edit textarea{width:100%;margin:6px 0}.xl-ans{white-space:pre-wrap;background:var(--soft,#F6F7FB);padding:8px;border-radius:8px}
.xl-read{border-left:3px solid var(--navy,#1B2236);margin:8px 0;padding:6px 12px;background:var(--soft,#F6F7FB)}
@media (max-width:560px){.xl-clock{font-size:18px}.xl-sec{padding:12px}.xl-arrows .btn{padding:4px 8px}}