/* KTDC brand look, modelled on ktdcgroup.vn: Be Vietnam Pro, flat navy and orange, the logo's rings, rounded white cards.
   A page opts in with @include('ui.brand-ktdc') and @section('brand', 'ktdc'). Speaking is the first page group on it. */

/* ---------- tokens ---------- */
:root[data-brand="ktdc"]{
  --font:"Be Vietnam Pro",system-ui,sans-serif;
  --navy-2:#1b1c4a; --navy-3:#2c2d66; --on-navy:#c4c6e6; --rings:rgba(255,255,255,.055);
  --bg:#f4f7fb; --bg-alt:#eef2f8; --surface:#fff; --surface-2:#fff;
  --ink:#101136; --ink-2:#3d3f66; --mute:#6f7396; --line:#e4e8f1;
  --brand-ink:#d45f04; --brand-soft:#fff1e5; --track:#e4e8f1; --blue:#1a6fe0;
  --good:#138a4b; --good-bg:#e7f6ee; --bad:#d92d20; --bad-bg:#fdecea; --warn:#b76e00; --warn-bg:#fff4dc;
  --shadow:0 1px 2px rgba(16,17,54,.04),0 8px 24px rgba(16,17,54,.06);
  --glow-a:transparent; --header:rgba(244,247,251,.92); --side:#101136; --panel-line:transparent;
}
:root[data-brand="ktdc"][data-theme="dark"]{
  --bg:#0b0c26; --bg-alt:#101236; --surface:#15163d; --surface-2:#1a1b47;
  --ink:#f3f4ff; --ink-2:#c9cbe8; --mute:#8d90b8; --line:#26285c;
  --brand-ink:#ff9a4d; --brand-soft:rgba(248,118,20,.14); --track:#26285c; --blue:#6aa8ff;
  --good:#4ade80; --good-bg:rgba(74,222,128,.12); --bad:#f87171; --bad-bg:rgba(248,113,113,.12); --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12);
  --shadow:none; --header:rgba(11,12,38,.92); --side:#101136; --panel-line:#26285c;
}

/* ---------- type: one geometric sans everywhere, bold headings (icons are <i>/.bi and keep their font) ---------- */
[data-brand="ktdc"] body,
[data-brand="ktdc"] body *:not(i):not(.bi):not([class*="fa-"]):not([class*="ki-"]){font-family:var(--font)}
[data-brand="ktdc"] :is(h1,h2,h3,h4,h5){font-weight:700;letter-spacing:-.015em}
[data-brand="ktdc"] .eyebrow{color:var(--brand-ink);font-weight:700}
[data-brand="ktdc"] .eyebrow::before{display:none}

/* ---------- shell ---------- */
[data-brand="ktdc"] .side{background:var(--side);border-right:0}
[data-brand="ktdc"] .side nav a.on{background:var(--white);color:var(--navy);font-weight:700}
[data-brand="ktdc"] .side nav a.on :is(.ico,.nav-icon){color:var(--brand)}
[data-brand="ktdc"] .side .bruce-mini{background:var(--brand);border:0;border-radius:18px}
[data-brand="ktdc"] .side .bruce-mini p{color:var(--white)}
[data-brand="ktdc"] .side .bruce-mini a{background:var(--white);color:var(--navy)}

/* ---------- shared components ---------- */
[data-brand="ktdc"] .btn{border-radius:12px;font-weight:700}
[data-brand="ktdc"] :is(.btn-p,.btn-primary){box-shadow:none}
[data-brand="ktdc"] .btn-s{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
[data-brand="ktdc"] .btn-s:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
[data-brand="ktdc"] :is(.card,.sp-page .card){border-radius:18px;border-color:var(--line);box-shadow:var(--shadow)}
[data-brand="ktdc"] .pill{padding:5px 12px;background:var(--surface);color:var(--ink-2)}
[data-brand="ktdc"] .section-heading h2{font-weight:800;font-size:clamp(24px,3vw,32px);letter-spacing:-.02em}

/* KTDC course cards, matching the "Đầu vào → Đầu ra" chip on ktdcgroup.vn */
[data-brand="ktdc"] .c-card{border-radius:18px}
[data-brand="ktdc"] .c-io{background:var(--surface);color:var(--mute);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-brand="ktdc"] .c-io b{color:var(--ink);font-weight:800}
[data-brand="ktdc"] .c-io .out b{color:var(--brand)}
[data-brand="ktdc"] .c-bd h3{font-size:17px;font-weight:700}
[data-brand="ktdc"] .c-support{border-radius:18px}
[data-brand="ktdc"] .c-support::before{width:420px;height:420px;right:-170px;top:-170px;background:repeating-radial-gradient(circle,transparent 0 30px,var(--rings) 30px 48px);border-radius:50%}
[data-brand="ktdc"] .c-support h3{font-weight:800}

/* ---------- Speaking result ---------- */
[data-brand="ktdc"] .sp-page .ph h1{font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;line-height:1.2;max-width:760px}
[data-brand="ktdc"] .sp-page .ph .meta{margin-top:12px}
[data-brand="ktdc"] .sp-chat .panel-header h2{font-weight:800;letter-spacing:-.02em}

/* score panel: navy with the logo's rings */
[data-brand="ktdc"] .sp-score{position:relative;overflow:hidden;display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px 44px;align-items:center;padding:30px 34px;border-radius:28px;background:var(--navy);color:var(--white);border:1px solid var(--panel-line)}
[data-brand="ktdc"] .sp-score::before{content:"";position:absolute;width:640px;height:640px;left:-240px;top:-240px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 40px,var(--rings) 40px 64px);pointer-events:none}
[data-brand="ktdc"] .sp-score>*{position:relative;min-width:0}
[data-brand="ktdc"] .sp-gauge{width:200px;height:200px}
[data-brand="ktdc"] .sp-gauge circle{stroke-width:12}
[data-brand="ktdc"] .sp-track{stroke:var(--navy-3)}
[data-brand="ktdc"] .sp-gauge b{font-size:64px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--white)}
[data-brand="ktdc"] .sp-gauge span{margin-top:8px;max-width:120px;font-size:11px;font-weight:600;color:var(--on-navy)}
[data-brand="ktdc"] .sp-criteria{display:grid;gap:12px}
[data-brand="ktdc"] .sp-criteria a{grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;padding:6px 10px;color:var(--white)}
[data-brand="ktdc"] .sp-criteria a:hover{background:var(--on-navy-faint)}
[data-brand="ktdc"] .sp-criteria a>span:first-child{font-size:14.5px;font-weight:600}
[data-brand="ktdc"] .sp-criteria a>b{font-size:24px;font-weight:800}
.sp-seg{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.sp-seg i{height:8px;border-radius:3px;background:var(--navy-3)}
.sp-seg i.on{background:var(--brand)}
.sp-seg i.half{background:linear-gradient(90deg,var(--brand) 50%,var(--navy-3) 50%)}
.sp-priority{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px 24px;padding-top:20px;border-top:1px solid var(--navy-3);font-size:14.5px;color:var(--on-navy)}
.sp-priority b{color:var(--white);margin-right:4px}

/* answer: player, transcript with underlined corrections, and the correction panel */
[data-brand="ktdc"] .sp-answer{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;margin-top:20px;padding:0}
[data-brand="ktdc"] .sp-answer:not(:has(.sp-side)){grid-template-columns:minmax(0,1fr)}
.sp-transcript{overflow:hidden}
[data-brand="ktdc"] .sp-transcript .sp-player{margin:0;padding:14px 20px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--surface)}
.sp-questions{padding:12px 22px;border-bottom:1px solid var(--line);font-size:14px}
.sp-questions summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.sp-questions .sp-cue{padding-top:8px}
[data-brand="ktdc"] .sp-questions .sp-cue h3{font-size:16px;font-weight:700}
[data-brand="ktdc"] .sp-compare-tabs{display:flex;gap:4px;padding:0 14px;border-bottom:1px solid var(--line)}
[data-brand="ktdc"] .sp-compare-tabs button{padding:12px 10px;margin-bottom:-1px;border-radius:0;border-bottom:3px solid transparent;background:none;font-size:14px;color:var(--mute)}
[data-brand="ktdc"] .sp-compare-tabs button.on{color:var(--ink);border-bottom-color:var(--brand);background:none}
.sp-transcript [role="tabpanel"]{padding:18px 22px}
.sp-hint{font-size:13px;font-weight:600;color:var(--mute);margin-bottom:6px}
.sp-text{font-size:16px;line-height:1.9;color:var(--ink-2);white-space:pre-line}
.sp-mark{padding:0 1px;border-bottom:2.5px solid var(--brand);background:none;color:inherit;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sp-mark-lexical{border-bottom-color:var(--blue)}
.sp-mark-fluency{border-bottom-style:dashed;border-bottom-color:var(--ink-2)}
.sp-mark:hover,.sp-mark.on{background:var(--brand-soft)}
.sp-key{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.sp-key span::before{content:"";display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle;background:var(--brand)}
.sp-key .sp-key-lexical::before{background:var(--blue)}
.sp-key .sp-key-fluency::before{background:repeating-linear-gradient(90deg,var(--ink-2) 0 4px,transparent 4px 6px)}
.sp-fix-panel{padding:20px}
.sp-fix-item h3{margin:4px 0 14px;font-size:17px;font-weight:700}
.sp-said,.sp-better{border-radius:12px;padding:10px 12px;font-size:14.5px}
.sp-said{background:var(--bg);color:var(--mute)}
.sp-said s{text-decoration-color:var(--brand);text-decoration-thickness:2px}
.sp-better{margin-top:8px;background:var(--good-bg);color:var(--ink);font-weight:600}
.sp-said small,.sp-better small{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;color:var(--mute)}
.sp-fix-item>p:not(.eyebrow){margin-top:12px;font-size:13.5px;color:var(--ink-2)}
.sp-fix-nav{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.sp-fix-nav .btn{flex:1}

/* recording player (fragments/tests/speaking-player): speaking-player.js sizes the bars from the audio itself */
.sp-wave i{height:10%;min-height:3px;transition:height .3s ease}
.sp-play:disabled{opacity:.45;cursor:default;box-shadow:none}
[data-player-state="loading"] .sp-wave i{animation:sp-wave-wait .9s ease-in-out infinite alternate}
.sp-speed{flex:none;min-width:46px;padding:5px 8px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.sp-speed:hover{border-color:var(--brand)}
.sp-player-error{margin:10px 0 0;color:var(--bad)}
@keyframes sp-wave-wait{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sp-wave i{transition:none;animation:none}}

/* help cards, criterion tabs and sections */
[data-brand="ktdc"] .sp-tabs{background:var(--header)}
[data-brand="ktdc"] .sp-tabs a{border-radius:10px;font-weight:600}
[data-brand="ktdc"] .sp-tabs b{font-weight:800}
[data-brand="ktdc"] .sp-tabs a[aria-current="true"]{background:var(--navy);color:var(--white)}
[data-brand="ktdc"][data-theme="dark"] .sp-tabs a[aria-current="true"]{background:var(--navy-3)}
[data-brand="ktdc"] .sp-section-head h2{font-weight:800;font-size:clamp(22px,2.4vw,28px)}
[data-brand="ktdc"] .sp-band{align-items:baseline;padding:6px 14px;border-radius:12px;background:var(--navy);color:var(--white)}
[data-brand="ktdc"][data-theme="dark"] .sp-band{background:var(--navy-3)}
[data-brand="ktdc"] .sp-band b{font-size:26px;font-weight:800}
[data-brand="ktdc"] .sp-band small{font-size:13px;color:var(--on-navy)}
[data-brand="ktdc"] .sp-lead{border-left:4px solid var(--brand);border-radius:0 18px 18px 0;font-size:15.5px}
[data-brand="ktdc"] .sp-list h3{font-size:15px;font-weight:700}
[data-brand="ktdc"] .sp-fix-row>span{font-weight:700}
[data-brand="ktdc"] :is(.sp-cefr-legend b,.sp-words td:first-child>b){font-weight:800}
[data-brand="ktdc"] .sp-community>summary{font-size:22px;font-weight:800;color:var(--ink);cursor:pointer}

@container (max-width:860px){
  [data-brand="ktdc"] .sp-answer{grid-template-columns:minmax(0,1fr)}
  .sp-side{position:static}
  .sp-quick{display:none}
}
@container (max-width:620px){
  [data-brand="ktdc"] .sp-score{grid-template-columns:minmax(0,1fr);justify-items:center;padding:24px 18px}
  [data-brand="ktdc"] .sp-gauge{width:170px;height:170px}
  [data-brand="ktdc"] .sp-gauge b{font-size:54px}
  [data-brand="ktdc"] .sp-criteria{width:100%}
  .sp-priority{flex-direction:column;align-items:stretch}
  .sp-transcript [role="tabpanel"]{padding:16px}
  .sp-text{font-size:15.5px}
}

/* ---------- CEFR bar: one blue ramp, light (A1) to dark (C2) ---------- */
:root[data-brand="ktdc"]{--cefr-0:#dde5f2;--cefr-1:#b3c4e2;--cefr-2:#809ed2;--cefr-3:#4e77bf;--cefr-4:#2a52a3;--cefr-5:#14256b}
:root[data-brand="ktdc"][data-theme="dark"]{--cefr-0:#2c2d66;--cefr-1:#3b4f93;--cefr-2:#4f72c0;--cefr-3:#7397dc;--cefr-4:#a3bdee;--cefr-5:#d9e5ff}
[data-brand="ktdc"] .sp-cefr-0{--c:var(--cefr-0)} [data-brand="ktdc"] .sp-cefr-1{--c:var(--cefr-1)} [data-brand="ktdc"] .sp-cefr-2{--c:var(--cefr-2)}
[data-brand="ktdc"] .sp-cefr-3{--c:var(--cefr-3)} [data-brand="ktdc"] .sp-cefr-4{--c:var(--cefr-4)} [data-brand="ktdc"] .sp-cefr-5{--c:var(--cefr-5)}
[data-brand="ktdc"] .sp-cefr-stack{gap:2px;background:var(--track)}
[data-brand="ktdc"] .sp-cefr-stack i{background:var(--c)}
[data-brand="ktdc"] .sp-cefr-legend span{background:none;padding:0;font-weight:700;display:inline-flex;align-items:center;gap:6px}
[data-brand="ktdc"] .sp-cefr-legend span::before{content:'';width:10px;height:10px;border-radius:3px;background:var(--c)}
[data-brand="ktdc"] .sp-vocab-details>summary{cursor:pointer;color:var(--ink);font-weight:600}

/* ---------- pronunciation: sounds toggle and chips ---------- */
.sp-ph-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;white-space:nowrap}
.sp-ph-toggle:hover{border-color:var(--ink)}
.sp-ph-toggle svg{width:14px;height:14px;transition:transform .2s}
.sp-ph-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
[data-brand="ktdc"] .sp-words tr.collapse td{background:var(--bg-alt)}
[data-brand="ktdc"] .sp-phonemes{gap:8px}
[data-brand="ktdc"] .sp-phonemes span{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:54px;padding:6px 10px;border:0;border-radius:12px;background:var(--good-bg);color:var(--good)}
[data-brand="ktdc"] .sp-phonemes span.sp-mid{background:var(--warn-bg);color:var(--warn)}
[data-brand="ktdc"] .sp-phonemes span.sp-low{background:var(--bad-bg);color:var(--bad)}
[data-brand="ktdc"] .sp-phonemes i{font-family:var(--font);font-style:normal;font-size:15px;font-weight:700;color:var(--ink)}
[data-brand="ktdc"] .sp-phonemes b{font-size:12px;font-weight:700}

/* ---------- Speaking recording (tests/show-speaking, speaking-recorder.js); the hero is the Reading start page's ---------- */
.rec .rs-hero{align-items:center}
.rec-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:20px}
.rec-q{padding:24px 26px}
.rec-q-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-bottom:14px}
.rec-q-head .eyebrow{margin:0}
.rec-q-head .btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px}
[data-brand="ktdc"] .rec-q .sp-cue h3{margin:0;font-size:22px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.rec-q .sp-cue ul{gap:10px;margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--ink)}
.rec-q .sp-cue li{padding-left:20px}
.rec-q .sp-cue li::before{top:10px}
.rec-q .sp-cue .meta{margin:14px 0 0;font-size:13.5px;color:var(--mute)}

/* recorder card: [data-state] is idle, asking, recording, saving, review or submitting */
.rec-card{position:sticky;top:20px;padding:26px;text-align:center}
.rec-card [hidden]{display:none!important}
.rec-stage,.rec-processing{display:flex;flex-direction:column;align-items:center}
.rec-clock{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.rec-clock span{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--mute)}
.rec-card:is([data-state="recording"],[data-state="saving"]) .rec-clock span{color:var(--ink)}
.rec-btn{position:relative;display:grid;place-items:center;width:148px;height:148px;padding:0;border:0;border-radius:50%;background:none;color:var(--white);cursor:pointer}
.rec-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
.rec-btn:disabled{cursor:default}
.rec-ring{position:absolute;inset:0;width:100%;height:100%}
.rec-ring circle{fill:none;stroke-width:8}
.rec-ring-track{stroke:var(--track)}
.rec-ring-fill{opacity:0;stroke:var(--brand);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .2s linear,stroke .2s}
.rec-card:is([data-state="recording"],[data-state="saving"]) .rec-ring-fill{opacity:1}
.rec-ring .rec-ring-min{fill:var(--surface);stroke:var(--mute);stroke-width:2.5}
.rec-enough .rec-ring-fill,.rec-enough .rec-ring .rec-ring-min{stroke:var(--good)}
.rec-core{position:relative;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:var(--brand);transition:background .15s,transform .15s}
.rec-btn:hover:not(:disabled) .rec-core{transform:scale(1.04)}
.rec-btn:active:not(:disabled) .rec-core{transform:scale(.97)}
.rec-btn:disabled .rec-core{opacity:.55}
.rec-core svg{width:44px;height:44px}
.rec-stop,.rec-card[data-state="recording"] .rec-mic{display:none}
.rec-card[data-state="recording"] .rec-stop{display:block}
.rec-card[data-state="recording"] .rec-core{background:var(--bad)}
.rec-meter{display:flex;align-items:center;justify-content:center;gap:3px;height:36px;margin-top:16px}
.rec-meter i{width:4px;height:10%;min-height:4px;border-radius:2px;background:var(--track);transition:height .07s linear}
.rec-metered .rec-meter i{background:var(--brand)}
.rec-status{margin:12px 0 0;font-size:17px;font-weight:700;line-height:1.4;color:var(--ink)}
.rec-hint{max-width:380px;min-height:42px;margin:6px auto 0;font-size:14px;line-height:1.5;color:var(--mute)}
.rec-card[data-state="recording"].rec-enough .rec-hint{color:var(--good);font-weight:600}
[data-brand="ktdc"] .rec-error{margin:0 0 18px;border:0;border-radius:14px;text-align:left;font-size:14.5px;font-weight:600}

/* listening back and sending */
.rec-review{text-align:left}
.rec-review .eyebrow{margin:0 0 12px}
.rec-review .sp-player{margin:0;padding:14px 16px;border-radius:16px}
.rec-note{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.rec-note-warn,.rec-note-bad{padding:12px 14px;border-radius:12px;background:var(--warn-bg);color:var(--warn);font-weight:600}
.rec-note-bad{background:var(--bad-bg);color:var(--bad)}
.rec-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rec-actions .btn{flex:1 1 150px;padding:12px 16px;font-size:15px}
.rec-processing{padding:10px 0}
.rec-processing .spinner-border{width:44px;height:44px;border-width:4px;color:var(--brand)}
.rec-processing .test-ad{max-width:100%;margin:20px 0 0}

/* choose another question */
.rec-modal .modal-title{font-size:20px;font-weight:800}
.rec-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rec-pick{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink);cursor:pointer}
.rec-pick:hover{border-color:var(--brand)}
.rec-pick:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.rec-pick input{flex:none;margin-top:3px;accent-color:var(--brand)}
[data-theme="dark"] .rec-modal .btn-close{filter:invert(1)}
@container (max-width:820px){.rec-grid{grid-template-columns:minmax(0,1fr)}.rec-card{position:static}}
@container (max-width:520px){.rec-q{padding:20px}.rec-card{padding:22px 18px}[data-brand="ktdc"] .rec-q .sp-cue h3{font-size:19px}}
@media (max-width:640px){.rec-picks{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.rec-core,.rec-ring-fill,.rec-meter i{transition:none}}

/* ---------- community: students, reviews, teachers (ui/community) ---------- */
.cm-block{margin-top:44px}
.cm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.cm-head h2{font-size:22px;font-weight:800;margin:0;color:var(--ink)}
.cm-head p{margin:4px 0 0;color:var(--mute);font-size:14px}
.cm-head .btn{flex:none}
.cm-students{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.cm-student{display:block;color:inherit;min-width:0}
.cm-student img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin-bottom:10px;background:var(--bg-alt)}
.cm-student:hover img{filter:brightness(.92)}
.cm-student b{display:block;font-size:16px;color:var(--ink)}
.cm-student span{font-size:13px;color:var(--mute)}
.cm-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cm-review{margin:0;padding:20px;display:flex;flex-direction:column}
.cm-review blockquote{margin:0 0 16px;font-size:14.5px;line-height:1.65;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.cm-review blockquote::before{content:'\201C';display:block;height:22px;font-size:44px;line-height:1;color:var(--brand);font-weight:800}
.cm-review figcaption{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.cm-review figcaption img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.cm-review figcaption div{min-width:0;flex:1}
.cm-review figcaption b{display:block;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-review figcaption span{font-size:12px;color:var(--mute)}
.cm-review .cm-stars{flex:none;color:#f5a524;font-size:14px;letter-spacing:1px}
.cm-staff{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 16px}
@container (max-width:900px){.cm-staff{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:480px){.cm-staff{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-head{flex-direction:column;align-items:flex-start}}
.cm-teacher{min-width:0;text-align:center}
.cm-teacher img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:18px;margin-bottom:10px;background:radial-gradient(circle at 50% 30%,#3a3c8a 0%,#1b1c4a 55%,#101136 100%)}
.cm-teacher b{display:block;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-teacher span{display:block;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- courses: every course in a grid, no carousel ---------- */
[data-brand="ktdc"] .c-nav{display:none}
[data-brand="ktdc"] .c-rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));overflow:visible;scroll-snap-type:none;margin:0;padding:4px 0 0}

/* ---------- Bruce side chat (fragments/chat/side-chat) ---------- */
[data-brand="ktdc"] .hub-side-chat .panel-header{padding:16px 20px!important}
[data-brand="ktdc"] .hub-side-chat .panel-header h2{font-size:22px}
[data-brand="ktdc"] .hub-side-chat>.scrollable-panel{padding:20px 20px 8px}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .messages-panel .mb-10{margin-bottom:20px!important}
/* sender row: small avatar + name for Bruce; nothing for the student's own messages */
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .messages-panel .symbol img{width:28px!important;height:28px!important}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .messages-panel .text-hover-primary{font-size:14px!important;font-weight:700!important;color:var(--ink)!important;pointer-events:none}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .messages-panel .justify-content-end>.flex-column>.d-flex.align-items-center{display:none!important}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .messages-panel .justify-content-end>.flex-column{max-width:85%}
/* bubbles */
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) [data-kt-element="message-text"]{font-size:14.5px;font-weight:400!important;line-height:1.65;color:var(--ink)!important}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) [data-kt-element="message-text"].bg-light{background:var(--navy)!important;color:var(--white)!important;border:0;border-radius:18px 18px 4px 18px!important;padding:12px 16px!important;text-align:left!important}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) [data-kt-element="message-text"].bg-white{background:var(--surface)!important;border:1px solid var(--line);border-radius:4px 18px 18px 18px!important;padding:16px 18px!important}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) [data-kt-element="message-text"] .card{background:none;border:0;box-shadow:none}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) [data-kt-element="message-text"] .card-body{padding:0!important}
/* Bruce's markdown */
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content :is(h1,h2,h3,h4,h5,h6){color:var(--ink);font-weight:700;letter-spacing:-.01em;line-height:1.35;margin:18px 0 8px}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content h1{font-size:18px}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content h2{font-size:16.5px}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content :is(h3,h4,h5,h6){font-size:15px}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content>:first-child{margin-top:0}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content p{margin:0 0 10px}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content :is(ul,ol){margin:0 0 12px;padding-left:20px}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content li{margin-bottom:4px}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content li::marker{color:var(--brand)}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content strong{font-weight:700;color:var(--ink)}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content em{color:var(--ink-2)}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content hr{margin:16px 0;border:0;border-top:1px solid var(--line);opacity:1}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content blockquote{margin:0 0 12px;padding:8px 12px;border-left:3px solid var(--brand);background:var(--bg-alt);border-radius:0 8px 8px 0}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content code{font-size:13px;padding:1px 5px;border-radius:5px;background:var(--bg-alt);color:var(--ink)}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content pre{padding:12px;border-radius:10px;background:var(--bg-alt)}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content table{display:block;width:100%;max-width:100%;overflow-x:auto;margin:0 0 14px;border-collapse:collapse;font-size:13.5px;line-height:1.45}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content :is(th,td){padding:8px 10px;border:1px solid var(--line);vertical-align:top;text-align:left}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .markdown-content th{background:var(--bg-alt);font-weight:700;color:var(--ink)}
/* composer */
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .input-group-container{padding:12px 16px 16px}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .input-group{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:6px;padding:6px 6px 6px 4px;border-radius:16px;transition:border-color .15s}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .input-group:focus-within{border-color:var(--ink)!important}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .input-message{min-height:40px;padding:9px 10px;font-size:14.5px;color:var(--ink)}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .input-message::placeholder{color:var(--mute)}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .btn-send-message{flex:none;align-self:flex-end;width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:12px!important;background:var(--brand);border:0;color:var(--white)}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .btn-send-message:hover{background:var(--brand-ink)}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .btn-send-message:disabled{background:var(--track);color:var(--mute)}
[data-brand="ktdc"] :is(.hub-chat,.hub-side-chat) .btn-send-message svg{width:18px;height:18px}
[data-brand="ktdc"][data-theme="dark"] :is(.hub-chat,.hub-side-chat) [data-kt-element="message-text"].bg-light{background:var(--navy-3)!important}

/* ---------- home (home/index, home/_skills) ---------- */
.hm{container-type:inline-size}
.hm-sec{margin-top:44px}
.hm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.hm-head h2{font-size:22px;font-weight:800;margin:0;color:var(--ink)}
.hm-head a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--brand-ink)}
.hm svg{flex:none}
.hm-head a svg,.hm .btn svg,.hm-row-go svg{width:16px;height:16px}
.hm-hero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center;padding:36px;border-radius:28px;background:var(--navy);color:var(--white)}
.hm-hero::before{content:"";position:absolute;z-index:-1;width:680px;height:680px;right:-240px;top:-260px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 40px,var(--rings) 40px 64px)}
[data-theme="dark"] .hm-hero{border:1px solid var(--line)}
.hm-hero .eyebrow{color:var(--brand)}
.hm-hero h1{font-size:34px;font-weight:800;line-height:1.18;margin:8px 0 0;color:var(--white)}
.hm-hero h1 span{color:var(--brand)}
.hm-hero-copy>p:not(.eyebrow){color:var(--on-navy);margin:12px 0 24px;max-width:500px;font-size:15.5px;line-height:1.6}
.hm-acts{display:flex;gap:10px;flex-wrap:wrap}
.hm-acts .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px}
.hm-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:var(--white)}
.hm-ghost:hover{background:rgba(255,255,255,.08);color:var(--white)}
.hm-stat{background:var(--navy-2);border:1px solid var(--navy-3);border-radius:22px;padding:22px}
.hm-stat-top{display:flex;justify-content:space-between;gap:12px}
.hm-stat-top small{font-size:12.5px;color:var(--on-navy);font-weight:500}
.hm-stat-band{display:block;font-size:60px;font-weight:800;line-height:1;letter-spacing:-.03em;margin:10px 0 16px}
.hm-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hm-stat-grid div{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--navy);border-radius:12px;padding:10px 14px}
.hm-stat-grid span{min-width:0;font-size:12.5px;color:var(--on-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-stat-grid b{font-size:20px;font-weight:800}
.hm-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.hm-steps li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600}
.hm-steps span{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:var(--white);font-weight:800;font-size:14px}
.hm-skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hm-skill{display:flex;flex-direction:column;gap:10px;padding:20px;color:var(--ink);transition:transform .15s,box-shadow .15s}
.hm-skill:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(16,17,54,.1);color:var(--ink)}
.hm-skill-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--brand-soft);color:var(--brand)}
.hm-skill-icon svg{width:24px;height:24px}
.hm-skill h3{font-size:18px;font-weight:700;margin:4px 0 0}
.hm-skill p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mute);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hm-skill-meta{font-size:12px;font-weight:700;color:var(--good);background:var(--good-bg);border-radius:999px;padding:2px 9px;align-self:flex-start}
.hm-skill-go{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700}
.hm-skill-go svg{width:18px;height:18px;color:var(--brand)}
.hm-two{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px}
.hm-recent{padding:6px 0}
.hm-row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);color:var(--ink)}
.hm-row:last-child{border-bottom:0}
.hm-row:hover{background:var(--bg-alt);color:var(--ink)}
.hm-row-band{flex:none;display:grid;place-items:center;min-width:46px;height:32px;border-radius:9px;background:var(--navy);color:var(--white);font-weight:800}
[data-theme="dark"] .hm-row-band{background:var(--navy-3)}
.hm-row-title{flex:1;min-width:0}
.hm-row-title b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-row-title small{font-size:12.5px;color:var(--mute)}
.hm-row-go{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;color:var(--brand-ink)}
.hm-empty{padding:24px 20px;text-align:center}
.hm-empty p{color:var(--mute);margin:0 0 14px}
.hm-empty .btn{display:inline-flex;align-items:center;gap:8px}
.hm-bruce{padding:22px;display:flex;flex-direction:column;gap:14px;height:calc(100% - 46px)}
.hm-bruce-who{display:flex;align-items:center;gap:12px}
.hm-bruce-who img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;background:var(--navy)}
.hm-bruce-who b{display:block;font-size:16px}
.hm-bruce-who span{font-size:13px;color:var(--mute)}
.hm-bubble{margin:0;background:var(--bg-alt);border-radius:4px 16px 16px 16px;padding:12px 14px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.hm-bruce .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:auto}
.hm-hero-public h1{font-size:40px}
.hm-partners{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:26px;font-size:13px;color:var(--on-navy)}
.hm-partners img{height:40px;padding:6px 10px;border-radius:10px;background:var(--white)}
.hm-video{position:relative;border-radius:20px;overflow:hidden;background:var(--navy-2);border:1px solid var(--navy-3);aspect-ratio:16/10}
.hm-video video{display:block;width:100%;height:100%;object-fit:cover}
.hm-final{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 32px;border-radius:24px}
.hm-final{background:var(--navy);color:var(--white)}
.hm-final h2{font-size:24px;font-weight:800;margin:0;color:var(--white)}
.hm-final p{margin:6px 0 0;color:var(--on-navy)}
.hm-final .btn{flex:none;display:inline-flex;align-items:center;gap:8px}
.hm-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hm-links img{height:56px;border-radius:12px}
@container (max-width:1000px){.hm-skills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:820px){
  .hm-hero,.hm-two{grid-template-columns:minmax(0,1fr)}
  .hm-hero{padding:26px 22px;gap:24px}
  .hm-hero h1,.hm-hero-public h1{font-size:28px}
  .hm-final{flex-direction:column;align-items:flex-start;padding:24px}
  .hm-bruce{height:auto}
}
@container (max-width:520px){
  .hm-skills{grid-template-columns:minmax(0,1fr)}
  .hm-hero h1,.hm-hero-public h1{font-size:25px}
  .hm-stat-band{font-size:50px}
  .hm-stat-grid div{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px}
  .hm-row{padding:12px 16px}
  .hm-row-go{display:none}
}

/* ---------- sign in (accounts/social-login) ---------- */
.lg{padding-block:40px 64px;container-type:inline-size}
.lg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1040px;margin:0 auto;border-radius:28px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line)}
.lg-intro{position:relative;overflow:hidden;isolation:isolate;padding:44px 40px;background:var(--navy);color:var(--white);display:flex;flex-direction:column}
.lg-intro::before{content:"";position:absolute;z-index:-1;width:620px;height:620px;left:-260px;bottom:-320px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 40px,var(--rings) 40px 64px)}
.lg-intro .eyebrow{color:var(--brand)}
.lg-intro h2{font-size:30px;font-weight:800;line-height:1.2;margin:10px 0 26px;color:var(--white)}
.lg-intro ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.lg-intro li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--on-navy)}
.lg-intro li svg{width:22px;height:22px;flex:none;padding:3px;border-radius:50%;background:var(--brand);color:var(--white)}
.lg-partners{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:32px;font-size:13px;color:var(--on-navy)}
.lg-partners img{height:38px;padding:6px 10px;border-radius:10px;background:var(--white)}
.lg-card{padding:44px 40px}
.lg-card h1{font-size:30px;font-weight:800;margin:6px 0 24px;color:var(--ink)}
.lg-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:700;font-size:15px}
.lg-google:hover{border-color:var(--ink);color:var(--ink)}
.lg-google img{width:20px;height:20px}
.lg-divider{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:13px;color:var(--mute)}
.lg-divider::before,.lg-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.lg-card .form-label{font-weight:600;color:var(--ink);font-size:14px}
.lg-card .form-control{padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:15px}
.lg-card .form-control:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--brand-soft)}
.lg-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 16px;margin-top:4px;font-size:15px}
.lg-submit svg{width:18px;height:18px}
.lg-help{margin:14px 0 0;font-size:13.5px;color:var(--mute);text-align:center}
.lg-help+.lg-help{margin-top:6px}
.lg-help a{color:var(--brand-ink);font-weight:600}
.lg .public-captcha-logo{max-width:160px;margin:12px auto;display:block}
.lg .cf-turnstile{margin-bottom:14px}
@container (max-width:780px){
  .lg-grid{grid-template-columns:minmax(0,1fr)}
  .lg-card{order:-1;padding:32px 24px}
  .lg-intro{padding:32px 24px}
  .lg-intro h2{font-size:24px}
}

/* ---------- test library: Listening now, Reading later (tests/ielts/listening, _component/listening-*) ---------- */
.tl{container-type:inline-size}
.tl-sec{margin-top:44px}
.tl-hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:32px 36px;border-radius:28px;background:var(--navy);color:var(--white)}
.tl-hero::before{content:"";position:absolute;z-index:-1;width:640px;height:640px;right:-220px;top:-280px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 40px,var(--rings) 40px 64px)}
[data-theme="dark"] .tl-hero{border:1px solid var(--line)}
.tl-hero-copy{max-width:640px}
.tl-hero .eyebrow{color:var(--brand)}
.tl-hero h1{font-size:34px;font-weight:800;line-height:1.15;margin:8px 0 0;color:var(--white)}
.tl-hero-copy>p:not(.eyebrow){margin:12px 0 0;color:var(--on-navy);font-size:15px;line-height:1.6}
.tl-list{margin-top:24px}
.tl-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tl-filter{flex:1 1 160px;min-width:0}
.tl-filters .form-select{height:44px;padding:0 36px 0 14px;border:1.5px solid var(--line);border-radius:12px;background-color:var(--surface);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.tl-filters .form-select:hover{border-color:var(--mute)}
.tl-filters .form-select:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--brand-soft)}
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tl-card{display:flex;flex-direction:column;padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.tl-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(16,17,54,.1)}
.tl-card-top{display:flex;flex-wrap:wrap;gap:6px}
.tl-chip{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--bg-alt);color:var(--ink-2)}
.tl-chip-brand{background:var(--brand-soft);color:var(--brand-ink)}
.tl-card-intro{margin:12px 0 0;font-size:13px;font-weight:700;color:var(--brand-ink)}
.tl-card h3{font-size:22px;font-weight:800;margin:10px 0 0;color:var(--ink);line-height:1.25}
.tl-card-meta{display:flex;gap:14px;margin:6px 0 0;font-size:13.5px;color:var(--mute)}
.tl-card-meta b{color:var(--ink);font-weight:800}
.tl-card-desc{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-card-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:16px}
.tl-done{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--good);background:var(--good-bg);border-radius:999px;padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-done b{font-weight:800}
.tl-start{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 14px;cursor:pointer}
.tl-card.completed .tl-start{flex:none}
.tl-ad{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:18px;background:var(--navy);color:var(--white);position:relative;overflow:hidden;isolation:isolate}
.tl-ad::before{content:"";position:absolute;z-index:-1;width:360px;height:360px;right:-160px;bottom:-180px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 28px,var(--rings) 28px 46px)}
.tl-ad h3{font-size:20px;font-weight:800;margin:0;color:var(--white);line-height:1.25}
.tl-ad p{margin:0;color:var(--on-navy);font-size:14px;line-height:1.55}
.tl-ad .btn{margin-top:auto;align-self:flex-start}
.tl-loading{display:flex;justify-content:center;padding:48px 0;color:var(--brand)}
.tl-empty{padding:32px 20px;text-align:center}
.tl-empty p{margin:0 0 14px;color:var(--mute);font-size:15px}
.tl-modal .modal-content{border:0;border-radius:22px;background:var(--surface);color:var(--ink)}
.tl-modal .modal-header{align-items:flex-start;padding:22px 22px 6px;border:0}
.tl-modal .modal-title{font-size:20px;font-weight:800;margin:4px 0 0}
.tl-modal .modal-body{display:grid;gap:10px;padding:14px 22px 22px}
.tl-option{display:block;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;color:var(--ink)}
.tl-option:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--ink)}
.tl-option b{display:block;font-size:15.5px}
.tl-option span{font-size:13px;color:var(--mute)}
.tl-option[aria-disabled="true"]{opacity:.5;pointer-events:none}
[data-theme="dark"] .tl-modal .btn-close{filter:invert(1)}
@container (max-width:820px){
  .tl-hero{flex-direction:column;align-items:flex-start;padding:26px 22px;gap:20px}
  .tl-hero h1{font-size:28px}
}
@container (max-width:520px){
  .tl-hero h1{font-size:25px}
  .tl-filter{flex-basis:calc(50% - 4px)}
  .tl-grid{grid-template-columns:minmax(0,1fr)}
}
[data-brand="ktdc"] .tl-card:hover .tl-start{background:var(--navy);border-color:var(--navy);color:var(--white)}

/* ---------- Speaking history (tests/history, tests/_component/history_table); reuses the home hero and rows ---------- */
.sh-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sh-tabs a{padding:10px 14px;margin-bottom:-1px;border-bottom:2.5px solid transparent;font-size:14.5px;font-weight:700;color:var(--mute);white-space:nowrap}
.sh-tabs a:hover{color:var(--ink)}
.sh-tabs a.active{color:var(--ink);border-bottom-color:var(--brand)}
.sh-list .hm-row{align-items:flex-start}
.sh-list .hm-row-band{margin-top:2px}
.sh-list .hm-row-go{align-self:center}
.sh-questions{display:block;margin:2px 0;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-pages{display:flex;justify-content:center;margin-top:16px}
.sh-pages nav{display:flex;flex-direction:column;align-items:center;gap:8px}
.sh-pages nav>div:first-child{display:none}
.sh-pages nav>div:last-child{display:flex;flex-direction:column;align-items:center;gap:8px}
.sh-pages p{margin:0;font-size:13px;color:var(--mute)}
.sh-pages .pagination{margin:0;gap:4px}
.sh-pages .page-link{min-width:38px;height:38px;display:grid;place-items:center;border-radius:10px!important;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:14px}
.sh-pages .page-item.active .page-link{background:var(--navy);border-color:var(--navy);color:var(--white)}
.sh-pages .page-item.disabled .page-link{color:var(--mute);opacity:.6}
[data-theme="dark"] .sh-pages .page-item.active .page-link{background:var(--navy-3);border-color:var(--navy-3)}
.sh-list .hm-row-title b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* full-page Bruce chat (fragments/chat/hub-page) */
[data-brand="ktdc"] .hub-chat #kt_chat_messenger{background:transparent;border:0;box-shadow:none}
[data-brand="ktdc"] .hub-chat .messages-panel,[data-brand="ktdc"] .hub-chat .hub-composer .input-group{max-width:780px;margin-inline:auto}
[data-brand="ktdc"] .hub-chat .messages-panel{padding:8px 4px 16px}
[data-brand="ktdc"] .hub-chat .hub-composer{background:transparent;border:0;padding:8px 4px 16px}
[data-brand="ktdc"] .hub-chat .hub-composer .input-group{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
[data-brand="ktdc"] .hub-chat-title{display:flex;align-items:center;gap:8px;min-width:0}
[data-brand="ktdc"] .hub-chat-title .input-title{font-size:17px;font-weight:700;color:var(--ink);background:transparent}
[data-brand="ktdc"] .hub-chat-title .input-title:not(:disabled){border:1.5px solid var(--line)!important;border-radius:10px;background:var(--surface)}
[data-brand="ktdc"] .hub-chat-title .btn{border-radius:10px;padding:6px 8px;display:grid;place-items:center}
[data-brand="ktdc"] .hub-chat .disclaimer-ele p{text-align:center}

/* ---------- sign-in follow-up screens (accounts/email-*, verification) ---------- */
.lg-card .eyebrow{display:block}
.lg-card>p{color:var(--ink-2);font-size:15px;line-height:1.6}
.lg-email{display:block;margin-top:2px;color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.lg-card .input-group{flex-wrap:nowrap;gap:8px}
.lg-card .input-group .form-control{border-radius:12px!important;letter-spacing:.08em}
.lg-card .input-group .btn{border-radius:12px!important;flex:none;padding-inline:18px}
.lg-card .alert{border-radius:14px;border:0}
.lg-card .alert-danger{background:var(--bad-bg);color:var(--bad)}
.lg-card .alert-warning{background:var(--warn-bg);color:var(--warn)}
.lg-card .alert .lg-email{color:inherit}
.lg-link{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font-size:14px;font-weight:700;color:var(--brand-ink)}
.lg-link svg{width:16px;height:16px}
.lg-link.cursor-not-allowed{color:var(--mute)}

/* ---------- status pages: limit, error, 404/500/503 ---------- */
.st{display:flex;justify-content:center;padding-block:48px 72px}
.st-card{position:relative;overflow:hidden;isolation:isolate;width:100%;max-width:640px;padding:56px 40px 40px;border-radius:28px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
.st-card::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;left:50%;top:-330px;transform:translateX(-50%);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 36px,var(--brand-soft) 36px 58px)}
.st-code{display:block;font-size:84px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--navy);margin-bottom:12px}
[data-theme="dark"] .st-code{color:var(--ink)}
.st-card .eyebrow{display:block;margin-bottom:6px}
.st-card h1{font-size:28px;font-weight:800;margin:0 0 12px;color:var(--ink)}
.st-card p{color:var(--ink-2);font-size:15px;line-height:1.6}
.st-card .btn{display:inline-flex;align-items:center;gap:8px;margin-top:8px}
.st-card .btn svg{width:16px;height:16px}
.st-card .alert{border:0;border-radius:14px;text-align:left}
.st-card .alert-warning{background:var(--warn-bg);color:var(--warn)}
.st-card .alert-info{background:var(--bg-alt);color:var(--ink-2)}
.st-limit h1{font-size:24px}
.st-limit form{max-width:420px;margin:20px auto 0}
.st-limit .input-group{flex-wrap:nowrap;gap:8px}
.st-limit .input-group .form-control{border-radius:12px!important;border:1.5px solid var(--line);padding:12px 14px}
.st-limit .input-group .btn{border-radius:12px!important;margin:0;flex:none}

/* ---------- account settings (accounts/settings) ---------- */
.ac-head{max-width:880px;display:flex;align-items:center;gap:20px;padding:28px 32px;border-radius:28px;background:var(--navy);color:var(--white);position:relative;overflow:hidden;isolation:isolate}
.ac-head::before{content:"";position:absolute;z-index:-1;width:560px;height:560px;right:-220px;top:-280px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 40px,var(--rings) 40px 64px)}
.ac-head img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--navy-3);background:var(--navy-2)}
.ac-head .eyebrow{color:var(--brand)}
.ac-head h1{font-size:30px;font-weight:800;margin:4px 0 6px;color:var(--white)}
.ac-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:14px;color:var(--on-navy)}
.ac-meta b{color:var(--white)}
.ac-card{max-width:880px;margin-top:20px;padding:26px 28px}
.ac-card-head{margin-bottom:18px}
.ac-card-head h2{font-size:20px;font-weight:800;margin:0;color:var(--ink)}
.ac-card-head p{margin:4px 0 0;font-size:14px;color:var(--mute)}
.ac-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ac-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ac-field{margin-bottom:16px;min-width:0}
.ac .form-label{font-weight:600;font-size:14px;color:var(--ink)}
.ac .form-control,.ac .form-select{padding:11px 14px;border-radius:12px;border:1.5px solid var(--line);background-color:var(--surface);color:var(--ink);font-size:15px}
.ac .form-control:focus,.ac .form-select:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--brand-soft)}
.ac-avatar{display:flex;align-items:center;gap:16px}
.ac-avatar img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;background:var(--bg-alt)}
.ac-avatar>div{flex:1;min-width:0}
.ac-avatar small{display:block;margin-top:6px;font-size:12.5px;color:var(--mute)}
.ac-remove{margin-top:6px;padding:0;border:0;background:none;font-size:13px;font-weight:700;color:var(--bad)}
.ac-actions{display:flex;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--line)}
@container (max-width:640px){
  .ac-head{flex-direction:column;align-items:flex-start;padding:24px}
  .ac-row,.ac-row-3{grid-template-columns:minmax(0,1fr);gap:0}
  .ac-card{padding:22px 20px}
  .ac-avatar{align-items:flex-start}
}
.st-limit{text-align:left;max-width:720px}.st-limit>.eyebrow,.st-limit h1{text-align:center}.st-limit ul{padding-left:20px;margin:0 0 12px}.st-limit li{margin-bottom:4px;color:var(--ink-2)}.st-limit a{color:var(--brand-ink);font-weight:600;word-break:break-all}

/* ---------- Reading (merged from william/reading-v2): library, history, start ---------- */
.tl-hero-link{flex:none;align-self:center;display:inline-flex;align-items:center;padding:10px 16px}
.tl-filter-search{flex:2 1 220px}
.tl-filters .form-control{height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:600}
.tl-filters .form-control:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--brand-soft)}
.tl-reset{height:44px;display:inline-flex;align-items:center;padding:0 16px;flex:none}
.tl-card h3 a{color:inherit}
.tl-card h3 a:hover{color:var(--brand-ink)}
.tl-card .tl-card-meta{flex-wrap:wrap;gap:4px 12px}
.tl-progress{margin-top:14px}
.tl-progress-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.tl-bar{height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.tl-bar i{display:block;height:100%;border-radius:inherit;background:var(--brand)}
.tl-deadline{margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--warn)}
a.tl-done:hover{filter:brightness(.95);color:var(--good)}
.rh-row{align-items:flex-start}
.rh-meta{display:flex;flex-wrap:wrap;gap:2px 12px;margin:3px 0 2px;font-size:13px;color:var(--ink-2)}
.rh-meta b{display:inline;font-weight:800;color:var(--ink)}
.rh-status{font-weight:700}
.rh-status-in_progress{color:var(--brand-ink)}
.rh-status-abandoned{color:var(--mute)}
.rh-actions{flex:none;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.rh-actions .btn{padding:7px 14px}
.rh-retake{font-size:13px;font-weight:700;color:var(--brand-ink)}
.rh-abandoned .hm-row-band{background:var(--track);color:var(--mute)}
@container (max-width:520px){.rh-row{flex-wrap:wrap}.rh-actions{flex-direction:row;width:100%;padding-left:60px;justify-content:flex-start;align-items:center}}

/* start page (reading/student/start) */
.rs{container-type:inline-size}
.rs-crumbs{margin-bottom:14px}
.rs-crumbs a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink-2)}
.rs-crumbs a:hover{color:var(--brand-ink)}
.rs-crumbs svg{width:16px;height:16px}
.rs-chips{display:flex;flex-wrap:wrap;gap:6px}
.rs-chips span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--navy-3);color:var(--on-navy)}
.rs-chips .rs-chip-brand{background:var(--brand);color:var(--white)}
.rs-hero h1{font-size:30px}
.rs-facts{display:flex;gap:8px;margin:0;padding:0;list-style:none;flex:none}
.rs-facts li{display:flex;flex-direction:column;align-items:center;min-width:84px;padding:12px 14px;border-radius:14px;background:var(--navy-2);border:1px solid var(--navy-3);font-size:12px;color:var(--on-navy)}
.rs-facts b{font-size:26px;font-weight:800;line-height:1.1;color:var(--white)}
.rs-body{margin-top:24px}
[data-brand="ktdc"] .rs .alert{border:0;border-radius:14px}
[data-brand="ktdc"] .rs .rd-resume{display:flex;align-items:center;gap:16px;padding:18px 20px;margin-bottom:28px;border-radius:18px;background:var(--brand-soft);border:1px solid transparent}
[data-brand="ktdc"] .rs .rd-resume-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--brand);color:var(--white);font-size:20px}
[data-brand="ktdc"] .rs .rd-resume-body{flex:1;min-width:0}
[data-brand="ktdc"] .rs .rd-resume-actions{display:flex;flex-wrap:wrap;gap:8px;flex:none}
[data-brand="ktdc"] .rs .rd-section-title{font-size:22px;font-weight:800;margin:0 0 16px;color:var(--ink)}
[data-brand="ktdc"] .rs .rd-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
[data-brand="ktdc"] .rs .rd-mode{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
[data-brand="ktdc"] .rs .rd-mode-exam{background:var(--navy);border-color:var(--navy);color:var(--white)}
[data-brand="ktdc"] .rs .rd-mode-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--brand-soft);color:var(--brand);font-size:22px}
[data-brand="ktdc"] .rs .rd-mode-exam .rd-mode-icon{background:var(--navy-3);color:var(--brand)}
[data-brand="ktdc"] .rs .rd-mode-title{font-size:20px;font-weight:800;margin:0;color:inherit}
[data-brand="ktdc"] .rs .rd-mode-points{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
[data-brand="ktdc"] .rs .rd-mode-exam .rd-mode-points{color:var(--on-navy)}
[data-brand="ktdc"] .rs .rd-mode-points li{display:flex;gap:8px}
[data-brand="ktdc"] .rs .rd-mode-points i{color:var(--good);padding:0}
[data-brand="ktdc"] .rs .rd-mode-exam .rd-mode-points i{color:var(--brand)}
[data-brand="ktdc"] .rs .rd-mode .btn{margin-top:auto;width:100%;padding:12px 16px;font-size:15px;font-weight:700;border-radius:12px}
[data-brand="ktdc"] .rs .btn-ktdc{background:var(--brand);color:var(--white)}
[data-brand="ktdc"] .rs .btn-ktdc:hover{background:var(--brand-ink);color:var(--white)}
[data-brand="ktdc"] .rs .rd-mode-exam .btn-dark{background:var(--white);color:var(--navy)}
[data-brand="ktdc"] .rs .rd-mode-exam .btn-dark:hover{background:var(--brand);color:var(--white)}
[data-brand="ktdc"] .rs .btn-light-danger{background:transparent;border:1.5px solid var(--line);color:var(--bad)}
[data-brand="ktdc"] .rs .btn-light-primary{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
[data-brand="ktdc"] .rs .rd-modes-note{margin:14px 0 0;font-size:13.5px;color:var(--mute)}
[data-brand="ktdc"] .rs .rd-limits{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:14px 18px;border-radius:14px;background:var(--bg-alt);color:var(--ink-2);font-size:14px}
[data-brand="ktdc"] .rs .rd-limits.is-blocked{background:var(--bad-bg);color:var(--bad)}
[data-brand="ktdc"] .rs .rd-limits>i{font-size:18px;color:var(--brand);padding:0}
[data-brand="ktdc"] .rs .rd-last{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:14px}
[data-brand="ktdc"] .rs .rd-last .rd-band{padding:3px 10px;border-radius:999px;background:var(--navy);color:var(--white);font-weight:700;font-size:12.5px}
@container (max-width:820px){.rs-hero{flex-direction:column;align-items:flex-start}[data-brand="ktdc"] .rs .rd-modes{grid-template-columns:minmax(0,1fr)}[data-brand="ktdc"] .rs .rd-resume{flex-wrap:wrap}}
@container (max-width:520px){.rs-facts{width:100%}.rs-facts li{flex:1;min-width:0}.rs-hero h1{font-size:24px}.tl-hero-link{align-self:flex-start}}

/* workspace and review (layouts.reading-exam): Reading's own CSS takes the brand colours through the shared tokens */
[data-brand="ktdc"] :is(.rd-mono,.rd-logic-id){font-family:SFMono-Regular,Consolas,"Liberation Mono",monospace}
[data-brand="ktdc"] .tl-grid>.rd-card{display:flex;min-width:0}[data-brand="ktdc"] .tl-grid>.rd-card>.tl-card{flex:1;min-width:0}
/* workspace: the question navigator stands alone as a full-width bar along the bottom on desktop
   (CSS only: it stays in the questions pane's markup, which is the slide-up drawer on phones) */
@media (min-width:992px){
  [data-brand="ktdc"] .rd-ws{padding-bottom:56px}
  [data-brand="ktdc"] .rd-ws #rd-nav{position:fixed;left:0;right:0;bottom:0;z-index:1030;border-top:1px solid var(--line);background:var(--surface);box-shadow:0 -6px 18px rgba(16,17,54,.06)}
  [data-brand="ktdc"] .rd-ws .rd-nav-bar{min-height:56px;padding:8px 20px}
  [data-brand="ktdc"] .rd-ws .rd-nav-strip>:first-child{margin-left:auto}[data-brand="ktdc"] .rd-ws .rd-nav-strip>:last-child{margin-right:auto}
  [data-brand="ktdc"] .rd-ws .rd-nav-grid{border-top:1px solid var(--line)}
}

/* ---------- Writing checker and history (merged from gui-writing). Markup ids/classes belong to checker.js; this only restyles. ---------- */
[data-brand="ktdc"] .writing-page{max-width:1440px}
[data-brand="ktdc"] .wr-hero{margin-bottom:28px}
[data-brand="ktdc"] .wr-hero .writing-intro{color:var(--on-navy);font-size:15px;max-width:620px}
[data-brand="ktdc"] .writing-page>.row>div>.card{border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);background:var(--surface)}
[data-brand="ktdc"] .writing-page :is(.wr-section-title,.writing-report>h3){font-weight:800!important;letter-spacing:-.01em}
[data-brand="ktdc"] .writing-page .wr-section-title{font-size:18px;margin:28px 0 12px}
[data-brand="ktdc"] .writing-page .btn{border-radius:12px;font-weight:700}
/* task picker: segmented control, navy when picked */
[data-brand="ktdc"] .writing-tasks{gap:6px;padding:5px;border-radius:14px;background:var(--bg-alt)}
[data-brand="ktdc"] .writing-tasks>.btn{border:0!important;border-radius:10px!important;background:transparent;color:var(--ink-2);font-size:13px;font-weight:700}
[data-brand="ktdc"] .writing-tasks>.btn-check:checked+.btn{background:var(--navy);color:var(--white)}
[data-theme="dark"][data-brand="ktdc"] .writing-tasks>.btn-check:checked+.btn{background:var(--brand);color:var(--white)}
[data-brand="ktdc"] .writing-page .btn-light{background:var(--surface);border:1.5px solid var(--line);color:var(--ink)}
[data-brand="ktdc"] .writing-page .btn-light:hover{border-color:var(--navy);color:var(--ink)}
[data-theme="dark"][data-brand="ktdc"] .writing-page .btn-light:hover{border-color:var(--ink-2)}
[data-brand="ktdc"] .writing-page #timer-value{font-family:SFMono-Regular,Consolas,monospace!important;font-size:18px!important;color:var(--ink)}
/* question card and lined sheet */
[data-brand="ktdc"] .writing-prompt{border:0!important;border-radius:16px!important;background:var(--bg-alt)!important;padding:18px 20px!important}
[data-brand="ktdc"] .writing-prompt .form-label{color:var(--brand-ink)!important;letter-spacing:.08em}
[data-brand="ktdc"] .writing-question{font-size:16px!important;font-weight:600!important;color:var(--ink)}
[data-brand="ktdc"] .writing-sheet{border-color:var(--line)!important;border-radius:16px!important}
[data-brand="ktdc"] .writing-sheet>.d-flex:first-child{background:var(--surface);border-color:var(--line)!important}
[data-brand="ktdc"] .writing-sheet .btn-check:checked+.btn{background:var(--navy);border-color:var(--navy);color:var(--white)}
[data-theme="dark"][data-brand="ktdc"] .writing-sheet .btn-check:checked+.btn{background:var(--brand);border-color:var(--brand)}
[data-brand="ktdc"] .writing-lined{--wr-margin:rgba(248,118,20,.45)}
[data-brand="ktdc"] .writing-para-role{color:var(--brand-ink)}
[data-brand="ktdc"] .writing-page #stats{background:var(--bg-alt);color:var(--ink-2)!important;border-color:var(--line)!important}
[data-brand="ktdc"] .writing-page #mark-button{padding:13px 30px;font-size:15px;background:var(--brand);border-color:var(--brand);color:var(--white)}
[data-brand="ktdc"] .writing-page #mark-button:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
[data-brand="ktdc"] .writing-page #mark-card>div{border-radius:14px!important}
/* report and Bruce panel */
[data-brand="ktdc"] .writing-panel>.card-header{border-bottom:1px solid var(--line)!important;background:var(--surface)}
[data-brand="ktdc"] .writing-panel>.card-header .nav-link{font-weight:700;color:var(--mute)!important}
[data-brand="ktdc"] .writing-panel>.card-header .nav-link.active{color:var(--ink)!important;border-bottom-color:var(--brand)}
[data-brand="ktdc"] .writing-report>.d-flex:first-child{position:relative;overflow:hidden;isolation:isolate;padding:22px 24px!important;border:0!important;border-radius:18px;background:var(--navy);color:var(--on-navy)}
[data-theme="dark"][data-brand="ktdc"] .writing-report>.d-flex:first-child{border:1px solid var(--line)!important}
[data-brand="ktdc"] .writing-report>.d-flex:first-child::before{content:"";position:absolute;z-index:-1;width:360px;height:360px;right:-150px;top:-170px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 26px,var(--rings) 26px 42px)}
[data-brand="ktdc"] .writing-report>.d-flex:first-child :is(.text-muted,.fs-7){color:var(--on-navy)!important}
[data-brand="ktdc"] .writing-report>.d-flex:first-child .fw-bold.text-uppercase{color:var(--brand)!important;letter-spacing:.08em}
[data-brand="ktdc"] .writing-report>.d-flex:first-child .text-gray-900{color:var(--white)!important}
[data-brand="ktdc"] .writing-page .writing-report>.d-flex:first-child .wr-band{color:var(--white);font-weight:800;letter-spacing:-.03em}
[data-brand="ktdc"] .writing-page .badge-ktdc{background:var(--brand)!important;border-radius:999px}
[data-brand="ktdc"] .writing-report .border.rounded{border-color:var(--line)!important;border-radius:16px!important;background:var(--surface)}
[data-brand="ktdc"] .writing-report .fs-2{font-weight:800!important}
[data-brand="ktdc"] .wr-scale i{height:6px;border-radius:999px}
[data-brand="ktdc"] .wr-scale i.on{background:var(--navy)}
[data-theme="dark"][data-brand="ktdc"] .wr-scale i.on{background:var(--ink-2)}
[data-brand="ktdc"] .wr-prio li::before{background:var(--navy)}
[data-theme="dark"][data-brand="ktdc"] .wr-prio li::before{background:var(--brand)}
[data-brand="ktdc"] .wr-goal{border-radius:14px}
[data-brand="ktdc"] .writing-page .text-ktdc{color:var(--brand-ink)!important}
[data-brand="ktdc"] .writing-page .wr-bubble{border-radius:4px 16px 16px 16px;background:var(--bg-alt);color:var(--ink)}
[data-brand="ktdc"] .writing-page .wr-msg.me .wr-bubble{background:var(--navy);color:var(--white);border:0;border-radius:16px 4px 16px 16px}
[data-theme="dark"][data-brand="ktdc"] .writing-page .wr-msg.me .wr-bubble{background:var(--navy-3)}
[data-brand="ktdc"] .writing-page #chips .btn{border-radius:999px;font-size:13px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink)}
[data-brand="ktdc"] .writing-page #chips .btn:hover{border-color:var(--brand);color:var(--brand-ink)}
[data-brand="ktdc"] .writing-page #composer{border-color:var(--line)!important}
[data-brand="ktdc"] .writing-page #ask{border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
[data-brand="ktdc"] .writing-page #ask:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--brand-soft)}
[data-brand="ktdc"] .writing-page #send{background:var(--brand);border-color:var(--brand);color:var(--white);padding-inline:20px}
/* history (hm/sh rows like Speaking and Reading) */
[data-brand="ktdc"] .wr-progress{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:18px 22px;margin-bottom:16px;border-radius:18px;background:var(--brand-soft);color:var(--ink-2);font-size:15px}
[data-brand="ktdc"] .wr-progress strong{font-size:22px;font-weight:800;color:var(--brand-ink)}
[data-brand="ktdc"] .wr-scores{display:flex;flex-wrap:wrap;gap:2px 12px;margin:3px 0 2px;font-size:13px;color:var(--ink-2)}
[data-brand="ktdc"] .wr-scores b{display:inline;font-weight:800;color:var(--ink)}
[data-brand="ktdc"] .wr-hrow .rh-actions .btn{padding:7px 14px}
[data-brand="ktdc"] .wr-hrow .writing-history-date{display:inline;min-height:0;font-weight:inherit;text-decoration:none;color:inherit}
[data-brand="ktdc"] .wr-hrow .writing-history-date:hover{color:var(--brand-ink)}

/* ---------- sidebar follows the theme (brand pages): white in light mode, navy in dark mode ---------- */
:root[data-brand="ktdc"]{--side:#ffffff;--side-ink:#3d3f66;--side-mute:#6f7396;--side-line:#e4e8f1;--side-hover:#f1f4f9;--side-strong:#101136}
@media (prefers-color-scheme:dark){:root[data-brand="ktdc"]:not([data-theme="light"]){--side:#101136;--side-ink:#c9cbe8;--side-mute:#7d80a8;--side-line:rgba(255,255,255,.08);--side-hover:rgba(255,255,255,.05);--side-strong:#ffffff}}
:root[data-brand="ktdc"][data-theme="dark"]{--side:#101136;--side-ink:#c9cbe8;--side-mute:#7d80a8;--side-line:rgba(255,255,255,.08);--side-hover:rgba(255,255,255,.05);--side-strong:#ffffff}
[data-brand="ktdc"]:not([data-theme="dark"]) .side nav a.on{background:var(--navy);color:var(--white)}
[data-brand="ktdc"] .side .bruce-mini b{color:var(--white)}
/* where a KTDC-made Reading test comes from ("Inspired by Cambridge IELTS 21 Test 1") */
[data-brand="ktdc"] .rs-inspired{margin:8px 0 0;font-size:14px;font-weight:700;color:var(--brand)}
/* the question strip scrolls sideways, which clips the current question's 2px ring; leave room for it */
[data-brand="ktdc"] .rd-ws .rd-nav-strip{padding:3px}