/* STEPIRO — Brand foundation. Semantic surfaces and states, shared across views. */
:root {
  color-scheme: light;
  --ink: #162d46;
  --muted: #526579;
  --teal: #087f82;
  --dark: #142c46;
  --mint: #e8f5f4;
  --paper: #f3f6fa;
  --line: #dfe7ef;
  --gold: #8e571a;
  --red: #ac3d4b;
  --radius: 22px;
  --brand-soft: #e8f5f4;
  --brand-deep: #08686e;
  --blue-soft: #edf2fd;
  --blue: #3f65cb;
  --success: #187253;
  --success-soft: #eaf7f0;
  --danger-soft: #fff0f1;
  --amber-soft: #fff5e7;
  --shadow-sm: 0 3px 14px rgb(23 46 74 / 4%);
  --shadow-md: 0 12px 35px rgb(23 46 74 / 7%);
}
body {
  background: radial-gradient(ellipse at 2% 0%, #e9f3f5 0, transparent 40%), var(--paper);
  color: var(--ink);
}
::selection { background: #c5ebe8; color: #123b4c; }
a { color: var(--brand-deep); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, .source-filters .filter:focus-visible,
.lesson-source-links a:focus-visible, .source-card a:focus-visible {
  outline: 3px solid #3f65cb; outline-offset: 4px;
}
.main { max-width: 1320px; padding-top: 34px; }
.sidebar {
  background: linear-gradient(165deg, #182f4a 0%, #10263e 100%);
  border-left: 1px solid #243b55;
  padding-top: 30px;
}
.brand { margin-bottom: 30px; }
.brandmark, .mobile-logomark {
  background: #bcebe4; color: #173f4c;
  border: 1px solid #d3f5ef; box-shadow: 0 5px 16px #081e3020;
  border-radius: 13px;
}
.brand small { color: #b1c5d6; }
.brand strong { color: #fff; }
.nav { gap: 7px; }
.nav button { color: #c0cfdf; border: 1px solid transparent; border-radius: 13px; }
.nav button:hover { color: #fff; background: #ffffff0c; }
.nav button.active {
  color: #123f4e; background: #c5eeea; border-color: #dbfaf4;
  box-shadow: 0 4px 14px #081c2c18;
}
.nav button.active .icon { color: #116971; }
.nav .count { color: #fff; background: #446079; }
.side-note { background: #ffffff06; border-color: #ffffff15; color: #bfd0df; }
.side-note strong { color: #f0f6fb; }
.side-note .track { background: #ffffff14 !important; }
.side-note .track i { background: #8ddbd4 !important; }
.side-bottom button { color: #c2d2e0; }
.topbar {
  background: #ffffffd9; border-bottom-color: var(--line);
  backdrop-filter: blur(16px);
}
.avatar, .avatar-button { background: #e9f0f7; border-color: #d9e4ef; color: #274968; }
.breadcrumb, .top-date, .profile, .mobile-location { color: var(--muted); }
.breadcrumb span { color: var(--ink); }
.mobile-appbar {
  background: #ffffffed; border-bottom: 1px solid #dfe7ef;
  box-shadow: 0 2px 10px #18324c03;
}
.mobile-logo { color: #19334e; }
.logo-slash { color: #5d989d; }
.bottom-tabs {
  background: #ffffffed; border-color: #dce5ee;
  box-shadow: 0 -8px 28px #233c5609;
}
.bottom-tab { color: #566b80; border: 1px solid transparent; border-radius: 16px; }
.bottom-tab.active { color: #075c66; background: #e5f4f2; border-color: #d4ebe8; }
.bottom-tab.active .icon { color: #087f82; }
.nav-badge { background: var(--red); color: #fff; border: 2px solid #fff; }
.pagehead { margin-bottom: 28px; }
.pagehead h1, .welcome-row h1, .card h2, .card h3,
.lesson-card h3, .test-card h3, .source-card h3 { color: var(--ink); }
.pagehead p, .welcome-greeting, .eyebrow, .app-footer { color: var(--muted); }
.greeting-dot { background: #11998c; box-shadow: 0 0 0 4px #e5f4f0; }
.week-chip { color: #314f72; background: #eaf0f8; border-color: #dce6f1; }
.week-chip b { color: #1c3656; }
.hero, .home-hero, .mastery-hero {
  position: relative; isolation: isolate;
  background: radial-gradient(ellipse at 5% 0%, #1d6874 0%, transparent 62%),
    linear-gradient(125deg, #183c56 0%, #132b45 70%);
  border: 1px solid #27465f; border-radius: 26px;
  box-shadow: 0 14px 35px #142d4517;
}
.home-hero { padding: 34px; min-height: 260px; grid-template-columns: minmax(0, 1fr) 245px; gap: 30px; }
.hero::before {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  width: 320px; height: 320px; border-radius: 50%;
  border: 1px solid #a1e8dc18; left: -100px; top: -130px;
  box-shadow: 0 0 0 36px #9fe6e20a, 0 0 0 74px #a1e8dc06;
}
.hero::after {
  width: 210px; height: 210px; left: 60px; bottom: -170px;
  border-color: #bfe7ec14;
  box-shadow: 0 0 0 42px #a3dfea06, 0 0 0 84px #a3dfea03;
}
.hero-copy { position: relative; z-index: 1; }
.hero h2, .home-hero h2, .mastery-hero h2 { color: #fff; margin-top: 16px; }
.hero p, .home-hero p, .mastery-hero p { color: #d2e2ee; }
.hero-kicker {
  color: #d1f5ed; display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff0c; border: 1px solid #ffffff1c;
  border-radius: 30px; padding: 5px 11px;
}
.hero-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8ee3d6; }
.goal-path {
  position: relative; z-index: 1; border: 1px solid #ffffff20;
  background: #ffffff08; border-radius: 22px; padding: 26px 18px;
  min-height: 155px; gap: 18px; box-shadow: inset 0 1px 0 #ffffff0d;
}
.goal-path strong { color: #fff; }
.goal-path .goal-end strong { color: #a2eee0; }
.goal-path span { color: #c5d8e8; }
.goal-path .goal-path-arrow { color: #7fc7c6; }
.btn {
  background: var(--teal); color: #fff; border: 1px solid transparent;
  border-radius: 13px; box-shadow: 0 4px 12px #087f8214;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.btn:hover { background: #08686e; box-shadow: 0 7px 18px #087f8223; }
.btn.light, .hero-buttons .btn.light {
  background: #c5f0e7; color: #123c48; border-color: #d7faf1;
  box-shadow: 0 5px 18px #071c2c18;
}
.btn.light:hover { background: #dcfaf2; }
.btn.outline { background: #fff; color: var(--brand-deep); border-color: #cbdde3; box-shadow: none; }
.btn.outline:hover { background: #edf8f7; border-color: #98c7c9; }
.btn.secondary { background: #edf2f8; color: #365473; border-color: #e0e8f0; box-shadow: none; }
.btn.secondary:hover { background: #e4edf5; }
.btn.danger { color: var(--red); background: var(--danger-soft); border-color: #f1d5d9; box-shadow: none; }
.btn.ghost { background: #ffffff0b; border-color: #ffffff33; color: #e5eff7; }
.text-link { color: var(--brand-deep); text-underline-offset: 4px; }
.text-link:hover { color: #075259; }
.card, .lesson-card, .source-card, .test-card, .stat, .quick,
.question-panel, .context-panel, .week, .word-card, .mastery-check {
  background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm);
}
.card { padding: 26px; }
.card-title { margin-bottom: 20px; }
.card-title .badge, .card-title .pill { flex-shrink: 0; }
.section-label { color: #1c3855; margin-top: 30px; }
.pill, .badge { color: #365574; background: #edf2f8; border: 1px solid #e1e9f1; }
.badge.red { color: var(--red); background: var(--danger-soft); border-color: #f1d8dc; }
.badge.gold { color: var(--gold); background: var(--amber-soft); border-color: #efdfc9; }
.new-label { color: var(--brand-deep); }
.notice { background: #edf6f8; border-color: #d6e8ec; color: #345a70; }
.notice strong { color: #23485f; }
.notice.warm { background: var(--amber-soft); border-color: #efdfc8; color: #80551f; }
.notice.warm strong { color: #80551f; }
.resume { border-right: 4px solid var(--teal); box-shadow: var(--shadow-sm); }
.resume span { font-size: var(--type-caption); line-height: 1.7; }
.tip { border-right-color: #83c3c5; color: var(--muted); }
.today-card { border-color: #cee0e7; box-shadow: 0 10px 28px #24486308; }
.session-card { background: #f4f8fb; border-color: #dce7ee; }
.step-box, .weeknum { color: #2f587a; background: #e6eef7; border: 1px solid #d8e4f0; }
.session-meta { color: #4a637b; }
.stat { position: relative; overflow: hidden; border-radius: 20px; min-width: 0; }
.stat::before { content: ''; position: absolute; top: 0; inset-inline: 22px; height: 3px; background: #b4d9dd; border-radius: 0 0 4px 4px; }
.stat:nth-child(2)::before { background: #b6c8f0; }
.stat:nth-child(3)::before { background: #d4c7ec; }
.stat:nth-child(4)::before { background: #eacfa9; }
.stat strong { color: #1d3d59; }
.stat .label, .stat small, .stat strong > span { color: var(--muted); }
.stat-icon { background: #edf4f8; color: #4c718c; border: 1px solid #dce7ef; }
.track { background: #eaf0f5; height: 8px; }
.track i { box-shadow: inset 0 1px 0 #ffffff20; }
.quick { border-radius: 18px; text-align: right; }
.quick .icon { background: #e8f5f4; color: #08717a; border-radius: 12px; padding: 9px; width: 43px; height: 43px; }
.quick:nth-child(2) .icon { background: #fff3e7; color: #8e571a; }
.quick:nth-child(3) .icon { background: #edf0fb; color: #5365aa; }
.quick strong { color: #243f5b; }
.quick small, .skill-meta, .skill-meta small { color: var(--muted); }
.coach-discover { background: #eef5fc; border-color: #d8e6f2; color: #264964; }
.coach-discover:hover { background: #e9f2fb; border-color: #b6cee1; }
.coach-discover-icon { background: #dfeaf8; color: #3e67aa; }
.coach-discover .new-label { color: #456b9d; }
.coach-discover small, .coach-discover > .icon { color: #526d86; }
.study-note { background: #f0f5fa; border-color: #dce6f0; }
.study-note p { color: var(--muted); }
.mastery-card {
  background: linear-gradient(120deg, #eaf6f4 0%, #f8fcfc 58%, #fff 100%);
  border-color: #cce5e2; position: relative; overflow: hidden;
}
.mastery-count { color: #086f75; }
.mastery-count small { color: #526f7a; }
.mastery-mini-track { background: #dcebe9; height: 7px; }
.mastery-mini-track i { background: linear-gradient(90deg, #258d97, #5db6a5); }
.mastery-check { border-color: #dfe7ef; }
.mastery-check > span { color: #8395a6; }
.mastery-check.met { background: var(--success-soft); border-color: #c1dfcf; }
.mastery-check.met > span { color: var(--success); }
.mastery-check p { color: var(--muted); }
.mastery-topic { background: #f7f9fc; color: #345571; border-color: #dde7ef; }
.mastery-topic small { color: var(--muted); }
.mastery-topic.mastered { background: var(--success-soft); border-color: #bddfcd; color: #255e48; }
.mastery-hero .pill { background: #ffffff10; color: #d3f3ea; border-color: #ffffff23; }
.filter { color: #466178; background: #fff; border-color: #dce5ee; box-shadow: 0 2px 6px #203e5803; }
.filter.active { color: #fff; background: #1d465c; border-color: #1d465c; box-shadow: 0 4px 10px #17385212; }
.lesson-card { border-radius: 20px; position: relative; }
.lesson-card .small-label { color: #4c6a82; }
.lesson-number { color: #6e8299; background: #f0f4f8; border: 1px solid #e2e9f0; border-radius: 7px; padding: 1px 7px; }
.lesson-bottom { color: var(--brand-deep); border-top: 1px solid #edf1f6; padding-top: 13px; }
.rule { color: #253f57; }
.formula { color: #225b70; background: #edf5f9; border: 1px solid #dce9f1; border-radius: 14px; }
.example { color: #2a4e67; border-right-color: #a6cbdc; }
.method-steps li > span, .solution-list li > span { background: #e6f2f3; color: #246d78; border: 1px solid #d1e8e8; }
.method-steps p { color: #3b596f; }
.how-button { background: #eef5fb; border-color: #d6e4f0; color: #315975; }
.how-button:hover { background: #e8f2fa; border-color: #b2ccdf; }
.how-button small { color: #526d83; }
.placement-intro {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 0% 0%, #246879, transparent 75%), #182f4a;
  color: #fff; border-color: #274960; border-radius: 25px;
  padding: 30px; box-shadow: 0 12px 30px #152d4512;
}
.placement-intro::after { content: ''; position: absolute; width: 250px; height: 250px; left: -110px; top: -120px; border: 1px solid #c1e8ed22; border-radius: 50%; box-shadow: 0 0 0 33px #ffffff05; pointer-events: none; z-index: -1; }
.placement-intro .pill { background: #ffffff10; color: #c8f0e7; border-color: #ffffff26; }
.placement-intro h2 { color: #fff; }
.placement-intro p { color: #d0e2ee; }
.placement-intro .btn { background: #c5f0e7; color: #113d49; border-color: #d9faf2; box-shadow: none; }
.placement-intro .btn.outline { color: #e6f3f7; background: #ffffff08; border-color: #ffffff45; }
.placement-intro .btn:hover { background: #daf8ef; }
.placement-intro .btn.outline:hover { background: #ffffff13; }
.placement-choice { border-top: 3px solid #cedce9; border-radius: 22px; }
.placement-choice:first-child { border-color: #cde2e4; border-top-color: #238a91; }
.placement-choice-icon { width: 52px; height: 52px; background: #e7f5f3; color: #0b7279; border: 1px solid #d5e9e7; border-radius: 16px; }
.placement-choice:nth-child(2) .placement-choice-icon { background: #edf2fc; color: #4a67ab; border-color: #dee7f5; }
.placement-choice-num { color: #778fa5; opacity: .7; }
.placement-tags > span { color: #3a6175; background: #f0f5f8; border-color: #dfe8ee; }
.placement-list { color: var(--muted); }
.placement-summary { background: #f0f6fa; border-color: #d6e6ee; }
.placement-summary p, .placement-outcome p { color: var(--muted); }
.placement-inline-score { color: #245b78; }
.placement-score-badge { color: #b6f2e3; background: linear-gradient(145deg, #28516b, #142c46); box-shadow: 0 8px 20px #142c4612; }
.placement-lessons button, .placement-references a { background: #f4f8fb; border-color: #dce7ef; color: #325e7a; }
.placement-references span { color: var(--muted); }
.field input, .field select, .control, .placement-choice input { background: #f9fbfd; border-color: #d5e0e9; color: var(--ink); box-shadow: inset 0 1px 2px #173b5003; }
.field input:focus, .field select:focus { background: #fff; border-color: #4b9aa2; box-shadow: 0 0 0 4px #087f820d; }
.field [aria-invalid=true] { border-color: var(--red); outline-color: #ac3d4b26; }
.form-error { color: var(--red); }
.placement-checkbox input { accent-color: var(--teal); }
.test-card { border-radius: 21px; }
.test-card .test-num { color: #3c6481; }
.test-card.mock-card { border-color: #a8d3d5; background: linear-gradient(145deg, #eef9f7, #fff); }
.test-card.mock-card .test-num { color: #08767a; }
.week { border-radius: 21px; }
.week[open] { border-color: #c3dbe3; box-shadow: var(--shadow-sm); }
.week[open] > summary { background: #f6fafc; }
.week .weekgoal { color: #37647d; }
.week-days { border-top-color: #e1eaf1; }
.day { border-bottom-color: #edf2f6; }
.daycheck { color: #607d94; border-color: #cfdeea; }
.daycheck.done { color: var(--success); background: #e6f4ed; border-color: #c4e0d1; }
.word-card strong { color: #254b68; }
.word-card .meaning { color: #086b74; }
.word-card.flipped { background: #eaf7f4; border-color: #bddfd9; }
.source-link { color: #356b85; }
.source-summary, .source-summary strong { color: #2c607b; }
.source-original { color: var(--muted); }
.source-original p { background: #f0f5f9; color: var(--muted); }
.source-card .source-note { background: #fff5e7; border-right-color: #c89b5e; color: #80551f; }
.lesson-source-links a { background: #f7fafc; color: #315f78; border-color: #dce6ef; }
.lesson-source-links small { color: var(--muted); }
.quiz-progress { background: #e4edf3; }
.quiz-progress i { background: linear-gradient(90deg, #2f6c9f, #269795); }
.timer { color: #80501c; background: #fff4df; border: 1px solid #efdbb7; border-radius: 14px; box-shadow: 0 3px 12px #9c6a1b06; }
.quiz-top .btn { box-shadow: none; }
.q-meta { color: var(--muted); }
.q-stem { color: #1c3751; }
.question-panel { box-shadow: 0 8px 26px #19374f06; border-color: #d9e4ee; }
.answer { background: #fff; color: #253f59; border-color: #d9e4ed; box-shadow: 0 2px 6px #1c3b5503; border-radius: 14px; }
.answer .letter { border-color: #d7e2ee; background: #f8fafc; color: #54718c; }
.answer:hover:not(:disabled) { border-color: #8ebcc7; background: #f5fafc; }
.answer.selected { border-color: #16848b; background: #eaf7f6; box-shadow: 0 0 0 1px #16848b18; }
.answer.selected .letter { color: #fff; background: #087f82; border-color: #087f82; }
.answer.correct { color: #21543f; border-color: #75b99b; background: #eaf7f0; }
.answer.correct .letter { color: #fff; background: #187253; border-color: #187253; }
.answer.wrong { color: #7e3440; border-color: #cc8894; background: #fff0f1; }
.answer.wrong .letter { color: #fff; background: #ac3d4b; border-color: #ac3d4b; }
.flag-btn { color: #536d84; background: #f0f5f9; border: 1px solid #e1e9f0; border-radius: 9px; }
.flag-btn.marked { color: #80501c; background: #fff3dd; border-color: #ead4ad; }
.q-grid button { color: #526d85; background: #f6f9fc; border-color: #dfe7ef; border-radius: 10px; }
.q-grid button.answered { color: #195c69; background: #e5f4f2; border-color: #c7e4df; }
.q-grid button.current { color: #fff; background: #245b75; border-color: #245b75; }
.q-grid button.flagged { box-shadow: inset 0 -3px 0 #c2974d; }
.feedback { background: var(--success-soft); border-color: #cce6d9; }
.feedback-verdict { color: var(--success); }
.feedback.wrong { background: #fff7f0; border-color: #f0dfcd; }
.feedback.wrong .feedback-verdict { color: #8b5925; }
.feedback.wrong .solution-list li > span { background: #f7ead8; border-color: #ebd7ba; color: #80551f; }
.solution-answer { color: #225d4c; }
.context-title { color: #2b526c; }
.context-disclosure summary { color: #2f657e; }
.context-disclosure[open] > summary { border-bottom-color: #e0eaf1; }
.context-disclosure summary small { color: #526e85; }
.passage-text { color: #30495f; }
.audio-player { background: linear-gradient(145deg, #eff7fa, #f7fbfc); border-color: #dceaf0; }
.audio-wave i { background: #679eb1; }
.audio-player.playing .audio-wave i { background: #168b90; }
.audio-status { color: #486a80; }
.audio-fallback { color: var(--red); }
.listening-preview { border-top-color: #dce8ef; }
.listening-preview summary { color: #2d637a; }
.listening-preview div { border-bottom-color: #e5edf3; color: #2d4861; }
.transcript { background: #f4f8fb; border-color: #dce6ef; }
.transcript summary { color: #305f79; }
.chart-box { background: #f8fbfd; border-color: #dee8f0; }
.chart-box h3 { color: #2a4d66; }
.chart-box svg text, .progress-plot text { fill: #4e687e; }
.chart-table th, .chart-table td, .history-list th, .history-list td { border-color: #e1e9f0; }
.chart-table th { background: #eef4f9; color: #355a76; }
.history-list th { color: #46647d; background: #f6f9fc; }
.history-list td { color: #365269; }
.score-ring { background: conic-gradient(#18888b calc(var(--pct)*1%), #e7eef5 0); }
.score-ring::before { background: #fff; }
.score-ring strong { color: #1c4e67; }
.result-score .notice.warm { border-radius: 12px; }
.result-review > details { border-color: #e1e9f0; background: #fff; }
.result-review > details[open] { background: #fbfcfe; border-color: #cadce8; }
.result-review .chosen { color: var(--red); }
.result-review .right { color: var(--success); }
.mock-block-bar { background: #edf6f8; border-color: #cfe3e9; border-right: 3px solid #39919a; }
.mock-block-bar strong { color: #22566e; }
.mock-block-bar span, .mock-block-bar p { color: #4b6a80; }
.block-dots i { color: #4b657d; background: #fff; border-color: #d3e0eb; }
.block-dots i.done { color: #24654f; background: #ddf1e8; border-color: #c6e3d5; }
.block-dots i.current { color: #fff; background: #245b75; border-color: #245b75; }
.block-results article { border-bottom-color: #e9eef4; }
.block-results article > span { color: #3d6381; background: #eaf1f8; }
.block-results b { color: #245b75; }
.block-results small { color: var(--muted); }
.format-table-wrap { border-color: #dce6ee; }
.format-table thead { background: #eaf1f8; color: #2f5473; }
.format-table th, .format-table td { border-bottom-color: #e3eaf2; }
.format-table td:last-child { background: #f2f8fa; color: #2c5b74; }
.modal-overlay, .sheet-overlay { background: #10263e80; backdrop-filter: blur(6px); }
.modal, .learning-sheet, .menu-sheet { background: #fff; border-color: #edf2f6; box-shadow: 0 25px 90px #0a203d30; }
.sheet-header, .sheet-actions { background: #fff; border-color: #e4ecf3; }
.sheet-header .new-label, .coach-section-label { color: #4f7088; }
.close-sheet { color: #4d6d86; background: #f1f6fa; border-color: #dce7f0; }
.worked-example { background: #f5f8fc; border-color: #dce7f0; }
.worked-top > span { color: #3d6685; }
.worked-top small, .example-progress { color: #547088; }
.worked-context { background: #fff; border-color: #e0e8f0; color: #354f66; }
.worked-question { color: #203c55; }
.example-option { color: #334f65; border-color: #dce5ee; }
.example-option > span { color: #617c93; }
.example-option.example-right { color: #205e45; background: #e6f5ed; border-color: #93c7ae; }
.example-progress i { background: #dde7ef; }
.example-progress i.done { background: #3c999f; }
.try-first, .worked-step p { color: #4b667e; }
.worked-step h4 { color: #245b74; }
.worked-step > span { color: #4b7c91; }
.coach-trap { background: #fff4e3; border-right-color: #c99a51; }
.coach-trap strong, .coach-trap p { color: #80551f; }
.more-menu > button { color: #315b76; border-bottom-color: #e6edf4; }
.more-menu small { color: #58718a; }
.empty { color: var(--muted); }
.empty .icon { color: #7d9cb5; }
#toast { background: #183b54; color: #fff; border: 1px solid #31556f; box-shadow: 0 10px 35px #0f2a4133; }
@media(hover:hover) and (pointer:fine) {
  .lesson-card, .source-card, .quick, .word-card, .mastery-topic { transition: transform .18s, box-shadow .18s, border-color .18s; }
  .lesson-card:hover, .source-card:hover, .quick:hover, .word-card:hover, .mastery-topic:hover { transform: translateY(-2px); border-color: #a8c7d6; box-shadow: var(--shadow-md); }
}
@media(max-width:850px) {
  .main { padding-top: 26px; }
  .home-hero { display: flex; flex-direction: column; align-items: stretch; padding: 26px; gap: 20px; min-height: 0; }
  .goal-path { width: 100%; min-height: 0; padding: 17px 20px; margin-top: 0; justify-content: space-between; }
  .goal-path > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .goal-path .goal-end { align-items: flex-end; }
  .goal-path span { max-width: none; }
  .goal-path .goal-path-arrow { font-size: 25px; }
  .card { padding: 23px; }
  .placement-intro { padding: 26px; }
  .stat-grid { gap: 12px; }
  .stat { padding: 20px 16px; }
  .stat::before { inset-inline: 17px; }
  .stat-icon { display: none; }
  .coach-discover { padding: 18px; }
  .mastery-card.compact { padding: 23px; }
  .question-panel { padding: 24px 20px; }
  .context-panel { padding: 18px; }
  .quiz-shell .q-controls { background: #ffffffee; border-color: #dbe6ee; box-shadow: 0 -8px 25px #1d3d5508; }
  .quiz-shell .q-controls .btn.secondary { background: #edf2f8; color: #365473; }
  .quiz-shell .q-controls .btn.outline { background: #fff; }
}
@media(max-width:600px) {
  .main { padding-inline: 18px; }
  .mobile-appbar { padding-inline: 18px; }
  .hero, .placement-intro { border-radius: 23px; }
  .home-hero { padding: 24px; }
  .home-hero .hero-buttons .btn { min-height: 52px; }
  .card, .test-card, .placement-choice { border-radius: 21px; }
  .card { padding: 22px 20px; }
  .quick-grid { grid-template-columns: 1fr; gap: 10px; }
  .quick { display: grid; grid-template-columns: 46px minmax(0,1fr); column-gap: 13px; align-items: center; min-height: 96px; padding: 17px; }
  .quick .icon { grid-row: 1 / 3; margin: 0; }
  .quick strong { align-self: end; }
  .quick small { margin-top: 2px; align-self: start; }
  .coach-discover { gap: 12px; }
  .coach-discover-icon { width: 42px; height: 42px; }
  .coach-discover > .icon { display: none; }
  .session-card { padding: 16px 13px; gap: 12px; }
  .placement-choice { padding: 25px 22px; }
  .placement-choice-num { top: 24px; left: 22px; }
  .bottom-tabs { padding-top: 7px; }
  .bottom-tab { min-height: 57px; }
  .format-card { padding: 20px 17px; }
  .source-summary { gap: 14px; }
  .learning-sheet, .menu-sheet { border-radius: 24px 24px 0 0; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}