/* Cnn2rtl — dark theme */
[data-theme="dark"] {
    --bg-page: #0f172a;
    --bg-surface: #1e293b;
    --bg-muted: #162032;
    --bg-elevated: #243044;
    --border: #334155;
    --border-subtle: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-on-primary: #ffffff;

    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-soft: rgba(59, 130, 246, 0.12);
    --primary-ring: rgba(59, 130, 246, 0.25);

    --accent: #fb923c;
    --accent-hover: #fdba74;
    --accent-soft: rgba(251, 146, 60, 0.12);

    --data: #38bdf8;
    --data-hover: #7dd3fc;
    --data-soft: rgba(14, 165, 233, 0.12);

    --success: #34d399;
    --success-hover: #6ee7b7;
    --success-soft: rgba(16, 185, 129, 0.12);

    --sky-400: #38bdf8;
    --sky-500: #7dd3fc;
    --sky-600: #7dd3fc;
    --emerald-400: #34d399;
    --emerald-500: #34d399;
    --emerald-600: #6ee7b7;
    --emerald-100: rgba(16, 185, 129, 0.12);

    --danger: #f87171;
    --danger-soft: rgba(239, 68, 68, 0.12);

    --header-bg: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);
    --header-text: #f8fafc;
    --header-text-muted: #94a3b8;
    --stepper-bg: #1e293b;
    --stepper-border: #334155;
    --footer-bg: #020617;
    --footer-text: #64748b;
    --footer-link: #60a5fa;

    /* Layer colors — dark tuned */
    --layer-input-fill: rgba(59, 130, 246, 0.15);
    --layer-input-stroke: #60a5fa;
    --layer-input-slice: rgba(96, 165, 250, 0.35);
    --layer-conv-fill: rgba(244, 63, 94, 0.12);
    --layer-conv-stroke: #fb7185;
    --layer-conv-slice: rgba(251, 113, 133, 0.35);
    --layer-pool-fill: rgba(139, 92, 246, 0.12);
    --layer-pool-stroke: #a78bfa;
    --layer-pool-slice: rgba(167, 139, 250, 0.35);
    --layer-flatten-fill: rgba(251, 146, 60, 0.12);
    --layer-flatten-stroke: #fb923c;
    --layer-flatten-slice: rgba(251, 146, 60, 0.35);
    --layer-dense-fill: rgba(244, 114, 182, 0.12);
    --layer-dense-stroke: #f472b6;
    --layer-dense-slice: rgba(244, 114, 182, 0.35);

    --diagram-bg: #f8fafc;

    color-scheme: dark;
}

[data-theme="dark"] .sidebar-left,
[data-theme="dark"] .sidebar-right,
[data-theme="dark"] .main-content,
[data-theme="dark"] .training-options {
    background: var(--bg-surface);
}

[data-theme="dark"] .layer input,
[data-theme="dark"] .layer select,
[data-theme="dark"] .option-row input,
[data-theme="dark"] .option-row select,
[data-theme="dark"] .training-options input,
[data-theme="dark"] .training-options select {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] .layer input:disabled,
[data-theme="dark"] .layer select:disabled,
[data-theme="dark"] .option-row input:disabled,
[data-theme="dark"] .option-row select:disabled,
[data-theme="dark"] .training-options input:disabled,
[data-theme="dark"] .training-options select:disabled {
    background: var(--bg-muted);
    color: var(--text-muted);
    opacity: 1;
}

[data-theme="dark"] .layer.layer-input {
    background: var(--layer-input-fill);
    border-color: var(--layer-input-stroke);
}

[data-theme="dark"] .layer.layer-conv {
    background: var(--layer-conv-fill);
    border-color: var(--layer-conv-stroke);
}

[data-theme="dark"] .layer.layer-pool {
    background: var(--layer-pool-fill);
    border-color: var(--layer-pool-stroke);
}

[data-theme="dark"] .layer.layer-flatten,
[data-theme="dark"] .flatten-marker {
    background: var(--layer-flatten-fill);
    border-color: var(--layer-flatten-stroke);
}

[data-theme="dark"] .layer.layer-dense,
[data-theme="dark"] .layer.layer-output {
    background: var(--layer-dense-fill);
    border-color: var(--layer-dense-stroke);
}

[data-theme="dark"] .layer h4,
[data-theme="dark"] .layer .layer-title {
    color: var(--text-primary);
}

[data-theme="dark"] .layer-field label,
[data-theme="dark"] .layer-field-row2 label,
[data-theme="dark"] .readonly-display-label,
[data-theme="dark"] .readonly-display-value,
[data-theme="dark"] .readonly-display-inline .readonly-display-line {
    color: var(--text-secondary);
}

[data-theme="dark"] .readonly-display-value strong,
[data-theme="dark"] .readonly-display-inline .readonly-display-line strong {
    color: var(--text-primary);
}

[data-theme="dark"] .readonly-display-hint {
    color: var(--text-muted);
}

[data-theme="dark"] .flatten-marker h4,
[data-theme="dark"] .flatten-note {
    color: var(--layer-flatten-stroke);
}

[data-theme="dark"] .ts-inline-field-row label {
    color: var(--text-secondary, #cbd5e1);
}

[data-theme="dark"] .ts-field-equiv {
    color: var(--text-muted, #94a3b8);
}

[data-theme="dark"] .btn:disabled,
[data-theme="dark"] button:disabled {
    background: var(--bg-muted) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .help-tooltip,
[data-theme="dark"] .help-tooltip-small {
    background: var(--bg-elevated);
    border-color: var(--border);
}

[data-theme="dark"] .auth-btn--secondary,
[data-theme="dark"] .mnist-count-modal .auth-btn--secondary {
    color: var(--text-primary, #f1f5f9);
    background: var(--bg-elevated, #243044);
    border: 1px solid var(--border, #334155);
}

[data-theme="dark"] .auth-btn--secondary:hover,
[data-theme="dark"] .mnist-count-modal .auth-btn--secondary:hover {
    color: var(--text-primary, #f1f5f9);
    background: var(--bg-muted, #162032);
    border-color: var(--primary, #3b82f6);
    box-shadow: none;
}

[data-theme="dark"] .mnist-count-scale-warn {
    color: #fecdd3;
    background: rgba(190, 18, 60, 0.22);
    border-color: #fb7185;
}

[data-theme="dark"] .mnist-count-confirm-box {
    color: #fed7aa;
    background: rgba(194, 65, 12, 0.22);
    border-color: #fb923c;
}

[data-theme="dark"] .success-message {
    color: var(--success, #34d399);
    background: var(--success-soft, rgba(16, 185, 129, 0.12));
    border-color: rgba(52, 211, 153, 0.45);
}