/* Ready2Interview — warm, professional interview practice experience */
:root {
  --bg: #f3eee6;
  --bg-elevated: #fffdf8;
  --bg-elevated-2: #eee6da;
  --surface: #f9f5ed;
  --surface-strong: #e8dfd2;
  --border: #d7cbbd;
  --border-strong: #b7a28c;
  --text: #172638;
  --text-muted: #626d76;
  --primary: #203d58;
  --primary-strong: #112f49;
  --on-primary: #fffdf8;
  --espresso: #65483b;
  --xp: #a87931;
  --success: #286a55;
  --danger: #a64942;
  --on-danger: #fffdf8;
  --watch-text: #805d20;
  --ai: #6a5a86;
  --focus: #b66e28;
  --page-glow: #fffdf7;
  --topbar-bg: rgb(255 253 248 / .94);
  --selected-option-bg: #f5f0e8;
  --danger-outline-border: #c99b96;
  --danger-outline-text: #873c37;
  --textarea-bg: #fffefb;
  --translation-text: #514563;
  --translation-surface: #f4eef6;
  --feedback-surface: #f5f8f3;
  --feedback-border: #b6c6b7;
  --feedback-tip: #f2ede4;
  --count-surface: #e5d9c6;
  --score-track: #e5ddd2;
  --achievement-border: #d6bd8d;
  --achievement-surface: #fbf5e7;
  --achievement-text: #805d20;
  --identity-surface: rgb(255 252 245 / .92);
  --identity-muted: #5e686e;
  --office-wall: #ded1bd;
  --office-mid: #c6b49d;
  --office-floor: #7a5b49;
  --office-border: #bda991;
  --office-glow: rgb(255 251 238 / .3);
  --dialog-backdrop: rgb(33 30 25 / .52);
  --shadow-sm: 0 3px 12px rgb(50 36 24 / .07);
  --shadow-md: 0 16px 38px rgb(50 36 24 / .1);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #101b28;
  --bg-elevated: #172638;
  --bg-elevated-2: #203246;
  --surface: #1b2d40;
  --surface-strong: #294057;
  --border: #40576d;
  --border-strong: #61788d;
  --text: #f3eee5;
  --text-muted: #c7d2db;
  --primary: #a9cce0;
  --primary-strong: #d0e4ed;
  --on-primary: #102332;
  --espresso: #e0b783;
  --xp: #e2b461;
  --success: #79c6a5;
  --danger: #ed9a91;
  --on-danger: #182430;
  --watch-text: #f2cf89;
  --ai: #c7b5e3;
  --focus: #ffd178;
  --page-glow: #20334a;
  --topbar-bg: rgb(16 27 40 / .94);
  --selected-option-bg: #22394f;
  --danger-outline-border: #c87976;
  --danger-outline-text: #ffb5ae;
  --textarea-bg: #132334;
  --translation-text: #e0d6ef;
  --translation-surface: #29243b;
  --feedback-surface: #1b342f;
  --feedback-border: #507a69;
  --feedback-tip: #263747;
  --count-surface: #3b4d5c;
  --score-track: #3a5063;
  --achievement-border: #b69457;
  --achievement-surface: #3a3021;
  --achievement-text: #f2cf89;
  --identity-surface: rgb(19 34 49 / .94);
  --identity-muted: #cad6de;
  --office-wall: #20384d;
  --office-mid: #1b2f41;
  --office-floor: #142434;
  --office-border: #526f83;
  --office-glow: rgb(183 213 226 / .12);
  --dialog-backdrop: rgb(0 0 0 / .7);
  --shadow-sm: 0 3px 14px rgb(0 0 0 / .28);
  --shadow-md: 0 18px 42px rgb(0 0 0 / .42);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-block-size: 100%; }
html { scroll-padding-block-start: 84px; }
body { background: radial-gradient(circle at 85% -15%, var(--page-glow) 0 12%, transparent 38%), var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
button, select, textarea { font: inherit; }
button, select { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .46; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[data-view-focus], #practice-feedback-title, #question-text { scroll-margin-block-start: 96px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-block: 0; }
button, select, textarea, .option-btn, .report-metric, .feedback-grid article, .report-top-side { min-inline-size: 0; }
h1, .report-heading h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.15rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.09; }
h2 { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.24; }
h3 { font-size: 1rem; }
.skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 999; transform: translateY(-160%); background: var(--primary); color: var(--on-primary); padding: 9px 14px; border-radius: var(--radius-sm); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow, .panel-kicker { color: var(--espresso); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* Global shell */
.topbar { position: sticky; inset-block-start: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 13px max(var(--space-4), calc((100vw - 1180px) / 2)); background: var(--topbar-bg); backdrop-filter: blur(12px); border-block-end: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--primary); font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; inline-size: 28px; block-size: 34px; color: #a87736; }
.brand-mark svg { inline-size: 27px; block-size: 33px; overflow: visible; }
.brand-mark path:first-child { fill: var(--primary); }
.brand-mark path:last-child { fill: var(--xp); }
.brand-copy { display: grid; gap: 1px; min-inline-size: 0; }
.brand-name { font-family: var(--font-display); font-size: 1.18rem; }
.brand-tagline { color: var(--text-muted); font-family: var(--font); font-size: .62rem; font-weight: 700; letter-spacing: 0; line-height: 1.15; }
.topbar-actions, .hud, .hud-item { display: flex; align-items: center; gap: var(--space-2); }
.topbar-actions { gap: var(--space-3); }
.hud { gap: var(--space-4); color: var(--text-muted); }
.theme-toggle { display: grid; flex: 0 0 auto; place-items: center; inline-size: 44px; min-block-size: 44px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--primary); padding: 0; }
.theme-toggle:hover:not(:disabled) { border-color: var(--primary); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.theme-toggle svg { inline-size: 20px; block-size: 20px; }
.hud-item { font-size: .78rem; font-weight: 700; }
.hud-level, .hud-streak { border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 75%, transparent); padding: 4px 7px; }
.hud-icon { display: inline-flex; inline-size: 16px; block-size: 16px; color: var(--xp); }
.hud-streak .hud-icon { color: var(--espresso); }
.xp-bar { inline-size: 88px; block-size: 6px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border-strong) 45%, transparent); border-radius: var(--radius-pill); background: var(--surface-strong); }
.xp-bar-fill { block-size: 100%; background: linear-gradient(90deg, var(--xp), color-mix(in srgb, var(--xp) 65%, var(--primary))); transition: inline-size .25s ease; }
.hud-xp-text { font-size: .72rem; }
#app { max-inline-size: 1180px; margin-inline: auto; padding: var(--space-7) max(var(--space-4), env(safe-area-inset-inline-start)) calc(var(--space-7) + env(safe-area-inset-bottom)); }
.view { animation: fade-in .18s ease; }
.footer-note { border-block-start: 1px solid var(--border); color: var(--text-muted); font-size: .78rem; padding: var(--space-5); text-align: center; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Shared controls */
.btn { min-block-size: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 18px; background: var(--bg-elevated); color: var(--primary); font-weight: 750; transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.btn:hover:not(:disabled) { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn-primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-strong); }
.btn-secondary { background: var(--surface); }
.btn-ghost, .btn-text { border-color: transparent; background: transparent; }
.btn-text { min-block-size: 40px; color: var(--espresso); padding-inline: 10px; }
.btn-text:hover:not(:disabled) { color: var(--primary); text-decoration: underline; box-shadow: none; }
.btn-lg { min-block-size: 52px; font-size: 1rem; padding-inline: 28px; }
.btn-danger { border-color: var(--danger); background: var(--danger); color: var(--on-danger); }
.btn-danger-outline { border-color: var(--danger-outline-border); color: var(--danger-outline-text); background: transparent; }
.setup-actions, .dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-5); }

/* Preparation */
.setup-view { max-inline-size: 1080px; }
.setup-brief { position: relative; display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(122deg, var(--bg-elevated) 0 64%, color-mix(in srgb, var(--office-wall) 28%, var(--bg-elevated)) 100%); padding: clamp(var(--space-5), 5vw, var(--space-7)); box-shadow: var(--shadow-md); isolation: isolate; }
.setup-brief::before { position: absolute; z-index: -1; inset-block: 0; inset-inline-end: 0; inline-size: 31%; border-inline-start: 5px solid rgb(255 253 248 / .42); background: linear-gradient(145deg, rgb(138 183 202 / .24), rgb(222 237 240 / .08)); box-shadow: inset 24px 0 0 rgb(255 253 248 / .12); content: ""; }
.setup-brief::after { position: absolute; z-index: -1; inset-inline-end: -12%; inset-block-end: -45%; inline-size: 27%; aspect-ratio: 1; border: 9px solid color-mix(in srgb, var(--xp) 27%, transparent); border-radius: 50%; content: ""; }
.setup-brief > div { position: relative; z-index: 2; min-inline-size: 0; }
.setup-brand-lockup { display: flex; align-items: center; gap: 9px; color: var(--primary); font-family: var(--font-display); font-size: clamp(1.32rem, 2.5vw, 1.68rem); font-weight: 700; line-height: 1; }
.setup-brand-icon { display: inline-grid; place-items: center; inline-size: 29px; block-size: 35px; color: var(--xp); }
.setup-brand-icon svg { inline-size: 100%; block-size: 100%; }
.setup-brand-icon path:first-child { fill: var(--primary); }
.setup-brand-icon path:last-child { fill: var(--xp); }
.setup-brief h1 { max-inline-size: 650px; margin-block-start: var(--space-3); }
.subtitle { max-inline-size: 700px; margin-block-start: var(--space-3); color: var(--text-muted); font-size: 1.02rem; }
.subtitle strong { color: var(--espresso); font-weight: 700; }
.setup-office-details { position: absolute; z-index: 1; inset-inline-end: clamp(20px, 3vw, 42px); inset-block-start: 24px; inline-size: min(30%, 255px); min-inline-size: 180px; block-size: 260px; pointer-events: none; }
.setup-window { position: absolute; inset-inline: 4% 0; inset-block-start: 0; display: grid; grid-template-columns: repeat(3, 1fr); block-size: 42%; overflow: hidden; border: 4px solid rgb(255 253 248 / .68); background: linear-gradient(155deg, rgb(111 157 178 / .56), rgb(235 213 172 / .46)); box-shadow: 0 5px 13px rgb(42 32 24 / .11); }
.setup-window::after { position: absolute; inset-inline: -5%; inset-block-end: 0; block-size: 24%; background: repeating-linear-gradient(90deg, #456476 0 8px, transparent 8px 14px, #5d7883 14px 23px, transparent 23px 29px); content: ""; opacity: .48; }
.setup-window i { border-inline-end: 3px solid rgb(255 253 248 / .6); background: linear-gradient(130deg, transparent 43%, rgb(255 255 255 / .2) 44% 49%, transparent 50%); }
.setup-window i:last-child { border: 0; }
.setup-lamp { position: absolute; inset-inline-start: 9%; inset-block-start: 47%; inline-size: 42px; block-size: 59px; border-block-end: 3px solid color-mix(in srgb, var(--primary) 60%, transparent); transform: rotate(-5deg); }
.setup-lamp::before { position: absolute; inset-inline-start: 4px; inset-block-start: 0; inline-size: 35px; block-size: 16px; border-radius: 19px 19px 4px 4px; background: color-mix(in srgb, var(--primary) 83%, var(--xp)); content: ""; transform: skew(-17deg); }
.setup-lamp::after { position: absolute; inset-inline-start: 19px; inset-block-start: 14px; inline-size: 3px; block-size: 36px; background: color-mix(in srgb, var(--primary) 72%, transparent); content: ""; }
.setup-lamp i { position: absolute; inset-inline-start: 8px; inset-block-end: -3px; inline-size: 27px; block-size: 5px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 70%, transparent); }
.setup-laptop { position: absolute; inset-inline-start: 35%; inset-block-start: 52%; inline-size: 76px; block-size: 45px; border: 5px solid color-mix(in srgb, var(--primary) 72%, #182a37); border-radius: 4px 4px 1px 1px; background: linear-gradient(135deg, rgb(214 230 230 / .9), rgb(117 157 171 / .82)); box-shadow: 0 5px 0 -1px #192a33, 0 8px 12px rgb(30 23 17 / .12); transform: perspective(160px) rotateX(-4deg); }
.setup-laptop i { position: absolute; inset-inline: -10px; inset-block-end: -9px; block-size: 7px; border-radius: 0 0 12px 12px; background: #263945; }
.setup-papers { position: absolute; inset-inline-end: 5%; inset-block-start: 57%; inline-size: 55px; block-size: 34px; transform: rotate(6deg); }
.setup-papers i { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent); background: rgb(255 250 236 / .84); box-shadow: 3px 3px 0 rgb(56 41 26 / .1); }
.setup-papers i:first-child { transform: translate(-7px, 5px) rotate(-7deg); }
.setup-papers i::after { position: absolute; inset-inline: 9px; inset-block-start: 10px; block-size: 2px; background: color-mix(in srgb, var(--primary) 42%, transparent); box-shadow: 0 6px 0 color-mix(in srgb, var(--primary) 30%, transparent), 0 12px 0 color-mix(in srgb, var(--primary) 22%, transparent); content: ""; }
.setup-plant { position: absolute; inset-inline-end: 1%; inset-block-end: 0; inline-size: 57px; block-size: 70px; }
.setup-plant i { position: absolute; inset-inline-start: 24px; inset-block-end: 19px; inline-size: 18px; block-size: 48px; border-radius: 100% 0 100% 0; background: #557c6b; transform-origin: bottom center; }
.setup-plant i:first-child { transform: rotate(-31deg); } .setup-plant i:nth-child(2) { background: #779979; transform: rotate(28deg); }
.setup-plant b { position: absolute; inset-inline-start: 13px; inset-block-end: 0; inline-size: 34px; block-size: 23px; border-radius: 3px 3px 10px 10px; background: #8f694e; }
.setup-assurance { position: relative; z-index: 2; display: grid; flex: 0 1 240px; gap: 2px; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); background: color-mix(in srgb, var(--identity-surface) 88%, transparent); padding: var(--space-3); box-shadow: var(--shadow-sm); color: var(--text-muted); font-size: .78rem; line-height: 1.35; }
.setup-assurance p { color: var(--primary); font-weight: 800; }
.assurance-rule { inline-size: 34px; block-size: 4px; margin-block-end: 7px; background: var(--xp); }
.player-summary { display: inline-block; margin-block-start: var(--space-4); border-inline-start: 3px solid var(--xp); color: var(--espresso); padding-inline-start: var(--space-3); font-size: .86rem; font-weight: 700; }
.candidate-panel { margin-block: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.candidate-name-field { position: relative; }
.candidate-name-field input { inline-size: 100%; min-block-size: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); padding-inline: 10px; }
.candidate-name-field input:focus { border-color: var(--primary); }
.required-mark { color: var(--danger); font-size: 1rem; line-height: 1; }
.field-error { margin-block-start: var(--space-2); color: var(--danger); font-size: .84rem; font-weight: 750; }
.language-panel { margin-block: var(--space-5) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.language-panel .panel-kicker { margin-block-end: var(--space-3); }
.language-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.field-label, .mini-select { display: grid; gap: 5px; color: var(--text-muted); font-size: .76rem; font-weight: 800; letter-spacing: .015em; }
select { inline-size: 100%; min-block-size: 43px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); padding-inline: 10px; }
select:focus { border-color: var(--primary); }
.setup-selections { display: grid; gap: 0; }
.selection-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.setup-group { margin-block: var(--space-4); }
.setup-group h2 { margin-block-end: var(--space-3); color: var(--primary); font-family: var(--font); font-size: .75rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.option-grid-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.option-btn { position: relative; min-block-size: 61px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); padding: var(--space-3) 32px var(--space-3) var(--space-3); text-align: start; font-weight: 750; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.option-btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.option-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--selected-option-bg); box-shadow: inset 3px 0 0 var(--primary); }
.option-btn[aria-pressed="true"]::after { position: absolute; inset-inline-end: 11px; inset-block-start: 50%; inline-size: 10px; block-size: 6px; border-inline-start: 2px solid var(--success); border-block-end: 2px solid var(--success); content: ""; transform: translateY(-68%) rotate(-45deg); }
.option-sub { display: block; margin-block-start: 2px; color: var(--text-muted); font-size: .74rem; font-weight: 500; }
.interviewer-options .option-btn.has-interviewer-portrait { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-content: center; align-items: center; column-gap: 9px; min-block-size: 76px; padding-inline-start: 10px; }
.interviewer-options .has-interviewer-portrait .option-sub { grid-column: 2; margin-block-start: 0; }
.interviewer-option-portrait { grid-row: 1 / span 2; display: grid; place-items: end center; align-self: stretch; overflow: hidden; border-radius: 50% 50% 12px 12px; background: linear-gradient(145deg, #d5e1e0, #a9bbc3); }
.interviewer-option-portrait svg { inline-size: 46px; block-size: 50px; transform: translateY(4px); }
.interviewer-option-sarah { background: linear-gradient(145deg, #dbe5e6, #adc6cd); }
.interviewer-option-sarah .portrait-jacket { fill: #315066; }
.interviewer-option-sarah .portrait-blouse { fill: #fcf7ec; }
.interviewer-option-sarah .portrait-skin { fill: #cd8e70; }
.interviewer-option-sarah .portrait-hair-back { fill: #343442; }
.interviewer-option-sarah .portrait-hair { fill: #272a35; }
.interviewer-option-sarah .portrait-eye { fill: #19232b; }
.interviewer-option-sarah .portrait-smile { fill: none; stroke: #833f4b; stroke-width: 1.8; stroke-linecap: round; }
.interviewer-option-david .portrait-jacket { fill: #263c4c; }
.interviewer-option-david .portrait-shirt { fill: #fcf7ec; }
.interviewer-option-david .portrait-tie { fill: #8a3943; }
.interviewer-option-david .portrait-skin { fill: #b87b5f; }
.interviewer-option-david .portrait-hair { fill: #20272b; }
.interviewer-option-david .portrait-eye { fill: #19232b; }
.interviewer-option-david .portrait-brow { fill: none; stroke: #352723; stroke-width: 2.4; stroke-linecap: round; }
.interviewer-option-david .portrait-beard { fill: #62483f; }
.setup-launch { margin-block-start: var(--space-5); border-block-start: 1px solid var(--border); padding-block-start: var(--space-4); }
.setup-row { margin: 0; }
.checkbox-row, .toggle-row { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: .86rem; }
.checkbox-row input, .toggle-row input { inline-size: 20px; block-size: 20px; accent-color: var(--primary); }
.hint-text { color: var(--text-muted); font-size: .82rem; }
.ai-status-note { margin-block-start: var(--space-4); border-inline-start: 3px solid var(--ai); color: var(--text-muted); font-size: .84rem; padding-inline-start: var(--space-3); }
.ai-status-note.is-live { color: var(--ai); }
.ai-status-note.is-fallback { border-inline-start-color: var(--border-strong); }

/* Interview room */
.interview-view { max-inline-size: 1180px; margin-inline: auto; }
.interview-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-3); }
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: end; gap: var(--space-3); }
.mini-select { min-inline-size: 170px; }
.question-progress { color: var(--text-muted); font-size: .83rem; font-weight: 700; }
.session-candidate { margin-block-start: 2px; color: var(--espresso); font-size: .8rem; font-weight: 750; }
.progress-dots { display: flex; gap: 7px; margin-block-end: var(--space-5); }
.progress-dots span { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--border); }
.progress-dots .is-done { background: var(--success); }
.progress-dots .is-current { background: var(--xp); box-shadow: 0 0 0 3px rgb(168 121 49 / .16); }
.interview-room { display: grid; grid-template-columns: minmax(310px, .85fr) minmax(0, 1.15fr); gap: var(--space-5); align-items: stretch; }
.office-scene { position: relative; min-block-size: 610px; overflow: hidden; border: 1px solid var(--office-border); border-radius: var(--radius-lg); background: linear-gradient(159deg, var(--office-wall) 0 55%, var(--office-mid) 55.2% 66%, var(--office-floor) 66.2%); box-shadow: var(--shadow-md); isolation: isolate; }
.office-scene::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgb(255 231 181 / .12), transparent 44%, rgb(17 47 73 / .16)); content: ""; pointer-events: none; }
.office-scene::after { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; block-size: 36%; background: linear-gradient(180deg, transparent, rgb(25 20 17 / .2)); content: ""; pointer-events: none; }
.office-glow { position: absolute; z-index: 1; inset: 0; background: radial-gradient(circle at 30% 13%, var(--office-glow), transparent 28%), linear-gradient(108deg, var(--office-glow), transparent 50%); pointer-events: none; }
.office-window { position: absolute; z-index: 0; inset-block-start: 34px; inset-inline-start: 38px; display: grid; grid-template-columns: repeat(3, 1fr); inline-size: calc(100% - 76px); block-size: 163px; overflow: hidden; border: 8px solid #f6eedf; background: linear-gradient(150deg, #7fa7b8, #c7dce1 46%, #f2d9ad 100%); box-shadow: 0 8px 16px rgb(44 31 22 / .14); }
.office-window span { position: relative; overflow: hidden; border-inline-end: 4px solid #f6eedf; background: linear-gradient(130deg, transparent 43%, rgb(255 255 255 / .24) 44% 49%, transparent 50%); }
.office-window span::after { position: absolute; inset-inline: -10%; inset-block-end: 0; block-size: 27%; background: linear-gradient(90deg, #426071 0 8%, transparent 8% 13%, #526f7d 13% 21%, transparent 21% 27%, #3f5c6d 27% 35%, transparent 35% 41%, #4a6878 41% 50%, transparent 50% 57%, #395768 57% 68%, transparent 68% 74%, #4e6c79 74% 85%, transparent 85%); content: ""; opacity: .68; }
.office-window span:last-child { border: 0; }
.office-frame { position: absolute; z-index: 2; inset-block-start: 233px; inset-inline-start: 46px; inline-size: 76px; block-size: 56px; border: 6px solid #f4ead9; background: linear-gradient(135deg, #5c786e, #c8a668); box-shadow: 0 4px 8px rgb(44 31 22 / .14); }
.office-shelf { position: absolute; z-index: 2; inset-inline-end: 38px; inset-block-start: 225px; inline-size: 88px; block-size: 74px; border-block-end: 5px solid #725746; }
.office-shelf i { position: absolute; inset-block-end: 5px; inline-size: 18px; background: #986e4f; }
.office-shelf i:first-child { inset-inline-start: 12px; block-size: 44px; }
.office-shelf i:nth-child(2) { inset-inline-start: 34px; block-size: 33px; background: #314b5b; }
.office-shelf b { position: absolute; inset-inline-end: 10px; inset-block-end: 5px; inline-size: 19px; block-size: 19px; border-radius: 50%; background: #a78138; }
.office-plant { position: absolute; z-index: 2; inset-inline-end: 29px; inset-block-start: 307px; inline-size: 70px; block-size: 104px; }
.office-plant i { position: absolute; inset-block-end: 23px; inset-inline-start: 32px; inline-size: 25px; block-size: 68px; border-radius: 100% 0 100% 0; background: #527968; transform-origin: bottom center; }
.office-plant i:nth-child(1) { transform: rotate(-38deg); } .office-plant i:nth-child(2) { transform: rotate(10deg); background: #6d9073; } .office-plant i:nth-child(3) { transform: rotate(45deg); }
.office-plant b { position: absolute; inset-block-end: 0; inset-inline-start: 21px; inline-size: 40px; block-size: 27px; border-radius: 4px 4px 12px 12px; background: #986f51; }
.desk { position: absolute; z-index: 3; inset-inline: -7%; inset-block-end: 0; block-size: 137px; border-block-start: 12px solid #8b6047; background: linear-gradient(#634434, #483126); box-shadow: 0 -10px 26px rgb(34 25 19 / .18); }
.desk-laptop { position: absolute; inset-block-start: -61px; inset-inline-start: 25%; inline-size: 112px; block-size: 62px; border: 7px solid #263945; border-radius: 6px 6px 1px 1px; background: linear-gradient(135deg, #d5e3e1, #779aab); box-shadow: 0 7px 0 -1px #192a33, 0 10px 18px rgb(25 19 15 / .18); }
.desk-notes { position: absolute; inset-block-start: -28px; inset-inline-end: 22%; inline-size: 72px; block-size: 39px; transform: skew(-8deg); background: #f6edcf; box-shadow: 4px 4px 0 rgb(67 44 29 / .15); }
.desk-pen { position: absolute; inset-inline-end: 18%; inset-block-start: -14px; inline-size: 47px; block-size: 4px; background: #263f50; transform: rotate(-12deg); }
.interviewer-character { position: absolute; z-index: 4; inset-inline: 0; inset-block-end: 48px; margin-inline: auto; inline-size: min(88%, 330px); block-size: 405px; transform-origin: bottom center; transition: transform .22s ease, filter .22s ease; }
.character-svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.interviewer-character > .character-svg:not([hidden]) { display: block; }
.interviewer-character > .character-svg[hidden] { display: none !important; }
.character-svg .chair { fill: #455b65; } .character-svg .body { fill: #29485d; } .character-svg .blazer-sarah { fill: #315066; } .character-svg .blazer-david { fill: #263c4c; } .character-svg .sarah-lapel { fill: #57788a; } .character-svg .david-lapel { fill: #1c2d39; } .character-svg .sarah-skin { fill: #cd8e70; } .character-svg .david-skin { fill: #b87b5f; } .character-svg .hair-sarah { fill: #272a35; } .character-svg .hair-sarah-side { fill: #343442; } .character-svg .hair-david { fill: #20272b; } .character-svg .david-hair-part { fill: #39464b; } .character-svg .david-sideburn { fill: #1c2225; } .character-svg .david-ear { fill: #aa7057; } .character-svg .david-beard { fill: #62483f; } .character-svg .eye { fill: #19232b; } .character-svg .brow, .character-svg .david-brow { fill: none; stroke: #422d29; stroke-width: 3; stroke-linecap: round; } .character-svg .david-brow { stroke: #352723; stroke-width: 4; } .character-svg .nose { fill: none; stroke: #855441; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .character-svg .mouth { fill: none; stroke-width: 3; stroke-linecap: round; } .character-svg .sarah-mouth { stroke: #833f4b; } .character-svg .david-mouth { stroke: #713c37; } .character-svg .david-jaw { fill: none; stroke: #765044; stroke-width: 2; stroke-linecap: round; } .character-svg .sarah-blouse, .character-svg .david-shirt { fill: #fcf7ec; } .character-svg .david-collar { fill: #e8e0d1; } .character-svg .sarah-badge { fill: #c29b56; } .character-svg .tie { fill: #8a3943; } .character-svg .david-pocket { fill: #7797a0; }
.character-sarah-svg { transform: translateY(2px); } .character-david-svg { transform: translateY(6px) scale(1.04); }
.interviewer-character.is-speaking { animation: character-talk .85s ease-in-out infinite alternate; filter: drop-shadow(0 8px 14px rgb(44 31 22 / .18)); }
.interviewer-character.is-listening { transform: translateY(6px) rotate(-1deg); }
.interviewer-character.is-listening .character-david-svg { transform: translateY(8px) scale(1.04) rotate(.75deg); }
.interviewer-character.is-listening .character-sarah-svg { transform: translateY(5px) rotate(-.5deg); }
.interviewer-character.is-thinking { transform: translateY(2px); filter: saturate(.78); }
@keyframes character-talk { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.identity-card { position: absolute; z-index: 5; inset-inline: var(--space-4); inset-block-end: var(--space-4); display: grid; gap: 1px; max-inline-size: 230px; border: 1px solid color-mix(in srgb, var(--xp) 55%, var(--border)); border-inline-start: 3px solid var(--xp); background: var(--identity-surface); padding: 11px 13px; box-shadow: 0 5px 17px rgb(44 31 22 / .14); backdrop-filter: blur(7px); }
.identity-card strong { color: var(--primary); font-family: var(--font-display); font-size: 1.08rem; } .identity-card span { color: var(--identity-muted); font-size: .77rem; } .identity-card .interviewer-status { color: var(--espresso); font-weight: 800; }
.conversation-workspace { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.question-card, .hint-panel, .quick-tip-panel, .practice-feedback-panel, .answer-area { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.question-card { position: relative; padding: clamp(var(--space-5), 4vw, var(--space-6)); overflow: hidden; border-color: color-mix(in srgb, var(--border-strong) 70%, var(--border)); background: linear-gradient(135deg, var(--bg-elevated), color-mix(in srgb, var(--surface) 66%, var(--bg-elevated))); box-shadow: var(--shadow-md); }
.question-card::before { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 100%; block-size: 4px; background: linear-gradient(90deg, var(--primary), var(--xp)); content: ""; }
.question-card::after { position: absolute; inset-inline-end: -54px; inset-block-start: -62px; inline-size: 155px; block-size: 155px; border: 1px solid color-mix(in srgb, var(--xp) 42%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
.question-text { position: relative; z-index: 1; color: var(--primary); font-family: var(--font-display); font-size: clamp(1.34rem, 2.2vw, 1.7rem); font-weight: 700; line-height: 1.35; }
.translation-block { margin-block-start: var(--space-3); border-inline-start: 3px solid var(--ai); color: var(--translation-text); padding-inline-start: var(--space-3); }
.translation-block p { margin-block-start: var(--space-1); }
.translation-label { display: block; color: var(--ai); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.translation-block.compact { font-size: .87rem; }
.prep-timer { margin-block-start: var(--space-4); color: var(--espresso); font-size: .85rem; font-weight: 800; }
.hint-panel, .quick-tip-panel { padding: var(--space-3) var(--space-4); font-size: .9rem; }
.hint-panel { border-inline-start: 3px solid var(--ai); } .quick-tip-panel { border-inline-start: 3px solid var(--xp); }
.hint-panel strong { color: var(--ai); } .quick-tip-panel strong { color: var(--espresso); }
.practice-feedback-panel { border-color: var(--feedback-border); background: linear-gradient(135deg, var(--feedback-surface), var(--bg-elevated) 63%); padding: var(--space-5); }
.feedback-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }.feedback-heading h2 { margin-block-start: 2px; }.feedback-score { flex: 0 0 auto; border: 1px solid #8cb29c; border-radius: var(--radius-sm); color: var(--success); padding: 4px 9px; font-size: .78rem; font-weight: 850; font-variant-numeric: tabular-nums; }.feedback-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-block: var(--space-4); }.feedback-grid article { min-inline-size: 0; border-inline-start: 3px solid var(--success); padding-inline-start: var(--space-3); }.feedback-grid article:last-child { border-color: var(--xp); }.feedback-grid h3 { color: var(--text-muted); font-family: var(--font); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }.feedback-grid p { margin-block-start: var(--space-1); font-size: .9rem; }.feedback-indicators { display: flex; flex-wrap: wrap; gap: var(--space-2); }.feedback-indicator { border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-elevated); color: var(--text-muted); padding: 5px 9px; font-size: .74rem; }.feedback-indicator.is-good { border-color: #8cb29c; color: var(--success); }.feedback-indicator.is-watch { border-color: #d6b780; color: var(--watch-text); }.feedback-tip { margin-block-start: var(--space-4); border-radius: var(--radius-sm); background: var(--feedback-tip); padding: var(--space-3); }.feedback-tip strong { color: var(--espresso); }.feedback-tip p { margin-block-start: var(--space-1); }.feedback-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }.feedback-actions .btn:first-child { flex: 1 1 210px; }.feedback-actions .btn:not(:first-child) { flex: 0 1 auto; }
.answer-area { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--border-strong) 62%, var(--border)); background: linear-gradient(135deg, var(--bg-elevated), color-mix(in srgb, var(--surface) 58%, var(--bg-elevated))); padding: var(--space-4); }
.answer-area::before { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; background: linear-gradient(90deg, var(--xp), transparent 65%); content: ""; }
.live-transcript { min-block-size: 22px; color: var(--text-muted); font-size: .85rem; font-style: italic; }
.input-label { display: block; margin-block: var(--space-2); color: var(--primary); font-weight: 800; }
.input-label-note { color: var(--text-muted); font-size: .78rem; font-weight: 500; }
textarea { inline-size: 100%; min-block-size: 122px; resize: vertical; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--textarea-bg); color: var(--text); padding: var(--space-3); box-shadow: inset 0 1px 2px rgb(39 27 18 / .05); }
textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.prep-timer { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-4); border: 1px solid var(--xp); border-radius: var(--radius-sm); background: var(--feedback-tip); color: var(--espresso); padding: 8px 11px; font-size: .78rem; font-weight: 850; }
.prep-timer .timer-icon { inline-size: 18px; block-size: 18px; color: var(--xp); }
.prep-timer .timer-copy { color: var(--text-muted); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.prep-timer time { color: var(--primary); font-size: 1rem; font-variant-numeric: tabular-nums; }
.prep-timer.is-expired { border-style: dashed; color: var(--text-muted); }
.voice-helper { display: flex; align-items: center; gap: var(--space-2); margin-block: var(--space-2); color: var(--espresso); font-size: .84rem; font-weight: 750; }
.voice-helper-icon, .button-icon { display: inline-flex; flex: 0 0 auto; inline-size: 18px; block-size: 18px; }
.voice-helper-icon { color: var(--xp); }
.voice-helper-icon svg, .button-icon svg { inline-size: 100%; block-size: 100%; }
.mic-status-label { display: flex; align-items: center; min-block-size: 24px; margin-block: var(--space-2); color: var(--text-muted); font-size: .83rem; }
.voice-controls, .powerup-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.microphone-action, .stop-recording-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.microphone-action { min-inline-size: 216px; }
.stop-recording-action { display: none; }
.answer-area[data-recording="true"] { border-color: var(--danger); background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 8%, var(--bg-elevated)), var(--bg-elevated) 72%); }
.answer-area[data-recording="true"] .live-transcript { min-block-size: 34px; border-inline-start: 3px solid var(--danger); color: var(--text); padding-inline-start: var(--space-2); }
.answer-area[data-recording="true"] .mic-status-label { color: var(--danger); font-weight: 850; }
.answer-area[data-recording="true"] .mic-status-label::before, .recording-dot { inline-size: 10px; block-size: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--danger); content: ""; }
.answer-area[data-recording="true"] .mic-status-label::before { margin-inline-end: 8px; animation: recording-pulse 1.05s ease-in-out infinite; }
.answer-area[data-recording="true"] .microphone-action { display: none; }
.answer-area[data-recording="true"] .stop-recording-action { display: inline-flex; border-color: var(--danger); background: var(--danger); color: var(--on-danger); }
.answer-area[data-recording="true"] .stop-recording-action .recording-dot { background: currentColor; }
@keyframes recording-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 35%, transparent); transform: scale(.78); } }

.practice-tools-heading { display: flex; justify-content: space-between; gap: var(--space-3); margin-block-start: 2px; color: var(--text-muted); font-size: .73rem; }
.practice-tools-heading span:first-child { color: var(--espresso); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.powerup-bar { border-block-start: 1px solid var(--border); padding-block-start: var(--space-3); }
.powerup-btn { display: flex; align-items: center; gap: 6px; min-block-size: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); padding: 8px 11px; font-size: .76rem; font-weight: 700; }
.powerup-btn:hover:not(:disabled) { border-color: var(--xp); color: var(--primary); }
.powerup-btn svg { inline-size: 16px; block-size: 16px; color: var(--xp); }
.powerup-label { display: grid; min-inline-size: 0; line-height: 1.16; }
.powerup-label small { color: var(--espresso); font-size: .66rem; font-weight: 850; }
.powerup-extra-time { border-color: var(--xp); background: var(--feedback-tip); color: var(--primary); }
.powerup-count { display: grid; place-items: center; min-inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--count-surface); color: var(--espresso); font-size: .67rem; }

/* Coaching report */
.report-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); padding-block-end: var(--space-4); border-block-end: 1px solid var(--border); }
.report-translation-toggle { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.report-candidate-name { margin-block-start: var(--space-2); color: var(--espresso); font-size: .94rem; font-weight: 800; }
.report-mode-note { margin-block: var(--space-2); color: var(--text-muted); font-size: .86rem; }
.report-example-banner, .report-summary { margin-block: var(--space-4); border-inline-start: 3px solid var(--ai); background: var(--translation-surface); color: var(--translation-text); padding: var(--space-3) var(--space-4); }
.report-top { display: flex; align-items: center; gap: var(--space-6); margin-block: var(--space-6); }
.score-ring { display: grid; place-items: center; flex: 0 0 auto; inline-size: 142px; block-size: 142px; border-radius: 50%; background: conic-gradient(var(--score-color, var(--primary)) calc(var(--pct) * 3.6deg), var(--score-track) 0); }
.score-ring-inner { display: grid; place-items: center; align-content: center; inline-size: 127px; block-size: 127px; border-radius: 50%; background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--border); }
.score-value { color: var(--primary); font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1; } .score-label { color: var(--text-muted); font-size: .72rem; }
.report-top-side { min-inline-size: 0; } .report-xp-gained { color: var(--espresso); font-size: .92rem; font-weight: 800; } .report-level-banner { color: var(--success); font-weight: 800; } .report-achievements { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); }
.achievement-chip { display: flex; align-items: center; gap: 6px; border: 1px solid var(--achievement-border); border-radius: var(--radius-pill); background: var(--achievement-surface); color: var(--achievement-text); padding: 5px 10px; font-size: .74rem; font-weight: 800; }
.achievement-chip svg { inline-size: 15px; block-size: 15px; }
.report-highlights { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; }
.report-highlights div { border-inline-start: 2px solid var(--xp); padding-inline-start: var(--space-2); } .report-highlights dt { color: var(--text-muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; } .report-highlights dd { margin: 2px 0 0; color: var(--primary); font-size: .9rem; font-weight: 750; }
.report-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-block: var(--space-6); }
.report-col, .report-section { min-inline-size: 0; } .report-section { margin-block: var(--space-6); }
.report-col { border-block-start: 2px solid var(--primary); padding-block-start: var(--space-3); }.report-col:last-child { border-color: var(--xp); }
.report-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.report-list li { position: relative; padding-inline-start: 25px; font-size: .92rem; } .report-list li::before { position: absolute; inset-inline-start: 0; inset-block-start: .48em; inline-size: 13px; block-size: 13px; border-radius: 50%; background: var(--border); content: ""; }
.report-list-good li::before { background: var(--success); } .report-list-bad li::before { background: var(--danger); }
.report-section-note { margin-block-start: var(--space-1); color: var(--text-muted); font-size: .85rem; }.report-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-block-start: var(--space-4); }.report-metric { min-inline-size: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); padding: var(--space-4); box-shadow: var(--shadow-sm); }.metric-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }.metric-heading h3 { color: var(--primary); font-size: .9rem; }.metric-score { color: var(--espresso); font-size: .82rem; font-weight: 850; font-variant-numeric: tabular-nums; }.metric-track { block-size: 6px; margin-block: var(--space-2); overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-strong); }.metric-fill { block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--xp)); }.report-metric p { color: var(--text-muted); font-size: .82rem; }
.report-translation { font-size: .86rem; }.report-per-question { display: grid; gap: var(--space-4); }.pq-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); padding: var(--space-4); box-shadow: var(--shadow-sm); overflow-wrap: anywhere; }.pq-question { color: var(--primary); font-family: var(--font-display); margin-block-end: var(--space-3); }.pq-label { color: var(--text-muted); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.pq-answer { margin: var(--space-1) 0 var(--space-3); border-inline-start: 3px solid var(--border-strong); color: var(--text-muted); padding-inline-start: var(--space-3); white-space: pre-wrap; }.pq-tip { margin-block: var(--space-1) var(--space-3); }.pq-improved { margin-block-start: var(--space-1); border-radius: var(--radius-sm); background: var(--surface); padding: var(--space-3); white-space: pre-wrap; }.card-translation-toggle { margin-block: var(--space-3) var(--space-1); }.card-translation-area { border-radius: var(--radius-sm); background: var(--translation-surface); padding: 0 var(--space-3) var(--space-3); }

/* Overlays */
.toast-region { position: fixed; z-index: 100; inset-inline: 0; inset-block-end: max(var(--space-5), env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: var(--space-2); pointer-events: none; padding-inline: max(var(--space-3), env(safe-area-inset-inline-start)); }
.toast { max-inline-size: 480px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4); text-align: center; } .toast-error { border-color: var(--danger); } .toast-success { border-color: var(--success); }
.confirm-dialog { max-inline-size: 480px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); color: var(--text); padding: var(--space-5); box-shadow: var(--shadow-md); }.confirm-dialog::backdrop { background: var(--dialog-backdrop); backdrop-filter: blur(3px); } .confirm-dialog p { margin-block-start: var(--space-3); color: var(--text-muted); }

[dir="rtl"] [dir="ltr"] { direction: ltr; text-align: start; unicode-bidi: plaintext; }
[dir="rtl"] .toolbar-actions { justify-content: start; }
[dir="rtl"] .option-btn[aria-pressed="true"] { box-shadow: inset -3px 0 0 var(--primary); }
[dir="rtl"] .option-btn[aria-pressed="true"]::after { transform: translateY(-68%) rotate(45deg); }
[dir="rtl"] .identity-card { border-inline-start: 0; border-inline-end: 3px solid var(--xp); }
[dir="rtl"] .feedback-grid article:last-child { border-inline-start-color: var(--xp); }
[dir="rtl"] .feedback-grid article { border-inline-start: 3px solid var(--success); }
@media (max-width: 960px) { .interview-toolbar { align-items: stretch; } .toolbar-actions { max-inline-size: 680px; } .feedback-actions .btn { flex: 1 1 180px; } .report-top { gap: var(--space-4); } }
@media (max-width: 860px) { .setup-brief { align-items: start; flex-direction: column; gap: var(--space-4); } .setup-assurance { display: none; } .selection-pair { grid-template-columns: 1fr; gap: 0; } .interview-room { grid-template-columns: 1fr; } .office-scene { min-block-size: 350px; } .office-window { inset-block-start: 24px; block-size: 122px; } .office-plant, .office-frame, .office-shelf { display: none; } .interviewer-character { inset-inline-end: 7%; inset-inline-start: auto; inline-size: 235px; block-size: 291px; inset-block-end: 14px; } .desk { block-size: 88px; } .identity-card { inset-block-end: var(--space-3); } }
/* Intentional phone composition: compact task flow, not a vertically stacked desktop. */
@media (max-width: 660px) {
  html { scroll-padding-block-start: 110px; }
  [data-view-focus], #practice-feedback-title, #question-text { scroll-margin-block-start: 118px; }
  #app { padding: var(--space-4) max(var(--space-3), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) calc(88px + env(safe-area-inset-bottom, 0px)); }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-2); padding: 7px max(var(--space-3), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) 8px; }
  .brand { min-inline-size: 0; gap: 7px; }
  .brand-mark { inline-size: 22px; block-size: 28px; }
  .brand-mark svg { inline-size: 22px; block-size: 28px; }
  .brand-name { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
  .brand-tagline { overflow: hidden; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { display: contents; }
  .theme-toggle { grid-column: 2; grid-row: 1; inline-size: 40px; min-block-size: 40px; }
  .hud { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: auto minmax(72px, 1fr) auto; align-items: center; gap: var(--space-2); min-inline-size: 0; padding-block-start: 5px; border-block-start: 1px solid var(--border); }
  .hud-item { min-inline-size: 0; font-size: .72rem; }
  .hud-level, .hud-streak { border: 0; background: transparent; padding: 0; }
  .hud-xp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
  .hud-level, .hud-streak { white-space: nowrap; }
  .hud-level .hud-icon, .hud-streak .hud-icon { display: none; }
  .xp-bar { inline-size: 100%; min-inline-size: 0; }
  .hud-xp-text { font-size: .67rem; white-space: nowrap; }

  .setup-brief { gap: var(--space-2); border-radius: var(--radius-md); padding: var(--space-4); }
  .setup-brief::before { inline-size: 25%; border-inline-start-width: 3px; }
  .setup-brief::after { inset-inline-end: -12%; inset-block-end: -38%; inline-size: 23%; border-width: 6px; }
  .setup-office-details { inset-inline-end: 10px; inset-block-start: 13px; inline-size: 25%; min-inline-size: 88px; block-size: 182px; opacity: .6; }
  .setup-window { border-width: 2px; }
  .setup-window i { border-inline-end-width: 1px; }
  .setup-lamp { inset-inline-start: 0; inline-size: 24px; block-size: 36px; transform: scale(.62) rotate(-5deg); transform-origin: bottom left; }
  .setup-laptop { inset-inline-start: 26%; inset-block-start: 56%; transform: scale(.55); transform-origin: top left; }
  .setup-papers { inset-inline-end: -8px; inset-block-start: 60%; transform: scale(.52) rotate(6deg); transform-origin: top right; }
  .setup-plant { inset-inline-end: -9px; transform: scale(.63); transform-origin: bottom right; }
  .setup-brief .eyebrow { font-size: .62rem; }
  .setup-brand-lockup { gap: 7px; font-size: 1.16rem; }
  .setup-brand-icon { inline-size: 23px; block-size: 28px; }
  .setup-brief h1 { font-size: clamp(1.62rem, 7.2vw, 2.08rem); line-height: 1.06; }
  .subtitle { margin-block-start: var(--space-2); font-size: .88rem; line-height: 1.45; }
  .setup-assurance { display: none; }
  .candidate-panel, .language-panel { margin-block: var(--space-3); border-radius: var(--radius-md); padding: var(--space-3); }
  .candidate-name-field input, select { min-block-size: 44px; }
  .candidate-panel .hint-text, .language-panel .hint-text { font-size: .76rem; }
  .language-panel .panel-kicker { margin-block-end: var(--space-2); }
  .language-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .field-label { gap: 3px; font-size: .66rem; }
  select { padding-inline: 7px; font-size: .76rem; }
  .setup-group { margin-block: var(--space-3); }
  .setup-group h2 { margin-block-end: var(--space-2); font-size: .66rem; }
  .selection-pair { grid-template-columns: 1fr; gap: 0; }
  .option-grid { grid-template-columns: 1fr; gap: 7px; }
  .option-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .option-btn { min-block-size: 50px; padding: 8px 26px 8px 9px; font-size: .78rem; line-height: 1.22; }
  .option-sub { margin-block-start: 1px; font-size: .66rem; line-height: 1.18; }
  .option-btn[aria-pressed="true"]::after { inset-inline-end: 9px; }
  .setup-launch { margin-block-start: var(--space-3); border-block-start: 1px solid var(--border); padding-block-start: var(--space-3); }
  .setup-row { margin-block-end: var(--space-2); }
  .checkbox-row { min-block-size: 34px; font-size: .78rem; }
  .ai-status-note { display: none; }
  .setup-actions, .dialog-actions { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); margin-block-start: 0; }
  .setup-actions > .btn:first-child { grid-column: 1 / -1; }
  .setup-actions > .btn:last-child { min-block-size: 40px; font-size: .78rem; }
  .dialog-actions { grid-template-columns: 1fr; margin-block-start: var(--space-4); }
  .dialog-actions > .btn { inline-size: 100%; }

  .interview-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); margin-block-end: var(--space-2); }
  .interview-toolbar > div:first-child { min-inline-size: 0; }
  .interview-toolbar .eyebrow { font-size: .62rem; }
  .question-progress, .session-candidate { font-size: .74rem; }
  .toolbar-actions { display: contents; }
  .toolbar-actions .mini-select { grid-row: 2; grid-column: 1; min-inline-size: 0; }
  .toolbar-actions .toggle-row { grid-row: 2; grid-column: 2; align-self: end; min-block-size: 44px; padding: 0; font-size: .72rem; }
  .toolbar-actions .btn-danger-outline { grid-row: 1; grid-column: 2; min-block-size: 38px; padding-inline: 10px; font-size: .76rem; }
  .mini-select { font-size: .65rem; }
  .mini-select select { font-size: .74rem; }
  .progress-dots { gap: 5px; margin-block-end: var(--space-3); }
  .progress-dots span { inline-size: 7px; block-size: 7px; }
  .interview-room { display: flex; flex-direction: column; gap: var(--space-3); }
  .office-scene { order: 1; min-block-size: clamp(210px, 57vw, 258px); border-radius: var(--radius-md); }
  .conversation-workspace { order: 2; gap: var(--space-3); }
  .office-window { inset-block-start: 16px; inset-inline-start: 26px; inline-size: calc(100% - 52px); block-size: 80px; border-width: 5px; }
  .office-window span::after { block-size: 21%; }
  .office-plant, .office-frame, .office-shelf { display: none; }
  .interviewer-character { inset-inline: 0; inset-block-end: -23px; margin-inline: auto; inline-size: clamp(174px, 52vw, 222px); block-size: clamp(226px, 66vw, 282px); }
  .desk { block-size: 58px; border-block-start-width: 7px; }
  .desk-laptop { inset-block-start: -43px; inline-size: 82px; block-size: 45px; border-width: 5px; }
  .desk-notes { inset-block-start: -19px; inline-size: 52px; block-size: 28px; }
  .desk-pen { display: none; }
  .identity-card { inset-inline: var(--space-3); inset-block-end: var(--space-3); max-inline-size: min(56%, 240px); padding: 7px 9px; }
  .identity-card strong { font-size: .95rem; }
  .identity-card span { font-size: .68rem; line-height: 1.22; }
  .question-card { padding: var(--space-3); border-radius: var(--radius-md); }
  .question-text { font-size: clamp(1.16rem, 5.3vw, 1.4rem); line-height: 1.28; }
  .translation-block { margin-block-start: var(--space-2); padding-inline-start: var(--space-2); font-size: .88rem; }
  .prep-timer { margin-block-start: var(--space-2); }
  .answer-area { padding: var(--space-3); border-radius: var(--radius-md); }
  textarea { min-block-size: 92px; padding: 10px; }
  .mic-status-label { min-block-size: 0; margin-block: 6px; font-size: .75rem; }
  .voice-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .voice-controls > .btn { min-block-size: 44px; padding-inline: 9px; font-size: .8rem; }
  #btn-finish-answer { grid-column: 1 / -1; min-block-size: 50px; font-size: .92rem; }
  .practice-tools-heading { align-items: center; flex-direction: row; gap: var(--space-2); margin-block-start: 0; font-size: .68rem; }
  .powerup-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-block-start: var(--space-2); }
  .powerup-btn { justify-content: center; min-block-size: 44px; padding: 7px; font-size: .7rem; }
  .powerup-label { overflow-wrap: anywhere; }
  .powerup-extra-time { grid-column: 1 / -1; }
  #pu-replay { grid-column: 1 / -1; }
  .hint-panel, .quick-tip-panel { padding: var(--space-2) var(--space-3); font-size: .84rem; }
  .practice-feedback-panel { padding: var(--space-3); border-radius: var(--radius-md); }
  .feedback-heading { align-items: center; flex-direction: row; }
  .feedback-heading h2 { font-size: 1.08rem; }
  .feedback-score { align-self: auto; }
  .feedback-grid { grid-template-columns: 1fr; gap: var(--space-3); margin-block: var(--space-3); }
  .feedback-grid p { font-size: .84rem; }
  .feedback-indicator { font-size: .68rem; padding: 4px 7px; }
  .feedback-tip { margin-block-start: var(--space-3); padding: var(--space-2); font-size: .84rem; }
  .feedback-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-block-start: var(--space-3); }
  .feedback-actions .btn { min-block-size: 44px; padding-inline: 8px; font-size: .76rem; }
  .feedback-actions .btn:first-child { grid-column: 1 / -1; }

  .report-heading { align-items: flex-start; flex-direction: column; gap: var(--space-2); padding-block-end: var(--space-3); }
  .report-heading h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .report-translation-toggle { inline-size: 100%; min-block-size: 44px; }
  .report-candidate-name { font-size: .84rem; }
  .report-mode-note { font-size: .74rem; }
  .report-example-banner, .report-summary { margin-block: var(--space-3); padding: var(--space-2) var(--space-3); font-size: .84rem; }
  .report-top { align-items: center; flex-direction: row; gap: var(--space-3); margin-block: var(--space-4); }
  .score-ring { inline-size: 102px; block-size: 102px; }
  .score-ring-inner { inline-size: 90px; block-size: 90px; }
  .score-value { font-size: 1.9rem; }
  .report-top-side { flex: 1; }
  .report-xp-gained { font-size: .8rem; }
  .report-highlights { grid-template-columns: 1fr; gap: var(--space-2); margin-block-start: var(--space-2); }
  .report-highlights dd { font-size: .78rem; }
  .report-columns { grid-template-columns: 1fr; gap: var(--space-4); margin-block: var(--space-4); }
  .report-section { margin-block: var(--space-4); }
  .report-section h2, .report-col h2 { font-size: 1.12rem; }
  .report-list li, .report-section-note, .report-metric p { font-size: .8rem; }
  .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-block-start: var(--space-3); }
  .report-metric { padding: var(--space-3); }
  .metric-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .metric-heading h3 { font-size: .76rem; }
  .metric-score { font-size: .72rem; }
  .pq-card { padding: var(--space-3); }
  .pq-question { font-size: .96rem; }
  .pq-answer, .pq-improved { font-size: .82rem; }
  .btn-text, .card-translation-toggle { min-block-size: 44px; }
  .confirm-dialog { inline-size: min(calc(100% - 2 * max(var(--space-3), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))), 480px); max-block-size: calc(100dvh - 2 * var(--space-4)); overflow: auto; padding: var(--space-4); }
  .toast { inline-size: min(100%, 480px); }
}
@media (max-width: 370px) {
  .language-grid { grid-template-columns: 1fr; }
  .option-grid-row { grid-template-columns: 1fr; }
  .office-scene { min-block-size: 194px; }
  .interviewer-character { inline-size: 168px; block-size: 218px; }
  .report-metrics { grid-template-columns: 1fr; }
  .feedback-actions, .voice-controls { grid-template-columns: 1fr; }
  #btn-finish-answer, .feedback-actions .btn:first-child { grid-column: auto; }
}
@media (max-height: 520px) and (orientation: landscape) {
  html { scroll-padding-block-start: 76px; }
  [data-view-focus], #practice-feedback-title, #question-text { scroll-margin-block-start: 84px; }
  #app { padding-block: var(--space-3); }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .topbar-actions { display: flex; align-items: center; gap: var(--space-2); }
  .theme-toggle { grid-column: auto; grid-row: auto; }
  .hud { grid-column: auto; grid-row: auto; grid-template-columns: auto minmax(60px, 1fr) auto; border-block-start: 0; padding-block-start: 0; }
  .hud-xp-text { display: none; }
  .interview-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .toolbar-actions .mini-select { grid-column: 2; grid-row: 1; }
  .toolbar-actions .toggle-row { grid-column: 3; grid-row: 1; }
  .toolbar-actions .btn-danger-outline { grid-column: 2 / -1; grid-row: 2; }
  .office-scene { min-block-size: 158px; }
  .interviewer-character { inline-size: 136px; block-size: 178px; }
  .conversation-workspace { gap: var(--space-2); }
}
@media (pointer: coarse) { .option-btn, .powerup-btn { min-block-size: 44px; } .voice-controls { gap: var(--space-3); } }
@media (forced-colors: active) { .btn, .option-btn, .powerup-btn, .question-card, .hint-panel, .quick-tip-panel, .practice-feedback-panel, .answer-area, .report-metric, .pq-card { border: 1px solid CanvasText; } :focus-visible { outline-color: Highlight; } .option-btn[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -4px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }