/* ==========================================================================
   IELTS 21 — Mock Test Practice
   Design system: tokens -> base -> components -> views -> responsive
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  /* palette */
  --brand-900:#0E2136;
  --brand-800:#14293F;
  --brand-700:#1B3A5B;
  --brand-600:#24507A;
  --brand-500:#2F6797;
  --brand-300:#9DBEDB;
  --brand-100:#E7EFF7;
  --brand-050:#F4F8FC;

  --paper:#FBFAF7;
  --paper-line:#EDEAE3;

  --ink:#101319;
  --ink-2:#39424F;
  --ink-3:#5B6573;
  --muted:#79828F;

  --bg:#F3F4F6;
  --surface:#FFFFFF;
  --surface-2:#F8F9FB;
  --line:#E3E6EA;
  --line-2:#EDEFF2;

  --ok:#0F6B52;
  --ok-bg:#E7F4EF;
  --bad:#AE2A1E;
  --bad-bg:#FBEAE7;
  --warn:#9A5B08;
  --warn-bg:#FDF3E2;
  --info:#1E4E8C;
  --info-bg:#EAF1FA;

  --hl:#FFE9A0;
  --hl-strong:#FFD65C;

  /* type */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",sans-serif;
  --font-read:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-30:30px; --fs-38:38px;

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* radius + shadow */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(16,19,25,.05);
  --sh-2:0 2px 6px rgba(16,19,25,.06),0 1px 2px rgba(16,19,25,.04);
  --sh-3:0 10px 28px rgba(16,19,25,.10),0 2px 8px rgba(16,19,25,.05);
  --sh-focus:0 0 0 3px rgba(47,103,151,.18);

  --topbar-h:60px;
  --subbar-h:52px;

  --tr-fast:140ms cubic-bezier(.4,0,.2,1);
  --tr:240ms cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Author display rules below (.modal{display:grid}, .annot-toolbar{display:flex}, …)
   would otherwise override the UA stylesheet's [hidden]{display:none}. */
[hidden]{display:none !important}
body{
  font-family:var(--font-ui);
  font-size:var(--fs-15);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--topbar-h);
}
h1,h2,h3,h4,h5{margin:0;font-weight:650;letter-spacing:-.012em;line-height:1.28;color:var(--brand-900)}
p{margin:0 0 var(--s3)}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
::selection{background:#CFE2F5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px;border-radius:4px}

/* ---------- 3. Top bar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;height:var(--topbar-h);z-index:60;
  display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--s5);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none!important;flex:0 0 auto}
.brand-mark{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--brand-700),var(--brand-500));
  color:#fff;box-shadow:var(--sh-2);
}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-size:var(--fs-15);color:var(--brand-900);letter-spacing:-.01em}
.brand-text em{font-style:normal;font-size:var(--fs-11);color:var(--muted);letter-spacing:.02em}

.skillnav{display:flex;align-items:center;gap:4px;margin-left:var(--s4);flex:1 1 auto}
.skilltab{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid transparent;background:transparent;cursor:pointer;
  font-size:var(--fs-14);font-weight:550;color:var(--ink-3);
  transition:var(--tr-fast);white-space:nowrap;
}
.skilltab:hover{background:var(--surface-2);color:var(--brand-800)}
.skilltab[aria-selected="true"]{
  background:var(--brand-700);color:#fff;border-color:var(--brand-700);
  box-shadow:var(--sh-2);
}
.skilltab svg{opacity:.9}

.topbar-right{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.unitpick select{
  appearance:none;padding:7px 30px 7px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6573' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 11px center;
  font-size:var(--fs-14);font-weight:550;color:var(--brand-800);cursor:pointer;transition:var(--tr-fast);
}
.unitpick select:hover{border-color:var(--brand-300)}
.iconbtn{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid transparent;background:transparent;color:var(--ink-3);cursor:pointer;transition:var(--tr-fast);
}
.iconbtn:hover{background:var(--surface-2);color:var(--brand-700)}

/* ---------- 4. Sub bar ---------- */
.subbar{
  position:fixed;top:var(--topbar-h);left:0;right:0;height:var(--subbar-h);z-index:55;
  display:flex;align-items:center;gap:var(--s3);
  padding:0 var(--s5);
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line-2);
}
.subbar:empty{display:none}
.subbar .segnav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto}
.subbar .segnav::-webkit-scrollbar{display:none}
.segpill{
  padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;
  font-size:var(--fs-13);font-weight:550;color:var(--ink-3);cursor:pointer;white-space:nowrap;transition:var(--tr-fast);
}
.segpill:hover{border-color:var(--brand-300);color:var(--brand-700)}
.segpill[aria-current="true"]{background:var(--brand-100);border-color:var(--brand-300);color:var(--brand-800)}
.subbar .tools{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  padding:9px 16px;border-radius:var(--r-md);border:1px solid transparent;
  font-size:var(--fs-14);font-weight:600;cursor:pointer;transition:var(--tr-fast);white-space:nowrap;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--brand-700);color:#fff;box-shadow:var(--sh-1)}
.btn-primary:hover:not(:disabled){background:var(--brand-600);box-shadow:var(--sh-2)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--brand-800)}
.btn-ghost:hover:not(:disabled){border-color:var(--brand-300);background:var(--brand-050)}
.btn-quiet{background:transparent;color:var(--ink-3)}
.btn-quiet:hover:not(:disabled){background:var(--surface-2);color:var(--brand-700)}
.btn-danger{background:#fff;border-color:#F0C8C2;color:var(--bad)}
.btn-danger:hover:not(:disabled){background:var(--bad-bg)}
.btn-sm{padding:6px 11px;font-size:var(--fs-13);border-radius:var(--r-sm)}
.btn .spinner{
  width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 6. View / layout ---------- */
.view{padding:var(--s8) var(--s5) var(--s16);max-width:1340px;margin:0 auto;scroll-margin-top:130px}
body.has-subbar{padding-top:calc(var(--topbar-h) + var(--subbar-h))}
.view.is-reading{max-width:1560px}

.page-head{margin-bottom:var(--s6)}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-12);font-weight:650;
  letter-spacing:.09em;text-transform:uppercase;color:var(--brand-500);margin-bottom:var(--s2);
}
.page-head h1{font-size:var(--fs-30);letter-spacing:-.02em}
.page-head .lede{margin-top:var(--s2);color:var(--ink-3);font-size:var(--fs-15);max-width:74ch}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
}
.card + .card{margin-top:var(--s5)}
.card-head{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2);background:var(--surface);
}
.card-head h2{font-size:var(--fs-18)}
.card-head .right{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.card-body{padding:var(--s5)}
.card-body + .card-body{border-top:1px solid var(--line-2)}
.card-body.tight{padding:var(--s4)}

/* ---------- 7. Meta chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--fs-12);font-weight:600;color:var(--ink-3);
}
.chip.is-brand{background:var(--brand-100);border-color:var(--brand-300);color:var(--brand-700)}
.chip.is-ok{background:var(--ok-bg);border-color:#BFE2D5;color:var(--ok)}
.chip.is-bad{background:var(--bad-bg);border-color:#F0C8C2;color:var(--bad)}
.chip.is-warn{background:var(--warn-bg);border-color:#F0DDB6;color:var(--warn)}

/* ---------- 8. Timer ---------- */
.timer{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;font-size:var(--fs-13);font-weight:650;color:var(--brand-800);
  font-variant-numeric:tabular-nums;
}
.timer.is-running{border-color:var(--brand-300);background:var(--brand-050)}
.timer.is-warning{border-color:#F0DDB6;background:var(--warn-bg);color:var(--warn)}
.timer.is-over{border-color:#F0C8C2;background:var(--bad-bg);color:var(--bad)}
.timer .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.timer.is-running .dot{background:var(--brand-500);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}

/* ---------- 9. Audio player ---------- */
.audioplayer{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff,var(--brand-050));
  border:1px solid var(--brand-100);
}
.audioplayer audio{width:100%;height:38px}
.audioplayer .label{display:flex;align-items:center;gap:8px;font-size:var(--fs-12);font-weight:700;color:var(--brand-600);letter-spacing:.06em;text-transform:uppercase;flex:0 0 auto}

/* ---------- 10. Question blocks ---------- */
.qgroup{padding:var(--s5) 0}
.qgroup + .qgroup{border-top:1px dashed var(--line)}
.qgroup:first-child{padding-top:0}
.qgroup:last-child{padding-bottom:0}

.block-title{
  text-align:center;font-weight:700;font-size:var(--fs-18);color:var(--brand-900);
  margin:var(--s4) 0 var(--s3);
}
.block-instruction{
  font-size:var(--fs-14);color:var(--ink-2);margin:var(--s2) 0 var(--s3);
  padding-left:2px;
}
.block-instruction strong,.block-instruction em{color:var(--brand-800)}
.block-para{font-size:var(--fs-15);color:var(--ink-2);margin:0 0 var(--s3)}
.block-list{margin:0 0 var(--s3);padding-left:0;list-style:none}
.block-list li{
  position:relative;padding-left:var(--s5);margin-bottom:var(--s2);font-size:var(--fs-15);color:var(--ink-2);
}
.block-list li::before{
  content:"";position:absolute;left:6px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--brand-300);
}
.block-list.is-numbered{counter-reset:bl}
.block-list.is-numbered li{counter-increment:bl}
.block-list.is-numbered li::before{content:none}
.block-list.is-numbered li .num{position:absolute;left:0;top:0;font-weight:650;color:var(--brand-500);font-size:var(--fs-14);min-width:22px}

/* tables (listening table completion / matching boxes) */
.qtable{width:100%;border-collapse:collapse;margin:var(--s3) 0 var(--s4);font-size:var(--fs-14);background:#fff}
.qtable th,.qtable td{
  border:1px solid #D9DEE4;padding:9px 11px;text-align:left;vertical-align:top;line-height:1.55;
}
.qtable thead th{background:var(--brand-050);font-weight:700;color:var(--brand-800);text-align:center}
.qtable tbody tr:nth-child(even) td{background:#FCFDFE}

/* notes / cue / option boxes */
.box{
  border:1.5px solid #CBD3DC;border-radius:var(--r-md);background:#fff;
  padding:var(--s4) var(--s5);margin:var(--s3) 0 var(--s4);
}
.box .box-title{
  text-align:center;font-weight:700;font-size:var(--fs-16);color:var(--brand-900);margin-bottom:var(--s3);
}
.box ul{margin:0;padding-left:var(--s5)}
.box ul li{margin-bottom:6px;font-size:var(--fs-14);color:var(--ink-2)}
.box.is-options{background:var(--surface-2);border-color:var(--line)}
.box.is-options ol{margin:0;padding-left:var(--s6);columns:2;column-gap:var(--s8)}
.box.is-options li{margin-bottom:5px;font-size:var(--fs-14);color:var(--ink-2);break-inside:avoid}
.box.is-cue{background:#fff;border-width:2px;border-color:var(--brand-300)}
.box.is-cue .box-title{font-size:var(--fs-15)}

/* figure */
.figure{margin:var(--s4) 0;text-align:center}
.figure img{
  max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
}
.figure figcaption{margin-top:var(--s2);font-size:var(--fs-12);color:var(--muted)}

/* ---------- 11. Answer inputs ---------- */
.blank{display:inline-flex;align-items:center;white-space:nowrap}
.blank .qnum{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;margin-right:5px;
  border-radius:5px;background:var(--brand-700);color:#fff;font-size:var(--fs-11);font-weight:700;
  font-family:var(--font-ui);vertical-align:1px;
}
input.ans{
  font-family:var(--font-ui);font-size:var(--fs-14);font-weight:600;color:var(--brand-800);
  border:0;border-bottom:1.5px solid var(--brand-300);background:#F8FAFC;
  padding:2px 7px;min-width:108px;border-radius:4px 4px 0 0;transition:var(--tr-fast);
  letter-spacing:.01em;
}
input.ans:focus{outline:0;background:#fff;border-bottom-color:var(--brand-600);box-shadow:0 2px 0 0 var(--brand-600)}
input.ans::placeholder{color:#AEB6C0;font-weight:500}
input.ans.is-correct{background:var(--ok-bg);border-bottom-color:var(--ok);color:var(--ok)}
input.ans.is-wrong{background:var(--bad-bg);border-bottom-color:var(--bad);color:var(--bad);text-decoration:line-through}
input.ans.is-empty{background:var(--warn-bg);border-bottom-color:var(--warn);border-bottom-style:dashed}
input.ans:disabled{opacity:.95}
/* letter-choice blank (choose from a list of words A–I, section letters A–G …) */
select.ans-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-family:var(--font-ui);font-size:var(--fs-14);font-weight:700;color:var(--brand-700);
  border:1px solid var(--brand-300);background:var(--brand-050);
  padding:2px 8px;min-width:58px;border-radius:var(--r-sm);cursor:pointer;
  text-align:center;text-align-last:center;transition:var(--tr-fast);vertical-align:1px;
}
select.ans-select:hover{border-color:var(--brand-500)}
select.ans-select:focus{outline:0;border-color:var(--brand-600);box-shadow:var(--sh-focus)}
select.ans-select.is-correct{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
select.ans-select.is-wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
select.ans-select:disabled{opacity:.95;cursor:default}

/* multiple choice */
.mc{margin-bottom:var(--s4)}
.mc-q{display:flex;gap:var(--s2);font-size:var(--fs-15);color:var(--ink);margin-bottom:var(--s2)}
.mc-q .qnum{
  flex:0 0 auto;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:6px;background:var(--brand-700);color:#fff;font-size:var(--fs-12);font-weight:700;
}
.mc-opts{display:flex;flex-direction:column;gap:5px;padding-left:30px}
.mc-opt{
  display:flex;align-items:flex-start;gap:9px;padding:7px 11px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;transition:var(--tr-fast);font-size:var(--fs-14);color:var(--ink-2);
}
.mc-opt:hover{background:var(--brand-050);border-color:var(--brand-100)}
.mc-opt input{margin:3px 0 0;accent-color:var(--brand-700);flex:0 0 auto}
.mc-opt .letter{font-weight:700;color:var(--brand-600);flex:0 0 auto}
.mc-opt.is-chosen{background:var(--brand-050);border-color:var(--brand-300);color:var(--brand-900)}
.mc-opt.is-key{background:var(--ok-bg);border-color:#BFE2D5}
.mc-opt.is-key::after{content:"correct";margin-left:auto;font-size:var(--fs-11);font-weight:700;color:var(--ok);text-transform:uppercase;letter-spacing:.05em}
.mc-opt.is-picked-wrong{background:var(--bad-bg);border-color:#F0C8C2}

/* tfng / ynng rows */
.tfrow{
  display:flex;align-items:flex-start;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) 0;border-bottom:1px dashed var(--line-2);
}
.tfrow:last-child{border-bottom:0}
.tfrow .qtext{flex:1 1 340px;font-size:var(--fs-15);color:var(--ink-2);display:flex;gap:var(--s2)}
.tfrow .qtext .qnum{
  flex:0 0 auto;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:6px;background:var(--brand-700);color:#fff;font-size:var(--fs-12);font-weight:700;
}
.tfopts{display:flex;gap:var(--s2);flex-wrap:wrap}
.tfopt{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;font-size:var(--fs-13);font-weight:600;color:var(--ink-3);
  cursor:pointer;transition:var(--tr-fast);
}
.tfopt input{position:absolute;opacity:0;pointer-events:none}
.tfopt:hover{border-color:var(--brand-300);color:var(--brand-700)}
.tfopt.is-chosen{background:var(--brand-700);border-color:var(--brand-700);color:#fff}
.tfopt.is-key{background:var(--ok);border-color:var(--ok);color:#fff}
.tfopt.is-picked-wrong{background:var(--bad);border-color:var(--bad);color:#fff}

/* matching dropdown rows */
.matchrow{display:flex;align-items:flex-start;gap:var(--s3);padding:9px 0;border-bottom:1px dashed var(--line-2)}
.matchrow:last-child{border-bottom:0}
.matchrow .qtext{flex:1 1 auto;font-size:var(--fs-15);color:var(--ink-2);display:flex;gap:var(--s2)}
.matchrow .qtext .qnum{
  flex:0 0 auto;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;
  background:var(--brand-700);color:#fff;font-size:var(--fs-12);font-weight:700;
}
.matchrow .pick{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.matchrow select{
  appearance:none;padding:6px 30px 6px 11px;border-radius:var(--r-sm);border:1.5px solid var(--brand-300);
  background:#F8FAFC url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2324507A' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 9px center;
  font-size:var(--fs-14);font-weight:650;color:var(--brand-800);cursor:pointer;min-width:74px;
}
.matchrow select:focus{outline:0;border-color:var(--brand-600);box-shadow:var(--sh-focus)}
.matchrow select.is-correct{border-color:var(--ok);background-color:var(--ok-bg);color:var(--ok)}
.matchrow select.is-wrong{border-color:var(--bad);background-color:var(--bad-bg);color:var(--bad)}

/* ---------- 12. Markup / annotation ---------- */
.annotatable{cursor:text}
.annotatable ::selection{background:#CFE2F5}

/* primary engine: CSS Custom Highlight API — paints without touching the DOM */
::highlight(ielts-hl){background-color:#FFE09B}
::highlight(ielts-ul){
  text-decoration-line:underline;
  text-decoration-color:#2F6797;
  text-decoration-thickness:2px;
  text-underline-offset:2px;
}
::highlight(ielts-st){
  text-decoration-line:line-through;
  text-decoration-color:#C0392B;
  text-decoration-thickness:2px;
}

/* fallback engine: wrapped spans (browsers without ::highlight support) */
.annotatable .an-hl{background-color:#FFE09B;border-radius:2px;padding:1px 0}
.annotatable .an-ul{text-decoration:underline;text-decoration-color:var(--brand-500);text-decoration-thickness:2px;text-underline-offset:2px}
.annotatable .an-st{text-decoration:line-through;text-decoration-color:var(--bad);text-decoration-thickness:2px}

.annot-toolbar{
  position:absolute;z-index:80;display:flex;align-items:center;gap:2px;
  padding:5px;border-radius:var(--r-pill);
  background:var(--brand-900);box-shadow:var(--sh-3);
  animation:pop .14s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:none}}
.annot-toolbar button{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:0;border-radius:var(--r-pill);
  background:transparent;color:#E7EEF6;font-size:var(--fs-12);font-weight:600;cursor:pointer;transition:var(--tr-fast);
}
.annot-toolbar button:hover{background:rgba(255,255,255,.14);color:#fff}
.annot-toolbar .divider{width:1px;height:18px;background:rgba(255,255,255,.2);margin:0 3px}
.annot-toolbar .swatch{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;font-size:10px;font-weight:800;color:#fff}
.swatch-hl{background:var(--hl-strong)}
.swatch-ul{background:transparent;border-bottom:2px solid #8FB6DE;border-radius:0}
.swatch-ul::after{content:"U";color:#CDE0F2}
.swatch-st{background:transparent;color:#E9A79E!important;text-decoration:line-through}
.swatch-erase{background:transparent;color:#9FB0C0!important;font-size:13px}

/* ---------- 13. Reading split layout ---------- */
.readgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.readcol{min-width:0}
.pane{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;
}
.pane + .pane{margin-top:var(--s4)}
.pane-head{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--r-lg) var(--r-lg) 0 0;
  position:sticky;top:calc(var(--topbar-h) + var(--subbar-h) + var(--s2));z-index:20;
}
.pane-head h3{font-size:var(--fs-14);font-weight:700;letter-spacing:.02em;color:var(--brand-700)}
.pane-head .right{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}

.passage{padding:var(--s6) var(--s8) var(--s10);background:var(--paper)}
.passage h2{font-family:var(--font-ui);font-size:var(--fs-24);letter-spacing:-.02em;margin-bottom:var(--s5);color:var(--brand-900)}
.passage h3{font-size:var(--fs-16);margin:var(--s6) 0 var(--s2);color:var(--brand-800)}
.passage p{
  font-family:var(--font-read);font-size:17.5px;line-height:1.82;color:#1B2027;margin:0 0 var(--s4);
  text-align:justify;hyphens:auto;
}
.passage .figure{margin:var(--s5) 0}
.passage .footnote{
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--paper-line);
  font-family:var(--font-ui);font-size:var(--fs-12);color:var(--muted);line-height:1.6;
}
.qpane-body{padding:var(--s5)}

/* ---------- 14. Score bar & review ---------- */
.scorebar{
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s4) var(--s5);border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--brand-800),var(--brand-600));color:#fff;
  box-shadow:var(--sh-2);
}
.scorebar .big{font-size:var(--fs-38);font-weight:750;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.scorebar .lbl{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.1em;opacity:.75;font-weight:650}
.scorebar .sep{width:1px;align-self:stretch;background:rgba(255,255,255,.2)}
.scorebar .meter{flex:1 1 200px;min-width:160px}
.scorebar .meter .track{height:7px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.scorebar .meter .fill{height:100%;background:#8FD3BC;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1)}

.explain{
  margin-top:var(--s2);border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--surface-2);padding:var(--s3) var(--s4);font-size:var(--fs-13);color:var(--ink-2);
}
.explain .key{font-weight:700;color:var(--brand-800)}
.explain .why{margin-top:3px;color:var(--ink-3)}
.reviewlist{margin-top:var(--s3)}
.reviewrow{
  display:flex;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-14);
}
.reviewrow:last-child{border-bottom:0}
.reviewrow .n{
  flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:7px;
  font-size:var(--fs-12);font-weight:700;background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);
}
.reviewrow.ok .n{background:var(--ok-bg);border-color:#BFE2D5;color:var(--ok)}
.reviewrow.no .n{background:var(--bad-bg);border-color:#F0C8C2;color:var(--bad)}
.reviewrow .body{flex:1 1 auto;min-width:0}
.reviewrow .line{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:baseline}
.reviewrow .line b{color:var(--brand-800)}
.reviewrow .mono{font-family:var(--font-mono);font-size:var(--fs-13)}

/* ---------- 15. Writing ---------- */
.writing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.wtask-prompt{
  border:1.5px solid #CBD3DC;border-radius:var(--r-md);background:#fff;padding:var(--s4) var(--s5);
  font-size:var(--fs-15);color:var(--ink);margin:var(--s3) 0;
}
.wtask-prompt p{margin:0 0 var(--s3)}
.wtask-prompt p:last-child{margin-bottom:0}
.wtask-prompt em{font-style:italic}
.editor-wrap{display:flex;flex-direction:column}
textarea.editor{
  width:100%;min-height:420px;resize:vertical;padding:var(--s4) var(--s5);
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  font-family:var(--font-read);font-size:16.5px;line-height:1.8;color:#1B2027;
  transition:var(--tr-fast);
}
textarea.editor:focus{outline:0;border-color:var(--brand-500);box-shadow:var(--sh-focus)}
.editor-foot{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s3) 0 0;font-size:var(--fs-13);color:var(--ink-3);
}
.wordcount{font-weight:700;color:var(--brand-700);font-variant-numeric:tabular-nums}
.wordcount.is-under{color:var(--warn)}
.wordcount.is-ok{color:var(--ok)}
.progressbar{flex:1 1 140px;height:5px;border-radius:99px;background:var(--line-2);overflow:hidden}
.progressbar i{display:block;height:100%;background:var(--brand-500);border-radius:99px;transition:width .35s ease}
.progressbar.is-ok i{background:var(--ok)}

.result-card{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:var(--s4)}
.result-card .rc-head{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--brand-050);border-bottom:1px solid var(--line-2);
}
.result-card .rc-head strong{font-size:var(--fs-15);color:var(--brand-800)}
.result-card .rc-body{padding:var(--s4);font-size:var(--fs-14);color:var(--ink-2)}
.crit{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);padding:9px 0;border-bottom:1px dashed var(--line-2)}
.crit:last-of-type{border-bottom:0}
.crit .band{font-weight:750;color:var(--brand-700);font-variant-numeric:tabular-nums}
.crit .cmt{grid-column:1/-1;font-size:var(--fs-13);color:var(--ink-3)}
.overall-band{
  display:inline-flex;align-items:baseline;gap:8px;padding:var(--s3) var(--s5);border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--brand-800),var(--brand-600));color:#fff;margin-bottom:var(--s3);
}
.overall-band b{font-size:var(--fs-30);line-height:1;font-variant-numeric:tabular-nums}

/* ---------- 16. Speaking ---------- */
.spk-q{
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:var(--s4) var(--s5);margin-bottom:var(--s3);transition:var(--tr-fast);
}
.spk-q:hover{border-color:var(--brand-300);box-shadow:var(--sh-1)}
.spk-q .qtext{display:flex;gap:var(--s3);font-size:var(--fs-15);color:var(--ink);margin-bottom:var(--s3)}
.spk-q .qtext .n{
  flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;
  background:var(--brand-100);color:var(--brand-700);font-size:var(--fs-12);font-weight:750;
}
.recorder{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.recbtn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;font-size:var(--fs-14);font-weight:650;color:var(--brand-800);
  cursor:pointer;transition:var(--tr-fast);
}
.recbtn:hover:not(:disabled){border-color:var(--brand-300);background:var(--brand-050)}
.recbtn:disabled{opacity:.5;cursor:not-allowed}
.recbtn.is-rec{background:var(--bad);border-color:var(--bad);color:#fff}
.recbtn .dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.recbtn.is-rec .dot{animation:pulse 1.1s infinite}
.reclen{font-variant-numeric:tabular-nums;font-weight:650;color:var(--ink-3);font-size:var(--fs-13);min-width:52px}
.spk-q audio{height:34px;flex:1 1 200px;min-width:180px}
.transcript{
  margin-top:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line-2);font-size:var(--fs-14);color:var(--ink-2);
  min-height:42px;
}
.transcript:empty::before{content:"Transcript will appear here.";color:var(--muted);font-style:italic}
.spk-cue{background:var(--paper)}

/* ---------- 17. Modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--s5)}
.modal-backdrop{position:absolute;inset:0;background:rgba(14,33,54,.42);backdrop-filter:blur(3px)}
.modal-panel{
  position:relative;width:min(640px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden;
  animation:pop .18s ease-out;
}
.modal-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s5) var(--s6);border-bottom:1px solid var(--line-2)}
.modal-head h2{font-size:var(--fs-18);flex:1 1 auto}
.modal-body{padding:var(--s5) var(--s6);overflow:auto}
.modal-foot{padding:var(--s4) var(--s6);border-top:1px solid var(--line-2);display:flex;gap:var(--s2);justify-content:flex-end;background:var(--surface-2)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:var(--fs-13);font-weight:650;color:var(--brand-800);margin-bottom:5px}
.field .hint{font-size:var(--fs-12);color:var(--muted);margin-top:4px;line-height:1.5}
.field input,.field select,.field textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--fs-14);background:#fff;color:var(--ink);transition:var(--tr-fast);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand-500);box-shadow:var(--sh-focus)}
.field .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.note-box{
  padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--info-bg);
  border:1px solid #C7DCF2;font-size:var(--fs-13);color:var(--info);line-height:1.6;
}
.note-box.is-warn{background:var(--warn-bg);border-color:#F0DDB6;color:var(--warn)}

/* ---------- 18. Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:120;
  padding:10px 18px;border-radius:var(--r-pill);background:var(--brand-900);color:#fff;
  font-size:var(--fs-13);font-weight:600;box-shadow:var(--sh-3);animation:pop .18s ease-out;max-width:80vw;text-align:center;
}

/* ---------- 19. Empty / loading ---------- */
.empty{padding:var(--s16) var(--s5);text-align:center;color:var(--muted)}
.empty h3{color:var(--ink-2);margin-bottom:var(--s2);font-size:var(--fs-18)}
.skeleton{height:14px;border-radius:6px;background:linear-gradient(90deg,#EEF1F4,#F7F9FB,#EEF1F4);background-size:200% 100%;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- 20. Responsive ---------- */
@media (max-width:1180px){
  .readgrid,.writing-grid{grid-template-columns:1fr}
  .pane-head{position:static}
}
@media (max-width:900px){
  :root{--topbar-h:56px;--subbar-h:48px}
  .brand-text em{display:none}
  .view{padding:var(--s5) var(--s4) var(--s12)}
  .skilltab span{display:none}
  .skilltab{padding:8px 12px}
  .passage{padding:var(--s5) var(--s5) var(--s8)}
  .passage p{font-size:17px}
  .box.is-options ol{columns:1}
  .qtable{font-size:var(--fs-13)}
  .qtable th,.qtable td{padding:7px 8px}
}
@media (max-width:600px){
  .topbar{padding:0 var(--s3);gap:var(--s2)}
  .scorebar{gap:var(--s4)}
  .scorebar .big{font-size:var(--fs-30)}
}

/* ---------- 13. Account / cloud sync ---------- */
.account{display:flex;align-items:center;flex:0 0 auto}
.acct{position:relative;display:flex}

.acct-btn{
  display:flex;align-items:center;gap:7px;padding:4px 11px 4px 5px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  cursor:pointer;transition:var(--tr-fast);font:inherit;font-size:var(--fs-13);
}
.acct-btn:hover{border-color:var(--brand-300);background:var(--brand-050)}

.acct-avatar{
  width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--brand-700);color:#fff;font-size:var(--fs-11);font-weight:700;
}
.acct-name{
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:550;color:var(--brand-800);
}

.acct-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--muted);transition:background .2s}
.acct-dot.is-idle{background:var(--brand-300)}
.acct-dot.is-syncing{background:var(--warn);animation:acct-pulse 1.1s ease-in-out infinite}
.acct-dot.is-synced{background:var(--ok)}
.acct-dot.is-error{background:var(--bad)}
.acct-dot.is-offline{background:var(--muted)}
@keyframes acct-pulse{0%,100%{opacity:1}50%{opacity:.3}}

.acct-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:224px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);overflow:hidden;
}
.acct-menu-head{
  padding:11px 13px;border-bottom:1px solid var(--line-2);background:var(--surface-2);
  display:flex;flex-direction:column;gap:2px;
}
.acct-menu-head strong{font-size:var(--fs-13);color:var(--brand-800)}
.acct-menu-head span{font-size:var(--fs-12);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.acct-item{
  display:block;width:100%;text-align:left;padding:10px 13px;border:0;background:none;
  font:inherit;font-size:var(--fs-13);color:var(--ink-2);cursor:pointer;transition:var(--tr-fast);
}
.acct-item:hover{background:var(--brand-050);color:var(--brand-700)}

/* sign-in / register form */
.auth-form{display:flex;flex-direction:column;gap:var(--s3)}
.af-field{display:flex;flex-direction:column;gap:5px}
.af-field span{font-size:var(--fs-12);font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.af-field input{
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:var(--fs-14);color:var(--ink);background:#fff;transition:var(--tr-fast);
}
.af-field input:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--sh-focus)}
.af-hint{margin:0;font-size:var(--fs-12);color:var(--muted);line-height:1.5}
.af-switch{margin:2px 0 0;text-align:center}
.af-link{
  border:0;background:none;padding:2px;font:inherit;font-size:var(--fs-12);
  color:var(--brand-600);cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.af-link:hover{color:var(--brand-700)}

.auth-msg{padding:9px 12px;border-radius:var(--r-sm);font-size:var(--fs-13);line-height:1.5}
.auth-msg.is-error{background:var(--bad-bg);color:var(--bad);border:1px solid #F0C8C2}
.auth-msg.is-ok{background:var(--ok-bg);color:var(--ok);border:1px solid #BFE2D5}

/* my-progress table */
.pg-table{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
.pg-table th{
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);
  font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
}
.pg-table td{padding:8px 10px;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.pg-table tr:last-child td{border-bottom:0}
.pg-num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--brand-700)}
.pg-sum{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-top:var(--s4);padding:11px 14px;border-radius:var(--r-sm);
  background:var(--brand-050);border:1px solid var(--brand-100);
  font-size:var(--fs-13);color:var(--brand-800);
}

@media (max-width:760px){
  .acct-name{display:none}
  .acct-btn{padding:4px}
  .acct-menu{min-width:198px}
}

@media print{
  .topbar,.subbar,.annot-toolbar,.toast,.recorder,.editor-foot,.account{display:none!important}
  body{padding-top:0;background:#fff}
  .card,.pane{box-shadow:none;border-color:#ccc;break-inside:avoid}
}