@layer experience {
  :root { --background: #f5f7fb; --muted: #4d5d70; --line: #d5dfeb; --font-display: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; }
  body { min-width: 0; }
  .button, .hero-card .button { min-height: 48px; font-size: 15px; padding: 12px 18px; }
  .button-dark { background: #173f56; color: #fff; box-shadow: none; }
  .button-dark:hover:not(:disabled) { background: #0f3043; box-shadow: 0 3px 10px #173f5626; }
  .button-dark:active:not(:disabled), .button-dark.pressed { background: #0a2535; box-shadow: 0 0 0 4px #4aa3d066; transform: translateY(1px); }
  .button-dark:focus-visible { outline: 3px solid #4aa3d0; outline-offset: 2px; }
  .text-button { min-height: 44px; font-size: 14px; color: #294f73; }
  .icon-button, .icon-button.small, .audio-pill, .bookmark-button { min-width: 44px; min-height: 44px; }
  .icon-button { color: #36516f; }
  .listen-controls { flex-wrap: wrap; gap: 12px; }
  .slow-button { min-height: 48px; padding: 12px 8px; font-size: 14px; color: #294f73; }
  input, select, .settings-input, .written-answer, .level-picker select, .search-field input { font-size: 16px; min-height: 48px; }
  .field-label, .goal-options legend { color: #344d67; font-size: 14px; }
  .field-label > span, .goal-options small { color: #4d5d70; font-size: 12px; }
  .eyebrow, .page-heading .eyebrow, .section-heading .eyebrow, .settings-heading .eyebrow { color: #425c79; font-size: 12px; letter-spacing: 1.1px; }
  .page-subtitle, .level-picker p, .learning-order-note { font-size: 15px; color: #4d5d70; }
  .level-picker label { font-size: 14px; }
  .level-picker small, .date-label, .page-footer { color: #4d5d70; font-size: 12px; }
  .pronunciation-hint, .input-hint, .exercise-footer-note, .lesson-modal-footer .exercise-footer-note,
  .settings-privacy p, .mastery-note, .chart-caption, .microphone-note, .phrase-hint { color: #4d5d70; font-size: 13px; line-height: 1.7; }
  .sidebar { overflow-y: auto; }
  .sidebar-course { margin-bottom: 16px; }
  .sidebar-tip { color: #4d5d70; font-size: 14px; line-height: 1.7; padding: 0 12px 24px; }
  .nav-link { font-size: 15px; }
  .nav-caption, .profile-button small, .sidebar-course > div > span { font-size: 12px; color: #4d5d70; }
  .profile-button strong { font-size: 14px; }
  .little-reminder p { font-size: 13px; color: #4d5d70; }
  .language-option { font-size: 12px; min-height: 64px; overflow-wrap: anywhere; color: #344d67; }
  .settings-dialog .language-picker { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .settings-dialog .language-option { font-size: 14px; }
  .sidebar .language-picker { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .sidebar .language-option { flex-direction: row; justify-content: start; padding: 10px; min-height: 48px; font-size: 14px; }
  .language-badge { min-height: 44px; background: #e9eff8; padding: 8px 12px; border: 1px solid #c4d3e5; border-radius: 12px; font-size: 14px; color: #233e5c; }
  .language-badge b { font-size: 12px; }
  .italian-flag i:first-child { background: #008c45; }
  .italian-flag i:last-child { background: #cd212a; }
  .french-flag i:first-child { background: #234a91; }
  .french-flag i:last-child { background: #c3313e; }
  .mobile-nav a { font-size: 12px; min-height: 48px; color: #465c73; }
  .top-stat > span { color: #4d5d70; font-size: 12px; }

  .auth-page { width: min(1200px, 100%); max-width: none; min-height: 100dvh; padding: 48px 32px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
  .auth-brand { margin: 0 0 40px; }
  .auth-story h1 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.12; letter-spacing: -1.5px; }
  .auth-story h1 > span { color: #315b89; }
  .auth-intro { font-size: 18px; line-height: 1.7; margin: 24px 0 18px; color: #415571; max-width: 510px; }
  .auth-languages { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
  .auth-languages li { padding: 7px 12px; border: 1px solid #c8d6e8; border-radius: 999px; color: #294865; font-size: 14px; background: white; }
  .auth-welcome-start { margin-top: 22px; }
  .auth-steps { list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 20px; }
  .auth-steps li { display: flex; gap: 14px; align-items: start; }
  .auth-steps li > span { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; color: #254c79; background: #e0eaf8; font-weight: 800; }
  .auth-steps strong { font-size: 17px; }
  .auth-steps p { color: #4d5d70; font-size: 15px; line-height: 1.6; margin-top: 3px; }
  .auth-promise { display: flex; align-items: start; gap: 10px; color: #345d44; font-size: 14px; }
  .auth-jump { margin-bottom: 18px; text-decoration: underline; }
  .auth-card { width: 100%; padding: clamp(24px, 3vw, 40px); border-radius: 24px; border-color: #d5dfeb; box-shadow: 0 16px 50px #142d5310; }
  .auth-card-kicker { display: block; color: #425c79; font-size: 12px; letter-spacing: .8px; font-weight: 700; margin-bottom: 12px; }
  .auth-card h2 { font-size: 30px; line-height: 1.25; margin-bottom: 12px; }
  .auth-card > p { color: #4d5d70; font-size: 15px; line-height: 1.65; }
  .auth-field { margin-bottom: 20px; }
  .auth-field .field-label { font-size: 15px; }
  .auth-password { position: relative; display: flex; align-items: stretch; gap: 8px; }
  .auth-password input { flex: 1; min-width: 0; width: 0; }
  .auth-password button { min-height: 48px; min-width: 72px; padding: 8px; background: #e9eff8; color: #25476f; font-size: 13px; border-radius: 8px; }
  .auth-field .input-hint { margin-top: 8px; font-size: 12px; }
  .auth-switch button { min-height: 44px; padding: 8px; border-radius: 8px; background: #e9eff8; font-size: 15px; }
  .auth-card .auth-account-note { display: flex; gap: 8px; align-items: start; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #d5dfeb; font-size: 13px; }
  .auth-error { font-size: 14px; color: #803021; line-height: 1.65; }
  .auth-loading { color: #4d5d70; font-size: 16px; }
  .auth-topbar { position: static; width: auto; max-width: none; margin: 0 40px 28px 272px; border-radius: 14px; padding: 12px 16px; font-size: 14px; box-shadow: none; flex-wrap: wrap; color: #344d67; }
  .auth-topbar > span { margin-right: auto; max-width: 100%; }
  .auth-topbar button { font-size: 14px; min-height: 44px; padding: 8px 16px; }
  .auth-topbar .auth-error { flex-basis: 100%; margin: 0; }

  .learning-setup { border: 1px solid #c6d5e8; background: white; padding: clamp(20px, 3vw, 32px); border-radius: 20px; margin-bottom: 24px; }
  .setup-intro h2 { font-size: clamp(24px, 2.4vw, 32px); }
  .setup-intro > p:last-child { margin: 12px 0 16px; font-size: 15px; color: #4d5d70; max-width: 680px; }
  .setup-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .setup-selects label, .setup-goal { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
  .setup-selects select, .setup-goal select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #9baec6; background: white; color: #213c5b; }
  .setup-goal { margin-top: 20px; }
  .learning-setup .setup-actions { margin-top: 18px; }
  .setup-custom .study-batch-options { margin: 0; }
  .learning-setup .input-hint { margin-top: 10px; }
  .study-goal-options, .study-batch-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; border: 0; margin: 24px 0; min-width: 0; }
  .study-goal-options legend, .study-batch-options legend { padding: 0; margin-bottom: 12px; font-weight: 700; font-size: 15px; color: #233e5c; }
  .study-choice { display: flex; align-items: center; gap: 10px; padding: 14px; min-height: 76px; border: 1px solid #bacbdf; border-radius: 12px; cursor: pointer; background: #f8fafd; }
  .study-choice input { min-height: 20px; width: 20px; height: 20px; margin: 0; accent-color: #254f83; flex: 0 0 20px; }
  .study-choice:has(input:checked) { border-color: #315b89; background: #eaf1fb; box-shadow: inset 0 0 0 1px #315b89; }
  .study-choice:focus-within { outline: 3px solid #4a7893; outline-offset: 3px; }
  .study-choice strong { display: block; font-size: 15px; }
  .study-choice small { display: block; font-size: 13px; line-height: 1.5; margin-top: 4px; color: #4d5d70; }
  .setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
  .plan-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; }
  .plan-summary > span { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #415571; }
  .hero-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr); align-items: center; gap: 12px; min-height: 310px; padding: 28px; background: linear-gradient(135deg, #e5effc, #edf5f6); border-color: #cad9ec; border-radius: 20px; }
  .hero-copy { max-width: none; min-width: 0; }
  .hero-tag { font-size: 12px; color: #365778; line-height: 1.5; }
  .hero-card h2 { font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -1px; white-space: normal; overflow-wrap: anywhere; }
  .hero-card p { font-size: 15px; line-height: 1.7; color: #344e6b; }
  .hero-meta { font-size: 13px; color: #3f5771; flex-wrap: wrap; }
  .hero-illustration { position: static; width: 100%; height: auto; align-self: end; opacity: 1; }
  .next-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 30px; }
  .next-action { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 18px 14px; text-align: left; border: 1px solid #cddbeb; border-radius: 14px; background: white; color: #25476f; }
  .next-action > span { flex: 1; min-width: 0; }
  .next-action strong { display: block; font-size: 15px; color: #233e5c; }
  .next-action small { display: block; margin-top: 5px; color: #4d5d70; font-size: 13px; line-height: 1.55; }
  .next-action:disabled { opacity: 1; cursor: default; background: #edf1f7; }
  .next-action:hover:not(:disabled) { border-color: #6384b0; background: #f8fbff; }
  .lesson-path { display: grid; gap: 14px; }
  .path-row, .path-row.align-end { flex-direction: row; text-align: left; padding: 16px; gap: 20px; border: 1px solid #d5dfeb; border-radius: 14px; background: white; }
  .path-row::before { display: none; }
  .path-label { min-width: 0; max-width: none; }
  .path-label > strong { font-size: 17px; }
  .lesson-description { font-size: 14px; color: #4d5d70; }
  .path-label small { font-size: 12px; color: #4d5d70; }
  .path-callout { font-size: 12px; }
  .chapter-count, .chapter-count > span { font-size: 14px !important; }
  .section-heading > span { white-space: normal; font-size: 13px; color: #4d5d70; }
  .practice-card > strong { font-size: 15px; color: #253f58; }
  .practice-card > span:last-child { font-size: 13px; color: #405b6f; line-height: 1.6; }
  .practice-card { min-width: 0; padding: 20px 16px; }
  .daily-card .card-heading h2, .word-of-day h2 { font-size: 17px; }
  .daily-card > p, .culture-card p { font-size: 14px; color: #4d5d70; }
  .daily-card .goal-caption { font-size: 14px; min-height: 0; }
  .goal-ring small, .word-card-label, .culture-footer, .week-days > div { font-size: 12px; color: #435872; }
  .week-days b { min-width: 24px; min-height: 24px; }
  .daily-card .gentle-reminder { margin-top: 20px; font-size: 13px; line-height: 1.7; }
  .word-translation { font-size: 16px; }
  .word-of-day .pronunciation-hint, .vocabulary-card .pronunciation-hint { font-size: 13px; color: #4d5d70; }
  .vocabulary-summary, .bookmark-filter, .filter-tabs button { font-size: 14px; }
  .vocabulary-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .filter-tabs button { min-height: 44px; }
  .vocab-translation { font-size: 16px; }
  .vocabulary-card .category-tag { font-size: 12px; color: #334a5b; }
  .word-mastery small { font-size: 12px; color: #4d5d70; }
  .word-mastery { max-width: none; }
  .phrase-translation { font-size: 16px; }
  .phrase-navigation .text-button { font-size: 14px; }
  .stat-card > span:last-child, .achievement-card p, .achievement-status { font-size: 13px; color: #4d5d70; }
  .achievement-card h3 { font-size: 16px; }

  .lesson-modal-header > div > span, .lesson-modal-header > strong, .lesson-modal-header > strong > span { font-size: 14px; }
  .word-view-header > div { min-width: 0; }
  .word-view-header > div > span, .word-view-header > strong > span { color: var(--muted); margin-bottom: 0; }
  .word-view { text-align: center; }
  .word-view h2 { font-size: clamp(32px, 6vw, 48px); line-height: 1.25; overflow-wrap: anywhere; }
  .word-view .study-translation { min-height: 2.8em; margin: 0 0 24px; overflow-wrap: anywhere; }
  .exercise-type { font-size: 13px; color: #3b5c7d; }
  .answer-option { min-height: 60px; font-size: 16px; }
  .answer-number { min-width: 28px; min-height: 28px; font-size: 14px; }
  .lesson-modal-footer { flex-wrap: wrap; gap: 16px; }
  .answer-feedback { flex-basis: 100%; width: 100%; color: #23543c; }
  .answer-feedback strong { font-size: 17px; }
  .answer-feedback p { font-size: 15px; color: #345442; line-height: 1.7; }
  .feedback-incorrect .answer-feedback { color: #743d21; }
  .feedback-incorrect .answer-feedback p:not(.correct-answer), .answer-feedback .correct-answer { color: #743d21; font-size: 15px; }
  .lesson-modal-footer .button { margin-left: auto; }
  .feedback-mode { font-size: 13px; text-decoration: underline; }
  .listening-prompt .text-button { font-size: 14px; color: #294f73; }
  .listen-big-button { font-size: 15px; color: #294f73; }
  .sentence-answer > span, .written-answer::placeholder { font-size: 15px; color: #4d5d70; }
  .prerequisite-screen > p, .word-study .input-hint { font-size: 15px; line-height: 1.8; color: #415571; }
  .preparation-progress { display: block; width: 100%; height: 12px; margin: 20px 0; accent-color: #315b89; }
  .preparation-details { border-top: 1px solid #d5dfeb; margin-top: 24px; padding-top: 12px; }
  .preparation-details summary { font-size: 15px; color: #294f73; cursor: pointer; min-height: 44px; padding: 10px 0; }
  .preparation-details p { font-size: 14px; color: #4d5d70; line-height: 1.7; }
  .prerequisite-list li { font-size: 14px; }
  .result-screen > p:not(.eyebrow), .quit-screen p { font-size: 15px; color: #415571; }
  .result-screen > .learning-gain { display: flex; align-items: center; justify-content: center; gap: 10px; color: #28533e; padding: 14px; border-radius: 12px; background: #eaf4ed; }
  .result-screen > p.completion-note, .result-stats span { font-size: 13px; color: #4d5d70; }
  .result-screen > .text-button { font-size: 15px; }
  .settings-dialog { width: min(580px, calc(100% - 24px)); }
  .feedback-setting { display: flex; align-items: start; gap: 12px; margin: 24px 0; cursor: pointer; }
  .feedback-setting input { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; accent-color: #254f83; }
  .feedback-setting strong { display: block; font-size: 15px; }
  .feedback-setting small { display: block; font-size: 13px; line-height: 1.65; margin-top: 4px; color: #4d5d70; }

  .level-picker { gap: 20px; padding: 12px 16px; margin-bottom: 22px; }
  .level-picker label { display: flex; align-items: center; gap: 12px; flex: 0 1 280px; white-space: nowrap; }
  .level-picker select { min-width: 0; background: #fff; }
  .level-picker > p { flex: 1; font-size: 14px; }
  .level-picker > p > span { display: block; font-size: 12px; }
  .learning-heading .page-heading { margin-bottom: 12px; }
  .learning-heading .eyebrow { text-transform: none; letter-spacing: 0; font-size: 14px; }
  .learning-heading h1 { font-size: clamp(26px, 3vw, 34px); }
  .course-controls.optional-panel { margin: 0 0 18px; background: transparent; border: 0; }
  .course-controls > summary { width: fit-content; min-height: 44px; padding: 10px 0; font-size: 14px; }
  .course-options { padding: 16px; border: 1px solid #d5dfeb; border-radius: 12px; background: white; }
  .course-options .level-picker { margin-bottom: 12px; }
  .course-options .plan-summary { margin: 0; }
  .focused-dashboard { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .focused-dashboard .hero-card { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 28px; border-left: 4px solid #366b73; background: #edf5f6; }
  .focused-dashboard .hero-card h2 { font-size: clamp(24px, 3vw, 34px); margin: 12px 0; }
  .focused-dashboard .hero-card p { margin: 12px 0 20px; max-width: 700px; font-size: 16px; }
  .focused-dashboard .hero-card .conversation-outcome { color: #245562; font-weight: 700; margin-bottom: 8px; }
  .focused-dashboard .hero-tag { margin-bottom: 0; }
  .hero-meta { margin-top: 14px; }
  .learning-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 0 0; margin: 20px 0 0; gap: 12px; list-style: none; border-top: 1px solid #c5dadd; }
  .learning-steps li { display: flex; align-items: start; gap: 9px; font-size: 14px; color: #4d5d70; }
  .learning-steps strong, .learning-steps small { display: block; }
  .learning-steps small { margin-top: 3px; font-size: 12px; font-weight: 400; }
  .learning-steps b { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #e4eaf0; color: #344d67; }
  .learning-steps [aria-current="step"] { color: #173f56; font-weight: 700; }
  .learning-steps [aria-current="step"] b { color: #fff; background: #173f56; }
  .speaking-shortcut { display: flex; align-items: center; flex-wrap: wrap; gap: 0 14px; margin: 12px 0; }
  .speaking-shortcut .text-button { display: inline-flex; align-items: center; gap: 8px; }
  .speaking-shortcut > span { font-size: 12px; color: #4d5d70; }
  .optional-panel, .setup-custom { margin: 16px 0; border: 1px solid #d5dfeb; border-radius: 14px; background: white; min-width: 0; }
  .optional-panel > summary, .setup-custom > summary { padding: 16px; min-height: 56px; font-size: 15px; font-weight: 700; cursor: pointer; color: #294f73; overflow-wrap: anywhere; }
  .optional-panel[open] > summary, .setup-custom[open] > summary { border-bottom: 1px solid #d5dfeb; }
  .optional-panel > section, .optional-panel > aside, .setup-options { margin: 0; padding: 20px; }
  .optional-panel .learning-path, .optional-panel .extra-practice { margin-top: 0; }
  .optional-panel .right-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .optional-panel .culture-card { grid-column: 1 / -1; }
  .lesson-row { display: flex; width: 100%; text-align: left; }
  .lesson-row:hover { border-color: #648795; background: #f4f8fa; }
  .lesson-row.current { border: 2px solid #366b73; background: #f3f9f9; }
  .lesson-row > .icon { margin-left: auto; flex-shrink: 0; color: #365568; }
  .lesson-status { font-size: 12px; color: #365568; font-weight: 700; }
  .lesson-path { list-style: none; padding: 0; margin: 16px 0 0; }
  .path-help { font-size: 14px; color: #4d5d70; }
  .path-node.next { animation: none; box-shadow: 0 0 0 3px #366b7330; }
  .path-label { display: grid; gap: 3px; }
  .setup-intro h1 { font-size: clamp(26px, 3vw, 34px); }
  .word-result .result-trophy { display: none; }
  .round-word-progress { text-align: left; margin: 20px 0; border: 1px solid #d5dfeb; border-radius: 14px; padding: 18px; }
  .round-word-progress h3 { font-size: 17px; }
  .round-word-progress > p { margin: 8px 0 14px; font-size: 14px; color: #4d5d70; }
  .round-word-progress ul { list-style: none; margin: 0; padding: 0; }
  .round-word-progress li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; border-top: 1px solid #d5dfeb; padding: 12px 0; }
  .round-word-progress li:last-child { padding-bottom: 0; }
  .round-word-progress li > span { min-width: 0; flex: 1 1 160px; overflow-wrap: anywhere; }
  .round-word-progress strong, .round-word-progress small { display: block; }
  .round-word-progress strong { font-size: 15px; }
  .round-word-progress small { margin-top: 3px; font-size: 13px; color: #4d5d70; }
  .word-evidence strong { color: #365568; }
  .word-evidence.learned strong { color: #23543c; }
  .word-evidence-steps { display: flex; gap: 5px; margin-top: 8px; }
  .word-evidence-steps i { height: 5px; width: 28px; border-radius: 3px; background: #d5dfeb; }
  .word-evidence-steps .filled { background: #366b73; }
  .transfer-note { font-size: 14px; color: #365568; line-height: 1.7; padding: 16px; background: #edf5f6; border-left: 3px solid #648795; margin-top: 20px; text-align: left; }
  .more-words { grid-column: 1 / -1; justify-self: center; }
  .conversation-cue { background: #edf5f6; border-radius: 12px; padding: 20px; margin-top: 20px; text-align: left; }
  .conversation-cue h2 { font-size: 18px; margin: 0 0 8px; }
  .conversation-cue p { font-size: 16px; line-height: 1.7; color: #344d67; }
  .conversation-cue .partner-line { margin-top: 12px; }
  .partner-line strong { display: block; font-size: 14px; }
  .conversation-cue summary { padding: 10px 0; min-height: 44px; font-size: 14px; color: #294f73; cursor: pointer; }
  .recall-toggle { margin: 20px 0; }
  #phrase-model { margin: 18px 0; }
  .phrase-hint, .pronunciation-tip p, .self-practice-box p { font-size: 14px; }
  .speaking-card .eyebrow { margin-top: 16px; }
  .exercise-context { padding: 14px 16px; margin: 16px 0 22px; border-left: 3px solid #648795; background: #edf5f6; color: #365568; font-size: 15px; line-height: 1.7; }
  .team-outcomes { padding: 24px; background: #fff; border: 1px solid #d5dfeb; border-radius: 14px; margin-bottom: 24px; }
  .team-outcomes > p { margin: 12px 0; font-size: 15px; color: #4d5d70; }
  .team-outcomes ul { list-style: none; padding: 0; }
  .team-outcomes li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 14px 0; border-top: 1px solid #d5dfeb; font-size: 14px; }
  .team-outcomes li > span { flex: 1 1 250px; }
  .team-outcomes li .icon { display: inline-block; vertical-align: middle; }
  .study-choice[hidden], #phrase-model[hidden], .pronunciation-tip[hidden] { display: none; }

  @media (max-width: 1050px) {
    .hero-card { grid-template-columns: minmax(0, 1fr); }
    .hero-illustration { display: none; }
    .next-actions { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 980px) {
    .auth-topbar { margin: 0 24px 100px; }
  }
  @media (max-width: 820px) {
    .auth-page { grid-template-columns: minmax(0, 1fr); width: min(620px, 100%); gap: 28px; padding: 28px 24px 48px; }
    .auth-brand { margin-bottom: 28px; }
    .auth-steps { display: none; }
    .auth-promise { margin-top: 20px; }
    .auth-intro { font-size: 17px; }
    .auth-jump, .auth-welcome-start, .auth-promise, .auth-card-kicker { display: none; }
    .auth-brand { margin-bottom: 18px; }
    .auth-story h1 { font-size: 32px; }
    .auth-story h1 br { display: none; }
    .auth-story h1 > span { margin-left: 8px; }
    .auth-intro { margin: 12px 0; font-size: 16px; line-height: 1.6; }
    .right-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .culture-card { grid-column: 1 / -1; }
  }
  @media (max-width: 600px) {
    .topbar { position: sticky; top: 0; z-index: 15; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .topbar-tools { gap: 8px; }
    .topbar .top-stat { display: none; }
    .language-badge { display: flex; padding: 8px; }
    .language-badge > span:not(.language-flag) { display: none; }
    .page-heading h1 { font-size: 28px; }
    .page-heading { margin-bottom: 16px; }
    .page-subtitle { max-width: none; }
    .setup-selects, .study-goal-options { grid-template-columns: minmax(0, 1fr); }
    .study-batch-options { gap: 8px; }
    .study-choice { padding: 12px 10px; }
    .study-choice small { font-size: 12px; }
    .learning-setup { padding: 20px 16px; }
    .setup-actions, .setup-actions .button { width: 100%; }
    .hero-card { padding: 24px 20px; min-height: 0; }
    .hero-card h2 { font-size: 34px; }
    .hero-card .button { width: 100%; }
    .hero-card p { margin: 18px 0 22px; }
    .practice-grid, .right-rail, .vocabulary-grid { grid-template-columns: minmax(0, 1fr); }
    .practice-card { padding: 20px; }
    .right-rail { gap: 16px; }
    .daily-card, .word-of-day { padding: 24px; }
    .word-of-day .daily-word { font-size: 32px; }
    .vocabulary-card { padding: 20px; }
    .vocabulary-actions, .vocabulary-actions .button { width: 100%; }
    .word-mastery { max-width: none; }
    .path-row, .path-row.align-end { padding: 16px 12px; gap: 14px; }
    .path-label > strong { font-size: 16px; }
    .lesson-description { font-size: 14px; }
    .section-heading { flex-wrap: wrap; gap: 8px; }
    .exercise-body { padding: 26px 20px; }
    .lesson-modal-footer { padding: 20px; }
    .lesson-modal-footer .button { width: 100%; }
    .settings-dialog { padding: 24px 18px; }
    .goal-options { flex-wrap: wrap; }
    .goal-options label { min-width: 92px; }
    .auth-topbar { margin: 0 20px 100px; }
    .auth-card { padding: 24px 20px; }
    .auth-page { padding: 24px 16px 40px; }
    .auth-card h2 { font-size: 27px; }
    .auth-story h1 { font-size: 32px; }
    .auth-intro { font-size: 16px; }
    .page-footer { flex-wrap: wrap; }
    .level-picker { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 12px; margin-bottom: 16px; }
    .level-picker label { flex: 1 1 100%; }
    .level-picker > p { flex-basis: 100%; font-size: 13px; }
    .level-picker > p > span { display: none; }
    .focused-dashboard .hero-card { padding: 22px 18px; }
    .focused-dashboard .hero-card h2 { font-size: 26px; }
    .focused-dashboard .hero-card p { line-height: 1.6; margin: 10px 0 16px; }
    .learning-steps { gap: 10px; }
    .learning-steps li { display: block; font-size: 13px; }
    .learning-steps b { margin-bottom: 6px; }
    .optional-panel > section, .optional-panel > aside, .setup-options { padding: 16px 12px; }
    .optional-panel .right-rail { grid-template-columns: minmax(0, 1fr); }
    .round-word-progress { padding: 14px; }
    .lesson-row > .icon { display: none; }
    .team-outcomes, .conversation-cue { padding: 18px 16px; }
    .auth-page { gap: 20px; }
    .auth-story h1 { font-size: 28px; }
  }
}

/* Bestenliste (RANG-01..06) */
.leaderboard { border: 1px solid var(--line); border-radius: 13px; background: #ffffff; padding: 22px; margin: 0 0 22px; }
.leaderboard .section-heading h2 { display: flex; align-items: center; gap: 8px; }
.leaderboard-hint, .leaderboard-note, .leaderboard-mine, .leaderboard-status, .leaderboard-empty { font-size: 13px; color: #4d5d70; line-height: 1.5; margin: 8px 0; }
.leaderboard-join { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: #f4f7f9; border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.leaderboard-join p { flex: 1 1 240px; margin: 0; font-size: 13px; color: #4d5d70; }
.leaderboard-list { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 6px; }
.leaderboard-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.leaderboard-row.me { background: #eef6f1; border-color: #9cc3ac; }
.leaderboard-rank { font-weight: 700; text-align: center; }
.leaderboard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-name small, .leaderboard-xp small { color: #4d5d70; font-weight: 400; }
.leaderboard-xp { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .leaderboard { padding: 16px 14px; } }

/* Fragen & Antworten zuordnen (MATCH-01) */
.match-progress { margin: 0 0 10px; color: #4d5d70; font-size: 14px; }
.match-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match-col { display: flex; flex-direction: column; gap: 8px; }
.match-item { background: #fff; border: 1px solid #cedee8; border-bottom-width: 3px; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.3; text-align: left; color: #2a3e59; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; }
.match-item.picked { background: #e2eff7; border-color: #1a6fb5; }
.match-item.solved { background: #e6f3e9; border-color: #8dbf9a; color: #2f5d3b; cursor: default; }
.match-item.wrong { animation: match-shake .35s; border-color: #c0392b; }
.match-item:focus-visible { outline: 3px solid #1a6fb5; outline-offset: 2px; }
@media (hover: hover) { .match-item:hover:not(:disabled):not(.picked) { background: #eef5f9; } }
@media (max-width: 520px) { .match-board { gap: 6px; } .match-item { font-size: 14px; padding: 8px 9px; } }
@keyframes match-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .match-item.wrong { animation: none; } }

/* Nachsprechen & Erinnern (SPRECH-01) */
.echo-start { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #ffffff; border: 1px solid #d6e2e9; border-radius: 17px; padding: 16px 20px; margin-bottom: 18px; }
.echo-start p { margin: 4px 0 0; color: #658191; font-size: 14px; }
.echo-card .echo-german { margin: 22px 0 8px; }
.echo-card .echo-answer { font-size: 22px; font-weight: 700; margin: 6px 0 14px; }
.echo-card .exercise-progress { margin: 12px 0 0; }
.echo-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.echo-summary { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; display: grid; gap: 8px; }
.echo-summary li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; padding: 9px 12px; border-radius: 12px; background: #f3f7f9; }
.echo-summary li small { grid-column: 2; color: #658191; }
.echo-summary li.known { background: #e8f3dc; }
@media (max-width: 520px) { .echo-start .button { width: 100%; } }
.echo-phase { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-weight: 700; color: #4b6b7d; min-height: 28px; }
.echo-phase.listening { color: #c0412b; }
.echo-phase.listening svg { animation: echo-pulse 1s ease-in-out infinite; }
.echo-feedback { margin: 12px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-weight: 700; }
.echo-feedback.ok { color: #3f7d2a; }
.echo-feedback.miss { color: #8a5a1e; }
.echo-feedback small { font-weight: 400; color: #658191; }
@keyframes echo-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .echo-phase.listening svg { animation: none; } }
.echo-think { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #4b6b7d; }
.echo-think select { font: inherit; padding: 6px 8px; border-radius: 10px; border: 1px solid #d6e2e9; background: #fff; }
.echo-settings { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.echo-rounds-card { display: grid; gap: 14px; }
.echo-round-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.echo-round { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 6px; border-radius: 12px; border: 1px solid #d6e2e9; border-bottom-width: 3px; background: #fff; color: #3d5f72; font: inherit; font-weight: 700; cursor: pointer; }
.echo-round.next { background: #173247; border-color: #173247; color: #fff; }
.echo-round.done { background: #e8f3dc; border-color: #b9d8a2; color: #2f6a1d; }
@media (hover: hover) { .echo-round:hover { border-color: #79acc9; } }
.echo-count { font-weight: 700; color: #3d5f72; white-space: nowrap; }
.echo-settings-toggle summary { cursor: pointer; font-weight: 700; color: #4b6b7d; min-height: 44px; display: flex; align-items: center; }
.echo-settings-toggle .echo-settings { margin-top: 8px; }
.echo-done-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: #e8f3dc; color: #2f6a1d; font-weight: 700; }
@media (max-width: 520px) { .echo-round-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.echo-mode { display: inline-flex; border: 1px solid #d6e2e9; border-radius: 12px; overflow: hidden; }
.echo-mode button { font: inherit; font-weight: 700; padding: 6px 14px; border: 0; background: #fff; color: #4b6b7d; cursor: pointer; }
.echo-mode button.selected { background: #1c4257; color: #fff; }
.echo-xp { margin: 0 0 8px; font-weight: 700; color: #2f6a1d; }
.dialog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dialog-row { display: flex; align-items: center; gap: 8px; }
.dialog-row > div { flex: 1; display: grid; }
.dialog-row small { color: #4b6b7d; }
.dialog-row .echo-round { min-width: 52px; }
.dialog-lines { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.dialog-line { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; padding: 8px 12px; border-radius: 12px; background: #eef4f7; max-width: 92%; }
.dialog-line b { grid-row: span 2; color: #3d5f72; }
.dialog-line small { color: #4b6b7d; }
.dialog-line.mine { justify-self: end; background: #e8f3dc; }
.dialog-line.current { outline: 2px solid #173247; }
.dialog-line.unknown { background: #fbe9e3; }
.dialog-line { text-align: left; }