html { color-scheme: dark; }
  html[data-theme="light"] {
    color-scheme: light;
    --bg: #eef2f7;
    --panel: #ffffff;
    --panel-2: #f8fafc;
    --border: #cbd5e1;
    --text: #0f172a;
    --muted: #475569;
    --accent: #2563eb;
    --accent-2: #1d4ed8;
    --success: #15803d;
    --danger: #b91c1c;
    --warning: #a16207;
  }

  .chemisode-theme-toggle {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 12020;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid rgba(148, 163, 184, .58);
    border-radius: 999px;
    background: rgba(15, 23, 42, .88);
    color: #f8fafc;
    box-shadow: 0 8px 24px rgba(2, 6, 23, .26);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font: 800 12px/1 Arial, sans-serif;
  }
  .chemisode-theme-toggle:hover { transform: translateY(-1px); filter: brightness(1.08); }
  .chemisode-theme-toggle:focus-visible { outline: 3px solid rgba(56, 189, 248, .4); outline-offset: 2px; }
  .chemisode-theme-toggle-icon { font-size: 17px; line-height: 1; }
  .chemisode-theme-toggle-text { min-width: 30px; text-align: left; }
  html[data-theme="light"] .chemisode-theme-toggle {
    border-color: #94a3b8;
    background: rgba(255, 255, 255, .92);
    color: #0f172a;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
  }

  html[data-theme="light"] body {
    background:
      radial-gradient(circle at 12% 2%, rgba(37, 99, 235, .10), transparent 28%),
      radial-gradient(circle at 88% 4%, rgba(14, 165, 233, .08), transparent 24%),
      linear-gradient(145deg, #f8fafc, #e2e8f0);
    color: var(--text);
  }
  html[data-theme="light"] .app-brand-logo,
  html[data-theme="light"] .auth-brand-logo { filter: drop-shadow(0 8px 14px rgba(37, 99, 235, .16)); }
  html[data-theme="light"] .tabs { border-bottom-color: #cbd5e1; }
  html[data-theme="light"] .tab { color: #475569; }
  html[data-theme="light"] .tab.active { color: #0f172a; background: #ffffff; border-color: #cbd5e1; border-bottom-color: #ffffff; }

  html[data-theme="light"] button.secondary,
  html[data-theme="light"] .quick-example,
  html[data-theme="light"] .reaction-bank button,
  html[data-theme="light"] .teacher-attempt-open-btn,
  html[data-theme="light"] .comparison-floating-close,
  html[data-theme="light"] .molecule-info-close {
    background: #e2e8f0;
    color: #0f172a;
  }
  html[data-theme="light"] button.secondary:hover,
  html[data-theme="light"] .quick-example:hover,
  html[data-theme="light"] .reaction-bank button:hover,
  html[data-theme="light"] .teacher-attempt-open-btn:hover { background: #cbd5e1; }
  html[data-theme="light"] button:disabled,
  html[data-theme="light"] button.secondary:disabled,
  html[data-theme="light"] button.success:disabled,
  html[data-theme="light"] button.danger:disabled { background: #cbd5e1; color: #64748b; }

  html[data-theme="light"] textarea,
  html[data-theme="light"] select,
  html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html[data-theme="light"] .reaction-organic-input,
  html[data-theme="light"] .reaction-bank-target,
  html[data-theme="light"] .teacher-filter-select,
  html[data-theme="light"] .tier-access-controls select,
  html[data-theme="light"] .tier-access-controls input {
    border-color: #94a3b8 !important;
    background: #ffffff !important;
    color: #0f172a !important;
  }
  html[data-theme="light"] input::placeholder,
  html[data-theme="light"] textarea::placeholder { color: #64748b; opacity: 1; }
  html[data-theme="light"] code { background: #e2e8f0; color: #1d4ed8; }
  html[data-theme="light"] main label,
  html[data-theme="light"] .toolbar label,
  html[data-theme="light"] .structure-input label { color: #334155 !important; }

  html[data-theme="light"] .card,
  html[data-theme="light"] .examples,
  html[data-theme="light"] .quiz-difficulty-menu,
  html[data-theme="light"] .reaction-choice-panel,
  html[data-theme="light"] .reaction-mastery-section,
  html[data-theme="light"] .reaction-hint,
  html[data-theme="light"] .reaction-incorrect-list,
  html[data-theme="light"] .reaction-observation,
  html[data-theme="light"] .account-bar,
  html[data-theme="light"] .account-manage-card,
  html[data-theme="light"] .activity-calendar-card,
  html[data-theme="light"] .organic-analysis-guess-card,
  html[data-theme="light"] .organic-analysis-spectrum-card,
  html[data-theme="light"] .organic-analysis-summary-card,
  html[data-theme="light"] .organic-analysis-tests-card,
  html[data-theme="light"] .organic-analysis-xp-card,
  html[data-theme="light"] .comparison-card,
  html[data-theme="light"] .comparison-input-card,
  html[data-theme="light"] .comparison-section,
  html[data-theme="light"] .molecule-info-card,
  html[data-theme="light"] .molecule-info-field,
  html[data-theme="light"] .molecule-info-property,
  html[data-theme="light"] .teacher-summary-card,
  html[data-theme="light"] .teacher-tool-card,
  html[data-theme="light"] .teacher-manage-card,
  html[data-theme="light"] .teacher-manage-invite-card,
  html[data-theme="light"] .teacher-class-code-card,
  html[data-theme="light"] .teacher-class-students-card,
  html[data-theme="light"] .teacher-attempt-card,
  html[data-theme="light"] .teacher-attempt-summary-card,
  html[data-theme="light"] .site-admin-card,
  html[data-theme="light"] .site-admin-summary-card,
  html[data-theme="light"] .site-admin-class-picker-card,
  html[data-theme="light"] .site-admin-users-card,
  html[data-theme="light"] .tier-account-summary > div,
  html[data-theme="light"] .tier-access-row {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
  }
  html[data-theme="light"] .card-header,
  html[data-theme="light"] .comparison-card-header,
  html[data-theme="light"] .site-admin-modal-head,
  html[data-theme="light"] .teacher-view-header { border-color: #cbd5e1; }

  html[data-theme="light"] .quiz-difficulty-option,
  html[data-theme="light"] .quiz-functional-option,
  html[data-theme="light"] .reaction-slot,
  html[data-theme="light"] .reaction-choice-option,
  html[data-theme="light"] .account-manage-row,
  html[data-theme="light"] .site-admin-class-option,
  html[data-theme="light"] .site-admin-user-row,
  html[data-theme="light"] .teacher-skill-row,
  html[data-theme="light"] .teacher-activity-item,
  html[data-theme="light"] .teacher-attempt-answer-box,
  html[data-theme="light"] .teacher-attempt-analysis-empirical,
  html[data-theme="light"] .teacher-attempt-analysis-molecule,
  html[data-theme="light"] .teacher-attempt-analysis-step,
  html[data-theme="light"] .teacher-attempt-analysis-step-answer,
  html[data-theme="light"] .organic-analysis-step,
  html[data-theme="light"] .organic-analysis-choice,
  html[data-theme="light"] .organic-analysis-test-result,
  html[data-theme="light"] .comparison-spectrum {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    color: #0f172a;
  }
  html[data-theme="light"] .reaction-slot.unused { background: #f1f5f9 !important; }
  html[data-theme="light"] .reaction-slot.correct,
  html[data-theme="light"] .teacher-attempt-analysis-step.complete,
  html[data-theme="light"] .teacher-attempt-analysis-step-answer.correct { background: #ecfdf5 !important; border-color: #22c55e !important; }
  html[data-theme="light"] .reaction-slot.incorrect,
  html[data-theme="light"] .teacher-attempt-analysis-step.hint { background:#fef3c7 !important; border-color:#f59e0b !important; }
  html[data-theme="light"] .teacher-attempt-analysis-step.incomplete,
  html[data-theme="light"] .teacher-attempt-analysis-step-answer.incorrect { background: #fef2f2 !important; border-color: #ef4444 !important; }
  html[data-theme="light"] .reaction-slot.missing { background: #fffbeb !important; border-color: #d97706 !important; }

  html[data-theme="light"] button.molecule-temperature-unit-btn {
    border-color:#94a3b8; background:#f8fafc; color:#334155;
  }
  html[data-theme="light"] button.molecule-temperature-unit-btn:hover { border-color:#2563eb; background:#eff6ff; }
  html[data-theme="light"] button.molecule-temperature-unit-btn.active { border-color:#2563eb; background:#2563eb; color:#ffffff; }

  html[data-theme="light"] .reaction-slot-value,
  html[data-theme="light"] .reaction-answer-name,
  html[data-theme="light"] .molecule-info-value,
  html[data-theme="light"] .molecule-info-property-value,
  html[data-theme="light"] .teacher-attempt-question,
  html[data-theme="light"] .teacher-attempt-analysis-molecule-name,
  html[data-theme="light"] .teacher-attempt-analysis-step-title h4,
  html[data-theme="light"] .teacher-attempt-analysis-step-answer strong,
  html[data-theme="light"] .site-admin-table,
  html[data-theme="light"] .account-identity strong { color: #0f172a !important; }
  html[data-theme="light"] .guest-activity-note { border-color:#2563eb; background:#dbeafe; color:#1e3a8a; }
  html[data-theme="light"] .guest-activity-note:hover { background:#bfdbfe; color:#172554; }
  html[data-theme="light"] .student-streak-tile {
    border-color:#d97706; background:#fffbeb; color:#92400e;
  }
  html[data-theme="light"] .student-streak-tile:hover {
    border-color:#b45309; background:#fef3c7; color:#78350f;
  }
  html[data-theme="light"] .student-streak-tile:focus-visible { outline-color:#d97706; }
  html[data-theme="light"] .subtitle,
  html[data-theme="light"] .notes,
  html[data-theme="light"] .example,
  html[data-theme="light"] .status,
  html[data-theme="light"] .reaction-bank-note,
  html[data-theme="light"] .reaction-status-row,
  html[data-theme="light"] .molecule-info-label,
  html[data-theme="light"] .molecule-info-ref,
  html[data-theme="light"] .molecule-info-disclaimer,
  html[data-theme="light"] .account-identity span,
  html[data-theme="light"] .account-sync,
  html[data-theme="light"] .teacher-activity-meta,
  html[data-theme="light"] .teacher-activity-time,
  html[data-theme="light"] .teacher-class-code-muted,
  html[data-theme="light"] .site-admin-note,
  html[data-theme="light"] .tier-account-summary span,
  html[data-theme="light"] .tier-access-row-title span { color: #475569 !important; }
  html[data-theme="light"] .example b,
  html[data-theme="light"] .quiz-difficulty-menu-title,
  html[data-theme="light"] .reaction-choice-title,
  html[data-theme="light"] .molecule-info-card h3,
  html[data-theme="light"] .teacher-dashboard-top h2,
  html[data-theme="light"] .site-admin-top h2 { color: #0f172a !important; }

  html[data-theme="light"] .startup-splash {
    background:
      radial-gradient(circle at 50% 35%, rgba(37, 99, 235, .13), transparent 34%),
      radial-gradient(circle at 18% 20%, rgba(14, 165, 233, .10), transparent 28%),
      linear-gradient(145deg, rgba(248, 250, 252, .99), rgba(226, 232, 240, .99));
    color: #0f172a;
  }
  html[data-theme="light"] .startup-splash-card {
    border-color: rgba(100, 116, 139, .34);
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .18);
  }
  html[data-theme="light"] .startup-splash-message,
  html[data-theme="light"] .startup-progress-row { color: #334155; }
  html[data-theme="light"] .startup-progress-row { border-color: #cbd5e1; background: rgba(255,255,255,.68); }
  html[data-theme="light"] .startup-splash.logo-transitioning .startup-splash-card { background: rgba(255,255,255,.45); }

  html[data-theme="light"] .auth-overlay,
  html[data-theme="light"] .molecule-info-overlay,
  html[data-theme="light"] .public-page-overlay,
  html[data-theme="light"] .teacher-view-overlay,
  html[data-theme="light"] .site-admin-modal-overlay,
  html[data-theme="light"] .teacher-create-class-backdrop { background: rgba(226, 232, 240, .90); }
  html[data-theme="light"] .auth-card,
  html[data-theme="light"] .molecule-info-page,
  html[data-theme="light"] .teacher-view-card,
  html[data-theme="light"] .site-admin-modal,
  html[data-theme="light"] .teacher-create-class-dialog,
  html[data-theme="light"] .public-contact-card {
    border-color: #94a3b8;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 24px 64px rgba(15,23,42,.20);
  }
  html[data-theme="light"] .auth-card-header,
  html[data-theme="light"] .molecule-info-header,
  html[data-theme="light"] .teacher-view-header {
    border-color: #cbd5e1;
    background: linear-gradient(125deg, #dbeafe, #f8fafc);
  }
  html[data-theme="light"] .auth-card-header p,
  html[data-theme="light"] .molecule-info-header p { color: #1e40af; }
  html[data-theme="light"] .auth-field,
  html[data-theme="light"] .auth-password-rules,
  html[data-theme="light"] .auth-status,
  html[data-theme="light"] .molecule-info-status { color: #334155; }
  html[data-theme="light"] .molecule-info-reference-note { border-color:#bfdbfe; background:#eff6ff; color:#1e3a8a; }
  html[data-theme="light"] .auth-note { color: #64748b; }
  html[data-theme="light"] .auth-setup-note { background: #fffbeb; color: #92400e; }
  html[data-theme="light"] .auth-expired-message { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
  html[data-theme="light"] .auth-expired-message strong { color: #78350f; }

  html[data-theme="light"] .teacher-dashboard-top,
  html[data-theme="light"] .site-admin-top {
    border-color: #cbd5e1;
    background: linear-gradient(125deg, #dbeafe, #ffffff);
    box-shadow: 0 10px 26px rgba(15,23,42,.07);
  }
  html[data-theme="light"] .teacher-dashboard-top p,
  html[data-theme="light"] .teacher-class-picker,
  html[data-theme="light"] .site-admin-top p { color: #334155; }
  html[data-theme="light"] .teacher-view-sheet,
  html[data-theme="light"] .teacher-management-sheet,
  html[data-theme="light"] .teacher-calendar-sheet,
  html[data-theme="light"] .teacher-attempt-detail-sheet { background: #f8fafc; color: #0f172a; }
  html[data-theme="light"] .teacher-attempt-json { background: #e2e8f0; color: #0f172a; }
  html[data-theme="light"] .teacher-attempt-reaction-replay { border-color: #cbd5e1; background: #ffffff; }
  html[data-theme="light"] .teacher-attempt-legacy-note { background: #fffbeb; color: #92400e; }

  html[data-theme="light"] .site-admin-tabs { border-color: #cbd5e1; background: #f8fafc; }
  html[data-theme="light"] .site-admin-tab-btn { color: #475569; }
  html[data-theme="light"] .site-admin-tab-btn.active { background: #ffffff; color: #0f172a; }
  html[data-theme="light"] .site-admin-table-wrap { border-color: #cbd5e1; background: #ffffff; }
  html[data-theme="light"] .site-admin-table th { background: #e2e8f0; color: #0f172a; }
  html[data-theme="light"] .site-admin-table td { border-color: #e2e8f0; color: #0f172a; }
  html[data-theme="light"] .site-admin-output { background: #e2e8f0; color: #0f172a; }

  html[data-theme="light"] .comparison-floating-structures {
    border-color: #94a3b8;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 44px rgba(15,23,42,.20);
  }
  html[data-theme="light"] .comparison-floating-card { border-color: #cbd5e1; background: #ffffff; }
  html[data-theme="light"] .comparison-floating-header,
  html[data-theme="light"] .comparison-floating-title { color: #0f172a; border-color: #cbd5e1; }
  html[data-theme="light"] .comparison-floating-header span,
  html[data-theme="light"] .comparison-floating-note { color: #475569; }

  html[data-theme="light"] .tier-banner {
    border-color: #0284c7;
    background: linear-gradient(135deg, #e0f2fe, #dbeafe);
    color: #0c4a6e;
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
  }
  html[data-theme="light"] .tier-banner span { color: #075985; }
  html[data-theme="light"] .tier-chip { border-color: #38bdf8; background: #bae6fd; color: #0c4a6e !important; }
  html[data-theme="light"] .tier-card-lock { border-color: #0284c7; background: rgba(255,255,255,.94); color: #0c4a6e; }
  html[data-theme="light"] .tier-card-lock span { color: #075985; }
  html[data-theme="light"] .tier-list-preview-note { background: #fffbeb; color: #92400e; }
  html[data-theme="light"] .tier-account-card { background: linear-gradient(135deg,#e0f2fe,#eff6ff) !important; }
  html[data-theme="light"] .tier-account-summary strong { color: #0c4a6e; }

  @media (max-width: 620px) {
    .chemisode-theme-toggle { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); min-width: 40px; padding: 8px 9px; }
    .chemisode-theme-toggle-text { display: none; }
    .app-brand-header { padding-right: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .chemisode-theme-toggle { transition: none; }
  }