/* Developed by RegiTech (+2348038240084). Unauthorized removal does not transfer authorship. */ /* ═══════════════════════════════════════════════════════════ iPay NG — Dark Mode Applied when ═══════════════════════════════════════════════════════════ */ /* ── CSS Variable overrides (used by page CSS files) ── */ [data-theme="dark"] { --txn-bg: #1e1e1e; --txn-text: #ffffff; --page-bg: #1e1e1e; --icon-bg: #2a2a2a; --dm-bg: #1e1e1e; --dm-bg2: #1e1e1e; --dm-bg3: #252525; --dm-bg4: #2e2e2e; --dm-text: #ffffff; --dm-text2: #9a9a9a; --dm-text3: #555555; --dm-border: #2e2e2e; } /* ── Page Preloader ── */ [data-theme="dark"] .loader-wrap { --finwallapp-page-bg-1: #1e1e1e !important; --finwallapp-page-bg-2: #1e1e1e !important; --finwallapp-page-bg-3: #1e1e1e !important; background: #1e1e1e !important; } [data-theme="dark"] .loader-wrap .logo-wallet { border: 2px solid #2e2e2e !important; box-shadow: 0 0 0 4px rgba(171, 41, 35, .08), 0 5px 20px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .loader-wrap p { color: #999 !important; } [data-theme="dark"] .loader-wrap strong { color: #fff !important; } /* ── Services Pages (Data, Airtime, Cable, Electricity) ── */ [data-theme="dark"] .svc-card { background: var(--dm-bg2) !important; } /* Electricity: readonly lookup fields */ [data-theme="dark"] input[readonly] { background: var(--dm-bg4) !important; color: var(--dm-text2) !important; border-color: var(--dm-border) !important; cursor: default; } [data-theme="dark"] input[readonly]::placeholder { color: var(--dm-text3) !important; } /* Electricity: naira ₦ pseudo on headings */ [data-theme="dark"] .naira-sign::before { color: var(--dm-text2) !important; } /* Electricity: "Quick Select" section heading */ [data-theme="dark"] .svc-card>h5, [data-theme="dark"] .svc-card h5.mb-2 { color: var(--dm-text2) !important; } /* Electricity: bottom total row */ [data-theme="dark"] .total .secondary_color { color: var(--dm-text2) !important; } [data-theme="dark"] .total h2.text-success { color: #00dfa3 !important; } /* Electricity: amount input wrapper — clear icon background */ [data-theme="dark"] .input-field .icon-clear { background: var(--dm-bg3) !important; } /* Electricity: meter-type select & custom disco dropdown (extra specificity for btn-select #fff) */ [data-theme="dark"] .btn-select, [data-theme="dark"] .btn-select:not(.open) { background: var(--dm-bg3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] #typeFilter, [data-theme="dark"] select.sl-gender, [data-theme="dark"] select.box-sl-profile { background: var(--dm-bg3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* Option items inside the dropdown list */ [data-theme="dark"] .banks-select li { color: var(--dm-text) !important; background: var(--dm-bg3) !important; } [data-theme="dark"] .banks-select li:hover { background: var(--dm-bg4) !important; } [data-theme="dark"] .tf-card-list.bg_surface_color { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .tf-card-list .info h4 a { color: var(--dm-text) !important; } [data-theme="dark"] .tf-card-list .info p { color: var(--dm-text2) !important; } [data-theme="dark"] .group-input label { color: var(--dm-text2) !important; background: var(--dm-bg3) !important; border-radius: 6px !important; padding: 2px 8px !important; } [data-theme="dark"] .group-input input, [data-theme="dark"] .group-input select, [data-theme="dark"] .group-input textarea, [data-theme="dark"] .box-sl-profile { background: var(--dm-bg3) !important; color: var(--dm-text) !important; border: 2px solid var(--dm-border) !important; } [data-theme="dark"] .group-input input::placeholder { color: var(--dm-text3) !important; } /* Global focus — solid yellow border, no glow */ [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] .group-input input:focus, [data-theme="dark"] .group-input select:focus, [data-theme="dark"] .group-input textarea:focus, [data-theme="dark"] .box-sl-profile:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .select-selected.open { border: 2px solid #AB2923 !important; outline: none !important; box-shadow: none !important; } [data-theme="dark"] .secondary_color { color: var(--dm-text2) !important; } /* ── Beneficiary dropdown ── */ [data-theme="dark"] .bene-dropdown { background: var(--dm-bg2) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .bene-dropdown-header { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .bene-dropdown-title { color: var(--dm-text) !important; } [data-theme="dark"] .bene-item { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .bene-item:hover { background: #1e1a00 !important; } [data-theme="dark"] .bene-item:active { background: #2a2400 !important; } [data-theme="dark"] .bene-item-name { color: var(--dm-text) !important; } [data-theme="dark"] .bene-item-phone { color: var(--dm-text3) !important; } [data-theme="dark"] .bene-empty { color: var(--dm-text3) !important; } [data-theme="dark"] .bene-close-btn { color: var(--dm-text3) !important; } [data-theme="dark"] .bene-close-btn:hover { background: var(--dm-bg4) !important; color: var(--dm-text) !important; } /* ── Balance check tip ── */ [data-theme="dark"] .balance-check-tip { background: rgba(171, 41, 35,.07) !important; border-color: rgba(171, 41, 35,.25) !important; } [data-theme="dark"] .tip-label { color: #AB2923 !important; } [data-theme="dark"] .tip-ussd { color: var(--dm-text2) !important; } [data-theme="dark"] .tip-ussd strong { color: var(--dm-text) !important; } /* ── Save beneficiary row ── */ [data-theme="dark"] .save-bene-text { color: var(--dm-text2) !important; } [data-theme="dark"] .bene-toggle-slider { background: #3a3a3a !important; } [data-theme="dark"] .bene-toggle-switch input:checked+.bene-toggle-slider { background: #AB2923 !important; } [data-theme="dark"] .save-bene-wrap { border-color: var(--dm-border) !important; } /* ── Electricity Disco custom select ── */ [data-theme="dark"] .btn-select { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .box-custom-select.open .btn-select { border-color: #AB2923 !important; } [data-theme="dark"] .banks-select { background: var(--dm-bg3) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important; border: 1.5px solid #AB2923 !important; border-top: none !important; } [data-theme="dark"] .banks-select li:hover { background: var(--dm-bg4) !important; } [data-theme="dark"] .disco-option span { color: var(--dm-text) !important; } [data-theme="dark"] .disco-option img { background: var(--dm-bg2) !important; } /* ── Cashback toggle row ── */ [data-theme="dark"] .cashback-toggle-row { background: rgba(171, 41, 35,.07) !important; border-color: rgba(171, 41, 35,.25) !important; } [data-theme="dark"] .cashback-label { color: var(--dm-text) !important; } [data-theme="dark"] .cashback-avail { color: var(--dm-text2) !important; } [data-theme="dark"] .cashback-breakdown { color: var(--dm-text2) !important; border-top-color: rgba(171, 41, 35,.25) !important; } [data-theme="dark"] .cashback-breakdown strong { color: var(--dm-text) !important; } /* ── Page Shell ── */ .app-body-wrap { background-color: #fff; } html[data-theme="dark"] { background: var(--dm-bg); min-height: 100%; } [data-theme="dark"] body, [data-theme="dark"] #app-wrap, [data-theme="dark"] .app-body-wrap { background: var(--dm-bg) !important; } [data-theme="dark"] body { min-height: 100vh; } [data-theme="dark"] .app-section, [data-theme="dark"] .bg_white_color, [data-theme="dark"] .bg_surface_color { background-color: var(--dm-bg) !important; } /* ── Header (is-fixed / statusbar) ── */ [data-theme="dark"] .header.is-fixed { background-color: var(--dm-bg2) !important; box-shadow: 0 1px 0 var(--dm-border) !important; } [data-theme="dark"] .tf-statusbar { background: var(--dm-bg2) !important; border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .tf-statusbar h3, [data-theme="dark"] .tf-topbar h3 { color: var(--dm-text) !important; } [data-theme="dark"] .back-btn em, [data-theme="dark"] .back-btn i { color: var(--dm-text) !important; } /* ── Footer / Bottom Nav ── */ [data-theme="dark"] .footer { background-color: #0d0d0d !important; border-top: 1px solid #222 !important; } [data-theme="dark"] .footer .nav-link { color: var(--dm-text3) !important; } [data-theme="dark"] .footer .nav-link.active { color: #AB2923 !important; } /* ── Footer center popover (Deposit/Withdraw/Transfer/Earn) ── */ [data-theme="dark"] .footer .nav .nav-item.centerbutton .nav-link .nav-menu-popover { background-color: #0d0d0d !important; border: none !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .footer .nav .nav-item.centerbutton .nav-link.active { background-color: #0d0d0d !important; } [data-theme="dark"] .footer .nav .nav-item.centerbutton .nav-link.active::after { background-image: radial-gradient(ellipse at 0% 100%, transparent 0%, transparent 70%, #0d0d0d 72%) !important; } [data-theme="dark"] .footer .nav .nav-item.centerbutton .nav-link.active::before { background-image: radial-gradient(ellipse at 100% 100%, transparent 0%, transparent 70%, #0d0d0d 72%) !important; } [data-theme="dark"] .box-service.box-service-modal li a { background: var(--dm-bg3) !important; box-shadow: 0 4px 14px rgba(0,0,0,.35) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .box-service.box-service-modal li a:hover { background: rgba(171, 41, 35, .15) !important; box-shadow: 0 4px 14px rgba(171, 41, 35,.15) !important; color: #AB2923 !important; } [data-theme="dark"] .btn-icon-text .nav-svg-ico { background: transparent !important; border: none !important; } [data-theme="dark"] .btn-icon-text { color: var(--dm-text2) !important; } /* ── Dashboard: Balance Box ── */ [data-theme="dark"] .tf-balance-box { background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .5), inset 0 0 14px rgba(0, 0, 0, .6) !important; } [data-theme="dark"] .tf-balance-box .balance { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .tf-balance-box .br-right { border-right-color: var(--dm-border) !important; } [data-theme="dark"] .tf-balance-box p { color: var(--dm-text2) !important; } [data-theme="dark"] .tf-balance-box h1, [data-theme="dark"] .tf-balance-box h2, [data-theme="dark"] .tf-balance-box .money { color: #ffffff !important; } [data-theme="dark"] .tf-balance-box .wallet-footer { background: transparent !important; border-top: none !important; } [data-theme="dark"] .tf-balance-box .bottom { border-top-color: var(--dm-border) !important; } [data-theme="dark"] .tf-balance-box .bottom h4, [data-theme="dark"] .tf-balance-box .bottom p, [data-theme="dark"] .tf-balance-box .bottom span { color: var(--dm-text2) !important; } [data-theme="dark"] .tf-balance-box .bottom a, [data-theme="dark"] .tf-balance-box .bottom h4 a { color: var(--dm-text) !important; } [data-theme="dark"] .wallet-card-item a { color: #cccccc !important; } [data-theme="dark"] .wallet-card-item a svg { color: #ffffff; } /* ── Dashboard: Service Grid ── */ [data-theme="dark"] .box-service li a { color: var(--dm-text2) !important; background: var(--dm-bg) !important; box-shadow: 0px 8px 15px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .box-service li .icon-box, [data-theme="dark"] .box-service li .icon-box2 { background: #1a1a1a !important; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), inset 0 0 10px rgba(0, 0, 0, .5) !important; border: none !important; } [data-theme="dark"] .box-service li .icon-box em, [data-theme="dark"] .box-service li .icon-box2 em { color: #cccccc !important; } /* ── Dashboard: Section Title Chips ── */ [data-theme="dark"] .tf-title a.primary_color { color: #AB2923 !important; } [data-theme="dark"] .group-trading-history { background: transparent !important; } /* ── Dashboard: Transaction Items ── */ [data-theme="dark"] .txn-item { background-color: var(--txn-bg) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important; } [data-theme="dark"] .t-type { color: var(--dm-text) !important; } [data-theme="dark"] .a-time { color: var(--dm-text3) !important; } [data-theme="dark"] .t-badge.Successful { background: #0d2e20 !important; color: #00dfa3 !important; } [data-theme="dark"] .t-badge.Pending { background: #2a2000 !important; color: #AB2923 !important; } [data-theme="dark"] .t-badge.Failed { background: #2a0a0a !important; color: #ef5350 !important; } /* ── Dashboard: Empty State ── */ [data-theme="dark"] .group-trading-history>div[style*="border"] { border-color: var(--dm-border) !important; background: var(--dm-bg2) !important; } /* ── Service Icon Boxes ── */ [data-theme="dark"] .icon-box, [data-theme="dark"] .icon-box2 { background-color: var(--dm-bg3) !important; } [data-theme="dark"] .box-service li a { color: var(--dm-text2) !important; } /* ── Profile Cards ── */ [data-theme="dark"] .profile-card { background-color: var(--dm-bg2) !important; box-shadow: 0 1px 8px rgba(0, 0, 0, .3) !important; } [data-theme="dark"] .profile-section-title { color: var(--dm-text3) !important; } [data-theme="dark"] .profile-row { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .profile-row-label { color: var(--dm-text) !important; } [data-theme="dark"] .profile-row-sub { color: var(--dm-text3) !important; } [data-theme="dark"] .profile-row-icon { background-color: var(--dm-bg3) !important; } [data-theme="dark"] .profile-row-right { color: var(--dm-text3) !important; } /* ── Inputs & Forms ── */ /* :not([readonly]) added — without it this out-specifies BOTH the readonly lookup-field rule above (input[readonly], 0,2,1) and .mp-pin-dots' dark override (0,2,1): this catch-all is 0,5,1 from its four :not([type=...]) clauses, and with matching !important on every rule, specificity decides regardless of load order. The PIN sheet's 4 dot inputs are `readonly`, so they were being painted solid var(--dm-bg3) instead of staying transparent rings until filled — the dot indicator lost its point. */ [data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([readonly]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--dm-bg3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--dm-text3) !important; } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus { border-color: #AB2923 !important; } [data-theme="dark"] .group-input label, [data-theme="dark"] .tf-form label, [data-theme="dark"] .trp-field label { color: var(--dm-text2) !important; background-color: var(--dm-bg3) !important; border-radius: 6px !important; padding: 2px 8px !important; } [data-theme="dark"] .icon-clear, [data-theme="dark"] .trp-clear-btn, [data-theme="dark"] .clear-x { background: var(--dm-bg4) !important; color: var(--dm-text2) !important; } /* ── Custom Select ── */ [data-theme="dark"] .custom-select-wrapper .select-selected { background-color: var(--dm-bg3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .custom-select-wrapper .select-options { background-color: var(--dm-bg2) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, .4) !important; } [data-theme="dark"] .custom-select-wrapper .select-options div { color: var(--dm-text) !important; } [data-theme="dark"] .custom-select-wrapper .select-options div:hover, [data-theme="dark"] .custom-select-wrapper .select-options div.active { background-color: var(--dm-bg4) !important; color: #AB2923 !important; } /* ── Panels (bottom-sheet) ── */ [data-theme="dark"] .tf-panel .panel-box { background-color: var(--dm-bg2) !important; } [data-theme="dark"] .panel-box.wrap-content-panel { background-color: var(--dm-bg2) !important; } [data-theme="dark"] .tf-panel .panel-box.wrap-panel-clear { background: transparent !important; } /* Logout panel */ [data-theme="dark"] .panel-logout { background-color: var(--dm-bg2) !important; overflow: hidden !important; } [data-theme="dark"] .panel-logout .heading { background-color: var(--dm-bg2) !important; border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .panel-logout .heading p { color: var(--dm-text) !important; } [data-theme="dark"] .panel-logout .bottom { background-color: var(--dm-bg2) !important; } [data-theme="dark"] .panel-logout .bottom a:first-child { border-right: 1px solid var(--dm-border) !important; } [data-theme="dark"] .panel-logout .bottom .clear-panel:not(.critical_color) { color: var(--dm-text2) !important; } [data-theme="dark"] .panel-logout .bottom .clear-panel:not(.critical_color):active { color: var(--dm-text) !important; } [data-theme="dark"] .tf-panel .line { background-color: var(--dm-border) !important; } [data-theme="dark"] .panel-title { color: var(--dm-text) !important; } [data-theme="dark"] .tf-panel h3, [data-theme="dark"] .tf-panel h4 { color: var(--dm-text) !important; } [data-theme="dark"] .tf-panel p { color: var(--dm-text2) !important; } [data-theme="dark"] .wrap-panel-clear .heading { background-color: var(--dm-bg2) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .wrap-panel-clear .bottom { background-color: var(--dm-bg2) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .wrap-panel-clear .heading p { color: var(--dm-text) !important; border-bottom-color: #333 !important; } [data-theme="dark"] .wrap-panel-clear .bottom a { color: #e05555 !important; } /* ── Notification Panel ── */ [data-theme="dark"] #notifPanel .panel-box { background-color: var(--dm-bg2) !important; } [data-theme="dark"] .np-item { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .np-title { color: var(--dm-text) !important; } [data-theme="dark"] .np-message { color: var(--dm-text2) !important; } [data-theme="dark"] .np-date { color: var(--dm-text3) !important; } /* ── Notifications Page ── */ [data-theme="dark"] .notif-item { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .notif-title { color: var(--dm-text) !important; } [data-theme="dark"] .notif-message { color: var(--dm-text2) !important; } [data-theme="dark"] .notif-date { color: var(--dm-text3) !important; } [data-theme="dark"] .notif-count { color: var(--dm-text3) !important; } [data-theme="dark"] #loadMoreBtn { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .empty-state p { color: var(--dm-text3) !important; } /* ── Transfer Panel & Page ── */ [data-theme="dark"] .trp-inner { background: var(--dm-bg3) !important; } [data-theme="dark"] .trp-who { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .trp-field input { background: var(--dm-bg2) !important; border: 2px solid var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .trp-field input:focus { border: 2px solid #AB2923 !important; outline: none !important; box-shadow: none !important; } [data-theme="dark"] .trp-field label { color: var(--dm-text3) !important; } [data-theme="dark"] .trp-who-text h5 { color: var(--dm-text) !important; } [data-theme="dark"] .trp-who-text p { color: var(--dm-text3) !important; } [data-theme="dark"] .trp-field input { background: var(--dm-bg2) !important; } [data-theme="dark"] .tr-flow-name { color: var(--dm-text) !important; } [data-theme="dark"] .tr-flow-phone { color: var(--dm-text3) !important; } [data-theme="dark"] .list-view { background: var(--dm-bg2) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important; } [data-theme="dark"] .list-view li { color: var(--dm-text2) !important; border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .list-view li span { color: var(--dm-text) !important; } /* ── Withdraw Page ── */ [data-theme="dark"] .withdraw-card { background: var(--dm-bg2) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important; } [data-theme="dark"] .dest-option { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .dest-option-info .name { color: var(--dm-text) !important; } [data-theme="dark"] .dest-option-info .label { color: var(--dm-text3) !important; } /* ── TopUp / Fund Wallet ── */ [data-theme="dark"] .svc-card, [data-theme="dark"] .fund-card { background: var(--dm-bg2) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important; } [data-theme="dark"] .fund-method-title { color: var(--dm-text3) !important; } [data-theme="dark"] .or-line { color: var(--dm-text3) !important; } [data-theme="dark"] .or-line::before, [data-theme="dark"] .or-line::after { background: var(--dm-border) !important; } [data-theme="dark"] .kyc-banner { background: #1a1500 !important; border-color: #4a3500 !important; } [data-theme="dark"] .kyc-banner h6 { color: var(--dm-text) !important; } [data-theme="dark"] .kyc-banner p { color: var(--dm-text3) !important; } [data-theme="dark"] .kyc-arrow { background: #AB2923 !important; } [data-theme="dark"] .acct-row { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .acct-label { color: var(--dm-text3) !important; } [data-theme="dark"] .acct-value { color: var(--dm-text) !important; } [data-theme="dark"] .copy-btn { background: rgba(171, 41, 35, .15) !important; color: #AB2923 !important; } [data-theme="dark"] .copy-btn:active { background: #AB2923 !important; color: #fff!important; } [data-theme="dark"] .fee-badge.orange { background: #2a1500 !important; color: #ff8c42 !important; } [data-theme="dark"] .fee-badge.green { background: #0a2e0a !important; color: #66bb6a !important; } [data-theme="dark"] .fund-input-wrap label { background: var(--dm-bg2) !important; color: var(--dm-text3) !important; } [data-theme="dark"] .fund-input-wrap input { background: var(--dm-bg3) !important; border: 2px solid var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .fund-input-wrap input:focus { border: 2px solid #AB2923 !important; } [data-theme="dark"] .ot-result { background: var(--dm-bg3) !important; } /* ── Pill Tabs ── */ [data-theme="dark"] .pill-tabs { background: var(--dm-bg3) !important; } /* Neutral dark grey, not brand — see --mp-pill-active in css/theme-mp.css. */ [data-theme="dark"] .pill-slider { background: var(--mp-pill-active) !important; box-shadow: none !important; } /* --dm-text3 (#555) on the --dm-bg3 track is about 2:1 — effectively unreadable. --dm-text2 lifts inactive labels to roughly 6:1. */ [data-theme="dark"] .pill-tab { color: var(--dm-text2) !important; } /* No background here. .pill-tab is z-index:1, i.e. ON TOP of .pill-slider, so giving the active tab its own fill hid the slider completely and the pill rendered flat grey. The slider is the only surface. Label is dark because that slider is light grey — see --mp-pill-active. */ [data-theme="dark"] .pill-tab.active { color: var(--mp-pill-active-text) !important; } /* ── Quick Amount Buttons ── */ [data-theme="dark"] .quick-amt-btn, [data-theme="dark"] .tag-money { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .quick-amt-btn.active { border-color: #AB2923 !important; background: rgba(171, 41, 35, .15) !important; color: #AB2923 !important; } /* ── PIN Inputs ── */ [data-theme="dark"] .pin-inputs input { background: #1e1e1e !important; border: 2px solid #3a3a3a !important; color: var(--dm-text) !important; } [data-theme="dark"] .pin-inputs input:focus { border: 2px solid #AB2923 !important; background: #1e1e1e !important; box-shadow: none !important; outline: none !important; } /* ── Sidebar / Drawer ── */ [data-theme="dark"] .panel-box2.panel-sidebar, [data-theme="dark"] .sidebar-wrap { background-color: var(--dm-bg2) !important; } [data-theme="dark"] .nav.box-nav .nav-link { color: var(--dm-text2) !important; border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .nav.box-nav .nav-link.active, [data-theme="dark"] .nav.box-nav .nav-link:hover { color: #AB2923 !important; } [data-theme="dark"] .closemenu { color: var(--dm-text3) !important; } /* ── Modals ── */ [data-theme="dark"] .modal-content { background-color: var(--dm-bg2) !important; color: var(--dm-text) !important; } [data-theme="dark"] .modal-content .heading p, [data-theme="dark"] .modal-content h4 { color: var(--dm-text) !important; } [data-theme="dark"] .modal-content .bottom { border-top-color: var(--dm-border) !important; } /* ── Datepicker ── */ [data-theme="dark"] .dp-popup { background: var(--dm-bg2) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .dp-nav { color: var(--dm-text2) !important; } [data-theme="dark"] .dp-nav:hover { background: var(--dm-bg4) !important; } [data-theme="dark"] .dp-csel-btn { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .dp-csel-list { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .dp-opt { color: var(--dm-text2) !important; } [data-theme="dark"] .dp-opt:hover, [data-theme="dark"] .dp-opt-sel { background: var(--dm-bg4) !important; color: #AB2923 !important; } [data-theme="dark"] .dp-weekdays span { color: var(--dm-text3) !important; } [data-theme="dark"] .dp-day { color: var(--dm-text2) !important; } [data-theme="dark"] .dp-day:hover { background: var(--dm-bg4) !important; } [data-theme="dark"] .dp-day.dp-other { color: var(--dm-text3) !important; } [data-theme="dark"] .dp-day.dp-sel { background: #AB2923 !important; color: #fff!important; } [data-theme="dark"] .dp-day.dp-today { color: #AB2923 !important; } /* ── Outline button (Back, etc.) ── */ [data-theme="dark"] .tf-btn.outline { background-color: var(--dm-bg3) !important; border-color: #AB2923 !important; color: #AB2923 !important; } [data-theme="dark"] .tf-btn.outline:hover { background-color: #AB2923 !important; color: #fff!important; } /* ── Receipt page ── */ [data-theme="dark"] .list-info-bill .text-success { color: #1ee0ac !important; } /* ── Generic text cleanup ── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--dm-text); } [data-theme="dark"] .secondary_color { color: var(--dm-text3) !important; } [data-theme="dark"] .on_surface_color { color: var(--dm-text) !important; } /* ── Theme Toggle UI ── */ .theme-toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; border-radius: 50px; overflow: hidden; } .theme-toggle-switch input { opacity: 0; width: 0; height: 0; } .theme-toggle-slider { position: absolute; inset: 0; background: #ddd; border-radius: 50px; transition: background .25s; cursor: pointer; } .theme-toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .25s; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); } .theme-toggle-switch input:checked+.theme-toggle-slider { background: #AB2923; } .theme-toggle-switch input:checked+.theme-toggle-slider::before { transform: translateX(20px); } /* ── Dark mode toggle row ── */ [data-theme="dark"] .theme-toggle-row { border-bottom-color: var(--dm-border) !important; } /* ── Profile Page ── */ [data-theme="dark"] .profile-card { background: var(--dm-bg2) !important; box-shadow: 0 1px 8px rgba(0, 0, 0, .3) !important; } [data-theme="dark"] .profile-row { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .profile-row-sub { color: var(--dm-text3) !important; } [data-theme="dark"] .profile-row-icon { background: var(--dm-bg3) !important; } [data-theme="dark"] .profile-row.danger .profile-row-icon { background: #2e0a0a !important; } [data-theme="dark"] .profile-section-title { color: var(--dm-text3) !important; } /* Pill tabs — see the single source of truth in the "Pill Tabs" block above. A duplicate .pill-slider override lived here and, loading later, silently beat that block by source order. Removed rather than kept in sync. */ /* KYC badges */ [data-theme="dark"] .kyc-badge.unverified { background: #2a1500 !important; color: #ff8c42 !important; } [data-theme="dark"] .kyc-badge.pending { background: rgba(171, 41, 35, .15) !important; color: #AB2923 !important; } [data-theme="dark"] .kyc-badge.verified { background: #0a2e0a !important; color: #66bb6a !important; } [data-theme="dark"] .kyc-badge.rejected { background: #2e0a0a !important; color: #ef9a9a !important; } /* KYC status boxes (hardcoded inline bg) */ [data-theme="dark"] #tab-kyc [style*="background:#e8f5e9"], [data-theme="dark"] #tab-kyc [style*="background:#e3f2fd"], [data-theme="dark"] #tab-kyc [style*="background:#fce4ec"], [data-theme="dark"] #tab-kyc [style*="background:#fffbee"] { background: var(--dm-bg3) !important; border: 1px solid var(--dm-border) !important; } [data-theme="dark"] #tab-kyc p[style*="color:#555"] { color: var(--dm-text2) !important; } [data-theme="dark"] #tab-kyc p[style*="color:#777"] { color: var(--dm-text2) !important; } [data-theme="dark"] #tab-kyc p[style*="color:#aaa"] { color: var(--dm-text3) !important; } [data-theme="dark"] #tab-kyc p[style*="color:#111"] { color: var(--dm-text) !important; } /* 2FA toggle */ [data-theme="dark"] .toggle-slider { background: #3a3a3a !important; } [data-theme="dark"] input:checked+.toggle-slider { background: #AB2923 !important; } /* Timezone panel */ [data-theme="dark"] .panel-timezone { background: var(--dm-bg2) !important; } [data-theme="dark"] .panel-timezone select { background: var(--dm-bg3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* Footer row. These mirror the .panel-logout rules — without them the Cancel link inherited dark body text on the dark panel and was invisible, and the divider stayed at its light-mode #eee. */ [data-theme="dark"] .panel-timezone .bottom { background-color: var(--dm-bg2) !important; } [data-theme="dark"] .panel-timezone .bottom > *:first-child { border-right: 1px solid var(--dm-border) !important; } [data-theme="dark"] .panel-timezone .bottom a { color: var(--dm-text2) !important; } [data-theme="dark"] .panel-timezone .bottom a:active { color: var(--dm-text) !important; } /* --mp-brand is already the lifted #E8635C in dark, so Save reads clearly. */ [data-theme="dark"] .panel-timezone .bottom button { background: transparent !important; color: var(--mp-brand) !important; } /* ── SweetAlert2 in dark ── */ [data-theme="dark"] .swal2-popup { background: var(--dm-bg2) !important; color: var(--dm-text) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, .6) !important; } [data-theme="dark"] .swal2-title { color: var(--dm-text) !important; } [data-theme="dark"] .swal2-html-container, [data-theme="dark"] .swal2-content { color: var(--dm-text2) !important; } [data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(30, 224, 172, .3) !important; } [data-theme="dark"] .swal2-icon.swal2-success [class^=swal2-success-line] { background: #1ee0ac !important; } [data-theme="dark"] .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background: #e53935 !important; } [data-theme="dark"] .swal2-icon.swal2-warning { border-color: #AB2923 !important; color: #AB2923 !important; } [data-theme="dark"] .swal2-icon.swal2-info { border-color: #64b5f6 !important; color: #64b5f6 !important; } [data-theme="dark"] .swal2-timer-progress-bar { background: rgba(171, 41, 35, .5) !important; } [data-theme="dark"] .swal2-close { color: var(--dm-text3) !important; } [data-theme="dark"] .swal2-close:hover { color: var(--dm-text) !important; } [data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-textarea, [data-theme="dark"] .swal2-select { background: var(--dm-bg3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .swal2-input:focus, [data-theme="dark"] .swal2-textarea:focus { border-color: #AB2923 !important; box-shadow: none !important; } [data-theme="dark"] .swal2-backdrop-show { background: rgba(0, 0, 0, .75) !important; } /* ── Button spinner dots — always black (visible on yellow buttons) ── */ .spinner>div { background-color: #000 !important; } /* ── Scrollbar ── */ [data-theme="dark"] ::-webkit-scrollbar { width: 4px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dm-bg2); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dm-bg4); border-radius: 4px; } /* ── Transactions Page ── */ [data-theme="dark"] .filter-card { background: var(--dm-bg2, #1e1e1e) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, .35) !important; } [data-theme="dark"] .search-wrap input { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .search-wrap input:focus { border-color: #AB2923 !important; } [data-theme="dark"] .search-wrap .s-ico { color: #555 !important; } [data-theme="dark"] .sel-box { background: var(--dm-bg3) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .sel-box:focus { border-color: #AB2923 !important; } [data-theme="dark"] .date-row input[type=date] { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; color-scheme: dark; } [data-theme="dark"] .date-row input[type=date]:focus { border-color: #AB2923 !important; } [data-theme="dark"] .date-sep { color: #444 !important; } [data-theme="dark"] .txn-item { background: var(--dm-bg2, #1e1e1e) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important; } [data-theme="dark"] .t-ref { color: #555 !important; } [data-theme="dark"] .a-time { color: #666 !important; } [data-theme="dark"] .t-badge.Successful { background: #0a2e20 !important; color: #00dfa3 !important; } [data-theme="dark"] .t-badge.Pending { background: rgba(171, 41, 35, .15) !important; color: #AB2923 !important; } [data-theme="dark"] .t-badge.Failed { background: #2e0a0a !important; color: #e53935 !important; } [data-theme="dark"] .pag-btn { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .pag-btn.on { background: #AB2923 !important; border-color: #AB2923 !important; color: #fff!important; } [data-theme="dark"] .txn-empty .e-ico { color: #333 !important; } /* ── Receipt Page ── */ [data-theme="dark"] .wrap-success { background: var(--dm-bg) !important; } [data-theme="dark"] .success_box { background: var(--dm-bg2) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .success_box .content .top h2 { color: var(--dm-text) !important; } [data-theme="dark"] .success_box .content .inner p { color: var(--dm-text2) !important; } [data-theme="dark"] .wrapper-bill .archive-top, [data-theme="dark"] .wrapper-bill .archive-bottom { background: var(--dm-bg3) !important; } [data-theme="dark"] .wrapper-bill .archive-top { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .wrapper-bill .archive-bottom { border-top-color: var(--dm-border) !important; } [data-theme="dark"] .wrapper-bill .archive-bottom::before, [data-theme="dark"] .wrapper-bill .archive-bottom::after { background: #555 !important; } [data-theme="dark"] .list-info-bill { color: var(--dm-text2) !important; } [data-theme="dark"] .list-info-bill span { color: var(--dm-text) !important; } [data-theme="dark"] .list-info-bill:not(:last-child) { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .wrap-success .line-through { background: rgba(171, 41, 35, 0.06) !important; } /* ── KYC Page ── */ [data-theme="dark"] .kyc-wrap { background: var(--dm-bg) !important; } [data-theme="dark"] .kyc-card { background: var(--dm-bg2) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .4) !important; } [data-theme="dark"] .kyc-card-hero h2 { color: var(--dm-text) !important; } [data-theme="dark"] .kyc-card-hero p { color: var(--dm-text3) !important; } /* Status pills */ [data-theme="dark"] .status-pill.unverified { background: #2a1500 !important; color: #ff8c42 !important; } [data-theme="dark"] .status-pill.pending { background: rgba(171, 41, 35, .15) !important; color: #AB2923 !important; } [data-theme="dark"] .status-pill.verified { background: #0a2e0a !important; color: #66bb6a !important; } [data-theme="dark"] .status-pill.rejected { background: #2e0a0a !important; color: #ef9a9a !important; } /* Name card */ [data-theme="dark"] .name-card { background: var(--dm-bg3) !important; border: 1px solid var(--dm-border) !important; } [data-theme="dark"] .name-card .label { color: var(--dm-text3) !important; } [data-theme="dark"] .name-card .value { color: var(--dm-text) !important; } [data-theme="dark"] .name-card .hint { color: var(--dm-text3) !important; } /* ID type toggle */ [data-theme="dark"] .id-toggle label { border-color: var(--dm-border) !important; background: var(--dm-bg3) !important; } [data-theme="dark"] .id-toggle label.selected { border-color: #AB2923 !important; background: rgba(171, 41, 35, .15) !important; } [data-theme="dark"] .id-toggle .id-name { color: var(--dm-text) !important; } [data-theme="dark"] .id-toggle label.selected .id-name { color: #AB2923 !important; } [data-theme="dark"] .id-toggle .id-desc { color: var(--dm-text3) !important; } [data-theme="dark"] .id-toggle .check-dot { border-color: #444 !important; } /* KYC number input */ [data-theme="dark"] .kyc-input-wrap label { color: var(--dm-text3) !important; } [data-theme="dark"] .kyc-input-wrap input { background: var(--dm-bg3) !important; border: 2px solid var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .kyc-input-wrap input:focus { border: 2px solid #AB2923 !important; } [data-theme="dark"] .kyc-input-wrap input::placeholder { color: var(--dm-text3) !important; } /* Info / privacy boxes */ [data-theme="dark"] .info-box { background: rgba(171, 41, 35, .15) !important; border-color: #4a3500 !important; } [data-theme="dark"] .info-box .icon { color: #AB2923 !important; } [data-theme="dark"] .info-box p { color: #c9a030 !important; } [data-theme="dark"] .info-box[style*="background:#fce4ec"] { background: #2e0a0a !important; border-color: #5a1a1a !important; } [data-theme="dark"] .info-box[style*="background:#fce4ec"] p { color: #ef9a9a !important; } [data-theme="dark"] .info-box[style*="background:#fce4ec"] .icon { color: #ef9a9a !important; } [data-theme="dark"] .privacy-box { background: #0a2e0a !important; border-color: #1a4a1a !important; } [data-theme="dark"] .privacy-box .icon { color: #66bb6a !important; } [data-theme="dark"] .privacy-box p { color: #81c784 !important; } [data-theme="dark"] .privacy-box strong { color: #a5d6a7 !important; } /* Step bar inactive */ [data-theme="dark"] .kyc-step { background: var(--dm-bg4) !important; } [data-theme="dark"] .kyc-step.done { background: #AB2923 !important; } /* Trust badges */ [data-theme="dark"] .trust-badge { background: var(--dm-bg3) !important; color: var(--dm-text3) !important; } /* Pending box */ [data-theme="dark"] .pending-box .big-icon { color: #AB2923 !important; } [data-theme="dark"] .pending-box h3 { color: #AB2923 !important; } [data-theme="dark"] .pending-box p { color: var(--dm-text3) !important; } /* Pending info banner (inline style) */ [data-theme="dark"] .pending-box [style*="background:#e3f2fd"] { background: rgba(171, 41, 35, .15) !important; color: #AB2923 !important; border-radius: 12px; } [data-theme="dark"] .pending-box [style*="background:#e3f2fd"] * { color: #AB2923 !important; } /* Verified box */ [data-theme="dark"] .verified-box .big-icon { color: #66bb6a !important; } [data-theme="dark"] .verified-box h3 { color: #66bb6a !important; } [data-theme="dark"] .verified-box p { color: var(--dm-text3) !important; } [data-theme="dark"] .verified-box [style*="background:#e8f5e9"] { background: #0a2e0a !important; color: #66bb6a !important; } [data-theme="dark"] .verified-box [style*="background:#e8f5e9"] * { color: #66bb6a !important; } /* "Select ID Type" label */ [data-theme="dark"] #kycForm>div>label[style] { color: var(--dm-text3) !important; } /* ── Support Page ── */ [data-theme="dark"] .list-bill-view { background: var(--dm-bg2) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .3) !important; } [data-theme="dark"] .list-bill-view .content h4, [data-theme="dark"] .list-bill-view .content p { color: var(--dm-text) !important; } [data-theme="dark"] .list-bill-view .icon-right { color: var(--dm-text3) !important; } [data-theme="dark"] .faq-item { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .faq-question { background: var(--dm-bg2) !important; color: var(--dm-text) !important; } [data-theme="dark"] .faq-answer { color: var(--dm-text2) !important; } [data-theme="dark"] .faq-answer strong { color: var(--dm-text) !important; } /* ── All Services Page ── */ [data-theme="dark"] .svc-section-title { color: var(--dm-text3) !important; } [data-theme="dark"] .svc-card { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important; } [data-theme="dark"] .svc-name { color: var(--dm-text2) !important; } /* ── Info / Alert boxes with inline light backgrounds ── */ [data-theme="dark"] [style*="background:#FBEDEC"], [data-theme="dark"] [style*="background: #FBEDEC"], [data-theme="dark"] [style*="background:#fff8e1"], [data-theme="dark"] [style*="background: #fff8e1"] { background: rgba(171, 41, 35, .15) !important; color: #e6b800 !important; } [data-theme="dark"] [style*="background:#e8f5e9"], [data-theme="dark"] [style*="background: #e8f5e9"] { background: #0a2e0a !important; color: #66bb6a !important; } [data-theme="dark"] [style*="background:#fce4ec"], [data-theme="dark"] [style*="background: #fce4ec"] { background: #2e0a0a !important; color: #ef9a9a !important; } [data-theme="dark"] [style*="background:#e3f2fd"], [data-theme="dark"] [style*="background: #e3f2fd"] { background: rgba(171, 41, 35, .15) !important; color: #AB2923 !important; } [data-theme="dark"] [style*="background:#e3f2fd"] [style*="color:#1565c0"], [data-theme="dark"] [style*="background: #e3f2fd"] [style*="color:#1565c0"] { color: #AB2923 !important; } [data-theme="dark"] [style*="background:#f3e5f5"], [data-theme="dark"] [style*="background: #f3e5f5"] { background: #1a0a2e !important; color: #ce93d8 !important; } /* ── Affiliate / Refer & Earn page ── */ [data-theme="dark"] .aff-stat { border-right-color: var(--dm-border) !important; } [data-theme="dark"] .aff-stat-val { color: var(--dm-text) !important; } [data-theme="dark"] .aff-heading { color: #666 !important; } [data-theme="dark"] .aff-qr-box { background: #1a1a1a !important; border-color: rgba(171, 41, 35, .5) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, .4) !important; } [data-theme="dark"] .aff-qr-card { background: transparent !important; border-color: transparent !important; box-shadow: none !important; padding: 0 !important; } [data-theme="dark"] .aff-copy-inner { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .aff-copy-inner input, [data-theme="dark"] .aff-copy-inner input:focus, [data-theme="dark"] .aff-copy-inner input:active { color: var(--dm-text) !important; background: transparent !important; outline: none !important; } [data-theme="dark"] .aff-copy-inner input::selection, [data-theme="dark"] .aff-copy-inner input::-webkit-selection { background: rgba(171, 41, 35, .3) !important; color: #fff !important; } [data-theme="dark"] .aff-copy-field label { color: #888 !important; } /* Must carry the gradient too: this selector (0,2,0) outranks the .aff-share-btn rule in affiliate.css (0,1,0), so leaving it flat here would silently undo the gradient in dark mode only. */ [data-theme="dark"] .aff-share-btn { background: var(--mp-btn-grad) !important; color: #fff!important; } [data-theme="dark"] .aff-share-btn:hover { background: var(--mp-btn-grad-hover) !important; } [data-theme="dark"] .aff-step { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; box-shadow: none !important; } [data-theme="dark"] .aff-step-num { background: #AB2923 !important; color: #fff!important; } [data-theme="dark"] .aff-step-title { color: var(--dm-text) !important; } [data-theme="dark"] .aff-step-desc { color: #666 !important; } [data-theme="dark"] .aff-list-card { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; box-shadow: none !important; } [data-theme="dark"] .aff-ref-item { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .aff-ref-name { color: var(--dm-text) !important; } [data-theme="dark"] .aff-ref-meta { color: #555 !important; } [data-theme="dark"] .aff-empty { color: #555 !important; } [data-theme="dark"] .aff-empty p { color: #555 !important; } [data-theme="dark"] .aff-empty small { color: #444 !important; } [data-theme="dark"] .pill-verified { background: #0a2e1a !important; color: #00c98a !important; } [data-theme="dark"] .pill-pending { background: rgba(171, 41, 35, .15) !important; color: #AB2923 !important; } [data-theme="dark"] .pill-none { background: #2a2a2a !important; color: #555 !important; } [data-theme="dark"] .pill-paid { background: #0a1a3a !important; color: #7ca8ff !important; } /* ── Auth pages ── */ [data-theme="dark"] .header { background: var(--dm-bg) !important; border-bottom: 1px solid var(--dm-border) !important; } [data-theme="dark"] .auth-card { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .auth-card h1, [data-theme="dark"] .auth-card h2 { color: var(--dm-text) !important; } [data-theme="dark"] .auth-card .auth-subtitle { color: var(--dm-text2) !important; } [data-theme="dark"] .auth-logo-area h4 { color: var(--dm-text) !important; } [data-theme="dark"] .auth-logo-inline-text h4 { color: var(--dm-text) !important; } [data-theme="dark"] .auth-logo-inline-text p { color: var(--dm-text2) !important; } [data-theme="dark"] .auth-logo-icon-wrap { background: #1a1a1a !important; border-color: #2e2e2e !important; box-shadow: none !important; } [data-theme="dark"] .auth-google-btn, [data-theme="dark"] .auth-biometric-btn { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .auth-or-line { color: var(--dm-text2) !important; } [data-theme="dark"] .auth-or-line::before, [data-theme="dark"] .auth-or-line::after { background: var(--dm-border) !important; } [data-theme="dark"] .auth-bottom-link { color: var(--dm-text2) !important; } [data-theme="dark"] .auth-bottom-link a { color: #AB2923 !important; } [data-theme="dark"] .auth-forgot-link { color: var(--dm-text2) !important; } [data-theme="dark"] .register-section .tf-form h1 span, [data-theme="dark"] .login-section .tf-form h1 span { color: var(--dm-text2) !important; } [data-theme="dark"] .group-input input, [data-theme="dark"] .group-input select { background: var(--dm-bg3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .group-input label { color: var(--dm-text2) !important; background-color: var(--dm-bg2) !important; } [data-theme="dark"] .auth-card .group-input label { background-color: var(--dm-bg2) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .auth-card .group-input input, [data-theme="dark"] .auth-card .group-input select { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; border-radius: 14px !important; color: var(--dm-text) !important; } [data-theme="dark"] .fancy-checkbox span { color: var(--dm-text2) !important; } [data-theme="dark"] .otp-digit { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ── Auth single-column layout dark mode ── */ [data-theme="dark"] .auth-bg { background: #111114; } [data-theme="dark"] body:has(.auth-bg), [data-theme="dark"] .app-body-wrap:has(.auth-bg) { background: #111114 !important; } [data-theme="dark"] .auth-theme-btn { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .12) !important; color: #aaa !important; box-shadow: none !important; } [data-theme="dark"] .auth-logo-area h4, [data-theme="dark"] .auth-logo-inner h4 { color: var(--dm-text) !important; } [data-theme="dark"] .auth-card { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 32px rgba(0, 0, 0, .4) !important; } [data-theme="dark"] .auth-card h2 { color: var(--dm-text) !important; } [data-theme="dark"] .auth-card .auth-subtitle { color: var(--dm-text2) !important; } [data-theme="dark"] .auth-card .group-input label { background-color: var(--dm-bg2) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .auth-card .group-input input, [data-theme="dark"] .auth-card .group-input select { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .auth-card .auth-or-line { color: var(--dm-text2) !important; } [data-theme="dark"] .auth-card .auth-or-line::before, [data-theme="dark"] .auth-card .auth-or-line::after { background: var(--dm-border) !important; } [data-theme="dark"] .auth-card .auth-google-btn, [data-theme="dark"] .auth-card .auth-biometric-btn { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .auth-bottom-link { color: var(--dm-text2) !important; } [data-theme="dark"] .auth-forgot-link { color: var(--dm-text2) !important; } [data-theme="dark"] .auth-tagline h3 { color: var(--dm-text) !important; } [data-theme="dark"] .auth-tagline p { color: var(--dm-text2) !important; } [data-theme="dark"] .auth-tagline-feature { color: var(--dm-text2) !important; } [data-theme="dark"] .auth-tagline-feature-icon { background: rgba(171, 41, 35, .1) !important; border-color: rgba(171, 41, 35, .2) !important; } [data-theme="dark"] .auth-trust-item { color: #444 !important; } [data-theme="dark"] .otp-digit { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ── Auth split layout dark mode ── */ [data-theme="dark"] .auth-page-bg { background: #0f0f0f; } [data-theme="dark"] .auth-split-card { background: var(--dm-bg2); box-shadow: 0 8px 40px rgba(0, 0, 0, .5); } [data-theme="dark"] .auth-left { background: var(--dm-bg2); border-right-color: var(--dm-border); } [data-theme="dark"] .auth-left-logo span { color: var(--dm-text); } [data-theme="dark"] .auth-left-body h2 { color: var(--dm-text); } [data-theme="dark"] .auth-left-body>p { color: var(--dm-text2); } [data-theme="dark"] .auth-feature-item { color: var(--dm-text2); } [data-theme="dark"] .auth-feature-icon { background: rgba(171, 41, 35, .1); } [data-theme="dark"] .auth-left-badge { background: rgba(171, 41, 35, .07); border-color: rgba(171, 41, 35, .2); } [data-theme="dark"] .auth-left-badge-text strong { color: var(--dm-text); } [data-theme="dark"] .auth-left-badge-text span { color: var(--dm-text2); } [data-theme="dark"] .auth-right { background: var(--dm-bg2); } [data-theme="dark"] .auth-right h2 { color: var(--dm-text); } [data-theme="dark"] .auth-right .auth-subtitle { color: var(--dm-text2); } [data-theme="dark"] .auth-right .group-input label { background-color: var(--dm-bg2) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .auth-right .group-input input, [data-theme="dark"] .auth-right .group-input select { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .auth-mobile-logo span { color: var(--dm-text); } [data-theme="dark"] .auth-theme-btn { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: #aaa; } /* ── Autofill override (dark mode) ── */ [data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] input:-webkit-autofill:hover, [data-theme="dark"] input:-webkit-autofill:focus, [data-theme="dark"] input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #252525 inset !important; box-shadow: 0 0 0 1000px #252525 inset !important; -webkit-text-fill-color: #f0f0f0 !important; caret-color: #f0f0f0; transition: background-color 9999s ease-in-out 0s; }