/**
 * Qubibyte multi-theme tokens + component overrides.
 * Requires html[data-theme] set by js/theme-boot-inline.js before paint.
 */

/* HMI software mode — blocked external links (e.g. trent-rosenthal.com) */
html.software-mode a.software-link-disabled,
html.software-mode .software-link-disabled {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
    color: inherit !important;
}

html.software-mode a.software-link-disabled:hover,
html.software-mode .software-link-disabled:hover {
    color: inherit !important;
    text-decoration: none !important;
}

/* ── Blog article pages ───────────────────────────────────────────── */
:root,
html[data-theme="dark"] {
    --blog-page-bg: #1a1a2e;
    --blog-navbar-bg: rgba(26, 26, 46, 0.95);
    --blog-heading: #ffffff;
    --blog-body-text: #e8e8ec;
    --blog-strong: #ffffff;
    --blog-link: #ab6faf;
    --blog-section-border: rgba(171, 111, 175, 0.3);
    --blog-image-bg: #ffffff;
    --blog-image-border: rgba(255, 255, 255, 0.08);
    --blog-code-inline-bg: rgba(110, 118, 129, 0.2);
    --blog-code-inline-fg: #c9a0cc;
    --blog-table-wrap-border: rgba(255, 255, 255, 0.08);
    --blog-table-head-bg: rgba(6, 135, 201, 0.1);
    --blog-table-head-fg: #0687c9;
    --blog-table-head-border: rgba(6, 135, 201, 0.25);
    --blog-table-cell-fg: #c8d0da;
    --blog-table-row-border: rgba(255, 255, 255, 0.05);
    --blog-table-row-hover: rgba(6, 135, 201, 0.05);
    --blog-table-part-fg: #94a3b8;
    --blog-table-part-bg: rgba(255, 255, 255, 0.04);
    --blog-table-tbd-fg: #fbbf24;
    --blog-code-block-bg: #0d1117;
    --blog-code-block-border: #30363d;
    --blog-code-header-bg: #161b22;
    --blog-code-header-fg: #8b949e;
    --blog-code-lang-bg: rgba(171, 111, 175, 0.18);
    --blog-code-lang-fg: #c9a0cc;
    --blog-code-body-fg: #c9d1d9;
}

html[data-theme="light"] {
    --blog-page-bg: #f0f0f5;
    --blog-navbar-bg: rgba(255, 255, 255, 0.96);
    --blog-heading: #1e293b;
    --blog-body-text: #334155;
    --blog-strong: #0f172a;
    --blog-link: #7c3aed;
    --blog-section-border: rgba(124, 58, 237, 0.25);
    --blog-image-bg: #ffffff;
    --blog-image-border: rgba(0, 0, 0, 0.08);
    --blog-code-inline-bg: rgba(100, 116, 139, 0.15);
    --blog-code-inline-fg: #6d28d9;
    --blog-table-wrap-border: rgba(0, 0, 0, 0.1);
    --blog-table-head-bg: rgba(6, 135, 201, 0.08);
    --blog-table-head-fg: #0369a1;
    --blog-table-head-border: rgba(6, 135, 201, 0.2);
    --blog-table-cell-fg: #475569;
    --blog-table-row-border: rgba(0, 0, 0, 0.06);
    --blog-table-row-hover: rgba(6, 135, 201, 0.06);
    --blog-table-part-fg: #64748b;
    --blog-table-part-bg: rgba(0, 0, 0, 0.04);
    --blog-table-tbd-fg: #b45309;
    --blog-code-block-bg: #f8fafc;
    --blog-code-block-border: #cbd5e1;
    --blog-code-header-bg: #f1f5f9;
    --blog-code-header-fg: #64748b;
    --blog-code-lang-bg: rgba(124, 58, 237, 0.12);
    --blog-code-lang-fg: #6d28d9;
    --blog-code-body-fg: #1e293b;
}

html[data-theme="midnight"] {
    --blog-page-bg: #0f172a;
    --blog-navbar-bg: rgba(15, 23, 42, 0.96);
    --blog-heading: #f1f5f9;
    --blog-body-text: #cbd5e1;
    --blog-strong: #f8fafc;
    --blog-link: #38bdf8;
    --blog-section-border: rgba(56, 189, 248, 0.25);
    --blog-image-bg: #1e293b;
    --blog-image-border: rgba(255, 255, 255, 0.08);
    --blog-code-inline-bg: rgba(148, 163, 184, 0.15);
    --blog-code-inline-fg: #7dd3fc;
    --blog-table-wrap-border: rgba(255, 255, 255, 0.08);
    --blog-table-head-bg: rgba(56, 189, 248, 0.1);
    --blog-table-head-fg: #38bdf8;
    --blog-table-head-border: rgba(56, 189, 248, 0.25);
    --blog-table-cell-fg: #94a3b8;
    --blog-table-row-border: rgba(255, 255, 255, 0.05);
    --blog-table-row-hover: rgba(56, 189, 248, 0.06);
    --blog-table-part-fg: #94a3b8;
    --blog-table-part-bg: rgba(255, 255, 255, 0.04);
    --blog-table-tbd-fg: #fbbf24;
    --blog-code-block-bg: #0c1222;
    --blog-code-block-border: #334155;
    --blog-code-header-bg: #1e293b;
    --blog-code-header-fg: #94a3b8;
    --blog-code-lang-bg: rgba(56, 189, 248, 0.15);
    --blog-code-lang-fg: #7dd3fc;
    --blog-code-body-fg: #e2e8f0;
}

html[data-theme="quantum"] {
    --blog-page-bg: #1a0a25;
    --blog-navbar-bg: rgba(26, 10, 37, 0.96);
    --blog-heading: #f5f0ff;
    --blog-body-text: rgba(245, 240, 255, 0.88);
    --blog-strong: #ffffff;
    --blog-link: #e879f9;
    --blog-section-border: rgba(217, 70, 239, 0.35);
    --blog-image-bg: #2d1f3d;
    --blog-image-border: rgba(255, 255, 255, 0.1);
    --blog-code-inline-bg: rgba(217, 70, 239, 0.15);
    --blog-code-inline-fg: #f0abfc;
    --blog-table-wrap-border: rgba(255, 255, 255, 0.1);
    --blog-table-head-bg: rgba(217, 70, 239, 0.12);
    --blog-table-head-fg: #e879f9;
    --blog-table-head-border: rgba(217, 70, 239, 0.3);
    --blog-table-cell-fg: rgba(245, 240, 255, 0.75);
    --blog-table-row-border: rgba(255, 255, 255, 0.06);
    --blog-table-row-hover: rgba(217, 70, 239, 0.08);
    --blog-table-part-fg: rgba(245, 240, 255, 0.55);
    --blog-table-part-bg: rgba(255, 255, 255, 0.05);
    --blog-table-tbd-fg: #fbbf24;
    --blog-code-block-bg: #12081a;
    --blog-code-block-border: #4a3560;
    --blog-code-header-bg: #2d1f3d;
    --blog-code-header-fg: rgba(245, 240, 255, 0.55);
    --blog-code-lang-bg: rgba(217, 70, 239, 0.2);
    --blog-code-lang-fg: #f0abfc;
    --blog-code-body-fg: rgba(245, 240, 255, 0.9);
}

html[data-theme="midnight"] .navbar.navbar-dark,
html[data-theme="quantum"] .navbar.navbar-dark {
    background: var(--blog-navbar-bg) !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

html[data-theme="midnight"] .navbar-dark .nav-link,
html[data-theme="midnight"] .navbar-dark .navbar-brand,
html[data-theme="quantum"] .navbar-dark .nav-link,
html[data-theme="quantum"] .navbar-dark .navbar-brand {
    color: var(--blog-heading) !important;
}

/* ── Shared semantic tokens (simulator / NMR / viz) ───────────────── */
:root,
html[data-theme="dark"] {
    --color-primary: #554A9E;
    --color-primary-light: #6B5FC7;
    --color-secondary: #0687C9;
    --color-secondary-light: #1A9FE0;
    --color-accent: #AB6FAF;

    --bg-deepest: #060614;
    --bg-primary: #0a0a1a;
    --bg-secondary: #0f0f23;
    --bg-card: #141428;
    --bg-card-hover: #1a1a35;
    --bg-surface: #1e1e3a;
    --bg-elevated: #252545;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-link: #38bdf8;

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-hover: rgba(255, 255, 255, 0.18);

    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.1);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);

    --viz-3d-bg: var(--bg-primary);
    --viz-canvas-inner: var(--bg-secondary);
    --viz-canvas-outer: var(--bg-deepest);
    --viz-canvas-bg: linear-gradient(180deg, var(--viz-canvas-inner) 0%, var(--viz-canvas-outer) 100%);
    --panel-glass: rgba(10, 10, 26, 0.94);
    --chart-bg: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    --chart-title-color: #f1f5f9;
    --chart-legend-color: #94a3b8;
    --chart-tick-color: #64748b;
    --chart-grid-color: rgba(255, 255, 255, 0.06);
    --chart-tooltip-bg: rgba(10, 10, 26, 0.96);
    --chart-tooltip-title: #f1f5f9;
    --chart-tooltip-body: #94a3b8;
    --chart-tooltip-border: var(--border-default);
    --chart-legend-bg: rgba(10, 10, 26, 0.95);

    --nmr-accent-text: #a5b4fc;
    --nmr-highlight: #fbbf24;
    --nmr-negative: #ef4444;
    --nmr-hover-bg: color-mix(in srgb, var(--primary-color) 15%, transparent);
    --nmr-focus-bg: color-mix(in srgb, var(--primary-color) 28%, transparent);
    --nmr-focus-bg-strong: color-mix(in srgb, var(--primary-color) 45%, transparent);
    --nmr-slider-track: var(--surface-lighter);
    --nmr-fullscreen-overlay: rgba(0, 0, 0, 0.82);
    --nmr-popup-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);

    /* Quantum simulator shell — match site dark palette (not default slate) */
    --background: var(--bg-primary);
    --surface: var(--bg-card);
    --surface-light: var(--bg-surface);
    --surface-lighter: var(--bg-elevated);
    --border-color: var(--border-default);
    --primary-color: var(--color-primary-light);
    --primary-dark: var(--color-primary);
    --secondary-color: var(--color-accent);
    --shadow: rgba(0, 0, 0, 0.45);
    --shadow-lg: rgba(0, 0, 0, 0.65);
    --sidebar-gradient-end: var(--bg-deepest);
    --gate-item-bg-start: rgba(20, 20, 40, 0.95);
    --gate-item-bg-end: rgba(30, 30, 58, 0.85);
    --gate-item-border: var(--border-subtle);
    --gate-item-hover-start: rgba(26, 26, 53, 0.98);
    --gate-item-hover-end: rgba(37, 37, 69, 0.9);
    --gate-name-color: rgba(203, 213, 225, 0.8);
    --gate-name-hover-color: #e2e8f0;
    --logo-filter: none;

    --media-carousel-btn-bg: rgba(10, 10, 26, 0.8);
    --media-carousel-btn-border: rgba(255, 255, 255, 0.1);
    --media-carousel-btn-fg: rgba(255, 255, 255, 0.6);
    --media-carousel-btn-hover-bg: rgba(171, 111, 175, 0.2);
    --media-carousel-btn-hover-border: rgba(171, 111, 175, 0.4);
    --media-carousel-btn-hover-fg: #fff;
    --blog-dot-border: rgba(255, 255, 255, 0.25);
    --blog-dot-hover-border: rgba(255, 255, 255, 0.5);
}

/* ── Light ─────────────────────────────────────────────────────────── */
html[data-theme="light"] {
    color-scheme: light;

    --color-primary: #554A9E;
    --color-primary-light: #6B5FC7;
    --color-secondary: #0687C9;
    --color-secondary-light: #0284c7;
    --color-accent: #7c3aed;

    --background: #f0f4f8;
    --surface: #ffffff;
    --surface-light: #e8eef4;
    --surface-lighter: #dbe4ee;
    --surface-lighter-alt: #cbd5e1;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: #cbd5e1;
    --border-light: #94a3b8;
    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-lg: rgba(0, 0, 0, 0.12);

    --bg-deepest: #f8f9fc;
    --bg-primary: #f0f0f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-surface: #e8ecf4;
    --bg-elevated: #e2e8f0;
    --text-link: #0284c7;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.16);
    --gradient-hero: linear-gradient(135deg, #f0f4ff 0%, #e8f4fc 40%, #f5f0ff 70%, #f0f4ff 100%);
    --gradient-section-a: linear-gradient(180deg, #f0f0f5 0%, #ffffff 100%);
    --gradient-section-b: linear-gradient(180deg, #ffffff 0%, #f0f0f5 100%);

    --viz-3d-bg: #e8eef4;
    --viz-canvas-inner: #f8fafc;
    --viz-canvas-outer: #e8eef4;
    --viz-canvas-bg: linear-gradient(180deg, var(--viz-canvas-inner) 0%, var(--viz-canvas-outer) 100%);
    --panel-glass: rgba(255, 255, 255, 0.94);
    --chart-bg: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    --chart-title-color: #1e293b;
    --chart-legend-color: #475569;
    --chart-tick-color: #64748b;
    --chart-grid-color: rgba(100, 116, 139, 0.25);
    --chart-tooltip-bg: rgba(255, 255, 255, 0.98);
    --chart-tooltip-title: #1e293b;
    --chart-tooltip-body: #475569;
    --chart-tooltip-border: #cbd5e1;
    --chart-legend-bg: rgba(255, 255, 255, 0.96);

    --nmr-accent-text: var(--primary-dark);
    --nmr-highlight: #b45309;
    --nmr-negative: #dc2626;
    --nmr-hover-bg: color-mix(in srgb, var(--primary-color) 10%, transparent);
    --nmr-focus-bg: color-mix(in srgb, var(--primary-color) 18%, transparent);
    --nmr-focus-bg-strong: color-mix(in srgb, var(--primary-color) 28%, transparent);
    --nmr-slider-track: var(--surface-lighter-alt);
    --nmr-fullscreen-overlay: rgba(15, 23, 42, 0.55);
    --nmr-popup-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);

    --gate-item-bg-start: rgba(255, 255, 255, 0.98);
    --gate-item-bg-end: rgba(241, 245, 249, 0.95);
    --gate-item-border: rgba(0, 0, 0, 0.1);
    --gate-item-hover-start: #ffffff;
    --gate-item-hover-end: #e2e8f0;
    --gate-name-color: #475569;
    --gate-name-hover-color: #1e293b;
    --logo-filter: none;
    --sidebar-gradient-end: #eff1f4;

    --media-carousel-btn-bg: rgba(255, 255, 255, 0.95);
    --media-carousel-btn-border: rgba(0, 0, 0, 0.12);
    --media-carousel-btn-fg: #475569;
    --media-carousel-btn-hover-bg: rgba(124, 58, 237, 0.12);
    --media-carousel-btn-hover-border: rgba(124, 58, 237, 0.35);
    --media-carousel-btn-hover-fg: #1e293b;
    --blog-dot-border: rgba(0, 0, 0, 0.22);
    --blog-dot-hover-border: rgba(0, 0, 0, 0.4);

    --primary-color: var(--color-primary-light);
    --primary-dark: var(--color-primary);

    /* Qubi editor — white / soft lavender (not gray) */
    --code-editor-bg: #ffffff;
    --code-editor-gutter-bg: #f8f6ff;
    --scrollbar-track: color-mix(in srgb, var(--primary-color) 7%, #ffffff);

    /* Qubi editor popups — light surfaces */
    --qubi-popup-bg: #ffffff;
    --qubi-popup-border: color-mix(in srgb, var(--primary-color) 22%, #e2e8f0);
    --qubi-popup-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 0 0 1px color-mix(in srgb, var(--primary-color) 8%, #e2e8f0);
    --qubi-popup-text: #1e293b;
    --qubi-popup-text-muted: #64748b;
    --qubi-popup-text-secondary: #475569;
    --qubi-popup-accent: var(--primary-color);
    --qubi-popup-heading: var(--primary-dark);
    --qubi-popup-code-bg: #f1f5f9;
    --qubi-popup-code-text: #0f766e;
    --qubi-popup-panel-bg: var(--code-editor-gutter-bg);
    --qubi-popup-code-surface: var(--code-editor-gutter-bg);
    --qubi-popup-strong: #b45309;
    --qubi-popup-emphasis: #c2410c;
    --qubi-popup-cyan: #0284c7;
    --qubi-error-tooltip-bg: #ffffff;
    --qubi-error-tooltip-text: #dc2626;
    --qubi-error-tooltip-border: #fca5a5;
    --qubi-error-tooltip-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
    --qubi-matrix-cell: #334155;
}

/* ── Midnight ────────────────────────────────────────────────────── */
html[data-theme="midnight"] {
    color-scheme: dark;

    --color-primary: #554A9E;
    --color-primary-light: #6B5FC7;
    --color-secondary: #38bdf8;
    --color-secondary-light: #7dd3fc;
    --color-accent: #AB6FAF;

    --background: #0f172a;
    --surface: #1e293b;
    --surface-light: #334155;
    --surface-lighter: #475569;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #475569;

    --bg-deepest: #0f172a;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;
    --bg-surface: #334155;
    --border-subtle: rgba(148, 163, 184, 0.12);
    --border-default: rgba(148, 163, 184, 0.18);
    --border-hover: rgba(148, 163, 184, 0.28);
    --viz-3d-bg: #0f172a;
    --viz-canvas-inner: #1e293b;
    --viz-canvas-outer: #0f172a;
    --viz-canvas-bg: linear-gradient(180deg, var(--viz-canvas-inner) 0%, var(--viz-canvas-outer) 100%);
    --panel-glass: rgba(30, 41, 59, 0.92);
    --logo-filter: none;
    --sidebar-gradient-end: rgba(15, 23, 42, 0.92);

    --media-carousel-btn-bg: rgba(15, 23, 42, 0.88);
    --media-carousel-btn-border: rgba(148, 163, 184, 0.2);
    --media-carousel-btn-fg: rgba(226, 232, 240, 0.75);
    --media-carousel-btn-hover-bg: rgba(56, 189, 248, 0.18);
    --media-carousel-btn-hover-border: rgba(56, 189, 248, 0.45);
    --media-carousel-btn-hover-fg: #f1f5f9;
    --blog-dot-border: rgba(148, 163, 184, 0.35);
    --blog-dot-hover-border: rgba(148, 163, 184, 0.6);

    --chart-bg: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    --chart-grid-color: rgba(148, 163, 184, 0.2);
    --chart-legend-bg: rgba(15, 23, 42, 0.95);
    --nmr-accent-text: #a5b4fc;
    --nmr-highlight: #fbbf24;
    --nmr-negative: #ef4444;
    --nmr-hover-bg: color-mix(in srgb, var(--primary-color) 15%, transparent);
    --nmr-focus-bg: color-mix(in srgb, var(--primary-color) 28%, transparent);
    --nmr-focus-bg-strong: color-mix(in srgb, var(--primary-color) 45%, transparent);
    --nmr-slider-track: var(--surface-lighter);
    --nmr-fullscreen-overlay: rgba(0, 0, 0, 0.82);
    --nmr-popup-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

/* ── Quantum ───────────────────────────────────────────────────────── */
html[data-theme="quantum"] {
    color-scheme: dark;

    --background: #1a0a25;
    --surface: #2d1f3d;
    --surface-light: #3d2a52;
    --surface-lighter: #4a3560;
    --text-primary: #f5f0ff;
    --text-secondary: rgba(245, 240, 255, 0.75);
    --text-muted: rgba(245, 240, 255, 0.45);
    --border-color: rgba(255, 255, 255, 0.12);
    --primary-color: #d946ef;
    --secondary-color: #a855f7;

    --bg-deepest: #12081a;
    --bg-primary: #1a0a25;
    --bg-secondary: #2d1f3d;
    --bg-card: #2d1f3d;
    --bg-card-hover: #3d2a52;
    --bg-surface: #3d2a52;
    --border-subtle: rgba(245, 240, 255, 0.08);
    --border-default: rgba(245, 240, 255, 0.12);
    --border-hover: rgba(245, 240, 255, 0.18);
    --color-accent: #d946ef;
    --viz-3d-bg: #1a0a25;
    --viz-canvas-inner: #2d1f3d;
    --viz-canvas-outer: #1a0a25;
    --viz-canvas-bg: linear-gradient(180deg, var(--viz-canvas-inner) 0%, var(--viz-canvas-outer) 100%);
    --panel-glass: rgba(45, 31, 61, 0.92);
    --logo-filter: none;
    --sidebar-gradient-end: rgba(26, 10, 37, 0.92);

    --media-carousel-btn-bg: rgba(26, 10, 37, 0.9);
    --media-carousel-btn-border: rgba(217, 70, 239, 0.2);
    --media-carousel-btn-fg: rgba(245, 240, 255, 0.7);
    --media-carousel-btn-hover-bg: rgba(217, 70, 239, 0.2);
    --media-carousel-btn-hover-border: rgba(217, 70, 239, 0.45);
    --media-carousel-btn-hover-fg: #f5f0ff;
    --blog-dot-border: rgba(245, 240, 255, 0.28);
    --blog-dot-hover-border: rgba(245, 240, 255, 0.5);

    --chart-bg: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    --chart-grid-color: rgba(245, 240, 255, 0.12);
    --chart-legend-bg: rgba(26, 10, 37, 0.95);
    --nmr-accent-text: #e879f9;
    --nmr-highlight: #fbbf24;
    --nmr-negative: #f87171;
    --nmr-hover-bg: color-mix(in srgb, var(--primary-color) 15%, transparent);
    --nmr-focus-bg: color-mix(in srgb, var(--primary-color) 28%, transparent);
    --nmr-focus-bg-strong: color-mix(in srgb, var(--primary-color) 45%, transparent);
    --nmr-slider-track: var(--surface-lighter);
    --nmr-fullscreen-overlay: rgba(0, 0, 0, 0.82);
    --nmr-popup-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

/* Theme picker icon only (not swapped via theme.js) */
html[data-theme="light"] .theme-picker-icon {
    filter: invert(1);
}

/* ── Main site footer ─────────────────────────────────────────────── */
html[data-theme="light"] .site-footer,
html[data-theme="midnight"] .site-footer,
html[data-theme="quantum"] .site-footer {
    color: var(--text-secondary);
}

html[data-theme="light"] .footer-brand-text,
html[data-theme="light"] .footer-heading,
html[data-theme="light"] .footer-link,
html[data-theme="light"] .footer-copyright {
    color: var(--text-secondary);
}

html[data-theme="light"] .footer-brand-text {
    opacity: 0.85;
}

html[data-theme="light"] .navbar.navbar-dark {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-default);
}

html[data-theme="light"] .navbar-dark .nav-link,
html[data-theme="light"] .navbar-dark .navbar-brand {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .navbar-dark .navbar-toggler {
    border-color: var(--border-default);
    filter: invert(1);
}

/* ── Simulator gates (palette shows colored squares only — no wrapper panel) ── */
.gate-palette .gate-item,
.gate-palette .gate-item:hover,
.gate-palette .gate-item.gate-selected {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="light"] .gate-palette .gate-item:hover,
html[data-theme="light"] .gate-palette .gate-item.gate-selected {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Tech / Media category explorer breadcrumb ──────────────────── */
html[data-theme="light"] .tech-breadcrumb {
    box-shadow: 0 2px 8px var(--shadow);
}

html[data-theme="light"] .tech-crumb {
    background: var(--bg-surface);
}

html[data-theme="light"] .tech-crumb:hover {
    background: color-mix(in srgb, var(--color-secondary) 10%, var(--bg-card));
    box-shadow: 0 1px 4px var(--shadow);
}

html[data-theme="light"] .tech-crumb.is-current {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--color-secondary) 14%, var(--bg-card)),
            color-mix(in srgb, var(--color-primary) 10%, var(--bg-card)));
}

html[data-theme="light"] .tech-breadcrumb-back {
    background: var(--bg-surface);
}

html[data-theme="light"] .tech-breadcrumb-back:hover {
    background: color-mix(in srgb, var(--color-secondary) 10%, var(--bg-card));
    box-shadow: 0 2px 6px var(--shadow);
}

/* ── NMR / simulator viz panels ──────────────────────────────────── */
.molecule-canvas,
#fidCanvas,
#spectrumCanvas,
.viz-canvas-panel,
#nmr-molecule-canvas,
#nmr-spectrum-canvas {
    background: var(--chart-bg) !important;
}

.molecule-legend,
.spectrometer-legend,
.bloch-info,
.bloch-panel-controls,
.bloch-state-info,
.spectrum-info,
.nmr-legend,
.panel-overlay {
    background: var(--panel-glass) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary);
}

/* Embedded NMR tab + Other Resources — follow active site theme */
.nmr-container,
.nmr-simulator-wrapper,
.resources-wrapper {
    background: var(--background) !important;
    color: var(--text-primary) !important;
}

.nmr-panel,
.nmr-res-section,
.nmr-peak-popup,
.nmr-popup-content {
    background: var(--surface-light) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.nmr-panel-header,
.nmr-popup-header,
.nmr-density-table th,
.nmr-badge {
    background: var(--surface-lighter) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.nmr-select,
.nmr-select-sm,
.nmr-select-inline,
.nmr-input,
.nmr-sample-card,
.nmr-field-row input,
.nmr-field-row select,
.nmr-btn-sm {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.nmr-pulse-empty,
.nmr-note,
.nmr-desc,
.nmr-formula,
.nmr-unit,
.nmr-gamma-table td,
.nmr-nuclei-header {
    color: var(--text-secondary) !important;
}

.nmr-resources {
    background: var(--background) !important;
}

.nmr-density-table td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.nmr-density-view-toggle button.active {
    color: var(--primary-color) !important;
    background: color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
}

.nmr-density-hint {
    color: var(--text-muted) !important;
}

.nmr-density-3d-tooltip {
    background: var(--surface) !important;
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color)) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 24px var(--shadow-lg, var(--shadow)) !important;
}

.nmr-density-3d-tooltip .nmr-density-tip-title {
    color: var(--primary-color) !important;
}

.nmr-pulse-label,
.nmr-nuclei-header,
.nmr-jc-header,
.nmr-nuclei-table td:first-child,
.nmr-gamma-table td:last-child,
.nmr-qubits,
.nmr-badge {
    color: var(--nmr-accent-text, var(--primary-color)) !important;
}

.nmr-formula,
.nmr-sample-card strong {
    color: var(--text-primary) !important;
}

.nmr-nuclei-table th {
    color: var(--text-muted) !important;
}

.nmr-nuclei-table th,
.nmr-nuclei-table td,
.nmr-jc-section,
.nmr-popup-row,
.nmr-popup-env {
    border-color: var(--border-color) !important;
}

.nmr-nuclei-row:hover {
    background-color: var(--nmr-hover-bg) !important;
}

.nmr-nuclei-row:hover td:first-child {
    color: var(--nmr-accent-text, var(--primary-color)) !important;
}

.nmr-nuclei-row.nmr-focused {
    background-color: var(--nmr-focus-bg) !important;
}

.nmr-popup-nucleus {
    color: var(--nmr-highlight) !important;
}

.nmr-popup-label {
    color: var(--text-secondary) !important;
}

.nmr-popup-value,
.nmr-popup-desc {
    color: var(--text-primary) !important;
}

.nmr-popup-close {
    color: var(--text-secondary) !important;
}

.nmr-popup-close:hover {
    background: var(--surface-lighter) !important;
    color: var(--text-primary) !important;
}

.nmr-pulse-timeline::before,
.nmr-pulse-delay,
.nmr-pulse-line {
    background: var(--border-color) !important;
}

.nmr-field-row input[type="range"] {
    background: var(--nmr-slider-track) !important;
}

.nmr-field-row input[type="range"]::-webkit-slider-thumb {
    background: var(--primary-color) !important;
}

.nmr-fullscreen-overlay {
    background: var(--nmr-fullscreen-overlay) !important;
}

.nmr-peak-popup {
    box-shadow: var(--nmr-popup-shadow) !important;
}

.nmr-btn-sm:hover {
    background: var(--surface-lighter) !important;
}

/* Gate Creator tab */
#gateCreatorContainer,
#gateCreatorContainer .gc-root {
    background: var(--background) !important;
    color: var(--text-primary) !important;
}

#gateCreatorContainer .gc-input,
#gateCreatorContainer .gc-select {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

#gateCreatorContainer .gc-hint code {
    background: var(--surface-lighter) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

#gateCreatorContainer .gc-color-popup {
    background: var(--surface-light, var(--surface)) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

html[data-theme="light"] .nmr-select,
html[data-theme="light"] .nmr-sample-card,
html[data-theme="light"] .nmr-input {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="light"] .header {
    background: linear-gradient(135deg, var(--surface) 0%, #e8eef5 100%) !important;
}

html[data-theme="light"] .code-editor-container {
    border-color: color-mix(in srgb, var(--primary-color) 16%, var(--border-color));
}

/* Bloch rotation / degree controls */
.bloch-controls,
.bloch-rotation-panel,
.degree-control,
.angle-slider-container,
.control-panel-dark {
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Simulator embedded NMR tab */
html[data-theme="light"] .nmr-container,
html[data-theme="light"] .nmr-select,
html[data-theme="light"] .nmr-sample-card {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

/* Tutorial */
html[data-theme="light"] .sidebar-group-title {
    background: rgba(0, 0, 0, 0.04);
}

/* ── Careers page (css/careers.css tokens) ───────────────────────────── */
html[data-theme="light"] body.careers-page {
    --careers-hero-border: var(--border-default);
    --careers-hero-glow-1: rgba(85, 74, 158, 0.1);
    --careers-hero-glow-2: rgba(6, 135, 201, 0.1);
    --careers-text-muted: var(--text-secondary);
    --careers-text-heading: var(--text-primary);
    --careers-text-label: #334155;
    --careers-title-gradient: linear-gradient(135deg, #0f172a 0%, #554a9e 50%, #0687c9 100%);
    --careers-card-bg: var(--bg-card);
    --careers-card-border: var(--border-default);
    --careers-card-border-hover: var(--border-hover);
    --careers-card-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    --careers-card-edge-glow: rgba(0, 0, 0, 0.06);
    --careers-badge-bg: var(--bg-surface);
    --careers-badge-border: var(--border-default);
    --careers-badge-accent-bg: rgba(6, 135, 201, 0.1);
    --careers-badge-accent-border: rgba(6, 135, 201, 0.25);
    --careers-form-bg: var(--bg-card);
    --careers-form-border: var(--border-default);
    --careers-form-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    --careers-form-divider: var(--border-default);
    --careers-input-bg: #ffffff;
    --careers-input-border: var(--border-default);
    --careers-input-text: var(--text-primary);
    --careers-input-focus-bg: #ffffff;
    --careers-input-placeholder: var(--text-muted);
    --careers-input-option-bg: #ffffff;
    --careers-file-upload-bg: var(--bg-surface);
    --careers-file-upload-hover-bg: #ffffff;
    --careers-file-upload-border: var(--border-default);
    --careers-modal-bg: var(--bg-card);
    --careers-modal-border: var(--border-default);
    --careers-modal-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
    --careers-modal-body-text: var(--text-secondary);
    --careers-modal-link: var(--color-secondary);
    --careers-clipboard-bg: var(--bg-surface);
    --careers-clipboard-border: var(--border-default);
    --careers-clipboard-text: var(--text-primary);
    --careers-cancel-border: var(--border-default);
    --careers-cancel-hover-border: var(--border-hover);
    --careers-cancel-hover-text: var(--text-primary);
    --careers-footer-bg: var(--bg-deepest);
    --careers-footer-border: var(--border-default);
    --careers-footer-text: var(--text-muted);
    --careers-file-hint: var(--text-muted);
    --careers-file-replace-hint: var(--text-secondary);
    --careers-modal-close-filter: none;
}

html[data-theme="midnight"] body.careers-page {
    --careers-card-bg: rgba(30, 41, 59, 0.85);
    --careers-form-bg: rgba(30, 41, 59, 0.95);
    --careers-modal-bg: #1e293b;
    --careers-input-option-bg: #1e293b;
    --careers-footer-bg: var(--bg-deepest);
}

html[data-theme="quantum"] body.careers-page {
    --careers-card-bg: rgba(45, 31, 61, 0.85);
    --careers-form-bg: rgba(45, 31, 61, 0.95);
    --careers-modal-bg: #2d1f3d;
    --careers-input-option-bg: #2d1f3d;
    --careers-text-muted: rgba(245, 240, 255, 0.65);
    --careers-footer-bg: var(--bg-deepest);
}

/* ── Qubi reference manual (/qubi/) ─────────────────────────────────── */
html[data-theme="light"] .manual-page {
    --manual-hero-end: var(--bg-primary);
    --manual-section-border: var(--border-default);
    --manual-heading: var(--text-primary);
    --manual-heading-sub: #334155;
    --manual-callout-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(6, 135, 201, 0.06));
    --manual-callout-border: rgba(124, 58, 237, 0.2);
    --manual-callout-strong: var(--text-primary);
    --manual-code-bg: var(--blog-code-block-bg);
    --manual-code-fg: var(--blog-code-body-fg);
    --manual-code-border: var(--blog-code-block-border);
    --manual-inline-bg: rgba(100, 116, 139, 0.12);
    --manual-inline-fg: #334155;
    --manual-inline-border: var(--border-default);
    --manual-table-th-bg: var(--bg-surface);
    --manual-table-th-fg: var(--text-secondary);
    --manual-table-row-border: var(--border-default);
    --manual-table-code: #7c3aed;
    --manual-toc-hover-bg: rgba(124, 58, 237, 0.1);
    --manual-link: #0284c7;
    --manual-dl-dt: #6d28d9;
    --manual-algo-panel-bg: var(--bg-surface);
    --manual-algo-panel-border: var(--border-default);
    --manual-algo-cat-label: var(--text-muted);
    --manual-algo-chip-bg: rgba(124, 58, 237, 0.1);
    --manual-algo-chip-border: var(--border-default);
    --manual-algo-chip-hover-bg: rgba(6, 135, 201, 0.1);
    --manual-algo-chip-hover-border: rgba(6, 135, 201, 0.35);
    --manual-algo-chip-active-bg: rgba(124, 58, 237, 0.18);
    --manual-algo-chip-active-border: rgba(124, 58, 237, 0.45);
    --manual-algo-chip-active-text: var(--text-primary);
    --manual-algo-input-bg: #ffffff;
    --manual-algo-input-border: var(--border-default);
    --manual-algo-preview-bg: var(--blog-code-block-bg);
    --manual-algo-preview-border: var(--blog-code-block-border);
    --manual-algo-preview-fg: var(--blog-code-body-fg);
    --manual-algo-sim-link: #0369a1;
    --manual-footer-bg: var(--bg-deepest);
    --manual-footer-border: var(--border-default);
    --manual-footer-text: var(--text-muted);
}

html[data-theme="midnight"] .manual-page {
    --manual-hero-end: var(--bg-primary);
    --manual-heading: var(--text-primary);
    --manual-heading-sub: #cbd5e1;
    --manual-code-bg: #0c1222;
    --manual-table-th-bg: rgba(30, 41, 59, 0.95);
    --manual-inline-bg: rgba(148, 163, 184, 0.1);
    --manual-callout-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(30, 41, 59, 0.4));
    --manual-callout-border: rgba(56, 189, 248, 0.25);
    --manual-toc-hover-bg: rgba(56, 189, 248, 0.12);
    --manual-link: #38bdf8;
    --manual-dl-dt: #7dd3fc;
    --manual-algo-chip-active-bg: rgba(56, 189, 248, 0.22);
    --manual-algo-chip-active-border: rgba(56, 189, 248, 0.5);
    --manual-footer-bg: var(--bg-deepest);
}

html[data-theme="quantum"] .manual-page {
    --manual-hero-end: var(--bg-primary);
    --manual-heading: var(--text-primary);
    --manual-heading-sub: rgba(245, 240, 255, 0.85);
    --manual-section-border: rgba(255, 255, 255, 0.08);
    --manual-code-bg: #12081a;
    --manual-table-th-bg: rgba(45, 31, 61, 0.95);
    --manual-callout-bg: linear-gradient(135deg, rgba(217, 70, 239, 0.15), rgba(45, 31, 61, 0.5));
    --manual-callout-border: rgba(217, 70, 239, 0.3);
    --manual-toc-hover-bg: rgba(217, 70, 239, 0.15);
    --manual-link: #e879f9;
    --manual-dl-dt: #f0abfc;
    --manual-algo-panel-bg: rgba(18, 8, 26, 0.5);
    --manual-algo-chip-active-bg: rgba(217, 70, 239, 0.28);
    --manual-algo-chip-active-border: rgba(217, 70, 239, 0.55);
    --manual-footer-bg: var(--bg-deepest);
}