/* =========================================== LEXY.FM — MONOCHROMATIC DARK MODE Override file — loaded after lexy-new-design.css Uses [data-theme="dark"] on Palette: Page bg: #0F1629 Card bg: #1A2240 Accent: #8D75E6 Text: #FFFFFF Text muted: rgba(255,255,255,0.7) Text dim: rgba(255,255,255,0.4) Borders: rgba(255,255,255,0.1) Hover lift: rgba(255,255,255,0.05) =========================================== */ /* ---- PAGE / BODY ---- */ [data-theme="dark"] body, [data-theme="dark"] .lexy-new-body { background: #0F1629; color: #FFFFFF; } /* ---- HEADER ---- */ [data-theme="dark"] .new-header { background: #0F1629; } [data-theme="dark"] .new-nav-link { color: #FFFFFF; } [data-theme="dark"] .new-nav-link:hover { color: #8D75E6; } [data-theme="dark"] .new-dropdown-menu { background: #1A2240; border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } [data-theme="dark"] .new-dropdown-menu a { color: #FFFFFF; } [data-theme="dark"] .new-dropdown-menu a:hover { background: rgba(141,117,230,0.2); } [data-theme="dark"] .new-user-menu { background: #1A2240; border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } [data-theme="dark"] .new-user-menu-header { border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .new-user-name { color: #FFFFFF; } [data-theme="dark"] .new-user-email { color: rgba(255,255,255,0.5); } [data-theme="dark"] .new-user-menu a { color: #FFFFFF; } [data-theme="dark"] .new-user-menu a:hover { color: #8D75E6; background: transparent; } [data-theme="dark"] .new-user-circle { background: rgba(141,117,230,0.15); } /* ---- SEARCH ---- */ [data-theme="dark"] .new-search-wrapper, [data-theme="dark"] .explore-search-wrapper { background: rgba(141,117,230,0.15); border-color: rgba(141,117,230,0.2); } [data-theme="dark"] .new-search-wrapper:hover, [data-theme="dark"] .explore-search-wrapper:hover { background-color: rgba(141,117,230,0.25); } [data-theme="dark"] .new-search-input, [data-theme="dark"] .explore-search-input { color: #FFFFFF; } [data-theme="dark"] .new-search-input::placeholder, [data-theme="dark"] .explore-search-input::placeholder { color: rgba(255,255,255,0.4); } [data-theme="dark"] .new-search-type, [data-theme="dark"] .explore-search-type { color: #FFFFFF; } [data-theme="dark"] .new-search-type-arrow, [data-theme="dark"] .explore-search-arrow { color: rgba(255,255,255,0.4); } [data-theme="dark"] .new-search-clear, [data-theme="dark"] .explore-search-clear { color: rgba(255,255,255,0.4); } [data-theme="dark"] .new-search-clear:hover, [data-theme="dark"] .explore-search-clear:hover { color: #FFFFFF; background: rgba(141,117,230,0.15); } [data-theme="dark"] .new-search-btn, [data-theme="dark"] .explore-search-btn { background: #8D75E6; } [data-theme="dark"] .new-search-btn:hover, [data-theme="dark"] .explore-search-btn:hover { background: #7D65D6; } /* Search Dropdown Button (type selector: "Games", "Categories", etc.) */ [data-theme="dark"] .explore-search-dropdown-btn { color: #FFFFFF; } [data-theme="dark"] .explore-search-dropdown-btn:hover { background: rgba(141,117,230,0.15); } /* Search Dropdown Menu */ [data-theme="dark"] .explore-search-dropdown-menu { background: #1A2240; box-shadow: 0 4px 20px rgba(0,0,0,0.4); } /* Search Dropdown Items */ [data-theme="dark"] .explore-search-dropdown-item { color: rgba(255,255,255,0.8); } [data-theme="dark"] .explore-search-dropdown-item:hover { color: #FFFFFF; background: rgba(141,117,230,0.1); } [data-theme="dark"] .explore-search-dropdown-item input[type="radio"]:checked + span { color: #8D75E6; } /* Search Mode Section (bottom of dropdown) */ [data-theme="dark"] .explore-search-mode-section { border-top-color: rgba(255,255,255,0.1); } [data-theme="dark"] .explore-search-mode-label { color: rgba(255,255,255,0.4); } /* Search Mode Toggle Pill */ [data-theme="dark"] .explore-search-mode-toggle { background: rgba(255,255,255,0.08); } [data-theme="dark"] .explore-search-mode-btn { color: rgba(255,255,255,0.5); } [data-theme="dark"] .explore-search-mode-btn:hover { color: rgba(255,255,255,0.8); } [data-theme="dark"] .explore-search-mode-btn.active { background: #8D75E6; color: #FFFFFF; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } /* Search Type Label */ [data-theme="dark"] .explore-search-type-label { color: #FFFFFF; } /* ---- FILTER BAR ---- */ [data-theme="dark"] .new-filter-icon-btn { background: rgba(141,117,230,0.15); border-color: rgba(141,117,230,0.2); } [data-theme="dark"] .new-filter-icon-btn:hover { background-color: rgba(141,117,230,0.25); } [data-theme="dark"] .new-filter-pill { background: rgba(141,117,230,0.15); border-color: rgba(141,117,230,0.2); } [data-theme="dark"] .new-filter-pill:hover { background: rgba(141,117,230,0.25); } [data-theme="dark"] .new-filter-select { color: #FFFFFF; } [data-theme="dark"] .new-filter-arrow { color: rgba(255,255,255,0.4); } [data-theme="dark"] .new-filter-dropdown-item { color: #FFFFFF; } [data-theme="dark"] .new-filter-dropdown-list { color: rgba(255,255,255,0.7); } [data-theme="dark"] .filter-search-input { background: transparent; color: #FFFFFF; border: none; } /* ---- PAGE TITLES ---- */ [data-theme="dark"] .new-page-title h1 { color: #FFFFFF; } [data-theme="dark"] .new-page-meta { color: rgba(255,255,255,0.7); } /* ---- EXPLORE HERO ---- */ [data-theme="dark"] .explore-hero { background: #0F1629; } [data-theme="dark"] .explore-hero-title { color: #FFFFFF; } [data-theme="dark"] .explore-hero-subtitle { color: rgba(255,255,255,0.7); } [data-theme="dark"] .explore-menu-dropdown { background: #1A2240; border-color: rgba(141,117,230,0.2); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } [data-theme="dark"] .explore-menu-item { color: #FFFFFF; } [data-theme="dark"] .explore-menu-item svg { color: rgba(255,255,255,0.4); } /* ---- CARDS / SURFACES ---- */ [data-theme="dark"] .carousel-card { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } [data-theme="dark"] .carousel-view-all-card { background: #1A2240; } [data-theme="dark"] .carousel-view-all-card:hover { background: rgba(255,255,255,0.1); } [data-theme="dark"] .carousel-header-left, [data-theme="dark"] .carousel-title { color: #FFFFFF; } [data-theme="dark"] .carousel-description { color: rgba(255,255,255,0.7); } /* ---- GAME MODAL ---- */ [data-theme="dark"] .game-modal-content { background: #1A2240; } [data-theme="dark"] .game-modal-title, [data-theme="dark"] .game-modal-status { color: #FFFFFF; } [data-theme="dark"] .game-modal-subtitle, [data-theme="dark"] .game-modal-message { color: rgba(255,255,255,0.7); } [data-theme="dark"] .game-modal-secondary-btn { background: #1A2240; color: #FFFFFF; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .game-modal-close:hover { background: rgba(255,255,255,0.1); } /* ---- TABLES ---- */ [data-theme="dark"] .new-table thead th { background: #1A2240; color: rgba(255,255,255,0.7); border-bottom-color: rgba(141,117,230,0.2); } [data-theme="dark"] .new-table tbody td { color: #FFFFFF; border-bottom-color: rgba(141,117,230,0.15); } /* ---- BUTTONS ---- */ [data-theme="dark"] .new-add-btn { background: #8D75E6; color: #FFFFFF; } [data-theme="dark"] .new-action-btn { border-color: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .new-action-btn:hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] .new-action-btn.new-remove { border-color: rgba(239,68,68,0.3); } [data-theme="dark"] .new-action-btn.new-remove:hover { background: rgba(239,68,68,0.2); } [data-theme="dark"] .btn-ghost { background: transparent; color: #8D75E6; border-color: rgba(141,117,230,0.3); } [data-theme="dark"] .secondary-action-btn { background: rgba(255,255,255,0.05); color: #FFFFFF; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .action-dropdown-btn { color: #FFFFFF; } /* ---- PAGINATION ---- */ [data-theme="dark"] .new-pagination-prev, [data-theme="dark"] .new-pagination-next, [data-theme="dark"] .new-pagination-num { color: #FFFFFF; } [data-theme="dark"] .new-pagination-num.active { background: rgba(141,117,230,0.25); } [data-theme="dark"] .new-pagination-prev:hover, [data-theme="dark"] .new-pagination-next:hover, [data-theme="dark"] .new-pagination-num:hover { color: #8D75E6; } [data-theme="dark"] .new-pagination-ellipsis, [data-theme="dark"] .new-pagination-results, [data-theme="dark"] .new-pagination span { color: rgba(255,255,255,0.7); } /* ---- FORM INPUTS ---- */ [data-theme="dark"] .form-select { background: #1A2240; color: #FFFFFF; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .form-select:focus { border-color: #8D75E6; box-shadow: 0 0 0 2px rgba(141,117,230,0.2); } [data-theme="dark"] .form-label { color: #FFFFFF; } [data-theme="dark"] .form-help { color: rgba(255,255,255,0.7); } /* ---- FOOTER ---- */ [data-theme="dark"] .new-footer { background: #0F1629; color: #FFFFFF; border-top-color: rgba(141,117,230,0.2); } [data-theme="dark"] .new-footer-column-title, [data-theme="dark"] .footer-phone, [data-theme="dark"] .support-title { color: #FFFFFF; } [data-theme="dark"] .new-footer-description, [data-theme="dark"] .new-footer-link, [data-theme="dark"] .new-footer-credit, [data-theme="dark"] .new-footer-copyright { color: rgba(255,255,255,0.7); } [data-theme="dark"] .new-footer-bottom { border-top-color: rgba(255,255,255,0.1); } /* ---- DRAWERS / OVERLAYS ---- */ [data-theme="dark"] .drawer, [data-theme="dark"] .player-history-drawer { background: #1A2240; } [data-theme="dark"] .player-history-drawer { box-shadow: -4px 0 20px rgba(0,0,0,0.4); } [data-theme="dark"] .drawer-overlay, [data-theme="dark"] .profile-modal-overlay { background-color: rgba(0,0,0,0.7); } [data-theme="dark"] .drawer-header { background: #1A2240; border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .drawer-title { color: #FFFFFF; } [data-theme="dark"] .drawer-close-btn { color: rgba(255,255,255,0.7); } [data-theme="dark"] .drawer-close-btn:hover { color: #FFFFFF; background: rgba(255,255,255,0.1); } [data-theme="dark"] .drawer-state-title { color: #FFFFFF; } [data-theme="dark"] .drawer-state-subtitle { color: rgba(255,255,255,0.7); } /* ---- PROFILE ---- */ [data-theme="dark"] .profile-card { background: #1A2240; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } [data-theme="dark"] .profile-card-title h2 { color: #FFFFFF; } [data-theme="dark"] .profile-card-title p, [data-theme="dark"] .profile-section-subtitle { color: rgba(255,255,255,0.7); } [data-theme="dark"] .profile-section-title { color: #FFFFFF; } [data-theme="dark"] .profile-page-title { color: #FFFFFF; } [data-theme="dark"] .profile-page-subtitle { color: rgba(255,255,255,0.7); } [data-theme="dark"] .profile-stats-card .profile-card-header { border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .profile-stat-row { border-bottom-color: rgba(255,255,255,0.05); } [data-theme="dark"] .profile-stat-row:hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] .profile-stat-row-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .profile-stat-row-value { color: #FFFFFF; } [data-theme="dark"] .profile-stat-row-arrow { color: rgba(255,255,255,0.5); } [data-theme="dark"] .profile-stat-row:hover .profile-stat-row-arrow { color: #8D75E6; } [data-theme="dark"] .profile-view-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .profile-view-value { color: #FFFFFF; } [data-theme="dark"] .profile-form-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .profile-form-input, [data-theme="dark"] .profile-form-select { background: #1A2240; color: #FFFFFF; border-color: rgba(141,117,230,0.2); } [data-theme="dark"] .profile-form-input:focus { border-color: #8D75E6; } [data-theme="dark"] .profile-form-hint { color: rgba(255,255,255,0.7); } [data-theme="dark"] .profile-btn-secondary { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .profile-btn-secondary:hover { background: rgba(255,255,255,0.1); } [data-theme="dark"] .profile-modal { background: #1A2240; } [data-theme="dark"] .profile-modal-title { color: #FFFFFF; } [data-theme="dark"] .profile-modal-description { color: rgba(255,255,255,0.7); } [data-theme="dark"] .profile-icon-btn { color: rgba(255,255,255,0.4); } [data-theme="dark"] .profile-icon-btn:hover { background: rgba(141,117,230,0.15); color: #8D75E6; } [data-theme="dark"] .profile-loading-spinner { border-color: rgba(255,255,255,0.2); } [data-theme="dark"] .profile-loading { color: rgba(255,255,255,0.7); } [data-theme="dark"] .profile-toast { background: #1A2240; box-shadow: 0 10px 25px rgba(0,0,0,0.4); } [data-theme="dark"] .profile-toast-message { color: #FFFFFF; } [data-theme="dark"] .profile-alert-success { background: rgba(34,197,94,0.2); } [data-theme="dark"] .profile-alert-error { background: rgba(239,68,68,0.2); } [data-theme="dark"] .profile-info-box { background: rgba(141,117,230,0.15); } [data-theme="dark"] .account-info-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .account-info-value { color: #FFFFFF; } [data-theme="dark"] .language-description { color: rgba(255,255,255,0.7); } /* ---- SUBSCRIPTION ---- */ [data-theme="dark"] .subscription-row { border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .subscription-row-title, [data-theme="dark"] .subscription-row-value, [data-theme="dark"] .subscription-price { color: #FFFFFF; } [data-theme="dark"] .subscription-row-subtitle { color: rgba(255,255,255,0.7); } [data-theme="dark"] .payment-history-list { background: rgba(141,117,230,0.15); } [data-theme="dark"] .payment-history-toggle { color: rgba(255,255,255,0.7); } [data-theme="dark"] .payment-history-date { color: rgba(255,255,255,0.7); } [data-theme="dark"] .payment-history-amount { color: #FFFFFF; } [data-theme="dark"] .payment-history-item:not(:last-child) { border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .cancel-subscription-link { color: rgba(255,255,255,0.7); } [data-theme="dark"] .cancel-subscription-link:hover { color: #FFFFFF; } /* ---- STATUS BADGES ---- */ [data-theme="dark"] .subscription-badge.active, [data-theme="dark"] .payment-history-status.paid { background: rgba(34,197,94,0.2); } [data-theme="dark"] .subscription-badge.cancelled, [data-theme="dark"] .payment-history-status.pending { background: rgba(245,158,11,0.2); } [data-theme="dark"] .subscription-badge.expired, [data-theme="dark"] .payment-history-status.failed { background: rgba(239,68,68,0.2); } /* ---- PLAYER HISTORY ---- */ [data-theme="dark"] .player-history-toggle { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); } [data-theme="dark"] .player-history-toggle:hover { background: rgba(255,255,255,0.1); } [data-theme="dark"] .player-stats-row { border-bottom-color: rgba(255,255,255,0.05); } [data-theme="dark"] .player-stats-row-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .player-stats-row-value { color: #FFFFFF; } /* ---- GAME HISTORY ---- */ [data-theme="dark"] .game-history-card { background: #1A2240; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .game-history-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } [data-theme="dark"] .game-history-title { color: #FFFFFF; } [data-theme="dark"] .game-history-date { color: rgba(255,255,255,0.7); } [data-theme="dark"] .game-stat-box { background: rgba(255,255,255,0.05); } [data-theme="dark"] .game-stat-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .game-stat-value { color: #FFFFFF; } [data-theme="dark"] .game-progress-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .game-progress-percent { color: #FFFFFF; } [data-theme="dark"] .game-score-badge { background: rgba(141,117,230,0.15); } [data-theme="dark"] .game-history-empty { color: rgba(255,255,255,0.7); } [data-theme="dark"] .game-history-empty h3 { color: #FFFFFF; } /* ---- PROFILE CARD ICONS ---- */ [data-theme="dark"] .profile-card-icon { background: rgba(141,117,230,0.15); } /* ---- PROGRESS BAR ---- */ [data-theme="dark"] .game-progress-bar { background: rgba(255,255,255,0.1); } /* ---- GAME INFO / QUIZSET ---- */ [data-theme="dark"] .game-header-title, [data-theme="dark"] .game-title, [data-theme="dark"] .game-info { color: #FFFFFF; } [data-theme="dark"] .game-header-meta { color: rgba(255,255,255,0.7); } [data-theme="dark"] .game-meta-divider { color: rgba(255,255,255,0.4); } [data-theme="dark"] .game-pill { color: rgba(255,255,255,0.7); } [data-theme="dark"] .question-card-number { color: rgba(255,255,255,0.7); } [data-theme="dark"] .question-card-question, [data-theme="dark"] .question-card-answer { color: #FFFFFF; } [data-theme="dark"] .question-count-box:hover { border-color: rgba(141,117,230,0.4); background: rgba(141,117,230,0.1); } [data-theme="dark"] .game-topic-circle { background: rgba(141,117,230,0.15); } /* ---- HOME CARD COLOR FLIP (dark=darker card, lighter button) ---- */ .home-card { --card-bg: var(--card-light); --card-btn: var(--card-dark); } [data-theme="dark"] .home-card { --card-bg: var(--card-dark); --card-btn: var(--card-light); } /* ---- TOPICS ---- */ [data-theme="dark"] .topic-card-title { color: #FFFFFF; } [data-theme="dark"] .topic-card-description { color: rgba(255,255,255,0.7); } [data-theme="dark"] .topics-count-label, [data-theme="dark"] .popular-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .popular-topic-pill { color: #FFFFFF; border-color: rgba(141,117,230,0.4); } [data-theme="dark"] .popular-topic-pill:hover { border-color: #8D75E6; color: #8D75E6; } /* ---- CATEGORIES ---- */ [data-theme="dark"] .category-pill:not(.selected) { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); } [data-theme="dark"] .category-pill:not(.selected):hover { background: rgba(255,255,255,0.1); color: #FFFFFF; } /* ---- FAQ / SUPPORT ---- */ [data-theme="dark"] .faq-category-title, [data-theme="dark"] .faq-question { color: #FFFFFF; } [data-theme="dark"] .faq-answer { color: rgba(255,255,255,0.7); } [data-theme="dark"] .faq-item { border-bottom-color: rgba(255,255,255,0.1); } /* ---- ABOUT ---- */ [data-theme="dark"] .about-hero-title, [data-theme="dark"] .about-timeline-heading { color: #FFFFFF; } [data-theme="dark"] .about-hero-subtitle, [data-theme="dark"] .about-timeline-subtitle { color: rgba(255,255,255,0.7); } /* ---- EMPTY STATES ---- */ [data-theme="dark"] .new-empty { color: rgba(255,255,255,0.7); } [data-theme="dark"] .empty-title { color: #FFFFFF; } [data-theme="dark"] .empty-description { color: rgba(255,255,255,0.7); } /* ---- BREADCRUMBS ---- */ [data-theme="dark"] .breadcrumb-link { color: rgba(255,255,255,0.7); } /* ---- MOBILE MENU ---- */ [data-theme="dark"] .mobile-menu-logo { color: #FFFFFF; } [data-theme="dark"] .mobile-nav-link { color: #FFFFFF; } [data-theme="dark"] .mobile-user-name { color: #FFFFFF; } [data-theme="dark"] .mobile-user-info { color: rgba(255,255,255,0.7); } /* ---- UNIFIED ACTION MENU ---- */ [data-theme="dark"] .unified-action-menu .unified-menu-dropdown { background: #1A2240; box-shadow: 0 4px 16px rgba(0,0,0,0.4); } [data-theme="dark"] .unified-menu-item { color: #FFFFFF; } [data-theme="dark"] .unified-menu-divider { background: rgba(255,255,255,0.1); } [data-theme="dark"] .unified-menu-item.unified-menu-locked, [data-theme="dark"] .unified-menu-item.unified-menu-locked:hover { color: rgba(255,255,255,0.4); } [data-theme="dark"] .unified-lock-tip { background: #0F1629; color: rgba(255,255,255,0.85); box-shadow: 0 4px 12px rgba(0,0,0,0.5); } /* Header split create dropdown: the connected purple accordion carries its own colors and works on both themes — no dark override needed. */ [data-theme="dark"] .unified-menu-dots svg, [data-theme="dark"] .unified-menu-dots svg circle { color: rgba(255,255,255,0.3); fill: rgba(255,255,255,0.3); } [data-theme="dark"] .unified-menu-dots:hover svg, [data-theme="dark"] .unified-menu-dots:hover svg circle { color: rgba(255,255,255,0.7); fill: rgba(255,255,255,0.7); } [data-theme="dark"] .unified-menu-split { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); } [data-theme="dark"] .unified-split-primary, [data-theme="dark"] .unified-split-toggle { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.25); color: #22c55e; } [data-theme="dark"] .unified-split-primary:hover, [data-theme="dark"] .unified-split-toggle:hover { background: rgba(34,197,94,0.30); } [data-theme="dark"] .split-action-primary { background: rgba(141,117,230,0.15); } [data-theme="dark"] .split-action-toggle { background: rgba(141,117,230,0.15); border-color: rgba(141,117,230,0.2); } /* ---- MOTION DETECTION (Profile page) ---- */ [data-theme="dark"] .motion-detect-card { border-color: rgba(141,117,230,0.2); background: rgba(141,117,230,0.05); } [data-theme="dark"] .motion-detect-icon { background-color: rgba(91,127,230,0.15); } [data-theme="dark"] .motion-detect-info-box { background: rgba(91,127,230,0.15); } [data-theme="dark"] .motion-status-row { background: #1A2240; border-color: rgba(141,117,230,0.2); } [data-theme="dark"] .motion-status-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .motion-status-value { color: #FFFFFF; } [data-theme="dark"] .motion-status-badge.granted { background: rgba(34,197,94,0.2); color: #6ee7b7; } [data-theme="dark"] .motion-status-badge.denied { background: rgba(239,68,68,0.2); color: #fca5a5; } [data-theme="dark"] .motion-status-badge.pending { background: rgba(245,158,11,0.2); color: #fcd34d; } [data-theme="dark"] .motion-status-badge.unavailable { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); } [data-theme="dark"] .motion-live-panel { border-color: rgba(141,117,230,0.2); } [data-theme="dark"] .motion-live-header { background: rgba(91,127,230,0.15); color: rgba(255,255,255,0.9); } [data-theme="dark"] .motion-live-stat { border-right-color: rgba(255,255,255,0.1); } [data-theme="dark"] .motion-live-stat-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .motion-live-stat-value { color: #FFFFFF; } [data-theme="dark"] .motion-grant-hint { color: rgba(255,255,255,0.7); } /* ---- TIME SLOTS ---- */ [data-theme="dark"] .time-slot-icon { background: rgba(141,117,230,0.15); } [data-theme="dark"] .time-slot-card { border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .time-slot-name { color: #FFFFFF; } [data-theme="dark"] .time-slot-time { color: rgba(255,255,255,0.6); } [data-theme="dark"] .time-slot-categories-label { color: rgba(255,255,255,0.7); } /* ---- PROFILE INFO BOX ---- */ [data-theme="dark"] .profile-info-box { color: rgba(255,255,255,0.7); } [data-theme="dark"] .profile-info-box strong { color: #FFFFFF; } /* ---- HFP STATUS ROWS ---- */ [data-theme="dark"] .hfp-status-row { border-bottom-color: rgba(255,255,255,0.08); } [data-theme="dark"] .hfp-status-label { color: #FFFFFF; } [data-theme="dark"] .hfp-date-pill { background: rgba(141,117,230,0.15); color: rgba(255,255,255,0.7); } [data-theme="dark"] .hfp-date-pill.has-date { background: rgba(34,197,94,0.2); color: #6ee7b7; } [data-theme="dark"] .motion-status-badge.checking { background: rgba(141,117,230,0.15); color: #c4b5fd; } /* ---- NEWS BRIEF CARD (profile) ---- No card-level override: .profile-card's dark style applies, so the card matches the other profile sections (the purple border read as a different section). */ [data-theme="dark"] .newsquiz-icon, [data-theme="dark"] .newsquiz-slot-icon { background-color: rgba(141,117,230,0.15) !important; } [data-theme="dark"] .newsquiz-desc { color: rgba(255,255,255,0.7); } [data-theme="dark"] .newsquiz-attribution { color: rgba(255,255,255,0.5); } [data-theme="dark"] .newsquiz-current { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .newsquiz-topic { color: rgba(255,255,255,0.9); } /* .newsquiz-slot-card inherits the dark .time-slot-card border */ [data-theme="dark"] .newsquiz-toggle-slider { background-color: rgba(255,255,255,0.15); } /* ---- SHADOWS (global overrides) ---- */ [data-theme="dark"] .new-dropdown-menu, [data-theme="dark"] .new-user-menu, [data-theme="dark"] .explore-menu-dropdown { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } /* ---- THEME TOGGLE (styled to match .new-user-circle) ---- */ .theme-toggle { background: #ECE2F7; border: none; cursor: pointer; padding: 0; width: 40px; height: 40px; color: #7F69CE; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s, color 0.2s; } .theme-toggle:hover { background: #E0D4F0; } .theme-toggle svg { width: 20px; height: 20px; } /* Sun icon (shown in dark mode) */ .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle { background: rgba(141,117,230,0.15); color: rgba(255,255,255,0.7); } [data-theme="dark"] .theme-toggle:hover { background: rgba(141,117,230,0.25); color: #FFFFFF; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---- ORDER INPUT ---- */ [data-theme="dark"] .new-order-input { background: rgba(141,117,230,0.15); } /* ---- NEW ANSWER BORDERS ---- */ [data-theme="dark"] .new-answer:nth-child(1), [data-theme="dark"] .new-answer:nth-child(2), [data-theme="dark"] .new-answer:nth-child(3) { border-left-color: rgba(255,255,255,0.1); } /* ---- MOBILE MENU DRAWER ---- */ [data-theme="dark"] .mobile-menu-drawer { background: #1A2240; } [data-theme="dark"] .mobile-menu-overlay { background: rgba(0,0,0,0.7); } [data-theme="dark"] .mobile-user-links a { color: rgba(255,255,255,0.7); } [data-theme="dark"] .mobile-user-links a:hover { color: #FFFFFF; } /* ---- LOGIN PAGE ---- */ [data-theme="dark"] .login-content-section { background: #0F1629; } [data-theme="dark"] .login-page-title { color: #FFFFFF; } [data-theme="dark"] .login-page-description { color: rgba(255,255,255,0.7); } [data-theme="dark"] .invite-box { background: #1A2240; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .invite-input-group { background: #1A2240; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .invite-input-group input { color: #FFFFFF; } [data-theme="dark"] .lock-badge { color: rgba(255,255,255,0.7); } /* ---- GAME STATS DRAWER ---- */ [data-theme="dark"] .sd-drawer { background: #1A2240; } [data-theme="dark"] .sd-header { background: #1A2240; border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-title { color: #FFFFFF; } [data-theme="dark"] .sd-subtitle { color: rgba(255,255,255,0.7); } [data-theme="dark"] .sd-metric-card, [data-theme="dark"] .sd-pm-card, [data-theme="dark"] .sd-insights-card, [data-theme="dark"] .sd-chart-container, [data-theme="dark"] .sd-action-btn { background: #0F1629; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-action-btn:hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] .sd-metric-label, [data-theme="dark"] .sd-pm-desc, [data-theme="dark"] .sd-insight-label, [data-theme="dark"] .sd-chart-range, [data-theme="dark"] .sd-chart-bar-lbl, [data-theme="dark"] .sd-progress-label, [data-theme="dark"] .sd-legend-label, [data-theme="dark"] .sd-icon-btn { color: rgba(255,255,255,0.7); } [data-theme="dark"] .sd-metric-value, [data-theme="dark"] .sd-pm-name, [data-theme="dark"] .sd-pm-count, [data-theme="dark"] .sd-insight-value, [data-theme="dark"] .sd-chart-bar-val { color: #FFFFFF; } [data-theme="dark"] .sd-toggle-group { background: rgba(255,255,255,0.05); } [data-theme="dark"] .sd-toggle { color: rgba(255,255,255,0.7); } [data-theme="dark"] .sd-toggle:not(.active):hover { color: #FFFFFF; } [data-theme="dark"] .sd-date-picker { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-date-picker input { background: #1A2240; color: #FFFFFF; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-metric-icon.purple, [data-theme="dark"] .sd-pm-icon.emerald, [data-theme="dark"] .sd-pm-icon.violet, [data-theme="dark"] .sd-pm-icon.blue, [data-theme="dark"] .sd-pm-icon.purple { background: rgba(141,117,230,0.15); } [data-theme="dark"] .sd-info-banner { background: rgba(141,117,230,0.1); border-color: rgba(141,117,230,0.2); } [data-theme="dark"] .sd-info-icon { background: rgba(141,117,230,0.2); border-color: rgba(141,117,230,0.3); } [data-theme="dark"] .sd-info-content h4 { color: #FFFFFF; } [data-theme="dark"] .sd-info-content p { color: rgba(255,255,255,0.7); } [data-theme="dark"] .sd-progress { background: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-insight-row { border-bottom-color: rgba(255,255,255,0.05); } [data-theme="dark"] .sd-chart-legend { border-top-color: rgba(255,255,255,0.05); } [data-theme="dark"] .sd-icon-btn:hover { color: #FFFFFF; background: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-footer { background: #0F1629; border-top-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-error-title { color: #FFFFFF; } [data-theme="dark"] .sd-error-msg { color: rgba(255,255,255,0.7); } /* ---- Zero state overrides ---- */ [data-theme="dark"] .sd-zero-state .sd-metric-value, [data-theme="dark"] .sd-zero-state .sd-pm-count, [data-theme="dark"] .sd-zero-state .sd-insight-value, [data-theme="dark"] .sd-zero-state .sd-chart-bar-val { color: rgba(255,255,255,0.4); } [data-theme="dark"] .sd-zero-state .sd-chart-bar { background: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-zero-state .sd-legend-dot { background: rgba(255,255,255,0.2); } /* ---- FILTER BAR CHECKBOXES ---- */ [data-theme="dark"] .filter-multi-select .checkbox-visual { border-color: rgba(255,255,255,0.3); } [data-theme="dark"] .filter-multi-select input:checked + .checkbox-visual { background-color: #8D75E6; border-color: #8D75E6; } /* ---- TOPIC CARDS ---- */ [data-theme="dark"] .topic-card { background: #1A2240; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .topic-card-games { color: rgba(255,255,255,0.7); } [data-theme="dark"] .topic-card-games svg { color: rgba(255,255,255,0.5); } [data-theme="dark"] .topic-card-games img { filter: invert(1); } /* ---- EXPLORE GAME LIST ROWS ---- */ [data-theme="dark"] .game-card { background: #1A2240; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .game-meta { color: rgba(255,255,255,0.5); } [data-theme="dark"] .game-pill-category { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); } [data-theme="dark"] .game-pill-category:hover { background-color: rgba(255,255,255,0.12); } [data-theme="dark"] .game-pill-topic { background-color: rgba(141,117,230,0.15); color: #8D75E6; } [data-theme="dark"] .game-pill-topic:hover { background-color: rgba(141,117,230,0.25); } [data-theme="dark"] .game-details-btn { color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); } [data-theme="dark"] .game-details-btn:hover { color: #8D75E6; } [data-theme="dark"] .game-card-expanded { background: #0F1629; border-top-color: rgba(255,255,255,0.1); } [data-theme="dark"] .game-mobile-details-btn { color: rgba(255,255,255,0.5); } /* ---- SECONDARY FILTER SIDEBAR (explore) ---- */ [data-theme="dark"] .sf-card { background: #1A2240; border-color: rgba(255,255,255,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } [data-theme="dark"] .sf-card-header { border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sf-card-icon { background: rgba(141,117,230,0.15); } [data-theme="dark"] .sf-card-title { color: #FFFFFF; } [data-theme="dark"] .sf-category-item { color: rgba(255,255,255,0.7); } [data-theme="dark"] .sf-category-count { color: rgba(255,255,255,0.4); } [data-theme="dark"] .sf-topics-section { border-top-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sf-topics-header { color: rgba(255,255,255,0.5); } [data-theme="dark"] .sf-topic-pill { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.15); } [data-theme="dark"] .sf-topic-pill:hover { color: #8D75E6; border-color: #8D75E6; } [data-theme="dark"] .sf-topic-pill.sf-topic-selected { color: #8D75E6; border-color: #8D75E6; } /* ---- HOME PAGE INLINE STYLE OVERRIDES ---- */ /* These need !important to override inline styles */ [data-theme="dark"] .home-section-title { color: #FFFFFF !important; } [data-theme="dark"] .home-section-desc { color: rgba(255,255,255,0.7) !important; } [data-theme="dark"] .home-view-all { color: #FFFFFF !important; } /* ---- FORM INPUTS (invite drawer, login, etc.) ---- */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select { background: #0F1629; color: #FFFFFF; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .form-input::placeholder { color: rgba(255,255,255,0.4); } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus { background: #0F1629; border-color: #8D75E6; box-shadow: 0 0 0 2px rgba(141,117,230,0.2); } /* iOS/Safari credential autofill paints inputs light regardless of theme (login drawer after an auth_check redirect). Same inset-shadow override login.cfm uses for .invite-input. */ [data-theme="dark"] .form-input:-webkit-autofill, [data-theme="dark"] .form-input:-webkit-autofill:hover, [data-theme="dark"] .form-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #0F1629 inset !important; box-shadow: 0 0 0 30px #0F1629 inset !important; -webkit-text-fill-color: #FFFFFF !important; caret-color: #FFFFFF; } [data-theme="dark"] .form-label { color: #FFFFFF; } [data-theme="dark"] .form-group label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .form-group input { background: #0F1629; color: #FFFFFF; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .form-group input:focus { border-color: #8D75E6; box-shadow: 0 0 0 3px rgba(141,117,230,0.15); } [data-theme="dark"] .form-group small { color: rgba(255,255,255,0.5); } [data-theme="dark"] .drawer-header h3 { color: #FFFFFF; } [data-theme="dark"] .drawer-close { color: rgba(255,255,255,0.5); } [data-theme="dark"] .drawer-close:hover { color: #FFFFFF; } [data-theme="dark"] .drawer-body { background: #1A2240; } [data-theme="dark"] .auth-form .form-label-id { color: rgba(255,255,255,0.5); } /* ---- EXPLORE HERO STAT NUMBERS ---- */ [data-theme="dark"] .topics-count-number { color: #FFFFFF; } [data-theme="dark"] .topics-count-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .topics-header-count { color: rgba(255,255,255,0.7); } /* ---- GAME MODAL (initial state / phone entry) ---- */ [data-theme="dark"] .gm-modal-box { background: #1A2240; box-shadow: 0 24px 48px rgba(0,0,0,0.5); } [data-theme="dark"] .gm-modal-title { color: #FFFFFF; } [data-theme="dark"] .gm-modal-sub { color: rgba(255,255,255,0.7); } [data-theme="dark"] .gm-modal-x { color: rgba(255,255,255,0.5); } [data-theme="dark"] .gm-modal-x:hover { color: #FFFFFF; } [data-theme="dark"] .gm-step-label { color: #FFFFFF; } [data-theme="dark"] .gm-step-text { color: rgba(255,255,255,0.6); } [data-theme="dark"] .gm-phone-wrapper { background: #0F1629; border-color: rgba(255,255,255,0.15); } [data-theme="dark"] .gm-phone-wrapper:focus-within { border-color: #8D75E6; } [data-theme="dark"] .gm-phone-input { color: #FFFFFF; } [data-theme="dark"] .gm-phone-input::placeholder { color: rgba(255,255,255,0.4); } [data-theme="dark"] .gm-phone-input[readonly] { background: rgba(255,255,255,0.05); } [data-theme="dark"] .gm-phone-message { color: rgba(255,255,255,0.6); } [data-theme="dark"] .gm-share-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .gm-modal-footer { color: rgba(255,255,255,0.5); } [data-theme="dark"] .gm-modal-footer a { color: #8D75E6; } /* Dropdown menu in game modal (Play Online, Scan QR buttons) */ [data-theme="dark"] .gm-dropdown-menu { background: transparent; } [data-theme="dark"] .gm-dropdown-btn { background: color-mix(in srgb, var(--gm-color) 15%, #1A2240); color: var(--gm-color); } [data-theme="dark"] .gm-dropdown-btn:hover { background: color-mix(in srgb, var(--gm-color) 25%, #1A2240); } /* Calling state */ [data-theme="dark"] .gm-state-body { color: #FFFFFF; } [data-theme="dark"] .gm-spinner { border-color: rgba(255,255,255,0.2); border-top-color: #8D75E6; } [data-theme="dark"] .gm-calling-text, [data-theme="dark"] .gm-calling-sub { color: rgba(255,255,255,0.7); } [data-theme="dark"] .gm-success-icon { color: #22c55e; } /* ---- SEARCH BAR option text ---- */ [data-theme="dark"] .new-search-type option, [data-theme="dark"] .explore-search-type option { background: #1A2240; color: #FFFFFF; } /* ---- NEWS WIDGET BANNER (home page) ---- */ [data-theme="dark"] .newsquiz-banner { background: #1A2240; border-color: rgba(141,117,230,0.2); } [data-theme="dark"] .newsquiz-badge { background-color: rgba(141,117,230,0.15); } [data-theme="dark"] .newsquiz-title { color: #FFFFFF; } [data-theme="dark"] .newsquiz-date { color: rgba(255,255,255,0.5); } [data-theme="dark"] .newsquiz-description { color: rgba(255,255,255,0.7); } [data-theme="dark"] .newsquiz-topic-tag { background-color: rgba(141,117,230,0.15); color: rgba(255,255,255,0.7); } [data-theme="dark"] .newsquiz-outer-box { background-color: rgba(255,255,255,0.05); } [data-theme="dark"] .newsquiz-inner-box { background-color: rgba(255,255,255,0.05); } [data-theme="dark"] .newsquiz-inner-box > p { color: rgba(255,255,255,0.7); } [data-theme="dark"] .newsquiz-inner-box label { color: #FFFFFF; } [data-theme="dark"] .newsquiz-sub-header h3 { color: #FFFFFF; } [data-theme="dark"] .newsquiz-sub-header p { color: rgba(255,255,255,0.7); } [data-theme="dark"] .newsquiz-time-option { background-color: #0F1629; border-color: rgba(141,117,230,0.2); } [data-theme="dark"] .newsquiz-time-option h4 { color: #8D75E6; } [data-theme="dark"] .newsquiz-time-option p { color: rgba(255,255,255,0.6); } [data-theme="dark"] .newsquiz-login-prompt { color: rgba(255,255,255,0.7); } /* News drawer (nqd) — nav buttons & lang menu */ [data-theme="dark"] .nqd-nav-btn:not(:disabled) { background: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .nqd-nav-btn:not(:disabled):hover { background: rgba(255,255,255,0.2); } [data-theme="dark"] .nqd-lang-menu { background: #1A2240; box-shadow: 0 4px 16px rgba(0,0,0,0.4); } [data-theme="dark"] .nqd-lang-opt { color: rgba(255,255,255,0.7); } [data-theme="dark"] .nqd-lang-opt:hover { color: #8D75E6; } /* ---- QUESTION COUNT BOXES (create game drawer) ---- */ [data-theme="dark"] .question-count-box { background: #0F1629; border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); } [data-theme="dark"] .question-count-box:hover { background: rgba(141,117,230,0.1); border-color: rgba(141,117,230,0.4); } [data-theme="dark"] .question-count-number { color: rgba(255,255,255,0.7); } [data-theme="dark"] .question-count-box:hover .question-count-number { color: #8D75E6; } [data-theme="dark"] .question-count-box.active { background: #8D75E6; border-color: #8D75E6; } [data-theme="dark"] .question-count-box.active .question-count-number { color: #FFFFFF; } /* ---- SECONDARY BUTTONS (Cancel, etc.) ---- */ [data-theme="dark"] .btn-secondary { background: #0F1629; color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .btn-secondary:hover { background: rgba(141,117,230,0.1); border-color: rgba(141,117,230,0.3); color: #FFFFFF; } /* ---- AUTH FORM SPECIFIC (login drawer) ---- */ [data-theme="dark"] .auth-drawer-subtitle { color: rgba(255,255,255,0.6); } [data-theme="dark"] .auth-form .form-input { background: #0F1629; border-color: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .auth-form .form-label { color: rgba(255,255,255,0.7); } [data-theme="dark"] .auth-error-message { background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.3); color: #fca5a5; } [data-theme="dark"] .auth-success-message { background: rgba(22,163,74,0.15); border-color: rgba(22,163,74,0.3); color: #86efac; } /* ---- DRAWER ACTIONS BAR (bottom sticky) ---- */ [data-theme="dark"] .drawer-actions-wrap { background-color: #1A2240; border-top: 1px solid rgba(255,255,255,0.1); } [data-theme="dark"] .drawer-form-title { color: #FFFFFF; } [data-theme="dark"] .drawer-form-subtitle { color: rgba(255,255,255,0.6); } [data-theme="dark"] .btn-ghost { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.15); background: transparent; } [data-theme="dark"] .btn-ghost:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.3); } /* ---- WIDGET FORM FIELDS ---- */ [data-theme="dark"] .widget-number-btn { background: #0F1629; border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); } [data-theme="dark"] .widget-number-btn:hover:not(.active):not(:disabled) { border-color: rgba(141,117,230,0.4); background: rgba(141,117,230,0.1); } [data-theme="dark"] .widget-number-btn.active { background: rgba(141,117,230,0.15); border-color: #8D75E6; color: #8D75E6; } [data-theme="dark"] .widget-checkbox { color: #FFFFFF; } [data-theme="dark"] .widget-color-label { color: rgba(255,255,255,0.6); } [data-theme="dark"] .widget-color-inputs input[type="color"] { border-color: rgba(255,255,255,0.1); background: #0F1629; } [data-theme="dark"] .widget-color-hex { background: #0F1629; color: #FFFFFF; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .widget-color-hex:focus { border-color: #8D75E6; box-shadow: 0 0 0 2px rgba(141,117,230,0.2); } [data-theme="dark"] .widget-embed-code { background: #0F1629; color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .widget-embed-code:focus { border-color: #8D75E6; box-shadow: 0 0 0 2px rgba(141,117,230,0.2); } [data-theme="dark"] .widget-copy-btn, [data-theme="dark"] .widget-preview-btn { background: #0F1629; border-color: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .widget-copy-btn:hover, [data-theme="dark"] .widget-preview-btn:hover { background: rgba(141,117,230,0.1); border-color: #8D75E6; } [data-theme="dark"] .widget-copy-btn.success { background: rgba(22,163,74,0.15); border-color: rgba(22,163,74,0.3); color: #86efac; } /* ---- WIDGET PREVIEW ---- */ [data-theme="dark"] .widget-preview-heading { color: #FFFFFF; } [data-theme="dark"] .widget-preview-description { color: rgba(255,255,255,0.6); } [data-theme="dark"] .widget-preview-frame { background: #1A2240; border-color: rgba(255,255,255,0.1); } /* ---- FILTER DROPDOWN POPOVER ---- */ [data-theme="dark"] .new-filter-dropdown-menu { background: #1A2240; border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.4); } [data-theme="dark"] .new-filter-dropdown-header { color: #FFFFFF; border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .new-filter-dropdown-search { border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .new-filter-dropdown-search input { background: transparent; color: #FFFFFF; border: none; } [data-theme="dark"] .new-filter-dropdown-search input::placeholder { color: rgba(255,255,255,0.4); } [data-theme="dark"] .new-filter-dropdown-item { color: rgba(255,255,255,0.8); } [data-theme="dark"] .new-filter-dropdown-item:hover { color: #8D75E6; background: rgba(141,117,230,0.05); } [data-theme="dark"] .new-filter-dropdown-item input[type="radio"]:checked + span, [data-theme="dark"] .new-filter-dropdown-item input[type="checkbox"]:checked + span { color: #8D75E6; } /* ---- GAME STATS DRAWER (sd-*) ---- */ [data-theme="dark"] .sd-drawer { background: #1A2240; } [data-theme="dark"] .sd-header { background: #1A2240; border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-close-btn { color: rgba(255,255,255,0.5); } [data-theme="dark"] .sd-close-btn:hover { color: #FFFFFF; } [data-theme="dark"] .sd-title { color: #FFFFFF; } [data-theme="dark"] .sd-description { color: rgba(255,255,255,0.6); } [data-theme="dark"] .sd-section-title { color: #FFFFFF; } [data-theme="dark"] .sd-loading { color: rgba(255,255,255,0.6); } [data-theme="dark"] .sd-spinner { border-color: rgba(255,255,255,0.15); border-top-color: #8D75E6; } [data-theme="dark"] .sd-toggle-group { background: #0F1629; } [data-theme="dark"] .sd-toggle { color: rgba(255,255,255,0.6); } [data-theme="dark"] .sd-toggle.active { background: #8D75E6; color: #FFFFFF; } [data-theme="dark"] .sd-action-btn { background: #0F1629; color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-action-btn:hover { background: rgba(141,117,230,0.1); border-color: rgba(141,117,230,0.3); } [data-theme="dark"] .sd-icon-btn { color: rgba(255,255,255,0.5); } [data-theme="dark"] .sd-date-picker input { background: #0F1629; border-color: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .sd-metric-card { background: #0F1629; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-metric-icon.purple, [data-theme="dark"] .sd-metric-icon.blue, [data-theme="dark"] .sd-metric-icon.emerald, [data-theme="dark"] .sd-metric-icon.violet { background: rgba(141,117,230,0.15); } [data-theme="dark"] .sd-metric-label { color: rgba(255,255,255,0.5); } [data-theme="dark"] .sd-metric-value { color: #FFFFFF; } [data-theme="dark"] .sd-info-banner { background: rgba(141,117,230,0.1); border-color: rgba(141,117,230,0.2); } [data-theme="dark"] .sd-info-banner, [data-theme="dark"] .sd-info-banner * { color: rgba(255,255,255,0.7); } [data-theme="dark"] .sd-pm-card { background: #0F1629; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-pm-icon.emerald, [data-theme="dark"] .sd-pm-icon.violet, [data-theme="dark"] .sd-pm-icon.blue, [data-theme="dark"] .sd-pm-icon.purple { background: rgba(141,117,230,0.15); } [data-theme="dark"] .sd-pm-count { color: #FFFFFF; } [data-theme="dark"] .sd-insights-card { background: #0F1629; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-insight-row { border-bottom-color: rgba(255,255,255,0.05); } [data-theme="dark"] .sd-chart-container { background: #0F1629; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sd-footer { background: #1A2240; border-top-color: rgba(255,255,255,0.1); } /* ---- CRON DASHBOARD (cjd-*) ---- */ [data-theme="dark"] .cjd-card { background: #1A2240; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .cjd-card-name { color: #FFFFFF; } [data-theme="dark"] .cjd-stat-label { color: rgba(255,255,255,0.5); } [data-theme="dark"] .cjd-stat-value { color: #FFFFFF; } [data-theme="dark"] .cjd-card-meta { color: rgba(255,255,255,0.4); border-top-color: rgba(255,255,255,0.05); } [data-theme="dark"] .cjd-table-wrap { background: #1A2240; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .cjd-table th { color: rgba(255,255,255,0.5); } [data-theme="dark"] .cjd-table td { color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.05); } [data-theme="dark"] .cjd-tag { background: rgba(141,117,230,0.15); color: #8D75E6; } [data-theme="dark"] .cjd-tabs { border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .cjd-section-title { color: #FFFFFF; } [data-theme="dark"] .cjd-tab { background: transparent; color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .cjd-tab:hover { border-color: rgba(141,117,230,0.4); color: #8D75E6; } [data-theme="dark"] .cjd-tab.active { background: #8D75E6; color: #FFFFFF; border-color: #8D75E6; } [data-theme="dark"] .cjd-refresh { background: transparent; color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .cjd-refresh:hover { color: #8D75E6; border-color: #8D75E6; } [data-theme="dark"] .cjd-empty { color: rgba(255,255,255,0.4); } [data-theme="dark"] .cjd-skeleton { background: linear-gradient(90deg, #1A2240 25%, #243052 50%, #1A2240 75%); background-size: 200% 100%; } [data-theme="dark"] .cjd-alert { background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.3); color: #fca5a5; } /* ---- TAXONOMY MANAGER (ta-*) ---- */ [data-theme="dark"] .ta-tabs { border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .ta-tab { color: rgba(255,255,255,0.5); } [data-theme="dark"] .ta-tab.active { color: #8D75E6; border-bottom-color: #8D75E6; } [data-theme="dark"] .ta-stat { background: #1A2240; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .ta-stat-lbl { color: rgba(255,255,255,0.5); } [data-theme="dark"] .ta-search input { background: #0F1629; border-color: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .ta-search input::placeholder { color: rgba(255,255,255,0.4); } [data-theme="dark"] .ta-filter-btn { background: #0F1629; color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .ta-filter-btn:hover { border-color: rgba(141,117,230,0.3); } [data-theme="dark"] .ta-filter-btn.active { background: #8D75E6; border-color: #8D75E6; color: #FFFFFF; } [data-theme="dark"] .ta-editable { color: rgba(255,255,255,0.8); } [data-theme="dark"] .ta-editable:hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] .ta-editable:focus { background: #0F1629; border-color: #8D75E6; color: #FFFFFF; } [data-theme="dark"] .ta-empty { color: #fca5a5; background: rgba(220,38,38,0.15); } [data-theme="dark"] .ta-color-swatch { border-color: rgba(255,255,255,0.15); } [data-theme="dark"] .ta-type-pill { color: #8D75E6; background: rgba(141,117,230,0.15); } [data-theme="dark"] .ta-lang-pill { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); } [data-theme="dark"] .ta-audio-no { color: rgba(255,255,255,0.3); } [data-theme="dark"] .ta-modal { background: #1A2240; } [data-theme="dark"] .ta-modal h3 { color: #FFFFFF; } /* ---- NEWS AGENT PIPELINE DASHBOARD (nad-*) ---- */ [data-theme="dark"] .nad-ctrl-label { color: rgba(255,255,255,0.5); } [data-theme="dark"] .nad-ctrl-select { background: #0F1629; border-color: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .nad-btn-secondary { background: #0F1629; color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .nad-btn-secondary:hover { background: rgba(141,117,230,0.1); color: #FFFFFF; border-color: rgba(141,117,230,0.3); } [data-theme="dark"] .nad-status-idle { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); } [data-theme="dark"] .nad-status-elapsed { color: rgba(255,255,255,0.4); } [data-theme="dark"] .nad-phase { background: #1A2240; border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .nad-phase.active { background: rgba(141,117,230,0.08); border-color: #8D75E6; } [data-theme="dark"] .nad-phase.done { border-color: rgba(22,163,74,0.3); } [data-theme="dark"] .nad-phase.error { border-color: rgba(220,38,38,0.3); background: rgba(220,38,38,0.06); } [data-theme="dark"] .nad-phase:not(.active):not(.done):not(.error) .nad-phase-icon { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); } [data-theme="dark"] .nad-phase-name { color: #FFFFFF; } [data-theme="dark"] .nad-phase-detail { color: rgba(255,255,255,0.4); } [data-theme="dark"] .nad-phase-time { color: rgba(255,255,255,0.4); } [data-theme="dark"] .nad-log { background: #1A2240; border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .nad-log-header { border-bottom-color: rgba(255,255,255,0.08); } [data-theme="dark"] .nad-log-header:hover { background: rgba(255,255,255,0.03); } [data-theme="dark"] .nad-log-title { color: rgba(255,255,255,0.5); } [data-theme="dark"] .nad-log-toggle { color: rgba(255,255,255,0.4); } [data-theme="dark"] .nad-log-line { color: rgba(255,255,255,0.6); } [data-theme="dark"] .nad-log-line .ts { color: rgba(255,255,255,0.3); } [data-theme="dark"] .nad-log-empty { color: rgba(255,255,255,0.3); } /* ---- LOCALE STRINGS DASHBOARD (la-*) ---- */ [data-theme="dark"] .la-stat { background: #1A2240; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .la-stat-lbl { color: rgba(255,255,255,0.5); } [data-theme="dark"] .la-search input { background: #0F1629; border-color: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .la-search input::placeholder { color: rgba(255,255,255,0.4); } [data-theme="dark"] .la-filter-btn { background: #0F1629; color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .la-filter-btn:hover { border-color: rgba(141,117,230,0.3); } [data-theme="dark"] .la-filter-btn.active { background: #8D75E6; border-color: #8D75E6; color: #FFFFFF; } [data-theme="dark"] .la-filter-missing { background: rgba(141,117,230,0.15); color: #8D75E6; } [data-theme="dark"] .la-btn-secondary { background: #0F1629; color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .la-group { background: #1A2240; border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .la-group-header { background: rgba(255,255,255,0.03); } [data-theme="dark"] .la-group-header:hover { background: rgba(141,117,230,0.08); } [data-theme="dark"] .la-group-chevron { color: rgba(255,255,255,0.4); } [data-theme="dark"] .la-group-name { color: #8D75E6; } [data-theme="dark"] .la-group-count { color: rgba(255,255,255,0.4); } [data-theme="dark"] .la-group-missing-badge { background: rgba(141,117,230,0.15); color: #8D75E6; } [data-theme="dark"] .la-stat-bar { background: rgba(255,255,255,0.08); } [data-theme="dark"] .la-table th { color: rgba(255,255,255,0.5); background: #1A2240; border-bottom-color: rgba(255,255,255,0.08); } [data-theme="dark"] .la-table td { color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.05); } [data-theme="dark"] .la-table tr:hover { background: rgba(141,117,230,0.05); } [data-theme="dark"] .la-val { color: rgba(255,255,255,0.8); } [data-theme="dark"] .la-val:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .la-val:focus { background: #0F1629; border-color: #8D75E6; color: #FFFFFF; } [data-theme="dark"] .la-modal { background: #1A2240; } [data-theme="dark"] .la-modal h3 { color: #FFFFFF; } [data-theme="dark"] .la-actions-dropdown { background: #1A2240; border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.4); } [data-theme="dark"] .la-actions-item { color: rgba(255,255,255,0.8); } [data-theme="dark"] .la-actions-item:hover { background: rgba(141,117,230,0.1); color: #FFFFFF; } [data-theme="dark"] .la-confirm { background: #1A2240; } [data-theme="dark"] .la-alert-success { background: rgba(22,163,74,0.15); border-color: rgba(22,163,74,0.3); color: #86efac; } /* ================================================================ BATCH DARK MODE POLISH — 15 items from PDF ================================================================ */ /* ---- 1. MOBILE MENU HAMBURGER ICON ---- */ [data-theme="dark"] .hamburger-menu-btn { background: rgba(141,117,230,0.15); color: rgba(255,255,255,0.7); } [data-theme="dark"] .hamburger-menu-btn:hover { background: rgba(141,117,230,0.25); color: #FFFFFF; } /* ---- 2. MY GAMES EXPANDED DETAILS ---- */ [data-theme="dark"] .game-expanded-label { color: rgba(255,255,255,0.4); } [data-theme="dark"] .game-expanded-value { color: rgba(255,255,255,0.8); } [data-theme="dark"] .game-mobile-details-btn { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); background: transparent; } [data-theme="dark"] .game-mobile-details-btn:hover { border-color: rgba(141,117,230,0.3); color: rgba(255,255,255,0.8); } /* ---- MY WIDGETS PAGE DARK MODE ---- */ [data-theme="dark"] .game-pill-auto { background: rgba(141,117,230,0.15); color: #8D75E6; } [data-theme="dark"] .game-pill-pending { background: rgba(217,119,6,0.15); color: #fbbf24; } [data-theme="dark"] .widget-source-link { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); } [data-theme="dark"] .widget-source-link:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); } [data-theme="dark"] .embed-code-box { background: #0F1629; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .embed-code-label { color: rgba(255,255,255,0.5); } [data-theme="dark"] .embed-copy-btn { color: #8D75E6; background: rgba(141,117,230,0.1); border-color: rgba(141,117,230,0.3); } [data-theme="dark"] .embed-code-snippet { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } /* ---- 3. MOBILE MENU HEADER UNDERLINE ---- */ [data-theme="dark"] .mobile-menu-header { border-bottom-color: rgba(255,255,255,0.1); } /* ---- 4. MOBILE MENU BOTTOM USER SECTION ---- */ [data-theme="dark"] .mobile-user-section { background: rgba(255,255,255,0.05); } [data-theme="dark"] .mobile-user-circle { background: rgba(141,117,230,0.2); color: #8D75E6; } [data-theme="dark"] .mobile-user-email { color: rgba(255,255,255,0.4); } [data-theme="dark"] .mobile-menu-close { color: rgba(255,255,255,0.7); } [data-theme="dark"] .mobile-menu-close:hover { color: #FFFFFF; } /* ---- 5. CREATE GAME PUBLIC/FEATURED TOGGLES ---- */ [data-theme="dark"] .setting-toggle-row { background: rgba(255,255,255,0.05); } [data-theme="dark"] .setting-toggle-icon.visibility-icon { background: rgba(141,117,230,0.2); } [data-theme="dark"] .setting-toggle-icon.featured-icon { background: rgba(245,158,11,0.15); } [data-theme="dark"] .setting-toggle-title { color: #FFFFFF; } [data-theme="dark"] .setting-toggle-subtitle { color: rgba(255,255,255,0.4); } [data-theme="dark"] .setting-toggle-slider { background-color: rgba(255,255,255,0.15); } /* ---- 6. CREATE GAME ANIMATION SCREEN ---- */ [data-theme="dark"] .drawer-state-screen { background: #1A2240; } [data-theme="dark"] .drawer-state-title { color: #FFFFFF; } [data-theme="dark"] .drawer-state-subtitle { color: rgba(255,255,255,0.6); } /* ---- 8. LOCALE ADMIN CATEGORY HEADER WHITE LINE ---- */ [data-theme="dark"] .la-group-header { background: rgba(255,255,255,0.03); border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .la-group { border-color: rgba(255,255,255,0.08); } /* ---- 9. MANAGE INVITES (approve_invite.cfm) ---- */ [data-theme="dark"] .stat-card { background: #1A2240; border-color: transparent; } [data-theme="dark"] .stat-card .label { color: rgba(255,255,255,0.5); } [data-theme="dark"] .stat-card .value { color: #FFFFFF; } [data-theme="dark"] .stat-card:hover { border-color: rgba(141,117,230,0.3); } [data-theme="dark"] .stat-card.active { border-color: #8D75E6; } [data-theme="dark"] .invite-card { background: #1A2240; } [data-theme="dark"] .invite-card-header { border-bottom-color: rgba(255,255,255,0.08); } [data-theme="dark"] .invite-card-header h3 { color: #FFFFFF; } [data-theme="dark"] .invite-card-body { color: rgba(255,255,255,0.8); } [data-theme="dark"] .info-item label { color: rgba(255,255,255,0.4); } [data-theme="dark"] .info-item span { color: rgba(255,255,255,0.8); } [data-theme="dark"] .code-display { background: rgba(141,117,230,0.1); color: #8D75E6; } [data-theme="dark"] .code-input-wrapper input[type="text"] { background: #0F1629; border-color: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .code-input-wrapper input[type="text"]:focus { border-color: #8D75E6; } [data-theme="dark"] .btn-danger { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .btn-danger:hover { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); } [data-theme="dark"] .btn-generate { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .btn-generate:hover { border-color: #8D75E6; color: #8D75E6; } [data-theme="dark"] .message-banner.success { background: rgba(22,163,74,0.15); color: #86efac; border-color: rgba(22,163,74,0.3); } [data-theme="dark"] .message-banner.error { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.3); } [data-theme="dark"] .message-banner.warning { background: rgba(245,158,11,0.15); color: #fcd34d; border-color: rgba(245,158,11,0.3); } /* ---- 10. FILTER DROPDOWN SEARCH INPUT BG ---- */ /* Fixed above: .new-filter-dropdown-search input and .filter-search-input changed from #0F1629 dark rectangle to transparent to match dropdown bg */ [data-theme="dark"] .new-filter-dropdown-search svg { color: rgba(255,255,255,0.4); } /* ---- 11. SECONDARY FILTER MENU ICONS ---- */ [data-theme="dark"] .sf-category-icon { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); opacity: 0.5; } [data-theme="dark"] .sf-category-item:hover .sf-category-icon, [data-theme="dark"] .sf-category-item.sf-selected .sf-category-icon { filter: brightness(0) saturate(100%) invert(52%) sepia(31%) saturate(1388%) hue-rotate(213deg) brightness(95%) contrast(88%); opacity: 1; } /* ---- 12. GAME MODAL ACTION BUTTONS ---- */ /* (Handled in game modal section above — gm-dropdown-btn, gm-dropdown-menu) */ /* ---- 13. SCAN QR VIEW IN GAME MODAL ---- */ [data-theme="dark"] .gm-qr-container { background: #FFFFFF; border-color: rgba(255,255,255,0.15); } [data-theme="dark"] .gm-qr-step p { color: rgba(255,255,255,0.7); } [data-theme="dark"] .gm-state-title { color: #FFFFFF; } [data-theme="dark"] .gm-state-sub { color: rgba(255,255,255,0.5); } [data-theme="dark"] .gm-back-btn { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.1); } [data-theme="dark"] .gm-back-btn:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; } /* ---- 14. GAME.CFM QUESTION CARDS ---- */ [data-theme="dark"] .question-card { background: #1A2240; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .question-card:hover { border-color: rgba(255,255,255,0.2); } [data-theme="dark"] .question-card-number { background: rgba(141,117,230,0.15); } [data-theme="dark"] .question-card-edit { color: rgba(255,255,255,0.4); } [data-theme="dark"] .question-card-edit:hover { color: #8D75E6; } [data-theme="dark"] .answer-option { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); } [data-theme="dark"] .answer-option-correct { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.25); } [data-theme="dark"] .answer-number { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.15); } [data-theme="dark"] .answer-text { color: rgba(255,255,255,0.8); } /* ---- 15. EDIT QUESTION DRAWER ---- */ [data-theme="dark"] .answer-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .answer-card:hover { border-color: rgba(255,255,255,0.2); } [data-theme="dark"] .answer-card-active { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.25); } [data-theme="dark"] .answer-card-active:hover { border-color: rgba(74,222,128,0.4); } [data-theme="dark"] .answer-input { background: #0F1629; border-color: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .answer-input:focus { background: #0F1629; border-color: #8D75E6; box-shadow: 0 0 0 3px rgba(141,117,230,0.15); } [data-theme="dark"] .answer-card-active .answer-input { background: #0F1629; border-color: rgba(255,255,255,0.15); } [data-theme="dark"] .answer-card-active .answer-input:focus { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.15); } [data-theme="dark"] .answer-checkmark { background: rgba(255,255,255,0.15); } [data-theme="dark"] textarea.question-textarea { background: #0F1629; border-color: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] textarea.question-textarea:focus { background: #0F1629; border-color: #8D75E6; } /* ---- Audio player (question card + ad preview): clean SOLID dark pill, not the light lavender / translucent look. Global so every instance (game.cfm, quizset_items, quiz_questions, ad_preview) matches. ---- */ [data-theme="dark"] .audio-waveform { background: #0F1629; border-color: rgba(255,255,255,0.12); } [data-theme="dark"] .audio-progress { background: rgba(141,117,230,0.30); } [data-theme="dark"] .audio-play-btn { background: #8D75E6; } [data-theme="dark"] .audio-play-btn:hover { background: #9d88ef; } [data-theme="dark"] .audio-time { color: rgba(255,255,255,0.75); } /* Readonly / disabled form controls (e.g. auto-populated widget title, derived Topic/Category selects) — keep them dark, not light-grey. */ [data-theme="dark"] .form-input:disabled, [data-theme="dark"] .form-input[readonly], [data-theme="dark"] .form-select:disabled { background: #131a2e; border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); -webkit-text-fill-color: rgba(255,255,255,0.55); opacity: 1; } /* Stats-drawer header icon is tinted with the game/widget primary color; a very dark color (e.g. #000000) vanishes on the dark drawer. A subtle ring keeps it delineated regardless of the chosen color. */ [data-theme="dark"] .sd-header-icon, [data-theme="dark"] .ws-header-icon { border: 1px solid rgba(255,255,255,0.18); }