/* ═══════════════════════════════════════════════════════ DARK-THEME.CSS — dark mode overrides (2026-06-05) Applied when All pages: dashboard, trade, support, index ═══════════════════════════════════════════════════════ */ /* ── CSS VARIABLE OVERRIDES ── */ html.theme-dark { --bg-page: #0F101C; --bg-card: #181928; --bg-card2: #13141F; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.13); --shadow-sm: 0 1px 8px rgba(0,0,0,0.40); --shadow-md: 0 4px 20px rgba(0,0,0,0.50), 0 1px 4px rgba(0,0,0,0.30); --shadow-lg: 0 8px 36px rgba(0,0,0,0.60); --text-1: #E8ECFF; --text-2: #8A94B0; --text-3: #4A5268; --primary-bg: rgba(96,89,232,0.16); --primary-border:rgba(96,89,232,0.32); /* trade.css vars */ --bg: #0F101C; --panel: #181928; --text: #E8ECFF; color: var(--text-1); background: var(--bg-page); } /* ── HTML / BODY background (ui-unified.css hardcodes this) ── */ html.theme-dark { background-color: #0F101C !important; } html.theme-dark body { background: #0F101C !important; background-color: #0F101C !important; } /* ── AUTH HEADER ── */ html.theme-dark .auth-app-header { background: #181928 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important; } html.theme-dark .auth-app-header .brand-name { color: #E8ECFF !important; } html.theme-dark .auth-app-header .nav-link { color: #8A94B0 !important; background: transparent !important; } html.theme-dark .auth-app-header .nav-link:hover { color: #6059E8 !important; background: rgba(96,89,232,0.14) !important; } html.theme-dark .auth-app-header .nav-link.active { color: #6059E8 !important; background: rgba(96,89,232,0.14) !important; font-weight: 600 !important; } html.theme-dark .auth-app-header .icon-btn { background: rgba(255,255,255,0.05) !important; color: #8A94B0 !important; border: 1px solid rgba(255,255,255,0.08) !important; } html.theme-dark .auth-app-header .icon-btn:hover { background: rgba(96,89,232,0.14) !important; color: #6059E8 !important; border-color: rgba(96,89,232,0.25) !important; } html.theme-dark .auth-app-header .notif-bell { background: transparent !important; color: #8A94B0 !important; } html.theme-dark .auth-app-header .notif-bell.has-unread { color: #8A94B0 !important; } html.theme-dark .auth-app-header .notif-bell:hover { background: rgba(96,89,232,0.14) !important; color: #6059E8 !important; } html.theme-dark .auth-app-header .profile-trigger { color: #E8ECFF !important; background: transparent !important; box-shadow: none !important; } html.theme-dark .auth-app-header .profile-trigger:hover { background: rgba(96,89,232,0.12) !important; } html.theme-dark .auth-app-header .profile-email { color: #E8ECFF !important; } html.theme-dark .auth-app-header .profile-dropdown { background: #1E1F30 !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important; } html.theme-dark .auth-app-header .dropdown-item { color: #E8ECFF !important; background: transparent !important; } html.theme-dark .auth-app-header .dropdown-item:hover { background: rgba(255,255,255,0.06) !important; } html.theme-dark .auth-app-header .dropdown-item.logout { color: #EF4444 !important; } html.theme-dark .auth-app-header .dropdown-divider { background: rgba(255,255,255,0.08) !important; } /* ── GENERIC MODAL CARD (ui-unified.css: background: #FFFFFF) ── */ html.theme-dark .modal-backdrop .modal-card { background: #1E1F30 !important; border: 1px solid rgba(255,255,255,0.10) !important; color: #E8ECFF !important; } html.theme-dark .modal-card h2, html.theme-dark .modal-card h3, html.theme-dark .modal-card .modal-title { color: #E8ECFF !important; } html.theme-dark .modal-card .modal-label, html.theme-dark .modal-card label { color: #8A94B0 !important; } html.theme-dark .modal-card p, html.theme-dark .modal-card small { color: #8A94B0 !important; } /* ── SETTINGS MODAL ── */ html.theme-dark .stg-section-title { color: #4A5268 !important; } html.theme-dark .stg-row { border-color: rgba(255,255,255,0.07) !important; } html.theme-dark .stg-row-title { color: #E8ECFF !important; } html.theme-dark .stg-row-desc { color: #8A94B0 !important; } html.theme-dark .stg-select { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #E8ECFF !important; } html.theme-dark .stg-toggle-track { background: rgba(255,255,255,0.12) !important; } html.theme-dark .stg-toggle input:checked ~ .stg-toggle-track { background: #6059E8 !important; } /* ── INPUTS / SELECT / TEXTAREA ── */ html.theme-dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]), html.theme-dark select, html.theme-dark textarea { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; color: #E8ECFF !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: #4A5268 !important; opacity: 1 !important; } html.theme-dark select option { background: #1E1F30; color: #E8ECFF; } /* ── DASHBOARD CARDS ── */ html.theme-dark .balance-card, html.theme-dark .portfolio-card, html.theme-dark .trades-card, html.theme-dark .action-card, html.theme-dark .section-card, html.theme-dark .deposit-promo-card, html.theme-dark .dfb-hero { background: var(--bg-card) !important; border-color: var(--border) !important; } /* balance labels */ html.theme-dark .bal-label, html.theme-dark .balance-label { color: var(--text-2) !important; } /* dfb hero white text already works, but hero action btn fix */ html.theme-dark .dfb-hero-action-btn.outline { background: rgba(255,255,255,0.12) !important; color: #fff !important; } /* withdraw/deposit status box */ html.theme-dark #withdrawStatusBox { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--text-2) !important; } html.theme-dark #fiatRequisitesBox { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; } /* nav/dropdown in header */ html.theme-dark .header-dropdown { background: #1E1F30 !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; } /* bottom nav */ html.theme-dark .bottom-nav { background: #181928 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; } html.theme-dark .bottom-nav .nav-item { color: #4A5268 !important; } html.theme-dark .bottom-nav .nav-item.active { color: #6059E8 !important; } html.theme-dark .bottom-nav .nav-item.active svg { color: #6059E8 !important; } /* transaction / trade rows */ html.theme-dark .tx-row, html.theme-dark .trade-row, html.theme-dark .history-row { border-color: rgba(255,255,255,0.07) !important; color: var(--text-1) !important; } html.theme-dark .tx-row:hover, html.theme-dark .trade-row:hover, html.theme-dark .history-row:hover { background: rgba(255,255,255,0.04) !important; } html.theme-dark .tx-amount, html.theme-dark .tx-label, html.theme-dark .tx-date { color: var(--text-2) !important; } /* ── TRADE PAGE ── */ html.theme-dark .trade-panel, html.theme-dark .chart-wrap, html.theme-dark .order-book-panel, html.theme-dark .positions-panel { background: var(--bg-card) !important; border-color: var(--border) !important; } html.theme-dark .tp-label, html.theme-dark .trade-label { color: var(--text-2) !important; } html.theme-dark .trade-input-group input { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #E8ECFF !important; } html.theme-dark .category-tab { color: var(--text-2) !important; border-color: var(--border) !important; background: transparent !important; } html.theme-dark .category-tab.active { color: #fff !important; background: var(--primary) !important; } html.theme-dark .position-row, html.theme-dark .open-position { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-1) !important; } html.theme-dark .position-row:hover { background: rgba(255,255,255,0.04) !important; } /* instrument picker / search */ html.theme-dark .instrument-search input { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #E8ECFF !important; } html.theme-dark .instrument-row { border-color: var(--border) !important; } html.theme-dark .instrument-row:hover { background: rgba(255,255,255,0.04) !important; } /* ── SUPPORT PAGE ── */ html.theme-dark .ticket-row, html.theme-dark .support-ticket-card { background: var(--bg-card) !important; border-color: var(--border) !important; } html.theme-dark .ticket-row:hover { background: rgba(255,255,255,0.04) !important; } html.theme-dark .chat-area { background: var(--bg-page) !important; } html.theme-dark .chat-bubble.in { background: rgba(255,255,255,0.07) !important; color: #E8ECFF !important; } html.theme-dark .chat-bubble.out { background: rgba(96,89,232,0.25) !important; } html.theme-dark .support-input, html.theme-dark .chat-input { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #E8ECFF !important; } html.theme-dark .support-header, html.theme-dark .ticket-header { background: var(--bg-card) !important; border-color: var(--border) !important; } /* ── SECURITY MODAL ── */ html.theme-dark .sec-modal-card { background: #1E1F30 !important; } html.theme-dark .sec-modal-header { border-bottom-color: rgba(255,255,255,0.10) !important; } html.theme-dark .sec-modal-header h2 { color: #E8ECFF !important; } html.theme-dark .sec-back-btn { color: #8A94B0 !important; } html.theme-dark .sec-item { border-bottom-color: rgba(255,255,255,0.07) !important; } html.theme-dark .sec-item:hover { background: rgba(255,255,255,0.04) !important; } html.theme-dark .sec-item-title { color: #E8ECFF !important; } html.theme-dark .sec-item-desc, html.theme-dark .sec-item-meta { color: #8A94B0 !important; } html.theme-dark .sec-label { color: #8A94B0 !important; } html.theme-dark .sec-input { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #E8ECFF !important; } html.theme-dark .sec-field > div.sec-input { background: rgba(255,255,255,0.04) !important; } html.theme-dark .sec-section-title { color: #4A5268 !important; } /* ── VERIFICATION MODAL ── */ html.theme-dark .verif-label { color: #8A94B0 !important; } html.theme-dark .verif-input { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #E8ECFF !important; } html.theme-dark .verif-photo-upload { background: transparent !important; border: none !important; color: #8A94B0 !important; } /* ── WALLET / DEPOSIT MODALS ── */ html.theme-dark .wallet-picker-item { border-color: var(--border) !important; color: var(--text-1) !important; } html.theme-dark .wallet-picker-item:hover { background: rgba(255,255,255,0.04) !important; } html.theme-dark .wallet-picker-item.selected { background: var(--primary-bg) !important; border-color: var(--primary-border) !important; } html.theme-dark .deposit-method-tab { color: var(--text-2) !important; border-color: var(--border) !important; } html.theme-dark .deposit-method-tab.active { color: var(--primary) !important; border-color: var(--primary) !important; } html.theme-dark .copy-addr { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; color: var(--text-1) !important; } /* ── NOTIFICATIONS ── */ html.theme-dark .notif-panel, html.theme-dark .notif-dropdown { background: #1E1F30 !important; border-color: rgba(255,255,255,0.10) !important; } html.theme-dark .notif-item { border-color: rgba(255,255,255,0.07) !important; } html.theme-dark .notif-item:hover { background: rgba(255,255,255,0.04) !important; } html.theme-dark .notif-text { color: #E8ECFF !important; } html.theme-dark .notif-time { color: #4A5268 !important; } /* ── SCROLLBAR ── */ html.theme-dark ::-webkit-scrollbar { width: 6px; height: 6px; } html.theme-dark ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); } html.theme-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; } html.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); } /* ═══════════════════════════════════════════════════════ DARK THEME ADDITIONS — 2026-06-05-r2 ═══════════════════════════════════════════════════════ */ /* ── NOTIFICATION MODAL ── */ html.theme-dark .notif-nav-btn, html.theme-dark .notif-close-btn { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.10) !important; color: #8A94B0 !important; } html.theme-dark .notif-modal-head-left h3 { color: #E8ECFF !important; } html.theme-dark .notif-modal-sub, html.theme-dark .notif-row-date, html.theme-dark .notif-detail-date, html.theme-dark .notif-empty { color: #4A5268 !important; } html.theme-dark .notif-row:hover { background: rgba(255,255,255,0.05) !important; } html.theme-dark .notif-row.is-unread { background: rgba(96,89,232,0.10) !important; border-color: rgba(96,89,232,0.20) !important; } html.theme-dark .notif-row.is-unread:hover { background: rgba(96,89,232,0.16) !important; } html.theme-dark .notif-row-dot { background: rgba(255,255,255,0.2) !important; } html.theme-dark .notif-row-title { color: #8A94B0 !important; } html.theme-dark .notif-row.is-unread .notif-row-title { color: #E8ECFF !important; } html.theme-dark .notif-row-preview { color: #505870 !important; } html.theme-dark .notif-detail-title { color: #E8ECFF !important; } html.theme-dark .notif-detail-body, html.theme-dark .notif-detail-text, html.theme-dark .notification-modal-text { color: #8A94B0 !important; } html.theme-dark .notif-modal-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); } /* ── MODAL CLOSE BUTTON ── */ html.theme-dark .modal-backdrop .modal-card .icon-button, html.theme-dark .modal-backdrop .modal-card .modal-header .icon-button, html.theme-dark .sec-back-btn { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.10) !important; color: #8A94B0 !important; } html.theme-dark .modal-backdrop .modal-card .icon-button:hover, html.theme-dark .modal-backdrop .modal-card .modal-header .icon-button:hover { background: rgba(239,68,68,0.12) !important; color: #EF4444 !important; border-color: rgba(239,68,68,0.25) !important; } /* ── MODAL GHOST / CANCEL BUTTON ── */ html.theme-dark .modal-backdrop .modal-card .ghost-button { background: rgba(255,255,255,0.07) !important; color: #8A94B0 !important; border-color: rgba(255,255,255,0.12) !important; } html.theme-dark .modal-backdrop .modal-card .ghost-button:hover { background: rgba(96,89,232,0.14) !important; color: #6059E8 !important; border-color: rgba(96,89,232,0.3) !important; } /* ── MODAL SELECTS / DROPDOWNS ── */ html.theme-dark .modal-backdrop .modal-card select, html.theme-dark .modal-backdrop .modal-card .stg-select, html.theme-dark .modal-card select { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #E8ECFF !important; } html.theme-dark .modal-backdrop .modal-card label { color: #8A94B0 !important; } html.theme-dark .modal-backdrop .modal-card h2, html.theme-dark .modal-backdrop .modal-card h3 { color: #E8ECFF !important; } html.theme-dark .modal-backdrop .modal-card p { color: #8A94B0 !important; } /* ── FILE INPUT ── */ html.theme-dark input[type="file"], html.theme-dark #fiatReceiptInput, html.theme-dark #verificationSelfieInput, html.theme-dark #verificationPassportInput { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #8A94B0 !important; } html.theme-dark input[type="file"]::file-selector-button, html.theme-dark #fiatReceiptInput::file-selector-button, html.theme-dark #verificationSelfieInput::file-selector-button, html.theme-dark #verificationPassportInput::file-selector-button { background: rgba(255,255,255,0.10) !important; color: #E8ECFF !important; border-color: rgba(255,255,255,0.14) !important; } /* ── CHART LOADER (light background while chart renders) ── */ html.theme-dark .chart-loader { background: rgba(15,16,28,0.85) !important; backdrop-filter: blur(2px); } html.theme-dark .chart-stage { background: var(--bg-card2) !important; } /* ── TRADE PAGE HEADER / SPECIFIC ELEMENTS ── */ html.theme-dark .auth-app-header.trade-header, html.theme-dark header.auth-app-header { background: #181928 !important; } html.theme-dark .trade-ticker, html.theme-dark .ticker-bar { background: #181928 !important; border-color: rgba(255,255,255,0.08) !important; } html.theme-dark .ticker-item { color: #8A94B0 !important; border-color: rgba(255,255,255,0.07) !important; } html.theme-dark .ticker-name { color: #E8ECFF !important; } /* trade.css hardcoded borders */ html.theme-dark .order-form-wrap, html.theme-dark .order-form-card { border-color: rgba(255,255,255,0.10) !important; background: #181928 !important; } html.theme-dark .order-form-card input { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #E8ECFF !important; } /* ── LANDING PAGE ── */ html.theme-dark .landing_header { background: #181928 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important; } html.theme-dark .header_menu_item { color: #8A94B0 !important; } html.theme-dark .header_menu_item:hover { color: #E8ECFF !important; } html.theme-dark .hero_container, html.theme-dark .hero_section, html.theme-dark .about_section, html.theme-dark .licenses_section, html.theme-dark .faq_section, html.theme-dark .features_section { background: #0F101C !important; } html.theme-dark .license_card, html.theme-dark .faq_item, html.theme-dark .feature_card { background: #181928 !important; border-color: rgba(255,255,255,0.08) !important; } html.theme-dark .float_card { background: #1E1F30 !important; border-color: rgba(255,255,255,0.10) !important; } /* Login/register form card */ html.theme-dark .auth_section, html.theme-dark .login_section, html.theme-dark .register_section { background: #0F101C !important; } html.theme-dark .login_form_wrap, html.theme-dark .register_form_wrap, html.theme-dark .auth_form_wrap, html.theme-dark [class$="_form_wrap"] { background: #181928 !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.45) !important; } html.theme-dark .form_title, html.theme-dark .login_title, html.theme-dark .register_title { color: #E8ECFF !important; } html.theme-dark .form_subtitle, html.theme-dark .login_subtitle { color: #8A94B0 !important; } html.theme-dark .input_label, html.theme-dark .field-label { color: #8A94B0 !important; } html.theme-dark .input_field, html.theme-dark .form_input, html.theme-dark .field-input:not([type=checkbox]) { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #E8ECFF !important; } html.theme-dark .input_error, html.theme-dark .form_error { color: #EF4444 !important; } html.theme-dark .landing-profile .profile-trigger { color: #E8ECFF !important; } html.theme-dark .landing-profile .profile-dropdown { background: #1E1F30 !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } html.theme-dark .landing-profile .dropdown-item { color: #E8ECFF !important; } html.theme-dark .landing-profile .dropdown-item:hover { background: rgba(255,255,255,0.06) !important; } /* ── ORIENTATION LOCK ── */ html.theme-dark .orientation-lock-overlay { background: #0F101C !important; } html.theme-dark .orientation-lock-overlay p { color: #8A94B0 !important; } /* ── TRADE/DASHBOARD HEADER — match exact auth-header.css selector ── */ html.theme-dark .auth-app-header.dashboard-header { background: #181928 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important; } /* ═══════════════════════════════════════════════════════ DARK THEME ADDITIONS — 2026-06-05-r3 ═══════════════════════════════════════════════════════ */ /* ── NOTIFICATION MODAL CARD (built by header-notifications.js) ── */ html.theme-dark .notif-modal-card { background: #1E1F30 !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important; } html.theme-dark .notif-modal-head { border-bottom-color: rgba(255,255,255,0.08) !important; } /* ── MOBILE BOTTOM NAV (auth-header.css sets background:#FFFFFF !important) ── */ html.theme-dark .app-shell .auth-app-header .dashboard-nav, html.theme-dark .support-app .auth-app-header .dashboard-nav, html.theme-dark body.is-authenticated .auth-app-header .dashboard-nav { background: #181928 !important; border-top-color: rgba(255,255,255,0.08) !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.35) !important; } html.theme-dark .app-shell .auth-app-header .nav-link, html.theme-dark .support-app .auth-app-header .nav-link, html.theme-dark body.is-authenticated .auth-app-header .nav-link { color: #4A5268 !important; background: none !important; border-top-color: transparent !important; } html.theme-dark .app-shell .auth-app-header .nav-link.active, html.theme-dark .support-app .auth-app-header .nav-link.active, html.theme-dark body.is-authenticated .auth-app-header .nav-link.active { color: #6059E8 !important; background: rgba(96,89,232,0.10) !important; border-top-color: #6059E8 !important; } /* ── SECURITY MODAL CLOSE BUTTON (uses .sec-modal-card, not .modal-card) ── */ html.theme-dark .sec-modal-card .icon-button { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.10) !important; color: #8A94B0 !important; } html.theme-dark .sec-modal-card .icon-button:hover { background: rgba(239,68,68,0.12) !important; color: #EF4444 !important; border-color: rgba(239,68,68,0.25) !important; } /* ── SECURITY MODAL BACK BUTTON (text link, no background) ── */ html.theme-dark .sec-back-btn { color: #6059E8 !important; background: none !important; border: none !important; } /* ── SECURITY MODAL ITEM ICONS ── */ html.theme-dark .sec-item-icon { background: rgba(96,89,232,0.14) !important; color: #8A94B0 !important; } html.theme-dark .sec-item-chevron { color: #4A5268 !important; } html.theme-dark .sec-item-btn { background: rgba(96,89,232,0.85) !important; color: #fff !important; } /* ── SECURITY MODAL STATUS / VERIFIED BADGE ── */ html.theme-dark .sec-verified-badge { background: rgba(34,197,94,0.14) !important; color: #4ade80 !important; } html.theme-dark .sec-status.sec-ok { background: rgba(34,197,94,0.12) !important; color: #4ade80 !important; } html.theme-dark .sec-status.sec-err { background: rgba(239,68,68,0.12) !important; color: #f87171 !important; } html.theme-dark .sec-status.sec-info { background: rgba(59,130,246,0.12) !important; color: #60a5fa !important; } /* ── SECURITY MODAL ACTIVE SESSIONS ── */ html.theme-dark .sec-session-item { border-bottom-color: rgba(255,255,255,0.07) !important; } html.theme-dark .sec-session-icon { background: rgba(96,89,232,0.14) !important; color: #8A94B0 !important; } html.theme-dark .sec-session-device { color: #E8ECFF !important; } html.theme-dark .sec-session-geo, html.theme-dark .sec-session-time { color: #4A5268 !important; } html.theme-dark .sec-current-tag { color: #6059E8 !important; background: rgba(96,89,232,0.15) !important; } html.theme-dark .sec-term-btn { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.10) !important; color: #f87171 !important; } html.theme-dark .sec-loading, html.theme-dark .sec-empty { color: #4A5268 !important; } /* ── SEARCH BOX — prevent global input rule from adding bg inside search box ── */ html.theme-dark .search-box { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.10) !important; } /* Override global input rule (high specificity) — search input must stay transparent */ html.theme-dark .search-box input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]) { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--text, #E8ECFF) !important; } /* ── CHART — remove visible background from chart stage/section ── */ html.theme-dark .chart-stage, html.theme-dark #lwChartContainer { background: transparent !important; } html.theme-dark .chart-market-unavailable { background: rgba(15,16,28,0.94) !important; color: #8A94B0 !important; } html.theme-dark .chart-market-unavailable strong { color: #E8ECFF !important; } /* ═══════════════════════════════════════════════════════ DARK THEME ADDITIONS — 2026-06-05-r4 ═══════════════════════════════════════════════════════ */ /* ── LANDING PAGE CSS VARIABLE OVERRIDES ── */ html.theme-dark { --bg-white: #0F101C; --bg-light: #181928; --border-light: rgba(255,255,255,0.08); --border-light2: rgba(255,255,255,0.05); } /* ── LANDING — hero trust badge, feature cards, about section/cards ── */ html.theme-dark .content_item_trusted { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.08) !important; } html.theme-dark .about_section { background: #0F101C !important; } html.theme-dark .about_card, html.theme-dark .feature_card { background: #181928 !important; border-color: rgba(255,255,255,0.07) !important; } html.theme-dark .about_card:hover, html.theme-dark .feature_card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important; } html.theme-dark .about_icon_blue { background: rgba(59,130,246,0.12) !important; } html.theme-dark .about_icon_purple { background: rgba(96,89,232,0.14) !important; } html.theme-dark .about_icon_green { background: rgba(16,185,129,0.12) !important; } html.theme-dark .feature_icon_blue { background: rgba(59,130,246,0.12) !important; } html.theme-dark .feature_icon_purple { background: rgba(96,89,232,0.14) !important; } html.theme-dark .feature_icon_green { background: rgba(16,185,129,0.12) !important; } /* ── LANDING — login/register modal (hardcoded #FFFFFF in landing.css) ── */ html.theme-dark .register_modal { background: #1E1F30 !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; } html.theme-dark .register_modal_title, html.theme-dark .login_modal_title { color: #E8ECFF !important; } html.theme-dark .register_modal_content { background: #1E1F30 !important; } html.theme-dark .modal_close { color: #4A5268 !important; background: transparent !important; } html.theme-dark .modal_close:hover { background: rgba(239,68,68,0.10) !important; color: #EF4444 !important; } html.theme-dark .register_step_item { border-color: rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; } html.theme-dark .register_step_item.active { border-color: rgba(96,89,232,0.40) !important; background: rgba(96,89,232,0.10) !important; } html.theme-dark .register_step_item.done { border-color: rgba(16,185,129,0.30) !important; background: rgba(16,185,129,0.08) !important; } html.theme-dark .register_step_number { background: rgba(255,255,255,0.08) !important; color: #8A94B0 !important; } html.theme-dark .register_field_label, html.theme-dark .login_field_label, html.theme-dark .form_field_label, html.theme-dark .register_modal .field-label, html.theme-dark .register_modal label { color: #8A94B0 !important; } html.theme-dark .register_modal p, html.theme-dark .register_modal small { color: #8A94B0 !important; } html.theme-dark .auth-switch-link, html.theme-dark .auth-switch-text { color: #8A94B0 !important; } html.theme-dark .form_subtitle, html.theme-dark .register_modal .subtitle { color: #8A94B0 !important; } /* ── LANDING — language switcher dropdown (hardcoded #FFFFFF) ── */ html.theme-dark .language_toggle { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.10) !important; color: #E8ECFF !important; } html.theme-dark .language_dropdown { background: #1E1F30 !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important; } html.theme-dark .language_option { color: #E8ECFF !important; background: transparent !important; } html.theme-dark .language_option:hover { background: rgba(255,255,255,0.06) !important; } html.theme-dark .language_option.active { background: rgba(96,89,232,0.12) !important; color: #6059E8 !important; } /* ── TRADE PAGE — override trade-app white header (auth-header.css: !important) ── */ html.theme-dark .trade-app .auth-app-header.dashboard-header { background: #181928 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important; } html.theme-dark .trade-app .auth-app-header .brand-name { color: #E8ECFF !important; } html.theme-dark .trade-app .auth-app-header .nav-link { color: #8A94B0 !important; background: transparent !important; } html.theme-dark .trade-app .auth-app-header .nav-link:hover, html.theme-dark .trade-app .auth-app-header .nav-link.active { color: #6059E8 !important; background: rgba(96,89,232,0.10) !important; } html.theme-dark .trade-app .auth-app-header .notif-bell { color: #8A94B0 !important; } html.theme-dark .trade-app .auth-app-header .download-button { background: rgba(255,255,255,0.06) !important; color: #8A94B0 !important; border-color: rgba(255,255,255,0.10) !important; } /* ═══════════════════════════════════════════════════════ DARK THEME — LANDING PHONE MOCKUP (r5) ═══════════════════════════════════════════════════════ */ /* Phone frame & notch */ html.theme-dark .hero_phone_side { background: #13141F !important; border-color: #2A2B3D !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 10px rgba(0,0,0,0.4), 0 14px 36px rgba(0,0,0,0.5), 0 32px 80px rgba(0,0,0,0.35), 0 60px 120px rgba(96,89,232,0.12) !important; } html.theme-dark .hero_phone_notch { background: #2A2B3D !important; } /* Status bar */ html.theme-dark .hero_phone_status_bar { color: #8A94B0 !important; } html.theme-dark .hero_phone_time { color: #E8ECFF !important; } html.theme-dark .hero_phone_status_icons { color: #8A94B0 !important; } /* App header inside phone */ html.theme-dark .hero_phone_app_header { border-bottom-color: rgba(255,255,255,0.07) !important; } html.theme-dark .hero_phone_brand_name { color: #E8ECFF !important; } html.theme-dark .hero_phone_bell { color: #4A5268 !important; } /* Portfolio section */ html.theme-dark .hero_phone_greeting { color: #8A94B0 !important; } html.theme-dark .hero_phone_port_label { color: #4A5268 !important; } html.theme-dark .hero_phone_port_value { color: #E8ECFF !important; } html.theme-dark .hero_phone_eye { color: #4A5268 !important; } /* Range row */ html.theme-dark .hero_phone_range { color: #4A5268 !important; } html.theme-dark .hero_phone_range.active { color: #6059E8 !important; } /* Section title */ html.theme-dark .hero_phone_section_title { color: #E8ECFF !important; } /* Asset list */ html.theme-dark .hero_phone_asset_row { border-bottom-color: rgba(255,255,255,0.05) !important; } html.theme-dark .hero_phone_asset_name { color: #E8ECFF !important; } html.theme-dark .hero_phone_asset_price { color: #4A5268 !important; } /* Trade side */ html.theme-dark .hero_phone_trade_header { border-bottom-color: rgba(255,255,255,0.07) !important; } html.theme-dark .hero_phone_back_btn { color: #8A94B0 !important; } html.theme-dark .hero_phone_trade_name { color: #E8ECFF !important; } html.theme-dark .hero_phone_trade_sub { color: #4A5268 !important; } html.theme-dark .hero_phone_trade_price { color: #E8ECFF !important; } html.theme-dark .hero_phone_stat_label { color: #4A5268 !important; } html.theme-dark .hero_phone_stat_val { color: #8A94B0 !important; } /* ══ r7 — verification modal dark theme ══════════════════════ */ html.theme-dark .verif-status-bar { color: #8A94B0 !important; } html.theme-dark .verif-success-banner { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.18) !important; } html.theme-dark .verif-success-banner strong { color: #34D399 !important; } html.theme-dark .verif-success-banner p { color: #6EE7B7 !important; } html.theme-dark .verif-info-row { border-bottom-color: rgba(255,255,255,0.06) !important; } html.theme-dark .verif-info-num { color: #4A5268 !important; } html.theme-dark .verif-info-key { color: #8A94B0 !important; } html.theme-dark .verif-info-val { color: #E8ECFF !important; } html.theme-dark .verif-passport-photo span { color: #8A94B0 !important; } html.theme-dark .verif-passport-photo img { border-color: rgba(255,255,255,0.10) !important; } html.theme-dark .verif-pending-msg { color: #8A94B0 !important; } html.theme-dark .verif-flabel { color: #8A94B0 !important; } html.theme-dark .verif-fnum { color: #4A5268 !important; } html.theme-dark .verif-input:focus { background: rgba(255,255,255,0.08) !important; border-color: #6059E8 !important; } html.theme-dark .verif-input[readonly] { background: rgba(255,255,255,0.03) !important; color: #8A94B0 !important; } html.theme-dark .verif-photo-heading { color: #8A94B0 !important; } html.theme-dark .verif-photo-attach { border-color: rgba(255,255,255,0.15) !important; color: #8A94B0 !important; background: rgba(255,255,255,0.03) !important; } html.theme-dark .verif-photo-attach:hover { border-color: #6059E8 !important; color: #6059E8 !important; } html.theme-dark .verif-alert-msg.is-error { background: rgba(239,68,68,0.12) !important; color: #FCA5A5 !important; } html.theme-dark .verif-alert-msg.is-success { background: rgba(16,185,129,0.10) !important; color: #6EE7B7 !important; } /* ══ r6 — bell ring, phone trade form, asset card active ══════ */ /* Notification bell counter — remove white ring */ html.theme-dark .auth-app-header .notif-bell.has-unread .notif-count-text { box-shadow: 0 0 0 2px #0F101C !important; } /* Profile status dot — remove white border */ html.theme-dark .profile-status-dot { border-color: #0F101C !important; } /* Phone mockup — trade form bottom area */ html.theme-dark .hero_phone_amount_row { background: #1E1F30 !important; } html.theme-dark .hero_phone_amount_input { color: #E8ECFF !important; } /* Asset card selected state */ html.theme-dark .asset-card.active { background: rgba(96,89,232,0.20) !important; border-color: rgba(96,89,232,0.28) !important; } /* ══ r6-trade-nav — trade page bottom nav dark fix ══════════ */ html.theme-dark .trade-app .auth-app-header .dashboard-nav { background: #181928 !important; border-top-color: rgba(255,255,255,0.08) !important; box-shadow: 0 -2px 12px rgba(0,0,0,0.35) !important; } html.theme-dark .trade-app .auth-app-header .nav-link { color: #8A94B0 !important; background: none !important; border-top-color: transparent !important; } html.theme-dark .trade-app .auth-app-header .nav-link.active { color: #6059E8 !important; background: rgba(96,89,232,0.10) !important; border-top-color: #6059E8 !important; }