/* ========================================== DARK MODE — applied via .dark-mode on Palette: Page bg #0d1117 Card surface #161b22 Elevated #1c2333 (groups, containers) Hover #21262d Border #444c56 Border muted #444c56 Text primary #e6edf3 Text secondary #8b949e Text muted #6e7681 Brand colours unchanged (purple #667eea, green #10b981 etc.) ========================================== */ /* ---- BASE ---- */ /* Class lives on (applied before first paint); all selectors use descendant combinators */ html.dark-mode, .dark-mode body { background: #0d1117; } .dark-mode .container { background: #161b22; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); color: #e6edf3; } /* ---- LOGIN ---- */ .dark-mode .login-box { background: #161b22; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .dark-mode .login-box h2 { color: #e6edf3; } .dark-mode .login-box p { color: #8b949e; } .dark-mode .auth-tab { color: #8b949e; } .dark-mode .auth-tab:hover { color: #667eea; background: #21262d; } /* ---- MOBILE FILTER BUTTON ---- */ .dark-mode .mobile-filter-btn { background: #1c2333; border-color: #444c56; color: #8b949e; } .dark-mode .mobile-filter-btn:hover, .dark-mode .mobile-filter-btn.active { border-color: #667eea; color: #667eea; background: rgba(102, 126, 234, 0.1); } /* ---- HEADER DAILY PROGRESS ---- */ .dark-mode .hdp-label { color: #6e7681; } .dark-mode .hdp-track { background: #444c56; } .dark-mode .hdp-count { color: #6e7681; } /* ---- MINI TOOLBAR / USER MENU ---- */ .dark-mode .mini-toolbar { background: #1c2333; border-color: #444c56; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); } .dark-mode .mini-toolbar-email { color: #8b949e; } .dark-mode .user-menu-trigger { background: #1c2333; border-color: #444c56; color: #8b949e; } /* ---- CONTROLS ---- */ .dark-mode .add-actions-row, .dark-mode .nav-actions-row, .dark-mode #searchOptionsRow { background: #1c2333; border-color: #444c56; } .dark-mode .controls .input, .dark-mode .controls select { background: #1c2333; border-color: #444c56; color: #e6edf3; } /* ---- GROUPS ---- */ .dark-mode .group { background: #1c2333; border-color: #444c56; } .dark-mode .group-header { border-bottom-color: #444c56; } .dark-mode .group-title { color: #e6edf3; } .dark-mode .group-icon-btn { background: #161b22; border-color: #444c56; color: #8b949e; } .dark-mode .group-icon-edit:hover { background: #1c2f4a; border-color: #3b82f6; color: #60a5fa; } .dark-mode .group-icon-delete:hover { background: #2d1a1a; border-color: #f87171; color: #f87171; } .dark-mode .todo-reminder-btn:hover { background: #1e1a2e; border-color: #7c3aed; color: #a78bfa; } .dark-mode .todo-reminder-btn.reminder-active { background: #1e1a2e; border-color: #7c3aed; color: #a78bfa; } .dark-mode .todo-reminder-btn.reminder-active svg { fill: #2d1f5e; stroke: #a78bfa; } /* ---- REMINDER MODAL ---- */ .dark-mode .reminder-todo-name { color: #e6edf3; } .dark-mode .reminder-option { background: #161b22; border-color: #444c56; color: #8b949e; } .dark-mode .reminder-option:hover { background: #1e1a2e; border-color: #7c3aed; color: #a78bfa; } .dark-mode .reminder-option.active { background: #2d1f5e; border-color: #7c3aed; color: #a78bfa; } .dark-mode .reminder-precise-wrap { border-color: #444c56; } .dark-mode .reminder-precise-summary { color: #8b949e; } .dark-mode .reminder-precise-body { border-color: #444c56; } .dark-mode .reminder-datetime-input { background: #0d1117; border-color: #444c56; color: #e6edf3; } .dark-mode .reminder-datetime-input:focus { border-color: #7c3aed; } /* ---- TODO COMPACT CARDS ---- */ .dark-mode .todo-item-compact { background: #161b22; border-left-color: #444c56; } .dark-mode .todo-item-compact:hover { background: #21262d; } .dark-mode .todo-item-compact.daily.done { background: linear-gradient(to right, #0d1f17, #0d1a1c); } .dark-mode .todo-compact-title { color: #e6edf3; } .dark-mode .todo-compact-meta { color: #8b949e; } .dark-mode .todo-compact-meta .meta-date, .dark-mode .todo-compact-meta .meta-eta { color: #6e7681; } .dark-mode .todo-compact-meta .meta-listing-count { color: #c084fc; } .dark-mode .todo-item-compact.daily.done .todo-compact-title span { color: #6e7681; } .dark-mode .todo-item-compact.daily.done .todo-compact-meta { color: #6e7681; } .dark-mode .todo-item-compact.weekly.done { background: linear-gradient(to right, #0d1f17, #0d1a1c); } .dark-mode .todo-item-compact.weekly.done .todo-compact-title span { color: #6e7681; text-decoration: line-through; } .dark-mode .todo-item-compact.weekly.done .todo-compact-meta { color: #6e7681; } /* old full-view card */ .dark-mode .todo-item { background: #161b22; border-left-color: #444c56; } .dark-mode .todo-item.daily.done { background: #0d1f17; } .dark-mode .todo-title { color: #e6edf3; } /* ---- ACTIONS TOOLTIP ---- */ .dark-mode .actions-tooltip { background: #1c2333; border-color: #444c56; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } /* ---- DAILY DONE ROW ---- */ .dark-mode .daily-done-cta--done { background: #0d2318; color: #34d399; } .dark-mode .daily-done-cta--done .daily-cta-circle { fill: #34d399; stroke: #34d399; } .dark-mode .btn-daily-undo { border-color: #22c55e; color: #34d399; } .dark-mode .btn-daily-undo:hover { background: #22c55e; color: #0d1117; } .dark-mode .daily-planner-link { color: #818cf8; } .dark-mode .daily-planner-link:hover { color: #a5b4fc; } /* ---- EDITABLE FIELDS ---- */ .dark-mode .todo-description { background: #1c2333; color: #e6edf3; } .dark-mode .editable-field:hover { background: #21262d; } .dark-mode .editable-field:focus { background: #0d2137; color: #bae6fd; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25); } .dark-mode .editable-field:empty:before { color: #6e7681; } /* ---- FORMAT TOGGLE BUTTON ---- */ .dark-mode .format-toggle-btn { background: #1c2333; border-color: #444c56; color: #8b949e; } .dark-mode .format-toggle-btn:hover { border-color: #667eea; color: #667eea; background: #21262d; } .dark-mode .format-toggle-btn.active { background: #667eea; border-color: #667eea; color: white; } /* ---- FORMAT TOOLBAR ---- */ .dark-mode .format-toolbar { background: #1c2333; border-color: #444c56; } .dark-mode .format-btn { background: #161b22; border-color: #444c56; color: #8b949e; } .dark-mode .format-btn:hover { background: #667eea; color: white; border-color: #667eea; } .dark-mode .format-btn.active { background: #667eea; color: white; border-color: #667eea; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } /* ---- RICH TEXT FIELD CONTENT ---- */ .dark-mode .rich-text-field h1 { color: #e6edf3; } .dark-mode .rich-text-field h2 { color: #c9d1d9; } .dark-mode .rich-text-field h3 { color: #8b949e; } .dark-mode .rich-text-field hr { border-top-color: #444c56; } .dark-mode .rich-text-field table { border-color: #444c56; } .dark-mode .rich-text-field th, .dark-mode .rich-text-field td { border-color: #444c56; } .dark-mode .rich-text-field th { background: #1c2333; } .dark-mode .rich-text-field tr:nth-child(even) { background: #161b22; } /* ---- CATEGORY LABELS ---- */ .dark-mode .category-daily { background: #3d2100; color: #fbbf24; } .dark-mode .category-weekly { background: #0d2137; color: #60a5fa; } .dark-mode .category-listing { background: #2d1033; color: #c084fc; } .dark-mode .category-longterm{ background: #1a1040; color: #a78bfa; } /* ---- ACCORDION ---- */ .dark-mode .accordion-button { background: transparent; border-top-color: #30363d; color: #8b949e; } .dark-mode .accordion-button:hover { color: #c9d1d9; background: transparent; } .dark-mode .accordion-icon { color: #484f58; } .dark-mode .accordion-inner { background: transparent; color: #c9d1d9; } .dark-mode .accordion-inner:focus { background: #0d2137; color: #bae6fd; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25); } /* ---- LISTING ITEMS CONTAINER ---- */ .dark-mode .listing-items-container { background: linear-gradient(180deg, #1c2333 0%, #161b22 100%); border-color: #444c56; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .dark-mode .listing-items-container.listing-size-comfy { background: #1c2333; border-color: #444c56; } .dark-mode .listing-items-container.listing-size-comfy .listing-item { border-color: #444c56; } .dark-mode .listing-header { color: #e6edf3; border-bottom-color: #444c56; } .dark-mode .listing-empty { background: #161b22; border-color: #444c56; color: #8b949e; } /* ---- LISTING ITEMS ---- */ .dark-mode .listing-item { background: #1c2333; border-color: #444c56; } .dark-mode .listing-item.listing-category { background: linear-gradient(135deg, #2c1a00 0%, #3d2300 100%); border-color: #92400e; } .dark-mode .listing-item.listing-category .listing-item-text { color: #fbbf24; } .dark-mode .listing-item.listing-category .listing-drag-toggle { background: rgba(251, 191, 36, 0.1); border-color: #92400e; color: #fbbf24; } .dark-mode .listing-item.listing-category .listing-item-remove { background: rgba(251, 191, 36, 0.1); color: #fbbf24; } .dark-mode .listing-drag-toggle { background: #21262d; border-color: #444c56; color: #6e7681; } .dark-mode .listing-drag-toggle:hover { background: #444c56; color: #8b949e; } .dark-mode .drag-enabled .listing-drag-toggle { background: #10b981; border-color: #10b981; color: white; } .dark-mode .listing-item-text { color: #e6edf3; } .dark-mode .listing-item-text:focus { background: #0d2137; color: #bae6fd; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25); } .dark-mode input.listing-item-text { color: #e6edf3; } .dark-mode input.listing-item-text:focus { background: #0d2137; color: #bae6fd; } .dark-mode #listingItems .listing-category-input { color: #fbbf24; } .dark-mode .listing-item-remove { color: #6e7681; } .dark-mode .listing-item-remove:hover { background: #2d1a1a; color: #f87171; } /* ---- INSERT MODE ---- */ .dark-mode .listing-add-row { border-color: #444c56; color: #6e7681; } .dark-mode .listing-add-row:hover { border-color: #667eea; color: #667eea; background: rgba(102, 126, 234, 0.08); } .dark-mode .listing-insert-toggle { background: #1c2333; border-color: #444c56; color: #8b949e; } .dark-mode .listing-insert-toggle:hover:not(.active) { background: #21262d; border-color: #6e7681; color: #c9d1d9; } .dark-mode .listing-insert-btn { background: #161b22; border-color: #667eea; color: #667eea; } .dark-mode .listing-insert-btn:hover { background: #667eea; color: white; } .dark-mode .listing-insert-type-btn { background: #1c2333; border-color: #444c56; color: #c9d1d9; } .dark-mode .listing-insert-type-btn:hover { background: #667eea; color: white; border-color: #667eea; } .dark-mode .listing-insert-cat-btn:hover { background: #d97706; border-color: #d97706; color: white; } .dark-mode .listing-item-add-below { background: #1c2333; border-color: #444c56; color: #6e7681; } .dark-mode .listing-item-add-below:hover { border-color: #667eea; color: #667eea; } .dark-mode .listing-after-cat-add { border-color: #444c56; color: #6e7681; } .dark-mode .listing-after-cat-add:hover { border-color: #667eea; color: #667eea; } /* ---- EXTRA LIST ITEMS (non-listing accordion) ---- */ .dark-mode .extras-list { background: transparent; } .dark-mode .extra-list-item { color: #c9d1d9; border-bottom-color: #444c56; } .dark-mode .extra-list-item:hover { background: #21262d; } .dark-mode .extra-list-item:focus { background: #0d2137; color: #bae6fd; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25); } .dark-mode .extra-list-item:empty:before { color: #6e7681; } /* ---- WEEKLY BLOCK ---- */ .dark-mode .weekly-block { background: linear-gradient(180deg, #0d1a2e 0%, #0d1117 100%); border-color: #1e3a5f; } .dark-mode .weekly-block-head { color: #60a5fa; } .dark-mode .weekly-block-track { background: #1e3a5f; } .dark-mode .weekly-stat { background: #1c2333; border-color: #1e3a5f; } .dark-mode .weekly-stat-label { color: #8b949e; } /* ---- MODAL ---- */ .dark-mode .modal { background: rgba(0, 0, 0, 0.85); } .dark-mode .modal-content { background: #161b22; color: #e6edf3; } .dark-mode .modal-content h2 { color: #e6edf3; } .dark-mode .modal-header h2 { color: #e6edf3; } .dark-mode .modal-content h2:not(.modal-header h2) { color: #e6edf3; } /* ---- SPLASH MODAL ---- */ .dark-mode .streak-chip-daily { background: #3d2e00; } .dark-mode .streak-chip-weekly { background: #2e1a4a; } .dark-mode .streak-chip-daily .streak-num { color: #fbbf24; } .dark-mode .streak-chip-weekly .streak-num { color: #c084fc; } .dark-mode .streak-chip-daily .streak-lbl { color: #d97706; } .dark-mode .streak-chip-weekly .streak-lbl { color: #a855f7; } .dark-mode .splash-progress-card { background: #1c2333; border-color: #444c56; } .dark-mode .splash-progress-header { color: #c9d1d9; } .dark-mode .splash-progress-pct { color: #8b949e; } .dark-mode .splash-progress-track { background: #21262d; } .dark-mode .splash-progress-meta { color: #8b949e; } .dark-mode .splash-empty { background: #1c2333; border-color: #444c56; color: #8b949e; } /* ---- STATS SECTIONS ---- */ .dark-mode .stats-section-title { color: #6e7681; } .dark-mode .stats-bal-track { background: #21262d; } .dark-mode .stats-bal-count { color: #6e7681; } .dark-mode .stats-stale-item { background: #1c2333; border-color: #30363d; } .dark-mode .stats-stale-item:hover { background: #21262d; } .dark-mode .stats-stale-title { color: #c9d1d9; } .dark-mode .stats-stale-meta { color: #6e7681; } .dark-mode .stats-stale-arrow { color: #444c56; } .dark-mode .stats-stale-badge-daily { background: #3d2e00; color: #fbbf24; } .dark-mode .stats-stale-badge-weekly { background: #2e1a4a; color: #c084fc; } .dark-mode .stats-stale-badge-longterm { background: #052e16; color: #34d399; } /* ---- OVERDUE ---- */ .dark-mode .stats-section-title-warn { color: #f87171; } .dark-mode .stats-overdue-item { background: #2d1515; border-color: #7f1d1d; } .dark-mode .stats-overdue-item:hover { background: #3d1a1a; } .dark-mode .stats-overdue-title { color: #c9d1d9; } .dark-mode .stats-overdue-eta { color: #f87171; } /* ---- TOP OPENED ---- */ .dark-mode .stats-top-item { background: #1c2333; border-color: #30363d; } .dark-mode .stats-top-item:hover { background: #21262d; } .dark-mode .stats-top-rank { color: #444c56; } .dark-mode .stats-top-title { color: #c9d1d9; } .dark-mode .stats-top-count { color: #6e7681; } /* ---- SUGGESTIONS MODAL ---- */ .dark-mode .suggestions-section-title { color: #c9d1d9; } .dark-mode .suggestion-item { background: #1c2333; border-color: #444c56; } .dark-mode .suggestion-item:hover { background: #21262d; border-color: #6e7681; } .dark-mode .suggestion-main { color: #e6edf3; } .dark-mode .suggestion-hint { color: #8b949e; } /* ---- FORM ELEMENTS ---- */ .dark-mode .form-group label { color: #c9d1d9; } .dark-mode .form-group input[type="text"], .dark-mode .form-group input[type="number"], .dark-mode .form-group input[type="email"], .dark-mode .form-group input[type="password"], .dark-mode .form-group select, .dark-mode .form-group textarea { background: #1c2333; border-color: #444c56; color: #e6edf3; } .dark-mode .form-group input:focus, .dark-mode .form-group select:focus, .dark-mode .form-group textarea:focus { border-color: #667eea; outline: none; } .dark-mode .rich-text-editor { background: #1c2333; border-color: #444c56; color: #e6edf3; } .dark-mode .rich-text-editor:focus { border-color: #667eea; } .dark-mode .rich-text-editor:empty:before { color: #6e7681; } .dark-mode .form-helper { color: #8b949e; } .dark-mode .input { background: #1c2333; border-color: #444c56; color: #e6edf3; } .dark-mode .input:focus { border-color: #667eea; } /* form separator */ .dark-mode .btn-toggle-additional { color: #8b949e; } .dark-mode .btn-toggle-additional:hover { color: #c9d1d9; } /* ---- EMPTY STATE ---- */ .dark-mode .empty-state { color: #8b949e; } .dark-mode .empty-state h2 { color: #e6edf3; } .dark-mode .empty-state-subtitle { color: #8b949e; } .dark-mode .tip-content strong { color: #e6edf3; } .dark-mode .tip-content p { color: #8b949e; } .dark-mode .empty-state-tip { background: #1c2333; border-color: #444c56; } /* ---- RETURN TO MAIN STICKY BUTTON ---- */ .dark-mode .return-to-main-btn { background: #4f5fc4; box-shadow: 0 4px 16px rgba(79, 95, 196, 0.5); } .dark-mode .return-to-main-btn:hover { background: #667eea; } /* ---- SERVICES MODAL ---- */ .dark-mode .services-cloud-status p { color: #8b949e !important; } .dark-mode .notif-service-label { color: #c9d1d9; } /* ---- NOTIFICATOR CARDS ---- */ .dark-mode .notificator-card { background: #161b22; border-color: #444c56; } .dark-mode .notificator-card:hover { background: #1c2333; border-color: #667eea; } .dark-mode .notificator-card.selected { background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%); } .dark-mode .notificator-card-name { color: #e6edf3; } .dark-mode .notificator-card-tagline { color: #8b949e; } .dark-mode .notificator-card-check { border-color: #444c56; } /* ---- THEME TOGGLE UI (in services modal) ---- */ .dark-mode .services-section-label { color: #8b949e; } .dark-mode .theme-option-btn { background: #1c2333; border-color: #444c56; color: #8b949e; } .dark-mode .theme-option-btn:hover { background: #21262d; border-color: #6e7681; color: #c9d1d9; } .dark-mode .theme-option-btn.active { background: #667eea; border-color: #667eea; color: white; } /* ---- SCROLLBAR (webkit) ---- */ .dark-mode ::-webkit-scrollbar { width: 8px; } .dark-mode ::-webkit-scrollbar-track { background: #0d1117; } .dark-mode ::-webkit-scrollbar-thumb { background: #444c56; border-radius: 4px; } .dark-mode ::-webkit-scrollbar-thumb:hover { background: #6e7681; } /* ---- DAILY/WEEKLY SLIDER ---- */ .dark-mode .daily-weekly-modal-content h2 { color: #e6edf3; } .dark-mode .dw-tabs { border-bottom-color: #444c56; } .dark-mode .dw-tab { color: #8b949e; } .dark-mode .dw-tab:hover { color: #c9d1d9; background: #21262d; } .dark-mode .dw-tab.active { color: #667eea; border-bottom-color: #667eea; } .dark-mode .dw-progress-header { color: #c9d1d9; } .dark-mode .dw-progress-track { background: #21262d; } .dark-mode .dw-progress-meta { color: #8b949e; } .dark-mode .dw-card { background: #1c2333; border-color: #444c56; } .dark-mode .dw-card-done { border-color: #10b981; background: linear-gradient(135deg, #0d1f17 0%, #1c2333 60%); } .dark-mode .dw-card-title { color: #e6edf3; } .dark-mode .dw-card-desc { color: #8b949e; } .dark-mode .dw-status { background: #21262d; color: #8b949e; } .dark-mode .dw-status.dw-status-done { background: #10b981; color: #fff; } .dark-mode .dw-empty { color: #8b949e; } /* Slider arrows */ .dark-mode .dw-nav-btn { background: #1c2333; border-color: #444c56; color: #8b949e; } .dark-mode .dw-nav-btn:hover:not(:disabled) { border-color: #667eea; color: #667eea; background: #21262d; } /* Dots */ .dark-mode .dw-dot { background: #444c56; } .dark-mode .dw-dot:hover { background: #6e7681; } .dark-mode .dw-dot.active { background: #667eea; } /* ---- PLACEHOLDER TEXT (all inputs / contenteditable) ---- */ .dark-mode ::placeholder { color: #6e7681 !important; opacity: 1; } .dark-mode .rich-text-editor:empty:before { color: #6e7681; } .dark-mode input.listing-item-text::placeholder { color: #6e7681; } /* ---- QUICK TASK SECTION (inline-styled — needs !important) ---- */ .dark-mode #quickTaskGroup label { background: #2c2200 !important; border-color: #92400e !important; } .dark-mode #quickTaskGroup .form-helper { background: #1f1700 !important; color: #d4a72c !important; } .dark-mode #quickTaskGroup .form-helper strong { color: #fbbf24 !important; } /* ---- WIZARD — CREATE TYPE CARDS ---- */ .dark-mode .create-type-card { background: #1c2333; border-color: #444c56; color: #e6edf3; } .dark-mode .create-type-card:hover { border-color: #667eea; background: #21262d; } .dark-mode .create-type-icon { background: rgba(102, 126, 234, 0.15); color: #667eea; } .dark-mode .create-type-label { color: #e6edf3; } .dark-mode .create-type-sublabel { color: #8b949e; } /* ---- WIZARD — BACK BUTTONS (all steps: create-type + simple-create) ---- */ .dark-mode .create-type-back .btn.btn-secondary, .dark-mode .simple-create-actions .btn.btn-secondary { background: transparent; border: 2px solid #444c56; color: #c9d1d9; } .dark-mode .create-type-back .btn.btn-secondary:hover, .dark-mode .simple-create-actions .btn.btn-secondary:hover { background: #21262d; border-color: #6e7681; color: #e6edf3; } /* ---- WIZARD — SIMPLE CREATE FORM ---- */ .dark-mode .simple-create-textarea { background: #1c2333; border-color: #444c56; color: #e6edf3; } .dark-mode .simple-create-textarea:focus { border-color: #667eea; } .dark-mode .gentle-category-choice { border-color: #444c56; } .dark-mode .category-trigger { background: #1c2333; color: #e6edf3; } .dark-mode .category-trigger:hover { background: #21262d; } .dark-mode #categoryLabel { color: #e6edf3; } .dark-mode .category-trigger-hint { color: #8b949e; } .dark-mode .category-radios label { color: #c9d1d9; border-top-color: #444c56; } .dark-mode .category-radios label:hover { background: #21262d; } /* items summary (green box after adding items) */ .dark-mode .wizard-items-summary { background: #0d1f17; border-color: #166534; } .dark-mode .wizard-items-summary-count { color: #4ade80; } .dark-mode .wizard-items-summary-label { color: #86efac; } /* ========================================== THEME TOGGLE CONTROLS (light + dark both) ========================================== */ .services-theme-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #e2e8f0; } .dark-mode .services-theme-section { border-bottom-color: #444c56; } .services-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: #64748b; margin-bottom: 10px; } .theme-option-group { display: flex; gap: 8px; } .theme-option-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border: 2px solid #e2e8f0; border-radius: 10px; background: #f8fafc; color: #64748b; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.18s; } .theme-option-btn svg { width: 20px; height: 20px; flex-shrink: 0; } .theme-option-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #334155; } .theme-option-btn.active { background: #667eea; border-color: #667eea; color: white; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } /* ========================================== LANGUAGE SELECTOR (in services modal) ========================================== */ .services-lang-section { padding-bottom: 16px; border-bottom: 1px solid #e2e8f0; margin-bottom: 16px; } .lang-option-group { display: flex; gap: 8px; } .lang-btn { flex: 1; padding: 8px 12px; border: 2px solid #e2e8f0; border-radius: 8px; background: #f8fafc; color: #64748b; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.18s; } .lang-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #334155; } .lang-btn.active { background: #667eea; border-color: #667eea; color: white; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } .dark-mode .services-lang-section { border-bottom-color: #444c56; } .dark-mode .lang-btn { background: #1c2333; border-color: #444c56; color: #8b949e; } .dark-mode .lang-btn:hover { background: #21262d; border-color: #6e7681; color: #c9d1d9; } .dark-mode .lang-btn.active { background: #667eea; border-color: #667eea; color: white; } /* ========================================== DARK MODE — MOBILE FULL-SCREEN MODALS ========================================== */ @media (max-width: 768px) { .dark-mode .modal-close-btn { background: #161b22 !important; border-top-color: #444c56 !important; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3); } .dark-mode .modal-close-btn::after { color: #8b949e; } .dark-mode .modal-close-btn:hover { background: #21262d !important; } } /* ---- LANG PICKER ---- */ .dark-mode .lang-picker-card { background: #161b22; } .dark-mode .lang-picker-title { color: #e6edf3; } .dark-mode .lang-picker-btn { background: #1c2333; border-color: #444c56; } .dark-mode .lang-picker-btn:hover { background: #21262d; border-color: #667eea; } .dark-mode .lang-picker-name { color: #c9d1d9; } /* ---- CONSULTANT ---- */ .dark-mode .consultant-current-strip { background: #21262d; color: #8b949e; } .dark-mode .consultant-card { border-color: #444c56; background: #161b22; } .dark-mode .consultant-card.selected { border-color: #667eea; } .dark-mode .consultant-card-img { background: #0d1117; } .dark-mode .consultant-card-name { color: #e6edf3; } .dark-mode .consultant-card-desc { color: #8b949e; } .dark-mode .consultant-choose-btn { background: #161b22; color: #667eea; border-color: #667eea; } .dark-mode .consultant-choose-btn.active, .dark-mode .consultant-choose-btn:hover { background: #667eea; color: white; } .dark-mode .consultant-intro-face { border-color: #444c56; background: #0d1117; } .dark-mode .congrats-card { background: #161b22; } .dark-mode .congrats-message { color: #c9d1d9; } /* ========================================== DARK MODE — HEADER OPTIONS TOOLTIP ========================================== */ .dark-mode .header-options-trigger { color: #6e7681; } .dark-mode .header-options-trigger:hover { background: #21262d; color: #8b949e; } .dark-mode .header-options-wrap.expanded .header-options-trigger { background: #21262d; color: #8b949e; } .dark-mode .header-options-tooltip { background: #161b22; border-color: #30363d; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .dark-mode .header-opts-label { color: #484f58; } .dark-mode .header-opts-divider { background: #21262d; } .dark-mode .header-opt-btn { border-color: #30363d; background: #0d1117; color: #8b949e; } .dark-mode .header-opt-btn:hover { background: #21262d; color: #c9d1d9; } .dark-mode .header-opt-btn.active { background: #161b22; border-color: #667eea; color: #667eea; } /* ========================================== DARK MODE — SIMPLE VIEW ========================================== */ .dark-mode .simple-view-section { background: #0d1117; border-color: #444c56; } .dark-mode .svs-header { background: #1c2333; border-bottom-color: #444c56; } .dark-mode .svs-body { background: #0d1117; } .dark-mode .svs-body .todo-item-compact { border-bottom-color: #21262d; } .dark-mode .svs-body .todo-item-compact:hover { background: #21262d; } .dark-mode .svs-label { color: #e6edf3; } .dark-mode .svs-count { background: #21262d; color: #6e7681; } .dark-mode .svs-add-btn { border-color: #444c56; color: #6e7681; } .dark-mode .svs-add-btn:hover { border-color: #667eea; color: #667eea; background: rgba(102,126,234,0.08); } /* ========================================== DARK MODE — PRESET PICKER ========================================== */ /* Featured tile */ .dark-mode .preset-tile-featured { background: linear-gradient(135deg, #1c2333 0%, #1a1830 100%); border-color: #4a4f8a; } .dark-mode .preset-tile-featured:hover { border-color: #667eea; box-shadow: 0 6px 28px rgba(102,126,234,0.25); } .dark-mode .preset-featured-badge { background: #5a67d8; } .dark-mode .pfp-cell { background: #0d1117; border-color: #30363d; } .dark-mode .pfp-type-label { color: #8b949e; } .dark-mode .pfp-item { color: #c9d1d9; } /* Secondary tiles */ .dark-mode .preset-tile { background: #1c2333; border-color: #444c56; } .dark-mode .preset-discover-btn { border-color: #444c56; color: #7c8cf8; } .dark-mode .preset-discover-btn:hover { border-color: #7c8cf8; background: rgba(124, 140, 248, 0.06); } .dark-mode .preset-tile:hover { border-color: #667eea; box-shadow: 0 4px 20px rgba(102,126,234,0.2); } .dark-mode .preset-tile-name { color: #e6edf3; } .dark-mode .pmini-cell { background: #0d1117; } .dark-mode .pmini-item { color: #8b949e; } .dark-mode .preset-tile-desc { color: #6e7681; } .dark-mode .preset-start-fresh { color: #8b949e; border-color: #444c56; } .dark-mode .preset-tile-expand { color: #7c8cf8; } .dark-mode .preset-tile-featured .preset-tile-desc { color: #a0aec0; } .dark-mode .preset-soon-tag { background: #30363d; color: #8b949e; } /* ---- Preset preview bar ---- */ .dark-mode .preset-preview-bar { background: linear-gradient(135deg, #5a6fd6 0%, #6b3f96 100%); box-shadow: 0 -6px 32px rgba(90, 111, 214, 0.55); } /* ---- Fav picker modal ---- */ .dark-mode .fav-picker-content h2 { color: #e6edf3; } .dark-mode .fav-picker-sub { color: #8b949e; } .dark-mode .fav-picker-item { border-color: #30363d; background: transparent; } .dark-mode .fav-picker-item:hover { background: #21262d; border-color: #78350f; } .dark-mode .fav-picker-item.selected { background: #1c1408; border-color: #d97706; } .dark-mode .fav-picker-title { color: #c9d1d9; } .dark-mode .fav-picker-cat-label { background: #21262d; color: #8b949e; } .dark-mode .fav-picker-limit { color: #d97706; } /* ---- Favourites section (home screen) ---- */ .dark-mode .svs-fav-section { background: linear-gradient(135deg, #1c1408 0%, #221a08 100%); border-color: #78350f; } .dark-mode .svs-fav-label { color: #d97706; } .dark-mode .svs-fav-manage-btn { color: #d97706; } .dark-mode .svs-fav-manage-btn:hover { background: #292107; border-color: #78350f; color: #f59e0b; } .dark-mode .svs-fav-body .todo-item-compact { background: rgba(255,255,255,0.04); border-color: #78350f; } .dark-mode .svs-fav-body .todo-item-compact:hover { background: rgba(255,255,255,0.08); } /* ---- Questionnaire ---- */ .dark-mode .q-card { background: #1e1e1e; border-color: #3a3a3a; } .dark-mode .q-card:hover { border-color: #8b5cf6; background: #2d1f4e; } .dark-mode .q-card.q-active { border-color: #8b5cf6; background: #2d1f4e; } .dark-mode .q-title { color: #e2e8f0; } .dark-mode .q-sub { color: #a0aec0; } .dark-mode .q-check { border-color: #3a3a3a; color: #a78bfa; } .dark-mode .q-card.q-active .q-check { border-color: #8b5cf6; background: #8b5cf6; color: #fff; } .dark-mode .q-discover-btn { border-color: #4a3080; color: #a78bfa; } .dark-mode .q-discover-btn:hover { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }