/* ============================================
   DARK MODE
   ============================================ */

[data-theme="dark"] {
    --bg: #0F0F1A;
    --bg-card: #1A1A2E;
    --bg-hover: #252540;
    --text: #EEEEF6;
    --text-secondary: #A8A8C8;
    --text-muted: #6A6A8A;
    --border: #2A2A44;
    --border-light: #1E1E34;
}

[data-theme="dark"] .header {
    background: rgba(26, 26, 46, 0.92);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .theme-toggle {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
[data-theme="dark"] .theme-toggle:hover {
    background: var(--border);
    color: var(--text);
}

[data-theme="dark"] .upload-zone {
    background: var(--bg);
    border-color: var(--border);
}
[data-theme="dark"] .upload-zone:hover {
    border-color: var(--primary);
    background: rgba(108, 99, 255, 0.06);
}

[data-theme="dark"] .page-nav,
[data-theme="dark"] .stats-panel {
    background: var(--bg-card);
    border-color: var(--border);
}

[data-theme="dark"] .page-nav-btn {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-secondary {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-secondary);
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(108, 99, 255, 0.08);
}

[data-theme="dark"] .preview-container {
    background: var(--bg-card);
    border-color: var(--border);
}

[data-theme="dark"] .preview-footer {
    background: var(--bg-card);
    border-color: var(--border);
}

[data-theme="dark"] .footer {
    background: var(--bg-card);
    border-top-color: var(--border);
}

[data-theme="dark"] .toast {
    background: var(--bg-card);
}

[data-theme="dark"] .text-edit-content {
    background: var(--bg-card);
}

[data-theme="dark"] .original-text {
    background: var(--bg);
    border-color: var(--border);
}

[data-theme="dark"] .text-edit-field input[type="text"] {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .hero-features span {
    background: var(--bg-card);
    border-color: var(--border);
}

[data-theme="dark"] .logo-text {
    color: var(--text);
}

[data-theme="dark"] .preloader {
    background: var(--bg);
}

[data-theme="dark"] .loading-container {
    background: var(--bg-card);
}