/* ==================== Dark Mode Styles ==================== */

body.dark {
    --bg-color: #1a1a1a;
    --sidebar-bg: #1f1f1f;
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --border-color: #374151;
    --primary-color: #818cf8;
    --primary-hover: #6366f1;
    --panel-bg: #252525;
    --card-bg: #1f1f1f;
}

/* Layout Dark Mode */
body.dark .nav-item:hover {
    background-color: var(--panel-bg);
}

body.dark .nav-item.active {
    background-color: var(--panel-bg);
}

body.dark .sidebar-subscribe-btn {
    background: var(--sidebar-bg);
    border-color: var(--primary-color);
}

body.dark .sidebar-api-btn {
    background: var(--panel-bg);
    color: var(--text-secondary);
}

body.dark .header-tab {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .header-tab.active {
    background: var(--text-primary);
    border-color: var(--text-primary);
}

/* Components Dark Mode */
body.dark .editor-wrapper,
body.dark .tool-btn,
body.dark .toolbar-select,
body.dark .voice-select-trigger,
body.dark .voice-dropdown {
    background: var(--sidebar-bg);
}

body.dark .voice-option:hover {
    background: var(--panel-bg);
}

body.dark .voice-option.selected {
    background: rgba(99, 102, 241, 0.2);
}

/* Toast Bubble - Dark Mode */
body.dark .toast {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.5),
        0 10px 10px -5px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}

body.dark .toast:hover {
    box-shadow:
        0 24px 30px -6px rgba(0, 0, 0, 0.6),
        0 12px 12px -6px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.15);
}

body.dark .toast.success {
    background: linear-gradient(135deg, rgba(50, 215, 75, 0.15) 0%, rgba(48, 209, 88, 0.1) 100%);
    border: 1px solid rgba(50, 215, 75, 0.3);
}

body.dark .toast.error {
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.15) 0%, rgba(255, 69, 58, 0.1) 100%);
    border: 1px solid rgba(255, 59, 48, 0.3);
}

body.dark .toast.warning {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.15) 0%, rgba(255, 159, 10, 0.1) 100%);
    border: 1px solid rgba(255, 149, 0, 0.3);
}

body.dark .toast.info {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(10, 132, 255, 0.1) 100%);
    border: 1px solid rgba(0, 122, 255, 0.3);
}

body.dark .toast-close {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

body.dark .toast-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

body.dark .filter-tag {
    background: var(--sidebar-bg);
}

/* Home Dark Mode */
body.dark .main-card,
body.dark .preset-btn,
body.dark .control-select,
body.dark .voice-selector,
body.dark .voice-recommendation-item {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .creation-tab {
    background: var(--sidebar-bg);
}

body.dark .creation-tab.active {
    background: var(--text-primary);
    color: var(--bg-color);
    border-color: var(--text-primary);
}

body.dark .creation-tab.active .badge {
    background: rgba(0, 0, 0, 0.1);
    color: var(--bg-color);
}

body.dark .preset-btn:hover {
    background: var(--panel-bg);
}

body.dark .control-item,
body.dark .icon-btn {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .control-select-transparent {
    color: var(--text-primary);
}

body.dark .home-textarea {
    color: var(--text-primary);
}

body.dark .voice-tag {
    background: var(--panel-bg);
}

body.dark .tool-card.purple-gradient {
    background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
}

body.dark .tool-card.blue-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

body.dark .try-now-btn {
    border-color: white;
    color: white;
}

body.dark .try-now-btn:hover {
    background: white;
    color: black;
}

/* Voice Library Dark Mode */
body.dark .voice-library-card {
    background: var(--sidebar-bg);
}

/* Voice Clone Dark Mode */
body.dark .clone-card {
    background: var(--panel-bg);
}

body.dark .message-box.success {
    background: #1b3a1f;
    color: #81c784;
}

body.dark .message-box.error {
    background: #3a1b1b;
    color: #ef5350;
}

body.dark .message-box.info {
    background: #1b2a3a;
    color: #64b5f6;
}

body.dark .record-modal-content {
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
}

body.dark .record-action-btn {
    background: var(--sidebar-bg);
    border-color: rgba(239, 68, 68, 0.2);
}

body.dark .sample-item {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .sample-item:hover {
    background: var(--panel-bg);
}

body.dark .sample-delete-btn {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .sample-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

body.dark #cloneName,
body.dark #cloneModelSelect {
    background: var(--sidebar-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Player Bar Dark Mode */
body.dark .persistent-player-bar {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .player-close-btn {
    color: #9ca3af;
}

body.dark .player-close-btn:hover {
    background: var(--panel-bg);
    color: #f3f4f6;
}

body.dark .play-pause-btn {
    background: white;
    color: black;
}

body.dark .play-pause-btn:hover {
    background: #e5e7eb;
}

body.dark .player-btn.skip-btn {
    background: transparent;
    border-color: transparent;
    color: #d1d5db;
    box-shadow: none;
}

body.dark .player-btn.skip-btn:hover {
    background: transparent;
    border-color: transparent;
    color: white;
    box-shadow: none;
}

body.dark .feedback-btn.is-active {
    background: rgba(99, 102, 241, 0.16);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

body.dark .progress-bar-fill,
body.dark .progress-thumb {
    background: white;
}

body.dark .player-tag {
    background: var(--panel-bg);
}

/* Header Subscribe Button Dark Mode */
body.dark .header-subscribe-btn {
    border-color: #8b5cf6;
    color: #a78bfa;
}


body.dark .header-subscribe-btn:hover {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
}

/* Home Dark Mode Additions */
body.dark .play-btn-overlay {
    background: var(--panel-bg);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark .chat-bubble.user {
    background: var(--panel-bg);
    color: var(--text-primary);
}

body.dark .chat-bubble.ai {
    background: var(--panel-bg);
    color: var(--text-primary);
}

/* Voice Isolator Dark Mode */
body.dark .isolator-drop-zone {
    background-color: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .isolator-drop-zone:hover {
    background-color: var(--panel-bg);
    border-color: var(--primary-color);
}

/* Voice Clone Dark Mode Additions */
body.dark .import-card {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .import-card:hover {
    background: var(--panel-bg);
    border-color: var(--primary-color);
}

body.dark .import-card.upload-card {
    background-color: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .import-card.upload-card:hover {
    background-color: var(--panel-bg);
    border-color: var(--primary-color);
}

body.dark .import-card.record-card {
    background-color: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .import-card.record-card:hover {
    background-color: var(--panel-bg);
    border-color: var(--primary-color);
}

body.dark .import-icon-bg {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-color);
}

body.dark .preview-box-container {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .preview-language-tag {
    background: var(--panel-bg);
    color: var(--text-primary);
}

body.dark .preview-footer {
    border-top-color: var(--border-color);
}

body.dark .info-box {
    background: rgba(14, 165, 233, 0.15);
    border-left-color: #0ea5e9;
    color: #38bdf8;
}

body.dark .info-box.warning {
    background: rgba(245, 158, 11, 0.15);
    border-left-color: #f59e0b;
    color: #fbbf24;
}

body.dark .info-box-icon {
    color: #38bdf8;
}

body.dark .info-box.warning .info-box-icon {
    color: #fbbf24;
}

body.dark .checkbox-container:hover input ~ .checkmark {
    border-color: var(--primary-color);
}

body.dark .checkmark {
    background-color: var(--sidebar-bg);
    border-color: var(--border-color);
}

/* Voice Library Dark Mode Additions */
body.dark .lib-banner {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
}

body.dark .lib-banner:nth-child(2) {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(56, 189, 248, 0.15) 100%);
}

body.dark .lib-banner > div:last-child {
    background: var(--panel-bg);
    border-color: var(--border-color);
}

body.dark .library-filter-bar input {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark .library-filter-bar input::placeholder {
    color: var(--text-secondary);
}

body.dark .filter-tags .tool-btn {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark .filter-tags .tool-btn:hover {
    background: var(--panel-bg);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

/* Text to Speech Dark Mode - Main Editor */
body.dark #textToSpeechContainer > div:nth-child(2) > div:first-child > div {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark .text-editor {
    background: transparent !important;
    color: var(--text-primary) !important;
}

body.dark #pauseHint {
    color: var(--text-secondary) !important;
}

/* Text to Speech Dark Mode - Right Sidebar */
body.dark #ttsSelectedVoiceCard {
    background: var(--panel-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark #ttsSelectedVoiceCard .voice-avatar {
    border-color: var(--border-color);
}

body.dark #ttsVoiceList {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark .setting-group > div[style*="border: 1px solid"],
body.dark .setting-group > div[style*="background: #f9fafb"] {
    background: var(--panel-bg) !important;
    border-color: var(--border-color) !important;
}

/* Text to Speech Dark Mode - Sliders */
body.dark .slider {
    background: var(--panel-bg);
}

body.dark span[id$="Value"] {
    background: var(--panel-bg) !important;
    color: var(--text-primary) !important;
}

/* Text to Speech Dark Mode - Clone Voice Button */
body.dark .setting-group .btn-secondary {
    background: var(--panel-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark .setting-group .btn-secondary:hover {
    background: var(--sidebar-bg) !important;
    border-color: var(--primary-color) !important;
}

/* Text to Speech Dark Mode - Bottom Bar */
body.dark #textToSpeechContainer > div:nth-child(2) > div:first-child > div:last-child {
    border-top-color: var(--border-color) !important;
}

body.dark #textToSpeechContainer button[style*="background: white"] {
    background: var(--panel-bg) !important;
    border-color: var(--border-color) !important;
}

/* Header Auth Button */
body.dark #authBtn {
    background: var(--panel-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark #authBtn:hover {
    background: var(--sidebar-bg) !important;
}

/* Model Selector */
body.dark .model-selector select,
body.dark #ttsModelSelect {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* Toggle Switch Label Text */
body.dark .toggle-switch + span,
body.dark [style*="Long Text"] {
    color: var(--text-secondary);
}

/* ==================== Comprehensive Dark Mode Fixes ==================== */

/* Voice Library - All Cards */
body.dark .voice-library-card,
body.dark .voice-card,
body.dark [class*="voice-card"],
body.dark [class*="VoiceCard"] {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark .voice-library-card:hover,
body.dark .voice-card:hover {
    background: var(--panel-bg) !important;
}

/* Voice Use Button */
body.dark .voice-use-btn {
    background: var(--primary-color);
    color: white;
}

/* Library Banners - Arrow Buttons */
body.dark .lib-banner button,
body.dark .lib-banner-btn {
    background: var(--panel-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Voice Design Page */
body.dark .voice-design-card,
body.dark .design-card,
body.dark .design-panel {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

/* Music Page */
body.dark .music-card,
body.dark .music-panel,
body.dark .music-item {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

/* Settings Panels - Generic */
body.dark .settings-panel,
body.dark .settings-card,
body.dark .panel-card {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

/* All Input Fields */
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark input[type="search"],
body.dark input[type="number"],
body.dark textarea,
body.dark select {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color: var(--text-secondary) !important;
}

/* All Buttons with White Background */
body.dark button[style*="background: white"],
body.dark button[style*="background: #fff"],
body.dark button[style*="background-color: white"],
body.dark button[style*="background-color: #fff"],
body.dark [style*="background: white"],
body.dark [style*="background-color: white"] {
    background: var(--panel-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dropdowns */
body.dark .dropdown,
body.dark .dropdown-menu,
body.dark .select-dropdown {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

/* Modals */
body.dark .modal,
body.dark .modal-content,
body.dark .dialog,
body.dark .dialog-content {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

/* Tabs */
body.dark .tab,
body.dark .tab-item:not(.active) {
    background: var(--sidebar-bg);
    color: var(--text-secondary);
}

body.dark .tab.active,
body.dark .tab-item.active {
    background: var(--panel-bg);
    color: var(--text-primary);
}

/* Cards - Generic */
body.dark .card,
body.dark [class*="-card"]:not(.tool-card):not(.pricing-card) {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

/* Tooltips */
body.dark .tooltip,
body.dark [class*="tooltip"] {
    background: var(--panel-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Popups/Popovers */
body.dark .popup,
body.dark .popover {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

/* Voice Isolator */
body.dark .voice-isolator-card,
body.dark .isolator-card,
body.dark .isolator-panel {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark .isolator-actions button {
    background: var(--panel-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* History Panel */
body.dark .history-item,
body.dark .history-card {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

/* Filter Bars */
body.dark .filter-bar,
body.dark .search-bar {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

/* Category Tags */
body.dark .category-tag,
body.dark .voice-category-tag {
    background: var(--panel-bg);
    color: var(--text-secondary);
}

/* Action Buttons in Cards */
body.dark .action-btn,
body.dark .card-action {
    background: var(--panel-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Main Content Areas */
body.dark .main-content,
body.dark .content-area,
body.dark .content-wrapper {
    background: var(--bg-color);
}

/* Sidebar Icons */
body.dark .nav-icon {
    color: var(--text-secondary);
}

body.dark .nav-item.active .nav-icon {
    color: var(--text-primary);
}

/* Badge */
body.dark .badge,
body.dark .tag {
    background: var(--panel-bg);
    color: var(--text-secondary);
}

/* Dividers */
body.dark .divider,
body.dark hr {
    border-color: var(--border-color);
}

/* Scrollbar */
body.dark ::-webkit-scrollbar {
    background: var(--bg-color);
}

body.dark ::-webkit-scrollbar-thumb {
    background: var(--panel-bg);
    border-radius: 4px;
}

body.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

/* Additional overrides for inline styles */
body.dark div[style*="background: white"],
body.dark div[style*="background-color: white"],
body.dark div[style*="background: #fff"],
body.dark div[style*="background-color: #fff"],
body.dark div[style*="background: #ffffff"],
body.dark div[style*="background-color: #ffffff"],
body.dark div[style*="background: rgb(255, 255, 255)"],
body.dark div[style*="background-color: rgb(255, 255, 255)"] {
    background: var(--sidebar-bg) !important;
}

body.dark span[style*="background: white"],
body.dark span[style*="background-color: white"],
/* ==================== Strong Overrides for Inline Styles ==================== */

/* Voice Library Banners - Override inline gradients */
body.dark .lib-banner[style*="background"] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
    border: 1px solid var(--border-color);
}

body.dark .lib-banner:nth-child(2)[style*="background"] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(56, 189, 248, 0.15) 100%) !important;
}

/* Voice Library Banner Icons - Override inline white background */
body.dark .lib-banner div[style*="background: white"],
body.dark .lib-banner div[style*="background:white"] {
    background: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Voice Clone Info Box - Stronger Selector */
body.dark .info-box,
body.dark .info-box[style*="background"] {
    background: rgba(14, 165, 233, 0.15) !important;
    border-left-color: #0ea5e9 !important;
    color: #38bdf8 !important;
}

body.dark .info-box.warning,
body.dark .info-box.warning[style*="background"] {
    background: rgba(245, 158, 11, 0.15) !important;
    border-left-color: #f59e0b !important;
    color: #fbbf24 !important;
}

/* Ensure text inside info box is readable */
body.dark .info-box p,
body.dark .info-box span {
    color: inherit !important;
}

/* ==================== Dubbing Page Dark Mode (Enhanced) ==================== */

/* Learn Cards */
body.dark .learn-card {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .learn-card::before {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
}

body.dark .learn-card:hover {
    border-color: var(--primary-color);
    background: var(--panel-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

body.dark .learn-card:nth-child(1) .learn-icon-wrapper {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(99, 102, 241, 0.2) 100%);
    color: #a78bfa;
}

body.dark .learn-card:nth-child(2) .learn-icon-wrapper {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3) 0%, rgba(56, 189, 248, 0.2) 100%);
    color: #38bdf8;
}

body.dark .learn-card::after {
    color: var(--primary-color);
}

/* Create Button - Keep purple gradient in dark mode */
body.dark .create-dub-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

body.dark .create-dub-btn:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

/* Recent Dubs List */
body.dark .recent-dubs-list {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .dubs-header-row {
    background: var(--panel-bg);
    border-bottom-color: var(--border-color);
}

body.dark .dub-item {
    border-bottom-color: var(--border-color);
}

body.dark .dub-item:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);
}

body.dark .col-name::before {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(99, 102, 241, 0.2) 100%);
}

/* Empty State */
body.dark .dubs-empty-state .empty-icon {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(99, 102, 241, 0.2) 100%);
}

body.dark .dubs-empty-state .empty-icon svg {
    color: #a78bfa;
}

body.dark .dubs-empty-state .create-btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark .dubs-empty-state .create-btn-secondary:hover {
    background: var(--primary-color);
    color: white;
}

/* Page Decoration */
body.dark .dubbing-container::before {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
}

/* ==================== Create Dubbing Modal Dark Mode ==================== */
body.dark .create-dubbing-modal .form-group label {
    color: var(--text-primary);
}

body.dark .create-dubbing-modal .form-input,
body.dark .create-dubbing-modal .form-select,
body.dark .create-dubbing-modal .form-textarea {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark .create-dubbing-modal .form-input:focus,
body.dark .create-dubbing-modal .form-select:focus,
body.dark .create-dubbing-modal .form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

body.dark .create-dubbing-modal .form-input::placeholder,
body.dark .create-dubbing-modal .form-textarea::placeholder {
    color: var(--text-secondary);
}

body.dark .create-dubbing-modal .btn-secondary {
    background: var(--panel-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark .create-dubbing-modal .btn-secondary:hover {
    background: var(--sidebar-bg);
}

/* ==================== Dubbing Editor Dark Mode (Complete) ==================== */

/* Editor Container */
body.dark .dubbing-editor-container {
    background: var(--bg-color);
}

/* Editor Header */
body.dark .editor-header {
    background: var(--bg-color);
    border-color: var(--border-color);
}

body.dark .project-title input {
    color: var(--text-primary);
}

body.dark .save-status {
    background: var(--panel-bg);
    color: var(--text-secondary);
}

/* Editor Toolbar */
body.dark .editor-toolbar {
    background: var(--bg-color);
    border-color: var(--border-color);
}

body.dark .tool-btn {
    color: var(--text-secondary);
}

body.dark .tool-btn:hover {
    background: var(--panel-bg);
    color: var(--text-primary);
}

body.dark .tool-btn.active {
    background: rgba(79, 70, 229, 0.2);
    color: var(--primary-color);
}

body.dark .tool-divider {
    background: var(--border-color);
}

/* Main Workspace Area - Unified dark background for whiteboard effect */
body.dark .editor-workspace {
    background: var(--sidebar-bg); /* Unified background */
}

/* Left Editor Area - Match workspace background */
body.dark .editor-left {
    background: var(--sidebar-bg); /* Match workspace */
}

/* Top Toolbar (AI Generate, Templates, etc.) */
body.dark .editor-toolbar-top {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .toolbar-btn {
    background: var(--panel-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark .toolbar-btn:hover {
    background: var(--sidebar-bg);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

body.dark .toolbar-divider {
    background: var(--border-color);
}

body.dark .word-count {
    color: var(--text-secondary);
}

/* Voice Quick Select */
body.dark .voice-quick-select {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .quick-select-label {
    color: var(--text-secondary);
}

body.dark .quick-voice-card {
    background: var(--panel-bg);
}

body.dark .quick-voice-card:hover {
    background: var(--sidebar-bg);
    border-color: var(--primary-color);
}

body.dark .quick-voice-card.selected {
    background: rgba(79, 70, 229, 0.2);
    border-color: var(--primary-color);
}

body.dark .quick-voice-card .voice-name {
    color: var(--text-primary);
}

body.dark .quick-voice-card .voice-lang {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

body.dark .quick-voice-card .voice-avatar {
    background: var(--panel-bg);
    border-color: var(--border-color);
}

/* Editor Text Area */
body.dark .editor-text-area {
    background: var(--sidebar-bg);
}

/* Editor Textarea - Transparent to blend with parent */
body.dark .editor-textarea {
    background: transparent; /* Transparent for whiteboard effect */
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark .editor-textarea:focus {
    background: #242424; /* Subtle lightening for focus state in dark mode */
}

body.dark .editor-textarea::placeholder {
    color: var(--text-secondary);
}

/* Right Sidebar */
body.dark .editor-sidebar {
    background: var(--sidebar-bg);
    border-left-color: var(--border-color);
}

body.dark .sidebar-section {
    border-bottom-color: var(--border-color);
}

body.dark .section-label {
    color: var(--text-secondary);
}

/* Current Voice Card */
body.dark .current-voice-card {
    background: var(--panel-bg);
    border-color: var(--border-color);
}

body.dark .current-voice-card .voice-name {
    color: var(--text-primary);
}

body.dark .current-voice-card .voice-lang {
    background: rgba(79, 70, 229, 0.2);
    color: var(--primary-color);
}

body.dark .current-voice-card .voice-avatar {
    background: var(--panel-bg);
    border-color: var(--border-color);
}

/* Voice Parameters */
body.dark .param-row label {
    color: var(--text-primary);
}

body.dark .param-controls input[type="range"] {
    background: var(--border-color);
}

body.dark .param-value {
    color: var(--text-primary);
}

/* Voice Search */
body.dark .voice-search input {
    background: var(--panel-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark .voice-search input::placeholder {
    color: var(--text-secondary);
}

body.dark .voice-search input:focus {
    border-color: var(--primary-color);
}

/* Voice List */
body.dark .voice-list {
    background: transparent;
}

body.dark .voice-list .voice-option {
    background: transparent;
}

body.dark .voice-list .voice-option:hover {
    background: var(--panel-bg);
}

body.dark .voice-list .voice-option.selected {
    background: rgba(79, 70, 229, 0.2);
    border-color: var(--primary-color);
}

body.dark .voice-list .voice-option .voice-avatar {
    background: var(--panel-bg);
}

body.dark .voice-list .voice-option .voice-details .name {
    color: var(--text-primary);
}

body.dark .voice-list .voice-option .voice-details .desc {
    color: var(--text-secondary);
}

/* Floating Voice Card */
body.dark .floating-voice-card {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

body.dark .floating-voice-card .voice-name {
    color: var(--text-primary);
}

body.dark .floating-voice-card .voice-desc {
    color: var(--text-secondary);
}

body.dark .voice-avatar {
    background: var(--panel-bg);
    border-color: var(--border-color);
}

/* Voice Dropdown List */
body.dark .dubbing-voice-list {
    background: var(--panel-bg);
    border-color: var(--border-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

body.dark .dubbing-voice-list .voice-option:hover {
    background: var(--sidebar-bg);
}

body.dark .dubbing-voice-list .voice-option.selected {
    background: rgba(79, 70, 229, 0.2);
}

body.dark .dubbing-voice-list .voice-option .voice-avatar {
    background: var(--sidebar-bg);
}

body.dark .dubbing-voice-list .voice-option .voice-details .name {
    color: var(--text-primary);
}

body.dark .dubbing-voice-list .voice-option .voice-details .desc {
    color: var(--text-secondary);
}

/* ==================== Modals Dark Mode (声音宇宙风格) ==================== */
body.dark .modal-overlay {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(16px);
}

body.dark .modal-content {
    background: var(--panel-bg);
    box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.6),
        0 16px 32px rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.2);
}

body.dark .modal-content::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.5) 0%, rgba(236, 72, 153, 0.5) 100%);
}

body.dark .modal-header {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, transparent 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark .modal-header h3 {
    background: linear-gradient(135deg, var(--text-primary) 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark .modal-close-btn {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
}

body.dark .modal-close-btn:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

body.dark .modal-footer {
    background: linear-gradient(0deg, rgba(99, 102, 241, 0.05) 0%, transparent 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Form Elements Dark Mode */
body.dark .form-group label {
    color: var(--text-primary);
}

body.dark .ai-prompt-input {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark .ai-prompt-input::placeholder {
    color: var(--text-secondary);
}

body.dark .ai-prompt-input:focus {
    border-color: var(--primary-color);
}

body.dark .form-select {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark .form-select:focus {
    border-color: var(--primary-color);
}

/* AI Output Dark Mode */
body.dark .ai-output {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
}

body.dark .ai-output-header span {
    color: var(--text-secondary);
}

body.dark .ai-output-text {
    color: var(--text-primary);
}

/* Template Grid Dark Mode */
body.dark .template-card {
    background: var(--sidebar-bg);
}

body.dark .template-card:hover {
    background: var(--panel-bg);
    border-color: var(--primary-color);
}

body.dark .template-title {
    color: var(--text-primary);
}

body.dark .template-desc {
    color: var(--text-secondary);
}

body.dark .template-example {
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-secondary);
}

/* ==================== Multi-Voice Setup Dark Mode ==================== */
body.dark #dialoguePreview {
    background: rgba(0, 0, 0, 0.3);
    border-color: var(--border-color);
}

body.dark .speaker-voice-item {
    background: var(--panel-bg);
    border-color: var(--border-color);
}

body.dark .speaker-voice-item:hover {
    background: var(--sidebar-bg);
    border-color: var(--primary-color);
}

body.dark .speaker-name {
    color: var(--text-primary);
}

body.dark .voice-selector {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark .voice-selector:hover {
    border-color: var(--primary-color);
}

body.dark .preview-btn-mini {
    background: var(--primary-color);
}

/* ==================== Progress Bar Dark Mode ==================== */
body.dark .progress-bar {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.dark .progress-fill {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

/* ==================== Inline Dialogue Editor Dark Mode ==================== */
body.dark .dialogue-editor-container {
    background: var(--sidebar-bg);
}

body.dark .dialogue-editor-header {
    background: var(--panel-bg);
    border-color: var(--border-color);
}

body.dark .dialogue-editor-header .mode-indicator {
    color: var(--text-secondary);
}

body.dark .dialogue-line {
    background: var(--panel-bg);
    border-color: var(--border-color);
}

body.dark .dialogue-line:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark .dialogue-line.playing {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--primary-color);
}

body.dark .dialogue-text {
    background: var(--sidebar-bg);
    color: var(--text-primary);
    border-color: transparent;
}

body.dark .dialogue-text:focus {
    border-color: var(--primary-color);
}

body.dark .voice-mini-select {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark .voice-mini-select:hover {
    border-color: var(--primary-color);
}

body.dark .line-action-btn {
    color: var(--text-secondary);
}

body.dark .line-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

body.dark .line-action-btn.play-btn:hover {
    background: var(--primary-color);
    color: white;
}

body.dark .line-action-btn.delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

body.dark .add-dialogue-line-btn {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark .add-dialogue-line-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

body.dark .dialogue-empty-state {
    color: var(--text-secondary);
}

body.dark .dialogue-empty-state h3 {
    color: var(--text-primary);
}

body.dark .voice-picker-dropdown {
    background: var(--sidebar-bg);
    border-color: var(--border-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

body.dark .voice-picker-item:hover {
    background: var(--hover-bg);
}

body.dark .voice-picker-item.selected {
    background: rgba(99, 102, 241, 0.2);
}