:root {
  --theme-toggle-size: 46px;
}

.theme-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 75;
  width: var(--theme-toggle-size);
  height: var(--theme-toggle-size);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card-strong);
  color: var(--ink);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle:focus-visible { outline: 3px solid rgba(198, 113, 57, .28); outline-offset: 3px; }
.theme-toggle svg { width: 21px; height: 21px; display: block; }
.theme-icon-sun { display: none; }

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15120f;
  --paper-2: #211c17;
  --card: #24201a;
  --card-strong: #2b261f;
  --ink: #f6eee3;
  --muted: #c8b9a8;
  --line: #4b4035;
  --orange: #d8894b;
  --orange-dark: #f0aa72;
  --orange-soft: #3a261b;
  --olive: #92a875;
  --olive-dark: #c7d8aa;
  --olive-soft: #273220;
  --danger: #ef8a80;
  --danger-soft: #3b211f;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .24);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] body {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, .025) 31px 32px),
    linear-gradient(90deg, rgba(216, 137, 75, .035), transparent 20%, transparent 80%, rgba(146, 168, 117, .03));
}

html[data-theme="dark"] .panel {
  background: rgba(36, 32, 26, .96);
  border-color: rgba(75, 64, 53, .95);
}

html[data-theme="dark"] .panel.soft { background: rgba(33, 28, 23, .9); }
html[data-theme="dark"] .panel.white { background: rgba(43, 38, 31, .97); }

html[data-theme="dark"] .auth-intro {
  background: linear-gradient(145deg, rgba(38, 31, 25, .98), rgba(31, 26, 21, .94));
  border-color: var(--line);
}

html[data-theme="dark"] .auth-card {
  background: rgba(43, 38, 31, .98);
  border-color: var(--line);
}

html[data-theme="dark"] .google-btn {
  background: var(--card-strong);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .google-btn:hover { border-color: #75624f; }

html[data-theme="dark"] .student-entry .icon-circle {
  background: rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .badge-neutral {
  background: #332c24;
  color: var(--muted);
}

html[data-theme="dark"] .progress,
html[data-theme="dark"] .native-progress,
html[data-theme="dark"] .native-progress::-webkit-progress-bar {
  background: #3a3128;
}

html[data-theme="dark"] .sidebar {
  background: rgba(29, 25, 20, .97);
  border-inline-end-color: var(--line);
}

html[data-theme="dark"] .sidebar-user {
  background: rgba(255, 255, 255, .045);
}

html[data-theme="dark"] .side-nav a.active,
html[data-theme="dark"] .side-nav a:hover,
html[data-theme="dark"] .side-nav button:hover {
  background: var(--card-strong);
  color: var(--orange-dark);
}

html[data-theme="dark"] .subject-card,
html[data-theme="dark"] .student-card {
  background: rgba(43, 38, 31, .96);
}

html[data-theme="dark"] .mobile-topbar {
  background: rgba(21, 18, 15, .9);
  border-bottom-color: rgba(75, 64, 53, .88);
}

html[data-theme="dark"] .mobile-menu-btn,
html[data-theme="dark"] .mobile-back-btn {
  background: rgba(43, 38, 31, .94);
}

html[data-theme="dark"] .mobile-drawer-overlay {
  background: rgba(0, 0, 0, .54);
}

html[data-theme="dark"] .mobile-drawer {
  background: var(--paper-2);
  border-left-color: var(--line);
  box-shadow: -18px 0 42px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] .mobile-drawer-user {
  background: rgba(255, 255, 255, .045);
}

html[data-theme="dark"] .copy-feedback {
  background: #f6eee3;
  color: #1d1915;
}

html[data-theme="dark"] .qa-option:has(input:checked) {
  background: var(--orange-soft);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #9f9181;
}

/* Landing page: the page defines a few light translucent backgrounds inline.
   These higher-specificity rules make those surfaces follow the active theme. */
html[data-theme="dark"] .landing-login-link {
  color: var(--muted);
}

html[data-theme="dark"] .landing-login-link:hover {
  color: var(--ink);
  background: rgba(43, 38, 31, .9);
}

html[data-theme="dark"] .landing-hero-copy {
  color: var(--ink);
  border-color: var(--line);
  background:
    radial-gradient(circle at 14% 10%, rgba(216, 137, 75, .16), transparent 32%),
    linear-gradient(145deg, rgba(43, 38, 31, .98), rgba(33, 28, 23, .96));
}

html[data-theme="dark"] .landing-hero-copy h1,
html[data-theme="dark"] .landing-section-head h2,
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .role-card-landing h3,
html[data-theme="dark"] .step-card h3,
html[data-theme="dark"] .preview-welcome h2,
html[data-theme="dark"] .preview-subject strong {
  color: var(--ink);
}

html[data-theme="dark"] .landing-lead,
html[data-theme="dark"] .landing-trust-row,
html[data-theme="dark"] .landing-section-head p,
html[data-theme="dark"] .feature-card p,
html[data-theme="dark"] .role-card-landing p,
html[data-theme="dark"] .step-card p,
html[data-theme="dark"] .preview-user small,
html[data-theme="dark"] .preview-welcome p,
html[data-theme="dark"] .preview-progress-meta,
html[data-theme="dark"] .preview-subject small,
html[data-theme="dark"] .landing-footer {
  color: var(--muted);
}

html[data-theme="dark"] .landing-preview {
  color: var(--ink);
  background: rgba(43, 38, 31, .97);
  border-color: var(--line);
}

html[data-theme="dark"] .landing-preview::before {
  background: rgba(146, 168, 117, .08);
}

html[data-theme="dark"] .preview-welcome {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(58, 38, 27, .82), rgba(39, 50, 32, .58));
}

html[data-theme="dark"] .preview-subject,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .role-card-landing,
html[data-theme="dark"] .step-card {
  color: var(--ink);
  background: var(--card-strong);
  border-color: var(--line);
}

html[data-theme="dark"] .landing-section {
  color: var(--ink);
  background: rgba(36, 32, 26, .94);
  border-color: var(--line);
}

html[data-theme="dark"] .landing-final-cta {
  background: linear-gradient(135deg, #465236, #303a26);
  color: #f7f3ec;
}

html[data-theme="dark"] .landing-final-cta p {
  color: rgba(247, 243, 236, .82);
}

html[data-theme="dark"] .landing-final-cta .btn {
  background: #f6eee3;
  color: #37432c;
}

html[data-theme="dark"] .landing-final-cta .btn:hover {
  background: #fffaf3;
  color: #273220;
}

html[data-theme="dark"] .theme-toggle {
  background: #f0e5d7;
  border-color: #6b5b49;
  color: #251f19;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }

@media (max-width: 820px) {
  html[data-theme="dark"] body {
    background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, .022) 31px 32px);
  }

  .theme-toggle {
    left: 14px;
    bottom: 14px;
    --theme-toggle-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}

@media print {
  .theme-toggle { display: none !important; }
}