/* ============================================================
   DARK MODE CSS — Slide Maker Online (V2.2.0)
   Corporate Premium / Slate / Blue Palette
   ============================================================ */

[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #323234; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #424245; }

[data-theme="dark"] ::selection { background: rgba(0, 113, 227, 0.4); color: #fff; }

/* ── Inputs / UI ──────────────────────────────────────────── */
[data-theme="dark"] .smo-input,
[data-theme="dark"] .smo-select {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f5f5f7;
}

[data-theme="dark"] .smo-input:focus,
[data-theme="dark"] .smo-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2);
}

/* ── Card Styles ──────────────────────────────────────────── */
[data-theme="dark"] .generator-card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .post-card,
[data-theme="dark"] .loading-card,
[data-theme="dark"] .template-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

[data-theme="dark"] .generator-card {
    background: rgba(28, 28, 30, 0.9);
}

[data-theme="dark"] .post-card:hover,
[data-theme="dark"] .template-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* ── Article content dark mode ────────────────────────────── */
[data-theme="dark"] .article-content { color: var(--text-secondary); }
[data-theme="dark"] .article-content h2,
[data-theme="dark"] .article-content h3 { color: var(--text-primary); }
[data-theme="dark"] .article-content code { background: #1c1c1e; color: var(--brand-primary); }
[data-theme="dark"] blockquote { border-color: var(--brand-primary); color: var(--text-muted); }