/* Presentation only. Public Pearl pages and exam workspaces retain their own layer. */
:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel), .energy-panel, .toast) {
  --bg: #fbfcfc;
  --bg-alt: #eef2f1;
  --card: #ffffff;
  --card-strong: #ffffff;
  --text: #242729;
  --ink: var(--text);
  --muted: #68736e;
  --quiet: #767f7b;
  --border: #dce3df;
  --border-strong: #becbc4;
  --gold: #e9bf54;
  --gold-dark: #8b6920;
  --gold-soft: #faf5e6;
  --green: #377257;
  --red: #9e4942;
  --danger: var(--red);
  --pearl-soft: #f0f5f3;
  --pearl-on-gold: #28241c;
  --pearl-gold-hover: #e1b546;
  --pearl-success: #e9f4ec;
  --pearl-danger: #fcf0ed;
  --pearl-shadow: 0 16px 48px #21303212;
  --workspace-canvas: var(--bg);
  --workspace-surface: var(--card);
  --workspace-line: var(--border);
  --workspace-teal: var(--green);
  --workspace-gold-ink: var(--gold-dark);
  --accent-violet: #a5bcb3;
  --accent-violet-soft: transparent;
  --accent-violet-rim: var(--border);
  --accent-violet-glow: transparent;
  --accent-gradient: var(--gold);
  --accent-gradient-hover: var(--pearl-gold-hover);
  --accent-outline-gradient: var(--border);
  --accent-outline-glow: none;
  --button-gold-fill: var(--gold);
  --button-gold-fill-hover: var(--pearl-gold-hover);
  --gold-violet-soft: var(--gold-soft);
  --gold-violet-active: var(--gold-soft);
  --shadow: var(--pearl-shadow);
  --shadow-soft: none;
  --focus-ring: 0 0 0 2px var(--gold-dark);
  --theme-control-bg: var(--card);
  --theme-hover-bg: var(--pearl-soft);
  --theme-raised-bg: var(--bg-alt);
  --theme-on-gold: var(--pearl-on-gold);
  --theme-selected-border: var(--gold-dark);
  --theme-success-bg: var(--pearl-success);
  --theme-success-text: var(--green);
  --theme-danger-bg: var(--pearl-danger);
  --theme-danger-text: var(--red);
  --theme-warning-bg: var(--gold-soft);
  --theme-warning-text: var(--gold-dark);
  color-scheme: light;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

:root[data-theme="dark"] #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel), .energy-panel, .toast) {
  --bg: #171b1c;
  --bg-alt: #29332f;
  --card: #202627;
  --card-strong: #29332f;
  --text: #edf1ef;
  --muted: #aab5b0;
  --quiet: #9aa8a1;
  --border: #394340;
  --border-strong: #657b6e;
  --gold: #e7c361;
  --gold-dark: #e7c361;
  --gold-soft: #353224;
  --green: #a4d8b8;
  --red: #f3aea6;
  --pearl-soft: #212e2a;
  --pearl-gold-hover: #f0ce76;
  --pearl-success: #243c2e;
  --pearl-danger: #412a2b;
  --pearl-shadow: 0 16px 48px #00000025;
  color-scheme: dark;
}

:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page)) { background: var(--bg); }

:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel)) :is(h1, h2, h3, h4, .eyebrow, button, label) { letter-spacing: 0; }

:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel)) :is(.card, .stat-card, .summary-card, .profile-popover, .review-menu-dropdown, .fluency-select-popover) {
  background: var(--card);
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: none;
  backdrop-filter: none;
}

:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel)) .btn {
  border-radius: 6px;
  box-shadow: none;
  font-weight: 600;
  transform: none;
  letter-spacing: 0;
}

:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel)) .btn-primary:not(:disabled) { border-color: var(--gold); background: var(--gold); color: var(--pearl-on-gold); }
:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel)) .btn-primary:hover:not(:disabled) { background: var(--pearl-gold-hover); }
:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel)) .btn-secondary:not(:disabled) { background: var(--card); border-color: var(--border-strong); color: var(--text); }
:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel)) :is(.btn:disabled, .btn:disabled:hover) { background: var(--bg-alt); border-color: var(--border); color: var(--quiet); box-shadow: none; }
:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel)) :is(.onboarding-input, .search-input, .filter-select, .fluency-select-trigger) { background: var(--card); border-color: var(--border-strong); color: var(--text); border-radius: 6px; box-shadow: none; }
:root #app :is(.student-workspace:not(.student-exam-workspace), .onboarding-shell, .admin-console, .marketing-shell:not(.pearl-page), :where(.settings-modal, .account-flow-dialog, .review-setup-modal, .review-create-modal, .review-delete-modal, .vocab-detail-panel)) :is(.icon-circle, .tiny-icon, .step-number) { background: var(--gold-soft); color: var(--gold-dark); box-shadow: none; }

/* Preserve shell geometry, collapse behavior, and mobile navigation handlers. */
:root #app .student-workspace:not(.student-exam-workspace) :is(.app-sidebar, .app-top-nav, .mobile-drawer-panel) { background: var(--card); border-color: var(--border); box-shadow: none; }
:root #app .student-workspace:not(.student-exam-workspace) .sidebar-link.active { background: var(--gold-soft); color: var(--text); box-shadow: inset 3px 0 var(--gold); }
:root #app .student-workspace:not(.student-exam-workspace) :is(.sidebar-badge, .tiny-pill) { background: var(--gold-soft); color: var(--gold-dark); border-color: transparent; }
:root #app .student-workspace:not(.student-exam-workspace) :is(.brand-name, .page-header h1, .student-home-hero h1) { font-weight: 650; }
:root #app .student-workspace:not(.student-exam-workspace) .page-subtitle { color: var(--muted); font-weight: 400; }

/* Full-width sections stay unframed; repeated items keep a modest boundary. */
:root #app .student-workspace:not(.student-exam-workspace) :is(.quick-launch-panel, .progress-dock-card, .student-next-card, .plan-detail-hero, .plan-section, .vocab-hero) { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 20px 0; }
:root #app .student-workspace:not(.student-exam-workspace) :is(.plan-section, .progress-dock-card, .student-next-card) { border-top: 1px solid var(--border); }
:root #app .student-workspace:not(.student-exam-workspace) :is(.quick-launch-card, .progress-dock-button, .plan-link-row, .vocabulary-card, .review-session-card, .review-flashcard, .practice-option, .student-homework-row, .task-row) { background: var(--card); border-color: var(--border); border-radius: 8px; box-shadow: none; transform: none; backdrop-filter: none; }
:root #app .student-workspace:not(.student-exam-workspace) :is(.quick-launch-card, .progress-dock-button, .plan-link-row):hover { background: var(--pearl-soft); border-color: var(--border-strong); box-shadow: none; transform: none; }
:root #app .student-workspace:not(.student-exam-workspace) :is(.quick-launch-card small, .plan-bullet p, .progress-dock-button small) { font-weight: 400; }
:root #app .student-workspace:not(.student-exam-workspace) :is(.progress-dock-button b, .student-homework-copy span, .plan-bullet span) { color: var(--gold-dark); }
:root #app .student-workspace:not(.student-exam-workspace) :is(.plan-status, .plan-empty-note, .review-card-preview, .review-new-card, .vocab-pill, .vocab-review-info) { background: var(--pearl-soft); border-color: var(--border); color: var(--muted); box-shadow: none; }
:root #app .student-workspace:not(.student-exam-workspace) .plan-status { padding-inline: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; font-weight: 400; }
:root #app .student-workspace:not(.student-exam-workspace) :is(.review-flashcard.revealed, .review-create-option, .review-option) { background: var(--pearl-soft); border-color: var(--border-strong); }
:root #app .student-workspace:not(.student-exam-workspace) .review-response-btn { background: var(--card); border-color: var(--border); color: var(--text); }
:root #app .student-workspace:not(.student-exam-workspace) .review-response-btn.selected { background: var(--gold-soft); border-color: var(--gold-dark); }
:root #app .student-workspace:not(.student-exam-workspace) :is(.stats-grid, .progress-grid, .overview-grid) > .stat-card { background: transparent; border: 0; border-left: 1px solid var(--border); border-radius: 0; }
:root #app .student-workspace:not(.student-exam-workspace) :is(.stat-title, .stat-note) { color: var(--muted); }
:root #app .student-workspace:not(.student-exam-workspace) :is(.bar-shell, .progress-track, .day-dot) { background: var(--bg-alt); }
:root #app .student-workspace:not(.student-exam-workspace) .day-dot.active { background: var(--gold-soft); border-color: var(--gold-dark); color: var(--gold-dark); }
:root #app .student-workspace:not(.student-exam-workspace) .day-dot.current::after { border-color: var(--green); box-shadow: none; }
:root #app .student-workspace:not(.student-exam-workspace) .bar-fill { background: var(--accent, var(--gold)); }
:root #app .student-workspace:not(.student-exam-workspace) .xp-experience { padding-block: 24px; }
:root #app .student-workspace:not(.student-exam-workspace) .xp-summary { padding-block: 16px; border-block: 1px solid var(--border); }

/* Chat controls and request state are unchanged; only their surfaces are restyled. */
:root #app .student-tutor-workspace .tutor-workspace .tw-layout { grid-template-columns: 192px minmax(0, 1fr); gap: 24px; }
:root #app .student-tutor-workspace .tutor-workspace .tw-sidebar { padding-right: 16px; }
:root #app .student-tutor-workspace .tutor-workspace .tw-composer { background: var(--card); border-color: var(--border-strong); box-shadow: none; }
:root #app .student-tutor-workspace .tutor-workspace .tw-composer:focus-within { border-color: var(--gold-dark); box-shadow: none; }
:root #app .student-tutor-workspace .tutor-workspace .tw-starters button { background: transparent; border-color: var(--border); color: var(--muted); }
:root #app .student-tutor-workspace .tutor-workspace .tw-starters button[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold-dark); color: var(--text); }
:root #app .student-tutor-workspace .tutor-workspace .tutor-message-user { background: var(--pearl-soft); border-color: var(--border); color: var(--text); }
:root #app .student-tutor-workspace .tutor-workspace .tw-send:not(:disabled) { background: var(--gold); color: var(--pearl-on-gold); }

/* Existing auth forms and age/consent gates, without the old decorative frame. */
:root #app .onboarding-shell { padding: 24px 24px 40px; gap: 20px; }
:root #app .onboarding-shell .onboarding-top { width: min(1200px, 100%); margin: 0 auto 24px; }
:root #app .onboarding-shell .auth-brand-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
:root #app .onboarding-shell .brand-name { font-size: 22px; font-weight: 650; }
:root #app .onboarding-shell .brand-subtitle { color: var(--muted); font-size: 12px; font-weight: 400; }
:root #app .onboarding-shell .onboarding-card.card { background: transparent; border: 0; box-shadow: none; padding: 24px 0; overflow: visible; }
:root #app .onboarding-shell .signin-card { max-width: 480px; }
:root #app .onboarding-shell .onboarding-card::before { display: none; }
:root #app .onboarding-shell .onboarding-card > .mascot-card-corner { position: static; justify-self: start; width: 64px; margin: 0 0 12px; }
:root #app .onboarding-shell .mascot-card-corner img { width: 64px; height: 64px; object-fit: contain; }
:root #app .onboarding-shell .onboarding-header { padding: 0; }
:root #app .onboarding-shell h1 { font-size: 30px; font-weight: 650; line-height: 1.25; }
:root #app .onboarding-shell h2 { font-size: 22px; line-height: 1.35; }
:root #app .onboarding-shell :is(.onboarding-subtitle, .small-text) { color: var(--muted); font-weight: 400; }
:root #app .onboarding-shell .onboarding-input { min-height: 48px; font-size: 16px; }
:root #app .onboarding-shell .onboarding-actions .btn { min-height: 46px; }
:root #app .onboarding-shell .auth-link-row { font-size: 13px; }
:root #app .onboarding-shell :is(.beta-age-option, .beta-signup-notice, .signup-confirm-summary, .auth-step-preview) { background: var(--pearl-soft); border-color: var(--border); color: var(--text); box-shadow: none; }
:root #app .onboarding-shell .beta-age-option:has(input:checked) { background: var(--gold-soft); border-color: var(--gold-dark); }

:root #app .student-onboarding .so-choice { border-color: var(--border); }
:root #app .student-onboarding .so-choice:has(input:checked) { border-color: var(--gold-dark); box-shadow: none; }
:root #app .student-onboarding .so-step { padding-top: 12px; }
:root #app .settings-modal.account-modal { background: var(--card); border-color: var(--border); box-shadow: var(--pearl-shadow); }
:root #app .settings-modal .settings-section-icon { color: var(--green); }
:root #app .energy-panel { background: var(--card); border-color: var(--border); box-shadow: var(--pearl-shadow); }
:root #app .toast { background: var(--card); border-color: var(--border-strong); box-shadow: var(--pearl-shadow); }

/* Admin commands retain their existing confirmation, authorization, and pending UI. */
:root #app .admin-console .admin-console-header { background: var(--card); border-color: var(--border); box-shadow: none; }
:root #app .admin-console .admin-console-tabs { background: var(--card); }
:root #app .admin-console .admin-console-main { max-width: 1440px; margin-inline: auto; padding: 28px; }
:root #app .admin-console :is(.admin-console-dialog, .admin-console-menu) { background: var(--card); border-color: var(--border); box-shadow: var(--pearl-shadow); }
:root #app .admin-console .admin-console-metrics > div + div { border-left: 1px solid var(--border); }
:root #app .admin-console tbody tr:hover { background: var(--pearl-soft); }
:root #app .admin-console .owner-energy-recipients button:not(:disabled):hover { background: var(--pearl-soft); }
:root #app .admin-console .admin-console-title { padding-bottom: 20px; border-bottom: 1px solid var(--border); }

/* Legacy approval and availability notices share the public palette, not new behavior. */
:root #app .marketing-shell:not(.pearl-page) { --public-canvas: var(--bg); --public-surface: var(--card); --public-text: var(--text); --public-muted: var(--muted); --public-divider: var(--border); }
:root #app .marketing-shell:not(.pearl-page) :is(.public-nav, .public-nav-inner, .public-header) { background: var(--card); border-color: var(--border); box-shadow: var(--pearl-shadow); }
:root #app .marketing-shell:not(.pearl-page) :is(.beta-flow-card, .beta-waitlist-card, .public-card) { background: transparent; border: 0; box-shadow: none; }

@media (max-width: 1080px) {
  :root #app .student-tutor-workspace .tutor-workspace .tw-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 820px) {
  :root #app .admin-console .admin-console-main { padding: 24px 16px; }
}

@media (max-width: 540px) {
  :root #app .onboarding-shell { padding: 20px 20px 32px; }
  :root #app .onboarding-shell h1 { font-size: 26px; }
  :root #app .onboarding-shell .auth-create-grid { grid-template-columns: minmax(0, 1fr); }
  :root #app .student-workspace:not(.student-exam-workspace) :is(.plan-grid, .plan-section-grid, .plan-week-steps) { grid-template-columns: minmax(0, 1fr); }
}