/* =========================================
   dark-theme.css — Zperiod Dark Mode
   A premium, research-grade dark theme with
   deep blacks, subtle glow accents, and
   carefully tuned category colors for contrast.
   ========================================= */

/* ── Core CSS Variables ── */
html.dark-theme {
  --bg-color: #0e0e12;
  --element-bg: #1a1a22;
  --element-hover: #2a2a36;
  --text-primary: #e8e6f0;
  --text-secondary: #9a97a8;
  --text-muted: #605d6d;
  --text-highlight: #f0a050;
  --border-color: rgba(255, 255, 255, 0.06);
  --modal-bg-glass: rgba(22, 22, 30, 0.94);
  --modal-text-main: #ffffff;
  --modal-text-sub: #b0b0c0;
  --p-grad: linear-gradient(135deg, #d0505f 0%, #f0a060 100%);
  --e-grad: linear-gradient(135deg, #2a9ab0 0%, #75d5e8 100%);
  --n-grad: linear-gradient(135deg, #a0a8b0 0%, #3f4a5a 100%);
  --brand-glow: linear-gradient(135deg, #009ac0 0%, #70cc80 100%);
  --premium-grad: linear-gradient(135deg, #5568c8 0%, #6040a0 100%);
  --tm-mark-color: rgba(198, 208, 232, 0.62);
  --cat-alkali-bg: #6c303d;
  --cat-alkali-fg: #ff9ca8;
  --cat-alkaline-bg: #6b5425;
  --cat-alkaline-fg: #ffd37d;
  --cat-transition-bg: #666122;
  --cat-transition-fg: #fff27a;
  --cat-post-bg: #354782;
  --cat-post-fg: #8fc9ff;
  --cat-metalloid-bg: #1f5d53;
  --cat-metalloid-fg: #8ff2dc;
  --cat-other-bg: #446227;
  --cat-other-fg: #97f26f;
  --cat-halogen-bg: #6c6a27;
  --cat-halogen-fg: #fff07a;
  --cat-noble-bg: #5a347f;
  --cat-noble-fg: #d79aff;
  --cat-lanthanide-bg: #8b5b2d;
  --cat-lanthanide-fg: #ffbf80;
  --cat-actinide-bg: #7a3655;
  --cat-actinide-fg: #ff92be;

  color-scheme: dark;
}

/* ── Body / Page Surface ── */
html.dark-theme body {
  background-color: var(--bg-color);
  color: var(--text-primary);
}

html.dark-theme .blank-page {
  background: var(--bg-color);
}

/* ── Desktop-only overlay ── */
html.dark-theme .desktop-only-overlay {
  background: var(--bg-color);
}

html.dark-theme .desktop-only-content {
  background: linear-gradient(135deg, rgba(28, 28, 36, 0.95), rgba(20, 20, 28, 0.8));
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
}

html.dark-theme .desktop-only-icon {
  color: var(--text-primary);
}

html.dark-theme .desktop-only-title {
  color: var(--text-primary);
}

html.dark-theme .desktop-only-btn {
  background: #e8e6f0;
  color: #0e0e12;
}

/* =========================================
   Global Fixed Navigation Pill — Dark
   ========================================= */
html.dark-theme .global-nav {
  background: rgba(18, 18, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

html.dark-theme .nav-brand {
  color: var(--text-primary);
}

html.dark-theme .global-nav-pill {
  background: rgba(255, 255, 255, 0.06);
}

html.dark-theme .nav-pill-slider {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html.dark-theme .nav-pill-btn {
  color: #888;
}

html.dark-theme .nav-pill-btn:hover:not(.active) {
  color: #ccc;
}

html.dark-theme .nav-pill-btn.active {
  color: #fff;
}

/* ── Unit buttons ── */
html.dark-theme .unit-setting-btn.active {
  color: #fff !important;
}

html.dark-theme .sv-nav-pill-slider {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ── Language Dropdown — Dark ── */
html.dark-theme .lang-dropdown-toggle {
  background: rgba(255, 255, 255, 0.06);
  color: #999;
}

html.dark-theme .lang-dropdown-toggle:hover {
  color: #ddd;
  background: rgba(255, 255, 255, 0.1);
}

html.dark-theme .lang-dropdown.open .lang-dropdown-toggle {
  color: #ddd;
  background: rgba(255, 255, 255, 0.1);
}

html.dark-theme .lang-dropdown-menu {
  background: linear-gradient(180deg, rgba(30, 30, 40, 0.97) 0%, rgba(24, 24, 34, 0.97) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark-theme .lang-option {
  color: #c8c6d0;
}

html.dark-theme .lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

html.dark-theme .lang-option.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

html.dark-theme .lang-chevron {
  color: currentColor;
}

html.dark-theme .lang-dropdown.open .lang-chevron {
  color: #bbb;
}

html.dark-theme .nav-theme-toggle {
  background: rgba(255, 255, 255, 0.06);
  color: #999;
}

html.dark-theme .nav-theme-toggle:hover {
  color: #ddd;
  background: rgba(255, 255, 255, 0.1);
}

html.dark-theme .nav-theme-toggle.active {
  color: #f5f5f5;
}

/* ── Element Search — Dark ── */
html.dark-theme .element-search-input {
  background: rgba(255, 255, 255, 0.06);
  color: #e8e6f0;
}

html.dark-theme .element-search-input::placeholder {
  color: #6a677a;
}

html.dark-theme .element-search-input:focus {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 2px rgba(100, 130, 255, 0.25);
}

html.dark-theme .element-search-icon {
  color: #6a677a;
}

html.dark-theme .element-search-wrapper:focus-within .element-search-icon {
  color: #6488ff;
}

html.dark-theme .element-search-results {
  background: rgba(22, 22, 30, 0.98);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45),
              0 4px 12px rgba(0, 0, 0, 0.2),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

html.dark-theme .element-search-item:hover,
html.dark-theme .element-search-item.active {
  background: rgba(255, 255, 255, 0.06);
}

html.dark-theme .element-search-item.active {
  background: rgba(100, 130, 255, 0.1);
}

html.dark-theme .element-search-item-name {
  color: #e8e6f0;
}

html.dark-theme .element-search-item-name mark {
  background: rgba(100, 130, 255, 0.2);
}

html.dark-theme .element-search-item-detail {
  color: #6a677a;
}

html.dark-theme .element-search-item-number {
  color: rgba(232, 230, 240, 0.7);
}

html.dark-theme .element-search-empty {
  color: #6a677a;
}

html.dark-theme .element-search-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

/* ── GitHub Icon ── */
html.dark-theme .nav-github-link {
  color: #e8e6f0;
}

/* ── Version Dropdown — Dark ── */
html.dark-theme .version-dropdown-toggle {
  background: rgba(255, 255, 255, 0.06);
  color: #999;
}

html.dark-theme .version-dropdown-toggle:hover {
  color: #ddd;
  background: rgba(255, 255, 255, 0.1);
}

html.dark-theme .version-dropdown-menu {
  background: linear-gradient(180deg, rgba(30, 30, 40, 0.97) 0%, rgba(24, 24, 34, 0.97) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark-theme .version-dropdown-option {
  color: #777;
}

html.dark-theme .version-dropdown-option:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #999;
}

/* ── Copyright notice ── */
html.dark-theme .copyright-notice {
  color: var(--text-muted);
}

/* =========================================
   Periodic Table Grid — Dark Element Colors
   ========================================= */
html.dark-theme .element {
  background-color: var(--element-bg);
  border-color: var(--border-color);
}

html.dark-theme .element:hover {
  background-color: var(--element-hover);
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark-theme .element .symbol {
  color: var(--text-primary);
}

/* ── Dark category colors: vibrant, saturated tones ── */
html.dark-theme .element.alkali-metal {
  background-color: var(--cat-alkali-bg);
  color: var(--cat-alkali-fg);
}

html.dark-theme .element.alkaline-earth,
html.dark-theme .element.alkaline-earth-metal {
  background-color: var(--cat-alkaline-bg);
  color: var(--cat-alkaline-fg);
}

html.dark-theme .element.transition-metal {
  background-color: var(--cat-transition-bg);
  color: var(--cat-transition-fg);
}

html.dark-theme .element.post-transition-metal {
  background-color: var(--cat-post-bg);
  color: var(--cat-post-fg);
}

html.dark-theme .element.metalloid {
  background-color: var(--cat-metalloid-bg);
  color: var(--cat-metalloid-fg);
}

html.dark-theme .element.other-nonmetal,
html.dark-theme .element.non-metal,
html.dark-theme .element.polyatomic-nonmetal,
html.dark-theme .element.diatomic-nonmetal {
  background-color: var(--cat-other-bg);
  color: var(--cat-other-fg);
}

html.dark-theme .element.halogen {
  background-color: var(--cat-halogen-bg);
  color: var(--cat-halogen-fg);
}

html.dark-theme .element.noble-gas {
  background-color: var(--cat-noble-bg);
  color: var(--cat-noble-fg);
}

html.dark-theme .element.lanthanide {
  background-color: var(--cat-lanthanide-bg);
  color: var(--cat-lanthanide-fg);
}

html.dark-theme .element.actinide {
  background-color: var(--cat-actinide-bg);
  color: var(--cat-actinide-fg);
}

html.dark-theme .element.unknown,
html.dark-theme .element.undefined {
  background-color: #2a2a32;
  color: #aaa;
}

/* ── Legend swatches — also darkened ── */
html.dark-theme .legend-swatch.alkali-metal { background-color: var(--cat-alkali-bg); }
html.dark-theme .legend-swatch.alkaline-earth-metal { background-color: var(--cat-alkaline-bg); }
html.dark-theme .legend-swatch.transition-metal { background-color: var(--cat-transition-bg); }
html.dark-theme .legend-swatch.post-transition-metal { background-color: var(--cat-post-bg); }
html.dark-theme .legend-swatch.metalloid { background-color: var(--cat-metalloid-bg); }
html.dark-theme .legend-swatch.other-nonmetal,
html.dark-theme .legend-swatch.non-metal { background-color: var(--cat-other-bg); }
html.dark-theme .legend-swatch.halogen { background-color: var(--cat-halogen-bg); }
html.dark-theme .legend-swatch.noble-gas { background-color: var(--cat-noble-bg); }
html.dark-theme .legend-swatch.lanthanide { background-color: var(--cat-lanthanide-bg); }
html.dark-theme .legend-swatch.actinide { background-color: var(--cat-actinide-bg); }

/* ── Legend items ── */
html.dark-theme .legend-item {
  background: rgba(30, 30, 40, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

html.dark-theme .legend-item:hover {
  background: rgba(40, 40, 55, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.25);
}

html.dark-theme .legend-item.active {
  background: #fff;
  color: #0f1115;
  box-shadow: inset 0 0 0 1px #fff, 0 8px 24px rgba(0, 0, 0, 0.3);
}

html.dark-theme .legend-item.active .legend-swatch {
  border-color: rgba(0, 0, 0, 0.3);
}

/* ── Element hover states while highlighting ── */
html.dark-theme #periodic-table.highlighting .element.highlighted {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  filter: brightness(1.15);
}

/* ── Lanthanide/Actinide base ── */
html.dark-theme .lanthanide,
html.dark-theme .actinide {
  background-color: #1e1e28;
}

/* =========================================
   EIT Controller — Dark
   ========================================= */
html.dark-theme .eit-property-trigger {
  background: rgba(255, 255, 255, 0.06);
  color: #999;
}

html.dark-theme .eit-property-trigger:hover {
  color: #ddd;
  background: rgba(255, 255, 255, 0.1);
}

html.dark-theme .eit-slider-values span {
  color: #e8e6f0;
  background: rgba(255, 255, 255, 0.06);
}

html.dark-theme .eit-slider-track {
  background: rgba(255, 255, 255, 0.08);
}

html.dark-theme .eit-range-input::-webkit-slider-thumb {
  background: #e8e6f0;
  border-color: #2a2a36;
}

html.dark-theme .eit-range-input::-moz-range-thumb {
  background: #e8e6f0;
  border-color: #2a2a36;
}

html.dark-theme .eit-mode-group {
  background: rgba(255, 255, 255, 0.06);
}

html.dark-theme .eit-mode-btn {
  color: #777;
}

html.dark-theme .eit-mode-btn:hover:not(.active) {
  color: #ccc;
}

html.dark-theme .eit-mode-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html.dark-theme .eit-reset-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #777;
}

html.dark-theme .eit-reset-btn:hover {
  color: #ddd;
  background: rgba(255, 255, 255, 0.1);
}

html.dark-theme .eit-property-panel {
  background: linear-gradient(180deg, rgba(30, 30, 40, 0.97) 0%, rgba(24, 24, 34, 0.97) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark-theme .eit-chip-group-label {
  color: #6a677a;
}

html.dark-theme .eit-chip {
  color: #c8c6d0;
}

html.dark-theme .eit-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

html.dark-theme .eit-chip.active {
  background: #fff;
  color: #0f1115;
}

html.dark-theme .eit-chip[data-property="category"] {
  color: #e8e6f0;
}

html.dark-theme .eit-chip[data-property="category"].active {
  color: #0f1115;
}

html.dark-theme .eit-chip[data-property="category"]:not(.active) {
  background: rgba(255, 255, 255, 0.05);
}

html.dark-theme .eit-chip-group-divider {
  background: rgba(255, 255, 255, 0.06);
}

/* EIT colored cells in dark mode */
html.dark-theme #periodic-table .element.eit-colored .symbol {
  color: var(--eit-cell-text, #fff);
}

html.dark-theme #periodic-table .element.eit-colored .number,
html.dark-theme #periodic-table .element.eit-colored .name {
  color: rgba(15, 17, 21, 0.72) !important;
}

html.dark-theme #periodic-table .element.eit-no-data {
  background-color: #1a1a22 !important;
  color: #555 !important;
  background-image: repeating-linear-gradient(-45deg,
    rgba(100, 110, 130, 0.1) 0,
    rgba(100, 110, 130, 0.1) 6px,
    transparent 6px,
    transparent 12px);
}

html.dark-theme #periodic-table .element.eit-no-data .symbol,
html.dark-theme #periodic-table .element.eit-no-data .number,
html.dark-theme #periodic-table .element.eit-no-data .name {
  color: #555;
}

html.dark-theme #periodic-table .element.eit-focus {
  box-shadow:
    0 0 0 2px rgba(232, 230, 240, 0.25),
    0 8px 22px rgba(0, 0, 0, 0.35);
}

/* EIT menu open blur */
html.dark-theme #periodic-table.eit-menu-open .element {
  opacity: 0.45;
}

/* Range block in dark */
html.dark-theme #periodic-table.eit-active .element.range-block {
  background-color: #1a1a22 !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* =========================================
   Modal — Dark
   ========================================= */
html.dark-theme .modal-overlay {
  background: rgba(0, 0, 0, 0.45);
}

html.dark-theme .modal-content {
  background: var(--modal-bg-glass);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.55);
}

html.dark-theme .modal-content.welcome-redesign {
  background: #1C1C1E;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.6);
}

html.dark-theme .modal-content.changelog-modal-content {
  background: #1C1C1E;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.6);
}

html.dark-theme .about-left {
  background: #10141d;
}

html.dark-theme .about-right {
  background: #0d121a !important;
}

html.dark-theme .author-card {
  background: #161c27;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 48px -14px rgba(0, 0, 0, 0.5);
}

html.dark-theme .connector-line {
  background: linear-gradient(90deg,
      rgba(128, 152, 255, 0.45),
      rgba(165, 120, 255, 0.45));
}

html.dark-theme .connector-line::after {
  background: linear-gradient(180deg, #1c2331, #171d2b);
  color: #9ab2ff;
  box-shadow: 0 0 0 1px rgba(150, 176, 255, 0.18);
}

html.dark-theme .author-details h2 {
  background: linear-gradient(135deg, #dbe7ff 0%, #9db8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.dark-theme .welcome-title,
html.dark-theme .welcome-subtitle {
  color: #eef3ff;
}

html.dark-theme .welcome-subtitle span,
html.dark-theme .welcome-description,
html.dark-theme .welcome-footer {
  color: #9ca8bc;
}

html.dark-theme .feature-pill {
  background: linear-gradient(135deg, rgba(126, 153, 255, 0.18), rgba(110, 82, 222, 0.16));
  border-color: rgba(159, 178, 255, 0.35);
  color: #d6e0ff;
}

html.dark-theme .author-role {
  color: #cfdaff;
  background: linear-gradient(135deg, rgba(95, 126, 232, 0.22), rgba(116, 87, 219, 0.2));
  border-color: rgba(154, 178, 255, 0.24);
}

html.dark-theme .author-meta {
  background: linear-gradient(180deg, #1b2230 0%, #151b28 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark-theme .meta-row,
html.dark-theme .email-text {
  color: #c6d0e0;
}

html.dark-theme .meta-row svg,
html.dark-theme .email-icon,
html.dark-theme .copy-feedback,
html.dark-theme .email-row:hover .copy-feedback {
  color: #9db3ff;
}

html.dark-theme .email-row {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark-theme .email-row:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(157, 179, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html.dark-theme .modal-close {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  opacity: 0.6;
}

html.dark-theme .modal-close:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
  opacity: 1;
}

html.dark-theme .modal-help-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #999;
}

html.dark-theme .modal-help-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #111;
}

html.dark-theme #atom-visual-config {
  color: #d6dbe5;
}

html.dark-theme .atom-config-pill {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

html.dark-theme .atom-config-pill.is-active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ── Modal info pane ── */
html.dark-theme .modal-info-pane {
  background: #1C1C1E;
}

html.dark-theme .level-header {
  background: #181820;
}

html.dark-theme .modal-info-pane.scrolled .level-header {
  background: rgba(24, 24, 32, 0.98);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* =========================================
   Element Detail Modal Settings
   ========================================= */

html.dark-theme .modal-container {
  background: rgba(18, 18, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

html.dark-theme .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .headline-name {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

html.dark-theme .headline-symbol {
  color: #fff;
  opacity: 0.95;
}

html.dark-theme .headline-mass,
html.dark-theme .headline-atomic {
  color: rgba(255, 255, 255, 0.85);
}

/* Modal main layout dividers - Brighter hairline ray */
html.dark-theme .modal-main-row {
  border-right-color: rgba(255, 255, 255, 0.08);
}

html.dark-theme .section-divider {
  border-bottom-color: rgba(255, 255, 128, 0.1);
}

/* ── Feature help overlay ── */
html.dark-theme .feature-help-overlay {
  background: rgba(18, 18, 24, 0.97);
}

html.dark-theme .feature-help-overlay .help-content h3 {
  color: var(--text-primary);
}

html.dark-theme .feature-help-overlay .help-content p {
  color: var(--text-secondary);
}

html.dark-theme .feature-help-overlay .help-content code {
  background: rgba(255, 255, 255, 0.08);
  color: #c8c6d0;
}

html.dark-theme .feature-help-overlay .help-content ul {
  color: var(--text-secondary);
}

/* ── Card slides — Tinted Dark Grays (Apple Style) ── */
html.dark-theme .green-rectangle {
  background: #1d2430;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(176, 190, 209, 0.13); /* Tinted hairline */
}

html.dark-theme .yellow-rectangle {
  background: #1C2A35;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(167, 197, 217, 0.15);
}

html.dark-theme .blue-rectangle {
  background: #1D2E2B;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(157, 203, 195, 0.15);
}

html.dark-theme .red-rectangle {
  background: #2a211d;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(219, 197, 156, 0.13);
}

/* ── Texture Midifiers — Material Overlays ── */
html.dark-theme .texture-cardboard::before,
html.dark-theme .texture-matte::before,
html.dark-theme .texture-metal::before {
  opacity: 0.05 !important;
  mix-blend-mode: overlay;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle depth */
}

html.dark-theme .texture-metal::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(0, 0, 0, 0.2) 100%);
}

/* =========================================
   Level 1 — Concept Card
   ========================================= */

html.dark-theme .modal-category {
  color: rgba(255, 255, 255, 0.9);
}

html.dark-theme .modal-description {
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.6;
}

html.dark-theme .modal-watermark {
  color: rgba(255, 255, 255, 0.04);
  text-shadow: none;
}

/* Ions section outer container — translucent layered depth with Hairline Border */
html.dark-theme .ions-section {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
}

/* Ions section label (常见离子 / 主要同位素) */
html.dark-theme .ions-section .info-label {
  color: rgba(255, 255, 255, 0.8);
}

/* Individual ion/isotope item — translucent overlay with Hairline Border */
html.dark-theme .ion-item,
html.dark-theme .ion-item-expandable {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

html.dark-theme .ion-item-expandable.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ★ Ion symbol — Ivory Gold for premium consistency across L1/L2 */
html.dark-theme .ion-symbol {
  color: #F5E0A7 !important;
}

/* Ion name — keep medium gray */
html.dark-theme .ion-name {
  color: rgba(255, 255, 255, 0.75);
}

/* Detail note in expandable items */
html.dark-theme .ion-detail-note {
  color: rgba(255, 255, 255, 0.45);
}

/* ── Level 2 — Atomic Data Card — Refined Pastel Glow ── */

/* Level 2 top labels (平均原子质量, 电子排布...) */
html.dark-theme .l2-summary-label,
html.dark-theme .l2-configuration-label,
html.dark-theme .atomic-particle-lbl {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem !important; /* Bumped up from 0.62rem */
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Level 2 top data values */
html.dark-theme .l2-summary-value,
html.dark-theme .atomic-particle-num {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 700;
}

/* Isotope display — ★ Ivory Gold for high-end feel */
html.dark-theme .isotope-mass-number,
html.dark-theme .isotope-element-symbol {
  color: #F5E0A7 !important; /* Premium Ivory Gold */
  text-shadow: 0 0 10px rgba(245, 224, 167, 0.2);
}

/* =========================================
   Level 3 — Properties Card
   ========================================= */

/* Glass panel (stat grid wrapper) — Hairline Border & Material */
html.dark-theme .glass-panel {
  background: linear-gradient(180deg, rgba(22, 34, 43, 0.94) 0%, rgba(17, 28, 36, 0.94) 100%);
  border: 1px solid rgba(173, 198, 219, 0.12);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 16px;
}

html.dark-theme .glass-panel-title {
  color: rgba(216, 229, 240, 0.62);
  font-size: 0.8rem !important; /* Bumped up from 0.65rem */
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Oxidation pills — unselected (possible) — light translucent */
html.dark-theme .ox-pill.possible {
  background: rgba(147, 163, 184, 0.14);
  color: rgba(215, 227, 238, 0.82);
  border: 1px solid rgba(173, 198, 219, 0.18);
}

/* Oxidation pills — selected (common) — Tinted Style ★ Apple Brand Blue */
html.dark-theme .ox-pill.common {
  background: linear-gradient(135deg, rgba(36, 120, 255, 0.28) 0%, rgba(64, 163, 255, 0.18) 100%);
  color: #76c2ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Oxidation legend */
html.dark-theme .ox-legend-item {
  color: rgba(220, 230, 240, 0.72);
}

html.dark-theme .ox-dot.common {
  background: #0A84FF;
}

/* L3 stat grid items — Brighter vertical divider */
html.dark-theme .l3-stat-item {
  border-left-color: rgba(173, 198, 219, 0.18);
}

/* Typography Contrast: Labels (Subtitles) */
html.dark-theme .prop-cell-label {
  color: rgba(210, 223, 234, 0.58);
  font-size: 0.8rem !important; /* Bumped up from 0.62rem */
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

html.dark-theme .l3-stat-label {
  color: rgba(210, 223, 234, 0.6);
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

html.dark-theme .l3-stat-value {
  color: #f3f7fb;
}

html.dark-theme .config-hero {
  color: #eaf2ff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* ── Level 4 — History & STSE Card — Glowing Mint/Coral ── */

/* L4 labels (Year, Discovered By, etc.) */
html.dark-theme .red-rectangle .info-label {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem !important; /* Bumped up from 0.62rem */
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* L4 data values */
html.dark-theme .red-rectangle .info-value {
  color: rgba(255, 255, 255, 0.9);
}

/* Prop cells — Material-style depth with Hairline Border */
html.dark-theme .prop-grid-section .prop-cell {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-radius: 14px;
}

/* Typography Contrast: Content Body (Regular Weight) */
html.dark-theme .prop-grid-section .prop-cell div {
  font-weight: 400 !important; 
  line-height: 1.5;
}

/* STSE (First Cell): Minty Apple Glow */
html.dark-theme .prop-grid-section .prop-cell:nth-child(1) .prop-cell-label,
html.dark-theme .prop-grid-section .prop-cell:nth-child(1) div {
  color: #2cc77a !important;
  text-shadow: 0 0 8px rgba(44, 199, 122, 0.12);
}

/* Uses (Second Cell): Pure white-ish reading color */
html.dark-theme .prop-grid-section .prop-cell:nth-child(2) div {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Hazards (Third Cell): Coral Apple Glow */
html.dark-theme .prop-grid-section .prop-cell:nth-child(3) .prop-cell-label,
html.dark-theme .prop-grid-section .prop-cell:nth-child(3) div {
  color: #f05b53 !important;
  text-shadow: 0 0 8px rgba(240, 91, 83, 0.12);
}

html.dark-theme .red-rectangle .prop-cell[style*="16, 185, 129"] {
  background: rgba(6, 78, 59, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

html.dark-theme .red-rectangle .prop-cell[style*="220, 38, 38"] {
  background: rgba(127, 29, 29, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
}

/* ── Prop-grid section ── */
html.dark-theme .prop-grid-section {
  gap: 12px;
}

/* ── Dots ── */
html.dark-theme .dot {
  background: rgba(255, 255, 255, 0.12);
}

html.dark-theme .dot.active {
  background: #fff;
}

/* ── Simplified View & Custom Elements ── */

html.dark-theme .simplified-element-box {
  background: #1C1C1E;
  border-top-color: rgba(255, 255, 255, 0.08);
}

html.dark-theme .simplified-symbol {
  color: #fff;
}

html.dark-theme .simplified-name {
  color: rgba(255, 255, 255, 0.9);
}

html.dark-theme .simplified-category {
  color: rgba(255, 255, 255, 0.55);
}

/* Transition support */
html.theme-transitioning,
html.theme-transitioning * {
  transition: background-color 0.4s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.4s ease !important;
}

html.dark-theme {
  --modal-bg: #1C1C1E;
  --modal-text-main: rgba(255, 255, 255, 0.9);
  --modal-text-sub: rgba(255, 255, 255, 0.55);
}

/* ── Level lock button ── */
html.dark-theme .level-lock-btn {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

html.dark-theme .level-lock-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

html.dark-theme .level-lock-btn.locked {
  background: rgba(255, 255, 255, 0.8);
  color: #111;
}

/* ── Texture toggle button ── */
html.dark-theme .texture-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ccc;
}

html.dark-theme .texture-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Card-info-container (inner scroll area of each level) ── */
html.dark-theme .card-info-container {
  color: #e8e6f0;
}

/* ── Info row labels & values (Level 1 rows) ── */
html.dark-theme .info-label {
  color: rgba(255, 255, 255, 0.45);
}

html.dark-theme .info-value {
  color: #e8e6f0;
  text-shadow: none;
}

/* ── L2 summary values ── */
html.dark-theme .l2-summary-value {
  color: #e8e6f0;
}

html.dark-theme .l2-summary-label {
  color: rgba(255, 255, 255, 0.75);
}

html.dark-theme .l2-configuration-label {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Overview items (charge, type, phase, group) ── */
html.dark-theme .overview-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html.dark-theme .overview-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.dark-theme .ov-label {
  color: rgba(255, 255, 255, 0.9);
}

html.dark-theme .ov-value {
  color: #ffffff;
}

/* ── Property cards (Level 1 grid) ── */
html.dark-theme .prop-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

html.dark-theme .prop-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

html.dark-theme .prop-label {
  color: rgba(255, 255, 255, 0.9);
}

html.dark-theme .prop-value {
  color: #ffffff;
}

html.dark-theme .prop-icon {
  color: #ffffff;
}

/* ── Full-width card (charge card) ── */
html.dark-theme .full-width-card {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03));
}

html.dark-theme .charge-main {
  color: #ffffff;
}

html.dark-theme .charge-sub {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Stat boxes (Level 1 big numbers) ── */
html.dark-theme .stat-label {
  color: rgba(255, 255, 255, 0.9);
}

html.dark-theme .stat-value {
  color: #ffffff;
}

html.dark-theme .stat-unit {
  color: rgba(255, 255, 255, 0.9);
}

/* =========================================
   Ions Page — Dark Mode Transformation
   ========================================= */

/* Category Headings — Professional Studio Style */
html.dark-theme .ion-table-heading {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Delicate hairline */
  padding-bottom: 10px;
  margin-top: 0;
}

/* Ion Card Base — Dark Mode Material */
html.dark-theme .ion-element {
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

html.dark-theme .ion-element:hover {
  background: #2a2a35;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  z-index: 10;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Ions Table Headings */
html.dark-theme .ion-table-heading {
  color: rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Cation (Positive) — System Gold / Warm Tint */
html.dark-theme .ion-element.ion-cation {
  border-left: 2px solid #FFD60A;
  border-color: rgba(255, 214, 10, 0.15);
}

html.dark-theme .ion-element.ion-cation .ion-symbol {
  color: #fff !important;
}

html.dark-theme .ion-element.ion-cation .ion-charge {
  color: rgba(255, 255, 255, 0.85);
}

html.dark-theme .ion-element.ion-cation:hover {
  border-color: rgba(255, 214, 10, 0.4);
}

/* Anion (Negative) — System Blue / Cool Tint */
html.dark-theme .ion-element.ion-anion {
  border-left: 2px solid #0A84FF;
  border-color: rgba(10, 132, 255, 0.15);
}

html.dark-theme .ion-element.ion-anion .ion-symbol {
  color: #fff !important;
}

html.dark-theme .ion-element.ion-anion .ion-charge {
  color: rgba(255, 255, 255, 0.85);
}

html.dark-theme .ion-element.ion-anion:hover {
  border-color: rgba(10, 132, 255, 0.4);
}

/* Inner Text Elements */
html.dark-theme .ion-name {
  color: #fff !important;
  font-weight: 500;
}

/* Polyatomic Specifics — Subtly more complex material */
html.dark-theme .ion-element.ion-polyatomic {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Final Tool Page Adaptations (High Specificity) ── */
html.dark-theme body .balancer-icon {
  background: linear-gradient(135deg, #451a1a 0%, #5d2a1a 100%) !important;
  color: #ff9a9a !important;
}

html.dark-theme body .molar-icon {
  background: linear-gradient(135deg, #453a1a 0%, #5d4d1a 100%) !important;
  color: #ffd29a !important;
}

html.dark-theme body .solubility-icon {
  background: linear-gradient(135deg, #1a453a 0%, #1a5d4d 100%) !important;
  color: #a0ffdf !important;
}

html.dark-theme body .virtual-lab-icon {
  background: linear-gradient(135deg, #3d1a45 0%, #521a5d 100%) !important;
  color: #d1b0ff !important;
}

/* ── Tool Grid Icon Polish (Clean Idle, Glowing Hover) ── */
html.dark-theme .chem-tool-icon-box::after {
  display: none !important;
}

html.dark-theme .chem-tool-card:hover .chem-tool-icon-box::after {
  display: block !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html.dark-theme .chem-tool-card {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── Tool Component Dark Mode Overrides ── */

/* Mode Switcher (Tab Pill) - Clean Flat Style */
html.dark-theme body #mode-switcher-pill {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  box-shadow: none !important;
}

html.dark-theme body #mode-switcher-pill #balancer-mode-slider {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
}

html.dark-theme body #mode-switcher-pill .nav-pill-btn {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  border: none !important;
}

html.dark-theme body #mode-switcher-pill .nav-pill-btn.active {
  color: #000000 !important;
  background: transparent !important;
  border: none !important;
}

/* Balancer UI Containers - Steve Jobs Style Material */
html.dark-theme body .physics-scale-container {
  background: linear-gradient(180deg, #2c2c34 0%, #1c1c21 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-theme body .balancer-input-group,
html.dark-theme body .balancer-float-card,
html.dark-theme body .predictor-left-col,
html.dark-theme body .predictor-right-col {
  background: rgba(255, 255, 255, 0.04) !important;
  border: none !important;
  box-shadow: none !important;
}

html.dark-theme body .balancer-input-label {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

/* Inputs */
html.dark-theme body .balancer-text-input {
  background: rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark-theme body .balancer-text-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Action Status & Buttons */
html.dark-theme body .balancer-status-bar {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

html.dark-theme body .balancer-status-bar.balanced {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
}

html.dark-theme body .balancer-status-bar.unbalanced {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #f59e0b !important;
}

html.dark-theme body .balancer-btn-primary {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-theme body .balancer-btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

html.dark-theme body .balancer-arrow-divider {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Predictor Components */
html.dark-theme body .predictor-type-card {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  box-shadow: none !important;
}

html.dark-theme body .predictor-type-card.selected {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
}

html.dark-theme body .predictor-explanation {
  background: rgba(255, 255, 255, 0.02) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── Solubility Table Dark Mode ── */
html.dark-theme body .sol-calc-wrapper {
  --glass-bg: rgba(45, 45, 52, 0.8) !important;
  --glass-border: rgba(255, 255, 255, 0.1) !important;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  --text-primary: #ffffff !important;
  --text-secondary: #ffffff !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

html.dark-theme body .sol-grid {
  flex: 1 !important;
  min-height: 0 !important;
  gap: 24px !important;
}

/* Left Panel - RESTORING PADDING & SPACING */
html.dark-theme body .sol-glass-card {
  background: linear-gradient(180deg, #2c2d36 0%, #202129 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 20px !important;
  border-radius: 16px !important;
}

html.dark-theme body .sol-section-label {
  margin-bottom: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  display: block !important;
}

html.dark-theme body .sol-input-stack {
  gap: 10px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Right Panel - KEEPING DISTRIBUTED LAYOUT */
html.dark-theme body .sol-table-panel {
  background: linear-gradient(180deg, #30313a 0%, #24252d 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.dark-theme body .sol-glass-table-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 20px 20px 20px !important;
  min-height: 0 !important;
}

html.dark-theme body .sol-glass-table {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin: 0 !important;
}

html.dark-theme body .sol-glass-table tbody {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

html.dark-theme body .sol-glass-table tr {
  display: flex !important;
  flex: 1 !important;
  align-items: center !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html.dark-theme body .sol-glass-table th {
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(235, 240, 248, 0.72) !important;
  height: 44px !important;
}

html.dark-theme body .sol-glass-table td {
  padding: 8px 16px !important;
  color: rgba(232, 238, 247, 0.92) !important;
}

/* Column Widths */
html.dark-theme body .sol-glass-table th:nth-child(1),
html.dark-theme body .sol-glass-table td:nth-child(1) { flex: 1.4 !important; }
html.dark-theme body .sol-glass-table th:nth-child(2),
html.dark-theme body .sol-glass-table td:nth-child(2) { flex: 0.8 !important; }
html.dark-theme body .sol-glass-table th:nth-child(3),
html.dark-theme body .sol-glass-table td:nth-child(3) { flex: 2.2 !important; }

/* ULTRA SPECIFICITY for Formula White (KEEPING) */
html.dark-theme body .sol-calc-wrapper .sol-anion-name,
html.dark-theme body .sol-calc-wrapper .sol-ion-base,
html.dark-theme body .sol-calc-wrapper .sol-ion-scripts,
html.dark-theme body .sol-calc-wrapper .sol-ion,
html.dark-theme body .sol-calc-wrapper .sol-ion span {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

html.dark-theme body .sol-input-field {
  background: linear-gradient(180deg, #14171d 0%, #0f1218 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #f3f6fb !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}

html.dark-theme body .sol-input-field::placeholder {
  color: rgba(207, 214, 224, 0.72) !important;
}

html.dark-theme body .sol-input-field:focus {
  background: linear-gradient(180deg, #171b22 0%, #12161d 100%) !important;
  border-color: rgba(52, 211, 153, 0.95) !important;
  box-shadow:
    0 0 0 3px rgba(16, 185, 129, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html.dark-theme body .sol-result-card {
  border-radius: 18px !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html.dark-theme body .sol-result-card.soluble {
  background: linear-gradient(180deg, rgba(13, 62, 50, 0.96) 0%, rgba(10, 49, 41, 0.98) 100%) !important;
  border: 1.5px solid rgba(45, 212, 191, 0.55) !important;
}

html.dark-theme body .sol-result-card.soluble .sol-result-title {
  color: #34d399 !important;
  text-shadow: 0 1px 10px rgba(52, 211, 153, 0.14) !important;
}

html.dark-theme body .sol-result-card.soluble .sol-result-subtitle {
  color: rgba(214, 255, 240, 0.9) !important;
  opacity: 1 !important;
}

html.dark-theme body .sol-result-card.insoluble {
  background: linear-gradient(180deg, rgba(73, 24, 29, 0.96) 0%, rgba(57, 18, 23, 0.98) 100%) !important;
  border: 1.5px solid rgba(248, 113, 113, 0.58) !important;
}

html.dark-theme body .sol-result-card.insoluble .sol-result-title {
  color: #ff5f5f !important;
  text-shadow: 0 1px 10px rgba(255, 95, 95, 0.12) !important;
}

html.dark-theme body .sol-result-card.insoluble .sol-result-subtitle {
  color: rgba(255, 220, 220, 0.9) !important;
  opacity: 1 !important;
}

html.dark-theme body .sol-result-card.unknown {
  background: linear-gradient(180deg, rgba(76, 56, 19, 0.96) 0%, rgba(57, 42, 14, 0.98) 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.54) !important;
}

html.dark-theme body .sol-result-card.unknown .sol-result-title {
  color: #fbbf24 !important;
}

html.dark-theme body .sol-result-card.unknown .sol-result-subtitle {
  color: rgba(255, 243, 199, 0.9) !important;
  opacity: 1 !important;
}

html.dark-theme body .sol-anion-label {
  color: rgba(210, 217, 228, 0.72) !important;
}

html.dark-theme body .sol-exception-text,
html.dark-theme body .sol-exception-text sup,
html.dark-theme body .sol-exception-text sub,
html.dark-theme body .sol-exception-text .sol-ion,
html.dark-theme body .sol-exception-text .sol-ion-base,
html.dark-theme body .sol-exception-text .sol-ion-scripts,
html.dark-theme body .sol-exception-text .sol-ion span {
  color: rgba(228, 234, 244, 0.9) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(228, 234, 244, 0.9) !important;
}

html.dark-theme body .sol-exception-text {
  line-height: 1.62 !important;
}

html.dark-theme body .sol-check-btn {
  background: linear-gradient(135deg, #065f46 0%, #059669 100%) !important;
  box-shadow: 0 4px 14px rgba(6, 95, 70, 0.4) !important;
  border: none !important;
}



html.dark-theme body .sol-pill-soluble { background: rgba(52, 211, 153, 0.2) !important; color: #34d399 !important; }
html.dark-theme body .sol-pill-insoluble { background: rgba(248, 113, 113, 0.2) !important; color: #f87171 !important; }
html.dark-theme body .sol-exception-text .sol-pill-soluble { color: #34d399 !important; -webkit-text-fill-color: #34d399 !important; }
html.dark-theme body .sol-exception-text .sol-pill-insoluble { color: #f87171 !important; -webkit-text-fill-color: #f87171 !important; }


/* ── Final Ion Detail Modal Adaptations (Refined Level Hierarchy) ── */

/* ── Level 2 & 4: Detail Cards (Overview, Uses, Hazards, STSE) ── */
html.dark-theme body .overview-item,
html.dark-theme body .uses-card,
html.dark-theme body .hazards-card,
html.dark-theme body .stse-section,
html.dark-theme body .edu-card,
html.dark-theme body .prop-card,
html.dark-theme body .data-section,
html.dark-theme body .advanced-data-container .data-section {
  background: #2C2C2E !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  border-radius: 16px !important;
}

/* Specific Tints for Semantic Context - Slightly Deeper for Premium Look */
html.dark-theme body .hazards-card,
html.dark-theme body .edu-safety {
  background: linear-gradient(180deg, rgba(255, 69, 58, 0.12) 0%, #2C2C2E 100%) !important;
  border-color: rgba(255, 69, 58, 0.25) !important;
}

html.dark-theme body .stse-section,
html.dark-theme body .edu-solubility {
  background: linear-gradient(180deg, rgba(48, 209, 88, 0.12) 0%, #2C2C2E 100%) !important;
  border-color: rgba(48, 209, 88, 0.2) !important;
}

/* Typography Hierarchy - Pure White with Transparency */
html.dark-theme body .card-title,
html.dark-theme body .prop-label,
html.dark-theme body .edu-title,
html.dark-theme body .data-title,
html.dark-theme body .exam-label,
html.dark-theme body .iso-title,
html.dark-theme body .section-label {
  color: #ffffff !important;
  opacity: 0.45 !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: none !important; /* Remove legacy muddy borders */
}

html.dark-theme body .card-content,
html.dark-theme body .prop-value,
html.dark-theme body .stse-content,
html.dark-theme body .data-table td,
html.dark-theme body .exam-value,
html.dark-theme body .iso-name,
html.dark-theme body .section-title {
  color: #ffffff !important;
  opacity: 0.95 !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
}

html.dark-theme body .card-icon {
  filter: saturate(0.8) brightness(1.1) !important;
  opacity: 0.9 !important;
}

/* STSE Tags (Pills) */
html.dark-theme body .stse-tag {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  opacity: 0.8 !important;
}

html.dark-theme body .stse-tag:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-1px) !important;
}

html.dark-theme body .edu-title {
  color: #ffffff !important;
  opacity: 0.9 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  letter-spacing: 0.08em !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

html.dark-theme body .sol-label.bad {
  color: #ff8888 !important; /* Brighter red for visibility */
}

html.dark-theme body .l2-configuration-label {
  color: #00e5ff !important; /* Saturated cyan */
  opacity: 1 !important;
  font-weight: 800 !important;
}

html.dark-theme body .atomic-particle-num {
  color: #ffffff !important;
}

html.dark-theme body .atomic-particle-lbl {
  color: #ffffff !important;
  opacity: 0.8 !important;
}

html.dark-theme body .ov-label, 
html.dark-theme body .prop-label,
html.dark-theme body .stat-label {
  color: rgba(255, 255, 255, 0.55) !important;
}

html.dark-theme body .ov-value,
html.dark-theme body .prop-value,
html.dark-theme body .stat-value {
  color: #ffffff !important;
}

/* ── Periodic Table Elements Polishing ── */

/* Atomic Number & Name: BRIGHT WHITE as requested */
html.dark-theme .element .atomic-number,
html.dark-theme .element .name {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* Symbol: Saturated Light version of Category Color */
html.dark-theme .element .symbol {
  opacity: 1 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Specific Category-derived Symbol Colors */
html.dark-theme .element.alkali-metal .symbol { color: #ff8888 !important; }
html.dark-theme .element.alkaline-earth-metal .symbol,
html.dark-theme .element.alkaline-earth .symbol { color: var(--cat-alkaline-fg) !important; }
html.dark-theme .element.transition-metal .symbol { color: var(--cat-transition-fg) !important; }
html.dark-theme .element.post-transition-metal .symbol { color: var(--cat-post-fg) !important; }
html.dark-theme .element.metalloid .symbol { color: var(--cat-metalloid-fg) !important; }
html.dark-theme .element.non-metal .symbol,
html.dark-theme .element.other-nonmetal .symbol,
html.dark-theme .element.diatomic-nonmetal .symbol,
html.dark-theme .element.polyatomic-nonmetal .symbol { color: var(--cat-other-fg) !important; }
html.dark-theme .element.halogen .symbol { color: var(--cat-halogen-fg) !important; }
html.dark-theme .element.noble-gas .symbol { color: var(--cat-noble-fg) !important; }
html.dark-theme .element.lanthanide .symbol { color: var(--cat-lanthanide-fg) !important; }
html.dark-theme .element.actinide .symbol { color: var(--cat-actinide-fg) !important; }

/* ── Legend Polishing ── */
html.dark-theme .legend-item {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

html.dark-theme .legend-swatch {
  filter: saturate(1.8) brightness(1.2) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.1) !important;
}

/* ── Ion modal: Level 2 H+ cards — deeper dark glass ── */
html.dark-theme .h-plus-metrics-section,
html.dark-theme .h-plus-visual-card {
  background: linear-gradient(180deg, rgba(29, 38, 48, 0.94) 0%, rgba(23, 31, 40, 0.94) 100%);
  border: 1px solid rgba(173, 198, 219, 0.12);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

html.dark-theme .h-plus-metric-row.highlight-row {
  background: rgba(137, 87, 108, 0.18);
  border-color: rgba(255, 148, 176, 0.18);
}

html.dark-theme .h-plus-metric-label,
html.dark-theme .visual-card-title {
  color: rgba(198, 214, 228, 0.72);
}

html.dark-theme .h-plus-metric-value {
  color: #eef5ff;
}

html.dark-theme .h-plus-metric-value.highlight-value {
  color: #ff7a8e;
}

html.dark-theme #h-plus-water-state {
  color: #f1b25c !important;
}

html.dark-theme .visual-card-desc {
  color: #dbe7f4;
}

html.dark-theme .h-plus-visual-card:hover {
  background: linear-gradient(180deg, rgba(34, 44, 56, 0.98) 0%, rgba(27, 36, 46, 0.98) 100%);
  border-color: rgba(205, 222, 236, 0.16);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.dark-theme .h-plus-visual-card:hover .visual-card-desc {
  color: #ffffff;
}

/* Ions Legend Cleanup */
html.dark-theme .ions-legend-swatch.ion-cation {
  background: #FFD60A;
  border: none;
}

html.dark-theme .ions-legend-swatch.ion-anion {
  background: #0A84FF;
  border: none;
}

html.dark-theme .ions-legend-item {
  color: rgba(255, 255, 255, 0.6);
}

/* Periodic Table and Legend styles moved and consolidated above */

/* ── Exam, Isotope & Section labels (Consolidated) ── */
html.dark-theme .exam-label,
html.dark-theme .iso-title,
html.dark-theme .section-label,
html.dark-theme .p-label,
html.dark-theme .iso-note {
  color: rgba(255, 255, 255, 0.45) !important;
  opacity: 1 !important;
}

html.dark-theme .exam-value,
html.dark-theme .iso-name,
html.dark-theme .iso-percent,
html.dark-theme .p-count,
html.dark-theme .section-title {
  color: #ffffff !important;
  opacity: 0.95 !important;
}

/* ── Particle items (subatomic p/e/n) ── */
html.dark-theme .particle-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html.dark-theme .particle-item:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

html.dark-theme .p-count {
  color: #e8e6f0;
}

html.dark-theme .p-label {
  color: rgba(255, 255, 255, 0.45);
}

/* ── Section label / title ── */
html.dark-theme .section-label {
  color: rgba(255, 255, 255, 0.35);
}

html.dark-theme .section-title {
  color: #e8e6f0;
}

/* ── Isotope table (Level 2/3) ── */
html.dark-theme .iso-title {
  color: rgba(255, 255, 255, 0.4);
}

html.dark-theme .iso-table tr {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

html.dark-theme .iso-table tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

html.dark-theme .iso-name {
  color: #e8e6f0;
}

html.dark-theme .iso-percent {
  color: #e8e6f0;
}

html.dark-theme .n-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #c8c6d0;
}

html.dark-theme .iso-note {
  color: rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.04);
}

html.dark-theme .edu-isotope-container {
  background: rgba(255, 255, 255, 0.03);
}

/* Redundant definition removed — consolidated at the end of file */

html.dark-theme .edu-title {
  color: #e8e6f0;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .sol-label.bad,
html.dark-theme .sol-label.good {
  color: #e8e6f0;
}

html.dark-theme .sol-item {
  color: #9a97a8;
}

/* ── Edu safety ── */
html.dark-theme .edu-safety {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .edu-safety .edu-title {
  color: #e8e6f0;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .safe-row {
  color: #9a97a8;
}

html.dark-theme .safe-row strong {
  color: #e8e6f0;
}

/* ── Stock name items (ion naming Level 2) ── */
html.dark-theme .stock-name-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
  color: #c8c6d0;
}

html.dark-theme .stock-name-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark-theme .stock-ion {
  color: #e8e6f0;
}

html.dark-theme .stock-text {
  color: rgba(255, 255, 255, 0.45);
}

/* ── Data sections (Level 3/4 advanced data tables) ── */
html.dark-theme .data-section {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

html.dark-theme .data-title {
  color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .data-table th {
  color: rgba(255, 255, 255, 0.35);
}

html.dark-theme .data-table td {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

html.dark-theme .data-table .formula {
  color: #e8e6f0;
}

html.dark-theme .data-table .meta {
  color: rgba(255, 255, 255, 0.35);
}

html.dark-theme .data-table .value,
html.dark-theme .data-table .value.pos,
html.dark-theme .data-table .value.neg {
  color: #e8e6f0;
}

/* ── STSE section (Level 3/4) ── */
html.dark-theme .stse-section {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .stse-section .data-title {
  color: #e8e6f0;
}

html.dark-theme .stse-content {
  color: #9a97a8;
}

html.dark-theme .stse-content strong {
  color: #e8e6f0;
}

html.dark-theme .stse-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #c8c6d0;
}

html.dark-theme .stse-tag:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ── Uses / Hazards cards (Level 3) ── */
html.dark-theme .uses-card,
html.dark-theme .hazards-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .uses-card:hover,
html.dark-theme .hazards-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark-theme .card-title {
  color: rgba(255, 255, 255, 0.45);
}

html.dark-theme .card-content {
  color: #9a97a8;
}

/* ── History / detail items ── */
html.dark-theme .d-label {
  color: rgba(255, 255, 255, 0.4);
}

html.dark-theme .d-value {
  color: #e8e6f0;
}

/* ── 3D Visual pane (right side of element modal) ── */
html.dark-theme .modal-visual-pane {
  background: radial-gradient(circle at center,
    rgba(30, 40, 60, 0.5) 0%,
    rgba(14, 14, 18, 0) 75%);
  border-left-color: rgba(255, 255, 255, 0.04);
}

html.dark-theme #modal-watermark {
  color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .orbital-demo-open-btn {
  background: rgba(30, 42, 62, 0.84);
  color: #dce6fa;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

html.dark-theme .orbital-demo-open-btn:hover {
  background: rgba(40, 56, 82, 0.95);
}

html.dark-theme .orbital-demo-panel {
  background: var(--modal-bg-glass);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .orbital-demo-headline h3 {
  color: #eef4ff;
}

html.dark-theme .orbital-demo-headline p {
  color: #9fafc7;
}

html.dark-theme .orbital-demo-subline {
  color: #c7d6ee;
}

html.dark-theme .orbital-demo-card {
  border: none;
  background: radial-gradient(circle at 22% 14%, #090f1f 0%, #02050c 62%, #010308 100%);
  border-radius: 24px;
}

html.dark-theme .orbital-demo-canvas {
  background: transparent;
}

html.dark-theme .orbital-demo-right-placeholder {
  border-radius: 24px;
  background: radial-gradient(circle at 22% 14%, #090f1f 0%, #02050c 62%, #010308 100%);
}

html.dark-theme .orbital-demo-right-headline {
  color: rgba(219, 233, 255, 0.9);
}

html.dark-theme .orbital-demo-right-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #e7f0ff;
}

html.dark-theme .orbital-demo-right-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ── Subatomic stats container (floating over 3D pane) ── */
html.dark-theme .subatomic-stats-container {
  background: rgba(20, 20, 28, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark-theme .subatomic-stats-container h3 {
  color: rgba(255, 255, 255, 0.4);
}

html.dark-theme .sa-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html.dark-theme .sa-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

html.dark-theme .sa-value {
  color: #e8e6f0;
}

html.dark-theme .sa-label {
  color: rgba(255, 255, 255, 0.45);
}

/* ── Advanced data container ── */
html.dark-theme .advanced-data-container .data-section {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Changelog card ── */
html.dark-theme .changelog-card {
  background: #1a1a22;
  border-color: rgba(255, 255, 255, 0.05);
}

html.dark-theme .changelog-card:hover {
  background: #1e1e28;
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
}

html.dark-theme .changelog-card-content strong {
  color: var(--text-primary);
}

html.dark-theme .changelog-card-content p {
  color: var(--text-secondary);
}

/* =========================================
   Settings Page — Dark
   ========================================= */
html.dark-theme #settings-page::before {
  background: radial-gradient(circle at center, rgba(70, 80, 200, 0.06) 0%, rgba(180, 50, 120, 0.04) 40%, transparent 70%);
}

html.dark-theme #settings-page::after {
  background: radial-gradient(circle at center, rgba(10, 140, 100, 0.04) 0%, rgba(40, 100, 200, 0.05) 40%, transparent 70%);
}

/* ── Settings cards ── */
html.dark-theme .sv-card {
  background: rgba(24, 24, 32, 0.7);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.2);
}

html.dark-theme .sv-card:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.3);
}

html.dark-theme .sv-icon-circle {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

html.dark-theme .sv-icon-purple {
  background: rgba(90, 100, 200, 0.15);
  color: #8090e0;
}

html.dark-theme .sv-unit-icon {
  background: rgba(16, 185, 129, 0.12);
  color: #3cc999;
}

/* ── Settings link cards ── */
html.dark-theme .sv-link-card {
  background: rgba(24, 24, 32, 0.65);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html.dark-theme .sv-link-card:hover {
  background: rgba(30, 30, 40, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark-theme .sv-link-card-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  box-shadow: none;
}

html.dark-theme .sv-link-card-github .sv-link-card-icon {
  background: rgba(200, 200, 220, 0.08);
  color: #c8c6d0;
}

html.dark-theme .sv-link-card-coffee .sv-link-card-icon {
  background: rgba(245, 158, 11, 0.12);
  color: #f0a040;
}

html.dark-theme .sv-link-card-x .sv-link-card-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #e8e6f0;
}

html.dark-theme .sv-link-card-about .sv-link-card-icon {
  background: rgba(60, 120, 240, 0.12);
  color: #5088f0;
}

html.dark-theme .sv-link-card-discord .sv-link-card-icon {
  background: rgba(88, 101, 242, 0.12);
  color: #6878f0;
}

/* ── Changelog column ── */
html.dark-theme .sv-changelog {
  background: rgba(24, 24, 32, 0.6);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.2);
}

html.dark-theme .changelog-entry {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

html.dark-theme .changelog-version {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

html.dark-theme .sv-changelog-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Suggestion box ── */
html.dark-theme .sv-chip {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

html.dark-theme .sv-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ddd;
}

html.dark-theme .sv-chip.active {
  background: #e8e6f0;
  border-color: #e8e6f0;
  color: #111;
}

html.dark-theme .sv-suggest-row {
  background: rgba(20, 20, 28, 0.7);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

html.dark-theme .sv-suggest-row:focus-within {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(24, 24, 32, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

html.dark-theme .sv-suggest-input {
  color: var(--text-primary);
}

html.dark-theme .sv-suggest-send {
  background: #e8e6f0;
  color: #111;
}

html.dark-theme .sv-suggest-send:hover {
  background: #fff;
}

/* ── Play button ── */
html.dark-theme .sv-play-btn {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

html.dark-theme .sv-play-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ── Slider ── */
html.dark-theme .sv-slider {
  background: rgba(255, 255, 255, 0.1);
}

html.dark-theme .sv-slider::-webkit-slider-thumb {
  background: #e8e6f0;
}

html.dark-theme .sv-slider::-moz-range-thumb {
  background: #e8e6f0;
}

/* ── Toggle switch ── */
html.dark-theme .sv-toggle-slider {
  background-color: rgba(255, 255, 255, 0.12);
}

html.dark-theme .sv-toggle-slider:before {
  background-color: #ccc;
}

/* ── Danger button ── */
html.dark-theme .sv-danger-btn {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.2);
}

html.dark-theme .sv-danger-btn:hover {
  background: #ef4444;
  color: #fff;
}

/* ── Settings pill group ── */
html.dark-theme .sv-pill-group {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

html.dark-theme .sv-pill-btn {
  color: #777;
}

html.dark-theme .sv-pill-btn:hover:not(.active) {
  color: #ccc;
}

html.dark-theme .sv-pill-btn.active {
  color: #fff;
}

html.dark-theme .sv-pill-slider {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ── Unit pill ── */
html.dark-theme .sv-unit-pill {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Settings sidebar footer ── */
html.dark-theme .sv-sidebar-footer {
  border-top-color: rgba(255, 255, 255, 0.04);
}

html.dark-theme .sv-footer-x {
  background: #0b0b0d;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html.dark-theme .sv-footer-x:hover {
  background: #000;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 255, 255, 0.14);
}

/* =========================================
   Ions Page — Dark
   ========================================= */
html.dark-theme .ion-table-heading {
  color: #ddd;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

html.dark-theme .ion-table-section + .ion-table-section .ion-table-heading {
  margin-top: 8px;
}

html.dark-theme .ion-element {
  background-color: var(--element-bg);
  border-color: var(--border-color);
}

html.dark-theme .ion-element:hover {
  background-color: var(--element-hover);
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark-theme .ion-element.ion-cation {
  background-color: #332a14;
  border-color: rgba(253, 230, 138, 0.15);
}

html.dark-theme .ion-element.ion-cation:hover {
  background-color: #44381a;
}

html.dark-theme .ion-element.ion-cation .ion-charge { color: #d8a830; }
html.dark-theme .ion-element.ion-cation .ion-symbol { color: #f0c860; }

html.dark-theme .ion-element.ion-anion {
  background-color: #182038;
  border-color: rgba(191, 219, 254, 0.12);
}

html.dark-theme .ion-element.ion-anion:hover {
  background-color: #1e2a48;
}

html.dark-theme .ion-element.ion-anion .ion-charge { color: #5888d0; }
html.dark-theme .ion-element.ion-anion .ion-symbol { color: #80a8f0; }

/* Polyatomic ions */
html.dark-theme .element.polyatomic-cation {
  background-color: #382a10;
  color: #f0c860;
}

html.dark-theme .element.polyatomic-anion {
  background-color: #142840;
  color: #80b8e8;
}

/* Ion detail modal */
html.dark-theme .ion-detail-content {
  background: #181820;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

html.dark-theme .ion-detail-header {
  background: linear-gradient(135deg, rgba(40, 40, 55, 0.8), rgba(30, 30, 42, 0.8));
}

html.dark-theme .ion-detail-content.ion-detail-cation .ion-detail-header {
  background: linear-gradient(135deg, #332a14, #44381a);
}

html.dark-theme .ion-detail-content.ion-detail-anion .ion-detail-header {
  background: linear-gradient(135deg, #182038, #1e2a48);
}

html.dark-theme .ion-detail-close:hover {
  color: #f87171;
}

/* Ions quick access */
html.dark-theme .ions-quick-access {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.15);
}

html.dark-theme .ions-quick-access:hover {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.3);
}

html.dark-theme .ions-quick-access span {
  color: #d8a830;
}

html.dark-theme .legend-item.ions-quick-access {
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.08),
    rgba(217, 119, 6, 0.04));
  border-color: rgba(245, 158, 11, 0.2);
}

html.dark-theme .legend-item.ions-quick-access:hover {
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.14),
    rgba(217, 119, 6, 0.1));
  border-color: rgba(245, 158, 11, 0.35);
}

/* =========================================
   Tool Modals / Shared — Dark
   ========================================= */
html.dark-theme .tool-modal-title {
  color: var(--text-primary);
}

html.dark-theme .tool-input,
html.dark-theme .tool-select,
html.dark-theme .balancer-formula-input,
html.dark-theme .realtime-input {
  background: #1a1a22;
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

html.dark-theme .tool-input:focus,
html.dark-theme .tool-select:focus,
html.dark-theme .balancer-formula-input:focus,
html.dark-theme .realtime-input:focus {
  border-color: #5568c8;
  box-shadow: 0 0 0 3px rgba(85, 104, 200, 0.15);
}

html.dark-theme .tool-input::placeholder,
html.dark-theme .realtime-input::placeholder {
  color: #555;
}

html.dark-theme .tool-button,
html.dark-theme .tool-button.primary-btn {
  background: linear-gradient(135deg, #e8e6f0 0%, #c8c6d0 100%);
  color: #111;
}

html.dark-theme .tool-result-box {
  background: #1a1a22;
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark-theme .result-value {
  color: var(--text-primary);
}

html.dark-theme .tool-explanation-box,
html.dark-theme .tool-breakdown-box {
  background: rgba(20, 20, 28, 0.8);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

html.dark-theme .tool-tips-section {
  background: rgba(20, 20, 28, 0.8);
}

html.dark-theme .tool-tips-section h4 {
  color: var(--text-secondary);
}

html.dark-theme .tool-tips-section p {
  color: var(--text-muted);
}

html.dark-theme .formula-chip {
  background: #1a1a22;
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

html.dark-theme .formula-chip:hover {
  background: #5568c8;
  border-color: #5568c8;
  color: #fff;
}

html.dark-theme .result-label {
  color: var(--text-muted);
}

html.dark-theme .tool-input-section label,
html.dark-theme .tool-input-group label {
  color: var(--text-muted);
}

html.dark-theme .tool-modal-tags .grade-tag {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

html.dark-theme .tool-modal-tags .feature-tag {
  background: rgba(16, 185, 129, 0.1);
  color: #3cc999;
}

html.dark-theme .toggle-label {
  color: var(--text-secondary);
}

/* =========================================
   Molar Mass Tool — Dark tuning
   ========================================= */
html.dark-theme .molar-input-panel .tool-input-section {
  background: linear-gradient(180deg, rgba(44, 46, 55, 0.94) 0%, rgba(35, 36, 44, 0.96) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.dark-theme .molar-input-panel .tool-input-section:hover {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.dark-theme .molar-input-label {
  color: rgba(214, 222, 235, 0.78) !important;
}

html.dark-theme .realtime-input {
  background: linear-gradient(180deg, #1a1c23 0%, #171920 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #eef3fb !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 22px rgba(0, 0, 0, 0.18) !important;
}

html.dark-theme .realtime-input:focus {
  background: linear-gradient(180deg, #1d2028 0%, #191c23 100%) !important;
  border-color: rgba(114, 132, 220, 0.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 3px rgba(99, 102, 241, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.22) !important;
}

html.dark-theme .realtime-input::placeholder {
  color: rgba(196, 203, 214, 0.36) !important;
}

html.dark-theme .formula-live-preview {
  background: linear-gradient(180deg, rgba(54, 58, 68, 0.9) 0%, rgba(43, 46, 56, 0.92) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.dark-theme .formula-live-preview .preview-label {
  color: rgba(185, 195, 211, 0.72);
}

html.dark-theme .formula-live-preview .preview-formula {
  color: #eef3fb;
  text-shadow: none;
}

html.dark-theme .formula-suggestion {
  background: linear-gradient(180deg, rgba(59, 62, 72, 0.9) 0%, rgba(48, 51, 60, 0.94) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(206, 214, 226, 0.82);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark-theme .molar-action-btn-secondary {
  background: linear-gradient(180deg, rgba(98, 102, 116, 0.94) 0%, rgba(82, 86, 99, 0.96) 100%);
  color: rgba(237, 242, 250, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

html.dark-theme .molar-action-btn-secondary:hover,
html.dark-theme .molar-action-btn-secondary.active {
  background: linear-gradient(180deg, rgba(108, 113, 128, 0.96) 0%, rgba(90, 95, 108, 0.98) 100%);
  color: #f2f6fd;
}

html.dark-theme .molar-action-btn-primary {
  background: linear-gradient(180deg, rgba(42, 55, 80, 0.98) 0%, rgba(33, 45, 68, 1) 100%);
  border: 1px solid rgba(122, 151, 220, 0.22);
  box-shadow:
    0 12px 30px rgba(8, 12, 22, 0.3),
    0 6px 14px rgba(28, 56, 110, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.dark-theme .molar-example-chip {
  background: linear-gradient(180deg, rgba(90, 94, 107, 0.9) 0%, rgba(76, 80, 92, 0.94) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(244, 247, 252, 0.92);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.dark-theme .molar-example-chip .chip-name {
  color: rgba(194, 203, 217, 0.76);
}

html.dark-theme .molar-example-chip:hover,
html.dark-theme .molar-example-chip.active {
  background: linear-gradient(180deg, rgba(88, 93, 108, 0.9) 0%, rgba(74, 79, 92, 0.94) 100%);
  border-color: rgba(138, 154, 199, 0.3);
  color: #f4f7fc;
}

html.dark-theme .electronic-scale-wrapper {
  filter: brightness(0.94) saturate(0.92) contrast(0.95);
  opacity: 0.96;
}

html.dark-theme .electronic-scale-wrapper::after {
  background: radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0.1) 0%,
      transparent 72%);
}

html.dark-theme .electronic-scale-base {
  box-shadow:
    0 8px 0 #77869b,
    0 16px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

html.dark-theme .scale-platform-top {
  filter: saturate(0.8) brightness(0.9);
}

html.dark-theme .scale-screen {
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.75);
}

html.dark-theme #scale-display-value,
html.dark-theme .scale-screen span {
  text-shadow: none !important;
  filter: brightness(0.9);
}

html.dark-theme .receipt-anim-container {
  filter: none;
}

html.dark-theme .receipt-wrapper {
  background: linear-gradient(180deg, #fdfdfd 0%, #f5f6f8 100%);
  color: #303846;
  box-shadow:
    6px 8px 18px rgba(0, 0, 0, 0.16),
    10px 14px 30px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.03);
}

html.dark-theme .receipt-wrapper::after {
  background:
    linear-gradient(135deg, #f5f6f8 50%, transparent 50%),
    linear-gradient(-135deg, #f5f6f8 50%, transparent 50%);
  background-size: 10px 8px;
  background-repeat: repeat-x;
}

html.dark-theme .receipt-header,
html.dark-theme .receipt-barcode,
html.dark-theme .receipt-total-row,
html.dark-theme .receipt-item-name,
html.dark-theme .receipt-item-qty,
html.dark-theme .receipt-date,
html.dark-theme .receipt-footer {
  filter: none !important;
}

html.dark-theme .scale-front-panel {
  filter: brightness(0.95) contrast(0.96);
}

html.dark-theme .toggle-label:hover {
  background: rgba(255, 255, 255, 0.05);
}

html.dark-theme .toggle-label input[type="checkbox"] {
  border-color: rgba(255, 255, 255, 0.15);
  background-color: #1a1a22;
}

html.dark-theme .balancer-feedback.balanced {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: #3cc999;
}

html.dark-theme .balancer-feedback.unbalanced {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
  color: #f0a040;
}

html.dark-theme .kbd-key {
  background: #2a2a36;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.dark-theme .show-calc-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark-theme .show-calc-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark-theme .calc-steps-content {
  background: #1a1a22;
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .calc-step-row {
  color: var(--text-secondary);
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

html.dark-theme .calc-step-row:last-child {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

html.dark-theme .tool-padding-label {
  color: var(--text-primary);
}

html.dark-theme .lego-stage {
  background: linear-gradient(135deg, #181820 0%, #1a1a24 100%);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .lego-empty-state p {
  color: #555;
}

html.dark-theme .lego-group {
  background: rgba(255, 255, 255, 0.04);
}

html.dark-theme .lego-group-label {
  color: #555;
}

html.dark-theme .lego-stage.has-result {
  border-color: rgba(167, 139, 250, 0.2);
  background: linear-gradient(180deg, #1a1820, #181a24);
}

/* ── Balancer ── */
html.dark-theme .balancer-arrow {
  color: #555;
}

/* ── Feature modal body scrollbar ── */
html.dark-theme .feature-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

html.dark-theme .feature-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Tool loading ── */
html.dark-theme .tool-modal-loading {
  color: var(--text-secondary);
}

html.dark-theme .tool-modal-loading-error {
  color: #f87171;
}

/* =========================================
   Worksheet Page — Dark
   ========================================= */
html.dark-theme .worksheet-container {
  color: var(--text-primary);
}

/* =========================================
   Ion Animations — Dark
   ========================================= */
html.dark-theme .ion-visual-pane {
  background: #141418;
}

html.dark-theme .coming-soon-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* =========================================
   Scrollbar — Global Dark
   ========================================= */
html.dark-theme ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html.dark-theme ::-webkit-scrollbar-track {
  background: transparent;
}

html.dark-theme ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

html.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* =========================================
   Dark Theme Toggle Button — Settings
   ========================================= */
.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.theme-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}

.theme-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
  flex-shrink: 0;
}

html.dark-theme .theme-toggle-icon {
  background: rgba(255, 255, 255, 0.06);
}

/* =========================================
   Smooth theme transition
   ========================================= */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.4s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.4s ease !important;
}

/* ── Onboarding dark overrides ── */
html.dark-theme .onboarding-overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* =========================================
   Worksheet Generator — Dark Audit
   ========================================= */
html.dark-theme .worksheet-controls {
  background: rgba(24, 24, 32, 0.7);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .option-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

html.dark-theme .option-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

html.dark-theme .option-btn.active {
  background: #e8e6f0;
  color: #0e0e12;
  border-color: #e8e6f0;
}

html.dark-theme .checkbox-option {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .checkbox-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

html.dark-theme .checkbox-option span {
  color: var(--text-primary);
}

html.dark-theme .checkbox-subtitle {
  color: var(--text-muted);
}

html.dark-theme .worksheet-preview {
  background: rgba(20, 20, 28, 0.7);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .preview-header {
  background: rgba(24, 24, 32, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .export-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

html.dark-theme .export-btn:hover:not(:disabled) {
  border-color: var(--text-highlight);
  color: var(--text-highlight);
  background: rgba(255, 255, 255, 0.1);
}

html.dark-theme .preview-placeholder {
  color: #444;
}

html.dark-theme .preview-summary-bar {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.06);
  color: #9a97a8;
}

html.dark-theme .coef-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

html.dark-theme .coef-input:focus {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.05);
}

html.dark-theme .practice-actions {
  border-top-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .score-display {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Worksheet preview results in dark mode */
html.dark-theme .question-row.correct {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
  border-color: rgba(16, 185, 129, 0.2);
}

html.dark-theme .question-row.incorrect {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
  border-color: rgba(239, 68, 68, 0.2);
}

html.dark-theme .coef-input.correct {
  background: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
}

html.dark-theme .coef-input.incorrect {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

/* =========================================
   Chemistry Tools — Additional Polish
   ========================================= */
html.dark-theme .chem-tool-card {
  background: rgba(28, 28, 36, 0.6);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .chem-tool-card:hover {
  background: rgba(35, 35, 45, 0.8);
  border-color: var(--text-highlight);
}

html.dark-theme .tool-input,
html.dark-theme .tool-select,
html.dark-theme .element-input-row input {
  background: rgba(18, 18, 24, 0.8);
  color: #fff;
}

html.dark-theme .tool-input:focus,
html.dark-theme .tool-select:focus,
html.dark-theme .element-input-row input:focus {
  background: rgba(30, 30, 40, 0.9);
  border-color: var(--text-highlight);
}

html.dark-theme .tool-button {
  background: #e8e6f0;
  color: #0e0e12;
}

html.dark-theme .tool-button:hover {
  background: #fff;
  color: #000;
}

html.dark-theme .element-input-row label {
  color: #605d6d;
}

/* =========================================
   Virtual Lab — Dark
   ========================================= */
html.dark-theme .virtual-lab-stage {
  background: #121216;
  border-color: rgba(255, 255, 255, 0.04);
}

html.dark-theme .virtual-lab-scene {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.015) 0%, rgba(0, 0, 0, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 2px rgba(255, 255, 255, 0.03),
    0 0 0 1px rgba(0, 0, 0, 0.28);
}

html.dark-theme .lab-ui-panel {
  background: rgba(24, 24, 32, 0.8);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .virtual-lab-thermometer {
  background: linear-gradient(180deg, rgba(64, 67, 78, 0.9) 0%, rgba(50, 53, 63, 0.94) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.dark-theme .virtual-lab-thermo-track {
  background: rgba(188, 196, 210, 0.22);
}

html.dark-theme .virtual-lab-thermo-temp {
  color: rgba(226, 233, 243, 0.86);
}

html.dark-theme .virtual-lab-thermo-label {
  color: rgba(182, 191, 206, 0.56);
}

html.dark-theme .virtual-lab-btn {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html.dark-theme .virtual-lab-btn.primary {
  background: linear-gradient(180deg, rgba(61, 88, 130, 0.96) 0%, rgba(47, 69, 104, 0.98) 100%);
  color: #f3f7fc;
  box-shadow:
    0 10px 24px rgba(8, 12, 22, 0.28),
    0 4px 12px rgba(37, 99, 235, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.dark-theme .virtual-lab-btn.primary:hover {
  background: linear-gradient(180deg, rgba(71, 102, 148, 0.98) 0%, rgba(54, 79, 118, 1) 100%);
}

html.dark-theme .virtual-lab-btn.secondary {
  background: linear-gradient(180deg, rgba(82, 86, 98, 0.94) 0%, rgba(68, 72, 84, 0.96) 100%);
  color: rgba(231, 237, 246, 0.88);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.dark-theme .virtual-lab-btn.secondary:hover {
  background: linear-gradient(180deg, rgba(92, 97, 111, 0.96) 0%, rgba(76, 81, 93, 0.98) 100%);
  color: #f4f7fc;
}

html.dark-theme .virtual-lab-element-picker {
  background: linear-gradient(180deg, rgba(36, 38, 47, 0.98) 0%, rgba(28, 30, 38, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

html.dark-theme .virtual-lab-picker-group {
  color: rgba(170, 180, 197, 0.62);
}

html.dark-theme .virtual-lab-picker-item {
  color: rgba(231, 236, 245, 0.9);
}

html.dark-theme .virtual-lab-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

html.dark-theme .virtual-lab-picker-item.active {
  background: rgba(255, 255, 255, 0.1);
}

html.dark-theme .virtual-lab-picker-sym {
  filter: brightness(0.9) saturate(0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.dark-theme .virtual-lab-metal-cube {
  filter: brightness(0.88) saturate(0.92);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}