:root {
  /* WeWIN brand: change accent colours and font here. */
  --primary: #0869c7;
  --primary-hover: #0759ac;
  --primary-light: #edf5fc;
  --primary-foreground: #fff;
  --navy: #16375a;
  --gold: #e7b74b;
  --gold-light: #fff6dd;
  --background: #f4f4f6;
  --surface: #fff;
  --foreground: #233548;
  --muted: #626d7c;
  --border: #f0f0f3;
  --border-strong: #e2e5e9;
  --success: #15764b;
  --success-bg: #edf8f1;
  --danger: #b6374d;
  --danger-bg: #fff0f2;
  --app-font: 'Roboto', sans-serif;
  --radius: 12px;
  --elevation-modal: 0 20px 50px rgb(18 36 57 / .18);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font: 400 14px/1.55 var(--app-font); }
button, input, select, audio { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .48; }
button, input { transition: background .16s, border-color .16s; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
input:focus-visible { outline: 2px solid #0869c71a; border-color: var(--primary); }
button:disabled:hover { background: inherit; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; line-height: 1.3; font-weight: 600; text-wrap:balance; }
h2 { font-size: 18px; line-height: 1.4; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--foreground); background: var(--surface); font-weight: 500; line-height: 1.4; white-space: nowrap; }
.btn:hover { background: #f1f1f3; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.ghost { border-color: transparent; background: transparent; padding-inline: 8px; }
.btn.ghost:hover { background: var(--background); }
.btn.icon-only { width: 44px; padding: 10px; }
.btn.full { width: 100%; }
.btn.danger { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.eyebrow { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.3px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: 144px; height: 40px; object-fit: contain; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.header-inner { max-width: 1240px; min-height: 80px; margin: auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.main-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.main-nav a { color: var(--muted); }
.main-nav .nav-active { color: var(--primary); font-weight: 500; padding-block: 12px; border-bottom: 2px solid var(--primary); }
.header-context { display: flex; align-items: center; gap: 12px; }
.header-divider { width: 1px; height: 28px; background: var(--border-strong); }
.shell { max-width: 1240px; margin: auto; padding: 24px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-bottom: 24px; }
.breadcrumb .icon { width: 14px; height: 14px; }
.breadcrumb button { background: transparent; border: 0; color: inherit; padding: 0; cursor: pointer; }
.hero { display: grid; grid-template-columns: 1fr 280px; background: var(--navy); color: var(--primary-foreground); border-radius: 16px; overflow: hidden; min-height: 244px; }
.hero-copy { padding: 32px 40px; align-self: center; }
.hero .eyebrow { color: var(--gold); margin-bottom: 12px; }
.hero h1 { font-size: 30px; font-weight: 600; margin-bottom: 12px; }
.hero-copy > p { color: #d4e3f0; max-width: 520px; }
.hero-meta { display: flex; gap: 24px; margin-top: 24px; }
.hero-meta span { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.hero-meta .icon { color: var(--gold); width: 16px; height: 16px; }
.hero-art { display: flex; justify-content: center; align-items: center; background: var(--gold-light); position: relative; }
.hero-art img { height: 222px; width: 166px; object-fit: contain; mix-blend-mode: multiply; }
.hero-art .art-note { position: absolute; bottom: 16px; left: 16px; font-size: 12px; color: var(--navy); font-weight: 500; }
.catalog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 32px 0 20px; }
.catalog-heading p { color: var(--muted); margin-top: 4px; }
.tabbar { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); flex-shrink: 0; }
.tabbar button { min-height: 44px; background: transparent; color: var(--muted); border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 500; white-space: nowrap; }
.tabbar button.active { background: var(--primary-light); color: var(--primary); }
.tabbar button:hover { background: var(--background); }
.tabbar button.active:hover { background: #dfebf8; }
.exam-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.exam-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.cover { height: 196px; background: #e8f3fb; position: relative; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover.park img { object-position: center 45%; }
.cover .cover-badge { position: absolute; left: 16px; top: 16px; background: var(--surface); color: var(--navy); border-radius: 8px; padding: 4px 10px; font-weight: 500; font-size: 12px; }
.card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.level { color: var(--primary); font-size: 12px; font-weight: 500; }
.available { color: var(--success); font-size: 12px; }
.available:before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--success); border-radius: 50%; margin-right: 6px; }
.card-body h3 { margin-bottom: 8px; }
.card-body p { color: var(--muted); margin-bottom: 20px; }
.skills { display: flex; align-items: center; gap: 20px; padding-block: 12px; border-top: 1px solid var(--border); margin-bottom: 12px; }
.skills span { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.skills .icon { width: 16px; height: 16px; }
.card-body .btn { margin-top: auto; }
.card-actions { display:grid; gap:8px; margin-top:auto; }
.mover-notice { background:var(--gold-light); padding:16px 20px; border-radius:12px; margin:16px 0; }
.mover-notice p { margin:4px 0; }
.mover-page { display:block; padding:0; border:1px solid var(--border-strong); background:var(--surface); width:100%; margin-top:16px; border-radius:8px; overflow:hidden; }
.mover-page img { display:block; width:100%; height:auto; }
.mover-choices { padding-left:0; flex-wrap:wrap; }
.mover-choices .choice { text-align:left; min-width:44px; }
.mover-colour { display:grid; gap:8px; margin-top:12px; }
.mover-colour select { width:100%; min-height:44px; padding:8px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--foreground); }
textarea.answer-input { resize:vertical; min-height:90px; }
.card-actions .btn { margin-top:0; }
.raster-art { display:block; max-width:100%; width:100%; height:auto; }
.object-row .raster-art { height:86px; width:86px; margin:auto; }
.story-item .raster-art { width:100%; height:auto; }
.coming-label { background: var(--background); border-radius: 12px; padding: 12px; text-align: center; color: var(--muted); margin-top: auto; font-size: 12px; }
.resume-banner { margin-top: 20px; padding: 16px 20px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.resume-banner strong { display: block; font-weight: 500; }
.howto { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 32px; padding: 24px 0; border-top: 1px solid var(--border-strong); }
.howto-item { display: flex; align-items: flex-start; gap: 12px; }
.step-no { color: var(--primary); background: var(--primary-light); border-radius: 12px; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; font-size: 16px; font-weight: 500; }
.howto-item p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.site-footer { max-width: 1240px; margin: auto; padding: 16px 24px 24px; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; text-wrap:pretty; }
.intro-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; max-width: 1000px; margin: 24px auto; }
.intro-picture { background: var(--surface); border-radius: 16px; overflow: hidden; padding: 24px; align-self:start; }
.intro-picture img { width: 100%; border-radius: 12px; }
.intro-caption { display:flex; align-items:center; justify-content:space-between; padding:16px 0 0; }
.intro-copy { align-self: center; }
.intro-copy .eyebrow { color: var(--primary); margin-bottom: 12px; }
.intro-copy h1 { margin-bottom: 12px; }
.intro-copy > p { color: var(--muted); }
.intro-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0; }
.intro-stat { background:var(--surface); border-radius:12px; padding:16px; }
.intro-stat .icon { color:var(--primary); margin-bottom:8px; }
.intro-stat strong { font-weight:500; display:block; }
.intro-stat small { color:var(--muted); }
.instructions { display:grid; gap:12px; margin:24px 0; }
.instructions p { display:flex; gap:12px; }
.instructions .icon { color:var(--success); }
.soundcheck { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.soundcheck-status { font-size:12px; color:var(--muted); }
.exam-shell { max-width:1320px; }
.exam-top { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:20px; }
.exam-top .eyebrow { color:var(--muted); margin-bottom:4px; }
.attempt-meta { display:flex; gap:24px; align-items:center; }
.timer { display:flex; align-items:center; gap:8px; color:var(--muted); font-variant-numeric:tabular-nums; }
.timer .icon { width:18px; height:18px; }
.progress-count { font-size:12px; color:var(--muted); text-align:right; }
.progress-track { width:140px; height:4px; border-radius:10px; background:var(--border-strong); margin-top:8px; overflow:hidden; }
.progress-track span { display:block; background:var(--primary); height:100%; transition:width .2s; }
.skill-tabs { display:flex; gap:24px; border-bottom:1px solid var(--border-strong); margin-bottom:20px; }
.skill-tab { display:flex; align-items:center; gap:8px; min-height:52px; padding:0 4px; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted); font-weight:500; }
.skill-tab.active { border-bottom-color:var(--primary); color:var(--primary); }
.skill-tab .badge { font-size:12px; background:var(--surface); border-radius:8px; padding:2px 8px; color:var(--muted); }
.part-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.part-tabs { display:flex; gap:8px; }
.part-tab { min-width:100px; min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface); color:var(--muted); }
.part-tab.active { color:var(--primary); background:var(--primary-light); border-color:var(--primary); font-weight:500; }
.part-tab small { font-size:12px; }
.part-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; }
.part-title p { color:var(--muted); margin-top:4px; }
.part-count { color:var(--muted); font-size:12px; flex-shrink:0; }
.audio-panel { background:var(--surface); padding:16px 20px; border-radius:12px; border:1px solid var(--border); margin-bottom:20px; display:flex; align-items:center; gap:16px; }
.audio-button { background:var(--primary); color:var(--primary-foreground); border:0; border-radius:12px; width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; }
.audio-label { min-width:130px; }
.audio-label strong { font-weight:500; display:block; }
.audio-label span { color:var(--muted); font-size:12px; }
.audio-track { flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
.audio-track input { width:100%; min-width:0; accent-color:var(--primary); height:44px; }
.audio-track input[type=range] { appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.audio-track input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:8px; background:var(--border-strong); }
.audio-track input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:16px; height:16px; border-radius:50%; border:2px solid var(--surface); background:var(--primary); margin-top:-6px; }
.audio-track input[type=range]::-moz-range-track { height:4px; border-radius:8px; background:var(--border-strong); }
.audio-track input[type=range]::-moz-range-thumb { width:12px; height:12px; border-radius:50%; border:2px solid var(--surface); background:var(--primary); }
.audio-time { font-size:12px; font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; }
.audio-error { color:var(--danger); font-size:12px; }
.exercise-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; align-items:start; }
.figure-panel { background:var(--surface); padding:20px; border:1px solid var(--border); border-radius:16px; min-width:0; }
.figure-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.figure-header strong { font-weight:500; }
.figure-header .btn { min-height:44px; font-size:12px; }
.visual { position:relative; border-radius:12px; overflow:hidden; }
.visual img { width:100%; }
.figure-note { margin-top:16px; color:var(--muted); font-size:12px; display:flex; gap:8px; align-items:start; }
.figure-note .icon { width:16px; height:16px; }
.question-panel { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; min-width:0; position:sticky; top:24px; }
.answer-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px; }
.answer-heading strong { font-weight:500; }
.answer-heading span { font-size:12px; color:var(--muted); }
.question-row { padding:16px 0; border-bottom:1px solid var(--border); }
.question-row:last-child { border-bottom:0; padding-bottom:0; }
.question-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.question-number { display:grid; place-items:center; flex-shrink:0; width:24px; height:24px; border-radius:8px; background:var(--background); color:var(--muted); font-size:12px; }
.question-header label, .question-prompt { font-size:14px; font-weight:500; line-height:24px; }
.choice-group { display:flex; gap:8px; padding-left:36px; }
.choice { min-height:44px; min-width:84px; padding:8px 16px; border:1px solid var(--border-strong); background:var(--surface); border-radius:12px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:8px; }
.choice[aria-pressed=true] { border-color:var(--primary); background:var(--primary-light); color:var(--primary); font-weight:500; }
.choice:hover { background:var(--background); }
.choice-symbol { font-size:18px; }
.answer-input { margin-left:36px; width:calc(100% - 36px); height:44px; border:1px solid var(--border-strong); border-radius:12px; color:var(--foreground); background:var(--surface); padding:10px 12px; }
.input-note { margin:6px 0 0 36px; color:var(--muted); font-size:12px; }
.object-gallery { display:grid; gap:12px; }
.object-row { display:flex; gap:24px; align-items:center; padding:8px 16px; border-bottom:1px solid var(--border); min-height:100px; }
.object-row:last-child { border:0; }
.object-row img { height:86px; width:86px; object-fit:contain; margin:auto; }
.object-row .question-number { width:32px; height:32px; }
.story-list { display:grid; gap:16px; }
.story-item { position:relative; }
.story-item img { width:100%; }
.story-number { position:absolute; top:8px; left:8px; background:var(--surface); padding:4px 10px; border-radius:8px; font-size:12px; color:var(--muted); }
.reading-passage { padding:20px; background:var(--gold-light); border-radius:12px; font-size:16px; line-height:2; }
.reading-passage h3 { color:var(--navy); font-size:18px; margin-bottom:12px; }
.reading-passage p { margin-bottom:12px; }
.gap-label { border-bottom:2px solid var(--primary); padding:2px 8px; color:var(--primary); font-size:14px; }
.word-bank { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:20px; }
.word-bank button { min-height:48px; padding:8px 4px; background:var(--surface); border:1px solid var(--border-strong); border-radius:12px; font-size:14px; }
.word-bank button.selected { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.word-bank button.used { color:var(--muted); background:var(--background); }
.gap-button { margin-left:36px; width:calc(100% - 36px); text-align:left; display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:8px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--border-strong); color:var(--muted); }
.gap-button.filled { color:var(--primary); border-color:var(--primary); background:var(--primary-light); }
.name-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--border-strong); border-radius:12px; padding:12px; min-height:68px; color:var(--foreground); background:var(--surface); text-align:left; margin-top:12px; }
.name-row.active { border-color:var(--primary); background:var(--primary-light); }
.name-row .name { font-weight:500; display:flex; align-items:center; gap:12px; }
.name-row .status { color:var(--muted); font-size:12px; display:flex; gap:6px; align-items:center; }
.name-row .status .icon { width:16px; height:16px; }
.scene-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.scene-lines line { stroke:var(--primary); stroke-width:.45; }
/* The transparent target covers the child; only its caption is painted below the feet. */
.pin { position:absolute; width:13%; min-width:44px; height:26%; min-height:44px; border:0; border-radius:12px; background:transparent; color:var(--primary-foreground); font-weight:500; transform:translate(-50%,-50%); padding:0; overflow:visible; }
.pin small { position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); display:grid; place-items:center; min-width:28px; height:22px; padding:0 7px; border:1px solid var(--surface); border-radius:8px; background:var(--navy); font-size:11px; white-space:nowrap; }
.pin.matched small, .pin:hover small { background:var(--primary); }
.match-visual .pin small { min-width:32px; height:24px; color:var(--muted); background:var(--surface); border-color:var(--border-strong); font-size:12px; }
.match-visual .pin.matched small { min-width:44px; color:var(--navy); font-weight:500; background:var(--surface); }
.match-visual .pin.active small, .match-visual .pin:hover small { background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }
.match-caption.match-selected { background:transparent; padding:0 0 12px; gap:6px; flex-wrap:wrap; color:var(--muted); }
.match-selected strong { color:var(--primary); }
.match-answers { margin-top:12px; }
.match-answers .name-row { min-height:64px; margin-top:0; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:12px; }
.match-answers .name-row:last-child { border-bottom-color:transparent; }
.match-answers .name-row.active { border-radius:12px; background:var(--primary-light); }
.match-answers .name-row .status .icon { color:var(--muted); }
.match-answers .name-row.active .status .icon { color:var(--primary); }
.match-caption { display:flex; align-items:center; gap:8px; padding:12px 16px; margin-bottom:12px; background:var(--primary-light); border-radius:12px; color:var(--primary); }
.match-caption strong { font-weight:500; }
.ball-hit { position:absolute; width:44px; height:44px; padding:0; border-radius:50%; transform:translate(-50%,-50%); background:transparent; border:2px solid transparent; }
.ball-hit.active { border-color:var(--primary); outline:3px solid #0869c71a; }
.colour-palette { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.colour-choice { display:flex; align-items:center; gap:8px; justify-content:center; min-height:44px; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface); color:var(--foreground); font-size:12px; padding:8px; }
.colour-choice[aria-pressed=true] { border-color:var(--primary); background:var(--primary-light); }
.swatch { width:16px; height:16px; flex-shrink:0; border-radius:50%; background:var(--swatch); border:1px solid #23354833; }
.picture-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-left:36px; }
.picture-choice { border:1px solid var(--border-strong); background:var(--surface); color:var(--muted); border-radius:12px; padding:12px 8px 8px; overflow:hidden; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.picture-choice[aria-pressed=true] { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.picture-choice .option-art { position:relative; width:100%; max-width:104px; aspect-ratio:1; flex:none; background:var(--surface); border-radius:8px; }
.option-art svg { position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); display:block; }
.picture-choice .option-label { width:100%; min-height:24px; display:flex; align-items:center; justify-content:center; gap:4px; font-weight:500; }
.option-label .icon { width:16px; height:16px; }
.listening-guide { background:var(--gold-light); padding:20px; border-radius:12px; display:flex; align-items:flex-start; gap:12px; }
.listening-guide .icon { color:var(--navy); width:24px; height:24px; }
.listening-guide p { color:var(--muted); margin-top:8px; }
.mini-art { margin:24px auto; width:130px; }
.example { padding:16px; background:var(--background); border-radius:12px; margin-top:20px; }
.example p { color:var(--muted); font-size:12px; }
.example strong { font-weight:500; display:block; margin-top:4px; }
.exercise-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; padding:16px 0; border-top:1px solid var(--border-strong); }
.footer-actions { display:flex; gap:12px; }
.footer-actions .btn:not(.primary):not(:disabled):hover { background:#e4e4e7; }
.save-status { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.save-status .icon { width:14px; height:14px; }
.result-shell { max-width:1000px; }
.result-heading { text-align:center; margin:16px 0 32px; }
.result-heading img { width:82px; height:118px; object-fit:contain; mix-blend-mode:multiply; margin:0 auto 12px; }
.result-heading .eyebrow { color:var(--success); margin-bottom:8px; }
.result-heading p { color:var(--muted); margin-top:8px; }
.score-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; margin-bottom:20px; }
.score-card { padding:24px; border:1px solid var(--border); background:var(--surface); border-radius:16px; }
.score-card.total { color:var(--primary-foreground); background:var(--navy); }
.score-label { display:flex; align-items:center; gap:8px; color:var(--muted); margin-bottom:12px; }
.total .score-label { color:#d4e3f0; }
.score-number { font-size:30px; line-height:1.3; font-weight:600; }
.score-number span { font-size:16px; font-weight:400; opacity:.6; }
.score-card p { margin-top:8px; font-size:12px; color:var(--muted); }
.total p { color:#d4e3f0; }
.result-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 32px; }
.result-actions .buttons { display:flex; gap:12px; }
.review-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:16px; }
.review-group { margin:24px 0; }
.review-group > h3 { margin:16px 0 8px; }
.review-table { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.review-row { display:grid; grid-template-columns:36px minmax(0,1fr) minmax(0,1fr) 70px; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); align-items:start; }
.review-row:last-child { border:0; }
.review-head { background:var(--background); color:var(--muted); font-size:12px; }
.review-answer small { color:var(--muted); display:block; margin-bottom:2px; }
.review-status { font-size:12px; display:flex; align-items:center; gap:4px; justify-self:end; }
.review-status .icon { width:16px; height:16px; }
.review-status.good { color:var(--success); }
.review-status.bad { color:var(--danger); }
.review-question { font-weight:500; }
.empty { text-align:center; padding:40px 24px; background:var(--surface); border-radius:16px; }
.empty .icon { width:40px; height:40px; color:var(--muted); margin-bottom:16px; }
.empty p { color:var(--muted); margin:8px auto 20px; max-width:400px; }
dialog { border:1px solid var(--border); border-radius:16px; padding:24px; max-width:480px; width:calc(100% - 32px); color:var(--foreground); box-shadow:var(--elevation-modal); }
dialog::backdrop { background:#14283d66; }
dialog p { color:var(--muted); margin:12px 0 24px; }
.dialog-actions { display:flex; gap:12px; justify-content:flex-end; }
dialog.zoom-dialog { max-width:1100px; max-height:90vh; overflow:auto; }
.zoom-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.zoom-image { width:100%; }
.audio-test-error { color:var(--danger); font-size:12px; }
@media (min-width:768px) { .answer-input { font-size:14px; } }
@media (max-width:1023px) {
  .main-nav { gap:16px; }
  .exam-grid { grid-template-columns:1fr; }
  .exam-card { display:grid; grid-template-columns:280px 1fr; }
  .exam-card .cover { height:auto; min-height:240px; }
  .intro-grid { gap:24px; }
  .hero { grid-template-columns:1fr 220px; }
  .hero-copy { padding:24px; }
  .catalog-heading { align-items:flex-start; flex-direction:column; }
  .exercise-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
  .audio-label { min-width:110px; }
  .colour-palette { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
  .header-inner { min-height:68px; padding:12px 16px; gap:12px; }
  .brand img { width:118px; height:34px; }
  .main-nav { gap:0; }
  .main-nav a, .main-nav .btn { display:none; }
  .main-nav .nav-active { display:block; font-size:12px; }
  .header-context { font-size:12px; gap:8px; }
  .header-context .btn { padding:8px; font-size:12px; }
  .header-context > span { display:none; }
  .header-divider { display:none; }
  .shell { padding:20px 16px; }
  .breadcrumb { margin-bottom:16px; }
  .hero { grid-template-columns:1fr 105px; min-height:240px; }
  .hero h1 { font-size:24px; }
  .hero-copy { padding:24px 16px; }
  .hero-copy > p { font-size:12px; }
  .hero-meta { flex-direction:column; gap:8px; margin-top:16px; }
  .hero-art img { width:100px; height:180px; }
  .hero-art .art-note { display:none; }
  .catalog-heading { margin-top:24px; }
  .tabbar { max-width:100%; width:100%; }
  .tabbar button { flex:1; padding:8px; font-size:12px; }
  .exam-card { display:flex; }
  .exam-card .cover { min-height:0; height:190px; }
  .card-body { padding:16px; }
  .howto { grid-template-columns:1fr; gap:20px; margin-top:24px; }
  .site-footer { padding:16px; flex-direction:column; gap:4px; }
  .resume-banner { flex-direction:column; align-items:stretch; padding:16px; }
  .intro-grid { grid-template-columns:1fr; margin-top:16px; gap:24px; }
  .intro-picture { padding:16px; }
  .intro-picture img { max-height:210px; object-fit:cover; object-position:center 45%; }
  .soundcheck { padding:12px; }
  .soundcheck .btn { font-size:12px; padding:8px; }
  .exam-top { flex-direction:column; align-items:stretch; gap:12px; }
  .exam-top h1 { font-size:20px; }
  .attempt-meta { justify-content:space-between; gap:12px; }
  .progress-track { width:120px; }
  .skill-tabs { gap:24px; margin-bottom:16px; }
  .part-toolbar { flex-direction:column; align-items:stretch; gap:12px; }
  .part-toolbar > .btn { align-self:flex-end; }
  .part-tabs { width:100%; gap:6px; }
  .part-tab { min-width:0; flex:1; font-size:12px; padding:8px 6px; gap:4px; }
  .part-tab small { font-size:10px; }
  .part-title { align-items:flex-start; }
  .part-title p { font-size:12px; }
  .part-count { display:none; }
  .audio-panel { padding:12px; flex-wrap:wrap; gap:12px; }
  .audio-label { flex:1; }
  .audio-track { flex-basis:100%; }
  .audio-error { flex-basis:100%; }
  .exercise-grid { grid-template-columns:1fr; gap:16px; }
  .figure-panel, .question-panel { padding:16px; }
  .question-panel { position:static; }
  .question-header { gap:8px; }
  .choice-group, .picture-options { padding-left:32px; }
  .picture-choice { padding:8px 4px; gap:4px; }
  .option-art svg { inset:4px; width:calc(100% - 8px); height:calc(100% - 8px); }
  .answer-input, .gap-button { margin-left:32px; width:calc(100% - 32px); }
  .answer-input { font-size:16px; }
  .input-note { margin-left:32px; }
  .object-gallery { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
  .object-row { display:flex; flex-direction:column; padding:4px; gap:8px; border-bottom:0; min-height:0; }
  .object-row img { width:100%; height:62px; }
  .object-row .raster-art { width:100%; height:62px; }
  .object-row .question-number { width:24px; height:24px; }
  .story-list { gap:12px; }
  .story-item img { max-height:220px; object-fit:contain; }
  .reading-passage { padding:16px; font-size:14px; }
  .word-bank { gap:6px; }
  .word-bank button { font-size:12px; }
  .figure-header { gap:8px; }
  .figure-header strong { font-size:14px; }
  .figure-header .btn { padding:8px; }
  .pin { border-width:0; }
  .pin small { font-size:10px; }
  .colour-palette { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .exercise-footer { flex-direction:column; align-items:stretch; gap:12px; }
  .footer-actions { gap:8px; }
  .footer-actions .btn { flex:1; padding:10px 8px; font-size:12px; }
  .exercise-footer > .btn { width:100%; }
  .save-status { justify-content:center; order:3; }
  .score-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .score-card { padding:16px; }
  .score-card.total { grid-column:1/-1; }
  .score-label { font-size:12px; }
  .result-actions, .review-toolbar { flex-direction:column; align-items:stretch; }
  .result-actions .buttons .btn { flex:1; font-size:12px; }
  .review-row { grid-template-columns:24px minmax(0,1fr); padding:12px; gap:8px; }
  .review-head { display:none; }
  .review-answer { grid-column:2; }
  .review-status { grid-column:2; justify-self:start; }
  .dialog-actions { gap:8px; }
  .dialog-actions .btn { flex:1; padding-inline:8px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }