/* * Soda AI — Full Dark Mode Stylesheet * Applied when * All rules use !important to override Vue scoped component styles */ /* ───────────────────────────────────────────── BASE & LAYOUT ───────────────────────────────────────────── */ [data-theme="dark"], [data-theme="dark"] body, [data-theme="dark"] html { background-color: #0f0f11 !important; color: #f0f0f5 !important; --surface-card: #16161a !important; --surface-input: #1e1e24 !important; --surface-active: #2a2a32 !important; --surface-ground: #0f0f11 !important; --surface-section: #13131a !important; --surface-overlay: #1a1a1f !important; --text-color: #f0f0f5 !important; --text-color-secondary: #a0a0b0 !important; --surface-border: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .app-wrapper, [data-theme="dark"] .main-content { background: #0f0f11 !important; } [data-theme="dark"] .content-area { background: linear-gradient(135deg, rgba(124,92,252,0.04) 0%, rgba(247,0,129,0.03) 100%) !important; } /* ───────────────────────────────────────────── NAVBAR ───────────────────────────────────────────── */ [data-theme="dark"] .navbar-wrapper { background: #13131a !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } [data-theme="dark"] .navbar { background: transparent !important; } [data-theme="dark"] .action-btn { background: rgba(255,255,255,0.06) !important; color: #c0c0d0 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .action-btn:hover { background: rgba(255,255,255,0.12) !important; color: #f0f0f5 !important; } [data-theme="dark"] .credits-display { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .credits-count { color: #f0f0f5 !important; } [data-theme="dark"] .credits-label { color: #a0a0b0 !important; } [data-theme="dark"] .notifications-dropdown, [data-theme="dark"] .user-dropdown { background: #1a1a1f !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; } [data-theme="dark"] .notifications-header h4, [data-theme="dark"] .user-info h4 { color: #f0f0f5 !important; } [data-theme="dark"] .user-info p, [data-theme="dark"] .notifications-header { color: #a0a0b0 !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .notification-item { border-bottom-color: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .notification-item:hover { background: rgba(255,255,255,0.04) !important; } [data-theme="dark"] .notification-text { color: #d0d0e0 !important; } [data-theme="dark"] .notification-time { color: #6a6a7a !important; } [data-theme="dark"] .dropdown-item { color: #c0c0d0 !important; } [data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,0.07) !important; color: #f0f0f5 !important; } /* ───────────────────────────────────────────── SIDEBAR / MENUBAR ───────────────────────────────────────────── */ [data-theme="dark"] .sidebar { background: linear-gradient(180deg, #13131a 0%, #0f0f11 100%) !important; border-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .nav-item { color: #a0a0b0 !important; border-color: transparent !important; } [data-theme="dark"] .nav-item:hover { background: rgba(226,102,0,0.12) !important; color: #f0f0f5 !important; border-color: rgba(226,102,0,0.25) !important; } [data-theme="dark"] .nav-icon-fa { color: #6a6a7a !important; } [data-theme="dark"] .nav-item:hover .nav-icon-fa, [data-theme="dark"] .nav-item.active .nav-icon-fa { color: #e26600 !important; } [data-theme="dark"] .nav-label { color: #a0a0b0 !important; } /* ───────────────────────────────────────────── ADSET LIST VIEW ───────────────────────────────────────────── */ [data-theme="dark"] .adsets-list-view, [data-theme="dark"] .adsets-container { background: transparent !important; } [data-theme="dark"] .page-header { background: transparent !important; } [data-theme="dark"] .page-title, [data-theme="dark"] .page-subtitle { color: #f0f0f5 !important; } [data-theme="dark"] .adset-card, [data-theme="dark"] .adsets-grid .card { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; color: #f0f0f5 !important; } [data-theme="dark"] .adset-card:hover { background: #20202a !important; border-color: rgba(226,102,0,0.3) !important; } [data-theme="dark"] .adset-name, [data-theme="dark"] .adset-title { color: #f0f0f5 !important; } [data-theme="dark"] .adset-meta, [data-theme="dark"] .adset-date, [data-theme="dark"] .adset-description { color: #a0a0b0 !important; } /* ───────────────────────────────────────────── ADSET VIEW — LAYOUT ───────────────────────────────────────────── */ [data-theme="dark"] .adset-view { background: transparent !important; } [data-theme="dark"] .left-panel { background: transparent !important; } [data-theme="dark"] .generation-forms > * { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .generate-card, [data-theme="dark"] .adset-profile-card { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .generate-card .card-header, [data-theme="dark"] .adset-profile-card .card-header { background: transparent !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .card-title, [data-theme="dark"] .header-icon i { color: #f0f0f5 !important; } [data-theme="dark"] .panel-controls { background: transparent !important; } [data-theme="dark"] .back-button, [data-theme="dark"] .back-icon { background: rgba(255,255,255,0.05) !important; color: #c0c0d0 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .back-button:hover { background: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .expand-toggle-btn, [data-theme="dark"] .guide-modal-btn { background: rgba(255,255,255,0.05) !important; color: #c0c0d0 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .expand-toggle-btn:hover, [data-theme="dark"] .guide-modal-btn:hover { background: rgba(255,255,255,0.1) !important; color: #f0f0f5 !important; } /* ───────────────────────────────────────────── GENERATION TYPE DROPDOWN ───────────────────────────────────────────── */ [data-theme="dark"] .generation-select { background: #242429 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .generation-select:hover { border-color: rgba(226,102,0,0.4) !important; } [data-theme="dark"] .generation-select.open { border-color: #e26600 !important; } [data-theme="dark"] .selected-option, [data-theme="dark"] .btn-title { color: #f0f0f5 !important; } [data-theme="dark"] .btn-subtitle, [data-theme="dark"] .placeholder, [data-theme="dark"] .dropdown-arrow { color: #a0a0b0 !important; } [data-theme="dark"] .dropdown-options { background: #1e1e25 !important; border-color: rgba(226,102,0,0.3) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .dropdown-option { color: #c0c0d0 !important; } [data-theme="dark"] .dropdown-option:hover { background: rgba(255,255,255,0.05) !important; color: #f0f0f5 !important; } [data-theme="dark"] .dropdown-option.selected { background: rgba(226,102,0,0.12) !important; color: #e26600 !important; } /* ───────────────────────────────────────────── UGC MODE SELECTOR ───────────────────────────────────────────── */ [data-theme="dark"] .ugc-mode-selector { background: #242429 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .ugc-mode-btn { color: #a0a0b0 !important; background: transparent !important; } [data-theme="dark"] .ugc-mode-btn.active { background: linear-gradient(135deg, #e26600, #f70081) !important; color: #fff !important; } [data-theme="dark"] .ugc-mode-btn:not(.active):hover { background: rgba(255,255,255,0.06) !important; color: #f0f0f5 !important; } /* ───────────────────────────────────────────── COLLAPSIBLE SECTIONS ───────────────────────────────────────────── */ [data-theme="dark"] .collapsible-section { border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .collapsible-header { background: rgba(255,255,255,0.03) !important; color: #f0f0f5 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .collapsible-header:hover { background: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .collapsible-content { background: transparent !important; } [data-theme="dark"] .header-title { color: #f0f0f5 !important; } [data-theme="dark"] .header-subtitle { color: #a0a0b0 !important; } /* ───────────────────────────────────────────── FORM ELEMENTS — GLOBAL ───────────────────────────────────────────── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: #242429 !important; color: #f0f0f5 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { background: #2a2a30 !important; border-color: #e26600 !important; color: #f0f0f5 !important; box-shadow: 0 0 0 3px rgba(226,102,0,0.15) !important; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] input:disabled, [data-theme="dark"] textarea:disabled { background: #1e1e24 !important; color: #6a6a7a !important; border-color: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #5a5a6a !important; } [data-theme="dark"] .form-label, [data-theme="dark"] label { color: #d0d0e0 !important; } [data-theme="dark"] .form-check { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .form-check:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(226,102,0,0.2) !important; } [data-theme="dark"] .form-check-label { color: #d0d0e0 !important; } /* ───────────────────────────────────────────── CUSTOM SELECTS & DROPDOWNS IN FORMS ───────────────────────────────────────────── */ [data-theme="dark"] .custom-select { background: #242429 !important; border-color: rgba(255,255,255,0.1) !important; color: #f0f0f5 !important; } [data-theme="dark"] .custom-select:hover:not(.disabled) { border-color: #e26600 !important; } [data-theme="dark"] .custom-select .placeholder { color: #5a5a6a !important; } [data-theme="dark"] .model-dropdown-trigger { background: #242429 !important; border-color: rgba(255,255,255,0.1) !important; color: #f0f0f5 !important; } [data-theme="dark"] .model-dropdown-trigger:hover, [data-theme="dark"] .model-dropdown-trigger:focus { border-color: #e26600 !important; } [data-theme="dark"] .model-dropdown-menu { background: #1e1e25 !important; border-color: rgba(226,102,0,0.3) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .model-dropdown-item { color: #c0c0d0 !important; } [data-theme="dark"] .model-dropdown-item:hover { background: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .model-dropdown-item.active { background: rgba(226,102,0,0.12) !important; } [data-theme="dark"] .model-dropdown-arrow, [data-theme="dark"] .selected-value { color: #a0a0b0 !important; } /* ───────────────────────────────────────────── BUTTONS — OUTLINE / GHOST (gradient buttons stay as-is) ───────────────────────────────────────────── */ [data-theme="dark"] .btn-outline-secondary { background: transparent !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.15) !important; } [data-theme="dark"] .btn-outline-secondary:hover:not(:disabled) { background: rgba(255,255,255,0.08) !important; color: #f0f0f5 !important; border-color: rgba(255,255,255,0.25) !important; } [data-theme="dark"] .btn-back, [data-theme="dark"] .change-influencer-btn, [data-theme="dark"] .btn-cancel-confirm, [data-theme="dark"] .btn-cancel-edit, [data-theme="dark"] .script-back-btn, [data-theme="dark"] .btn-ai-edit, [data-theme="dark"] .btn-ai-script, [data-theme="dark"] .create-influencer-toggle { background: transparent !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.12) !important; } [data-theme="dark"] .btn-back:hover:not(:disabled), [data-theme="dark"] .change-influencer-btn:hover, [data-theme="dark"] .btn-cancel-confirm:hover, [data-theme="dark"] .btn-cancel-edit:hover, [data-theme="dark"] .script-back-btn:hover, [data-theme="dark"] .btn-ai-edit:hover, [data-theme="dark"] .btn-ai-script:hover:not(:disabled) { background: rgba(255,255,255,0.07) !important; color: #f0f0f5 !important; border-color: rgba(255,255,255,0.2) !important; } [data-theme="dark"] .update-button { background: rgba(226,102,0,0.15) !important; color: #e26600 !important; border-color: rgba(226,102,0,0.25) !important; } [data-theme="dark"] .update-button:hover:not(:disabled) { background: rgba(226,102,0,0.25) !important; } /* ───────────────────────────────────────────── FORM SECTIONS / CARDS ───────────────────────────────────────────── */ [data-theme="dark"] .form-section, [data-theme="dark"] .design-config, [data-theme="dark"] .generator-header, [data-theme="dark"] .generation-tips { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .form-section:hover, [data-theme="dark"] .design-config:hover, [data-theme="dark"] .generator-header:hover { border-color: rgba(226,102,0,0.2) !important; } [data-theme="dark"] .form-section-title, [data-theme="dark"] .section-title, [data-theme="dark"] .form-section-description, [data-theme="dark"] .section-description { color: #d0d0e0 !important; } [data-theme="dark"] .section-description, [data-theme="dark"] .section-subtitle, [data-theme="dark"] .form-section-description { color: #a0a0b0 !important; } [data-theme="dark"] .tips-title { color: #d0d0e0 !important; } [data-theme="dark"] .tips-list { color: #a0a0b0 !important; } /* ───────────────────────────────────────────── ENTITY / BRAND INFO BADGES ───────────────────────────────────────────── */ [data-theme="dark"] .brand-info { background: rgba(226,102,0,0.08) !important; border-color: rgba(226,102,0,0.15) !important; } [data-theme="dark"] .brand-label { color: #a0a0b0 !important; } [data-theme="dark"] .entity-name { color: #f0f0f5 !important; } [data-theme="dark"] .entity-description { color: #a0a0b0 !important; } /* ───────────────────────────────────────────── SIZE CARDS & VARIATION OPTIONS ───────────────────────────────────────────── */ [data-theme="dark"] .size-card, [data-theme="dark"] .variation-option, [data-theme="dark"] .mode-option { background: #242429 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .size-card:hover, [data-theme="dark"] .mode-option:hover { border-color: #e26600 !important; } [data-theme="dark"] .size-card.active, [data-theme="dark"] .mode-option.active { background: rgba(226,102,0,0.08) !important; border-color: #e26600 !important; } [data-theme="dark"] .size-title, [data-theme="dark"] .mode-title { color: #f0f0f5 !important; } [data-theme="dark"] .size-dimensions, [data-theme="dark"] .mode-desc { color: #a0a0b0 !important; } [data-theme="dark"] .mode-icon { background: #313138 !important; color: #a0a0b0 !important; } [data-theme="dark"] .mode-option.active .mode-icon { background: #e26600 !important; color: white !important; } /* ───────────────────────────────────────────── SUGGESTION TAGS ───────────────────────────────────────────── */ [data-theme="dark"] .suggestion-tag { background: #242429 !important; color: #c0c0d0 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .suggestion-tag:hover:not(.disabled), [data-theme="dark"] .suggestion-tag.selected { background: #e26600 !important; color: white !important; border-color: #e26600 !important; } [data-theme="dark"] .suggestions-loading { background: #242429 !important; } [data-theme="dark"] .prompt-info { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; color: #a0a0b0 !important; } /* ───────────────────────────────────────────── IMAGE DROPZONES ───────────────────────────────────────────── */ [data-theme="dark"] .image-dropzone, [data-theme="dark"] .photo-dropzone { background: #1e1e24 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .image-dropzone:hover:not(.dropzone-disabled), [data-theme="dark"] .photo-dropzone:hover { background: rgba(226,102,0,0.06) !important; border-color: #e26600 !important; } [data-theme="dark"] .image-dropzone.dropzone-active, [data-theme="dark"] .photo-dropzone.drag-over { background: rgba(226,102,0,0.1) !important; border-color: #e26600 !important; } [data-theme="dark"] .dropzone-content i, [data-theme="dark"] .dropzone-placeholder { color: #6a6a7a !important; } [data-theme="dark"] .dropzone-content p, [data-theme="dark"] .dropzone-placeholder span { color: #6a6a7a !important; } [data-theme="dark"] .dropzone-placeholder small { color: #4a4a5a !important; } /* ───────────────────────────────────────────── INFLUENCER CARDS (UGCVideoGenerator) ───────────────────────────────────────────── */ [data-theme="dark"] .influencer-card { background: #1a1a1f !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .influencer-card:hover { border-color: #f70081 !important; } [data-theme="dark"] .influencer-photo-wrap { background: #242429 !important; } [data-theme="dark"] .influencer-name { color: #f0f0f5 !important; } [data-theme="dark"] .influencer-date { color: #6a6a7a !important; } [data-theme="dark"] .create-influencer-form { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .create-mode-tabs { background: #242429 !important; } [data-theme="dark"] .create-mode-tab { color: #a0a0b0 !important; background: transparent !important; } [data-theme="dark"] .create-mode-tab.active { background: #1a1a1f !important; color: #e26600 !important; } [data-theme="dark"] .selected-influencer-summary { background: rgba(226,102,0,0.06) !important; border-color: rgba(247,0,129,0.15) !important; } [data-theme="dark"] .summary-name { color: #f0f0f5 !important; } [data-theme="dark"] .credit-display { background: #242429 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .credit-info { color: #d0d0e0 !important; } [data-theme="dark"] .credit-label { color: #a0a0b0 !important; } [data-theme="dark"] .empty-text { color: #6a6a7a !important; } [data-theme="dark"] .product-img-option { background: #1e1e24 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .product-img-option:hover { border-color: #f70081 !important; } [data-theme="dark"] .recent-frame-thumb { background: #242429 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .starting-frame-wrap { background: #1e1e24 !important; } [data-theme="dark"] .ai-edit-box { background: #1e1824 !important; border-color: rgba(226,102,0,0.2) !important; } [data-theme="dark"] .script-editor-panel { background: #1e1e24 !important; border-color: rgba(226,102,0,0.15) !important; } [data-theme="dark"] .script-editor-header { color: #d0d0e0 !important; } [data-theme="dark"] .word-counter { color: #6a6a7a !important; } [data-theme="dark"] .influencer-requirement-hint { background: rgba(226,102,0,0.07) !important; color: #a0a0b0 !important; border-color: rgba(226,102,0,0.25) !important; } /* ───────────────────────────────────────────── UGC STEP INDICATOR (scoped to UGC context only) ───────────────────────────────────────────── */ [data-theme="dark"] .steps-indicator .step-circle { background: #313138 !important; color: #6a6a7a !important; border-color: #3a3a42 !important; } [data-theme="dark"] .steps-indicator .step-label { color: #6a6a7a !important; } [data-theme="dark"] .steps-indicator .step-connector { border-color: #2a2a32 !important; } [data-theme="dark"] .step-footer { border-top-color: rgba(255,255,255,0.07) !important; } /* ───────────────────────────────────────────── ONBOARDING STEP INDICATOR ───────────────────────────────────────────── */ [data-theme="dark"] .step-indicator .step-label { color: rgba(255, 255, 255, 0.45) !important; } [data-theme="dark"] .step-indicator .step-item.active .step-label { color: #ffffff !important; } [data-theme="dark"] .step-indicator .step-item.completed .step-label { color: #28a745 !important; } [data-theme="dark"] .step-indicator .step-circle { background: #2a2a36 !important; color: rgba(255, 255, 255, 0.7) !important; border-color: rgba(255, 255, 255, 0.25) !important; } /* ───────────────────────────────────────────── UGC AGENT GENERATOR ───────────────────────────────────────────── */ [data-theme="dark"] .ugc-agent-generator, [data-theme="dark"] .agent-container { background: transparent !important; } [data-theme="dark"] .scene-card, [data-theme="dark"] .story-card, [data-theme="dark"] .storyboard-card { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .scene-number { background: rgba(226,102,0,0.12) !important; color: #e26600 !important; } [data-theme="dark"] .scene-description, [data-theme="dark"] .scene-script, [data-theme="dark"] .scene-text { color: #c0c0d0 !important; } [data-theme="dark"] .agent-status-bar { background: #242429 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .status-text { color: #d0d0e0 !important; } [data-theme="dark"] .progress-bar-track { background: #313138 !important; } [data-theme="dark"] .agent-info-box, [data-theme="dark"] .phase-card { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .phase-title, [data-theme="dark"] .phase-description { color: #c0c0d0 !important; } /* ───────────────────────────────────────────── LOCAL BUSINESS VIDEO GENERATOR ───────────────────────────────────────────── */ [data-theme="dark"] .lb-video-generator, [data-theme="dark"] .lb-container { background: transparent !important; } [data-theme="dark"] .format-card { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .format-card:hover { border-color: rgba(226,102,0,0.3) !important; } [data-theme="dark"] .format-card.selected, [data-theme="dark"] .format-card.active { background: rgba(226,102,0,0.08) !important; border-color: #e26600 !important; } [data-theme="dark"] .format-title, [data-theme="dark"] .lb-title { color: #f0f0f5 !important; } [data-theme="dark"] .format-description, [data-theme="dark"] .lb-description { color: #a0a0b0 !important; } [data-theme="dark"] .lb-status-card, [data-theme="dark"] .lb-info-card { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } /* ───────────────────────────────────────────── STATIC ADS GENERATOR ───────────────────────────────────────────── */ [data-theme="dark"] .static-ads-generator { background: transparent !important; } [data-theme="dark"] .template-card, [data-theme="dark"] .style-card { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .template-card:hover { border-color: rgba(226,102,0,0.3) !important; } [data-theme="dark"] .template-card.selected { border-color: #e26600 !important; background: rgba(226,102,0,0.06) !important; } /* ───────────────────────────────────────────── SHORT VIDEO GENERATOR ───────────────────────────────────────────── */ [data-theme="dark"] .short-video-generator { background: transparent !important; } [data-theme="dark"] .video-config-card, [data-theme="dark"] .video-style-card { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } /* ───────────────────────────────────────────── PHOTO SHOOTS GENERATOR ───────────────────────────────────────────── */ [data-theme="dark"] .photo-shoots-generator { background: transparent !important; } /* ───────────────────────────────────────────── BRAND DESIGNED ADS GENERATOR ───────────────────────────────────────────── */ [data-theme="dark"] .branded-ads-generator { background: transparent !important; } [data-theme="dark"] .form-actions { border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .form-helper-message { background: rgba(59,130,246,0.06) !important; border-color: rgba(59,130,246,0.15) !important; color: #93c5fd !important; } /* ───────────────────────────────────────────── MEDIA GALLERY (right panel) ───────────────────────────────────────────── */ [data-theme="dark"] .media-gallery, [data-theme="dark"] .right-panel { background: transparent !important; } [data-theme="dark"] .gallery-header-title, [data-theme="dark"] .gallery-title { color: #f0f0f5 !important; } [data-theme="dark"] .gallery-subtitle, [data-theme="dark"] .gallery-description { color: #a0a0b0 !important; } [data-theme="dark"] .media-item, [data-theme="dark"] .gallery-item { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .media-item:hover, [data-theme="dark"] .gallery-item:hover { border-color: rgba(226,102,0,0.3) !important; } [data-theme="dark"] .media-actions, [data-theme="dark"] .item-actions { background: rgba(0,0,0,0.7) !important; } [data-theme="dark"] .empty-gallery { color: #6a6a7a !important; } [data-theme="dark"] .empty-gallery i { color: #3a3a45 !important; } [data-theme="dark"] .gallery-tabs { background: #242429 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .gallery-tab { color: #a0a0b0 !important; background: transparent !important; } [data-theme="dark"] .gallery-tab.active, [data-theme="dark"] .gallery-tab:hover { color: #f0f0f5 !important; } [data-theme="dark"] .gallery-tab.active { border-bottom-color: #e26600 !important; } /* ───────────────────────────────────────────── MODALS (all modals in the app) ───────────────────────────────────────────── */ [data-theme="dark"] .modal-content { background: #1a1a1f !important; border-color: rgba(255,255,255,0.08) !important; color: #f0f0f5 !important; } [data-theme="dark"] .modal-header { background: #13131a !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .modal-title { color: #f0f0f5 !important; } [data-theme="dark"] .modal-body { background: #1a1a1f !important; color: #d0d0e0 !important; } [data-theme="dark"] .modal-footer { background: #13131a !important; border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .btn-close { filter: invert(1) !important; opacity: 0.7 !important; } [data-theme="dark"] .confirm-modal { background: #1a1a1f !important; color: #f0f0f5 !important; } [data-theme="dark"] .confirm-modal h4 { color: #f0f0f5 !important; } [data-theme="dark"] .confirm-modal p { color: #a0a0b0 !important; } [data-theme="dark"] .confirm-overlay { background: rgba(0,0,0,0.75) !important; } /* ───────────────────────────────────────────── AD SET PROFILE CARD INNER ───────────────────────────────────────────── */ [data-theme="dark"] .profile-info-card, [data-theme="dark"] .entity-info-card, [data-theme="dark"] .profile-detail { background: #242429 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .profile-name, [data-theme="dark"] .entity-type-label { color: #f0f0f5 !important; } [data-theme="dark"] .profile-meta { color: #a0a0b0 !important; } /* ───────────────────────────────────────────── AD PROFILE DROPDOWN ───────────────────────────────────────────── */ [data-theme="dark"] .ad-profile-dropdown { background: #242429 !important; border-color: rgba(255,255,255,0.1) !important; color: #f0f0f5 !important; } [data-theme="dark"] .ad-profile-option { color: #c0c0d0 !important; } [data-theme="dark"] .ad-profile-option:hover { background: rgba(255,255,255,0.05) !important; } /* ───────────────────────────────────────────── SHIMMER / SKELETON LOADERS ───────────────────────────────────────────── */ [data-theme="dark"] .shimmer { background: linear-gradient(90deg, #1e1e24 0px, #28282f 40px, #1e1e24 80px) !important; background-size: 1000px 100% !important; } [data-theme="dark"] .skeleton-card, [data-theme="dark"] .skeleton-input, [data-theme="dark"] .skeleton-button, [data-theme="dark"] .skeleton-back-btn, [data-theme="dark"] .skeleton-controls, [data-theme="dark"] .skeleton-title, [data-theme="dark"] .skeleton-icon, [data-theme="dark"] .skeleton-dropdown, [data-theme="dark"] .skeleton-collapsible, [data-theme="dark"] .skeleton-gallery-title, [data-theme="dark"] .skeleton-gallery-subtitle, [data-theme="dark"] .skeleton-media-item { background: linear-gradient(90deg, #1e1e24 0px, #28282f 40px, #1e1e24 80px) !important; } [data-theme="dark"] .skeleton-generate-card, [data-theme="dark"] .skeleton-adset-card, [data-theme="dark"] .skeleton-left-panel, [data-theme="dark"] .skeleton-right-panel { background: transparent !important; } /* ───────────────────────────────────────────── ALERTS & MESSAGES ───────────────────────────────────────────── */ [data-theme="dark"] .alert-message, [data-theme="dark"] .alert { border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .alert-success { background: rgba(34,197,94,0.1) !important; color: #86efac !important; border-color: rgba(34,197,94,0.2) !important; } [data-theme="dark"] .alert-danger, [data-theme="dark"] .alert-error { background: rgba(220,53,69,0.1) !important; color: #fca5a5 !important; border-color: rgba(220,53,69,0.2) !important; } [data-theme="dark"] .alert-info { background: rgba(59,130,246,0.1) !important; color: #93c5fd !important; border-color: rgba(59,130,246,0.2) !important; } [data-theme="dark"] .preview-error-msg { background: rgba(211,47,47,0.08) !important; color: #fca5a5 !important; border-color: rgba(211,47,47,0.2) !important; } /* ───────────────────────────────────────────── TABS ───────────────────────────────────────────── */ [data-theme="dark"] .nav-tabs { border-bottom-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .nav-tabs .nav-link { color: #a0a0b0 !important; background: transparent !important; border-color: transparent !important; } [data-theme="dark"] .nav-tabs .nav-link:hover { color: #f0f0f5 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .nav-tabs .nav-link.active { background: #1a1a1f !important; color: #f0f0f5 !important; border-color: rgba(255,255,255,0.08) rgba(255,255,255,0.08) transparent !important; } /* ───────────────────────────────────────────── CARDS — BOOTSTRAP + GENERIC ───────────────────────────────────────────── */ [data-theme="dark"] .card { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; color: #f0f0f5 !important; } [data-theme="dark"] .card-header { background: rgba(255,255,255,0.02) !important; border-bottom-color: rgba(255,255,255,0.07) !important; color: #f0f0f5 !important; } [data-theme="dark"] .card-body { background: transparent !important; color: #d0d0e0 !important; } [data-theme="dark"] .card-footer { background: rgba(255,255,255,0.02) !important; border-top-color: rgba(255,255,255,0.07) !important; } /* ───────────────────────────────────────────── TABLES ───────────────────────────────────────────── */ [data-theme="dark"] table { color: #d0d0e0 !important; } [data-theme="dark"] th { color: #f0f0f5 !important; background: #242429 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] td { border-color: rgba(255,255,255,0.05) !important; } [data-theme="dark"] tr:hover td { background: rgba(255,255,255,0.03) !important; } /* ───────────────────────────────────────────── SCROLLBAR ───────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1a1f; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a45; border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a4a55; } /* ───────────────────────────────────────────── GLOBAL LOADER (initial-loader override) ───────────────────────────────────────────── */ [data-theme="dark"] #initial-loader { background: #0f0f11 !important; } /* ───────────────────────────────────────────── BREADCRUMB / LINKS ───────────────────────────────────────────── */ [data-theme="dark"] a:not(.btn):not(.nav-link):not([class*="gradient"]) { color: #e26600; } [data-theme="dark"] a:not(.btn):not(.nav-link):not([class*="gradient"]):hover { color: #f70081; } /* ───────────────────────────────────────────── DIVIDERS & HORIZONTAL RULES ───────────────────────────────────────────── */ [data-theme="dark"] hr { border-color: rgba(255,255,255,0.07) !important; opacity: 1 !important; } /* ───────────────────────────────────────────── PARAGRAPH & HEADINGS ───────────────────────────────────────────── */ [data-theme="dark"] p { color: #c0c0d0 !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f0f0f5 !important; } [data-theme="dark"] small, [data-theme="dark"] .text-muted { color: #6a6a7a !important; } [data-theme="dark"] .text-secondary { color: #a0a0b0 !important; } /* ───────────────────────────────────────────── MISC ───────────────────────────────────────────── */ [data-theme="dark"] .billing-modal-header { background: #1a1a1f !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .billing-modal { background: #1a1a1f !important; } [data-theme="dark"] .global-loader { background: rgba(15,15,17,0.9) !important; } /* Smooth theme transitions on key elements */ [data-theme="dark"] *, [data-theme="light"] * { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ───────────────────────────────────────────── ADSETS LIST VIEW — FULL COVERAGE ───────────────────────────────────────────── */ [data-theme="dark"] .adsets-list-container { background: #0f0f11 !important; } [data-theme="dark"] .header-content { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .page-subtitle { color: #a0a0b0 !important; } [data-theme="dark"] .filters-section { background: transparent !important; } [data-theme="dark"] .filters-container { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .filter-group label, [data-theme="dark"] .filter-label { color: #a0a0b0 !important; } [data-theme="dark"] .search-input, [data-theme="dark"] .filter-select { background: #242429 !important; color: #f0f0f5 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .search-input:focus, [data-theme="dark"] .filter-select:focus { background: #2a2a30 !important; border-color: #e26600 !important; } [data-theme="dark"] .search-input::placeholder { color: #5a5a6a !important; } [data-theme="dark"] .clear-search-btn { color: #6a6a7a !important; } [data-theme="dark"] .clear-filters-btn { background: #242429 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .info-item { background: rgba(255,255,255,0.04) !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .brand-name { color: #6a6a7a !important; } [data-theme="dark"] .card-thumbnail { background: linear-gradient(135deg, #1e1e24 0%, #242429 100%) !important; } [data-theme="dark"] .card-actions-footer { background: rgba(255,255,255,0.02) !important; border-top-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .adsets-grid .action-btn { background: #242429 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: none !important; } [data-theme="dark"] .adsets-grid .action-btn:hover { background: #2a2a30 !important; color: #f0f0f5 !important; } [data-theme="dark"] .adsets-grid .edit-btn:hover { background: #e26600 !important; color: white !important; border-color: #e26600 !important; } [data-theme="dark"] .adsets-grid .delete-btn:hover { background: #ef4444 !important; color: white !important; border-color: #ef4444 !important; } [data-theme="dark"] .pagination-container { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .pagination-btn, [data-theme="dark"] .page-btn { background: #242429 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .pagination-btn:hover:not(:disabled), [data-theme="dark"] .page-btn:hover { background: #2a2a30 !important; color: #e26600 !important; border-color: rgba(226,102,0,0.4) !important; } [data-theme="dark"] .page-btn.active { background: linear-gradient(135deg, #e26600, #f70081) !important; color: white !important; border-color: transparent !important; } [data-theme="dark"] .empty-state { background: #1a1a1f !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .empty-title { color: #f0f0f5 !important; } [data-theme="dark"] .empty-description { color: #a0a0b0 !important; } [data-theme="dark"] .empty-icon { color: #3a3a45 !important; } /* Edit/Delete modal in AdSetsListView */ [data-theme="dark"] .edit-modal, [data-theme="dark"] .delete-modal { background: #1a1a1f !important; color: #f0f0f5 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .edit-modal .modal-header, [data-theme="dark"] .delete-modal .modal-header { background: #13131a !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .close-btn { background: rgba(255,255,255,0.06) !important; color: #a0a0b0 !important; border-color: transparent !important; } [data-theme="dark"] .close-btn:hover { background: rgba(255,255,255,0.12) !important; color: #f0f0f5 !important; } [data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea { background: #242429 !important; color: #f0f0f5 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-textarea:focus { background: #2a2a30 !important; border-color: #e26600 !important; } [data-theme="dark"] .entity-info-display { background: #242429 !important; border-color: rgba(255,255,255,0.08) !important; color: #d0d0e0 !important; } [data-theme="dark"] .warning-section { background: rgba(220,38,38,0.08) !important; border-color: rgba(220,38,38,0.2) !important; } [data-theme="dark"] .warning-content h4 { color: #fca5a5 !important; } [data-theme="dark"] .warning-content p { color: #a0a0b0 !important; } [data-theme="dark"] .btn.secondary { background: #242429 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .btn.secondary:hover { background: #2a2a30 !important; color: #f0f0f5 !important; } [data-theme="dark"] .skeleton-header, [data-theme="dark"] .skeleton-line { background: linear-gradient(90deg, #1e1e24 0px, #28282f 40px, #1e1e24 80px) !important; background-size: 1000px 100% !important; } /* ───────────────────────────────────────────── MEDIA GALLERY — FULL COVERAGE ───────────────────────────────────────────── */ [data-theme="dark"] .media-gallery-container { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .gallery-header { background: linear-gradient(135deg, rgba(226,102,0,0.05) 0%, rgba(247,0,129,0.04) 100%) !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .gallery-content { background: transparent !important; } [data-theme="dark"] .media-card { background: #242429 !important; border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .media-card:hover:not(.disabled) { box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; border-color: rgba(226,102,0,0.25) !important; } [data-theme="dark"] .card-content { background: #242429 !important; border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .card-description { color: #d0d0e0 !important; } [data-theme="dark"] .card-meta { color: #6a6a7a !important; } [data-theme="dark"] .desktop-actions { background: linear-gradient(to bottom, #1e1e24, #242429) !important; border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .desktop-action-btn { background: #2a2a30 !important; color: #c0c0d0 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .desktop-action-btn:hover:not(:disabled) { background: #313138 !important; color: #f0f0f5 !important; } [data-theme="dark"] .mobile-actions { border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .mobile-action-btn { background: #2a2a30 !important; color: #c0c0d0 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .mobile-action-btn:hover { background: #313138 !important; } [data-theme="dark"] .placeholder-bg { background: linear-gradient(135deg, #1e1e24, #242429) !important; } [data-theme="dark"] .failed-bg { background: linear-gradient(135deg, rgba(220,38,38,0.15), rgba(185,28,28,0.1)) !important; } [data-theme="dark"] .thumbnail-placeholder { color: #6a6a7a !important; } [data-theme="dark"] .thumbnail-placeholder i { color: #4a4a5a !important; } [data-theme="dark"] .status-title { color: #d0d0e0 !important; } [data-theme="dark"] .status-subtitle { color: #6a6a7a !important; } [data-theme="dark"] .progress-bar { background: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .grid-loading-overlay { background: rgba(26,26,31,0.9) !important; } [data-theme="dark"] .download-dropdown-menu { background: #1e1e25 !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .download-dropdown-menu .dropdown-item { border-bottom-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .download-dropdown-menu .dropdown-item:hover:not(:disabled) { background: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .dropdown-item-title { color: #f0f0f5 !important; } [data-theme="dark"] .dropdown-item-description { color: #6a6a7a !important; } [data-theme="dark"] .status-pending { background: rgba(217,119,6,0.15) !important; color: #fbbf24 !important; } [data-theme="dark"] .status-complete { background: rgba(5,150,105,0.15) !important; color: #34d399 !important; } [data-theme="dark"] .status-failed { background: rgba(220,38,38,0.15) !important; color: #f87171 !important; } [data-theme="dark"] .status-queued { background: rgba(37,99,235,0.15) !important; color: #60a5fa !important; } [data-theme="dark"] .masonry-grid-container { background: transparent !important; } /* ───────────────────────────────────────────── ADSET VIEW — GENERATION TOOLBAR EXTRAS ───────────────────────────────────────────── */ [data-theme="dark"] .content-inner { background: rgba(255,255,255,0.02) !important; border-top-color: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .collapsible-header.expanded { background: rgba(226,102,0,0.07) !important; border-bottom-color: rgba(226,102,0,0.15) !important; } [data-theme="dark"] .expand-icon { background: rgba(226,102,0,0.1) !important; } [data-theme="dark"] .profile-snippet-card { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .profile-snippet-card:hover { border-color: rgba(226,102,0,0.3) !important; } [data-theme="dark"] .profile-thumbnail { background: #242429 !important; border-color: rgba(255,255,255,0.07) !important; color: #6a6a7a !important; } [data-theme="dark"] .generation-btn { background: #1e1e24 !important; color: #c0c0d0 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .generation-btn:hover { background: #242429 !important; border-color: rgba(226,102,0,0.4) !important; color: #f0f0f5 !important; } [data-theme="dark"] .generation-btn.active { background: rgba(226,102,0,0.08) !important; border-color: rgba(226,102,0,0.5) !important; } [data-theme="dark"] .btn-icon { background: #313138 !important; color: #a0a0b0 !important; } [data-theme="dark"] .generation-btn.active .btn-icon { background: linear-gradient(135deg, #e26600, #f70081) !important; color: white !important; } [data-theme="dark"] .btn-title { color: #d0d0e0 !important; } [data-theme="dark"] .btn-subtitle { color: #6a6a7a !important; } [data-theme="dark"] .divider-text { background: #1a1a1f !important; color: #e26600 !important; } [data-theme="dark"] .section-divider::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent) !important; } [data-theme="dark"] .input-decoration { background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .adset-profile-card .profile-name { color: #f0f0f5 !important; } [data-theme="dark"] .adset-profile-card .profile-meta, [data-theme="dark"] .adset-profile-card .entity-type { color: #a0a0b0 !important; } /* ───────────────────────────────────────────── AD PROFILES PAGE ───────────────────────────────────────────── */ [data-theme="dark"] .page-header { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .page-description { color: #a0a0b0 !important; } [data-theme="dark"] .step-progress { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .progress-line { background: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .brand-card, [data-theme="dark"] .entity-card { background: #1a1a1f !important; border-color: rgba(255,255,255,0.08) !important; color: #f0f0f5 !important; } [data-theme="dark"] .brand-card:hover, [data-theme="dark"] .entity-card:hover { border-color: rgba(226,102,0,0.35) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .brand-card.selected, [data-theme="dark"] .entity-card.selected { background: rgba(226,102,0,0.07) !important; border-color: #e26600 !important; } [data-theme="dark"] .brand-logo-container { background: #242429 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .brand-logo-placeholder { background: #313138 !important; color: #6a6a7a !important; } [data-theme="dark"] .filters-section { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .filter-btn { background: #242429 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .filter-btn:hover { background: #2a2a30 !important; color: #f0f0f5 !important; } [data-theme="dark"] .filter-btn.active { background: linear-gradient(135deg, #e26600, #f70081) !important; color: white !important; border-color: transparent !important; } [data-theme="dark"] .loading-state { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .icon-container { background: rgba(226,102,0,0.1) !important; } /* ───────────────────────────────────────────── LIBRARY PAGE ───────────────────────────────────────────── */ [data-theme="dark"] .library-header { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .library-title h5, [data-theme="dark"] .library-h { color: #f0f0f5 !important; } [data-theme="dark"] .search-container { background: #242429 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .btn-filter { background: #242429 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .btn-filter:hover { background: #2a2a30 !important; color: #f0f0f5 !important; } [data-theme="dark"] .image-card { background: #1a1a1f !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .image-card:hover { border-color: rgba(226,102,0,0.3) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .image-info { background: #1a1a1f !important; border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .image-description { color: #d0d0e0 !important; } [data-theme="dark"] .image-date { color: #6a6a7a !important; } [data-theme="dark"] .icon-class-bg { background: #242429 !important; color: #6a6a7a !important; } [data-theme="dark"] .grid-container { background: transparent !important; } [data-theme="dark"] .list-container { background: transparent !important; } [data-theme="dark"] .list-image-preview { background: #242429 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .image-details { background: transparent !important; color: #d0d0e0 !important; } [data-theme="dark"] .image-preview { background: #242429 !important; } [data-theme="dark"] .filter-badge { background: #242429 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.1) !important; } /* ───────────────────────────────────────────── STATIC ADS GENERATOR — OPTION CARDS ───────────────────────────────────────────── */ [data-theme="dark"] .option-card { background: #1e1e24 !important; border-color: rgba(255,255,255,0.08) !important; color: #d0d0e0 !important; } [data-theme="dark"] .option-card:hover { border-color: rgba(226,102,0,0.35) !important; background: #242429 !important; } [data-theme="dark"] .option-card.active { background: rgba(226,102,0,0.08) !important; border-color: #e26600 !important; } [data-theme="dark"] .option-card-title { color: #f0f0f5 !important; } [data-theme="dark"] .option-card-desc { color: #a0a0b0 !important; } [data-theme="dark"] .advanced-toggle { background: #1e1e24 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .advanced-toggle:hover { background: #242429 !important; color: #f0f0f5 !important; } [data-theme="dark"] .advanced-options { background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .visual-input-container { background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .arabic-res-warning { background: rgba(146,64,14,0.12) !important; border-color: rgba(245,158,11,0.2) !important; color: #fbbf24 !important; } [data-theme="dark"] .upload-placeholder { background: #1e1e24 !important; border-color: rgba(255,255,255,0.1) !important; color: #6a6a7a !important; } [data-theme="dark"] .upload-placeholder:hover, [data-theme="dark"] .upload-placeholder.drag-over { background: rgba(226,102,0,0.06) !important; border-color: #e26600 !important; } /* ───────────────────────────────────────────── SHORT VIDEO GENERATOR — TYPE & SOURCE CARDS ───────────────────────────────────────────── */ [data-theme="dark"] .type-card { background: #1e1e24 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .type-card:hover { border-color: rgba(226,102,0,0.35) !important; } [data-theme="dark"] .type-card.active { background: rgba(226,102,0,0.07) !important; border-color: #e26600 !important; } [data-theme="dark"] .type-icon { background: #313138 !important; color: #a0a0b0 !important; } [data-theme="dark"] .type-card.active .type-icon { background: linear-gradient(135deg, #e26600, #f70081) !important; color: white !important; } [data-theme="dark"] .type-title { color: #d0d0e0 !important; } [data-theme="dark"] .type-card.active .type-title { color: #e26600 !important; } [data-theme="dark"] .source-selector { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .source-item { background: transparent !important; border-bottom-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .source-item:hover { background: rgba(255,255,255,0.04) !important; } [data-theme="dark"] .source-item.active { background: rgba(226,102,0,0.07) !important; } [data-theme="dark"] .source-title { color: #d0d0e0 !important; } [data-theme="dark"] .source-meta { color: #6a6a7a !important; } [data-theme="dark"] .no-sources { color: #6a6a7a !important; } [data-theme="dark"] .steps-indicator { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .step-number { background: #313138 !important; color: #6a6a7a !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .step-connector { background: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .model-hint-warning { background: rgba(146,64,14,0.12) !important; border-color: rgba(245,158,11,0.2) !important; color: #fbbf24 !important; } [data-theme="dark"] .ai-prompt-loading { background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .ai-prompt-loading__title { color: #d0d0e0 !important; } [data-theme="dark"] .ai-prompt-loading__step { color: #6a6a7a !important; } [data-theme="dark"] .ai-prompt-loading__step.active { background: rgba(226,102,0,0.07) !important; color: #e26600 !important; } [data-theme="dark"] .ai-prompt-loading__bar { background: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .ai-prompt-loading__hint { color: #6a6a7a !important; } /* ───────────────────────────────────────────── LOCAL BUSINESS VIDEO GENERATOR ───────────────────────────────────────────── */ [data-theme="dark"] .past-projects { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .section-label { color: #a0a0b0 !important; } [data-theme="dark"] .past-project-row { border-bottom-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .past-project-row:hover { background: rgba(255,255,255,0.04) !important; } [data-theme="dark"] .proj-info { color: #d0d0e0 !important; } [data-theme="dark"] .proj-format { color: #a0a0b0 !important; } [data-theme="dark"] .proj-scenes { color: #6a6a7a !important; } [data-theme="dark"] .proj-status { background: #313138 !important; color: #a0a0b0 !important; } [data-theme="dark"] .proj-status.complete { background: rgba(22,163,74,0.15) !important; color: #34d399 !important; } [data-theme="dark"] .proj-status.failed { background: rgba(220,38,38,0.15) !important; color: #f87171 !important; } [data-theme="dark"] .mode-selector { background: #242429 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .mode-btn { background: transparent !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .mode-btn:hover { background: rgba(255,255,255,0.05) !important; color: #f0f0f5 !important; } [data-theme="dark"] .mode-btn.active { background: #1a1a1f !important; color: #f0f0f5 !important; border-color: rgba(226,102,0,0.3) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .mode-name { color: #d0d0e0 !important; } [data-theme="dark"] .mode-desc { color: #6a6a7a !important; } [data-theme="dark"] .format-chips { background: transparent !important; } [data-theme="dark"] .format-chip { background: #242429 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .format-chip:hover { border-color: rgba(226,102,0,0.4) !important; color: #f0f0f5 !important; } [data-theme="dark"] .format-chip.active { background: linear-gradient(135deg, #e26600, #f70081) !important; color: white !important; border-color: transparent !important; } [data-theme="dark"] .custom-hint { background: rgba(226,102,0,0.06) !important; border-color: rgba(226,102,0,0.2) !important; color: #a0a0b0 !important; } [data-theme="dark"] .scene-count-picker { background: transparent !important; } [data-theme="dark"] .count-btn { background: #242429 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .count-btn:hover { border-color: rgba(226,102,0,0.4) !important; color: #f0f0f5 !important; } [data-theme="dark"] .count-btn.active { background: linear-gradient(135deg, #e26600, #f70081) !important; color: white !important; border-color: transparent !important; } [data-theme="dark"] .lb-select { background: #242429 !important; color: #f0f0f5 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .lb-select:focus { border-color: #e26600 !important; } [data-theme="dark"] .city-toggle { background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .toggle-label { color: #d0d0e0 !important; } [data-theme="dark"] .service-images-info { background: rgba(34,197,94,0.06) !important; border-color: rgba(34,197,94,0.15) !important; color: #86efac !important; } [data-theme="dark"] .flow-header { background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .flow-step { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .step-header { border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .step-hint { color: #6a6a7a !important; } [data-theme="dark"] .story-card { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .story-field { border-bottom-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .story-key { color: #a0a0b0 !important; } [data-theme="dark"] .story-value { color: #d0d0e0 !important; } [data-theme="dark"] .scene-card { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .scene-meta { color: #a0a0b0 !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .scene-num { background: rgba(226,102,0,0.1) !important; color: #e26600 !important; } [data-theme="dark"] .scene-type { background: #313138 !important; color: #a0a0b0 !important; } [data-theme="dark"] .scene-type.broll { background: rgba(29,78,216,0.15) !important; color: #93c5fd !important; } [data-theme="dark"] .scene-type.talking { background: rgba(22,163,74,0.15) !important; color: #86efac !important; } [data-theme="dark"] .scene-setting { color: #a0a0b0 !important; } [data-theme="dark"] .scene-script-input, [data-theme="dark"] .prompt-input { background: #242429 !important; color: #f0f0f5 !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .scene-script-input:focus, [data-theme="dark"] .prompt-input:focus { border-color: #e26600 !important; } [data-theme="dark"] .prompt-card { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .prompt-label { color: #a0a0b0 !important; } [data-theme="dark"] .scene-script-preview { color: #d0d0e0 !important; } [data-theme="dark"] .frame-card { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .frame-header { background: rgba(255,255,255,0.02) !important; border-bottom-color: rgba(255,255,255,0.07) !important; color: #d0d0e0 !important; } [data-theme="dark"] .frame-preview { background: #242429 !important; } [data-theme="dark"] .no-frame { color: #6a6a7a !important; } [data-theme="dark"] .frame-script { background: #242429 !important; color: #a0a0b0 !important; } [data-theme="dark"] .detected-format-box { background: rgba(226,102,0,0.07) !important; border-color: rgba(226,102,0,0.2) !important; } [data-theme="dark"] .detected-label { color: #a0a0b0 !important; } [data-theme="dark"] .detected-reason { color: #d0d0e0 !important; } [data-theme="dark"] .complete-block { background: transparent !important; color: #d0d0e0 !important; } [data-theme="dark"] .complete-title { color: #f0f0f5 !important; } [data-theme="dark"] .complete-sub { color: #a0a0b0 !important; } [data-theme="dark"] .merged-video { background: #1e1e24 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .error-block { background: rgba(220,38,38,0.06) !important; border-color: rgba(220,38,38,0.15) !important; } [data-theme="dark"] .error-title { color: #fca5a5 !important; } [data-theme="dark"] .error-msg { color: #a0a0b0 !important; } [data-theme="dark"] .loading-block { background: transparent !important; color: #d0d0e0 !important; } [data-theme="dark"] .loading-title { color: #f0f0f5 !important; } [data-theme="dark"] .loading-sub { color: #a0a0b0 !important; } [data-theme="dark"] .status-pill, [data-theme="dark"] .format-pill { background: #313138 !important; color: #a0a0b0 !important; } [data-theme="dark"] .status-pill.complete { background: rgba(22,163,74,0.15) !important; color: #34d399 !important; } [data-theme="dark"] .status-pill.failed { background: rgba(220,38,38,0.15) !important; color: #f87171 !important; } [data-theme="dark"] .scene-status { color: #a0a0b0 !important; } [data-theme="dark"] .scene-status.frame_ready, [data-theme="dark"] .scene-status.video_done { color: #34d399 !important; } [data-theme="dark"] .scene-status.failed { color: #f87171 !important; } /* ───────────────────────────────────────────── GLOBAL — WHITE/LIGHT BG CATCHALL ───────────────────────────────────────────── */ /* Catch any remaining white backgrounds on wrapper/inner sections */ [data-theme="dark"] .video-config, [data-theme="dark"] .design-config { background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .input-group-text { background: #242429 !important; color: #a0a0b0 !important; border-color: rgba(255,255,255,0.1) !important; }