/* Geometry and hierarchy from the ZIP's React/Tailwind layout. */
body { font-family:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; }
body[data-page=home] .header-inner { min-height:80px; padding-top:20px; padding-bottom:20px; }
body[data-page=home] .site-header { position:relative; backdrop-filter:none; }
.home-page { background:radial-gradient(circle at top,var(--hero-glow),transparent 544px); }
.landing-main { padding-top:80px; }
.hero { max-width:896px; }
.hero h1 { max-width:896px; font-size:60px; line-height:1; letter-spacing:-1.5px; }
.hero > p { max-width:672px; font-size:18px; line-height:28px; }
.hero-badge { padding:6px 12px; }
.upload-shell { margin-top:40px; }
.upload-drop { min-height:256px; padding:28px; }
.upload-drop p { max-width:576px; }
.upload-drop .upload-scenarios { font-size:12px; margin-top:4px; }
.upload-drop small { margin-top:12px; line-height:20px; }
.section-block { margin-top:80px; }
.feedback-grid { gap:16px; }
.feedback-card img { height:256px; padding:16px; }
.feedback-card > span { padding:12px 16px; }
.feedback-card strong { font-size:12px; }
.feedback-card small { font-size:12px; }
.steps-section .steps-grid > div { display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-content:start; }
.steps-section .step-number { grid-row:1/3; font-size:24px; line-height:32px; letter-spacing:0; }
.steps-section .steps-grid h3 { line-height:24px; }
.steps-section .steps-grid p { margin-top:4px; grid-column:2; }
/* Workspace: match the supplied screenshot at its CSS viewport (about 1365px). */
.workspace-home,.workspace-collapse,.header-material,.workspace-saved,.workspace-drawer-toggle { display:none; }
body[data-page=practice] { background:#f1f5f9; }
[data-theme=dark] body[data-page=practice] { background:#020617; }
body[data-page=practice] .site-header { background:var(--c-surface); border-bottom:1px solid var(--c-border); }
body[data-page=practice] .header-inner { max-width:1532px; min-height:64px; gap:12px; padding:12px 16px; }
body[data-page=practice] .brand { margin-right:0; gap:12px; }
body[data-page=practice] .brand strong { font-size:14px; line-height:20px; }
body[data-page=practice] .brand small { font-size:12px; line-height:16px; }
body[data-page=practice] .workspace-home { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border:1px solid var(--c-border); border-radius:12px; color:#64748b; }
.workspace-home svg,.workspace-drawer-toggle svg { width:16px; height:16px; }
body[data-page=practice] .workspace-collapse { display:flex; align-items:center; gap:8px; height:40px; min-height:40px; padding:0 12px; border:1px solid var(--c-border); border-radius:12px; background:transparent; font-size:12px; font-weight:700; color:#64748b; white-space:nowrap; }
body[data-page=practice] .header-material { display:flex; flex-direction:column; gap:2px; text-align:center; max-width:256px; margin:auto; min-width:0; }
.header-material small { font-size:12px; line-height:16px; font-weight:700; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-material strong { font-size:14px; line-height:20px; font-weight:900; }
body[data-page=practice] .workspace-saved { display:flex; gap:8px; align-items:center; padding:8px 12px; border-radius:12px; background:#f1f5f9; font-size:12px; font-weight:700; color:#64748b; white-space:nowrap; }
.workspace-saved svg { width:16px; height:16px; }
body[data-page=practice] .site-nav { display:none; }
body[data-page=practice] .header-actions { margin-left:auto; }
body[data-page=practice] #themeToggle { display:grid; place-items:center; border:1px solid var(--c-border); width:40px; height:40px; border-radius:12px; }
#themeToggle > svg { width:16px; height:16px; }
.app,.general-listening.app { max-width:1500px; padding:0; z-index:auto; }
.workspace-toolbar { display:none; }
.app .main,.general-listening .main { display:grid; grid-template-columns:260px minmax(0,1fr) 320px; gap:16px; padding:16px; align-items:start; }
.app.collapse-nav .main { grid-template-columns:minmax(0,1fr) 320px; }
.app .left-panel,.app .right-panel { border:0; border-radius:0; background:transparent; box-shadow:none; position:static; overflow:visible; display:block; min-width:0; }
.app .left-panel > .left-settings { display:none; }
.app.collapse-nav .left-panel { display:none; }
.layout-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:16px; padding:20px; box-shadow:0 1px 3px #0f172a1a; }
.left-panel > .layout-card + .layout-card,.right-panel > .layout-card + .layout-card { margin-top:16px; }
.layout-session .session-heading { display:flex; justify-content:space-between; align-items:center; min-height:156px; }
.session-heading > div { flex:0 0 auto; min-width:80px; }
.session-heading small { font-size:12px; color:#94a3b8; font-weight:900; letter-spacing:1.2px; }
.session-heading h2 { font-size:16px; line-height:24px; font-weight:900; margin-top:4px; max-width:none; white-space:nowrap; }
.session-heading > svg { width:124px; height:156px; color:#065cff; flex-shrink:1; min-width:0; }
.session-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; }
.session-metrics > div { padding:12px; background:var(--c-bg); border-radius:12px; }
.session-metrics strong { display:block; font-size:20px; line-height:28px; font-weight:900; }
.session-metrics small { display:block; font-size:12px; line-height:16px; color:#94a3b8; margin-top:4px; }
#layoutSessionFoot { display:flex; justify-content:space-between; gap:8px; margin-top:20px; font-size:12px; line-height:16px; font-weight:700; color:#64748b; }
#layoutSessionFoot strong { color:var(--c-text); font-weight:900; }
.session-progress { height:8px; margin-top:8px; overflow:hidden; border-radius:10px; background:#f1f5f9; }
.session-progress i { display:block; height:100%; border-radius:10px; background:#065cff; }
#questionNavCard { padding:20px; }
#questionNavCard > .panel-head { padding:0; border:0; min-height:0; display:flex; align-items:center; gap:8px; }
.navigation-label .panel-title { display:block; font-size:12px; line-height:16px; color:#94a3b8; font-weight:900; }
.navigation-label strong { display:block; margin-top:4px; font-size:16px; line-height:24px; font-weight:900; }
#qProgress { font-size:12px !important; color:#94a3b8 !important; margin-left:auto; white-space:nowrap; }
#questionNavCard > #questionGridBody { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:0; margin-top:20px; }
#questionNavCard .q-stats,#questionNavCard .q-section-label { display:none; }
#questionNavCard .q-grid { display:contents; }
#questionNavCard .q-btn { height:38px; border-radius:8px; font-size:12px; font-weight:900; color:#64748b; box-shadow:none; border:1px solid var(--c-border); background:var(--c-surface); }
#questionNavCard .q-btn.heard { border-color:#a7f3d0; background:#ecfdf5; color:#047857; }
#questionNavCard .q-btn.current { background:#065cff; border-color:#065cff; color:white; }
#questionNavCard .q-btn.mistake { border-color:var(--c-border); background:var(--c-surface); color:#64748b; }
#questionNavCard .q-btn.mistake.current { background:#065cff; color:white; }
#questionNavCard .q-btn.mistake .q-dot { background:#fbbf24; }
#questionNavCard .nav-legend { grid-column:1/-1; margin-top:12px; border-top:1px solid var(--c-border); padding-top:16px; font-size:12px; gap:12px; }
.general-listening #questionNavCard > #questionGridBody { display:none; }
.general-listening #sentenceNav { padding:0; max-height:550px; }
.material-actions { margin-top:16px; }
.material-actions .workspace-tools { display:grid; grid-template-columns:1fr; gap:8px; }
.material-actions .workspace-tools > button { width:100%; }
.material-actions #btnExamView { margin-top:8px; }
.general-listening .material-actions #btnExamView { display:none; }
.app .center-panel { display:block; border-radius:16px; padding:28px; box-shadow:0 1px 3px #0f172a1a; }
.center-panel > .panel-head { display:none; }
.app .practice-question-heading { padding:0 52px 0 0; position:relative; }
.app .practice-question-heading .question-chip { font-size:12px; line-height:16px; padding:4px 10px; font-weight:900; }
#referenceQuestionPosition { font-size:12px; line-height:16px; margin-left:8px; color:#94a3b8; }
.app .practice-question-heading h2 { font-size:20px; line-height:28px; margin-top:16px; font-weight:900; letter-spacing:0; }
.app .practice-notice { background:transparent; padding:0; margin:8px 0 0; font-size:12px; line-height:20px; color:var(--c-text-sec); }
.layout-question-flag { position:absolute; right:0; top:0; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--c-border); border-radius:12px; background:transparent; color:#94a3b8; }
.layout-question-flag svg { width:16px; height:16px; }
#layoutPlayerSurface { margin-top:24px; border-radius:16px; background:#020617; color:white; padding:24px; overflow:hidden; }
/* Retain legacy IDs for playback bindings; the visible player follows the reference. */
#layoutPlayerSurface > :not(.reference-player) { display:none !important; }
.reference-wave { display:flex; align-items:center; justify-content:center; gap:6px; height:96px; overflow:hidden; }
.reference-wave i { flex:0 0 6px; border-radius:99px; background:#334155; transition:background .15s; }
.reference-wave i.played { background:#60a5fa; }
.reference-times { display:flex; justify-content:space-between; margin-top:8px; font-size:12px; line-height:16px; color:#94a3b8; }
.reference-seek { --progress:0%; display:block; appearance:none; width:100%; height:12px; padding:4px; margin-top:8px; border:0; border-radius:99px; background:#334155; cursor:pointer; }
.reference-seek::-webkit-slider-runnable-track { height:4px; border-radius:99px; background:linear-gradient(to right,#3b82f6 var(--progress),#334155 var(--progress)); }
.reference-seek::-webkit-slider-thumb { appearance:none; width:0; height:0; }
.reference-seek:focus-visible { outline:2px solid #60a5fa; outline-offset:4px; }
.reference-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; margin-top:20px; position:relative; min-height:56px; }
.reference-control-left { display:flex; align-items:center; gap:4px; }
.reference-control-left > .speed-btn:first-child { display:grid; place-items:center; border:0; border-radius:99px; padding:0; width:36px; height:36px; min-height:36px; background:transparent; color:white; }
.reference-control-left svg { width:16px; height:16px; }
.reference-control-left #speedBtn { border:1px solid #ffffff1a; border-radius:8px; color:white; padding:8px; font-size:12px; line-height:16px; font-weight:900; background:transparent; white-space:nowrap; }
#referenceControlsCenter { position:absolute; left:50%; top:0; transform:translateX(-50%); display:flex; justify-content:center; width:56px; }
#referenceControlsCenter .play-btn { width:56px; height:56px; background:#065cff; box-shadow:0 8px 20px #17255480; }
#referenceControlsCenter .play-btn .play-btn-icon { width:24px; height:24px; }
#referenceControlsCenter .play-btn svg { width:100%; height:100%; }
.reference-volume { grid-column:3; min-width:0; display:flex; justify-content:flex-end; align-items:center; gap:8px; color:#cbd5e1; }
.reference-volume svg { width:16px; height:16px; flex-shrink:0; }
.reference-volume input { --volume:80%; width:56px; height:4px; appearance:none; border:0; padding:0; border-radius:10px; background:linear-gradient(to right,white var(--volume),#334155 var(--volume)); cursor:pointer; }
.reference-volume input::-webkit-slider-thumb { appearance:none; width:0; height:0; }
.reference-volume input:focus-visible { outline:2px solid #60a5fa; outline-offset:5px; }
.reference-player-note { text-align:center; font-size:12px; line-height:16px; margin-top:16px; color:#94a3b8; }
.app .transcript-heading { padding:24px 0 12px; display:flex; gap:8px; align-items:center; }
.transcript-heading strong { display:flex; gap:8px; align-items:center; font-size:14px; font-weight:900; }
.transcript-heading strong svg { width:16px; height:16px; color:#065cff; }
.reference-follow { border:0; border-radius:8px; background:var(--c-primary-light); color:#065cff; font-weight:700; padding:4px 8px; font-size:12px; line-height:16px; white-space:nowrap; }
#btnTranscriptToggle { margin-left:auto; border:0; background:transparent; font-size:10px !important; color:#94a3b8; padding:0 !important; }
.app .transcript-area { margin:0; height:auto; max-height:640px; min-height:0; padding:12px; border-radius:16px; background:var(--c-bg); scrollbar-width:thin; }
.app .transcript-seg { display:block; padding:8px 12px; margin:0 0 8px; border:0; background:transparent; border-radius:12px; color:#475569; font-size:14px; line-height:28px; }
.app .transcript-seg:last-child { margin-bottom:0; }
.app .transcript-seg-main { padding:0; font-size:14px; line-height:28px; font-weight:400; }
.app .transcript-seg .ts,.app .transcript-seg-play { display:none; }
.app .transcript-seg.active { background:#dbeafe; box-shadow:0 0 0 1px #bfdbfe; color:#0f172a; }
.app .transcript-seg.active .transcript-seg-main { font-weight:600; }
.app .transcript-seg.anchor-seg { font-weight:400; }
.app .right-panel > .panel-head,#examLegacyBody { display:none; }
.right-panel .answer-card { padding:20px; }
.reference-answer-heading { display:grid; grid-template-columns:1fr auto; column-gap:12px; }
.reference-answer-heading .answer-eyebrow { font-size:12px; line-height:16px; font-weight:900; letter-spacing:1.2px; color:#94a3b8; grid-column:1; }
.app .reference-answer-heading h2 { grid-column:1; margin-top:4px; font-size:16px; line-height:24px; font-weight:900; }
.reference-answer-heading > span { grid-column:2; grid-row:1/3; align-self:center; font-size:12px; padding:4px 8px; border-radius:8px; background:var(--c-bg); color:#94a3b8; }
.app .answer-options { margin-top:20px; gap:8px; }
.app .answer-option { padding:12px; gap:12px; border-radius:12px; align-items:flex-start; }
.app .answer-option .letter { width:32px; height:32px; border-radius:8px; font-size:12px; font-weight:900; }
.app .option-copy { font-size:12px; font-weight:600; line-height:20px; padding-top:4px; color:#475569; }
.app .answer-submit { margin-top:20px; padding:10px 12px; font-size:14px; line-height:20px; height:44px; min-height:44px; }
.app .answer-submit:disabled { background:#f1f5f9; color:#94a3b8; opacity:1; }
[data-action=reveal-answer] { display:none; }
.right-panel .mistake-toggle { display:block; margin-top:12px; margin-bottom:0; }
.right-panel #btnMaster { display:none; }
.right-panel #btnMistake { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:1px solid var(--c-border); background:transparent; color:#64748b; border-radius:12px; padding:10px; font-size:12px; line-height:16px; font-weight:700; }
#btnMistake svg { width:16px; height:16px; }
.general-listening .right-panel .mistake-toggle { display:none; }
.right-panel .compact-preferences { margin-top:16px; }
.compact-preferences-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.compact-preferences-heading h2 { font-size:14px; line-height:20px; font-weight:900; }
.compact-preferences-heading a { font-size:12px; font-weight:700; }
#compactPreferencesRows { margin-top:16px; }
.compact-preference-row { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--c-border); }
.compact-preference-row:first-child { padding-top:0; }
.compact-preference-row:last-child { border:0; padding-bottom:0; }
.compact-preference-row strong { font-size:14px; line-height:20px; font-weight:900; }
.compact-preference-row p { font-size:12px; line-height:20px; margin-top:4px; color:#64748b; }
.compact-preference-row .switch { flex-shrink:0; }
.layout-pager { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.layout-pager[hidden] { display:none; }
.layout-pager button { padding:12px; font-size:12px; }
.drawer-close,.layout-drawer-backdrop,.app .mobile-tabs { display:none; }
[data-theme=dark] .workspace-saved,[data-theme=dark] .session-progress,[data-theme=dark] .session-metrics > div { background:#172033; }
[data-theme=dark] .app .transcript-seg,[data-theme=dark] .app .option-copy { color:#cbd5e1; }
[data-theme=dark] .app .transcript-seg.active { background:#172554; color:#dbeafe; box-shadow:0 0 0 1px #1e3a8a; }
@media(max-width:1279px) { body[data-page=practice] .header-material { display:none; } }
@media(min-width:1024px) { .app .left-panel,.app .center-panel,.app .right-panel { display:block !important; } .app.collapse-nav .left-panel { display:none !important; } }
@media(max-width:1023px) {
 body[data-page=practice] .workspace-collapse { display:none; }
 body[data-page=practice] .workspace-drawer-toggle { display:grid; place-items:center; border:0; width:40px; height:40px; background:#065cff; color:white; border-radius:12px; }
 .app .main,.general-listening .main,.app.collapse-nav .main { display:flex; flex-direction:column; padding:16px; gap:16px; }
 .app .center-panel,.app .right-panel { display:block !important; width:100%; }
 .app .center-panel { padding:20px; }
 .app .left-panel { display:none !important; }
 .app .left-panel.mobile-active { display:block !important; position:fixed; z-index:80; top:0; left:0; bottom:0; width:min(320px,90vw); padding:20px; overflow-y:auto; background:var(--c-bg); }
 .drawer-close { display:block; margin-left:auto; border:0; width:30px; height:30px; border-radius:8px; background:var(--c-bg); color:var(--c-text); font-size:24px; }
 body[data-page=practice]:has(.left-panel.mobile-active) .layout-drawer-backdrop { display:block; position:fixed; inset:0; background:#02061766; z-index:79; border:0; }
 body[data-page=practice] .header-inner { flex-wrap:nowrap; }
 #layoutPlayerSurface { padding:20px; }
 .reference-wave { gap:4px; }
 .reference-wave i { flex-basis:4px; }
 .app .transcript-heading { flex-wrap:wrap; }
 #btnTranscriptToggle { display:none; }
}
@media(max-width:767px) {
 .landing-main { padding-top:48px; }
 .hero h1 { font-size:36px; line-height:40px; letter-spacing:-.9px; }
 .hero > p { font-size:16px; line-height:28px; }
 .upload-shell { padding:12px; }
 .feedback-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
 .feedback-card { flex:0 0 280px; scroll-snap-align:start; }
 .feedback-card img { height:256px; }
 .feedback-card > span { flex-direction:row; align-items:center; }
 .steps-section .steps-grid { grid-template-columns:1fr; }
 .steps-section { padding:40px 24px; }
 .section-title h2 { font-size:24px; }
}
@media(max-width:639px) {
 body[data-page=practice] .workspace-saved { display:none; }
 body[data-page=practice] .brand small { font-size:10px; }
 body[data-page=practice] .brand strong { font-size:12px; }
 body[data-page=practice] .brand { gap:8px; }
 body[data-page=practice] .header-inner { gap:8px; }
 body[data-page=practice] .brand-icon { width:36px; height:36px; }
 .reference-volume input { display:none; }
 .reference-volume { gap:0; }
 .reference-control-left > .speed-btn:first-child { width:28px; }
 .app .practice-question-heading { padding-right:44px; }
 #referenceQuestionPosition { display:block; margin:8px 0 0; }
}
.app .transcript-seg.anchor-seg .transcript-seg-main { font-weight:400; }
.app .transcript-seg.active .transcript-seg-main { font-weight:600; }
/* Shared page shells from the live Figma Make preview. */
:root { --c-primary:#065cff; --c-primary-dark:#0451e6; }
body:not([data-page=practice]) .header-inner { max-width:1152px; padding:12px 20px; min-height:64px; gap:20px; }
body[data-page=home] .header-inner { padding-top:20px; padding-bottom:20px; min-height:80px; }
body:not([data-page=home]):not([data-page=practice]) .header-start { display:none; }
body:not([data-page=practice]) .brand strong { font-size:14px; line-height:20px; }
body:not([data-page=practice]) .brand small { font-size:12px; line-height:16px; }
body:not([data-page=practice]) .site-nav a { font-size:12px; padding:8px 12px; }
#navMistakeCount { display:none; }
body:not([data-page=practice]) #themeToggle { display:grid; place-items:center; border:1px solid var(--c-border); width:40px; height:40px; border-radius:12px; }
.page-container { max-width:1152px; padding:40px 20px 64px; }
.page-intro { margin-bottom:32px; display:block; }
.page-intro .eyebrow { font-size:12px; font-weight:900; letter-spacing:1.2px; line-height:16px; }
.page-intro h1 { font-size:30px; line-height:36px; margin-top:8px; font-weight:900; letter-spacing:-.75px; }
.page-intro p { margin-top:12px; max-width:672px; font-size:14px; line-height:24px; color:var(--c-text-sec); }
.page-container .surface-card { padding:20px; border-radius:16px; box-shadow:0 1px 3px #0f172a1a; }
body[data-page=home] .hero h1 { font-size:60px; line-height:60px; font-weight:900; }
.hero h1 span { color:#065cff; }
.upload-drop { min-height:256px; padding:28px; }
.upload-drop h2 { margin:20px 0 0; line-height:28px; font-size:20px; font-weight:900; }
.upload-drop p { margin-top:8px; font-size:14px; line-height:24px; max-width:576px; }
.upload-drop .upload-scenarios { margin-top:4px; font-size:12px; line-height:16px; }
.upload-drop small { margin-top:12px; line-height:20px; max-width:576px; min-height:40px; }
.upload-drop .button { margin-top:24px; padding:12px 24px; font-size:14px; line-height:20px; min-height:44px; }
.upload-note { font-size:12px; line-height:16px; margin-top:12px; }
.upload-note + .upload-note { margin-top:8px; }
.mistake-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.mistake-card .question-chip { font-size:12px; line-height:16px; padding:4px 10px; border-radius:8px; background:#fef3c7; color:#92400e; }
.mistake-card .card-top button { font-size:12px; line-height:16px; color:#94a3b8; font-weight:700; }
.mistake-card h2 { margin-top:16px; font-size:14px; font-weight:900; line-height:24px; }
.mistake-card > p { margin-top:8px; font-size:12px; line-height:20px; color:#64748b; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mistake-card .card-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; }
.mistake-card .card-actions .button { font-size:12px; line-height:16px; padding:12px; min-height:40px; border-radius:12px; }
.mistake-card .mistake-inline-panel { padding:16px; margin-top:16px; background:var(--c-primary-light); border-radius:12px; font-size:12px; line-height:20px; }
.mistake-inline-panel strong { display:block; margin-top:12px; color:var(--c-primary); }
.mistake-inline-panel strong:first-child { margin-top:0; }
.mistake-inline-panel p { margin-top:6px; color:var(--c-text-sec); }
.metrics-grid { margin-top:32px; margin-bottom:16px; gap:16px; }
.metrics-grid .metric-value { font-size:24px; line-height:32px; margin:8px 0; font-weight:900; }
.metrics-grid .muted { font-size:12px; line-height:16px; font-weight:700; color:#94a3b8; }
.metrics-grid .metric-detail { margin-top:8px; font-size:12px; line-height:16px; }
.advice-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.weekly-plan h2 { font-size:18px; line-height:28px; font-weight:900; }
.plan-list { margin-top:20px; display:grid; gap:16px; }
.plan-item { display:flex; gap:16px; background:var(--c-bg); border-radius:12px; padding:16px; }
.plan-item > span { font-size:16px; font-weight:900; color:var(--c-primary); }
.plan-item strong { font-size:14px; line-height:20px; font-weight:900; }
.plan-item p { margin-top:4px; font-size:12px; line-height:20px; color:var(--c-text-sec); }
.daily-coach h2 { margin-top:20px; font-size:16px; font-weight:900; }
.daily-coach > p { margin-top:8px; font-size:14px; line-height:24px; }
.daily-coach .button { font-size:12px; line-height:16px; }
.settings-page { max-width:768px; display:flex; flex-direction:column; }
.settings-page > .page-intro { order:0; }
.settings-page > .surface-card { order:1; }
.settings-page > .answer-submit { order:2; margin-top:20px; font-size:14px; padding:12px; line-height:20px; }
.settings-page > .settings-extras { order:3; }
.settings-page .setting-row { padding:20px 0; gap:16px; }
.settings-page .setting-row:first-child { padding-top:0; }
.settings-page .setting-row:last-child { padding-bottom:0; border-bottom:0; }
.settings-page .icon-box { width:40px; height:40px; flex-shrink:0; border-radius:12px; }
.setting-copy strong { font-size:14px; line-height:20px; font-weight:900; }
.setting-copy p { margin-top:4px; font-size:12px; line-height:20px; }
.settings-extras,.teacher-connection { margin:20px 0; font-size:12px; color:var(--c-text-sec); }
.settings-extras > summary,.teacher-connection > summary { cursor:pointer; padding:8px 0; color:var(--c-primary); }
.settings-extras[open] > section,.teacher-connection[open] > section { margin-top:12px; }
.teacher-page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.teacher-page-heading .page-intro { margin-bottom:0; }
.teacher-page-heading > button { flex-shrink:0; min-height:40px; padding:12px 20px; font-size:12px; line-height:16px; }
.teacher-table-card > p { margin-top:4px; }
.teacher-table-card { overflow:hidden; }
.teacher-table th { color:#94a3b8; font-size:12px; background:var(--c-bg); }
body[data-page=sentences] .saved-sentences > h2:first-child { display:none; }
body[data-page=sentences] .saved-sentences .mistake-grid { margin-top:20px; }
@media(max-width:1023px) {
 body:not([data-page=practice]) .header-inner { flex-wrap:wrap; }
 body:not([data-page=practice]) .site-nav { order:3; width:100%; display:flex; border-top:1px solid var(--c-border); padding-top:12px; justify-content:flex-start; }
 body:not([data-page=practice]) .header-actions { margin-left:auto; }
 .mistake-grid { grid-template-columns:1fr; }
 .advice-grid { grid-template-columns:1fr; }
 .teacher-page-heading { flex-wrap:wrap; align-items:flex-start; }
}
@media(max-width:767px) {
 body[data-page=home] .hero h1 { font-size:36px; line-height:40px; }
 .page-intro h1 { font-size:28px; line-height:36px; }
 .metrics-grid { grid-template-columns:1fr; }
 body:not([data-page=practice]) .site-nav a { font-size:12px; padding:8px 10px; white-space:nowrap; }
 .session-heading > svg { width:124px; }
}
@media(prefers-reduced-motion:reduce) { .reference-wave i { transition:none; } }

.button-primary,.brand-icon,.upload-symbols span:first-child { background:#065cff; }
#btnTranscriptToggle { display:none; }
.reference-transcript-note { margin-top:8px; font-size:12px; line-height:20px; color:#94a3b8; }