/**
 * Visualq UI Light Theme
 */

/* Light Theme Variable Overrides */
html.theme-light,
:root.theme-light {
    /* ============ CORE BACKGROUNDS ============ */
    --terminal-bg: #F8FAFC;
    --terminal-fg: #0F172A;
    --terminal-accent: #0284C7;
    --terminal-dim: #64748B;
    --terminal-bright: #0891B2;

    /* ============ PANEL BACKGROUNDS ============ */
    --bg-primary: #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --bg-elevated: #FFFFFF;
    --border-subtle: rgba(14, 165, 233, 0.12);

    /* ============ ACCENT COLORS ============ */
    --cyan: #0284C7;
    --cyan-bright: #0891B2;
    --cyan-normal: #06B6D4;
    --cyan-dim: #0369A1;
    --accent-primary: #0284C7;
    --accent-secondary: #0891B2;
    --accent-tertiary: #06B6D4;
    --accent-dark: #1E40AF;

    /* RGB values for rgba() usage */
    --cyan-rgb: 2, 132, 199;
    --cyan-dim-rgb: 3, 105, 161;

    /* ============ GRADIENTS ============ */
    --gradient-primary: linear-gradient(135deg, #1E40AF 0%, #0284C7 50%, #06B6D4 100%);
    --gradient-secondary: linear-gradient(135deg, #0EA5E9 0%, #22D3EE 100%);
    --gradient-accent: linear-gradient(135deg, #38BDF8 0%, #67E8F9 100%);
    --gradient-subtle: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);

    /* ============ PANELS & SURFACES ============ */
    --panel-bg: rgba(255, 255, 255, 0.95);
    --panel-border: rgba(14, 165, 233, 0.2);
    --border-color: rgba(14, 165, 233, 0.2);
    --border-default: rgba(14, 165, 233, 0.25);
    --border-strong: rgba(14, 165, 233, 0.35);
    --hover-bg: rgba(14, 165, 233, 0.08);
    --active-bg: rgba(14, 165, 233, 0.15);
    --bg-card: #FFFFFF;

    /* Glass morphism - Light mode */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(14, 165, 233, 0.2);
    --glass-blur: blur(12px);

    /* ============ 3D VISUALIZATIONS ============ */
    /* Color that matches inverted Q-Sphere canvas background */
    --qsphere-bg: #EBEFF9;

    /* ============ QUANTUM CIRCUIT ============ */
    --qubit-wire: #94A3B8;
    --gate-bg: rgba(241, 245, 249, 0.95);
    --gate-border: #0284C7;
    --gate-glow: rgba(2, 132, 199, 0.25);

    /* ============ DROP ZONES ============ */
    --dropzone-idle: transparent;
    --dropzone-hover: rgba(14, 165, 233, 0.1);
    --dropzone-active: rgba(6, 182, 212, 0.2);

    /* ============ SHADOWS - Softer for light mode ============ */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);

    /* ============ GLOWS - Subtler for light mode ============ */
    --glow-sm: 0 0 4px rgba(2, 132, 199, 0.2);
    --glow-md: 0 0 8px rgba(2, 132, 199, 0.25);
    --glow-lg: 0 0 12px rgba(2, 132, 199, 0.3);
    --glow-cyan: 0 0 10px rgba(2, 132, 199, 0.35);
    --glow-primary: 0 0 20px rgba(14, 165, 233, 0.2);
    --glow-intense: 0 0 30px rgba(14, 165, 233, 0.3);
    --glow-secondary: 0 0 20px rgba(6, 182, 212, 0.2);

    /* ============ TEXT COLORS ============ */
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #64748B;
    --text-accent: #0284C7;
    --text-inverse: #F8FAFC;

    /* ============ STATUS COLORS ============ */
    --success: #059669;
    --warning: #D97706;
    --error: #DC2626;
    --info: #0284C7;

    /* ============ QUANTUM GATE COLORS - Light Theme ============ */
    /* Pauli Gates (X, Y, Z, I) - Coral/Salmon Red */
    --gate-pauli: #DC2626;
    --gate-pauli-hover: #B91C1C;
    --gate-pauli-glow: rgba(220, 38, 38, 0.25);

    /* Hadamard Gate (H) - Golden Yellow */
    --gate-hadamard: #D97706;
    --gate-hadamard-hover: #B45309;
    --gate-hadamard-glow: rgba(217, 119, 6, 0.25);

    /* Phase Gates (S, T, P) - Cyan/Teal */
    --gate-phase: #0891B2;
    --gate-phase-hover: #0E7490;
    --gate-phase-glow: rgba(8, 145, 178, 0.25);

    /* Rotation Gates (RX, RY, RZ, R, U) - Emerald Green */
    --gate-rotation: #059669;
    --gate-rotation-hover: #047857;
    --gate-rotation-glow: rgba(5, 150, 105, 0.25);

    /* Two-Qubit Rotation Gates (RXX, RYY, RZZ, RZX) - Teal */
    --gate-rotation2q: #0D9488;
    --gate-rotation2q-hover: #0F766E;
    --gate-rotation2q-glow: rgba(13, 148, 136, 0.25);

    /* SX Gates - Cyan */
    --gate-sx: #0891B2;
    --gate-sx-hover: #0E7490;
    --gate-sx-glow: rgba(8, 145, 178, 0.25);

    /* Controlled Gates (CX, CY, CZ, CH, etc.) - Purple/Violet */
    --gate-controlled: #7C3AED;
    --gate-controlled-hover: #6D28D9;
    --gate-controlled-glow: rgba(124, 58, 237, 0.25);

    /* Multi-Controlled Gates (CCX, CCZ, etc.) - Deeper Purple */
    --gate-multicontrol: #6D28D9;
    --gate-multicontrol-hover: #5B21B6;
    --gate-multicontrol-glow: rgba(109, 40, 217, 0.25);

    /* Parametric Gates (U1, U2, U3, CU) - Sky Blue */
    --gate-parametric: #0284C7;
    --gate-parametric-hover: #0369A1;
    --gate-parametric-glow: rgba(2, 132, 199, 0.25);

    /* Special Gates (SWAP, iSWAP, ECR) - Pink/Magenta */
    --gate-special: #DB2777;
    --gate-special-hover: #BE185D;
    --gate-special-glow: rgba(219, 39, 119, 0.25);

    /* Auxiliary Gates (Barrier, Reset, Delay) - Warm Orange */
    --gate-auxiliary: #EA580C;
    --gate-auxiliary-hover: #C2410C;
    --gate-auxiliary-glow: rgba(234, 88, 12, 0.25);

    /* Measurement - Deep Rose */
    --gate-measurement: #BE123C;
    --gate-measurement-hover: #9F1239;
    --gate-measurement-glow: rgba(190, 18, 60, 0.2);

    /* Classical Control Gates - Indigo */
    --gate-classical: #4338CA;
    --gate-classical-hover: #3730A3;
    --gate-classical-glow: rgba(67, 56, 202, 0.25);
}

/* ============ BODY STYLES ============ */
html.theme-light body {
    background: var(--terminal-bg);
    color: var(--terminal-fg);
}

/* ============ TYPOGRAPHY - Light Theme ============ */
html.theme-light .type-h1,
html.theme-light .type-h2,
html.theme-light .type-h3 {
    color: var(--text-primary);
}

html.theme-light .type-body {
    color: var(--text-secondary);
}

html.theme-light .type-small {
    color: var(--text-muted);
}

html.theme-light .type-mono {
    font-family: var(--font-mono);
    color: var(--accent-secondary);
}

html.theme-light .type-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    color: var(--accent-primary);
}

/* ============ SCROLLBAR - Light Theme ============ */
html.theme-light ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.theme-light ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

html.theme-light ::-webkit-scrollbar-thumb {
    background: rgba(14, 165, 233, 0.3);
    border-radius: 4px;
}

html.theme-light ::-webkit-scrollbar-thumb:hover {
    background: rgba(14, 165, 233, 0.5);
}

/* ============ HEADER BAR - Light Theme ============ */
html.theme-light .header-bar {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* ============ CANVAS TOOLBAR - Light Theme ============ */
html.theme-light .canvas-toolbar {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* ============ TOOLBAR - Light Theme ============ */
html.theme-light .toolbar {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm);
}

html.theme-light .toolbar-button {
    color: var(--text-secondary);
}

html.theme-light .toolbar-button:hover {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
}

html.theme-light .toolbar-button.active {
    background: var(--active-bg);
    color: var(--accent-primary);
}

/* ============ SIDEBAR - Light Theme ============ */
html.theme-light .sidebar,
html.theme-light #gatesSidebar,
html.theme-light .gates-panel,
html.theme-light #gatesPanel {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border-right: 1px solid var(--border-subtle) !important;
    backdrop-filter: none !important;
}

html.theme-light .gates-content,
html.theme-light #gatesContent {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

html.theme-light .sidebar-section-header {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .gate-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
}

html.theme-light .gate-item:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}

/* ============ CIRCUIT CANVAS - Light Theme ============ */
html.theme-light #circuitCanvas,
html.theme-light .circuit-container {
    background: var(--bg-primary);
}

html.theme-light .qubit-row {
    background: var(--bg-secondary);
}

html.theme-light .qubit-row:hover {
    background: var(--bg-tertiary);
}

html.theme-light .qubit-label {
    color: var(--text-primary);
    background: transparent;
    text-shadow: none !important;
}

html.theme-light .qubit-index {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: none !important;
}

html.theme-light .gate-slot {
    border: 1px dashed var(--border-subtle);
}

html.theme-light .gate-slot:hover {
    border-color: var(--accent-primary);
    background: var(--hover-bg);
}

/* ============ PLUGIN PANEL - Light Theme ============ */
html.theme-light .plugin-panel,
html.theme-light #pluginPanel {
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-subtle);
}

html.theme-light .plugin-wrapper {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
}

html.theme-light .plugin-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .plugin-name {
    color: var(--text-primary);
}

html.theme-light .plugin-subtitle,
html.theme-light .plugin-description {
    color: var(--text-muted);
}

html.theme-light .plugin-footer {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

/* ============ TABS - Light Theme ============ */
html.theme-light .plugin-tab {
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
}

html.theme-light .plugin-tab:hover {
    color: var(--text-primary);
}

html.theme-light .plugin-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

html.theme-light .plugin-tab-tooltip {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--accent-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Plugin tab pseudo-element tooltips */
html.theme-light .plugin-tab[data-tooltip]::after,
html.theme-light .plugin-tab-btn[data-tooltip]::after {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--accent-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ============ TOOLBAR - Light Theme ============ */
html.theme-light .toolbar-divider {
    background: var(--text-muted) !important;
    opacity: 0.15 !important;
}

/* ============ BUTTONS - Light Theme ============ */
/* Primary Button - Blue-Cyan gradient with glow */
html.theme-light .btn-primary,
html.theme-light .btn.btn-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: var(--shadow-md), var(--glow-primary) !important;
}

html.theme-light .btn-primary:hover,
html.theme-light .btn.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg), var(--glow-intense) !important;
}

/* Secondary Button - Light gray background with border */
html.theme-light .btn-secondary,
html.theme-light .btn.btn-secondary {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: none !important;
}

html.theme-light .btn-secondary:hover,
html.theme-light .btn.btn-secondary:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* ============ EXECUTE BUTTON STATES - Light Theme ============ */
/* IDLE/READY State - Primary gradient */
html.theme-light #btn-execute,
html.theme-light #btn-execute.btn-idle {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: var(--shadow-md) !important;
}

html.theme-light #btn-execute:hover:not(:disabled),
html.theme-light #btn-execute.btn-idle:hover {
    box-shadow: var(--shadow-lg), var(--glow-primary) !important;
}

/* SUBMITTING State - Cyan */
html.theme-light #btn-execute.btn-submitting {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #0284C7 !important;
    border: 2px solid #0EA5E9 !important;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.3) !important;
}

/* TRANSPILING State - Cyan */
html.theme-light #btn-execute.btn-transpiling {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #0284C7 !important;
    border: 2px solid #0EA5E9 !important;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.3) !important;
}

/* SIMULATING State - Cyan */
html.theme-light #btn-execute.btn-simulating {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #0284C7 !important;
    border: 2px solid #0EA5E9 !important;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.3) !important;
}

/* QUEUED State - Warning/Yellow */
html.theme-light #btn-execute.btn-queued {
    background: rgba(217, 119, 6, 0.15) !important;
    color: #B45309 !important;
    border: 2px solid #D97706 !important;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.3) !important;
}

/* RUNNING/EXECUTING State - Success/Green */
html.theme-light #btn-execute.btn-running,
html.theme-light #btn-execute.btn-executing {
    background: rgba(5, 150, 105, 0.15) !important;
    color: #047857 !important;
    border: 2px solid #059669 !important;
    box-shadow: 0 0 8px rgba(5, 150, 105, 0.3) !important;
}

/* VALIDATING State - Cyan dim */
html.theme-light #btn-execute.btn-validating {
    background: rgba(6, 182, 212, 0.15) !important;
    color: #0891B2 !important;
    border: 2px solid #06B6D4 !important;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.3) !important;
}

/* COMPLETED State - Success/Green */
html.theme-light #btn-execute.btn-completed {
    background: rgba(5, 150, 105, 0.15) !important;
    color: #047857 !important;
    border: 2px solid #059669 !important;
    box-shadow: 0 0 8px rgba(5, 150, 105, 0.3) !important;
}

/* ERROR State - Red */
html.theme-light #btn-execute.btn-error {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #B91C1C !important;
    border: 2px solid #DC2626 !important;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.3) !important;
}

/* FAILED State - Red */
html.theme-light #btn-execute.btn-failed {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #B91C1C !important;
    border: 2px solid #DC2626 !important;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.3) !important;
}

/* CANCELLED State - Warning/Yellow */
html.theme-light #btn-execute.btn-cancelled {
    background: rgba(217, 119, 6, 0.15) !important;
    color: #B45309 !important;
    border: 2px solid #D97706 !important;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.3) !important;
}

/* Header bar buttons - override dark theme specific rules */
html.theme-light .header-bar .header-actions .btn:hover,
html.theme-light .header-bar .header-actions .btn-secondary:hover,
html.theme-light .header-bar .header-actions .btn.btn-secondary:hover {
    background: var(--bg-secondary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

html.theme-light .btn-outline {
    background: transparent;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
}

html.theme-light .btn-outline:hover {
    background: rgba(14, 165, 233, 0.1);
}

html.theme-light .btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

html.theme-light .btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

html.theme-light .btn-danger {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

html.theme-light .btn-danger:hover {
    background: #FECACA;
}

/* ============ INPUTS - Light Theme ============ */
html.theme-light .form-label,
html.theme-light label.form-label {
    color: var(--text-secondary);
}

html.theme-light .form-input,
html.theme-light input[type="text"],
html.theme-light input[type="password"],
html.theme-light input[type="number"],
html.theme-light textarea {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
}

html.theme-light .form-input:focus,
html.theme-light input:focus,
html.theme-light textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

html.theme-light .form-input::placeholder,
html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
    color: var(--text-muted);
}

html.theme-light .form-input.error {
    border-color: var(--error);
}

/* Select dropdown - Light Theme (from kit Form Elements) */
html.theme-light .form-select,
html.theme-light select,
html.theme-light .form-group select,
html.theme-light .form-group .form-select {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230284C7' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px;
}

html.theme-light .form-select:focus,
html.theme-light select:focus,
html.theme-light .form-group select:focus,
html.theme-light .form-group .form-select:focus {
    outline: none;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2) !important;
    background: var(--bg-card) !important;
}

/* Select options - Light Theme */
html.theme-light .form-select option,
html.theme-light select option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    padding: 8px 12px;
}

html.theme-light .form-select option:hover,
html.theme-light select option:hover,
html.theme-light .form-select option:focus,
html.theme-light select option:focus {
    background: var(--bg-tertiary) !important;
}

html.theme-light .form-select option:checked,
html.theme-light select option:checked {
    background: rgba(14, 165, 233, 0.15) !important;
    color: var(--accent-primary) !important;
}

/* Form hints and errors - Light Theme */
html.theme-light .form-hint {
    color: var(--text-muted);
}

html.theme-light .form-hint a {
    color: var(--accent-primary);
}

html.theme-light .form-error {
    color: var(--error);
}

/* Password toggle button - Light Theme */
html.theme-light .password-toggle {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
}

html.theme-light .password-toggle:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ============ MODALS / DIALOGS - Light Theme ============ */
html.theme-light .modal-overlay {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
}

html.theme-light .modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

html.theme-light .modal-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .modal-title {
    color: var(--text-primary);
}

html.theme-light .modal-body {
    background: var(--bg-card);
    color: var(--text-secondary);
}

html.theme-light .modal-footer {
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-subtle);
}

html.theme-light .dialog-message {
    color: var(--text-primary);
}

/* Validation/Confirmation Dialogs - Light Theme */
html.theme-light .dialog,
html.theme-light .confirm-dialog,
html.theme-light .alert-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

html.theme-light .dialog-header,
html.theme-light .confirm-dialog-header,
html.theme-light .alert-dialog-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .dialog-body,
html.theme-light .confirm-dialog-body,
html.theme-light .alert-dialog-body {
    background: var(--bg-card);
    color: var(--text-secondary);
}

html.theme-light .dialog-footer,
html.theme-light .confirm-dialog-footer,
html.theme-light .alert-dialog-footer {
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-subtle);
}

/* ============ DROPDOWNS - Light Theme ============ */
html.theme-light .dropdown-menu {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
}

html.theme-light .dropdown-menu-item {
    color: var(--text-secondary);
}

html.theme-light .dropdown-menu-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

html.theme-light .dropdown-divider {
    background: var(--border-subtle);
}

/* Backend Dropdown - Light Theme */
html.theme-light .backend-dropdown {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
}

html.theme-light .backend-item {
    color: var(--text-primary);
}

html.theme-light .backend-item:hover {
    background: var(--bg-secondary);
}

html.theme-light .backend-item.selected {
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid var(--accent-primary);
    box-shadow: none;
}

/* ============ TOOLTIPS - Light Theme ============ */
html.theme-light .tooltip,
html.theme-light [data-tooltip]::after {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
}

html.theme-light .tooltip-title,
html.theme-light .tooltip-text,
html.theme-light .tooltip-content {
    color: var(--text-primary);
}

html.theme-light .tooltip-description {
    color: var(--text-secondary);
}

/* Gate Tooltip - Light Theme */
html.theme-light .gate-tooltip {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

html.theme-light .gate-tooltip::before {
    border-top-color: var(--bg-secondary);
}

html.theme-light .gate-tooltip.arrow-top::before {
    border-bottom-color: var(--bg-secondary);
}

html.theme-light .gate-tooltip-title {
    color: var(--accent-primary);
}

html.theme-light .gate-tooltip-description {
    color: var(--text-primary);
}

/* Toolbar Tooltip - Light Theme */
html.theme-light .toolbar-tooltip {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

html.theme-light .toolbar-tooltip::before {
    border-top-color: var(--bg-secondary);
}

html.theme-light .toolbar-tooltip.inverted::before {
    border-bottom-color: var(--bg-secondary);
}

/* Gate Math Tooltip - Light Theme */
html.theme-light .gate-math-tooltip {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

html.theme-light .gate-math-tooltip::before {
    border-top-color: var(--bg-secondary);
}

html.theme-light .gate-math-tooltip.tooltip-below::before {
    border-bottom-color: var(--bg-secondary);
}

html.theme-light .gate-math-tooltip .tooltip-gate-title {
    color: var(--accent-primary);
}

html.theme-light .gate-math-tooltip .tooltip-gate-description {
    color: var(--text-primary);
}

html.theme-light .gate-math-tooltip .tooltip-section-title {
    color: var(--text-secondary);
}

html.theme-light .gate-math-tooltip .tooltip-code-block {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Backend Properties Tooltip - Light Theme */
html.theme-light .backend-properties-tooltip {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

html.theme-light .backend-properties-tooltip .tooltip-header {
    color: var(--accent-primary);
}

html.theme-light .backend-properties-tooltip .tooltip-label {
    color: var(--text-muted);
}

html.theme-light .backend-properties-tooltip .tooltip-value {
    color: var(--text-primary);
}

/* Rich Tooltip - Light Theme */
html.theme-light .tooltip-rich {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

html.theme-light .tooltip-rich-title {
    color: var(--accent-primary);
}

html.theme-light .tooltip-rich-description {
    color: var(--text-primary);
}

/* Matrix Cell Tooltip - Light Theme */
html.theme-light .matrix-cell-tooltip {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

html.theme-light .matrix-cell-tooltip .tooltip-cell-header {
    color: var(--accent-primary);
}

/* Fidelity Tooltip - Light Theme */
html.theme-light .fidelity-metric-tooltip {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

html.theme-light .fidelity-tooltip-title {
    color: var(--accent-primary);
}

html.theme-light .fidelity-tooltip-desc {
    color: var(--text-primary);
}

/* D3 Tooltip - Light Theme */
html.theme-light .d3-tooltip {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

html.theme-light .d3-tooltip strong {
    color: var(--accent-primary);
}

/* ANSATZ Description Tooltip - Light Theme */
html.theme-light .ansatz-desc-tooltip {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

html.theme-light .ansatz-desc-tooltip .ansatz-desc-name {
    color: var(--text-primary);
}

html.theme-light .ansatz-desc-tooltip .ansatz-desc-params {
    color: var(--text-secondary);
}

/* ============ NOTIFICATIONS - Light Theme ============ */
html.theme-light .notification {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

html.theme-light .notification-success {
    border-left: 3px solid var(--success);
}

html.theme-light .notification-warning {
    border-left: 3px solid var(--warning);
}

html.theme-light .notification-error {
    border-left: 3px solid var(--error);
}

/* ============ VENDOR ICONS - Light Theme ============ */
html.theme-light .dropdown-menu-item .item-icon--vendor {
    filter: none; /* Remove the invert filter for light theme */
}

/* ============ FLOATING WINDOWS - Light Theme ============ */
html.theme-light .floating-window {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

html.theme-light .floating-window-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .floating-window-title {
    color: var(--text-primary);
}

/* ============ FLOATING VISUALIZATION WINDOWS - Light Theme ============ */
html.theme-light .floating-viz-container {
    background: var(--bg-secondary) !important;
}

html.theme-light .floating-viz-canvas {
    background: var(--bg-secondary) !important;
}

html.theme-light .floating-viz-info {
    color: var(--text-muted);
    background: transparent;
}

html.theme-light .floating-viz-content {
    background: var(--bg-primary);
}

html.theme-light .floating-viz-subheader,
html.theme-light .wb-body .floating-viz-subheader {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

html.theme-light .floating-viz-body,
html.theme-light .wb-body .floating-viz-body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* All chart containers - use primary bg */
html.theme-light .d3-container,
html.theme-light .floating-d3-container,
html.theme-light [id$="-chart"],
html.theme-light [id$="-floating-chart"],
html.theme-light .plugin-chart-container .d3-container,
html.theme-light .floating-plugin-body .d3-container,
html.theme-light .floating-viz-body .d3-container,
html.theme-light .native-float-body .d3-container {
    background: var(--bg-primary) !important;
}

html.theme-light .floating-viz-footer,
html.theme-light .wb-body .floating-viz-footer {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* Visualization Window Header */
html.theme-light .viz-header-content {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
}

html.theme-light .viz-title {
    color: var(--text-primary);
}

html.theme-light .viz-subtitle {
    color: var(--text-muted);
}

html.theme-light .viz-toggle-btn {
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
}

html.theme-light .viz-toggle-btn:hover {
    color: var(--accent-primary);
    background: var(--bg-tertiary);
}

html.theme-light .viz-float-btn {
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
}

html.theme-light .viz-float-btn:hover {
    color: var(--accent-primary);
    background: var(--bg-tertiary);
}

html.theme-light .viz-float-btn.active {
    color: var(--accent-primary);
    background: var(--bg-tertiary);
}

/* WinBox Window Body - Light Theme */
html.theme-light .wb-body {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

html.theme-light .winbox {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

html.theme-light .winbox .wb-header,
html.theme-light .wb-header {
    background: #F1F5F9 !important;
    background-color: #F1F5F9 !important;
}

html.theme-light .winbox .wb-title {
    color: var(--text-primary) !important;
}

html.theme-light .winbox .wb-control {
    filter: invert(0.4);
}

html.theme-light .winbox .wb-control:hover {
    filter: invert(0.2);
}

/* ============ FLOATING PLUGIN WINDOWS - Light Theme ============ */
html.theme-light .floating-plugin-wrapper {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
}

html.theme-light .floating-plugin-header {
    background: #F1F5F9 !important;
    background-color: #F1F5F9 !important;
    border-bottom: 1px solid var(--border-default) !important;
}

html.theme-light .floating-plugin-name {
    color: var(--text-primary) !important;
}

html.theme-light .floating-plugin-subtitle {
    color: var(--text-muted) !important;
}

html.theme-light .floating-plugin-content {
    background: var(--bg-primary) !important;
}

html.theme-light .floating-plugin-body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html.theme-light .floating-plugin-body .threejs-canvas-floating {
    background: var(--bg-primary) !important;
}

/* Plugin Panel in Floating Window */
html.theme-light .wb-body .plugin-panel,
html.theme-light .wb-body .plugin-wrapper {
    background: var(--bg-secondary) !important;
}

html.theme-light .wb-body .plugin-header {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

html.theme-light .wb-body .plugin-name {
    color: var(--text-primary) !important;
}

html.theme-light .wb-body .plugin-subtitle,
html.theme-light .wb-body .plugin-description {
    color: var(--text-muted) !important;
}

html.theme-light .wb-body .plugin-body,
html.theme-light .wb-body .plugin-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Plugin Content - Global */
html.theme-light .plugin-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html.theme-light .plugin-viz-content {
    background: var(--bg-primary) !important;
}

html.theme-light .wb-body .plugin-footer {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* ============ NATIVE FLOAT WINDOWS - Light Theme ============ */
html.theme-light .native-float-window {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

html.theme-light .native-float-header,
html.theme-light .native-float-window .native-float-header {
    background: #F1F5F9 !important;
    background-color: #F1F5F9 !important;
    border-bottom: 1px solid var(--border-default) !important;
}

html.theme-light .native-float-title {
    color: var(--text-primary) !important;
}

html.theme-light .native-float-subtitle {
    color: var(--text-muted) !important;
}

html.theme-light .native-float-close {
    color: var(--text-muted) !important;
}

html.theme-light .native-float-close:hover {
    color: var(--text-primary) !important;
    background: var(--bg-primary) !important;
}

html.theme-light .native-float-resize {
    background: linear-gradient(135deg, transparent 50%, rgba(100, 116, 139, 0.4) 50%) !important;
}

html.theme-light .native-float-body {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html.theme-light .native-float-footer,
html.theme-light .native-float-window .native-float-footer {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-subtle) !important;
    color: var(--text-muted) !important;
}

/* Global mode button styles - applies everywhere */
html.theme-light .mode-btn {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .mode-btn:hover {
    background: var(--bg-secondary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

html.theme-light .mode-btn.active {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: white !important;
}

/* ============ BLOCH SPHERE - Light Theme ============ */
html.theme-light .bloch-container {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

html.theme-light .bloch-container canvas,
html.theme-light .bloch-sphere canvas {
    filter: invert(1) hue-rotate(180deg) brightness(2.5) contrast(0.45) !important;
}

html.theme-light .bloch-modal-info {
    background: var(--bg-primary) !important;
    border-top: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

html.theme-light .bloch-modal-state {
    color: var(--accent-primary) !important;
}

html.theme-light .bloch-modal-coords {
    color: var(--text-secondary) !important;
}

html.theme-light .bloch-sphere-label {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

html.theme-light .bloch-probability-display {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ============ CODE DISPLAY - Light Theme ============ */
/* General inline code - light background */
html.theme-light code:not(.code-modal-code):not([class*="language-"]) {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

/* ============ PYTHON CODE - Keep Dark Background ============ */
/* Code Modal - Dark background for Python code */
html.theme-light .code-modal-wrapper,
html.theme-light .modal-body .code-modal-wrapper,
html.theme-light .code-modal-container .code-modal-wrapper,
html.theme-light .code-dialog .code-modal-wrapper,
html.theme-light .modal-content .code-modal-wrapper,
html.theme-light body .code-modal-wrapper {
    background: #0D1117 !important;
    background-color: #0D1117 !important;
    border: 1px solid #30363D !important;
    border-radius: var(--radius-md) !important;
}

html.theme-light .code-modal-pre,
html.theme-light .code-modal-wrapper .code-modal-pre,
html.theme-light .modal-body .code-modal-pre,
html.theme-light pre.language-python,
html.theme-light .language-python {
    background: #0D1117 !important;
    background-color: #0D1117 !important;
    color: #E6EDF3 !important;
    border: none !important;
}

html.theme-light .code-modal-code,
html.theme-light .code-modal-wrapper .code-modal-code,
html.theme-light .code-modal-pre .code-modal-code {
    background: transparent !important;
    background-color: transparent !important;
    color: #E6EDF3 !important;
}

/* Prism.js Syntax Highlighting - Dark theme colors for Python */
html.theme-light .code-modal-code .token.comment,
html.theme-light .code-modal-code .token.prolog,
html.theme-light .code-modal-code .token.doctype,
html.theme-light .code-modal-code .token.cdata {
    color: #64748B !important; /* Slate-500 */
}

html.theme-light .code-modal-code .token.punctuation {
    color: #94A3B8 !important; /* Slate-400 */
}

html.theme-light .code-modal-code .token.property,
html.theme-light .code-modal-code .token.tag,
html.theme-light .code-modal-code .token.boolean,
html.theme-light .code-modal-code .token.number,
html.theme-light .code-modal-code .token.constant,
html.theme-light .code-modal-code .token.symbol {
    color: #22D3EE !important; /* Cyan-400 */
}

html.theme-light .code-modal-code .token.selector,
html.theme-light .code-modal-code .token.attr-name,
html.theme-light .code-modal-code .token.string,
html.theme-light .code-modal-code .token.char,
html.theme-light .code-modal-code .token.builtin {
    color: #A78BFA !important; /* Violet-400 */
}

html.theme-light .code-modal-code .token.operator,
html.theme-light .code-modal-code .token.entity,
html.theme-light .code-modal-code .token.url,
html.theme-light .code-modal-code .language-css .token.string,
html.theme-light .code-modal-code .style .token.string,
html.theme-light .code-modal-code .token.variable {
    color: #F472B6 !important; /* Pink-400 */
}

html.theme-light .code-modal-code .token.atrule,
html.theme-light .code-modal-code .token.attr-value,
html.theme-light .code-modal-code .token.keyword {
    color: #38BDF8 !important; /* Sky-400 */
}

html.theme-light .code-modal-code .token.function,
html.theme-light .code-modal-code .token.class-name {
    color: #4ADE80 !important; /* Green-400 */
}

html.theme-light .code-modal-code .token.regex,
html.theme-light .code-modal-code .token.important {
    color: #FBBF24 !important; /* Amber-400 */
}

/* Scrollbar for dark code block (GitHub style) */
html.theme-light .code-modal-wrapper::-webkit-scrollbar-track {
    background: #0D1117 !important;
}

html.theme-light .code-modal-wrapper::-webkit-scrollbar-thumb {
    background: #30363D !important;
}

html.theme-light .code-modal-wrapper::-webkit-scrollbar-thumb:hover {
    background: #484F58 !important;
}

/* ============ ACCOUNT SETTINGS MODAL - Light Theme ============ */
html.theme-light .user-avatar {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-primary));
    border-color: var(--border-default);
}

html.theme-light .avatar-edit-overlay {
    background: rgba(15, 23, 42, 0.7);
}

html.theme-light .theme-option {
    background: var(--bg-card, var(--bg-tertiary));
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}

html.theme-light .theme-option:hover {
    background: var(--bg-secondary);
    border-color: var(--border-default);
}

html.theme-light .theme-option.active {
    background: rgba(2, 132, 199, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ============ PREFERENCES / SETTINGS PANELS - Light Theme ============ */
html.theme-light .preferences-grid {
    background: transparent;
}

html.theme-light .preference-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

html.theme-light .preference-item:hover {
    border-color: var(--border-default);
}

html.theme-light .preference-title,
html.theme-light .preference-info .preference-title {
    color: var(--text-primary);
}

html.theme-light .preference-description,
html.theme-light .preference-info .preference-description {
    color: var(--text-muted);
}

html.theme-light .preference-input-unit {
    color: var(--text-muted);
}

/* Alert States - Light Theme */
html.theme-light .alert {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

html.theme-light .alert.error {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--error);
}

html.theme-light .alert.warning {
    background: rgba(217, 119, 6, 0.08);
    border-color: var(--warning);
}

html.theme-light .alert.success {
    background: rgba(5, 150, 105, 0.08);
    border: 1px solid rgba(5, 150, 105, 0.2);
}

html.theme-light .alert.success .alert-title {
    color: var(--success);
}

html.theme-light .alert.success .alert-text {
    color: #059669;
}

html.theme-light .alert.success .alert-icon {
    background: var(--success);
}

html.theme-light .alert.info {
    background: rgba(2, 132, 199, 0.08);
    border-color: var(--info);
}

/* ============ STATUS INDICATORS - Light Theme ============ */
html.theme-light .status-connected {
    color: var(--success);
}

html.theme-light .status-disconnected {
    color: var(--text-muted);
}

html.theme-light .status-error {
    color: var(--error);
}

/* ============ GATE PALETTE STYLES - Light Theme ============ */
html.theme-light .gate-palette {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

html.theme-light .gate-category {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

html.theme-light .gate-category-title {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

/* Gate Base Styles - Light Theme */
html.theme-light .gate {
    background: var(--bg-secondary);
    border: 2px solid var(--border-default);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

html.theme-light .gate:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Pauli Gates (I, X, Y, Z) - Coral Red */
html.theme-light .gate-pauli,
html.theme-light .gate[data-gate-type="I"],
html.theme-light .gate[data-gate-type="X"],
html.theme-light .gate[data-gate-type="Y"],
html.theme-light .gate[data-gate-type="Z"] {
    background: var(--gate-pauli);
    border-color: var(--gate-pauli-hover);
    color: white;
}

html.theme-light .gate-pauli:hover,
html.theme-light .gate[data-gate-type="I"]:hover,
html.theme-light .gate[data-gate-type="X"]:hover,
html.theme-light .gate[data-gate-type="Y"]:hover,
html.theme-light .gate[data-gate-type="Z"]:hover {
    background: var(--gate-pauli-hover);
    box-shadow: var(--gate-pauli-glow);
}

/* Hadamard Gate (H) - Golden Yellow */
html.theme-light .gate-hadamard,
html.theme-light .gate[data-gate-type="H"] {
    background: var(--gate-hadamard);
    border-color: var(--gate-hadamard-hover);
    color: white;
}

html.theme-light .gate-hadamard:hover,
html.theme-light .gate[data-gate-type="H"]:hover {
    background: var(--gate-hadamard-hover);
    box-shadow: var(--gate-hadamard-glow);
}

/* Phase Gates (S, T, P, Sdg, Tdg) - Cyan/Teal */
html.theme-light .gate-phase,
html.theme-light .gate[data-gate-type="S"],
html.theme-light .gate[data-gate-type="T"],
html.theme-light .gate[data-gate-type="P"],
html.theme-light .gate[data-gate-type="SDG"],
html.theme-light .gate[data-gate-type="TDG"] {
    background: var(--gate-phase);
    border-color: var(--gate-phase-hover);
    color: white;
}

html.theme-light .gate-phase:hover,
html.theme-light .gate[data-gate-type="S"]:hover,
html.theme-light .gate[data-gate-type="T"]:hover,
html.theme-light .gate[data-gate-type="P"]:hover,
html.theme-light .gate[data-gate-type="SDG"]:hover,
html.theme-light .gate[data-gate-type="TDG"]:hover {
    background: var(--gate-phase-hover);
    box-shadow: var(--gate-phase-glow);
}

/* Rotation Gates (Rx, Ry, Rz, U) - Emerald Green */
html.theme-light .gate-rotation,
html.theme-light .gate[data-gate-type="RX"],
html.theme-light .gate[data-gate-type="RY"],
html.theme-light .gate[data-gate-type="RZ"],
html.theme-light .gate[data-gate-type="U"] {
    background: var(--gate-rotation);
    border-color: var(--gate-rotation-hover);
    color: white;
}

html.theme-light .gate-rotation:hover,
html.theme-light .gate[data-gate-type="RX"]:hover,
html.theme-light .gate[data-gate-type="RY"]:hover,
html.theme-light .gate[data-gate-type="RZ"]:hover,
html.theme-light .gate[data-gate-type="U"]:hover {
    background: var(--gate-rotation-hover);
    box-shadow: var(--gate-rotation-glow);
}

/* Parametric Gates (U1, U2, U3) - Sky Blue */
html.theme-light .gate-parametric,
html.theme-light .gate[data-gate-type="U1"],
html.theme-light .gate[data-gate-type="U2"],
html.theme-light .gate[data-gate-type="U3"] {
    background: var(--gate-parametric);
    border-color: var(--gate-parametric-hover);
    color: white;
}

html.theme-light .gate-parametric:hover,
html.theme-light .gate[data-gate-type="U1"]:hover,
html.theme-light .gate[data-gate-type="U2"]:hover,
html.theme-light .gate[data-gate-type="U3"]:hover {
    background: var(--gate-parametric-hover);
    box-shadow: var(--gate-parametric-glow);
}

/* Controlled Gates (CX, CY, CZ, CH) - Purple */
html.theme-light .gate-controlled,
html.theme-light .gate[data-gate-type="CX"],
html.theme-light .gate[data-gate-type="CY"],
html.theme-light .gate[data-gate-type="CZ"],
html.theme-light .gate[data-gate-type="CH"],
html.theme-light .gate[data-gate-type="CNOT"] {
    background: var(--gate-controlled);
    border-color: var(--gate-controlled-hover);
    color: white;
}

html.theme-light .gate-controlled:hover,
html.theme-light .gate[data-gate-type="CX"]:hover,
html.theme-light .gate[data-gate-type="CY"]:hover,
html.theme-light .gate[data-gate-type="CZ"]:hover,
html.theme-light .gate[data-gate-type="CH"]:hover,
html.theme-light .gate[data-gate-type="CNOT"]:hover {
    background: var(--gate-controlled-hover);
    box-shadow: var(--gate-controlled-glow);
}

/* Multi-Controlled Gates (CCX, CCZ, CSWAP) - Deeper Purple */
html.theme-light .gate-multicontrol,
html.theme-light .gate[data-gate-type="CCX"],
html.theme-light .gate[data-gate-type="CCZ"],
html.theme-light .gate[data-gate-type="CSWAP"],
html.theme-light .gate[data-gate-type="TOFFOLI"] {
    background: var(--gate-multicontrol);
    border-color: var(--gate-multicontrol-hover);
    color: white;
}

html.theme-light .gate-multicontrol:hover,
html.theme-light .gate[data-gate-type="CCX"]:hover,
html.theme-light .gate[data-gate-type="CCZ"]:hover,
html.theme-light .gate[data-gate-type="CSWAP"]:hover,
html.theme-light .gate[data-gate-type="TOFFOLI"]:hover {
    background: var(--gate-multicontrol-hover);
    box-shadow: var(--gate-multicontrol-glow);
}

/* Two-Qubit Rotation Gates (RXX, RYY, RZZ, RZX) - Teal */
html.theme-light .gate-rotation2q,
html.theme-light .gate[data-gate-type="RXX"],
html.theme-light .gate[data-gate-type="RYY"],
html.theme-light .gate[data-gate-type="RZZ"],
html.theme-light .gate[data-gate-type="RZX"] {
    background: var(--gate-rotation2q);
    border-color: var(--gate-rotation2q-hover);
    color: white;
}

html.theme-light .gate-rotation2q:hover,
html.theme-light .gate[data-gate-type="RXX"]:hover,
html.theme-light .gate[data-gate-type="RYY"]:hover,
html.theme-light .gate[data-gate-type="RZZ"]:hover,
html.theme-light .gate[data-gate-type="RZX"]:hover {
    background: var(--gate-rotation2q-hover);
    box-shadow: var(--gate-rotation2q-glow);
}

/* Special Gates (SWAP, iSWAP, ECR, SX) - Pink/Magenta */
html.theme-light .gate-special,
html.theme-light .gate[data-gate-type="SWAP"],
html.theme-light .gate[data-gate-type="ISWAP"],
html.theme-light .gate[data-gate-type="ECR"],
html.theme-light .gate[data-gate-type="SX"],
html.theme-light .gate[data-gate-type="SXdg"] {
    background: var(--gate-special);
    border-color: var(--gate-special-hover);
    color: white;
}

html.theme-light .gate-special:hover,
html.theme-light .gate[data-gate-type="SWAP"]:hover,
html.theme-light .gate[data-gate-type="ISWAP"]:hover,
html.theme-light .gate[data-gate-type="ECR"]:hover,
html.theme-light .gate[data-gate-type="SX"]:hover,
html.theme-light .gate[data-gate-type="SXdg"]:hover {
    background: var(--gate-special-hover);
    box-shadow: var(--gate-special-glow);
}

/* Auxiliary Gates (Barrier, Reset, Delay) - Warm Orange */
html.theme-light .gate-auxiliary,
html.theme-light .gate[data-gate-type="BARRIER"],
html.theme-light .gate[data-gate-type="RESET"],
html.theme-light .gate[data-gate-type="DELAY"] {
    background: var(--gate-auxiliary);
    border-color: var(--gate-auxiliary-hover);
    color: white;
}

html.theme-light .gate-auxiliary:hover,
html.theme-light .gate[data-gate-type="BARRIER"]:hover,
html.theme-light .gate[data-gate-type="RESET"]:hover,
html.theme-light .gate[data-gate-type="DELAY"]:hover {
    background: var(--gate-auxiliary-hover);
    box-shadow: var(--gate-auxiliary-glow);
}

/* Measurement Gate - Deep Rose */
html.theme-light .gate-measurement,
html.theme-light .gate[data-gate-type="MEASURE"],
html.theme-light .gate[data-gate-type="M"] {
    background: var(--gate-measurement);
    border-color: var(--gate-measurement-hover);
    color: white;
}

html.theme-light .gate-measurement:hover,
html.theme-light .gate[data-gate-type="MEASURE"]:hover,
html.theme-light .gate[data-gate-type="M"]:hover {
    background: var(--gate-measurement-hover);
    box-shadow: var(--gate-measurement-glow);
}

/* ============ CONSOLE / OUTPUT PANEL - Light Theme ============ */
html.theme-light .console,
html.theme-light .output-panel,
html.theme-light .console-output {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

html.theme-light .console-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

html.theme-light .console-title,
html.theme-light .console .console-title {
    color: var(--text-primary) !important;
}

html.theme-light .console-title span {
    color: var(--text-primary) !important;
}

html.theme-light .console-tabs {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .console-tab {
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
}

html.theme-light .console-tab:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

html.theme-light .console-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

html.theme-light .console-line {
    border-bottom: none;
    background: transparent;
}

html.theme-light .console-line:hover {
    background: rgba(14, 165, 233, 0.05);
}

html.theme-light .console-line.error,
html.theme-light .console-line.warning,
html.theme-light .console-line.success,
html.theme-light .console-line.info {
    background: transparent;
}

html.theme-light .console-timestamp {
    color: var(--text-muted);
}

html.theme-light .console-message {
    color: var(--text-primary);
}

/* ============ NOTIFICATION TOAST - Light Theme ============ */
html.theme-light .notification-toast {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-default) !important;
    border-right: 1px solid var(--border-default) !important;
    border-bottom: 1px solid var(--border-default) !important;
    box-shadow: var(--shadow-lg) !important;
}

html.theme-light .notification-toast .notification-title {
    color: var(--text-primary) !important;
}

html.theme-light .notification-toast .notification-message {
    color: var(--text-primary) !important;
}

html.theme-light .notification-toast .notification-icon {
    background: var(--bg-tertiary) !important;
}

html.theme-light .notification-toast .notification-close {
    color: var(--text-muted) !important;
}

html.theme-light .notification-toast .notification-close:hover {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
}

/* Notification types - Light Theme */
html.theme-light .notification-toast.notification-success .notification-title {
    color: #059669 !important;
}

html.theme-light .notification-toast.notification-success .notification-icon {
    color: #059669 !important;
    background: #DCFCE7 !important;
}

html.theme-light .notification-toast.notification-error .notification-title {
    color: #DC2626 !important;
}

html.theme-light .notification-toast.notification-error .notification-icon {
    color: #DC2626 !important;
    background: #FEE2E2 !important;
}

html.theme-light .notification-toast.notification-warning .notification-title {
    color: #D97706 !important;
}

html.theme-light .notification-toast.notification-warning .notification-icon {
    color: #D97706 !important;
    background: #FEF3C7 !important;
}

html.theme-light .notification-toast.notification-info .notification-title {
    color: #0284C7 !important;
}

html.theme-light .notification-toast.notification-info .notification-icon {
    color: #0284C7 !important;
    background: #E0F2FE !important;
}

html.theme-light .notification-toast .notification-progress-bar {
    background: var(--accent-primary) !important;
}

/* Notification border-left colors by type */
html.theme-light .notification-toast.notification-success {
    border-left: 4px solid #059669 !important;
}

html.theme-light .notification-toast.notification-error {
    border-left: 4px solid #DC2626 !important;
}

html.theme-light .notification-toast.notification-warning {
    border-left: 4px solid #D97706 !important;
}

html.theme-light .notification-toast.notification-info {
    border-left: 4px solid #0284C7 !important;
}

/* Notification progress bars by type */
html.theme-light .notification-toast.notification-success .notification-progress-bar {
    background: #059669 !important;
}

html.theme-light .notification-toast.notification-error .notification-progress-bar {
    background: #DC2626 !important;
}

html.theme-light .notification-toast.notification-warning .notification-progress-bar {
    background: #D97706 !important;
}

html.theme-light .notification-toast.notification-info .notification-progress-bar {
    background: #0284C7 !important;
}

/* ============ STATUS BAR - Light Theme ============ */
html.theme-light .status-bar,
html.theme-light .statusbar {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

html.theme-light .status-item {
    color: var(--text-muted);
}

html.theme-light .status-item:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

html.theme-light .status-item.active {
    color: var(--accent-primary);
}

html.theme-light .status-dot {
    box-shadow: 0 0 6px currentColor;
}

html.theme-light .status-dot.online,
html.theme-light .status-dot.connected {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

html.theme-light .status-dot.busy,
html.theme-light .status-dot.pending {
    background: var(--warning);
    box-shadow: 0 0 6px var(--warning);
}

html.theme-light .status-dot.offline,
html.theme-light .status-dot.disconnected {
    background: var(--error);
    box-shadow: 0 0 6px var(--error);
}

html.theme-light .status-dot.maintenance {
    background: #8B5CF6;
    box-shadow: 0 0 6px #8B5CF6;
}

/* ============ USER PROFILE MENU - Light Theme ============ */
html.theme-light .user-profile-trigger {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

html.theme-light .user-profile-trigger:hover {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: var(--shadow-sm);
}

html.theme-light .user-profile-trigger.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

html.theme-light .user-avatar {
    background: var(--gradient-primary);
    color: white;
}

html.theme-light .user-avatar .avatar-status {
    border-color: var(--bg-tertiary);
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

html.theme-light .user-name {
    color: var(--text-primary);
}

html.theme-light .user-role {
    color: var(--text-muted);
}

html.theme-light .user-role.pro {
    color: var(--accent-secondary);
}

html.theme-light .user-chevron {
    color: var(--text-muted);
}

/* User Dropdown Menu */
html.theme-light .user-dropdown {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg), var(--glow-primary);
}

html.theme-light .dropdown-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .dropdown-avatar {
    background: var(--gradient-primary);
    color: white;
}

html.theme-light .dropdown-avatar .avatar-badge {
    background: var(--gradient-primary);
    border-color: var(--bg-tertiary);
}

html.theme-light .dropdown-user-name {
    color: var(--text-primary);
}

html.theme-light .dropdown-user-email {
    color: var(--text-muted);
}

html.theme-light .dropdown-user-plan {
    background: rgba(2, 132, 199, 0.15);
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
}

html.theme-light .dropdown-stats {
    background: var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .stat-item {
    background: var(--bg-secondary);
}

html.theme-light .stat-value {
    color: var(--accent-primary);
}

html.theme-light .stat-label {
    color: var(--text-muted);
}

html.theme-light .dropdown-menu-item .item-badge {
    background: var(--accent-primary);
    color: white;
}

html.theme-light .dropdown-menu-item .item-shortcut {
    color: var(--text-muted);
    background: var(--bg-tertiary);
}

html.theme-light .dropdown-menu-item.danger:hover {
    background: rgba(220, 38, 38, 0.1);
    color: var(--error);
}

html.theme-light .dropdown-footer {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-subtle);
}

html.theme-light .dropdown-footer-text {
    color: var(--text-muted);
}

html.theme-light .dropdown-footer-link {
    color: var(--accent-secondary);
}

html.theme-light .dropdown-footer-link:hover {
    color: var(--accent-primary);
}

/* ============ VISUALIZATION PANELS - Light Theme ============ */
html.theme-light .viz-panel,
html.theme-light .visualization-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

html.theme-light .viz-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .viz-title {
    color: var(--text-primary);
}

html.theme-light .viz-content {
    background: var(--bg-primary);
}

html.theme-light .bloch-sphere {
    background: var(--gradient-subtle);
    border: 1px solid var(--border-subtle);
}

/* ============ BACKEND SELECTOR - Light Theme ============ */
html.theme-light .backend-trigger,
html.theme-light .backend-selector {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

html.theme-light .backend-trigger:hover,
html.theme-light .backend-selector:hover {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: var(--shadow-sm);
}

html.theme-light .vendor-icon {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 10px;
    color: white;
}

/* Vendor Colors */
html.theme-light .vendor-icon.bg-ibm,
html.theme-light .vendor-ibm {
    background: #0F62FE;
}

html.theme-light .vendor-icon.bg-aws,
html.theme-light .vendor-aws {
    background: #FF9900;
}

html.theme-light .vendor-icon.bg-google,
html.theme-light .vendor-google {
    background: #4285F4;
}

html.theme-light .vendor-icon.bg-ionq,
html.theme-light .vendor-ionq {
    background: #6366F1;
}

html.theme-light .vendor-icon.bg-local,
html.theme-light .vendor-local {
    background: #10B981;
}

html.theme-light .vendor-icon.bg-rigetti,
html.theme-light .vendor-rigetti {
    background: #8B5CF6;
}

html.theme-light .vendor-icon.bg-dwave,
html.theme-light .vendor-dwave {
    background: #06B6D4;
}

/* ============ VENDOR LOGO SWAPS - Light Theme ============ */
/* Amazon/AWS Braket - Use white version for light theme */
html.theme-light .vendor-logo[data-vendor="aws-braket"] .vendor-logo-img,
html.theme-light .vendor-logo[data-vendor="amazon"] .vendor-logo-img,
html.theme-light .vendor-logo--image[data-vendor="aws-braket"] .vendor-logo-img,
html.theme-light .vendor-logo--image[data-vendor="amazon"] .vendor-logo-img {
    content: url('img/vendors/amazon_white.svg');
    transform: scale(0.65) !important;
}

/* ============ VENDOR STATUS CARD - Light Theme ============ */
html.theme-light .vendor-status-card,
html.theme-light .vendor-status-card.vendor-status-card--simple,
html.theme-light [class*="vendor-status-card"] {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
    backdrop-filter: none !important;
}

html.theme-light .vendor-status-card:hover,
html.theme-light .vendor-status-card:focus,
html.theme-light .vendor-status-card:active,
html.theme-light .vendor-status-card.vendor-status-card--simple:hover,
html.theme-light .vendor-status-card.vendor-status-card--simple:focus,
html.theme-light .vendor-status-card.vendor-status-card--simple:active,
html.theme-light [class*="vendor-status-card"]:hover,
html.theme-light [class*="vendor-status-card"]:focus,
html.theme-light [class*="vendor-status-card"]:active {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

/* ============ VENDOR SETTINGS PANEL - Light Theme ============ */
html.theme-light .vendor-settings-panel {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-subtle);
}

/* ============ EXECUTION SETTINGS PANEL - Light Theme ============ */
html.theme-light .execution-settings-panel {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

html.theme-light .execution-config-display {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

html.theme-light .vendor-name {
    color: var(--text-primary);
}

html.theme-light .vendor-status {
    color: var(--text-muted);
}

html.theme-light .vendor-status.connected {
    color: var(--success);
}

html.theme-light .vendor-status.configured {
    color: var(--warning);
}

html.theme-light .vendor-status.disconnected {
    color: var(--text-muted);
}

html.theme-light .vendor-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}

html.theme-light .vendor-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

html.theme-light .vendor-btn-settings {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

html.theme-light .vendor-btn-settings:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Settings Group - Light Theme */
html.theme-light .settings-group {
    background: transparent;
}

html.theme-light .settings-label {
    color: var(--text-secondary);
}

html.theme-light .settings-input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
}

html.theme-light .settings-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

html.theme-light .settings-input::placeholder {
    color: var(--text-muted);
}

/* Backend List - Light Theme */
html.theme-light .backend-list {
    background: transparent;
}

html.theme-light .backend-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

html.theme-light .backend-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-default);
}

html.theme-light .backend-item.selected,
html.theme-light .backend-item.active {
    background: rgba(2, 132, 199, 0.08);
    border: 1px solid var(--accent-primary);
    box-shadow: none;
}

html.theme-light .backend-name {
    color: var(--text-primary);
}

html.theme-light .backend-info {
    color: var(--text-muted);
}

/* Backend Status Colors - Light Theme */
html.theme-light .vendor-backend-item .backend-status.online {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

html.theme-light .vendor-backend-item .backend-status.offline {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

html.theme-light .vendor-status-badge.status-connected {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

html.theme-light .vendor-status-badge.status-configured {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

html.theme-light .vendor-status-badge.status-disconnected {
    background: rgba(100, 116, 139, 0.12);
    color: #64748B;
}

html.theme-light .vendor-status-badge.status-error {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

html.theme-light .vendor-status-badge.status-connecting {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

html.theme-light .status-dot.online,
html.theme-light .status-dot.connected {
    background: #10B981;
    box-shadow: 0 0 6px #10B981;
}

html.theme-light .status-dot.maintenance {
    background: #F59E0B;
    box-shadow: 0 0 6px #F59E0B;
}

html.theme-light .status-dot.offline,
html.theme-light .status-dot.disconnected {
    background: #EF4444;
    box-shadow: 0 0 6px #EF4444;
}

html.theme-light .backend-status.status-online,
html.theme-light .backend-status.online {
    background: #10B981;
    box-shadow: 0 0 6px #10B981;
}

html.theme-light .backend-status.status-warning {
    background: #F59E0B;
    box-shadow: 0 0 6px #F59E0B;
}

html.theme-light .backend-status.status-offline {
    background: #EF4444;
    box-shadow: 0 0 6px #EF4444;
}

/* Backends Vendor List - Light Theme */
html.theme-light .backends-vendor-list {
    background: var(--bg-primary);
}

html.theme-light .backends-vendor-item {
    background: var(--bg-primary);
}

html.theme-light .backends-vendor-item .item-status.online {
    background: #10B981;
}

html.theme-light .backends-vendor-item .item-status.warning {
    background: #F59E0B;
}

html.theme-light .backends-vendor-item .item-status.offline {
    background: #EF4444;
}

html.theme-light .backends-vendor-item .item-name {
    color: var(--text-primary);
}

html.theme-light .backends-vendor-item .item-qubits {
    color: #4ADE80;
}

html.theme-light .backends-vendor-item .item-processor {
    color: var(--accent-primary);
}

html.theme-light .backends-vendor-item .item-status-text {
    color: #16A34A;
    font-weight: 500;
}

html.theme-light .backends-vendor-item .item-jobs {
    color: #FBBF24;
}

/* ============ CONFIG MODAL - Light Theme ============ */
html.theme-light .config-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

html.theme-light .config-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .config-title {
    color: var(--text-primary);
}

html.theme-light .config-close {
    color: var(--text-muted);
}

html.theme-light .config-close:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

html.theme-light .config-sidebar {
    background: var(--bg-tertiary);
    border-right: 1px solid var(--border-subtle);
}

html.theme-light .settings-sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-subtle);
}

html.theme-light .settings-content {
    background: var(--bg-secondary);
}

html.theme-light .sidebar-nav-item {
    color: var(--text-secondary);
}

html.theme-light .sidebar-nav-item:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

html.theme-light .sidebar-nav-item.active {
    background: var(--active-bg);
    color: var(--accent-primary);
    border-left: 3px solid var(--accent-primary);
}

/* ============ MENUBAR - Light Theme ============ */
html.theme-light .menubar {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

html.theme-light .menubar-item {
    color: var(--text-secondary);
}

html.theme-light .menubar-item:hover {
    color: var(--accent-primary);
}

html.theme-light .menubar-item.active {
    color: var(--accent-primary);
    font-weight: 600;
}

/* ============ CARDS - Light Theme ============ */
html.theme-light .card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

html.theme-light .card:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-md);
}

html.theme-light .card-header {
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .card-icon {
    background: var(--gradient-primary);
    color: white;
}

html.theme-light .card-badge {
    background: rgba(5, 150, 105, 0.15);
    color: var(--success);
    border: 1px solid var(--success);
}

html.theme-light .card-title {
    color: var(--text-primary);
}

html.theme-light .card-description {
    color: var(--text-secondary);
}

/* ============ COLLABORATOR AVATARS - Light Theme ============ */
html.theme-light .collaborator-avatar {
    background: var(--gradient-primary);
    border: 2px solid var(--bg-secondary);
    color: white;
}

html.theme-light .collaborator-avatar:hover {
    box-shadow: var(--glow-primary);
}

html.theme-light .collaborator-avatar .status-ring {
    border-color: var(--bg-secondary);
}

html.theme-light .collaborator-avatar .status-ring.online {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

/* ============ PROPERTIES PANEL - Light Theme ============ */
html.theme-light .properties-panel {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

html.theme-light .plugin-panel-tabs {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

html.theme-light .plugin-panel-content {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

html.theme-light .panel-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

html.theme-light .panel-content {
    background: var(--bg-secondary);
}

html.theme-light .property-group {
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .property-label {
    color: var(--text-muted);
}

html.theme-light .property-value {
    color: var(--text-primary);
}

/* ============ LAYOUT LOGO - Light Theme ============ */
/* Logo inherits same styles as dark theme - only badge background changes */
html.theme-light .layout-logo-badge::before {
    background: #D0DFF8 !important;
}

html.theme-light .beta-logo-badge::before {
    background: #D0DFF8 !important;
}

/* ============ ONBOARDING TOUR - Light Theme ============ */
html.theme-light .tour-tooltip {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
}

html.theme-light .tour-tooltip::before {
    border-color: transparent transparent var(--bg-secondary) transparent;
}

html.theme-light .tour-step-indicator {
    color: var(--text-muted);
}

html.theme-light .tour-step-indicator .current {
    color: var(--accent-primary);
}

/* ============ LOADING STATES - Light Theme ============ */
html.theme-light .skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
}

html.theme-light .spinner {
    border-color: var(--border-default);
    border-top-color: var(--accent-primary);
}

/* ============ SEARCH BOX - Light Theme ============ */
html.theme-light .search-box,
html.theme-light .search-input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

html.theme-light .search-box:focus-within,
html.theme-light .search-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

html.theme-light .search-icon {
    color: var(--text-muted);
}

/* ============ BADGES - Light Theme ============ */
html.theme-light .badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

html.theme-light .badge-primary {
    background: rgba(2, 132, 199, 0.15);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

html.theme-light .badge-success {
    background: rgba(5, 150, 105, 0.15);
    color: var(--success);
    border-color: var(--success);
}

html.theme-light .badge-warning {
    background: rgba(217, 119, 6, 0.15);
    color: var(--warning);
    border-color: var(--warning);
}

html.theme-light .badge-error {
    background: rgba(220, 38, 38, 0.15);
    color: var(--error);
    border-color: var(--error);
}

/* ============ PROGRESS BAR - Light Theme ============ */
html.theme-light .progress-bar {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
}

html.theme-light .progress-fill {
    background: var(--gradient-primary);
}

/* ============ TOGGLE SWITCH - Light Theme ============ */
html.theme-light .toggle-switch {
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-default);
}

html.theme-light .toggle-switch::before {
    background: var(--accent-primary);
}

html.theme-light .toggle-switch:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.3);
}

html.theme-light .toggle-switch.active {
    border-color: var(--accent-primary);
    background: rgba(2, 132, 199, 0.1);
}

/* Toggle Track */
html.theme-light .toggle-track {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
}

html.theme-light .toggle-switch.active .toggle-track {
    background: rgba(2, 132, 199, 0.2);
    border-color: var(--accent-primary);
}

/* Toggle Thumb */
html.theme-light .toggle-thumb {
    background: var(--text-muted);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

html.theme-light .toggle-switch.active .toggle-thumb {
    background: var(--accent-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Toggle Knob (alternative naming) */
html.theme-light .toggle-switch .toggle-knob {
    background: white;
    box-shadow: var(--shadow-sm);
}

/* Toggle Math Icon */
html.theme-light .toggle-math-icon {
    color: var(--accent-primary);
}

html.theme-light .toggle-switch.active .toggle-math-icon {
    color: var(--accent-primary);
    text-shadow: 0 0 8px rgba(2, 132, 199, 0.5);
}

html.theme-light .toggle-switch:hover .toggle-math-icon {
    color: white;
}

/* Toggle Label */
html.theme-light .toggle-label {
    color: var(--text-secondary);
}

html.theme-light .toggle-switch.active .toggle-label {
    color: var(--accent-primary);
}

/* ============ HISTOGRAM VISUALIZATION - Light Theme ============ */
html.theme-light .histogram-bar {
    background: var(--bg-tertiary) !important;
}

html.theme-light .histogram-label {
    color: var(--text-primary);
}

html.theme-light .histogram-value {
    color: var(--text-secondary);
}

html.theme-light .histogram-axis {
    border-color: var(--border-default);
    color: var(--text-muted);
}

/* ============ CIRCUIT WIRE - Light Theme ============ */
html.theme-light .circuit-wire,
html.theme-light .qubit-wire {
    background: #94A3B8 !important;
}

html.theme-light .classical-wire,
html.theme-light .classical-wire::before {
    background: #94A3B8 !important;
}

html.theme-light .classical-label {
    color: var(--text-muted) !important;
}

html.theme-light .circuit-connection {
    stroke: #94A3B8 !important;
}

/* ============ SELECTION HIGHLIGHT - Light Theme ============ */
html.theme-light .selected,
html.theme-light .gate.selected {
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.4);
}

html.theme-light .highlighted {
    background: rgba(2, 132, 199, 0.1);
}

/* ============ DISABLED STATES - Light Theme ============ */
html.theme-light .disabled,
html.theme-light [disabled],
html.theme-light .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

html.theme-light .btn:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-color: var(--border-subtle);
}

/* ============ ANSATZ GATES - Light Theme ============ */
/* Base ANSATZ style - solid pastel colors (not transparent) */
html.theme-light .ansatz-gate {
    background: #ECFCCB;
    border: 2px solid #84CC16;
    color: var(--text-primary);
    box-shadow: none;
}

html.theme-light .ansatz-gate:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ANSATZ Template Color Variants - Light Theme (solid pastel backgrounds) */
html.theme-light .ansatz-gate.ansatz-realamplitudes {
    --ansatz-color: #84CC16;
    background: #ECFCCB;
    border-color: #84CC16;
}

html.theme-light .ansatz-gate.ansatz-efficientsu2 {
    --ansatz-color: #14B8A6;
    background: #CCFBF1;
    border-color: #14B8A6;
}

html.theme-light .ansatz-gate.ansatz-twolocal {
    --ansatz-color: #3B82F6;
    background: #DBEAFE;
    border-color: #3B82F6;
}

html.theme-light .ansatz-gate.ansatz-excitationpreserving {
    --ansatz-color: #F43F5E;
    background: #FFE4E6;
    border-color: #F43F5E;
}

html.theme-light .ansatz-gate.ansatz-nlocal {
    --ansatz-color: #6366F1;
    background: #E0E7FF;
    border-color: #6366F1;
}

html.theme-light .ansatz-gate.ansatz-paulitwodesign {
    --ansatz-color: #F97316;
    background: #FFEDD5;
    border-color: #F97316;
}

html.theme-light .ansatz-gate.ansatz-qaoaansatz {
    --ansatz-color: #22C55E;
    background: #DCFCE7;
    border-color: #22C55E;
}

html.theme-light .ansatz-gate.ansatz-zzfeaturemap {
    --ansatz-color: #A855F7;
    background: #F3E8FF;
    border-color: #A855F7;
}

html.theme-light .ansatz-gate.ansatz-uccsd {
    --ansatz-color: #D946EF;
    background: #FAE8FF;
    border-color: #D946EF;
}

html.theme-light .ansatz-gate.ansatz-hardwareefficient {
    --ansatz-color: #FBBF24;
    background: #FEF3C7;
    border-color: #FBBF24;
}

html.theme-light .ansatz-gate.ansatz-su2 {
    --ansatz-color: #FB7185;
    background: #FFE4E6;
    border-color: #FB7185;
}

html.theme-light .ansatz-gate.ansatz-ryrz {
    --ansatz-color: #38BDF8;
    background: #E0F2FE;
    border-color: #38BDF8;
}

html.theme-light .ansatz-gate.ansatz-isingmodel {
    --ansatz-color: #C084FC;
    background: #F3E8FF;
    border-color: #C084FC;
}

html.theme-light .ansatz-gate.ansatz-adaptvqe {
    --ansatz-color: #4ADE80;
    background: #DCFCE7;
    border-color: #4ADE80;
}

html.theme-light .ansatz-gate.ansatz-quantumneuralnetwork {
    --ansatz-color: #2DD4BF;
    background: #CCFBF1;
    border-color: #2DD4BF;
}

/* ANSATZ internal text elements - use border color for all text */
html.theme-light .ansatz-gate .ansatz-title,
html.theme-light .ansatz-gate .ansatz-name {
    color: var(--ansatz-color);
}

html.theme-light .ansatz-gate .ansatz-info,
html.theme-light .ansatz-gate .ansatz-params {
    color: var(--ansatz-color);
}

html.theme-light .ansatz-gate .ansatz-qubit-labels {
    color: var(--ansatz-color);
}

html.theme-light .ansatz-gate .ansatz-qubit-label {
    color: var(--ansatz-color);
}

html.theme-light .ansatz-gate .ansatz-content {
    color: var(--ansatz-color);
}

html.theme-light .ansatz-gate .ansatz-params-count {
    color: var(--ansatz-color);
}

html.theme-light .ansatz-gate .ansatz-reps {
    color: var(--ansatz-color);
}

html.theme-light .ansatz-container {
    background: var(--bg-secondary);
    border-color: var(--border-subtle);
}

/* ANSATZ Edit Dialog - Light Theme */
html.theme-light .ansatz-edit-overlay {
    background: rgba(15, 23, 42, 0.5);
}

html.theme-light .ansatz-edit-dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
}

html.theme-light .ansatz-edit-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

html.theme-light .ansatz-edit-title {
    color: var(--text-primary);
}

html.theme-light .ansatz-edit-description {
    color: var(--text-secondary);
}

html.theme-light .ansatz-edit-form {
    background: var(--bg-secondary);
}

html.theme-light .ansatz-edit-section {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

html.theme-light .ansatz-edit-section-title {
    color: var(--text-primary);
}

html.theme-light .ansatz-edit-param-count {
    background: var(--gradient-primary);
    color: white;
}

html.theme-light .ansatz-edit-params-container {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle);
}

html.theme-light .ansatz-edit-params-label {
    color: var(--text-primary);
}

html.theme-light .ansatz-edit-params-subtext {
    color: var(--text-muted);
}

html.theme-light .ansatz-edit-params-textarea {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
}

html.theme-light .ansatz-edit-params-textarea:focus {
    border-color: var(--accent-primary);
}

html.theme-light .ansatz-edit-params-info {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

html.theme-light .ansatz-edit-params-info strong {
    color: var(--text-primary);
}

html.theme-light .ansatz-edit-params-info code {
    background: var(--bg-tertiary);
    color: var(--accent-secondary);
}

html.theme-light .ansatz-edit-footer {
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-subtle);
}

/* ============ ANSATZ & ALGORITHM LIBRARY DIALOGS - Light Theme ============ */
html.theme-light .algorithm-library-modal,
html.theme-light .library-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle) !important;
}

html.theme-light .ansatz-info-box {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .ansatz-info-title,
html.theme-light .algo-library-info-title {
    color: var(--text-primary) !important;
}

html.theme-light .ansatz-library-params-help {
    color: var(--text-muted);
}

html.theme-light .ansatz-library-params-info {
    color: var(--accent-secondary);
}

html.theme-light .ansatz-desc-name {
    color: var(--text-primary) !important;
}

html.theme-light .ansatz-desc-params {
    color: var(--text-secondary) !important;
}

/* Algorithm Library Description Tooltip */
html.theme-light .algo-library-desc-tooltip {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* All Checkboxes - Light Theme (unified style) */
html.theme-light .custom-checkbox input[type="checkbox"],
html.theme-light #ansatzCustomParams,
html.theme-light .ansatz-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid #94A3B8 !important;
    border-radius: 3px;
    background: var(--bg-secondary) !important;
    cursor: pointer;
    position: relative;
}

html.theme-light .custom-checkbox input[type="checkbox"]:checked,
html.theme-light #ansatzCustomParams:checked,
html.theme-light .ansatz-checkbox input[type="checkbox"]:checked {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

html.theme-light .custom-checkbox input[type="checkbox"]:checked::after,
html.theme-light #ansatzCustomParams:checked::after,
html.theme-light .ansatz-checkbox input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin: 1px 0 0 4px;
}

/* ============================================================================
   VISUALIZATION PLUGINS - Light Theme
   Comprehensive styles for all quantum visualization components
   ============================================================================ */

/* ============ STATE VECTOR VISUALIZATION - Light Theme ============ */
html.theme-light .state-vector-display {
    background: var(--bg-primary) !important;
    border-color: var(--border-subtle) !important;
}

html.theme-light .state-vector-header {
    background: var(--bg-secondary) !important;
}

html.theme-light .state-vector-row {
    border-bottom-color: var(--border-subtle) !important;
}

html.theme-light .state-vector-row:hover {
    background: var(--bg-tertiary) !important;
}

html.theme-light .state-vector-basis {
    color: var(--accent-primary) !important;
}

html.theme-light .state-vector-amplitude span {
    color: var(--text-secondary) !important;
}

html.theme-light .state-vector-bar {
    background: var(--bg-tertiary) !important;
}

html.theme-light .state-vector-bar-fill {
    background: var(--gradient-primary) !important;
}

html.theme-light .state-vector-probability {
    color: var(--accent-primary) !important;
}

html.theme-light .state-vector-empty {
    color: var(--text-muted) !important;
}

html.theme-light .state-vector-info {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .state-vector-controls {
    background: transparent !important;
    border: none !important;
}

html.theme-light .state-vector-controls-floating {
    background: transparent !important;
    border: none !important;
}

/* State Vector Sort Select - Light Theme */
html.theme-light .state-vector-sort-select,
html.theme-light .plugin-content .state-vector-sort-select,
html.theme-light .state-vector-sort-controls .state-vector-sort-select {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .state-vector-sort-select:hover {
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

html.theme-light .state-vector-sort-select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

html.theme-light .state-vector-sort-select option {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Histogram Sort Select - Light Theme */
html.theme-light .histogram-sort-select,
html.theme-light .plugin-content .histogram-sort-select,
html.theme-light .histogram-sort-controls .histogram-sort-select {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .histogram-sort-select:hover {
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

html.theme-light .histogram-sort-select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

html.theme-light .histogram-sort-select option {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* state-vector-controls-floating uses global .mode-btn styles */

html.theme-light .state-vector-container::-webkit-scrollbar-thumb {
    background: var(--accent-primary) !important;
}

/* ============ DENSITY MATRIX VISUALIZATION - Light Theme ============ */
html.theme-light .density-matrix-display {
    background: var(--bg-primary) !important;
    border-color: var(--border-subtle) !important;
}

html.theme-light .density-matrix-header {
    background: var(--bg-tertiary) !important;
}

html.theme-light .density-matrix-controls {
    background: transparent !important;
    border: none !important;
}

html.theme-light .density-matrix-canvas-container {
    background: transparent !important;
    border: none !important;
}

html.theme-light .density-matrix-info {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .density-matrix-btn,
html.theme-light .hinton-plot-btn,
html.theme-light .state-vector-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .density-matrix-btn:hover,
html.theme-light .hinton-plot-btn:hover,
html.theme-light .state-vector-btn:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

html.theme-light .density-matrix-btn.active,
html.theme-light .hinton-plot-btn.active,
html.theme-light .state-vector-btn.active {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: white !important;
}

/* ============ HINTON PLOT VISUALIZATION - Light Theme ============ */
html.theme-light .hinton-plot-display {
    background: var(--bg-primary) !important;
    border-color: var(--border-subtle) !important;
}

html.theme-light .hinton-plot-header {
    background: var(--bg-tertiary) !important;
}

html.theme-light .hinton-plot-controls {
    background: var(--bg-tertiary) !important;
}

html.theme-light .hinton-canvas-container {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-default) !important;
}

html.theme-light .hinton-info {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .hinton-mode-selector,
html.theme-light .density-mode-selector {
    background: transparent !important;
    border: none !important;
}

/* ============ PAULI VECTOR VISUALIZATION - Light Theme ============ */
html.theme-light .pauli-vector-display {
    background: var(--bg-primary) !important;
    border-color: var(--border-subtle) !important;
}

html.theme-light .pauli-vector-header {
    background: var(--bg-secondary) !important;
}

html.theme-light .pauli-vector-container {
    scrollbar-color: var(--accent-primary) transparent !important;
}

html.theme-light .pauli-vector-container::-webkit-scrollbar-thumb {
    background: var(--accent-primary) !important;
}

html.theme-light .pauli-qubit-row {
    background: transparent !important;
}

html.theme-light .pauli-qubit-label {
    color: var(--text-primary) !important;
}

html.theme-light .pauli-operator-label {
    color: var(--accent-primary) !important;
}

/* Pauli Operator Colors - Light Theme (vibrant but readable) */
html.theme-light .pauli-op-x {
    color: #DC2626 !important;
    text-shadow: none !important;
}

html.theme-light .pauli-op-y {
    color: #16A34A !important;
    text-shadow: none !important;
}

html.theme-light .pauli-op-z {
    color: #2563EB !important;
    text-shadow: none !important;
}

html.theme-light .pauli-bar-container {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-default) !important;
}

html.theme-light .pauli-bar-baseline {
    background: var(--border-default) !important;
}

html.theme-light .pauli-bar.positive {
    background: #22C55E !important;
}

html.theme-light .pauli-bar.negative {
    background: #EF4444 !important;
}

html.theme-light .pauli-value {
    color: var(--text-secondary) !important;
}

html.theme-light .pauli-vector-info {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .pauli-gauge-box {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-default) !important;
}

html.theme-light .pauli-gauge-box.pauli-box-x {
    border-color: #DC2626 !important;
}

html.theme-light .pauli-gauge-box.pauli-box-y {
    border-color: #16A34A !important;
}

html.theme-light .pauli-gauge-box.pauli-box-z {
    border-color: #2563EB !important;
}

html.theme-light .pauli-fill-x {
    background: rgba(220, 38, 38, 0.3) !important;
}

html.theme-light .pauli-fill-y {
    background: rgba(22, 163, 74, 0.3) !important;
}

html.theme-light .pauli-fill-z {
    background: rgba(37, 99, 235, 0.3) !important;
}

html.theme-light .pauli-ref-x {
    background: #DC2626 !important;
}

html.theme-light .pauli-ref-y {
    background: #16A34A !important;
}

html.theme-light .pauli-ref-z {
    background: #2563EB !important;
}

html.theme-light .pauli-gauge-value {
    color: var(--text-primary) !important;
}

html.theme-light .pauli-empty-msg {
    color: var(--text-muted) !important;
}

html.theme-light .pauli-header-row {
    border-bottom-color: var(--border-subtle) !important;
}

html.theme-light .pauli-op-header {
    color: var(--text-secondary) !important;
}

/* ============ QSPHERE VISUALIZATION - Light Theme ============ */
/* Full height chain: display -> viz-content -> chart -> canvas-container -> canvas */
html.theme-light .qsphere-display,
html.theme-light div.qsphere-display {
    background: var(--qsphere-bg) !important;
    border-color: var(--border-subtle) !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Q-Sphere plugin-content must match canvas background */
html.theme-light .plugin-wrapper[data-plugin-id="qsphere"] .plugin-content,
html.theme-light #plugin-qsphere .plugin-content {
    background: var(--qsphere-bg) !important;
    padding: 0 !important;
}

html.theme-light .qsphere-header {
    background: var(--bg-tertiary) !important;
    flex-shrink: 0 !important;
}

html.theme-light #plugin-qsphere .plugin-viz-content,
html.theme-light .plugin-wrapper[data-plugin-id="qsphere"] .plugin-viz-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    background: var(--qsphere-bg) !important;
}

html.theme-light #qsphere-chart,
html.theme-light #plugin-qsphere .plugin-chart-container {
    flex: 1 !important;
    min-height: 0 !important;
    background: var(--qsphere-bg) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

html.theme-light #plugin-qsphere .qsphere-canvas-container,
html.theme-light .qsphere-display .qsphere-canvas-container {
    background: var(--qsphere-bg) !important;
    margin: 0 !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.theme-light #plugin-qsphere .qsphere-canvas-container canvas,
html.theme-light .qsphere-display .qsphere-canvas-container canvas {
    background: transparent !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

html.theme-light .qsphere-phase-wheel {
    background: transparent !important;
}

html.theme-light .qsphere-phase-wheel canvas {
    background: transparent !important;
}

html.theme-light .phase-label {
    color: var(--text-secondary) !important;
}

html.theme-light .phase-label-top,
html.theme-light .phase-label-right,
html.theme-light .phase-label-bottom,
html.theme-light .phase-label-left {
    color: var(--text-secondary) !important;
}

html.theme-light .phase-wheel-title {
    color: var(--text-primary) !important;
}

html.theme-light .qsphere-info {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .qsphere-canvas-floating {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

html.theme-light .qsphere-canvas-floating canvas {
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
}

/* ============ FIDELITY METRICS VISUALIZATION - Light Theme ============ */
html.theme-light .fidelity-metrics-display {
    background: var(--bg-primary) !important;
    border-color: var(--border-subtle) !important;
}

html.theme-light .fidelity-metrics-header {
    background: var(--bg-tertiary) !important;
}

html.theme-light .fidelity-metrics-content {
    background: var(--bg-primary) !important;
}

html.theme-light .fidelity-metrics-info {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .metric-row {
    background: var(--bg-tertiary) !important;
    border-left-color: var(--accent-primary) !important;
}

html.theme-light .metric-row:hover {
    background: rgba(2, 132, 199, 0.1) !important;
    border-left-color: var(--accent-secondary) !important;
}

html.theme-light .metric-label {
    color: var(--accent-primary) !important;
}

html.theme-light .metric-value {
    color: var(--text-primary) !important;
}

/* Fidelity Coherence Header */
html.theme-light .fidelity-coherence-header {
    background: var(--bg-primary) !important;
    border: none !important;
}

html.theme-light .fidelity-coherence-label {
    color: var(--text-secondary) !important;
}

html.theme-light .fidelity-coherence-value {
    color: var(--text-primary) !important;
}

/* Fidelity SVG Container */
html.theme-light .fidelity-svg-container {
    background: var(--bg-primary) !important;
}

/* Fidelity Donut Chart */
html.theme-light .fidelity-donut-hover {
    fill: rgba(2, 132, 199, 0.05) !important;
}

html.theme-light .fidelity-donut:hover .fidelity-donut-hover {
    fill: rgba(2, 132, 199, 0.1) !important;
}

/* Fidelity Durations Footer */
html.theme-light .fidelity-durations-footer {
    background: var(--bg-primary) !important;
    border: none !important;
}

html.theme-light .fidelity-durations-title {
    color: var(--text-secondary) !important;
}

html.theme-light .fidelity-duration-item {
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--border-default) !important;
}

html.theme-light .fidelity-duration-label {
    color: var(--text-muted) !important;
}

html.theme-light .fidelity-duration-value {
    color: var(--text-primary) !important;
}

html.theme-light .fidelity-duration-placeholder {
    color: var(--text-muted) !important;
}

html.theme-light .fidelity-floating-chart {
    background: var(--bg-primary) !important;
}

html.theme-light .fidelity-times-row {
    border-bottom-color: var(--border-subtle) !important;
}

/* ============ CIRCUIT DEPTH ANALYZER - Light Theme ============ */
html.theme-light .circuit-depth-display {
    background: var(--bg-primary) !important;
    border-color: var(--border-subtle) !important;
}

html.theme-light .circuit-depth-header {
    background: var(--bg-tertiary) !important;
}

html.theme-light .circuit-depth-content {
    background: var(--bg-primary) !important;
}

html.theme-light .circuit-depth-info {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html.theme-light #depthChartCanvas {
    background: var(--bg-primary) !important;
}

/* ============ ENTANGLEMENT DIAGRAM - Light Theme ============ */
html.theme-light .entanglement-diagram-display {
    background: var(--bg-primary) !important;
    border-color: var(--border-subtle) !important;
}

html.theme-light .entanglement-diagram-header {
    background: var(--bg-tertiary) !important;
}

html.theme-light .entanglement-diagram-content {
    background: var(--bg-primary) !important;
}

html.theme-light .entanglement-diagram-info {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html.theme-light #entanglementCanvas {
    background: var(--bg-primary) !important;
}

/* ============ VISUALIZATION HEADERS (Common) - Light Theme ============ */
html.theme-light .density-matrix-header,
html.theme-light .hinton-plot-header,
html.theme-light .pauli-vector-header,
html.theme-light .state-vector-header,
html.theme-light .qsphere-header,
html.theme-light .fidelity-metrics-header,
html.theme-light .circuit-depth-header,
html.theme-light .entanglement-diagram-header {
    color: var(--text-primary) !important;
}

html.theme-light .viz-title {
    color: var(--text-primary) !important;
}

html.theme-light .viz-subtitle {
    color: var(--text-muted) !important;
}

/* Visualization Toggle Buttons */
html.theme-light .viz-toggle-btn,
html.theme-light .viz-expand-btn {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .viz-toggle-btn:hover,
html.theme-light .viz-expand-btn:hover {
    background: var(--bg-secondary) !important;
    color: var(--accent-primary) !important;
}

/* Header Buttons in Visualizations */
html.theme-light .density-matrix-header .btn.btn-outline,
html.theme-light .hinton-plot-header .btn.btn-outline,
html.theme-light .pauli-vector-header .btn.btn-outline,
html.theme-light .state-vector-header .btn.btn-outline,
html.theme-light .qsphere-header .btn.btn-outline,
html.theme-light .fidelity-metrics-header .btn.btn-outline,
html.theme-light .circuit-depth-header .btn.btn-outline,
html.theme-light .entanglement-diagram-header .btn.btn-outline {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

html.theme-light .density-matrix-header .btn.btn-outline:hover,
html.theme-light .hinton-plot-header .btn.btn-outline:hover,
html.theme-light .pauli-vector-header .btn.btn-outline:hover,
html.theme-light .state-vector-header .btn.btn-outline:hover,
html.theme-light .qsphere-header .btn.btn-outline:hover,
html.theme-light .fidelity-metrics-header .btn.btn-outline:hover,
html.theme-light .circuit-depth-header .btn.btn-outline:hover,
html.theme-light .entanglement-diagram-header .btn.btn-outline:hover {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: white !important;
}

/* ============ SKELETON LOADING STATES - Light Theme ============ */
html.theme-light .app-loading-skeleton {
    background: var(--bg-primary) !important;
}

html.theme-light .skeleton-spinner {
    border-color: var(--border-default) !important;
    border-top-color: var(--accent-primary) !important;
}

html.theme-light .skeleton-text {
    color: var(--accent-primary) !important;
}

/* Generic Skeleton Loading Animation */
html.theme-light .skeleton,
html.theme-light .skeleton-loader {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-secondary) 50%,
        var(--bg-tertiary) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

html.theme-light .skeleton-bar,
html.theme-light .skeleton-circle,
html.theme-light .skeleton-rect {
    background: var(--bg-tertiary) !important;
}

/* Plugin Loading Skeletons */
html.theme-light .plugin-skeleton,
html.theme-light .viz-skeleton {
    background: var(--bg-tertiary) !important;
    border-radius: 6px !important;
}

html.theme-light .plugin-skeleton-header {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        #F1F5F9 50%,
        var(--bg-tertiary) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}

html.theme-light .plugin-skeleton-content {
    background: var(--bg-tertiary) !important;
}

/* ============ FLOATING VISUALIZATION WINDOWS - Light Theme (Additional) ============ */
html.theme-light .floating-viz-body.pauli-vector-body,
html.theme-light .floating-viz-body.state-vector-body {
    background: var(--bg-primary) !important;
}

html.theme-light .floating-viz-body.fidelity-metrics-body,
html.theme-light .floating-viz-body.circuit-depth-body {
    background: var(--bg-primary) !important;
}

html.theme-light .floating-viz-body.entanglement-body {
    background: var(--bg-primary) !important;
}

html.theme-light .floating-viz-body.entanglement-body canvas {
    background: var(--bg-tertiary) !important;
}

html.theme-light .floating-viz-content .density-matrix-canvas-container,
html.theme-light .floating-viz-content .hinton-canvas-container {
    background: transparent !important;
}

html.theme-light .floating-viz-content .density-matrix-controls,
html.theme-light .floating-viz-content .hinton-plot-controls,
html.theme-light .floating-viz-content .state-vector-controls {
    background: transparent !important;
    border: none !important;
}

html.theme-light .floating-viz-content .pauli-vector-container,
html.theme-light .floating-viz-content .state-vector-container {
    background: var(--bg-primary) !important;
}

html.theme-light .floating-viz-content .entanglement-diagram-content,
html.theme-light .floating-viz-content .fidelity-metrics-content,
html.theme-light .floating-viz-content .circuit-depth-content {
    background: var(--bg-primary) !important;
}

html.theme-light .floating-viz-body .entanglement-diagram-content,
html.theme-light .floating-viz-body .circuit-depth-content,
html.theme-light .floating-viz-body .fidelity-metrics-content {
    background: var(--bg-primary) !important;
}

/* Floating Plugin Windows - State Controls */
html.theme-light .floating-plugin-content .hinton-mode-selector,
html.theme-light .floating-plugin-content .density-mode-selector,
html.theme-light .floating-plugin-content .state-vector-controls {
    background: transparent !important;
    border: none !important;
}

html.theme-light .native-float-body .hinton-mode-selector,
html.theme-light .native-float-body .density-mode-selector,
html.theme-light .native-float-body .state-vector-controls {
    background: transparent !important;
    border: none !important;
}

html.theme-light .native-float-body .state-vector-controls,
html.theme-light .native-float-body .state-vector-controls-floating {
    background: transparent !important;
    border: none !important;
}

html.theme-light .native-float-body .state-vector-container,
html.theme-light .native-float-body .state-vector-scrollable {
    background: var(--bg-primary) !important;
}

html.theme-light .native-float-body .state-vector-empty {
    color: var(--text-muted) !important;
}

html.theme-light .native-float-body .fidelity-times-row {
    border-bottom-color: var(--border-subtle) !important;
}

/* State Vector Floating Content */
html.theme-light .state-vector-content-floating {
    background: var(--bg-secondary) !important;
}

html.theme-light .state-vector-content-floating .state-vector-row {
    border-bottom-color: var(--border-subtle) !important;
}

html.theme-light .state-vector-content-floating .state-vector-row:hover {
    background: var(--bg-tertiary) !important;
}

html.theme-light .state-vector-content-floating .state-vector-amplitude {
    color: var(--text-secondary) !important;
}

html.theme-light .state-vector-content-floating .state-vector-bar {
    background: var(--bg-tertiary) !important;
}

/* Floating Plugin Body Styles */
html.theme-light .floating-plugin-body.pauli-vector-floating,
html.theme-light .floating-plugin-body.state-vector-floating,
html.theme-light .floating-plugin-body.fidelity-metrics-floating {
    background: var(--bg-primary) !important;
}

html.theme-light .floating-plugin-body.qsphere-floating {
    background: var(--qsphere-bg) !important;
    padding: 0 !important;
}

html.theme-light .floating-plugin-body.entanglement-floating {
    background: var(--bg-primary) !important;
}

html.theme-light .floating-plugin-body.circuit-depth-floating {
    background: var(--bg-primary) !important;
}

html.theme-light .floating-plugin-body.circuit-depth-floating canvas {
    background: var(--bg-primary) !important;
}

/* ============ HISTOGRAM VISUALIZATION - Light Theme (Extended) ============ */
html.theme-light .histogram-row {
    border-bottom-color: var(--border-subtle) !important;
}

html.theme-light .histogram-row:hover {
    background: var(--bg-tertiary) !important;
}

html.theme-light .histogram-state-label {
    color: var(--accent-primary) !important;
}

html.theme-light .histogram-bar-fill {
    background: var(--gradient-primary) !important;
}

html.theme-light .histogram-percent {
    color: var(--text-secondary) !important;
}

html.theme-light .histogram-percent.histogram-low-prob {
    color: var(--text-muted) !important;
}

/* ============ RESULTS DIALOG - State Bars ============ */
html.theme-light .results-d-bar-cell {
    background: var(--bg-tertiary) !important;
}

html.theme-light .results-d-bar-fill {
    background: var(--gradient-primary) !important;
    box-shadow: none !important;
}

/* ============ RESULTS DIALOG - Cards ============ */
html.theme-light .results-d-metric-cell,
html.theme-light .stat-card {
    background: var(--bg-primary) !important;
}

/* ============ RESULTS DIALOG - Export Buttons ============ */
html.theme-light .results-d-export-btn,
html.theme-light .results-d-export-btn.btn-secondary {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}

html.theme-light .results-d-export-btn:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* ============ TOOL SECTIONS - Light Theme ============ */
html.theme-light .tool-section {
    background: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
}

html.theme-light .tool-section-header {
    background: var(--bg-tertiary) !important;
}

html.theme-light .tool-section-header:hover {
    background: rgba(2, 132, 199, 0.1) !important;
}

html.theme-light .tool-section-icon {
    color: var(--accent-primary) !important;
}

html.theme-light .tool-section-title {
    color: var(--text-primary) !important;
}

html.theme-light .tool-section-toggle {
    color: var(--text-secondary) !important;
}

html.theme-light .tool-section-toggle:hover {
    color: var(--accent-primary) !important;
}

/* ============ BLOCH PROBABILITY DISPLAY - Light Theme ============ */
html.theme-light .bloch-probability-display {
    color: var(--text-secondary) !important;
}

/* ============ MITIGATION OPTIONS - Light Theme ============ */
html.theme-light .mitigation-checkbox {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

html.theme-light .mitigation-checkbox:hover {
    background: rgba(2, 132, 199, 0.1) !important;
}

html.theme-light .mitigation-checkbox input[type="checkbox"] {
    border-color: var(--border-default) !important;
    background: var(--bg-secondary) !important;
}

html.theme-light .mitigation-checkbox input[type="checkbox"]:checked {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* ============ TOOLBAR STATS - Light Theme ============ */
html.theme-light .toolbar-stats {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-default) !important;
}

html.theme-light .toolbar-stat-label {
    color: var(--text-muted) !important;
}

html.theme-light .toolbar-stat-value {
    color: var(--text-primary) !important;
}

/* ============ VENDOR CARD ROW - Light Theme ============ */
/* Override all base styles that add borders or shadows to vendor-card-row */
html.theme-light .vendor-card-row,
html.theme-light .vendor-card-row:hover,
html.theme-light .vendor-card-row:focus,
html.theme-light .vendor-card-row:active,
html.theme-light .vendor-status-card .vendor-card-row,
html.theme-light .vendor-status-card .vendor-card-row:hover,
html.theme-light .vendor-status-card--simple .vendor-card-row,
html.theme-light .vendor-status-card--simple .vendor-card-row:hover,
html.theme-light .vendor-status-card--simple .vendor-card-row:focus,
html.theme-light .vendor-status-card--simple .vendor-card-row:active {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
    outline-width: 0 !important;
}

/* Parent vendor-status-card - clean light border, no hover effect */
html.theme-light .vendor-status-card,
html.theme-light .vendor-status-card:hover,
html.theme-light .vendor-status-card--simple,
html.theme-light .vendor-status-card--simple:hover {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-color: var(--border-subtle) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: hidden !important;
}

/* Ensure vendor-card-row inside parent does not have extra borders */
html.theme-light .vendor-status-card > .vendor-card-row,
html.theme-light .vendor-status-card--simple > .vendor-card-row {
    border: 0 none transparent !important;
    box-shadow: none !important;
}

/* ============ DROPDOWN / SELECT - Light Theme ============ */
/* Gray arrow (#64748B) for all selects - matching form-input--sm in vendor preferences */
/* IMPORTANT: Must override all base .form-select styles with cyan/blue arrows */
html.theme-light .form-select,
html.theme-light select,
html.theme-light select.form-input,
html.theme-light select.form-input--sm,
html.theme-light .preference-input-group select,
html.theme-light .preference-input-group .form-select,
html.theme-light .preference-input-group .form-input--sm,
html.theme-light .vendor-config-form select,
html.theme-light .vendor-config-form .form-select,
html.theme-light .plugin-content select,
html.theme-light .plugin-content .form-select,
html.theme-light .modal-content select,
html.theme-light .modal-content .form-select,
html.theme-light .dialog-content select,
html.theme-light .dialog-content .form-select,
html.theme-light .settings-panel select,
html.theme-light .settings-panel .form-select,
html.theme-light .account-settings-form select,
html.theme-light .account-settings-form .form-select {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    /* Gray arrow for light theme - NOT cyan/blue */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 36px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Override the more specific position for larger form-selects */
html.theme-light .form-select[style*="background-position"],
html.theme-light select[style*="background-position"] {
    background-position: right 12px center !important;
}

html.theme-light .form-select:focus,
html.theme-light select:focus,
html.theme-light select.form-input:focus,
html.theme-light select.form-input--sm:focus,
html.theme-light .plugin-content select:focus,
html.theme-light .plugin-content .form-select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1) !important;
}

html.theme-light .form-select:disabled,
html.theme-light select:disabled,
html.theme-light select.form-input:disabled {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
}

html.theme-light .form-select option,
html.theme-light select option,
html.theme-light select.form-input option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ============ STATE TIMELINE - Light Theme ============ */
html.theme-light .floating-viz-body.state-timeline-body {
    background: var(--bg-primary) !important;
}

html.theme-light .state-timeline-container {
    background: var(--bg-secondary) !important;
}

/* State Timeline SVG overrides */
html.theme-light .state-timeline-container svg text {
    fill: var(--text-primary) !important;
}

html.theme-light .state-timeline-container svg rect[fill="#1E1B2E"],
html.theme-light .state-timeline-container svg rect[fill="#1A2332"],
html.theme-light .state-timeline-container svg rect[fill="#111827"] {
    fill: var(--bg-tertiary) !important;
}

/* ============ SVG VISUALIZATION OVERRIDES - Light Theme ============ */
/* These override hardcoded colors in D3.js/SVG renderers */

/* ---- DENSITY MATRIX - Light Theme ---- */
html.theme-light .density-matrix-canvas-container,
html.theme-light #density-matrix-chart,
html.theme-light #density-matrix-floating-chart {
    background: transparent !important;
}

html.theme-light .density-matrix-canvas-container canvas {
    filter: brightness(1.1) contrast(0.95) !important;
}

/* ---- ENTANGLEMENT MAP - Light Theme ---- */
html.theme-light #entanglement-chart,
html.theme-light #entanglement-floating-chart {
    background: var(--bg-primary) !important;
}

/* Entanglement SVG backgrounds */
html.theme-light #entanglement-chart svg,
html.theme-light #entanglement-floating-chart svg {
    background: var(--bg-primary) !important;
}

/* Entanglement Network - Dark backgrounds to light */
html.theme-light #entanglement-chart svg circle[fill="#1E1B2E"],
html.theme-light #entanglement-floating-chart svg circle[fill="#1E1B2E"],
html.theme-light .plugin-chart-container svg circle[fill="#1E1B2E"] {
    fill: #FFFFFF !important;
}

html.theme-light #entanglement-chart svg text[fill="#1E1B2E"],
html.theme-light #entanglement-floating-chart svg text[fill="#1E1B2E"],
html.theme-light .plugin-chart-container svg text[fill="#1E1B2E"] {
    fill: var(--text-primary) !important;
}

/* Entanglement node text - make readable on light */
html.theme-light #entanglement-chart svg text[fill="#C4B5FD"],
html.theme-light #entanglement-floating-chart svg text[fill="#C4B5FD"] {
    fill: #6D28D9 !important;
}

html.theme-light #entanglement-chart svg text[fill="#D8B4FE"],
html.theme-light #entanglement-floating-chart svg text[fill="#D8B4FE"] {
    fill: #6D28D9 !important;
}

html.theme-light #entanglement-chart svg text[fill="#A855F7"],
html.theme-light #entanglement-floating-chart svg text[fill="#A855F7"] {
    fill: #7C3AED !important;
}

/* Entanglement node circles - lighter background */
html.theme-light #entanglement-chart svg circle,
html.theme-light #entanglement-floating-chart svg circle {
    stroke: #A855F7 !important;
}

/* ---- Q-SPHERE - Light Theme ---- */
/* Canvas expands to fill container - no background gaps */
html.theme-light #qsphere-floating-chart,
html.theme-light #qsphere-floating-content {
    background: var(--qsphere-bg) !important;
    padding: 0 !important;
}

/* ---- FIDELITY CHART - Light Theme ---- */
html.theme-light #fidelity-chart,
html.theme-light #fidelity-floating-chart {
    background: var(--bg-secondary) !important;
}

html.theme-light #fidelity-chart svg rect[fill="#1A2332"],
html.theme-light #fidelity-floating-chart svg rect[fill="#1A2332"],
html.theme-light .plugin-chart-container svg rect[fill="#1A2332"] {
    fill: var(--bg-tertiary) !important;
}

html.theme-light #fidelity-chart svg circle[fill="#1A2332"],
html.theme-light #fidelity-floating-chart svg circle[fill="#1A2332"] {
    fill: var(--bg-tertiary) !important;
}

/* Fidelity text colors for light theme */
html.theme-light #fidelity-chart svg text,
html.theme-light #fidelity-floating-chart svg text {
    fill: var(--text-primary) !important;
}

/* Fidelity donut center text */
html.theme-light .fidelity-svg-container svg text {
    fill: var(--text-primary) !important;
}

/* ---- GENERIC SVG OVERRIDES ---- */
/* Dark fill overrides for all visualizations */
html.theme-light .plugin-chart-container svg [fill="#1E1B2E"],
html.theme-light .plugin-chart-container svg [fill="#1A2332"],
html.theme-light .plugin-chart-container svg [fill="#111827"],
html.theme-light .plugin-chart-container svg [fill="#0F172A"],
html.theme-light .plugin-chart-container svg [fill="#0a0f1a"],
html.theme-light .floating-viz-body svg [fill="#1E1B2E"],
html.theme-light .floating-viz-body svg [fill="#1A2332"],
html.theme-light .floating-viz-body svg [fill="#111827"],
html.theme-light .floating-viz-body svg [fill="#0F172A"],
html.theme-light .floating-viz-body svg [fill="#0a0f1a"] {
    fill: #FFFFFF !important;
}

/* SVG stroke overrides */
html.theme-light .plugin-chart-container svg [stroke="#1E1B2E"],
html.theme-light .plugin-chart-container svg [stroke="#1A2332"],
html.theme-light .floating-viz-body svg [stroke="#1E1B2E"],
html.theme-light .floating-viz-body svg [stroke="#1A2332"] {
    stroke: var(--border-default) !important;
}

/* All SVG text should be readable */
html.theme-light .plugin-chart-container svg text,
html.theme-light .floating-viz-body svg text {
    fill: var(--text-primary) !important;
}

/* ---- CANVAS ELEMENTS - Light Theme Filters ---- */
/* Q-Sphere uses THREE.js WebGL - invert for light theme */
html.theme-light .qsphere-canvas-container canvas,
html.theme-light #qsphere-chart canvas,
html.theme-light #qsphere-floating-chart canvas {
    filter: invert(0.9) hue-rotate(180deg) brightness(1.1) !important;
}

/* All plugin canvas elements - general light adjustment */
html.theme-light .plugin-chart-container canvas,
html.theme-light .floating-viz-body canvas {
    filter: brightness(1.15) contrast(0.9) !important;
}

/* ---- VISUALIZATION CONTAINER BACKGROUNDS ---- */
html.theme-light .plugin-chart-container,
html.theme-light .floating-viz-body {
    background: var(--bg-primary) !important;
}

/* Entanglement - ensure SVG nodes have light fill */
html.theme-light #entanglement-chart svg circle[fill],
html.theme-light #entanglement-floating-chart svg circle[fill],
html.theme-light .entanglement-chart svg circle[fill] {
    fill: var(--bg-secondary) !important;
}

/* Re-apply stroke for entanglement nodes */
html.theme-light #entanglement-chart svg circle,
html.theme-light #entanglement-floating-chart svg circle {
    stroke: #A855F7 !important;
    stroke-width: 2 !important;
}

/* ============================================================================
   ADDITIONAL LIGHT THEME FIXES - v3.20
   ============================================================================ */

/* ============ NUMBER INPUT - Style custom spinners gray ============ */
/* Number input base styling - NO dropdown arrow! */
html.theme-light input[type="number"],
html.theme-light input[type="number"].form-input,
html.theme-light input[type="number"].form-input--sm {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    /* IMPORTANT: Remove any dropdown arrow from number inputs */
    background-image: none !important;
    padding-right: var(--space-sm) !important;
}

/* Ensure no arrow on number inputs in any context */
html.theme-light .preference-input-group input[type="number"],
html.theme-light .vendor-config-form input[type="number"],
html.theme-light .plugin-content input[type="number"],
html.theme-light .modal-content input[type="number"],
html.theme-light .dialog-content input[type="number"],
html.theme-light .settings-panel input[type="number"],
html.theme-light .account-settings-form input[type="number"] {
    background-image: none !important;
    padding-right: var(--space-sm) !important;
}

/* Number input wrapper */
html.theme-light .number-input-wrapper {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-default) !important;
}

/* Custom spinner container - gray border */
html.theme-light .number-spinners {
    border-left: 1px solid var(--border-default) !important;
}

/* Custom spinner buttons - GRAY color instead of cyan/blue */
html.theme-light .number-spinner-btn {
    background: rgba(100, 116, 139, 0.08) !important;
    color: #64748B !important;
    border: none !important;
}

html.theme-light .number-spinner-btn:first-child {
    border-bottom: 1px solid var(--border-default) !important;
}

html.theme-light .number-spinner-btn:hover {
    background: rgba(100, 116, 139, 0.15) !important;
    color: #475569 !important;
}

html.theme-light .number-spinner-btn:active {
    background: rgba(100, 116, 139, 0.25) !important;
}

/* Plugin content number spinners */
html.theme-light .plugin-content .number-spinner-btn {
    background: rgba(100, 116, 139, 0.08) !important;
    color: #64748B !important;
}

html.theme-light .plugin-content .number-spinner-btn:hover {
    background: rgba(100, 116, 139, 0.15) !important;
    color: #475569 !important;
}

/* ============ LOGO / IDE BADGE ============ */
/* Logo inherits same styles as dark theme - no overrides needed */

/* ============ VENDOR STATUS PANEL - Complete Border Fix ============ */
/* The card container - no hover border, proper rounded corners */
html.theme-light .vendor-status-card,
html.theme-light .vendor-status-card--simple,
html.theme-light .vendor-status-card.vendor-status-card--simple {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html.theme-light .vendor-status-card:hover,
html.theme-light .vendor-status-card:focus,
html.theme-light .vendor-status-card:active,
html.theme-light .vendor-status-card--simple:hover,
html.theme-light .vendor-status-card--simple:focus,
html.theme-light .vendor-status-card--simple:active,
html.theme-light .vendor-status-card.vendor-status-card--simple:hover {
    border: 1px solid var(--border-subtle) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Inner card row - no background to preserve parent's rounded corners */
html.theme-light .vendor-status-card .vendor-card-row,
html.theme-light .vendor-status-card--simple .vendor-card-row {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* ============ FLOATING WINDOW HEADER/FOOTER - Match panel headers ============ */
/* Use same styling as visualization panels (Hinton, Pauli, etc.) */
html.theme-light .native-float-header,
html.theme-light .native-float-window .native-float-header,
html.theme-light .floating-viz-header,
html.theme-light .floating-plugin-header {
    background: #F1F5F9 !important;
    background-color: #F1F5F9 !important;
    border-bottom: 1px solid var(--border-default) !important;
}

html.theme-light .native-float-footer,
html.theme-light .native-float-window .native-float-footer,
html.theme-light .floating-viz-footer,
html.theme-light .floating-plugin-footer {
    background: #F1F5F9 !important;
    background-color: #F1F5F9 !important;
    border-top: 1px solid var(--border-default) !important;
}

/* Window body should use primary background */
html.theme-light .native-float-window,
html.theme-light .native-float-body,
html.theme-light .floating-viz-body,
html.theme-light .floating-plugin-body {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

/* WinBox floating windows - header darker than body */
html.theme-light .winbox {
    background: var(--bg-secondary) !important;
}

html.theme-light .winbox .wb-header,
html.theme-light .wb-header {
    background: #F1F5F9 !important;
    background-color: #F1F5F9 !important;
    border-bottom: 1px solid var(--border-default) !important;
}

html.theme-light .winbox .wb-title,
html.theme-light .wb-title {
    color: var(--text-primary) !important;
}

html.theme-light .winbox .wb-body,
html.theme-light .wb-body {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
}

/* ============ LOGIN / BETA SPLASH SCREEN ============ */

/* Light background for login screen */
html.theme-light .beta-splash {
    background: linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 100%) !important;
}

/* Grid background pattern for login screen - light theme */
html.theme-light .beta-splash::before {
    background-image:
        linear-gradient(rgba(2, 132, 199, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 132, 199, 0.08) 1px, transparent 1px) !important;
}

/* Legal splash - light theme */
html.theme-light .legal-splash {
    background: linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 100%) !important;
}

html.theme-light .legal-splash::before {
    background-image:
        linear-gradient(rgba(2, 132, 199, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 132, 199, 0.08) 1px, transparent 1px) !important;
}

/* Login dialog container - bg-tertiary */
html.theme-light .beta-container {
    background: var(--bg-tertiary) !important;
}

/* Logo text "Visual" - gradient like main menu */
html.theme-light .beta-logo-text {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* The "q" subscript - gradient like main menu */
html.theme-light .beta-logo-q {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* IDE badge - inherits gradient text from dark theme, only background changes via ::before */

/* "QUANTUM CIRCUIT DESIGNER" text - text-primary */
html.theme-light .beta-subtitle {
    color: var(--text-primary) !important;
}

/* "BETA TESTING" badge - white text on blue bg */
html.theme-light .beta-status {
    color: #ffffff !important;
}

/* ============ LEGAL PAGES - Light Theme ============ */
/* Same styles as original inline privacy.html */

/* Light theme body background */
html.theme-light body.legal-page {
    background: linear-gradient(180deg, #F8FAFC 0%, #e2e8f0 100%) !important;
}

/* Light theme grid pattern using ::after */
html.theme-light body.legal-page::after {
    background-image:
        linear-gradient(rgba(2, 132, 199, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 132, 199, 0.12) 1px, transparent 1px);
}

/* Light theme header */
html.theme-light body.legal-page .legal-header {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Light theme logo badge background */
html.theme-light body.legal-page .layout-logo-badge::before {
    background: #D0DFF8 !important;
}

/* Light theme content card */
html.theme-light body.legal-page .legal-content {
    background: var(--bg-tertiary) !important;
    border: 1px solid rgba(14, 165, 233, 0.12) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}