/* Shared theme layer. Load after page styles; geometry stays in those files. */
:root {
  --surface: #fefdfb;
  --border-soft: #f1ece7;
}

html[data-theme="light"] {
  background-color: #fefdfb;
  color: #060606;
}

html[data-theme="dark"] {
  background-color: #131313;
  color: #ededed;
  --primary: #22c5db;
  --foreground: #ededed;
  --ink: #ededed;
  --secondary-100: #ededed;
  --espresso: #ededed;
  --secondary-200: #c7c7c7;
  --cocoa: #c7c7c7;
  --secondary-300: #a3a3a3;
  --muted: #a3a3a3;
  --secondary-400: #929292;
  --quiet: #929292;
  --secondary-500: #303030;
  --sand: #303030;
  --secondary-600: #303030;
  --border: #303030;
  --secondary-700: #303030;
  --oat: #303030;
  --secondary-800: #242424;
  --mist: #242424;
  --secondary-850: #1c1c1c;
  --whisper: #1c1c1c;
  --secondary-900: #131313;
  --canvas: #131313;
  --secondary-950: transparent;
  --surface: #131313;
  --border-soft: #222222;
  --surface-bright: #242424;
  --surface-container-lowest: #1c1c1c;
  --surface-container-low: #1c1c1c;
  --surface-container: #242424;
  --surface-container-high: #303030;
  --surface-container-highest: #383838;
  --on-surface: #ededed;
  --on-surface-strong: #ededed;
  --on-surface-medium: #c7c7c7;
  --on-surface-variant: #a3a3a3;
  --outline: #303030;
  --outline-soft: #222222;
  --theme-panel: #242424;
  --theme-sidebar: #101010;
  --theme-action: #ededed;
  --theme-on-action: #171717;
  --theme-hover: #303030;
  --theme-overlay: rgba(10, 10, 10, .65);
  --theme-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  --legal-canvas: #131313;
  --legal-ink: #ededed;
  --legal-cocoa: #c7c7c7;
  --legal-muted: #a3a3a3;
  --legal-faint: #929292;
  --legal-line: #303030;
  --legal-wash: #242424;
  --legal-teal: #22c5db;
  color-scheme: dark;
}

/* Navigation: slightly darker than the workspace, with charcoal selection. */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .app-shell[data-sidebar="expanded"] .sidebar {
  background: var(--theme-sidebar);
  border-color: var(--border-soft);
}
html[data-theme="dark"] .app-shell[data-sidebar="expanded"] :is(.rail-action:hover, .profile-button:hover, .profile-pill-button:hover, .sidebar-footer-btn:hover, .rail-action.is-active, .profile-button[aria-expanded="true"], .profile-pill-button[aria-expanded="true"], .sidebar-footer-btn.is-active, .sidebar-footer-btn[aria-expanded="true"], .sidebar-header-icon:hover, .sidebar-browse-button:hover),
html[data-theme="dark"] .app-shell[data-sidebar="expanded"] #getAppTrigger[aria-expanded="true"] { background: var(--theme-hover); }
html[data-theme="dark"] .sidebar-footer { border-color: var(--border-soft); background: var(--theme-sidebar); }
html[data-theme="dark"] .profile-pill-button { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .app-shell[data-sidebar="expanded"] .sidebar-footer-btn { border-color: rgba(255, 255, 255, 0.08) !important; color: var(--foreground); }
/* Apply only to the monochrome Cropus/Atelier marks, never to media or partner logos. */
html[data-theme="dark"] :is(.cropus-logo, .sidebar-brand img, .legal-brand-mark img, .legal-footer-brand-mark img, .atelier-edit-icon) { filter: brightness(0) invert(1); }
html[data-theme="dark"] :is(.model-logo-box, .image-mark, .video-mark) img[src*="assets/models/"] { filter: brightness(0) invert(.82); }

/* Popovers and feedback use the same panel surface as the reference. */
html[data-theme="dark"] :is(.rail-flyout, .profile-menu, .help-menu, .appearance-menu, .app-download-card, .agent-mode-menu, .image-option-menu, .video-option-menu, .search-modal, .settings-dialog, .project-dialog, .header-tooltip, .coming-soon-toast, .composer-plus-menu, .composer-plus-sublist, .history-context-menu, .history-context-submenu, .cropus-modal-card) {
  background: var(--theme-panel);
  border-color: var(--border);
  box-shadow: var(--theme-shadow);
}
html[data-theme="dark"] :is(.outline-pill[data-coming-soon]::after, .sidebar .coming-soon-trigger::after) { background: var(--theme-panel); box-shadow: var(--theme-shadow); }
html[data-theme="dark"] :is(.search-overlay, .settings-overlay, .project-dialog-overlay, .drop-overlay) { background: var(--theme-overlay); }
html[data-theme="dark"] :is(.search-modal-header, .search-modal-footer, .search-modal-esc, .search-modal-key, .search-modal-key-combo, .app-download-preview, .outline-pill) { border-color: var(--border); }
html[data-theme="dark"] :is(.search-modal-esc, .search-modal-key, .search-modal-key-combo) { background: var(--secondary-850); }
html[data-theme="dark"] .app-download-title { color: var(--foreground); }
html[data-theme="dark"] .send-button { background: var(--theme-action); color: var(--theme-on-action); }
html[data-theme="dark"] .send-button:hover { background: #d5d5d5; color: var(--theme-on-action); }
html[data-theme="dark"] .composer.is-dictating .dictate-button { box-shadow: 0 0 0 2px rgba(34,197,219,.18); }
html[data-theme="dark"] :is(.dictation-feedback, .dictation-mic-wrap[data-tooltip]::after) { border-color: var(--border); background: var(--theme-panel); box-shadow: var(--theme-shadow); }
html[data-theme="dark"] .app-download-btn-secondary { background: transparent; color: var(--foreground); border-color: var(--border); }
html[data-theme="dark"] .app-download-btn-secondary:hover { background: var(--theme-hover); }
html[data-theme="dark"] .app-download-badge { background: rgba(0,0,0,.07); color: #51412c; }
html[data-theme="dark"] .project-dialog-input { background: var(--secondary-850); border-color: var(--border); color: var(--foreground); }
html[data-theme="dark"] .project-dialog-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(34, 197, 219, .16); }
html[data-theme="dark"] :is(.project-dialog-mark, .project-template, .project-dialog-cancel) { border-color: var(--border); }
html[data-theme="dark"] .project-dialog-mark { background: var(--secondary-850); }
html[data-theme="dark"] .project-template:hover, html[data-theme="dark"] .project-template.is-selected, html[data-theme="dark"] .project-dialog-cancel:hover { background: var(--theme-hover); color: var(--foreground); }
html[data-theme="dark"] .project-dialog-create:not(:disabled) { border-color: var(--theme-action); background: var(--theme-action); color: var(--theme-on-action); }
html[data-theme="dark"] .project-dialog-create:not(:disabled):hover { background: #d5d5d5; border-color: #d5d5d5; }
html[data-theme="dark"] .project-dialog-create:disabled { border-color: var(--theme-hover); background: var(--theme-hover); color: var(--muted); }
html[data-theme="dark"] .sidebar-project-item:hover { background: var(--theme-hover); color: var(--foreground); }
html[data-theme="dark"] :is(.credits-pill, .image-credit, .video-credit) { color: #e9aa58; background: rgba(233,170,88,.09); border-color: rgba(233,170,88,.12); }
html[data-theme="dark"] .profile-log-out { color: #f08080; }
html[data-theme="dark"] .profile-log-out:hover { color: #ffaaaa; background: rgba(240,128,128,.1); }

/* Home and studio composers. */
html[data-theme="dark"] .title-wrap h1 { background: none; color: var(--cocoa); text-shadow: none; }
html[data-theme="dark"] :is(.composer, .image-composer, .video-composer) { background: var(--theme-panel); border-color: var(--border); box-shadow: none; }
html[data-theme="dark"] :is(.composer, .image-composer, .video-composer):focus-within { border-color: var(--primary); }
html[data-theme="dark"] :is(.image-composer textarea, .video-composer textarea)::placeholder { color: var(--muted); }
html[data-theme="dark"] .context-strip { background: var(--secondary-850); }
html[data-theme="dark"] :is(.icon-control:hover, .text-control:hover, .context-control:hover) { background: var(--theme-hover); }
html[data-theme="dark"] .mode-toggle { background: var(--theme-panel); }
html[data-theme="dark"] .active-pill { border-color: var(--border-soft); }
html[data-theme="dark"] .get-app-pill { background: transparent; }
html[data-theme="dark"] .get-app-pill:hover { background: var(--theme-panel); }
html[data-theme="dark"] :is(.image-reference-item, .video-reference-item, .image-reference-add, .video-reference-add, .drop-overlay-box, .drop-card-media, .drop-card-doc) { background: var(--theme-panel); border-color: var(--border); }
html[data-theme="dark"] .drop-card-plus { color: var(--theme-on-action); border-color: var(--theme-panel); }
html[data-theme="dark"] .image-tool-badge { color: var(--theme-on-action); }
html[data-theme="dark"] :is(.image-cost-badge, .video-cost-badge) { background: var(--theme-hover); color: var(--foreground); }
html[data-theme="dark"] .cost-bolt { fill: currentColor; }

/* Primary actions invert; their icons inherit the readable dark foreground. */
html[data-theme="dark"] :is(.artifacts-create, .scheduled-create-btn, .plugins-add-btn, .app-download-btn-primary, .profile-upgrade-button, .image-send, .video-send, .skip-link) {
  background: var(--theme-action);
  color: var(--theme-on-action);
}
html[data-theme="dark"] :is(.artifacts-create, .scheduled-create-btn, .plugins-add-btn, .app-download-btn-primary, .profile-upgrade-button, .image-send, .video-send):hover { background: #d5d5d5; color: var(--theme-on-action); }
html[data-theme="dark"] .scheduled-create-btn svg { stroke: currentColor; }
html[data-theme="dark"] .scheduled-empty-btn { border-color: var(--border); }
html[data-theme="dark"] .scheduled-empty-btn:hover { background: var(--theme-hover); color: var(--foreground); }
html[data-theme="dark"] .scheduled-filter.is-active { background: var(--theme-hover); color: var(--foreground); }
html[data-theme="dark"] .scheduled-search-input { background: var(--theme-panel); }

/* Plugin marks retain their original brand colors on charcoal tiles. */
html[data-theme="dark"] :is(.plugins-title, .plugins-section-heading, .plugin-title, .plugins-see-all-link:hover, .plugins-cat-pill:hover, .plugins-tab-btn:hover) { color: var(--foreground); }
html[data-theme="dark"] :is(.plugins-cat-pill.is-active, .plugins-tab-btn.is-active) { background: var(--theme-hover); color: var(--foreground); }
html[data-theme="dark"] :is(.plugins-tab-btn:hover, .plugin-card:hover) { background: var(--theme-panel); }
html[data-theme="dark"] .plugins-search-input { background: var(--theme-panel); border-color: var(--border); color: var(--foreground); box-shadow: none; }
html[data-theme="dark"] .plugins-search-input:focus { border-color: var(--primary); }
html[data-theme="dark"] .plugin-icon-tile { background: var(--theme-hover); border-color: var(--border); box-shadow: none; }

/* Mobile access to the same Light / Dark / System preference. */
.mobile-theme-toggle { display: none; }
@media (max-width: 767px) {
  .mobile-theme-toggle { display: inline-grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
  .mobile-theme-toggle:hover { background: var(--mist); }
  .mobile-theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .mobile-theme-toggle svg { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-theme-toggle[data-preference="Light"] .theme-icon-light,
  .mobile-theme-toggle[data-preference="Dark"] .theme-icon-dark,
  .mobile-theme-toggle[data-preference="System"] .theme-icon-system { display: block; }
  :is(.artifacts-topbar, .scheduled-topbar) .mobile-theme-toggle { order: -1; margin-right: auto; }
  .topbar-left { display: flex; align-items: center; gap: 6px; }
  :is(.image-topbar, .video-topbar) .mobile-theme-toggle { order: -1; }
  .app-shell[data-sidebar="expanded"] { grid-template-columns: minmax(0, 1fr); }
}

html[data-theme="dark"] .signout-overlay {
  background: rgba(0, 0, 0, 0.65);
}
html[data-theme="dark"] .signout-card {
  background: var(--theme-panel, #201e1c);
  border-color: var(--border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .signout-icon-badge {
  background: var(--theme-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--border-soft, rgba(255, 255, 255, 0.08));
  color: var(--foreground, #f3ede7);
}
html[data-theme="dark"] .signout-title {
  color: var(--foreground, #f3ede7);
}
html[data-theme="dark"] .signout-desc {
  color: var(--secondary-300, #9f9187);
}
html[data-theme="dark"] :is(.credits-pill, .image-credit, .video-credit).is-logged-out {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--foreground, #f3ede7) !important;
}
html[data-theme="dark"] :is(.credits-pill, .image-credit, .video-credit).is-logged-out:hover {
  background: var(--theme-hover, rgba(255, 255, 255, 0.08)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] :is(.credits-pill, .image-credit, .video-credit).is-loading {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .credits-pill-skeleton {
  color: var(--foreground, #f3ede7);
}
html[data-theme="dark"] .profile-pill-button.is-logged-out .profile-photo {
  color: var(--foreground, #f3ede7);
}

/* History Context Menu & Submenu */
html[data-theme="dark"] .history-context-menu-item { color: var(--foreground); }
html[data-theme="dark"] .history-context-menu-item:hover { background: var(--theme-hover); color: var(--foreground); }
html[data-theme="dark"] .history-context-menu-divider { background: var(--border-soft); }
html[data-theme="dark"] .history-context-menu-item svg { opacity: 0.85; }

/* Composer Plus Menu */
html[data-theme="dark"] .composer-plus-item { color: var(--cocoa); }
html[data-theme="dark"] :is(.composer-plus-item:hover, .composer-plus-subitem:hover) { background: var(--theme-hover); color: var(--foreground); }
html[data-theme="dark"] .composer-plus-item:hover .composer-plus-copy strong { color: var(--foreground); }
html[data-theme="dark"] .composer-plus-item:hover .composer-plus-copy small { color: var(--muted); }
html[data-theme="dark"] .composer-plus-subitem.is-selected { background: var(--theme-hover); color: var(--foreground); }

/* Project Detail View */
html[data-theme="dark"] .project-detail-rename-input { background: var(--secondary-850); border-color: var(--border); color: var(--foreground); }
html[data-theme="dark"] .project-detail-rename-input:focus { border-color: var(--primary); }
html[data-theme="dark"] .project-detail-icon { background: var(--theme-hover); border-color: var(--border); color: var(--foreground); }
html[data-theme="dark"] :is(.project-actions-btn:hover, .project-actions-btn.is-active) { background: var(--theme-hover); border-color: var(--border); color: var(--foreground); }
html[data-theme="dark"] .project-context-btn { background: var(--secondary-850); border-color: var(--border); color: var(--foreground); }
html[data-theme="dark"] .project-context-btn:hover { background: var(--theme-hover); color: var(--foreground); }
html[data-theme="dark"] .project-context-btn.has-instructions { border-color: rgba(34, 197, 219, 0.35); background: rgba(34, 197, 219, 0.1); color: var(--primary); }
html[data-theme="dark"] .project-tabs-bar { border-bottom-color: var(--border-soft); }
html[data-theme="dark"] .project-tab-btn { color: var(--muted); }
html[data-theme="dark"] :is(.project-tab-btn:hover, .project-tab-btn.is-active) { color: var(--foreground); }
html[data-theme="dark"] .project-tab-btn.is-active::after { background: var(--foreground); }
html[data-theme="dark"] .project-chat-item { background: var(--secondary-850); border-color: var(--border); }
html[data-theme="dark"] .project-chat-item:hover { background: var(--theme-panel); border-color: var(--border); }
html[data-theme="dark"] .project-chat-title { color: var(--foreground); }
html[data-theme="dark"] .project-chat-preview { color: var(--muted); }

/* Cropus Modal Card (Custom Instructions / Modals) */
html[data-theme="dark"] .cropus-modal-card { background: var(--theme-panel); border-color: var(--border); box-shadow: var(--theme-shadow); }
html[data-theme="dark"] .cropus-modal-textarea { background: var(--secondary-850); border-color: var(--border); color: var(--foreground); }
html[data-theme="dark"] .cropus-modal-textarea:focus { background: var(--secondary-850); border-color: var(--primary); }
html[data-theme="dark"] .cropus-modal-cancel { background: transparent; border-color: var(--border); color: var(--foreground); }
html[data-theme="dark"] .cropus-modal-cancel:hover { background: var(--theme-hover); }
html[data-theme="dark"] .cropus-modal-save { background: var(--theme-action); color: var(--theme-on-action); }
html[data-theme="dark"] .cropus-modal-save:hover:not(:disabled) { background: #d5d5d5; color: var(--theme-on-action); }

/* Completed Result Cards */
html[data-theme="dark"] :is(.image-result-card.is-complete, .video-result-card.is-complete) { background: linear-gradient(145deg, #1c2b2e 0%, #242424 42%, #2a221d 100%); }
html[data-theme="dark"] :is(.image-result-card.is-complete, .video-result-card.is-complete) .image-result-placeholder,
html[data-theme="dark"] :is(.image-result-card.is-complete, .video-result-card.is-complete) .video-result-placeholder {
  background: radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.15) 0 6%, transparent 6.5%), linear-gradient(140deg, transparent 0 42%, rgba(255, 255, 255, 0.06) 42.3% 43.2%, transparent 43.6%);
}

/* Composer Stack Gradient Fog in Dark Mode */
html[data-theme="dark"] .workspace.is-chat-active .composer-stack {
  background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 0.96) 24%, var(--canvas, #131313) 100%);
}

/* Project Dropdown */
html[data-theme="dark"] .project-dropdown-menu {
  background: var(--theme-panel);
  border-color: var(--border);
  box-shadow: var(--theme-shadow);
}
html[data-theme="dark"] .project-dropdown-header {
  color: var(--muted);
}
html[data-theme="dark"] .project-dropdown-item {
  color: var(--foreground);
}
html[data-theme="dark"] .project-dropdown-item:hover {
  background: var(--theme-hover);
}
html[data-theme="dark"] .project-dropdown-item.is-selected {
  background: var(--theme-hover);
  color: var(--foreground);
}
html[data-theme="dark"] .project-dropdown-create-row {
  border-top-color: var(--border-soft);
}
html[data-theme="dark"] .project-dropdown-create-input {
  background: var(--secondary-850);
  border-color: var(--border);
  color: var(--foreground);
}
html[data-theme="dark"] .project-dropdown-create-input:focus {
  border-color: var(--primary);
}
html[data-theme="dark"] .project-dropdown-create-btn {
  background: var(--theme-action);
  color: var(--theme-on-action);
}
html[data-theme="dark"] .project-dropdown-create-btn:hover {
  background: #d5d5d5;
}
html[data-theme="dark"] .project-dropdown-empty {
  color: var(--muted);
}

/* Sidebar History Rename */
html[data-theme="dark"] .sidebar-history-rename-input {
  background: var(--secondary-850);
  border-color: var(--primary);
  color: var(--foreground);
}

/* Chat Not Found */
html[data-theme="dark"] .chat-not-found {
  background: var(--theme-panel);
  border-color: var(--border);
  box-shadow: var(--theme-shadow);
}
html[data-theme="dark"] .chat-not-found-icon {
  background: var(--theme-hover);
  color: var(--muted);
}
html[data-theme="dark"] .chat-not-found-title {
  color: var(--foreground);
}
html[data-theme="dark"] .chat-not-found-desc {
  color: var(--muted);
}
html[data-theme="dark"] .chat-not-found-btn {
  background: var(--theme-action);
  color: var(--theme-on-action);
}
html[data-theme="dark"] .chat-not-found-btn:hover {
  background: #d5d5d5;
}

/* Modal Overlays & Actions */
html[data-theme="dark"] .cropus-modal-overlay {
  background: var(--theme-overlay);
}
html[data-theme="dark"] .cropus-modal-title {
  color: var(--foreground);
}
html[data-theme="dark"] .cropus-modal-desc {
  color: var(--muted);
}
html[data-theme="dark"] .cropus-btn-secondary {
  background: var(--theme-hover);
  border: 1px solid var(--border);
  color: var(--foreground);
}
html[data-theme="dark"] .cropus-btn-secondary:hover {
  background: var(--secondary-500);
}

/* Onboarding Flow */
html[data-theme="dark"] .onboarding-overlay {
  background: var(--theme-overlay);
}
html[data-theme="dark"] .onboarding-card {
  background: var(--theme-panel);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--theme-shadow);
}
html[data-theme="dark"] .onboarding-title {
  color: var(--foreground);
}
html[data-theme="dark"] .onboarding-subtitle {
  color: var(--muted);
}
html[data-theme="dark"] .onboarding-step-bar {
  background: var(--secondary-700);
}
html[data-theme="dark"] .onboarding-step-bar.is-active {
  background: var(--theme-action);
}
html[data-theme="dark"] .onboarding-step-label {
  color: var(--muted);
}
html[data-theme="dark"] .onboarding-back-btn {
  background: var(--secondary-850);
  border-color: var(--border);
  color: var(--foreground);
}
html[data-theme="dark"] .onboarding-back-btn:hover {
  background: var(--theme-hover);
  color: var(--foreground);
}
html[data-theme="dark"] .onboarding-skip-btn {
  color: var(--muted);
}
html[data-theme="dark"] .onboarding-skip-btn:hover {
  color: var(--foreground);
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .onboarding-avatar-frame {
  background: var(--secondary-850);
  box-shadow: 0 0 0 4px var(--theme-panel), 0 0 0 5px var(--border), 0 10px 24px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .onboarding-avatar-frame:hover {
  box-shadow: 0 0 0 4px var(--theme-panel), 0 0 0 5px var(--primary), 0 12px 28px rgba(34, 197, 219, 0.2);
}
html[data-theme="dark"] .onboarding-avatar-monogram {
  color: var(--foreground);
}
html[data-theme="dark"] .onboarding-avatar-badge {
  background: var(--theme-action);
  color: var(--theme-on-action);
  border-color: var(--theme-panel);
}
html[data-theme="dark"] .onboarding-dropzone {
  background: var(--secondary-850);
  border-color: var(--border);
}
html[data-theme="dark"] .onboarding-dropzone:hover {
  border-color: var(--primary);
  background: var(--theme-hover);
}
html[data-theme="dark"] .onboarding-dropzone.has-file {
  background: var(--secondary-850);
  border-color: var(--border);
}
html[data-theme="dark"] .onboarding-dropzone-icon {
  background: var(--secondary-850);
  border-color: var(--border);
  color: var(--foreground);
}
html[data-theme="dark"] .onboarding-dropzone-sub {
  color: var(--muted);
}
html[data-theme="dark"] .onboarding-dropzone-hint {
  color: var(--quiet);
}
html[data-theme="dark"] .onboarding-file-name {
  color: var(--foreground);
}
html[data-theme="dark"] .onboarding-file-size {
  color: var(--muted);
}
html[data-theme="dark"] .onboarding-change-btn {
  background: var(--theme-hover);
  border-color: var(--border);
  color: var(--foreground);
}
html[data-theme="dark"] .onboarding-change-btn:hover {
  background: var(--secondary-500);
}
html[data-theme="dark"] .onboarding-pill {
  background: var(--secondary-850);
  border-color: var(--border);
  color: var(--foreground);
}
html[data-theme="dark"] .onboarding-pill:hover {
  background: var(--theme-hover);
  border-color: var(--border);
}
html[data-theme="dark"] .onboarding-pill.is-selected {
  background: var(--theme-action);
  border-color: var(--theme-action);
  color: var(--theme-on-action);
}
html[data-theme="dark"] .onboarding-pill.is-selected svg {
  stroke: var(--theme-on-action);
}
html[data-theme="dark"] .onboarding-pill.is-selected svg [fill="currentColor"] {
  fill: var(--theme-on-action);
}
html[data-theme="dark"] .onboarding-other-label {
  color: var(--muted);
}
html[data-theme="dark"] .onboarding-other-input {
  background: var(--secondary-850);
  border-color: var(--border);
  color: var(--foreground);
}
html[data-theme="dark"] .onboarding-other-input:focus {
  border-color: var(--primary);
}
html[data-theme="dark"] .onboarding-continue-btn {
  background: var(--theme-action);
  color: var(--theme-on-action);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .onboarding-continue-btn:hover:not(:disabled) {
  background: #d5d5d5;
}

/* System UI: Selection & Scrollbars */
html[data-theme="dark"] ::selection {
  background: rgba(34, 197, 219, 0.35);
  color: var(--foreground);
}
html[data-theme="dark"] {
  scrollbar-color: var(--secondary-600) transparent;
}
html[data-theme="dark"] *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html[data-theme="dark"] *::-webkit-scrollbar-track {
  background: transparent;
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: var(--secondary-600);
  border-radius: 999px;
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-500);
}