/* Runtime appearance layer. Loaded after legacy CSS so admin choices remain predictable. */
:root {
  --appearance-global-background: #f4f7fb;
  --appearance-global-background-image: linear-gradient(135deg, #f4f7fb, #fde7c2);
  --appearance-global-surface: #ffffff;
  --appearance-global-surface-alt: #eaf0f7;
  --appearance-global-text: #071426;
  --appearance-global-muted-text: #4a6078;
  --appearance-global-border: #c7d5e5;
  --appearance-global-primary: #f59e0b;
  --appearance-global-primary-text: #071426;
  --appearance-global-accent: #f97316;
  --appearance-global-accent-text: #071426;
  --appearance-global-title-size: 24;
  --appearance-global-body-size: 15;

  /* Pre-React navigation fallback. Runtime admin tokens replace these values. */
  --appearance-navigation-background: #ffffff;
  --appearance-navigation-background-image: none;
  --appearance-navigation-surface: #ffffff;
  --appearance-navigation-surface-alt: #f1f5f9;
  --appearance-navigation-text: #0f172a;
  --appearance-navigation-muted-text: #475569;
  --appearance-navigation-border: #e2e8f0;
  --appearance-navigation-primary: #7c3aed;
  --appearance-navigation-primary-text: #ffffff;

  /* Global fallbacks for current appearance tokens (inherited by portals and overlays) */
  --appearance-current-background: var(--appearance-global-background);
  --appearance-current-background-image: var(--appearance-global-background-image);
  --appearance-current-surface: var(--appearance-global-surface);
  --appearance-current-surface-alt: var(--appearance-global-surface-alt);
  --appearance-current-text: var(--appearance-global-text);
  --appearance-current-muted-text: var(--appearance-global-muted-text);
  --appearance-current-border: var(--appearance-global-border);
  --appearance-current-primary: var(--appearance-global-primary);
  --appearance-current-primary-text: var(--appearance-global-primary-text);
  --appearance-current-accent: var(--appearance-global-accent);
  --appearance-current-accent-text: var(--appearance-global-accent-text);
  --appearance-current-title-size: var(--appearance-global-title-size);
  --appearance-current-body-size: var(--appearance-global-body-size);
}

/* Stable pre-React fallback. Runtime section tokens replace these after startup. */
html.dark {
  --appearance-global-background: #071426;
  --appearance-global-background-image: linear-gradient(135deg, #071426, #3a2a16);
  --appearance-global-surface: #0b1b30;
  --appearance-global-surface-alt: #132a46;
  --appearance-global-text: #fff7ed;
  --appearance-global-muted-text: #b8c6d8;
  --appearance-global-border: #29415f;
  --appearance-global-primary: #f59e0b;
  --appearance-global-primary-text: #071426;
  --appearance-global-accent: #f97316;
  --appearance-global-accent-text: #071426;

  /* Pre-React navigation fallback. Runtime admin tokens replace these values. */
  --appearance-navigation-background: #071426;
  --appearance-navigation-background-image: radial-gradient(circle at 18% 0%, rgba(245, 158, 11, 0.05), transparent 11rem),
    radial-gradient(circle at 100% 12%, rgba(249, 115, 22, 0.04), transparent 12rem),
    linear-gradient(180deg, #071426 0%, #0b1b30 56%, #071426 100%);
  --appearance-navigation-surface: #0b1b30;
  --appearance-navigation-surface-alt: #132a46;
  --appearance-navigation-text: #fff7ed;
  --appearance-navigation-muted-text: #b8c6d8;
  --appearance-navigation-border: rgba(245, 158, 11, 0.15);
  --appearance-navigation-primary: #f59e0b;
  --appearance-navigation-primary-text: #071426;
}

html,
body,
#root,
.app-shell,
.app-main-content {
  background-color: var(--appearance-global-background) !important;
}

body,
.app-shell {
  color: var(--appearance-global-text);
}

.app-shell {
  background-image: var(--appearance-global-background-image) !important;
}

@media (max-width: 920px), (pointer: coarse) {
  .app-shell,
  .app-route-frame,
  .appearance-landing-page,
  .appearance-auth-page {
    background-image: none !important;
  }
}

/* Final light/dark contract. Content text follows the selected mode while
   brand banners and action controls keep their own contrast colors. */
html[data-appearance-mode='light'] .app-route-frame :where(
  h1, h2, h3, h4, h5, h6, p, label, legend, dt, dd
):not(.home-hero-banner *):not(button *):not([role='button'] *) {
  color: var(--appearance-current-text, #071426);
}

html[data-appearance-mode='dark'] .app-route-frame :where(
  h1, h2, h3, h4, h5, h6, p, label, legend, dt, dd
):not(.home-hero-banner *):not(button *):not([role='button'] *) {
  color: var(--appearance-current-text, #fff7ed);
}

html[data-appearance-mode='light'] .app-route-frame :where(
  .text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500,
  .dark\:text-gray-400, .dark\:text-slate-400
) {
  color: var(--appearance-current-muted-text, #4a6078) !important;
}

/* New-account welcome: one lightweight surface shared by desktop and mobile. */
.learning-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 20, 38, 0.82);
  overscroll-behavior: contain;
}

.learning-welcome-panel {
  width: min(100%, 520px);
  padding: 32px;
  border: 1px solid var(--appearance-current-border, #29415f);
  border-radius: 16px;
  background: var(--appearance-current-surface, #0b1b30);
  color: var(--appearance-current-text, #fff7ed);
  text-align: center;
  contain: layout paint;
}

.learning-welcome-icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  place-items: center;
  border: 1px solid var(--appearance-current-border, #29415f);
  border-radius: 16px;
  background: var(--appearance-current-surface-alt, #10243d);
  color: var(--appearance-current-primary, #f59e0b);
}

.learning-welcome-name {
  margin: 0 0 8px;
  color: var(--appearance-current-primary, #f59e0b);
  font-weight: 800;
}

.learning-welcome-panel h1 {
  margin: 0;
  color: var(--appearance-current-text, #fff7ed);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.35;
  text-wrap: balance;
}

.learning-welcome-panel > p:last-of-type {
  max-width: 42ch;
  margin: 16px auto 0;
  color: var(--appearance-current-muted-text, #b8c7d9);
  font-size: 1rem;
  line-height: 1.8;
  text-wrap: pretty;
}

.learning-welcome-action {
  display: flex;
  width: 100%;
  min-height: 50px;
  margin-top: 28px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: var(--appearance-current-primary, #f59e0b);
  color: var(--appearance-current-primary-text, #071426);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.learning-welcome-action:hover {
  background: var(--appearance-current-accent, #f97316);
}

.learning-welcome-action:active {
  transform: translateY(1px);
}

.learning-welcome-action:focus-visible {
  outline: 3px solid var(--appearance-current-primary, #f59e0b);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .learning-welcome-overlay {
    padding: 16px;
    background: rgba(7, 20, 38, 0.86);
  }

  .learning-welcome-panel {
    width: 100%;
    padding: 24px 20px;
    border-radius: 14px;
    box-shadow: none;
  }

  .learning-welcome-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 14px;
  }

  .learning-welcome-panel h1 {
    font-size: 1.5rem;
  }

  .learning-welcome-panel > p:last-of-type {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  .learning-welcome-action {
    min-height: 52px;
    margin-top: 24px;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-welcome-action {
    transition: none;
  }
}

html[data-appearance-mode='dark'] .app-route-frame :where(
  .text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500,
  .dark\:text-gray-400, .dark\:text-slate-400
) {
  color: var(--appearance-current-muted-text, #b8c6d8) !important;
}

html[data-appearance-mode='light'] .app-route-frame :where(input, textarea, select) {
  background: var(--appearance-current-surface, #ffffff) !important;
  color: var(--appearance-current-text, #071426) !important;
  caret-color: var(--appearance-current-accent, #f97316);
}

html[data-appearance-mode='dark'] .app-route-frame :where(input, textarea, select) {
  background: var(--appearance-current-surface, #0b1b30) !important;
  color: var(--appearance-current-text, #fff7ed) !important;
  caret-color: var(--appearance-current-primary, #f59e0b);
}

@media (max-width: 920px), (pointer: coarse) {
  /* Mobile uses one flat paint layer per element. No blur, glow or stacked
     decorative backgrounds are allowed in the content area. */
  html.mobile-lite-mode :where(
    .app-shell,
    .app-main-content,
    .app-route-frame,
    .appearance-landing-page,
    .appearance-auth-page
  ) {
    background-color: var(--appearance-current-background, var(--appearance-global-background)) !important;
    background-image: none !important;
  }

  html.mobile-lite-mode :where(
    .home-stat-card,
    .home-quick-actions,
    .home-quick-action-card,
    .home-heatmap-card,
    .home-status-breakdown,
    .home-status-tile,
    .home-review-chart,
    .home-subscription-card,
    .home-upsell-card,
    .appearance-story-card,
    .appearance-folder-card,
    .folders-dashboard-stat,
    .learning-path-unit,
    .learning-path-lesson,
    .learning-mobile-summary,
    .appearance-subscription-plan,
    .subscription-paid-plan-card,
    .faq-card-container,
    .surface-card
  ) {
    background: var(--appearance-current-surface, var(--appearance-global-surface)) !important;
    border: 1px solid var(--appearance-current-border, var(--appearance-global-border)) !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.mobile-lite-mode :where(
    .subscription-plan-gradient,
    .subscription-plan-glow,
    .mobile-sidebar-profile-glow,
    .home-hero-banner > .absolute,
    .home-hero-banner [class*='blur-']
  ) {
    display: none !important;
  }

  html.mobile-lite-mode .home-hero-banner {
    background: #0b1b30 !important;
    border: 1px solid #29415f !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .home-mobile-quote {
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid #29415f !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .subscription-active-card,
  html.mobile-lite-mode .learning-path-access-notice {
    background: var(--appearance-current-surface-alt, var(--appearance-global-surface-alt)) !important;
    color: var(--appearance-current-text, var(--appearance-global-text)) !important;
    border: 1px solid var(--appearance-current-border, var(--appearance-global-border)) !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode :where(
    .mobile-sidebar-shell,
    .mobile-sidebar-header,
    .mobile-sidebar-bottom,
    .mobile-sidebar-profile-card,
    .mobile-sidebar-link,
    .mobile-sidebar-language,
    .mobile-sidebar-extra-button
  ) {
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Mobile is intentionally flat: avoid extra compositor layers on weak GPUs. */
  html.mobile-lite-mode body #root,
  html.mobile-lite-mode body #root * {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

.app-route-frame {
  --appearance-current-background: var(--appearance-global-background);
  --appearance-current-background-image: var(--appearance-global-background-image);
  --appearance-current-surface: var(--appearance-global-surface);
  --appearance-current-surface-alt: var(--appearance-global-surface-alt);
  --appearance-current-text: var(--appearance-global-text);
  --appearance-current-muted-text: var(--appearance-global-muted-text);
  --appearance-current-border: var(--appearance-global-border);
  --appearance-current-primary: var(--appearance-global-primary);
  --appearance-current-primary-text: var(--appearance-global-primary-text);
  --appearance-current-accent: var(--appearance-global-accent);
  --appearance-current-accent-text: var(--appearance-global-accent-text);
  --appearance-current-title-size: var(--appearance-global-title-size);
  --appearance-current-body-size: var(--appearance-global-body-size);
  min-height: 100%;
  background-color: var(--appearance-current-background) !important;
  background-image: var(--appearance-current-background-image) !important;
  color: var(--appearance-current-text);
  font-size: calc(var(--appearance-current-body-size) * 1px);
}

/* The main content owns a viewport min-height, not a fixed height. Inherit that
   contract so section backgrounds continue below short and empty content. */
.app-route-frame:not(.mobile-ai-route) {
  min-height: inherit;
}

[data-mobile-route='home'] {
  --appearance-current-background: var(--appearance-home-background);
  --appearance-current-background-image: var(--appearance-home-background-image);
  --appearance-current-surface: var(--appearance-home-surface);
  --appearance-current-surface-alt: var(--appearance-home-surface-alt);
  --appearance-current-text: var(--appearance-home-text);
  --appearance-current-muted-text: var(--appearance-home-muted-text);
  --appearance-current-border: var(--appearance-home-border);
  --appearance-current-primary: var(--appearance-home-primary);
  --appearance-current-primary-text: var(--appearance-home-primary-text);
  --appearance-current-accent: var(--appearance-home-accent);
  --appearance-current-accent-text: var(--appearance-home-accent-text);
  --appearance-current-title-size: var(--appearance-home-title-size);
  --appearance-current-body-size: var(--appearance-home-body-size);
}

[data-mobile-route='learning_path'] {
  --appearance-current-background: var(--appearance-learning-path-background);
  --appearance-current-background-image: var(--appearance-learning-path-background-image);
  --appearance-current-surface: var(--appearance-learning-path-surface);
  --appearance-current-surface-alt: var(--appearance-learning-path-surface-alt);
  --appearance-current-text: var(--appearance-learning-path-text);
  --appearance-current-muted-text: var(--appearance-learning-path-muted-text);
  --appearance-current-border: var(--appearance-learning-path-border);
  --appearance-current-primary: var(--appearance-learning-path-primary);
  --appearance-current-primary-text: var(--appearance-learning-path-primary-text);
  --appearance-current-accent: var(--appearance-learning-path-accent);
  --appearance-current-accent-text: var(--appearance-learning-path-accent-text);
  --appearance-current-title-size: var(--appearance-learning-path-title-size);
  --appearance-current-body-size: var(--appearance-learning-path-body-size);
}

[data-mobile-route='cards'] {
  --appearance-current-background: var(--appearance-cards-background);
  --appearance-current-background-image: var(--appearance-cards-background-image);
  --appearance-current-surface: var(--appearance-cards-surface);
  --appearance-current-surface-alt: var(--appearance-cards-surface-alt);
  --appearance-current-text: var(--appearance-cards-text);
  --appearance-current-muted-text: var(--appearance-cards-muted-text);
  --appearance-current-border: var(--appearance-cards-border);
  --appearance-current-primary: var(--appearance-cards-primary);
  --appearance-current-primary-text: var(--appearance-cards-primary-text);
  --appearance-current-accent: var(--appearance-cards-accent);
  --appearance-current-accent-text: var(--appearance-cards-accent-text);
  --appearance-current-title-size: var(--appearance-cards-title-size);
  --appearance-current-body-size: var(--appearance-cards-body-size);
}

[data-mobile-route='stories'] {
  --appearance-current-background: var(--appearance-stories-background);
  --appearance-current-background-image: var(--appearance-stories-background-image);
  --appearance-current-surface: var(--appearance-stories-surface);
  --appearance-current-surface-alt: var(--appearance-stories-surface-alt);
  --appearance-current-text: var(--appearance-stories-text);
  --appearance-current-muted-text: var(--appearance-stories-muted-text);
  --appearance-current-border: var(--appearance-stories-border);
  --appearance-current-primary: var(--appearance-stories-primary);
  --appearance-current-primary-text: var(--appearance-stories-primary-text);
  --appearance-current-accent: var(--appearance-stories-accent);
  --appearance-current-accent-text: var(--appearance-stories-accent-text);
  --appearance-current-title-size: var(--appearance-stories-title-size);
  --appearance-current-body-size: var(--appearance-stories-body-size);
}

[data-mobile-route='sentences'] {
  --appearance-current-background: var(--appearance-sentences-background);
  --appearance-current-background-image: var(--appearance-sentences-background-image);
  --appearance-current-surface: var(--appearance-sentences-surface);
  --appearance-current-surface-alt: var(--appearance-sentences-surface-alt);
  --appearance-current-text: var(--appearance-sentences-text);
  --appearance-current-muted-text: var(--appearance-sentences-muted-text);
  --appearance-current-border: var(--appearance-sentences-border);
  --appearance-current-primary: var(--appearance-sentences-primary);
  --appearance-current-primary-text: var(--appearance-sentences-primary-text);
  --appearance-current-accent: var(--appearance-sentences-accent);
  --appearance-current-accent-text: var(--appearance-sentences-accent-text);
  --appearance-current-title-size: var(--appearance-sentences-title-size);
  --appearance-current-body-size: var(--appearance-sentences-body-size);
}

[data-mobile-route='dictionary'] {
  --appearance-current-background: var(--appearance-dictionary-background);
  --appearance-current-background-image: var(--appearance-dictionary-background-image);
  --appearance-current-surface: var(--appearance-dictionary-surface);
  --appearance-current-surface-alt: var(--appearance-dictionary-surface-alt);
  --appearance-current-text: var(--appearance-dictionary-text);
  --appearance-current-muted-text: var(--appearance-dictionary-muted-text);
  --appearance-current-border: var(--appearance-dictionary-border);
  --appearance-current-primary: var(--appearance-dictionary-primary);
  --appearance-current-primary-text: var(--appearance-dictionary-primary-text);
  --appearance-current-accent: var(--appearance-dictionary-accent);
  --appearance-current-accent-text: var(--appearance-dictionary-accent-text);
  --appearance-current-title-size: var(--appearance-dictionary-title-size);
  --appearance-current-body-size: var(--appearance-dictionary-body-size);
}

[data-mobile-route='ai_assistant'] {
  --appearance-current-background: var(--appearance-ai-assistant-background);
  --appearance-current-background-image: var(--appearance-ai-assistant-background-image);
  --appearance-current-surface: var(--appearance-ai-assistant-surface);
  --appearance-current-surface-alt: var(--appearance-ai-assistant-surface-alt);
  --appearance-current-text: var(--appearance-ai-assistant-text);
  --appearance-current-muted-text: var(--appearance-ai-assistant-muted-text);
  --appearance-current-border: var(--appearance-ai-assistant-border);
  --appearance-current-primary: var(--appearance-ai-assistant-primary);
  --appearance-current-primary-text: var(--appearance-ai-assistant-primary-text);
  --appearance-current-accent: var(--appearance-ai-assistant-accent);
  --appearance-current-accent-text: var(--appearance-ai-assistant-accent-text);
  --appearance-current-title-size: var(--appearance-ai-assistant-title-size);
  --appearance-current-body-size: var(--appearance-ai-assistant-body-size);
}

[data-mobile-route='games'] {
  --appearance-current-background: var(--appearance-games-background);
  --appearance-current-background-image: var(--appearance-games-background-image);
  --appearance-current-surface: var(--appearance-games-surface);
  --appearance-current-surface-alt: var(--appearance-games-surface-alt);
  --appearance-current-text: var(--appearance-games-text);
  --appearance-current-muted-text: var(--appearance-games-muted-text);
  --appearance-current-border: var(--appearance-games-border);
  --appearance-current-primary: var(--appearance-games-primary);
  --appearance-current-primary-text: var(--appearance-games-primary-text);
  --appearance-current-accent: var(--appearance-games-accent);
  --appearance-current-accent-text: var(--appearance-games-accent-text);
  --appearance-current-title-size: var(--appearance-games-title-size);
  --appearance-current-body-size: var(--appearance-games-body-size);
}

.appearance-landing-page {
  background-color: var(--appearance-home-background) !important;
  background-image: var(--appearance-home-background-image) !important;
  color: var(--appearance-home-text) !important;
  font-size: calc(var(--appearance-home-body-size) * 1px);
}

.appearance-landing-page > header {
  background: var(--appearance-navigation-surface) !important;
  color: var(--appearance-navigation-text) !important;
  border-color: var(--appearance-navigation-border) !important;
}

.appearance-landing-page > main > section:not(.appearance-subscriptions-section) {
  background-color: transparent !important;
}

.appearance-landing-page > main > section:not(.appearance-subscriptions-section) :where(h1, h2, h3) {
  color: var(--appearance-home-text) !important;
}

.appearance-landing-page > main > section:not(.appearance-subscriptions-section) :where(p, li) {
  color: var(--appearance-home-muted-text);
}

.appearance-auth-page {
  background-color: var(--appearance-auth-background) !important;
  background-image: var(--appearance-auth-background-image) !important;
  color: var(--appearance-auth-text) !important;
  font-size: calc(var(--appearance-auth-body-size) * 1px);
}

.appearance-auth-brand {
  background: var(--appearance-auth-surface-alt) !important;
}

.appearance-auth-form-shell {
  background: transparent !important;
}

.appearance-auth-page :where(h1, h2, label) {
  color: var(--appearance-auth-text) !important;
}

.appearance-auth-page :where(p, .text-gray-400, .text-gray-500) {
  color: var(--appearance-auth-muted-text) !important;
}

.appearance-auth-page input:not([type='checkbox']):not([type='radio']) {
  background: var(--appearance-auth-surface) !important;
  color: var(--appearance-auth-text) !important;
  border-color: var(--appearance-auth-border) !important;
}

.appearance-auth-page input:focus {
  border-color: var(--appearance-auth-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--appearance-auth-primary) 22%, transparent) !important;
}

.appearance-section-subscriptions,
.appearance-subscriptions-section {
  --appearance-current-background: var(--appearance-subscriptions-background);
  --appearance-current-background-image: var(--appearance-subscriptions-background-image);
  --appearance-current-surface: var(--appearance-subscriptions-surface);
  --appearance-current-surface-alt: var(--appearance-subscriptions-surface-alt);
  --appearance-current-text: var(--appearance-subscriptions-text);
  --appearance-current-muted-text: var(--appearance-subscriptions-muted-text);
  --appearance-current-border: var(--appearance-subscriptions-border);
  --appearance-current-primary: var(--appearance-subscriptions-primary);
  --appearance-current-primary-text: var(--appearance-subscriptions-primary-text);
  --appearance-current-accent: var(--appearance-subscriptions-accent);
  --appearance-current-accent-text: var(--appearance-subscriptions-accent-text);
  --appearance-current-title-size: var(--appearance-subscriptions-title-size);
  --appearance-current-body-size: var(--appearance-subscriptions-body-size);
}

.appearance-section-subscriptions {
  background-color: var(--appearance-current-background) !important;
  background-image: var(--appearance-current-background-image) !important;
  color: var(--appearance-current-text) !important;
}

.appearance-subscriptions-section {
  background-color: var(--appearance-current-background) !important;
  background-image: var(--appearance-current-background-image) !important;
  color: var(--appearance-current-text) !important;
  border-color: var(--appearance-current-border) !important;
}

.appearance-subscriptions-section :where(h2, h3) {
  color: var(--appearance-current-text) !important;
}

.appearance-subscriptions-section :where(p, li) {
  color: var(--appearance-current-muted-text);
}

.appearance-subscription-plan {
  background: var(--appearance-current-surface) !important;
  color: var(--appearance-current-text) !important;
  border-color: var(--appearance-current-border) !important;
  box-shadow: none !important;
}

.appearance-subscription-plan :where(.subscription-plan-title, .subscription-plan-price, .subscription-plan-feature-text) {
  color: var(--appearance-current-text) !important;
}

.appearance-subscription-plan :where(.subscription-plan-description, .subscription-plan-feature-sub, .subscription-plan-original) {
  color: var(--appearance-current-muted-text) !important;
}

.appearance-subscription-plan .subscription-plan-cta,
.appearance-subscriptions-section > div button:not([disabled]) {
  border-color: var(--appearance-current-primary) !important;
}

.appearance-story-card,
.appearance-folder-card {
  background: var(--appearance-current-surface) !important;
  border-color: var(--appearance-current-border) !important;
  color: var(--appearance-current-text) !important;
}

.appearance-story-card-body {
  background: var(--appearance-current-surface) !important;
}

.appearance-story-card-body h3,
.appearance-folder-card h3 {
  color: var(--appearance-current-text) !important;
}

.appearance-story-card-body p,
.appearance-folder-card :where(.text-gray-400, .text-gray-500) {
  color: var(--appearance-current-muted-text) !important;
}

.story-detail-page {
  background-color: var(--appearance-stories-background) !important;
  background-image: var(--appearance-stories-background-image) !important;
  color: var(--appearance-stories-text) !important;
}

/* Remaining learning surfaces share one readable typography contract. Legacy
   utility colours are intentionally overridden here so light mode never keeps
   pale dark-mode copy, while every route still uses its admin-owned tokens. */
.appearance-section-stories,
.appearance-section-dictionary,
.appearance-section-ai-assistant,
.appearance-section-games,
.appearance-section-community,
.appearance-section-sentences {
  color: var(--appearance-current-text) !important;
}

.appearance-section-stories :where(h1, h2, h3, h4, label, strong),
.appearance-section-dictionary :where(h1, h2, h3, h4, label, strong),
.appearance-section-ai-assistant :where(h1, h2, h3, h4, label, strong),
.appearance-section-games :where(h1, h2, h3, h4, label, strong),
.appearance-section-community :where(h1, h2, h3, h4, label, strong),
.appearance-section-sentences :where(h1, h2, h3, h4, label, strong) {
  color: var(--appearance-current-text) !important;
}

.appearance-section-stories :where(p, li, .text-gray-400, .text-gray-500, .text-gray-600, .text-slate-400, .text-slate-500, .text-slate-600),
.appearance-section-dictionary :where(p, li, .text-gray-400, .text-gray-500, .text-gray-600, .text-slate-400, .text-slate-500, .text-slate-600),
.appearance-section-ai-assistant :where(p, li, .text-gray-400, .text-gray-500, .text-gray-600, .text-slate-400, .text-slate-500, .text-slate-600),
.appearance-section-games :where(p, li, .text-gray-400, .text-gray-500, .text-gray-600, .text-slate-400, .text-slate-500, .text-slate-600),
.appearance-section-community :where(p, li, .text-gray-400, .text-gray-500, .text-gray-600, .text-slate-400, .text-slate-500, .text-slate-600),
.appearance-section-sentences :where(p, li, .text-gray-400, .text-gray-500, .text-gray-600, .text-slate-400, .text-slate-500, .text-slate-600) {
  color: var(--appearance-current-muted-text) !important;
  opacity: 1 !important;
}

.appearance-section-dictionary :where(input, textarea),
.appearance-section-ai-assistant :where(input, textarea),
.appearance-section-community :where(input, textarea),
.appearance-section-sentences :where(input, textarea) {
  color: var(--appearance-current-text) !important;
  caret-color: var(--appearance-current-primary);
}

.appearance-section-dictionary :where(input, textarea)::placeholder,
.appearance-section-ai-assistant :where(input, textarea)::placeholder,
.appearance-section-community :where(input, textarea)::placeholder,
.appearance-section-sentences :where(input, textarea)::placeholder {
  color: var(--appearance-current-muted-text) !important;
  opacity: 1 !important;
}

.dictionary-view-shell > header svg,
.appearance-section-dictionary [class*='text-violet'],
.appearance-section-dictionary [class*='text-indigo'] {
  color: var(--appearance-current-primary) !important;
}

.dictionary-view-shell > header > div > div,
.appearance-section-dictionary form > div,
.appearance-section-dictionary article,
.appearance-section-dictionary [class*='dark:bg-gray-900'] {
  background: var(--appearance-current-surface) !important;
  border-color: var(--appearance-current-border) !important;
  box-shadow: none !important;
}

.appearance-section-dictionary button[class*='from-violet'],
.appearance-section-dictionary button[class*='from-indigo'],
.appearance-section-dictionary button[class*='from-sky'] {
  background: var(--appearance-current-primary) !important;
  color: var(--appearance-current-primary-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.ai-assistant-shell {
  background: transparent !important;
}

.ai-assistant-layout,
.ai-assistant-header,
.ai-assistant-shell form,
.ai-assistant-shell [class*='dark:bg-gray-900'] {
  border-color: var(--appearance-current-border) !important;
}

.ai-assistant-shell :where(textarea, input) {
  background: var(--appearance-current-surface) !important;
  border-color: var(--appearance-current-border) !important;
}

.games-hero-section,
.community-hero {
  background: linear-gradient(118deg,
    #071426 0%,
    #10243f 68%,
    color-mix(in srgb, var(--appearance-current-primary) 58%, #10243f) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--appearance-current-primary) 35%, var(--appearance-current-border)) !important;
  box-shadow: 0 18px 42px rgb(7 20 38 / 14%) !important;
}

.games-hero-section :where(h1, h2, h3, p, span, strong),
.community-hero :where(h1, h2, h3, p, span, strong) {
  color: #f8fafc !important;
}

.games-hero-section :where(p, .text-white\/70),
.community-hero :where(p, .text-indigo-200) {
  color: #d8e2ee !important;
}

.appearance-section-community > div:not(.community-hero),
.appearance-section-community .xl\:col-span-2 > div,
.appearance-section-community .xl\:col-span-1 > div,
.appearance-section-games section:not(.games-hero-section),
.appearance-section-sentences .sentence-topics-grid > div:not([class*='bg-slate-900']) {
  border-color: var(--appearance-current-border) !important;
}

.appearance-section-community .xl\:col-span-2 > div,
.appearance-section-community .xl\:col-span-1 > div,
.appearance-section-games section:not(.games-hero-section),
.appearance-section-sentences .sentence-topics-grid > div:not([class*='bg-slate-900']) {
  background: var(--appearance-current-surface) !important;
  box-shadow: none !important;
}

@media (max-width: 920px) {
  .appearance-section-stories,
  .appearance-section-dictionary,
  .appearance-section-ai-assistant,
  .appearance-section-games,
  .appearance-section-community,
  .appearance-section-sentences {
    padding-inline: 0.75rem !important;
  }

  .appearance-section-stories *,
  .appearance-section-dictionary *,
  .appearance-section-ai-assistant *,
  .appearance-section-games *,
  .appearance-section-community *,
  .appearance-section-sentences * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .appearance-section-dictionary [class*='rounded-['],
  .appearance-section-ai-assistant [class*='rounded-['],
  .appearance-section-games [class*='rounded-['],
  .appearance-section-community [class*='rounded-['],
  .appearance-section-sentences [class*='rounded-['] {
    border-radius: 0.75rem !important;
  }

  .appearance-section-dictionary [class*='shadow'],
  .appearance-section-ai-assistant [class*='shadow'],
  .appearance-section-games [class*='shadow'],
  .appearance-section-community [class*='shadow'],
  .appearance-section-sentences [class*='shadow'] {
    box-shadow: none !important;
  }

  .games-hero-section,
  .community-hero {
    background: #10243f !important;
    border-radius: 0.75rem !important;
    box-shadow: none !important;
  }

  .community-hero > .absolute,
  .games-hero-section > .absolute {
    display: none !important;
  }

  .appearance-section-sentences .sentence-topics-grid > div {
    min-height: 10.5rem !important;
    border-radius: 0.75rem !important;
    box-shadow: none !important;
  }
}

.app-route-frame > :where(div, section, article) > header h1,
.app-route-frame > :where(div, section, article) > header h2 {
  font-size: clamp(1.125rem, calc(var(--appearance-current-title-size) * 1px), 2.625rem);
  color: var(--appearance-current-text) !important;
}

@media (max-width: 920px) {
  .app-shell {
    background-attachment: scroll;
  }

  .appearance-folder-card {
    transform: none !important;
    will-change: auto !important;
  }

  .appearance-auth-brand,
  .appearance-landing-page > div[aria-hidden='true'] {
    display: none !important;
  }

  .appearance-subscription-plan {
    transform: none !important;
    will-change: auto !important;
  }
}

/* Review folders: premium Golden Key surfaces on desktop, flat and cheap to
   paint on phones. All values remain connected to the appearance editor. */
.folders-dashboard-page,
.appearance-section-cards {
  color: var(--appearance-current-text) !important;
}

.folders-dashboard-header h2,
.folders-dashboard-header p,
.appearance-section-cards h2,
.appearance-section-cards h3 {
  color: var(--appearance-current-text) !important;
}

.folders-dashboard-header p,
.appearance-section-cards :where(.text-gray-400, .text-gray-500) {
  color: var(--appearance-current-muted-text) !important;
}

.folders-primary-action {
  background: linear-gradient(115deg,
    var(--appearance-current-primary),
    color-mix(in srgb, var(--appearance-current-primary) 72%, var(--appearance-current-accent))) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--appearance-current-primary) 22%, transparent) !important;
}

.folders-dashboard-stat,
.appearance-folder-card {
  background: var(--appearance-current-surface) !important;
  border-color: var(--appearance-current-border) !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--appearance-current-text) 7%, transparent) !important;
}

.folders-dashboard-stat > div:first-child,
.appearance-folder-card [class*='bg-stone-50'],
.appearance-folder-card [class*='dark:bg-gray-800'] {
  background: color-mix(in srgb, var(--appearance-current-surface) 88%, var(--appearance-current-primary) 12%) !important;
  color: var(--appearance-current-text) !important;
}

.folder-deep-dive-banner {
  background:
    linear-gradient(118deg,
      #071426 0%,
      #10243f 72%,
      color-mix(in srgb, var(--appearance-current-primary) 62%, #10243f) 100%) !important;
  border-color: color-mix(in srgb, var(--appearance-current-primary) 38%, #ffffff 10%) !important;
  box-shadow: 0 18px 42px rgba(7, 20, 38, 0.16) !important;
  isolation: isolate;
}

.folder-deep-dive-accent {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  width: 0.4rem;
  background: var(--appearance-current-accent);
}

.folder-deep-dive-banner button[data-testid='start-folder-review'] {
  background: var(--appearance-current-primary) !important;
  box-shadow: none !important;
}

.appearance-section-cards :where(input, select),
.appearance-section-cards [role='menu'] {
  background: var(--appearance-current-surface) !important;
  border-color: var(--appearance-current-border) !important;
  color: var(--appearance-current-text) !important;
}

.learning-card-front,
.learning-card-back {
  border-color: color-mix(in srgb, var(--appearance-current-primary) 30%, #ffffff 12%) !important;
}

.learning-card-back {
  background: #0b1a2e !important;
  background-image: linear-gradient(145deg, #10243f 0%, #0b1a2e 70%, color-mix(in srgb, var(--appearance-current-primary) 24%, #0b1a2e)) !important;
}

.learning-card-ready {
  background: var(--appearance-current-primary) !important;
}

@media (max-width: 920px) {
  .folders-dashboard-page,
  .appearance-section-cards {
    padding-inline: 0.75rem !important;
  }

  .folders-dashboard-page {
    row-gap: 1rem !important;
  }

  .folders-dashboard-header {
    gap: 0.85rem !important;
  }

  .folders-dashboard-header h2 {
    font-size: 1.65rem !important;
  }

  .folders-dashboard-header p {
    margin-top: 0.65rem !important;
    font-size: 0.86rem !important;
  }

  .folders-primary-action,
  .folders-dashboard-stat,
  .appearance-folder-card,
  .folder-deep-dive-banner {
    box-shadow: none !important;
  }

  .folders-primary-action {
    background: var(--appearance-current-primary) !important;
  }

  .folders-dashboard-stats {
    gap: 0.55rem !important;
  }

  .folders-dashboard-stat {
    min-height: 6.25rem;
    border-radius: 0.75rem !important;
    padding: 0.65rem !important;
  }

  .appearance-folder-card {
    border-radius: 0.75rem !important;
    transform: none !important;
    transition: border-color 120ms ease !important;
  }

  .appearance-folder-card > div[class*='blur'] {
    display: none !important;
  }

  .folder-deep-dive-banner {
    background: #10243f !important;
    border-radius: 0.75rem !important;
  }

  .learning-card-front,
  .learning-card-back {
    border-radius: 0.75rem !important;
    box-shadow: none !important;
  }

  .learning-card-front-image .learning-card-overlay {
    background: linear-gradient(180deg, rgba(7, 20, 38, 0.84), rgba(7, 20, 38, 0.18), transparent) !important;
  }
}

/* Golden Key application shell and home dashboard.
   React owns structure; this late runtime layer owns all configurable color. */
.mobile-sidebar-shell {
  background: var(--appearance-navigation-background) !important;
  background-image: var(--appearance-navigation-background-image) !important;
  color: var(--appearance-navigation-text) !important;
  border-color: var(--appearance-navigation-border) !important;
  box-shadow: -12px 0 36px color-mix(in srgb, var(--appearance-navigation-text) 9%, transparent) !important;
}

.mobile-sidebar-header,
.mobile-sidebar-bottom,
.app-mobile-header {
  background: var(--appearance-navigation-surface) !important;
  background-image: none !important;
  color: var(--appearance-navigation-text) !important;
  border-color: var(--appearance-navigation-border) !important;
}

.app-mobile-header {
  border-bottom: 1px solid var(--appearance-navigation-border) !important;
  box-shadow: none !important;
}

.mobile-menu-button {
  background: var(--appearance-navigation-surface-alt) !important;
  color: var(--appearance-navigation-text) !important;
  border: 1px solid var(--appearance-navigation-border) !important;
  box-shadow: none !important;
}

.mobile-sidebar-content,
.mobile-sidebar-nav,
.mobile-sidebar-profile-card,
.mobile-sidebar-profile-name,
.mobile-sidebar-profile-meta,
.mobile-sidebar-language-title,
.mobile-sidebar-language-hint,
.mobile-sidebar-extra-button,
.mobile-sidebar-subaction,
.desktop-theme-toggle {
  color: var(--appearance-navigation-text) !important;
}

.mobile-sidebar-profile-card {
  border-radius: 10px !important;
}

.mobile-sidebar-profile-card > :nth-child(1),
.mobile-sidebar-profile-glow,
.mobile-sidebar-nav .mobile-sidebar-link > .absolute:not(:first-child),
.mobile-sidebar-shell .mobile-scroll-decor {
  display: none !important;
}

.mobile-sidebar-profile-card > :nth-child(2) {
  inset: 0 !important;
  border: 1px solid var(--appearance-navigation-border) !important;
  border-radius: 10px !important;
  background: var(--appearance-navigation-surface-alt) !important;
}

.mobile-sidebar-link {
  min-height: 48px;
  border-radius: 8px !important;
  color: var(--appearance-navigation-muted-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.mobile-sidebar-link :where(.mobile-sidebar-icon, .mobile-sidebar-label) {
  color: inherit !important;
}

.mobile-sidebar-link:hover {
  background: var(--appearance-navigation-surface-alt) !important;
  color: var(--appearance-navigation-text) !important;
}

.mobile-sidebar-link-active,
.mobile-sidebar-link-active:hover {
  background: var(--appearance-navigation-primary) !important;
  color: var(--appearance-navigation-primary-text) !important;
  border-color: var(--appearance-navigation-primary) !important;
  box-shadow: none !important;
}

.mobile-sidebar-link-active .mobile-sidebar-icon {
  filter: none !important;
}

.mobile-sidebar-language,
.mobile-sidebar-extra-button,
.mobile-sidebar-subaction,
.mobile-sidebar-icon-button,
.mobile-theme-toggle,
.desktop-theme-toggle {
  background: var(--appearance-navigation-surface-alt) !important;
  color: var(--appearance-navigation-text) !important;
  border-color: var(--appearance-navigation-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.mobile-sidebar-profile-meta,
.mobile-sidebar-language-hint,
.desktop-theme-toggle .mobile-sidebar-muted-text {
  color: var(--appearance-navigation-muted-text) !important;
}

.mobile-language-segment,
.mobile-language-pill {
  border-color: var(--appearance-navigation-border) !important;
}

.mobile-language-pill {
  background: var(--appearance-navigation-surface) !important;
  color: var(--appearance-navigation-text) !important;
}

.mobile-language-pill-active {
  background: var(--appearance-navigation-primary) !important;
  color: var(--appearance-navigation-primary-text) !important;
  border-color: var(--appearance-navigation-primary) !important;
}

.appearance-home-content {
  color: var(--appearance-current-text);
}

.home-hero-banner {
  min-height: 230px;
  background:
    linear-gradient(118deg,
      #071426 0%,
      #0b1b30 68%,
      color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 40%, #071426) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(7, 20, 38, 0.3) !important;
  transition: none !important;
  color: #fff7ed !important;
}

/* ── Light mode: warm amber/golden hero banner ── */
html[data-appearance-mode='light'] .home-hero-banner {
  background:
    linear-gradient(118deg,
      color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 80%, #b45309) 0%,
      color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 60%, #92400e) 55%,
      color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 40%, #78350f) 100%) !important;
  color: #fff7ed !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 18px 42px rgba(180, 83, 9, 0.25) !important;
}

.home-hero-banner > div > div[class*='backdrop-blur'],
.home-hero-banner [class*='blur-'] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

.home-mobile-quote {
  background: color-mix(in srgb, #071426 84%, var(--appearance-current-primary)) !important;
  border-color: color-mix(in srgb, var(--appearance-current-primary) 32%, transparent) !important;
  box-shadow: none !important;
}

/* ── Light mode: warm amber mobile quote ── */
html[data-appearance-mode='light'] .home-mobile-quote {
  background: color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 18%, #fff8ed) !important;
  border-color: color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 40%, transparent) !important;
  color: #71350c !important;
}

.home-stat-card,
.home-quick-actions,
.home-quick-action-card,
.home-heatmap-card,
.home-status-breakdown,
.home-status-tile,
.home-review-chart {
  background: var(--appearance-current-surface) !important;
  color: var(--appearance-current-text) !important;
  border-color: var(--appearance-current-border) !important;
  box-shadow: none !important;
}

.home-stat-card,
.home-quick-actions,
.home-heatmap-card,
.home-status-breakdown,
.home-review-chart {
  border-radius: 12px !important;
}

.home-quick-action-card,
.home-status-tile {
  border-radius: 8px !important;
  transform: none !important;
}

.home-stat-card :where(span, p),
.home-quick-actions :where(h3, span),
.home-status-breakdown :where(h2, h3, p, span),
.home-review-chart :where(h2, h3, p, span) {
  color: inherit;
}

.home-subscription-card {
  background: color-mix(in srgb, #059669 9%, var(--appearance-current-surface)) !important;
  border-color: color-mix(in srgb, #059669 35%, var(--appearance-current-border)) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.home-upsell-card {
  background: var(--appearance-current-surface) !important;
  border-color: color-mix(in srgb, var(--appearance-current-primary) 35%, var(--appearance-current-border)) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.home-upsell-card button:first-of-type,
.review-cta-card button {
  background: var(--appearance-current-primary) !important;
  color: var(--appearance-current-primary-text) !important;
  box-shadow: none !important;
}

.review-cta-card {
  background:
    linear-gradient(112deg,
      color-mix(in srgb, #071426 94%, var(--appearance-current-primary)) 0%,
      color-mix(in srgb, #071426 68%, var(--appearance-current-primary)) 100%) !important;
  border-color: color-mix(in srgb, var(--appearance-current-primary) 42%, transparent) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* ── Light mode: warm amber review CTA card ── */
html[data-appearance-mode='light'] .review-cta-card {
  background:
    linear-gradient(112deg,
      color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 85%, #b45309) 0%,
      color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 65%, #92400e) 100%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 12px 32px rgba(180, 83, 9, 0.22) !important;
  color: #fff7ed !important;
}

html[data-appearance-mode='light'] .review-cta-card h2,
html[data-appearance-mode='light'] .review-cta-card p {
  color: #fff7ed !important;
}

.review-cta-card > .absolute {
  display: none !important;
}

@media (max-width: 920px) {
  .mobile-sidebar-shell {
    width: min(86vw, 320px) !important;
    background: var(--appearance-navigation-background) !important;
    box-shadow: none !important;
  }

  .mobile-sidebar-backdrop {
    background: rgb(2 6 23 / 68%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-sidebar-header {
    padding: 0.875rem 1rem !important;
  }

  .mobile-sidebar-profile,
  .mobile-sidebar-nav,
  .mobile-sidebar-bottom {
    padding: 0.75rem !important;
  }

  .mobile-sidebar-nav {
    gap: 2px !important;
  }

  .mobile-sidebar-link {
    min-height: 44px;
    padding: 0.65rem 0.75rem !important;
    border-radius: 7px !important;
    transition: none !important;
  }

  .appearance-home-content {
    padding: 0.75rem !important;
    padding-bottom: 6rem !important;
    gap: 0 !important;
  }

  .appearance-home-content > * + * {
    margin-top: 0.75rem !important;
  }

  .home-hero-banner {
    min-height: 0;
    padding: 1rem !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, #071426 88%, var(--appearance-current-primary)) !important;
    box-shadow: none !important;
  }

  .home-hero-banner *,
  .home-quick-actions *,
  .home-stat-card *,
  .review-cta-card * {
    animation: none !important;
    transition-duration: 0ms !important;
  }

  .home-stats-grid {
    gap: 0.625rem !important;
  }

  .home-stat-card {
    min-height: 92px;
    padding: 0.875rem !important;
    border-radius: 8px !important;
  }

  .home-stat-card [class*='shadow'] {
    box-shadow: none !important;
  }

  .home-subscription-card,
  .home-upsell-card,
  .home-quick-actions,
  .home-heatmap-card,
  .home-status-breakdown,
  .home-review-chart,
  .review-cta-card {
    padding: 1rem !important;
    border-radius: 9px !important;
    box-shadow: none !important;
  }

  .home-quick-actions .grid {
    gap: 0.625rem !important;
  }

  .home-quick-action-card {
    min-height: 88px !important;
    padding: 0.75rem !important;
    background: var(--appearance-current-surface-alt) !important;
  }

  .review-cta-card {
    background: color-mix(in srgb, #071426 85%, var(--appearance-current-primary)) !important;
  }
}

@media (max-width: 920px) {
  /* ── Light mode mobile: warm amber hero & review card ── */
  html[data-appearance-mode='light'] .home-hero-banner {
    background: color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 72%, #92400e) !important;
  }

  html[data-appearance-mode='light'] .review-cta-card {
    background:
      linear-gradient(112deg,
        color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 85%, #b45309) 0%,
        color-mix(in srgb, var(--appearance-current-primary, #f59e0b) 60%, #92400e) 100%) !important;
  }
}

/* First-run onboarding follows the auth system and avoids persistent GPU work. */
.onboarding-golden-key {
  background: color-mix(in srgb, #020617 72%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.onboarding-golden-key .onboarding-mobile-card {
  height: min(680px, calc(100dvh - 2rem));
  background: var(--appearance-auth-surface) !important;
  color: var(--appearance-auth-text) !important;
  border-color: var(--appearance-auth-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 70px rgb(2 6 23 / 24%) !important;
}

.onboarding-golden-key .onboarding-mobile-decor {
  display: none !important;
}

.onboarding-golden-key .onboarding-mobile-card > div:first-of-type {
  background: color-mix(in srgb, var(--appearance-auth-border) 70%, transparent) !important;
}

.onboarding-golden-key .onboarding-mobile-card > div:first-of-type > div {
  background: var(--appearance-auth-primary) !important;
}

.onboarding-golden-key :where(.onboarding-mobile-title, .onboarding-choice-card h3) {
  color: var(--appearance-auth-text) !important;
}

.onboarding-golden-key :where(.onboarding-mobile-subtitle, .onboarding-choice-card p) {
  color: var(--appearance-auth-muted-text) !important;
}

.onboarding-golden-key :where(.onboarding-choice-card, .onboarding-goal-card) {
  position: relative;
  background: var(--appearance-auth-surface-alt) !important;
  border: 1px solid var(--appearance-auth-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

.onboarding-golden-key :where(.onboarding-choice-card, .onboarding-goal-card):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--appearance-auth-primary) 30%, transparent);
  outline-offset: 2px;
}

.onboarding-golden-key :where(.onboarding-choice-card, .onboarding-goal-card)[class*='border-blue'],
.onboarding-golden-key :where(.onboarding-choice-card, .onboarding-goal-card)[class*='border-amber'] {
  border-color: var(--appearance-auth-primary) !important;
  background: color-mix(in srgb, var(--appearance-auth-primary) 10%, var(--appearance-auth-surface)) !important;
}

.onboarding-golden-key .onboarding-mobile-footer {
  background: var(--appearance-auth-surface-alt) !important;
  border-top: 1px solid var(--appearance-auth-border);
}

.onboarding-golden-key .onboarding-next-button {
  min-height: 48px;
  background: var(--appearance-auth-primary) !important;
  color: var(--appearance-auth-primary-text) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 920px) {
  .onboarding-golden-key {
    align-items: flex-end;
    padding: 0 !important;
    background: var(--appearance-auth-background) !important;
  }

  .onboarding-golden-key .onboarding-mobile-card {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .onboarding-golden-key .onboarding-mobile-content {
    padding: 1.25rem 1rem !important;
  }

  .onboarding-golden-key .onboarding-level-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .onboarding-golden-key .onboarding-choice-card {
    min-height: 72px;
    padding: 0.75rem !important;
    flex-direction: row;
    text-align: start;
  }

  .onboarding-golden-key .onboarding-choice-icon {
    font-size: 1.5rem !important;
  }

  .onboarding-golden-key .onboarding-goals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .onboarding-golden-key .onboarding-mobile-footer {
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom)) !important;
  }

  .onboarding-golden-key *,
  .onboarding-golden-key *::before,
  .onboarding-golden-key *::after {
    animation: none !important;
    transition-duration: 0ms !important;
  }
}

/* Golden Key authentication
   Desktop uses one branded panel and one form surface. Mobile keeps a single flat layer. */
.appearance-auth-page {
  --auth-gold: var(--appearance-auth-primary);
  --auth-gold-text: var(--appearance-auth-primary-text);
  --auth-ink: var(--appearance-auth-text);
  --auth-muted: var(--appearance-auth-muted-text);
  --auth-surface: var(--appearance-auth-surface);
  --auth-surface-alt: var(--appearance-auth-surface-alt);
  --auth-border: var(--appearance-auth-border);
  min-height: 100dvh;
}

.appearance-auth-brand {
  isolation: isolate;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--auth-gold) 12%, transparent), transparent 46%),
    var(--auth-surface-alt) !important;
  border-inline-end: 1px solid color-mix(in srgb, var(--auth-gold) 34%, var(--auth-border));
}

.appearance-auth-brand::after {
  content: '';
  position: absolute;
  inset-inline-start: 3rem;
  bottom: 3rem;
  width: 5rem;
  height: 3px;
  background: var(--auth-gold);
  border-radius: 999px;
  z-index: 1;
}

.appearance-auth-brand > .absolute {
  display: none !important;
}

.appearance-auth-brand :where(h1, h2) {
  color: #f8fafc !important;
  letter-spacing: 0 !important;
}

.appearance-auth-brand h1 span {
  background: none !important;
  color: var(--auth-gold) !important;
  -webkit-text-fill-color: currentColor !important;
}

.appearance-auth-brand :where(p, button, .text-gray-400) {
  color: #cbd5e1 !important;
}

.appearance-auth-form-shell {
  background: color-mix(in srgb, var(--appearance-auth-background) 92%, var(--auth-surface)) !important;
}

.auth-form-panel {
  padding: 2rem;
  background: var(--auth-surface);
  border: 1px solid var(--auth-border);
  border-radius: 12px;
  box-shadow: 0 18px 55px color-mix(in srgb, var(--auth-ink) 9%, transparent);
}

.auth-form :where(input:not([type='checkbox']):not([type='radio'])) {
  min-height: 52px;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.auth-form :where(input:not([type='checkbox']):not([type='radio'])):focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-gold) 18%, transparent) !important;
}

.auth-primary-action,
.signup-onboarding-next {
  min-height: 52px;
  border-radius: 8px !important;
  background: var(--auth-gold) !important;
  color: var(--auth-gold-text) !important;
  border: 1px solid color-mix(in srgb, var(--auth-gold) 78%, #000) !important;
  box-shadow: none !important;
  transform: none !important;
}

.auth-primary-action:hover,
.signup-onboarding-next:hover {
  background: color-mix(in srgb, var(--auth-gold) 88%, #fff) !important;
}

.signup-onboarding-overlay,
.auth-language-modal {
  background: color-mix(in srgb, #020617 72%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.signup-onboarding-card,
.auth-language-card {
  background: var(--auth-surface) !important;
  color: var(--auth-ink) !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 70px rgb(2 6 23 / 24%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.signup-onboarding-card > .absolute,
.auth-language-card > .absolute:not(button) {
  display: none !important;
}

.signup-onboarding-choice,
.auth-language-card button[class*='rounded-[2rem]'] {
  background: var(--auth-surface-alt) !important;
  color: var(--auth-ink) !important;
  border-color: var(--auth-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 920px) {
  .appearance-auth-page,
  .appearance-auth-form-shell {
    min-height: 100dvh;
    background: var(--appearance-auth-background) !important;
  }

  .auth-form-panel {
    max-width: 30rem;
    padding: 1rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .appearance-auth-page :where(.animate-fade-in, .animate-pulse, .animate-shake),
  .auth-language-card *,
  .signup-onboarding-card * {
    animation: none !important;
    transition-duration: 0ms !important;
  }

  .auth-language-modal,
  .signup-onboarding-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .auth-language-card,
  .signup-onboarding-card {
    width: 100%;
    max-width: none !important;
    max-height: min(88dvh, 760px);
    overflow-y: auto !important;
    padding: 1.25rem !important;
    border-inline: 0 !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: none !important;
  }

  .auth-form :where(input, button),
  .auth-primary-action {
    min-height: 50px;
  }
}

/* Golden Key landing page
   One visual layer on mobile; desktop depth comes from color, border and spacing. */
.landing-page-root {
  --landing-gold: var(--appearance-home-primary);
  --landing-gold-text: var(--appearance-home-primary-text);
  --landing-ink: var(--appearance-home-text);
  --landing-muted: var(--appearance-home-muted-text);
  --landing-surface: var(--appearance-home-surface);
  --landing-surface-alt: var(--appearance-home-surface-alt);
  --landing-border: var(--appearance-home-border);
  background-color: var(--appearance-home-background) !important;
  background-image: var(--appearance-home-background-image) !important;
  color: var(--landing-ink) !important;
}

.landing-page-root :where(h1, h2, h3, strong) {
  color: var(--landing-ink);
}

.landing-page-root :where(p, li, .landing-muted-copy) {
  text-shadow: none !important;
}

html:not(.dark) .landing-page-root :where(.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700) {
  color: var(--landing-muted) !important;
  opacity: 1 !important;
}

.landing-header {
  background: var(--appearance-navigation-surface) !important;
  border-color: var(--appearance-navigation-border) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--appearance-navigation-border) 72%, transparent);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.landing-header nav a {
  color: var(--appearance-navigation-muted-text) !important;
}

.landing-header nav a:hover {
  background: var(--appearance-navigation-surface-alt) !important;
  color: var(--appearance-navigation-text) !important;
}

.landing-mobile-menu {
  background: var(--appearance-navigation-surface) !important;
  border-color: var(--appearance-navigation-border) !important;
  box-shadow: none !important;
}

.landing-primary-button {
  background: var(--landing-gold) !important;
  border: 1px solid var(--landing-gold) !important;
  color: var(--landing-gold-text) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--landing-gold) 18%, transparent) !important;
  transition: transform 160ms ease, background-color 160ms ease !important;
}

.landing-primary-button:hover {
  background: color-mix(in srgb, var(--landing-gold) 88%, white) !important;
}

.landing-primary-button:active {
  transform: translateY(1px) !important;
}

.landing-secondary-button {
  background: var(--landing-surface) !important;
  border-color: var(--landing-border) !important;
  color: var(--landing-ink) !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, background-color 160ms ease !important;
}

.landing-secondary-button:hover {
  background: var(--landing-surface-alt) !important;
  border-color: color-mix(in srgb, var(--landing-gold) 55%, var(--landing-border)) !important;
}

.landing-hero {
  background:
    linear-gradient(115deg,
      color-mix(in srgb, var(--appearance-home-background) 96%, var(--landing-gold)) 0%,
      var(--appearance-home-background) 54%,
      color-mix(in srgb, var(--appearance-home-surface-alt) 84%, var(--landing-gold)) 100%) !important;
  border-bottom: 1px solid var(--landing-border);
}

.landing-eyebrow {
  background: color-mix(in srgb, var(--landing-gold) 9%, var(--landing-surface)) !important;
  border-color: color-mix(in srgb, var(--landing-gold) 35%, var(--landing-border)) !important;
  color: color-mix(in srgb, var(--landing-gold) 78%, var(--landing-ink)) !important;
}

.landing-title {
  color: var(--landing-ink) !important;
  max-width: 13ch;
  letter-spacing: 0 !important;
}

.landing-title-accent {
  color: var(--landing-gold) !important;
}

.landing-lede,
.landing-page-root .landing-lede {
  color: var(--landing-muted) !important;
  max-width: 62ch;
}

.landing-proof-grid {
  border-color: var(--landing-border) !important;
}

.landing-proof-grid > div > div:first-child {
  color: var(--landing-gold) !important;
}

.landing-demo-shell {
  background: var(--landing-surface) !important;
  border-color: var(--landing-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 22px 54px color-mix(in srgb, #020617 18%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.landing-demo-screen {
  background: var(--landing-surface-alt) !important;
  border-color: var(--landing-border) !important;
  color: var(--landing-ink) !important;
  border-radius: 12px !important;
}

.landing-section {
  background: transparent !important;
  border-color: var(--landing-border) !important;
}

.landing-features,
.landing-mobile-section,
.landing-faq-section {
  background: var(--landing-surface) !important;
}

.landing-feature-card,
.landing-method-card,
.landing-mobile-copy,
.landing-plan-card,
.landing-faq-list {
  background: var(--landing-surface) !important;
  border-color: var(--landing-border) !important;
  color: var(--landing-ink) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px color-mix(in srgb, #020617 7%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.landing-feature-card,
.landing-method-card {
  transition: transform 160ms ease, border-color 160ms ease !important;
}

.landing-feature-card:hover,
.landing-method-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--landing-gold) 45%, var(--landing-border)) !important;
}

.landing-step-number {
  background: var(--landing-gold) !important;
  color: var(--landing-gold-text) !important;
  box-shadow: none !important;
}

.landing-faq-list {
  border-color: var(--landing-border) !important;
  box-shadow: none !important;
}

.landing-faq-list > div {
  border-color: var(--landing-border) !important;
}

.landing-footer {
  background: var(--appearance-navigation-surface) !important;
  border-color: var(--appearance-navigation-border) !important;
  color: var(--appearance-navigation-text) !important;
}

@media (max-width: 920px) {
  .landing-page-root,
  .landing-hero,
  .landing-section,
  .landing-features,
  .landing-mobile-section,
  .landing-faq-section,
  .landing-plans {
    background-image: none !important;
  }

  .landing-header {
    position: sticky;
    box-shadow: none !important;
  }

  .landing-hero {
    padding-block: 2rem !important;
  }

  .landing-hero-grid {
    gap: 2rem !important;
  }

  .landing-title {
    max-width: none;
    font-size: 2.125rem !important;
    line-height: 1.25 !important;
  }

  .landing-lede {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
  }

  .landing-primary-button,
  .landing-secondary-button {
    width: 100%;
    box-shadow: none !important;
    transform: none !important;
  }

  .landing-proof-grid {
    gap: 0.5rem !important;
    margin-top: 2rem !important;
    padding-top: 1.25rem !important;
  }

  .landing-proof-grid > div > div:first-child {
    font-size: 0.82rem !important;
    line-height: 1.35;
  }

  .landing-proof-grid > div > div:last-child {
    font-size: 0.68rem !important;
    line-height: 1.4;
  }

  .landing-demo-shell,
  .landing-demo-screen,
  .landing-feature-card,
  .landing-method-card,
  .landing-mobile-copy,
  .landing-plan-card,
  .landing-faq-list {
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .landing-section {
    padding-block: 3rem !important;
  }

  .landing-feature-card:hover,
  .landing-method-card:hover {
    transform: none !important;
  }

  .landing-page-root :where(a, button, article) {
    transition-duration: 120ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page-root *,
  .landing-page-root *::before,
  .landing-page-root *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Golden Key learning path. The route keeps the admin appearance variables,
   while the component structure stays flat enough for low-end phones. */
.learning-path-page {
  color: var(--appearance-current-text);
}

.learning-path-header {
  padding: 2rem;
  border: 1px solid color-mix(in srgb, var(--appearance-current-primary) 42%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(118deg, #071426 0%, #10243f 72%, color-mix(in srgb, var(--appearance-current-primary) 62%, #10243f) 100%);
  box-shadow: 0 18px 42px rgba(7, 20, 38, 0.16);
}

.learning-path-header-accent {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  width: 5px;
  background: var(--appearance-current-primary);
}

.learning-path-header-stats {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(3, 10, 20, 0.35);
}

.learning-path-header-progress {
  background: rgba(255, 255, 255, 0.12);
}

.learning-path-header-progress > div {
  background: var(--appearance-current-primary);
  transition: width 220ms ease-out;
}

.learning-path-levels {
  padding: 6px;
  border: 1px solid var(--appearance-current-border);
  border-radius: 12px;
  background: var(--appearance-current-surface);
}

.learning-path-level {
  min-height: 60px;
  border-radius: 8px;
  transition: color 140ms ease, background-color 140ms ease;
}

.learning-path-level:not(.is-active):hover {
  color: var(--appearance-current-text);
  background: var(--appearance-current-surface-alt);
}

.learning-path-level-active {
  border-radius: 8px;
  background: var(--appearance-current-primary);
  box-shadow: none;
}

.learning-path-sublevel {
  min-width: 72px;
  border: 1px solid var(--appearance-current-border);
  border-radius: 8px;
  background: var(--appearance-current-surface);
  box-shadow: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.learning-path-sublevel.is-active {
  border-color: var(--appearance-current-primary);
  background: var(--appearance-current-primary);
}

.learning-path-surface .learning-mobile-summary,
.learning-path-surface .learning-path-unit,
.learning-path-surface .learning-path-lesson {
  color: var(--appearance-current-text) !important;
  border-color: var(--appearance-current-border) !important;
  background: var(--appearance-current-surface) !important;
  box-shadow: none !important;
}

.learning-path-surface .learning-path-unit.is-expanded {
  border-color: color-mix(in srgb, var(--appearance-current-primary) 55%, var(--appearance-current-border)) !important;
}

.learning-path-surface .learning-path-unit-title,
.learning-path-surface .learning-path-lesson-title {
  color: var(--appearance-current-text) !important;
}

.learning-path-surface .learning-path-unit-meta,
.learning-path-surface .learning-path-lesson-details,
.learning-path-surface .learning-path-lesson-description,
.learning-path-surface .learning-path-empty-unit {
  color: var(--appearance-current-muted-text) !important;
}

.learning-path-surface .learning-path-unit-number,
.learning-path-surface .learning-path-unit-expand,
.learning-path-surface .learning-path-lesson-index,
.learning-path-surface .learning-path-lesson-action {
  color: var(--appearance-current-primary) !important;
  border-color: color-mix(in srgb, var(--appearance-current-primary) 36%, var(--appearance-current-border)) !important;
  background: color-mix(in srgb, var(--appearance-current-primary) 10%, var(--appearance-current-surface)) !important;
}

.learning-path-surface .learning-path-lesson.is-current {
  border-color: var(--appearance-current-primary) !important;
  background: color-mix(in srgb, var(--appearance-current-primary) 6%, var(--appearance-current-surface)) !important;
}

.learning-path-surface .learning-path-lesson.is-completed {
  border-color: color-mix(in srgb, var(--appearance-current-accent) 46%, var(--appearance-current-border)) !important;
  background: color-mix(in srgb, var(--appearance-current-accent) 7%, var(--appearance-current-surface)) !important;
}

.learning-path-surface .learning-path-lesson.is-completed .learning-path-lesson-index,
.learning-path-surface .learning-path-lesson.is-completed .learning-path-lesson-action {
  color: var(--appearance-current-accent) !important;
  border-color: color-mix(in srgb, var(--appearance-current-accent) 38%, var(--appearance-current-border)) !important;
  background: color-mix(in srgb, var(--appearance-current-accent) 10%, var(--appearance-current-surface)) !important;
}

.learning-path-surface .learning-path-lesson.is-locked {
  opacity: 0.68;
  background: var(--appearance-current-surface-alt) !important;
}

@media (max-width: 920px), (pointer: coarse) {
  .learning-path-page {
    gap: 14px !important;
    padding: 12px 10px 5rem !important;
  }

  .learning-path-header {
    padding: 16px 14px 18px;
    gap: 12px !important;
    border-radius: 10px;
    background: #10243f;
    box-shadow: none;
  }

  .learning-path-header-stats {
    padding: 8px 4px;
    border-radius: 8px;
    background: #071426;
  }

  .learning-path-levels {
    border-radius: 8px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .learning-path-level {
    min-height: 52px;
    border-radius: 6px;
    transition: none !important;
  }

  .learning-path-level-active,
  .learning-path-sublevel {
    border-radius: 6px;
  }

  .learning-path-surface .learning-path-unit,
  .learning-path-surface .learning-path-lesson,
  .learning-path-surface .learning-mobile-summary {
    border-radius: 8px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Light mode uses calm, warm-edged surfaces instead of pure white sheets.
   Only real UI surfaces are included, avoiding expensive nested card layers. */
html[data-appearance-mode='light'] {
  --appearance-light-surface: color-mix(in srgb, var(--appearance-current-surface, #ffffff) 94%, #eef3f8);
  --appearance-light-shadow: 0 10px 26px rgba(56, 72, 92, 0.1);
  --appearance-light-shadow-soft: 0 5px 15px rgba(56, 72, 92, 0.07);
}

/* Final mode contract: the selected mode owns colour, while performance mode
   may only reduce effects. Near-black and warm-white avoid harsh pure tones. */
html[data-appearance-mode='light'],
html[data-appearance-mode='light'] body,
html[data-appearance-mode='light'] #root,
html[data-appearance-mode='light'] .app-shell,
html[data-appearance-mode='light'] .app-main-content,
html[data-appearance-mode='light'] .app-route-frame {
  color: var(--appearance-current-text, #071426);
}

html[data-appearance-mode='dark'],
html[data-appearance-mode='dark'] body,
html[data-appearance-mode='dark'] #root,
html[data-appearance-mode='dark'] .app-shell,
html[data-appearance-mode='dark'] .app-main-content,
html[data-appearance-mode='dark'] .app-route-frame {
  color: var(--appearance-current-text, #fff7ed);
}

.mobile-theme-toggle {
  color: var(--appearance-navigation-text) !important;
  border-color: var(--appearance-navigation-border) !important;
  background: var(--appearance-navigation-surface-alt) !important;
  box-shadow: none !important;
}

.learning-path-access-notice {
  color: var(--appearance-current-text);
  border: 1px solid color-mix(in srgb, var(--appearance-current-primary) 45%, var(--appearance-current-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--appearance-current-primary) 10%, var(--appearance-current-surface));
  box-shadow: none;
}

.learning-path-access-notice-text {
  color: var(--appearance-current-text) !important;
}

.learning-path-access-notice-action {
  color: color-mix(in srgb, var(--appearance-current-primary) 78%, var(--appearance-current-text)) !important;
}

.learning-path-level-active,
.learning-path-level-active :where(span, p),
.learning-path-sublevel.is-active,
.learning-path-sublevel.is-active :where(span, p) {
  color: var(--appearance-current-primary-text) !important;
}

html[data-appearance-mode='light'] :where(
  .home-stat-card,
  .home-quick-action-card,
  .home-status-tile,
  .appearance-folder-card,
  .appearance-story-card,
  .learning-path-unit,
  .learning-path-lesson,
  .learning-mobile-summary,
  .surface-card
) {
  color: var(--appearance-current-text, #071426) !important;
}

html[data-appearance-mode='dark'] :where(
  .home-stat-card,
  .home-quick-action-card,
  .home-status-tile,
  .appearance-folder-card,
  .appearance-story-card,
  .learning-path-unit,
  .learning-path-lesson,
  .learning-mobile-summary,
  .surface-card
) {
  color: var(--appearance-current-text, #fff7ed) !important;
}

@media (max-width: 920px), (pointer: coarse) {
  html.mobile-lite-mode .app-shell,
  html.mobile-lite-mode .app-main-content,
  html.mobile-lite-mode .app-route-frame {
    background-color: var(--appearance-current-background, var(--appearance-global-background)) !important;
    background-image: none !important;
  }

  html.mobile-lite-mode .mobile-sidebar-shell,
  html.mobile-lite-mode .mobile-sidebar-header,
  html.mobile-lite-mode .mobile-sidebar-bottom,
  html.mobile-lite-mode .app-mobile-header,
  html.mobile-lite-mode .mobile-menu-button,
  html.mobile-lite-mode .mobile-sidebar-profile-card,
  html.mobile-lite-mode .mobile-sidebar-link,
  html.mobile-lite-mode .mobile-sidebar-language,
  html.mobile-lite-mode .mobile-sidebar-extra-button,
  html.mobile-lite-mode .desktop-theme-toggle,
  html.mobile-lite-mode .mobile-theme-toggle {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .mobile-sidebar-shell {
    color: var(--appearance-navigation-text) !important;
    background: var(--appearance-navigation-background) !important;
  }

  html.mobile-lite-mode .learning-path-access-notice {
    border-radius: 8px;
  }
}

html[data-appearance-mode='light'] :where(
  .home-stat-card,
  .home-quick-actions,
  .home-quick-action-card,
  .home-heatmap-card,
  .home-status-breakdown,
  .home-status-tile,
  .home-review-chart,
  .home-subscription-card,
  .home-upsell-card,
  .appearance-story-card,
  .appearance-story-card-body,
  .appearance-folder-card,
  .folders-dashboard-stat,
  .learning-path-unit,
  .learning-path-lesson,
  .learning-mobile-summary,
  .appearance-subscription-plan,
  .surface-card,
  .dictionary-view-shell article,
  .auth-language-card,
  .signup-onboarding-card,
  .mobile-safe-modal-card,
  .logout-dialog-card
) {
  background-color: var(--appearance-light-surface) !important;
  border-color: var(--appearance-current-border, var(--appearance-global-border)) !important;
  box-shadow: var(--appearance-light-shadow-soft) !important;
}

html[data-appearance-mode='light'] :where(
  .appearance-section-games section:not(.games-hero-section),
  .appearance-section-community .xl\:col-span-2 > div,
  .appearance-section-community .xl\:col-span-1 > div,
  .appearance-section-sentences .sentence-topics-grid > div
) {
  background-color: var(--appearance-light-surface) !important;
  border-color: var(--appearance-current-border) !important;
  box-shadow: var(--appearance-light-shadow-soft) !important;
}

html[data-appearance-mode='light'] .app-route-frame :where(input, textarea, select) {
  border-color: var(--appearance-current-border) !important;
}

@media (max-width: 920px), (pointer: coarse) {
  html[data-appearance-mode='light'] {
    --appearance-light-shadow: 0 4px 12px rgba(105, 72, 40, 0.09);
    --appearance-light-shadow-soft: 0 3px 9px rgba(105, 72, 40, 0.07);
  }

  html[data-appearance-mode='light'] .home-hero-banner {
    background: color-mix(in srgb, #071426 88%, var(--appearance-current-primary)) !important;
    border-color: color-mix(in srgb, var(--appearance-current-primary) 34%, #9b7650) !important;
    box-shadow: 0 4px 12px rgba(105, 72, 40, 0.08) !important;
  }

  html[data-appearance-mode='light'] :where(
    .home-stat-card,
    .home-quick-actions,
    .home-quick-action-card,
    .home-heatmap-card,
    .home-status-breakdown,
    .home-status-tile,
    .home-review-chart,
    .home-subscription-card,
    .home-upsell-card,
    .appearance-story-card,
    .appearance-folder-card,
    .folders-dashboard-stat,
    .learning-path-unit,
    .learning-path-lesson,
    .learning-mobile-summary,
    .appearance-subscription-plan,
    .surface-card
  ) {
    box-shadow: var(--appearance-light-shadow-soft) !important;
  }
}

/* Keep these rules last: legacy page styles must never override the selected
   mode or reintroduce costly mobile compositor layers. */
html[data-appearance-mode='light'] .app-route-frame :where(
  h1, h2, h3, h4, h5, h6, p, label, legend
):not(.home-hero-banner *):not(.learning-path-header *):not(.community-hero *):not(.games-hero-section *):not(.review-cta-card *):not(.folder-deep-dive-banner *):not(.study-plan-card *):not(button *):not([role='button'] *),
html:not(.dark) .app-route-frame :where(
  h1, h2, h3, h4, h5, h6, p, label, legend
):not(.home-hero-banner *):not(.learning-path-header *):not(.community-hero *):not(.games-hero-section *):not(.review-cta-card *):not(.folder-deep-dive-banner *):not(.study-plan-card *):not(button *):not([role='button'] *) {
  color: var(--appearance-current-text, #071426);
}

html[data-appearance-mode='dark'] .app-route-frame :where(
  h1, h2, h3, h4, h5, h6, p, label, legend
):not(.home-hero-banner *):not(.learning-path-header *):not(.community-hero *):not(.games-hero-section *):not(.review-cta-card *):not(.folder-deep-dive-banner *):not(.study-plan-card *):not(button *):not([role='button'] *),
html.dark .app-route-frame :where(
  h1, h2, h3, h4, h5, h6, p, label, legend
):not(.home-hero-banner *):not(.learning-path-header *):not(.community-hero *):not(.games-hero-section *):not(.review-cta-card *):not(.folder-deep-dive-banner *):not(.study-plan-card *):not(button *):not([role='button'] *) {
  color: var(--appearance-current-text, #fff7ed);
}

@media (max-width: 920px), (pointer: coarse) {
  html.mobile-lite-mode :where(.app-shell, .app-main-content, .app-route-frame) {
    background-color: var(--appearance-current-background, var(--appearance-global-background)) !important;
    background-image: none !important;
  }

  html.mobile-lite-mode :where(
    .home-stat-card,
    .home-quick-actions,
    .home-quick-action-card,
    .home-heatmap-card,
    .home-status-breakdown,
    .home-status-tile,
    .home-review-chart,
    .home-subscription-card,
    .home-upsell-card,
    .appearance-story-card,
    .appearance-folder-card,
    .folders-dashboard-stat,
    .learning-path-unit,
    .learning-path-lesson,
    .learning-mobile-summary,
    .appearance-subscription-plan,
    .subscription-paid-plan-card,
    .faq-card-container,
    .surface-card
  ) {
    background: var(--appearance-current-surface, var(--appearance-global-surface)) !important;
    border-color: var(--appearance-current-border, var(--appearance-global-border)) !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.mobile-lite-mode :where(
    .subscription-plan-gradient,
    .subscription-plan-glow,
    .mobile-sidebar-profile-glow,
    .home-hero-banner > .absolute,
    .home-hero-banner [class*='blur-']
  ) {
    display: none !important;
  }

  html.mobile-lite-mode.dark .home-hero-banner,
  html.mobile-lite-mode[data-appearance-mode='dark'] .home-hero-banner {
    color: var(--appearance-home-text, var(--appearance-current-text)) !important;
    background: var(--appearance-home-surface-alt, var(--appearance-current-surface-alt)) !important;
    border-color: var(--appearance-home-border, var(--appearance-current-border)) !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .home-hero-banner :where(h1, h2, h3, h4, p, span) {
    color: inherit;
  }

  html.mobile-lite-mode .home-mobile-quote {
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--appearance-home-border, var(--appearance-current-border)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode :where(.subscription-active-card, .learning-path-access-notice) {
    background: var(--appearance-current-surface-alt, var(--appearance-global-surface-alt)) !important;
    color: var(--appearance-current-text, var(--appearance-global-text)) !important;
    border-color: var(--appearance-current-border, var(--appearance-global-border)) !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode :where(
    .mobile-sidebar-shell,
    .mobile-sidebar-header,
    .mobile-sidebar-bottom,
    .mobile-sidebar-profile-card,
    .mobile-sidebar-link,
    .mobile-sidebar-language,
    .mobile-sidebar-extra-button
  ) {
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ─── إصلاح مشكلة النصوص البيضاء على خلفيات بيضاء في وضع النهار ─── */
html[data-appearance-mode='light'] .app-route-frame :where(
  .text-white,
  .text-slate-50,
  .text-slate-100,
  .text-gray-50,
  .text-gray-100,
  .text-zinc-50,
  .text-zinc-100,
  .text-stone-50,
  .text-stone-100,
  .text-neutral-50,
  .text-neutral-100
):not(.home-hero-banner *):not(.learning-path-header *):not(.community-hero *):not(.games-hero-section *):not(.review-cta-card *):not(.folder-deep-dive-banner *):not(.study-plan-card *):not(.subscription-paid-plan-card *):not(.subscription-active-card *):not(button):not(button *):not([role='button']):not([role='button'] *),
html:not(.dark) .app-route-frame :where(
  .text-white,
  .text-slate-50,
  .text-slate-100,
  .text-gray-50,
  .text-gray-100,
  .text-zinc-50,
  .text-zinc-100,
  .text-stone-50,
  .text-stone-100,
  .text-neutral-50,
  .text-neutral-100
):not(.home-hero-banner *):not(.learning-path-header *):not(.community-hero *):not(.games-hero-section *):not(.review-cta-card *):not(.folder-deep-dive-banner *):not(.study-plan-card *):not(.subscription-paid-plan-card *):not(.subscription-active-card *):not(button):not(button *):not([role='button']):not([role='button'] *) {
  color: var(--appearance-current-text, #071426) !important;
}

html[data-appearance-mode='light'] .app-route-frame :where(
  .text-white\/90,
  .text-white\/80,
  .text-white\/70,
  .text-white\/60,
  .text-white\/50,
  .text-slate-100\/90,
  .text-slate-100\/80,
  .text-slate-200\/90,
  .text-slate-200\/80
):not(.home-hero-banner *):not(.learning-path-header *):not(.community-hero *):not(.games-hero-section *):not(.review-cta-card *):not(.folder-deep-dive-banner *):not(.study-plan-card *):not(.subscription-paid-plan-card *):not(.subscription-active-card *):not(button):not(button *):not([role='button']):not([role='button'] *),
html:not(.dark) .app-route-frame :where(
  .text-white\/90,
  .text-white\/80,
  .text-white\/70,
  .text-white\/60,
  .text-white\/50,
  .text-slate-100\/90,
  .text-slate-100\/80,
  .text-slate-200\/90,
  .text-slate-200\/80
):not(.home-hero-banner *):not(.learning-path-header *):not(.community-hero *):not(.games-hero-section *):not(.review-cta-card *):not(.folder-deep-dive-banner *):not(.study-plan-card *):not(.subscription-paid-plan-card *):not(.subscription-active-card *):not(button):not(button *):not([role='button']):not([role='button'] *) {
  color: var(--appearance-current-muted-text, #4a6078) !important;
}

/* ── Dark Mode styling for FolderDeepDiveBanner ── */
html.dark .folder-deep-dive-banner,
html[data-appearance-mode='dark'] .folder-deep-dive-banner {
  background: linear-gradient(118deg, #071426 0%, #10243f 72%, color-mix(in srgb, var(--appearance-current-primary) 62%, #10243f) 100%) !important;
  border-color: color-mix(in srgb, var(--appearance-current-primary) 42%, transparent) !important;
  color: #ffffff !important;
}

/* ── Light Mode: Warm Light Yellow / Amber Background & White Text ── */
html:not(.dark) :where(
  .home-hero-banner,
  .learning-path-header,
  .community-hero,
  .games-hero-section,
  .review-cta-card,
  .folder-deep-dive-banner
),
html[data-appearance-mode='light'] :where(
  .home-hero-banner,
  .learning-path-header,
  .community-hero,
  .games-hero-section,
  .review-cta-card,
  .folder-deep-dive-banner
) {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 14px 36px rgba(245, 158, 11, 0.28) !important;
}

html:not(.dark) :where(
  .home-hero-banner,
  .learning-path-header,
  .community-hero,
  .games-hero-section,
  .review-cta-card,
  .folder-deep-dive-banner
) :where(h1, h2, h3, h4, h5, h6, p, span, div, strong, small, svg, a, label, legend),
html[data-appearance-mode='light'] :where(
  .home-hero-banner,
  .learning-path-header,
  .community-hero,
  .games-hero-section,
  .review-cta-card,
  .folder-deep-dive-banner
) :where(h1, h2, h3, h4, h5, h6, p, span, div, strong, small, svg, a, label, legend) {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

html:not(.dark) :where(
  .home-hero-banner,
  .learning-path-header,
  .community-hero,
  .games-hero-section,
  .review-cta-card,
  .folder-deep-dive-banner
) :where(.text-indigo-200, .text-violet-200\/80, .text-violet-200\/60, .text-white\/90, .text-white\/80, .text-white\/70, .text-white\/60, .text-gray-400, .text-slate-400, .text-[#d8e2ee]),
html[data-appearance-mode='light'] :where(
  .home-hero-banner,
  .learning-path-header,
  .community-hero,
  .games-hero-section,
  .review-cta-card,
  .folder-deep-dive-banner
) :where(.text-indigo-200, .text-violet-200\/80, .text-violet-200\/60, .text-white\/90, .text-white\/80, .text-white\/70, .text-white\/60, .text-gray-400, .text-slate-400, .text-[#d8e2ee]) {
  color: rgba(255, 255, 255, 0.95) !important;
}