/* * ============================================================ * DARK MODE — dashboard-style.css override * Injete APÓS dashboard-style.css e dark-mode.css * * Ativação: classe .dark-mode no * Toggle: document.documentElement.classList.toggle('dark-mode') * ============================================================ */ /* ============================================================ 1. VARIÁVEIS RAIZ — tokens do dashboard ============================================================ */ html.dark-mode { /* Superfícies */ --body: #090a0a; --white: #0e0f0f; --black: #f1f1ed; /* Texto */ --header: #f1f1ed; --text: #b8bbb4; --muted-color: #777970; /* Bordas */ --border: rgba(255,255,255,.10); --border-color: rgba(255,255,255,.10); --gray-border: rgba(255,255,255,.10); /* Backgrounds */ --bg: #141515; --bg2: #1a1c1a; --sky-color: rgba(255,255,255,.04); --main-background: #090a0a; /* Sombras */ --box-shadow: 0 8px 32px rgba(0,0,0,.55); --shadow-color: rgba(0,0,0,.55); /* Status */ --soft-warning: rgba(255,172,11,.12); --soft-success: rgba(90,154,90,.12); --soft-info: rgba(180,200,255,.08); --soft-danger: rgba(210,60,60,.12); --soft-gray: rgba(255,255,255,.04); /* Heading/parágrafo */ --heading-color: #f1f1ed; --paragraph-color: #b8bbb4; } /* ============================================================ 2. BODY & HTML ============================================================ */ html.dark-mode, html.dark-mode body { background-color: #090a0a !important; color: #b8bbb4 !important; } /* ============================================================ 3. TIPOGRAFIA GLOBAL ============================================================ */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: #f1f1ed !important; } html.dark-mode p { color: #b8bbb4 !important; } html.dark-mode span { color: inherit; } html.dark-mode a { color: #c8cac0 !important; } html.dark-mode a:hover { color: #f1f1ed !important; } html.dark-mode .text-dark { color: #f1f1ed !important; } html.dark-mode .text-muted { color: #777970 !important; } html.dark-mode .text-primary { color: #c8cac0 !important; } html.dark-mode .fw-semibold { color: #f1f1ed !important; } html.dark-mode .small, html.dark-mode small { color: #777970 !important; } html.dark-mode .color-base, html.dark-mode .text-base { color: #c8cac0 !important; } html.dark-mode .text-paragraph { color: #b8bbb4 !important; } html.dark-mode .heading-color { color: #f1f1ed !important; } /* ============================================================ 4. NAVBAR (topo desktop) ============================================================ */ html.dark-mode .navbar-area, html.dark-mode .navbar-area .navbar-wrap { background: rgba(9,10,10,.92) !important; backdrop-filter: blur(22px) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 4px 20px rgba(0,0,0,.4) !important; } html.dark-mode .navbar-area .logo-area h6, html.dark-mode .navbar-area .header-right li .user h6 { color: #f1f1ed !important; } html.dark-mode .navbar-area .header-right li .user { border-left-color: rgba(255,255,255,.10) !important; } /* Author card dropdown */ html.dark-mode .navbar-area .header-right .author-card { background: rgba(14,15,15,.97) !important; border-color: rgba(255,255,255,.10) !important; border-top-color: rgba(255,255,255,.25) !important; backdrop-filter: blur(20px) !important; box-shadow: 0 30px 80px rgba(0,0,0,.55) !important; } html.dark-mode .navbar-area .header-right .author-card .names { color: #f1f1ed !important; } html.dark-mode .navbar-area .header-right .author-card .balance { background: rgba(255,255,255,.06) !important; border-top: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .navbar-area .header-right .author-card .list-details a span { background: rgba(255,255,255,.07) !important; } html.dark-mode .navbar-area .header-right .author-card .list-details a:hover span { background: rgba(255,255,255,.16) !important; } /* ============================================================ 5. MOBILE NAVBAR ============================================================ */ html.dark-mode .mobile-navbar-area { background: rgba(9,10,10,.96) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .mobile-navbar-area .user { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .mobile-navbar-area .user li h6 { color: #f1f1ed !important; } /* ============================================================ 6. SIDEBAR (menu lateral) ============================================================ */ html.dark-mode .sidebar-menu { background: rgba(9,10,10,.98) !important; border-right: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .sidebar-menu .sidebar-copyright { border-top-color: rgba(255,255,255,.10) !important; } /* ============================================================ 7. LEFT MENU BOX (links do sidebar) ============================================================ */ html.dark-mode .left-menu-box li a { background: rgba(255,255,255,.035) !important; color: #bebfb8 !important; border: 1px solid transparent !important; transition: .3s !important; } html.dark-mode .left-menu-box li a:hover, html.dark-mode .left-menu-box li .active { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.18) !important; color: #f1f1ed !important; } html.dark-mode .left-menu-box li a img, html.dark-mode .left-menu-box li a svg { filter: brightness(.8) !important; } html.dark-mode .left-menu-box li a:hover img, html.dark-mode .left-menu-box li a:hover svg, html.dark-mode .left-menu-box li .active img, html.dark-mode .left-menu-box li .active svg { filter: brightness(1.4) !important; } /* Submenu agrupado */ html.dark-mode .left-menu-box .menu-group .submenu { border-left-color: rgba(255,255,255,.12) !important; } html.dark-mode .left-menu-box .menu-group .submenu a { background: transparent !important; color: #bebfb8 !important; border-color: transparent !important; } html.dark-mode .left-menu-box .menu-group .submenu a:hover { background: rgba(255,255,255,.07) !important; color: #f1f1ed !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .left-menu-box .menu-group .submenu a.active { background: rgba(255,255,255,.09) !important; color: #f1f1ed !important; border-color: rgba(255,255,255,.18) !important; } html.dark-mode .left-menu-box .menu-group .submenu a.active::before { background: #c8cac0 !important; } /* ============================================================ 8. FOOTER MOBILE ============================================================ */ html.dark-mode .footer-area-mobile { background: rgba(9,10,10,.96) !important; border-top: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 -8px 32px rgba(0,0,0,.38) !important; } html.dark-mode .footer-area-mobile ul li a { color: #bebfb8 !important; } html.dark-mode .footer-area-mobile ul li.active a, html.dark-mode .footer-area-mobile ul li a:hover { color: #c8cac0 !important; } html.dark-mode .footer-area-mobile ul li.active a::before { background: #c8cac0 !important; } /* ============================================================ 9. SINGLE CARD BOX ============================================================ */ html.dark-mode .single-card-box { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 8px 32px rgba(0,0,0,.32) !important; } html.dark-mode .single-card-box.style-shadow { border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 20px 60px rgba(0,0,0,.42) !important; } /* ============================================================ 10. WALLET INNER CARD (cartão azul) ============================================================ */ html.dark-mode .walet-inner { background: linear-gradient(135deg,#111212 0%,#1e2120 35%,#0d0e0e 65%,#252827 100%) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 40px 80px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.22) !important; } html.dark-mode .walet-inner .title { color: rgba(255,255,255,.6) !important; } html.dark-mode .walet-inner .amount { color: #f1f1ed !important; } /* Sidebar wallet card (mantém gradiente azul original — card visual) */ html.dark-mode .sidebar-wallet-card__badge { background: rgba(255,255,255,.16) !important; } html.dark-mode .sidebar-wallet-panel .walet-slider .owl-dot { background: rgba(255,255,255,.18) !important; } /* ============================================================ 11. SINGLE AMOUNT CARD (KPIs do dashboard) ============================================================ */ html.dark-mode .single-amount-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 8px 24px rgba(0,0,0,.3) !important; } html.dark-mode .single-amount-card:hover { border-color: rgba(255,255,255,.28) !important; transform: translateY(-2px) !important; } html.dark-mode .single-amount-card h6 { color: #f1f1ed !important; } html.dark-mode .single-amount-card span { color: #777970 !important; } html.dark-mode .icon-container { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .single-amount-card a { border-color: rgba(255,255,255,.2) !important; color: #bebfb8 !important; } html.dark-mode .single-amount-card:hover a { background: rgba(255,255,255,.1) !important; } /* ============================================================ 12. SINGLE CHART INNER ============================================================ */ html.dark-mode .single-chart-inner { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .single-chart-inner .chart-head { border-bottom-color: rgba(255,255,255,.10) !important; } html.dark-mode .single-chart-inner .chart-head h6 { color: #f1f1ed !important; } html.dark-mode .single-chart-inner .chart-head .single-select { background: transparent !important; color: #bebfb8 !important; border: 0 !important; } html.dark-mode .single-chart-inner .details .chart-thumb h5 { color: #f1f1ed !important; } /* ============================================================ 13. SINGLE FORM CARD ============================================================ */ html.dark-mode .single-form-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .single-form-card .card-title { background: rgba(255,255,255,.055) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .single-form-card .card-title h5, html.dark-mode .single-form-card .card-title h6 { color: #f1f1ed !important; } html.dark-mode .single-form-card .card-main { background: transparent !important; } /* User feature header (barra colorida no topo dos cards) */ html.dark-mode .single-form-card .user-feature-header { background: linear-gradient(115deg,rgba(30,35,40,.95) 0%,rgba(20,25,30,.95) 48%,rgba(15,20,25,.95) 100%) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 8px 20px rgba(0,0,0,.4) !important; } html.dark-mode .single-form-card .user-feature-header__title { color: #f1f1ed !important; } html.dark-mode .single-form-card .user-feature-header__subtitle { color: rgba(255,255,255,.72) !important; } /* ============================================================ 14. INPUTS & SELECTS ============================================================ */ html.dark-mode .single-input-inner input, html.dark-mode .single-input-inner textarea, html.dark-mode .single-select-inner .single-select, html.dark-mode .form-control, html.dark-mode .form-select, html.dark-mode input[type=text], html.dark-mode input[type=email], html.dark-mode input[type=password], html.dark-mode input[type=number], html.dark-mode input[type=search], html.dark-mode input[type=tel], html.dark-mode input[type=url], html.dark-mode select, html.dark-mode textarea { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode input::placeholder, html.dark-mode textarea::placeholder, html.dark-mode .single-input-inner input::placeholder, html.dark-mode .single-input-inner textarea::placeholder { color: #777970 !important; } html.dark-mode .single-input-inner input:focus, html.dark-mode .single-input-inner textarea:focus, html.dark-mode .form-control:focus, html.dark-mode input:focus, html.dark-mode select:focus, html.dark-mode textarea:focus { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.28) !important; box-shadow: none !important; } html.dark-mode .single-input-inner label, html.dark-mode .single-select-inner label { color: #bebfb8 !important; } html.dark-mode .input-group-text { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .single-input-inner .input-group .form-control { border-color: rgba(255,255,255,.18) !important; } /* ============================================================ 15. NICE SELECT ============================================================ */ html.dark-mode .nice-select, html.dark-mode .single-select { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .nice-select .list, html.dark-mode .single-select .list { background: rgba(14,15,15,.97) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 16px 40px rgba(0,0,0,.5) !important; } html.dark-mode .nice-select .option, html.dark-mode .single-select .list li { color: #bebfb8 !important; } html.dark-mode .nice-select .option:hover, html.dark-mode .nice-select .option.selected, html.dark-mode .single-select .list li:hover, html.dark-mode .single-select .list li.selected { background: rgba(255,255,255,.08) !important; color: #f1f1ed !important; } html.dark-mode .nice-select .current { color: #f1f1ed !important; } /* ============================================================ 16. BOTÕES ============================================================ */ html.dark-mode .btn { font-family: inherit !important; border-radius: 10px !important; transition: .3s !important; position: relative !important; overflow: hidden !important; } html.dark-mode .btn-base { background: rgba(255,255,255,.10) !important; color: #f1f1ed !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.28) !important; } html.dark-mode .btn-base:hover { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.4) !important; color: #f1f1ed !important; } html.dark-mode .btn-white { background: rgba(255,255,255,.06) !important; color: #f1f1ed !important; border: 1px solid rgba(255,255,255,.12) !important; } html.dark-mode .btn-white:hover { background: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .btn-black { background: rgba(255,255,255,.08) !important; color: #f1f1ed !important; border: 1px solid rgba(255,255,255,.12) !important; } html.dark-mode .btn-border-base { background: transparent !important; color: #bebfb8 !important; border: 1px solid rgba(255,255,255,.22) !important; } html.dark-mode .btn-border-base:hover { background: rgba(255,255,255,.08) !important; color: #f1f1ed !important; border-color: rgba(255,255,255,.4) !important; } html.dark-mode .btn-light-primary { background: rgba(255,255,255,.06) !important; color: #bebfb8 !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .btn-light-success { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; border: 1px solid rgba(90,154,90,.22) !important; } html.dark-mode .btn-light-danger { background: rgba(210,60,60,.12) !important; color: #e08080 !important; border: 1px solid rgba(210,60,60,.22) !important; } html.dark-mode .btn-light-warning { background: rgba(255,172,11,.10) !important; color: #d4a84b !important; border: 1px solid rgba(255,172,11,.20) !important; } html.dark-mode .btn-light-info { background: rgba(180,200,255,.08) !important; color: #a0b8e8 !important; border: 1px solid rgba(180,200,255,.14) !important; } html.dark-mode .btn-light-secondary { background: rgba(255,255,255,.05) !important; color: #777970 !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .btn.btn-light, html.dark-mode .btn-light { background: rgba(255,255,255,.05) !important; color: #bebfb8 !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .btn-edit { background: rgba(180,200,255,.08) !important; color: #a0b8e8 !important; border-color: rgba(180,200,255,.18) !important; } html.dark-mode .btn-config { background: rgba(255,255,255,.05) !important; color: #777970 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .btn-qr { background: rgba(255,255,255,.06) !important; color: #bebfb8 !important; border-color: rgba(255,255,255,.10) !important; } /* dashboard primary button */ html.dark-mode .dashboard-user-layout .btn-primary, html.dark-mode .dashboard-user-layout .btn-base { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.22) !important; color: #f1f1ed !important; box-shadow: inset 0 1px rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.3) !important; } /* ============================================================ 17. TABELAS ============================================================ */ html.dark-mode .table { color: #b8bbb4 !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .table thead th { background: rgba(255,255,255,.04) !important; color: #bebfb8 !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .table tbody td { border-color: rgba(255,255,255,.06) !important; color: #b8bbb4 !important; } html.dark-mode .table-hover tbody tr:hover { background: rgba(255,255,255,.035) !important; } /* History table */ html.dark-mode .history-table .table-list .list-header { background: rgba(255,255,255,.04) !important; color: #bebfb8 !important; border-radius: 10px !important; } html.dark-mode .history-table .table-list .list-header li { color: #bebfb8 !important; } html.dark-mode .history-table .table-list .list-content { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .history-table .table-list .list-content:hover { border-color: rgba(255,255,255,.22) !important; } html.dark-mode .history-table .table-list .list-content li { color: #b8bbb4 !important; } html.dark-mode .history-table .table-list .list-content li .badge { background: rgba(90,154,90,.15) !important; color: #8fcf8f !important; } html.dark-mode .history-table .table-list .list-content li .badge.red { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .history-table .table-list .list-content li .badge.yellow { background: rgba(255,172,11,.10) !important; color: #d4a84b !important; } /* ============================================================ 18. BADGES ============================================================ */ html.dark-mode .badge { border-radius: 8px !important; } html.dark-mode .badge.bg-success, html.dark-mode .badge.bg-success-subtle { background: rgba(90,154,90,.18) !important; color: #8fcf8f !important; } html.dark-mode .badge.bg-danger, html.dark-mode .badge.bg-danger-subtle { background: rgba(210,60,60,.14) !important; color: #e08080 !important; } html.dark-mode .badge.bg-warning, html.dark-mode .badge.bg-warning-subtle { background: rgba(255,172,11,.12) !important; color: #d4a84b !important; } html.dark-mode .badge.bg-info, html.dark-mode .badge.bg-info-subtle { background: rgba(180,200,255,.10) !important; color: #a0b8e8 !important; } html.dark-mode .badge.bg-primary, html.dark-mode .badge.bg-primary-subtle { background: rgba(255,255,255,.08) !important; color: #bebfb8 !important; } html.dark-mode .badge.bg-secondary { background: rgba(255,255,255,.06) !important; color: #777970 !important; } /* ============================================================ 19. MODAL ============================================================ */ html.dark-mode .modal-content { background: rgba(14,15,15,.97) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 22px !important; box-shadow: 0 50px 120px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.08) !important; backdrop-filter: blur(28px) !important; } html.dark-mode .modal-header { border-bottom: 1px solid rgba(255,255,255,.08) !important; color: #f1f1ed !important; background: transparent !important; } html.dark-mode .modal-footer { border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .modal-title { color: #f1f1ed !important; } html.dark-mode .modal-backdrop { background: rgba(0,0,0,.75) !important; } /* TRX details */ html.dark-mode .trx-details div, html.dark-mode .full-width, html.dark-mode .trx-action { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .trx-details div strong, html.dark-mode .trx-action strong { color: #777970 !important; } html.dark-mode .trx-details div span, html.dark-mode .full-width span { color: #f1f1ed !important; } /* ============================================================ 20. TRX MODAL PREMIUM (.ud-trx-modal) ============================================================ */ html.dark-mode .user-dashboard .ud-trx-modal__content { background: radial-gradient(circle at top left, rgba(255,255,255,.03), transparent 26%), linear-gradient(180deg, #0e0f0f 0%, #111212 100%) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 28px 72px rgba(0,0,0,.65) !important; } html.dark-mode .user-dashboard .ud-trx-modal__hero { background: radial-gradient(circle at top right, rgba(255,255,255,.04), transparent 34%), linear-gradient(145deg, #141515 0%, #1a1c1a 100%) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 14px 32px rgba(0,0,0,.4) !important; } html.dark-mode .user-dashboard .ud-trx-modal__eyebrow { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #c8cac0 !important; } html.dark-mode .user-dashboard .ud-trx-modal__title { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-trx-modal__subtitle { color: #b8bbb4 !important; } html.dark-mode .user-dashboard .ud-trx-modal__amount-panel { background: linear-gradient(155deg, #090a0a 0%, #111212 58%, #0d0e0e 100%) !important; box-shadow: 0 18px 34px rgba(0,0,0,.5) !important; } html.dark-mode .user-dashboard .ud-trx-modal__amount { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-trx-modal__amount-label { color: rgba(255,255,255,.55) !important; } html.dark-mode .user-dashboard .ud-trx-modal__amount-note { color: rgba(255,255,255,.62) !important; } html.dark-mode .user-dashboard .ud-trx-modal__panel, html.dark-mode .user-dashboard .ud-trx-modal__action-panel { background: linear-gradient(180deg, rgba(20,21,21,.98) 0%, rgba(18,19,19,.98) 100%) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 14px 28px rgba(0,0,0,.3) !important; } html.dark-mode .user-dashboard .ud-trx-modal__panel-eyebrow, html.dark-mode .user-dashboard .ud-trx-modal__detail-label { color: #777970 !important; } html.dark-mode .user-dashboard .ud-trx-modal__panel-title { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-trx-modal__detail-card { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .user-dashboard .ud-trx-modal__detail-value { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-trx-modal__money-row { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .user-dashboard .ud-trx-modal__money-row span { color: #777970 !important; } html.dark-mode .user-dashboard .ud-trx-modal__money-row strong { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-trx-modal__note-copy { color: #b8bbb4 !important; } html.dark-mode .user-dashboard .ud-trx-modal__close { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #bebfb8 !important; } html.dark-mode .user-dashboard .ud-trx-modal__dismiss { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #b8bbb4 !important; } html.dark-mode .user-dashboard .ud-trx-modal__footer { border-top: 1px solid rgba(255,255,255,.08) !important; } /* ============================================================ 21. DROPDOWN ============================================================ */ html.dark-mode .dropdown-menu { background: rgba(14,15,15,.97) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 14px !important; box-shadow: 0 20px 60px rgba(0,0,0,.55) !important; backdrop-filter: blur(20px) !important; } html.dark-mode .dropdown-item { color: #bebfb8 !important; } html.dark-mode .dropdown-item:hover, html.dark-mode .dropdown-item:focus { background: rgba(255,255,255,.08) !important; color: #f1f1ed !important; } html.dark-mode .dropdown-item.active { background: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .dropdown-divider { border-color: rgba(255,255,255,.08) !important; } /* Language dropdown */ html.dark-mode .header-right li .lang .dropdown-menu { background: rgba(14,15,15,.97) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .header-right li .lang .dropdown-menu li + li { border-top-color: rgba(255,255,255,.08) !important; } /* ============================================================ 22. NAV TABS ============================================================ */ html.dark-mode .nav-tabs { border-bottom: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .nav-tabs .nav-link { color: #777970 !important; background: transparent !important; border: none !important; } html.dark-mode .nav-tabs .nav-link:hover { color: #bebfb8 !important; } html.dark-mode .nav-tabs .nav-link.active, html.dark-mode .nav-tabs .nav-item.show .nav-link { color: #f1f1ed !important; background: transparent !important; border-bottom: 2px solid rgba(255,255,255,.55) !important; } html.dark-mode .single-element-tab { border-color: rgba(255,255,255,.10) !important; } html.dark-mode .single-element-tab li a { color: #bebfb8 !important; background: transparent !important; } html.dark-mode .single-element-tab li a.active { border-bottom: 2px solid rgba(255,255,255,.55) !important; color: #f1f1ed !important; } /* ============================================================ 23. ALERTS ============================================================ */ html.dark-mode .alert { border-radius: 12px !important; border: 1px solid !important; } html.dark-mode .alert-success { background: rgba(90,154,90,.10) !important; border-color: rgba(90,154,90,.20) !important; color: #8fcf8f !important; } html.dark-mode .alert-danger { background: rgba(210,60,60,.10) !important; border-color: rgba(210,60,60,.20) !important; color: #e08080 !important; } html.dark-mode .alert-warning { background: rgba(255,172,11,.08) !important; border-color: rgba(255,172,11,.18) !important; color: #d4a84b !important; } html.dark-mode .alert-info { background: rgba(180,200,255,.06) !important; border-color: rgba(180,200,255,.12) !important; color: #a0b8e8 !important; } /* ============================================================ 24. BG HELPERS ============================================================ */ html.dark-mode .bg-white, html.dark-mode .bg-light, html.dark-mode .bg-sky, html.dark-mode .bg-main, html.dark-mode .bg-base { background: #0e0f0f !important; } html.dark-mode .bg-sky-2 { background: rgba(255,255,255,.035) !important; } html.dark-mode .bg-primary { background: rgba(255,255,255,.10) !important; } html.dark-mode .bg-black { background: rgba(0,0,0,.4) !important; } html.dark-mode .bg-light-warning { background: rgba(255,172,11,.08) !important; } /* ============================================================ 25. BORDER HELPERS ============================================================ */ html.dark-mode .border-bottom-1, html.dark-mode .border-bottom { border-color: rgba(255,255,255,.10) !important; } html.dark-mode .border-default { border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .border-bottom-1-dark { border-bottom: 1px solid rgba(255,255,255,.12) !important; } /* ============================================================ 26. SUMMERY LIST ============================================================ */ html.dark-mode .summery-list li { border-color: rgba(255,255,255,.08) !important; } html.dark-mode .summery-list li + li { border-top-color: rgba(255,255,255,.07) !important; } /* ============================================================ 27. PAGINATION ============================================================ */ html.dark-mode .pagination-list li a { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #bebfb8 !important; } html.dark-mode .pagination-list li a:hover, html.dark-mode .pagination-list li a.active { background: rgba(255,255,255,.12) !important; color: #f1f1ed !important; border-color: rgba(255,255,255,.28) !important; } /* ============================================================ 28. MAIN NOTICE CARD / KYC ============================================================ */ html.dark-mode .main-notice-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .main-notice-card h6 { color: #f1f1ed !important; border-bottom-color: rgba(255,255,255,.10) !important; } html.dark-mode .main-notice-card p { color: #b8bbb4 !important; } html.dark-mode .kyc-button { background: rgba(255,255,255,.09) !important; color: #f1f1ed !important; border: 1px solid rgba(255,255,255,.18) !important; } html.dark-mode .kyc-button:hover { background: rgba(255,255,255,.16) !important; } /* KYC notice card strip (barra de status) */ html.dark-mode .main-notice-card.kyc-notice-card { background: linear-gradient(90deg, #141515 0%, #0e0f0f 58%, #0d0e0e 100%) !important; border: 1px solid rgba(255,255,255,.10) !important; border-left: 2px solid rgba(255,255,255,.3) !important; } html.dark-mode .kyc-notice-card__title { color: #f1f1ed !important; } html.dark-mode .kyc-notice-card__text { color: #b8bbb4 !important; } /* ============================================================ 29. WALLET CARDS (grid de carteiras) ============================================================ */ html.dark-mode .wallet-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .wallet-card:hover { border-color: rgba(255,255,255,.22) !important; } html.dark-mode .wallet-currency-img-wrap { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .wallet-card__title-row h6 { color: #f1f1ed !important; } html.dark-mode .wallet-balance { color: #c8cac0 !important; } html.dark-mode .wallet-id-chip { color: #bebfb8 !important; } html.dark-mode .wallet-id-chip strong { color: #f1f1ed !important; } html.dark-mode .wallet-card__balance-panel { background: rgba(255,255,255,.04) !important; } html.dark-mode .wallet-card__balance-panel > span { color: #777970 !important; } html.dark-mode .wallet-card__balance-panel p { color: #777970 !important; } html.dark-mode .wallet-divider { background: rgba(255,255,255,.07) !important; } html.dark-mode .wallet-card__support-row { border-top-color: rgba(255,255,255,.07) !important; } html.dark-mode .wallet-id-copy { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #bebfb8 !important; } html.dark-mode .wallet-btn-icon { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; color: #bebfb8 !important; } html.dark-mode .wallet-btn-icon:hover { background: rgba(255,255,255,.16) !important; color: #f1f1ed !important; } html.dark-mode .wallet-transaction-info { color: #777970 !important; } /* ============================================================ 30. TRANSACTION ITEMS ============================================================ */ html.dark-mode .transaction-item { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .transaction-item:hover { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.22) !important; } html.dark-mode .transaction-icon { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; } /* ============================================================ 31. QR CARDS ============================================================ */ html.dark-mode .qr-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .qr-preview-wrapper { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .card-actions { background: rgba(255,255,255,.025) !important; border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .amount-label { color: #f1f1ed !important; } html.dark-mode .expires-label { color: #777970 !important; } html.dark-mode .qr-print-section { background: #0e0f0f !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .payment-details { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .detail-label { color: #777970 !important; } html.dark-mode .detail-value { color: #f1f1ed !important; } html.dark-mode .print-header .business-name { color: #f1f1ed !important; } html.dark-mode .print-header .business-subtitle { color: #bebfb8 !important; } /* ============================================================ 32. NOTIFICATION ============================================================ */ html.dark-mode .notification-card, html.dark-mode .notification-dropdown { background: rgba(14,15,15,.97) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .notification-header { background: rgba(255,255,255,.04) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .notification-header__title { color: #f1f1ed !important; } html.dark-mode .notification-item { border-bottom-color: rgba(255,255,255,.07) !important; } html.dark-mode .notification-item:hover { background: rgba(255,255,255,.04) !important; } html.dark-mode .notification-item__title { color: #f1f1ed !important; } html.dark-mode .notification-item__message { color: #bebfb8 !important; } html.dark-mode .notification-item__time { color: #777970 !important; } html.dark-mode .notification-item__mark-read { background: rgba(210,60,60,.14) !important; } /* ============================================================ 33. QUICK FUNCTION DROPDOWN ============================================================ */ html.dark-mode .quick-function-dropdown, html.dark-mode .quick-function-dropdown.quick-function-menu { background: rgba(14,15,15,.96) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 20px 60px rgba(0,0,0,.55) !important; } html.dark-mode .quick-function-menu__header { background: rgba(255,255,255,.03) !important; border: 0 !important; } html.dark-mode .quick-function-menu__heading { color: #f1f1ed !important; } html.dark-mode .quick-function-menu__subtitle { color: #777970 !important; } html.dark-mode .quick-function-menu__close { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #bebfb8 !important; } html.dark-mode .quick-function-menu__action { background: linear-gradient(180deg, #141515 0%, #111212 100%) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #f1f1ed !important; } html.dark-mode .quick-function-menu__action:hover { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 10px 22px rgba(0,0,0,.4) !important; } html.dark-mode .quick-function-menu__icon { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; color: #c8cac0 !important; } html.dark-mode .quick-function-menu__label { color: #bebfb8 !important; } html.dark-mode .quick-function-menu__wallet-card { background: linear-gradient(135deg, #141515 0%, #1a1c1a 100%) !important; border: 1px solid rgba(255,255,255,.14) !important; } html.dark-mode .quick-function-menu__scan { background: linear-gradient(180deg, #141515, #111212) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .quick-function-menu__footer-link { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .quick-function-menu__footer-copy strong { color: #c8cac0 !important; } html.dark-mode .quick-function-menu__footer-copy span { color: #777970 !important; } /* ============================================================ 34. MERCHANT CARDS ============================================================ */ html.dark-mode .merchant-card-item { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 4px 16px rgba(0,0,0,.28) !important; } html.dark-mode .merchant-card-item:hover { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 8px 32px rgba(0,0,0,.42) !important; } html.dark-mode .merchant-name-mobile, html.dark-mode .merchant-name-desktop { color: #f1f1ed !important; } html.dark-mode .merchant-url-mobile, html.dark-mode .merchant-url-desktop, html.dark-mode .merchant-currency-desktop { color: #777970 !important; } html.dark-mode .merchant-empty-state { background: rgba(255,255,255,.02) !important; border: 2px dashed rgba(255,255,255,.10) !important; } html.dark-mode .merchant-empty-title { color: #f1f1ed !important; } html.dark-mode .merchant-empty-subtitle { color: #bebfb8 !important; } /* ============================================================ 35. REFERRAL TREE ============================================================ */ html.dark-mode .referral-tree li::before, html.dark-mode .referral-tree li::after { background: rgba(255,255,255,.12) !important; } html.dark-mode .referral-tree li a { background: #0e0f0f !important; color: #bebfb8 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .referral-tree li a:hover { background: rgba(255,255,255,.06) !important; color: #f1f1ed !important; } /* ============================================================ 36. REFUND TABLE ============================================================ */ html.dark-mode .refund-table ul { border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .refund-table ul li h6 { color: #f1f1ed !important; } html.dark-mode .refund-table ul li p { color: #777970 !important; } /* ============================================================ 37. ACTION BAR ============================================================ */ html.dark-mode .action-bar-area ul li .action-btn { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #bebfb8 !important; } html.dark-mode .action-bar-area ul li .action-btn:hover { background: rgba(255,255,255,.10) !important; } html.dark-mode .action-bar-area ul li.search { border-right-color: rgba(255,255,255,.10) !important; } /* ============================================================ 38. CHECKBOX TOGGLE ============================================================ */ html.dark-mode .checkbox-slide-check .checkbox__checkmark { background: rgba(255,255,255,.10) !important; } html.dark-mode .checkbox-slide-check input:checked ~ .checkbox__checkmark { background: rgba(255,255,255,.3) !important; } /* ============================================================ 39. BODY OVERLAY ============================================================ */ html.dark-mode .body-overlay { background: rgba(0,0,0,.85) !important; backdrop-filter: blur(8px) !important; } /* ============================================================ 40. SOCIAL MEDIA ICONS ============================================================ */ html.dark-mode .social-media li a { background: rgba(255,255,255,.06) !important; color: #bebfb8 !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .social-media li a:hover { background: rgba(255,255,255,.14) !important; color: #f1f1ed !important; } /* ============================================================ 41. AUTH / LOGIN PAGE ============================================================ */ html.dark-mode .auth-page { background: #090a0a !important; } html.dark-mode .login-card { background: rgba(14,15,15,.92) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 40px 100px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.08) !important; backdrop-filter: blur(20px) !important; } /* ============================================================ 42. SETTINGS PAGES ============================================================ */ html.dark-mode .settings-nav { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .settings-nav__link { color: #b8bbb4 !important; } html.dark-mode .settings-nav__link:hover { background: rgba(255,255,255,.06) !important; color: #f1f1ed !important; } html.dark-mode .settings-nav__link.is-active { background: rgba(255,255,255,.10) !important; color: #f1f1ed !important; box-shadow: none !important; } html.dark-mode .settings-section { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-section__header { background: rgba(255,255,255,.03) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .settings-section__title { color: #f1f1ed !important; } html.dark-mode .settings-section__subtitle { color: #b8bbb4 !important; } html.dark-mode .settings-section__body { background: transparent !important; } html.dark-mode .settings-profile-card, html.dark-mode .settings-content--panel { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .settings-profile-card__name { color: #f1f1ed !important; } html.dark-mode .settings-profile-card__meta { color: #b8bbb4 !important; } html.dark-mode .settings-actions { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .settings-actions__hint { color: #b8bbb4 !important; } html.dark-mode .settings-content--panel .form-control, html.dark-mode .settings-content--panel .form-select { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .settings-content--panel .form-label { color: #b8bbb4 !important; } /* Security */ html.dark-mode .security-check-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .security-check-card__title { color: #f1f1ed !important; } html.dark-mode .security-check-card__text { color: #b8bbb4 !important; } html.dark-mode .security-activity-item { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .security-activity-item__title { color: #f1f1ed !important; } html.dark-mode .security-activity-item__meta { color: #777970 !important; } html.dark-mode .security-activity-item__time { color: #777970 !important; } html.dark-mode .security-current-list div { border-bottom-color: rgba(255,255,255,.07) !important; } html.dark-mode .security-current-list dt { color: #b8bbb4 !important; } html.dark-mode .security-current-list dd { color: #f1f1ed !important; } /* KYC verify */ html.dark-mode .kyc-verify-hero { background: linear-gradient(135deg, #141515, #0e0f0f) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .kyc-verify-hero__title { color: #f1f1ed !important; } html.dark-mode .kyc-verify-hero__subtitle { color: #b8bbb4 !important; } html.dark-mode .kyc-verify-status { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .kyc-verify-form-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .kyc-verify-form-card__header { background: rgba(255,255,255,.03) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .kyc-verify-form-card__footer { background: rgba(255,255,255,.025) !important; border-top: 1px solid rgba(255,255,255,.08) !important; } /* ============================================================ 43. FEATURE SUMMARY WIDGET ============================================================ */ html.dark-mode .feature-summary-widget__panel { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 18px 40px rgba(0,0,0,.4) !important; } html.dark-mode .feature-summary-widget__header { border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .feature-summary-widget__title { color: #f1f1ed !important; } html.dark-mode .feature-summary-widget__subtitle { color: #b8bbb4 !important; } html.dark-mode .feature-summary-widget__meta { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .feature-summary-widget__card { background: #111212 !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; } html.dark-mode .feature-summary-widget__card:hover { border-color: rgba(255,255,255,.18) !important; box-shadow: 0 10px 18px rgba(0,0,0,.3) !important; } html.dark-mode .feature-summary-widget__label { color: #777970 !important; } html.dark-mode .feature-summary-widget__value { color: #f1f1ed !important; } html.dark-mode .feature-summary-widget__context { color: #777970 !important; } /* ============================================================ 44. PAYMENT LINKS ============================================================ */ html.dark-mode .payment-link-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .payment-link-card:hover { border-color: rgba(255,255,255,.22) !important; } html.dark-mode .payment-link-card__title { color: #f1f1ed !important; } html.dark-mode .payment-link-card__meta-line { color: #777970 !important; } html.dark-mode .payment-link-card__currency { background: rgba(255,255,255,.08) !important; color: #c8cac0 !important; } html.dark-mode .payment-link-card .payment-link-url-group { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .payment-link-card .payment-link-url-input { background: transparent !important; color: #b8bbb4 !important; } html.dark-mode .payment-link-card .payment-link-url-prefix { color: #777970 !important; } html.dark-mode .payment-link-card .payment-link-copy-btn { border-left-color: rgba(255,255,255,.10) !important; color: #bebfb8 !important; } html.dark-mode .payment-link-card__stat-label { color: #777970 !important; } html.dark-mode .payment-link-card__stat-value { color: #f1f1ed !important; } html.dark-mode .payment-link-empty { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .payment-link-empty::before { border-color: rgba(255,255,255,.08) !important; } html.dark-mode .payment-link-empty__title { color: #f1f1ed !important; } html.dark-mode .payment-link-empty__hint { color: #b8bbb4 !important; } html.dark-mode .payment-link-empty__preview { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; } /* ============================================================ 45. P2P UI ============================================================ */ html.dark-mode .p2p-ui .p2p-filterbar { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-filter-row.p2p-filter-row--compact .form-select-sm, html.dark-mode .p2p-ui .p2p-filter-row.p2p-filter-row--compact .form-control-sm { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-offers-panel { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-offers-panel__head { background: rgba(255,255,255,.03) !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-ui .p2p-offers-panel__head h6 { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-offer-card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-offer-card:hover { background: rgba(255,255,255,.04) !important; } html.dark-mode .p2p-ui .p2p-offer-body { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-ui .p2p-offer-price-number, html.dark-mode .p2p-ui .p2p-offer-price-base, html.dark-mode .p2p-ui .p2p-offer-price-fiat { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-offer-price-per { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-payment-pill { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-available-badge { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-advertiser__name { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-advertiser__stats { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-offer-limit__label, html.dark-mode .p2p-ui .p2p-offer-payment__label { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-offer-limit__value, html.dark-mode .p2p-ui .p2p-offer-payment__value { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-data-card { border-bottom-color: rgba(255,255,255,.07) !important; } html.dark-mode .p2p-ui .p2p-data-card:hover { background: rgba(255,255,255,.03) !important; } html.dark-mode .p2p-ui .p2p-data-card__title { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-data-card__sub { color: #777970 !important; } /* P2P table */ html.dark-mode .p2p-ui .table-responsive { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .table > thead { background: rgba(255,255,255,.04) !important; } html.dark-mode .p2p-ui .table > thead th { color: #bebfb8 !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-ui .table > tbody td { border-bottom-color: rgba(255,255,255,.06) !important; color: #b8bbb4 !important; } html.dark-mode .p2p-ui .table > tbody tr:hover { background: rgba(255,255,255,.035) !important; } /* P2P modal */ html.dark-mode .p2p-ui-modal .p2p-order-modal { background: rgba(14,15,15,.97) !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .p2p-ui-modal .p2p-order-modal__head, html.dark-mode .p2p-ui-modal .p2p-order-modal__subhead { background: #0e0f0f !important; } html.dark-mode .p2p-ui-modal .p2p-order-modal__title { color: #f1f1ed !important; } html.dark-mode .p2p-ui-modal .p2p-order-rate { color: #b8bbb4 !important; } html.dark-mode .p2p-ui-modal .modal-body { background: #111212 !important; } html.dark-mode .p2p-ui-modal .p2p-order-card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui-modal .p2p-order-card__title { color: #f1f1ed !important; } html.dark-mode .p2p-ui-modal .p2p-order-input { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .p2p-ui-modal .p2p-order-input__control { background: transparent !important; color: #f1f1ed !important; } html.dark-mode .p2p-ui-modal .p2p-order-input__unit { background: rgba(255,255,255,.06) !important; border-left-color: rgba(255,255,255,.10) !important; color: #bebfb8 !important; } html.dark-mode .p2p-ui-modal .p2p-order-summary-rows { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui-modal .p2p-order-modal__footer { background: #0e0f0f !important; border-top-color: rgba(255,255,255,.08) !important; } /* ============================================================ 46. CARD GENÉRICO (Bootstrap) ============================================================ */ html.dark-mode .card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .card-header { background: rgba(255,255,255,.04) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; } /* ============================================================ 47. SCROLLBAR ============================================================ */ html.dark-mode ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18) !important; border-radius: 8px !important; } html.dark-mode ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32) !important; } html.dark-mode ::-webkit-scrollbar-track { background: rgba(255,255,255,.04) !important; } /* ============================================================ 48. CHECK CARD AREA ============================================================ */ html.dark-mode .check-card-area { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .check-card-area p { color: #8fcf8f !important; } /* ============================================================ 49. CIRCLE ICON ============================================================ */ html.dark-mode .circle-icon { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; } /* ============================================================ 50. MISC — outros textos que podem ficar invisíveis ============================================================ */ html.dark-mode .fw-bold { color: #f1f1ed !important; } html.dark-mode .badge { color: inherit; } html.dark-mode code { color: #d4a84b !important; } html.dark-mode .ratting-inner { color: #d4a84b !important; } html.dark-mode .positive { color: #8fcf8f !important; } html.dark-mode .negative { color: #e08080 !important; } html.dark-mode .kyc-status { color: #f1f1ed !important; } /* Textos de tabela-info */ html.dark-mode .table-info h6, html.dark-mode .table-info p { color: #f1f1ed !important; } /* Form select nativo */ html.dark-mode select option { background: #0e0f0f !important; color: #f1f1ed !important; } /* * ============================================================ * DARK MODE — dashboard-responsive.css overrides * Adicione ao final do seu dark-mode.css existente * * Cobre todos os bg-white, bg-light e textos legíveis * encontrados no dashboard-responsive.css * ============================================================ */ /* ============================================================ STAT COLUMNS (≤767px — cada coluna vira card individual) ============================================================ */ html.dark-mode .stat-column { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .stat-label { color: #777970 !important; } html.dark-mode .stats-wrapper { background-color: transparent !important; border: none !important; } /* ============================================================ SINGLE CARD BOX — mobile overrides ============================================================ */ html.dark-mode .single-card-box-shadow { background: #0e0f0f !important; } html.dark-mode .single-card-box-shadow .main-title { border-bottom: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; } /* ============================================================ QUICK LINKS (≤991px) ============================================================ */ html.dark-mode .quick-links-item { background: rgba(255,255,255,.05) !important; color: #bebfb8 !important; } html.dark-mode .quick-links-item:hover { background: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } /* ============================================================ USER DASHBOARD — hero, stats, charts, transactions ============================================================ */ /* Hero */ html.dark-mode .user-dashboard .ud-hero { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .user-dashboard .ud-hero__date { background: rgba(255,255,255,.05) !important; color: #b8bbb4 !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .user-dashboard .ud-hero__btn--ghost { background: #0e0f0f !important; color: #f1f1ed !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .user-dashboard .ud-hero__btn--ghost:hover { border-color: rgba(255,255,255,.28) !important; color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-hero__title { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-hero__eyebrow, html.dark-mode .user-dashboard .ud-hero__subtitle { color: #777970 !important; } /* Stat cards */ html.dark-mode .user-dashboard .ud-stat-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .user-dashboard .ud-stat-card:hover { border-color: rgba(255,255,255,.22) !important; } html.dark-mode .user-dashboard .ud-stat-card__label { color: #777970 !important; } html.dark-mode .user-dashboard .ud-stat-card__value { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-stat-card__link { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #777970 !important; } html.dark-mode .user-dashboard .ud-stat-card:hover .ud-stat-card__link, html.dark-mode .user-dashboard .ud-stat-card__link:hover { background: rgba(255,255,255,.15) !important; color: #f1f1ed !important; border-color: rgba(255,255,255,.28) !important; } /* Chart card — desktop base */ html.dark-mode .user-dashboard .ud-chart-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .user-dashboard .ud-chart-card__head { border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .user-dashboard .ud-chart-card__heading { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-chart-card__period { color: #777970 !important; } html.dark-mode .user-dashboard .ud-chart-card__toggle { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #bebfb8 !important; } html.dark-mode .user-dashboard .ud-chart-card__toggle:hover { background: rgba(255,255,255,.10) !important; color: #f1f1ed !important; border-color: rgba(255,255,255,.24) !important; } /* Mobile chart card — radial gradient override (branco → preto fosco) */ html.dark-mode .user-dashboard .ud-chart-card:has(.ud-chart-card__trend--in) { background: radial-gradient(120% 80% at 100% 0%, rgba(90,154,90,.10) 0%, #0e0f0f 55%) !important; } html.dark-mode .user-dashboard .ud-chart-card:has(.ud-chart-card__trend--out) { background: radial-gradient(120% 80% at 100% 0%, rgba(210,60,60,.10) 0%, #0e0f0f 55%) !important; } /* Mobile body-shell reveal */ html.dark-mode .user-dashboard .ud-chart-card.is-mobile-expanded .ud-chart-card__body-shell { border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .user-dashboard .ud-chart-card__body-shell::after { background: linear-gradient(180deg, rgba(14,15,15,.96) 0%, rgba(14,15,15,0) 100%) !important; } /* Transactions panel */ html.dark-mode .user-dashboard .ud-transactions { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .user-dashboard .ud-transactions__title { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-transactions--recent { background: linear-gradient(180deg, #0e0f0f 0%, rgba(14,15,15,.92) 100%) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .user-dashboard .ud-transactions--recent .ud-transactions__head { border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .user-dashboard .ud-transactions--recent .ud-transactions__subtitle { color: #777970 !important; } html.dark-mode .user-dashboard .ud-transactions--recent .ud-transactions__link { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #bebfb8 !important; } html.dark-mode .user-dashboard .ud-transactions--recent .ud-transactions__link:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.22) !important; color: #f1f1ed !important; } /* Transaction items */ html.dark-mode .user-dashboard .ud-trx-item { background: transparent !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .user-dashboard .ud-trx-item + .ud-trx-item { border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .user-dashboard .ud-trx-item:hover, html.dark-mode .user-dashboard .ud-trx-item:active { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.16) !important; } html.dark-mode .user-dashboard .ud-trx-item__title { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-trx-item__icon { background: rgba(255,255,255,.07) !important; } /* Recent trx items (smaller variant) */ html.dark-mode .user-dashboard .ud-transactions--recent .ud-trx-item { border-color: rgba(255,255,255,.08) !important; background: rgba(14,15,15,.88) !important; } html.dark-mode .user-dashboard .ud-transactions--recent .ud-trx-item:hover { border-color: rgba(255,255,255,.18) !important; background: #0e0f0f !important; } /* Empty state */ html.dark-mode .user-dashboard .ud-transactions__empty { background: rgba(255,255,255,.03) !important; border: 1px dashed rgba(255,255,255,.12) !important; } html.dark-mode .user-dashboard .ud-transactions__empty-icon { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.12) !important; color: #bebfb8 !important; } html.dark-mode .user-dashboard .ud-transactions__empty-title { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-transactions__empty-text { color: #b8bbb4 !important; } /* Filter panel (transaction page) */ html.dark-mode .user-transaction-page .ud-filter-panel { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .user-transaction-page .ud-transactions__subtitle { color: #b8bbb4 !important; } html.dark-mode .user-transaction-page .ud-transactions__summary { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #c8cac0 !important; } /* ============================================================ QUICK ACTIONS GRID (mobile) ============================================================ */ html.dark-mode .quick-actions .qa-item { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.08) !important; color: #f1f1ed !important; } html.dark-mode .quick-actions .qa-item:hover, html.dark-mode .quick-actions .qa-item:focus-visible { border-color: rgba(255,255,255,.22) !important; background: #111212 !important; } html.dark-mode .quick-actions .qa-item span:not(.qa-icon) { color: #c8cac0 !important; } /* Overlay fade (branco → preto fosco) */ html.dark-mode .qa-overlay { background: linear-gradient(180deg, rgba(14,15,15,0) 0%, rgba(14,15,15,.85) 35%, #0e0f0f 100%) !important; } html.dark-mode .qa-overlay .qa-see-more { background: #111212 !important; border: 1px solid rgba(255,255,255,.12) !important; color: #c8cac0 !important; } html.dark-mode .qa-overlay .qa-see-more:hover { background: rgba(255,255,255,.08) !important; color: #f1f1ed !important; } /* ============================================================ SINGLE AMOUNT CARD — big screen grid (≥992px) ============================================================ */ html.dark-mode .single-amount-card { background: linear-gradient(180deg, #0e0f0f 0%, rgba(14,15,15,.88) 100%) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .single-amount-card a { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #bebfb8 !important; } html.dark-mode .single-amount-card:hover { border-color: rgba(255,255,255,.22) !important; } html.dark-mode .single-amount-card:hover a { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.28) !important; color: #f1f1ed !important; } /* ============================================================ INVOICE PREVIEW & QR PRINT ============================================================ */ html.dark-mode .invoice-preview { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .qr-print-section { background: #0e0f0f !important; border-color: rgba(255,255,255,.12) !important; color: #b8bbb4 !important; } html.dark-mode .detail-row, html.dark-mode .preview-row { color: #b8bbb4 !important; } /* ============================================================ P2P MARKETPLACE — mobile card overrides ============================================================ */ html.dark-mode .p2p-ui .table-responsive { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-offers-table tr { border-bottom: 1px solid rgba(255,255,255,.07) !important; background: transparent !important; } html.dark-mode .p2p-ui .p2p-mob-payments { color: #b8bbb4 !important; } html.dark-mode .p2p-ui .p2p-mob-pm-name { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-mob-pm-sep { color: rgba(255,255,255,.25) !important; } html.dark-mode .p2p-ui .p2p-mob-info { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-mob-info-label { color: #b8bbb4 !important; } html.dark-mode .p2p-ui .p2p-mob-info-value { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-mob-info-sep { color: rgba(255,255,255,.20) !important; } html.dark-mode .p2p-ui .p2p-resume-banner { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .p2p-ui .p2p-filter-toggle { background: transparent !important; color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-filter-toggle .p2p-filter-chevron { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-filterbar { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } /* P2P accounts panel */ html.dark-mode .p2p-ui.p2p-accounts .p2p-accounts-banner { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui.p2p-accounts .p2p-accounts-banner__content h5 { color: #f1f1ed !important; } html.dark-mode .p2p-ui.p2p-accounts .p2p-accounts-panel__body, html.dark-mode .p2p-ui.p2p-accounts .p2p-accounts-methods { background: #0e0f0f !important; } html.dark-mode .p2p-ui.p2p-accounts .p2p-account-card { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui.p2p-accounts .p2p-summary-card { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui.p2p-accounts .p2p-summary-card__value { color: #f1f1ed !important; } html.dark-mode .p2p-ui.p2p-accounts .p2p-empty-state__card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } /* ============================================================ MERCHANT CARDS — mobile & desktop ============================================================ */ html.dark-mode .merchant-card-mobile-header { background: linear-gradient(135deg, #141515 0%, #111212 100%) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .merchant-card-mobile-body { background: #0e0f0f !important; } html.dark-mode .merchant-stat-item { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .merchant-stat-label { color: #777970 !important; } html.dark-mode .merchant-stat-value { color: #f1f1ed !important; } /* Mobile action buttons */ html.dark-mode .merchant-btn-qr-mobile { background: rgba(25,118,210,.12) !important; color: #90b8e8 !important; border-color: rgba(25,118,210,.22) !important; } html.dark-mode .merchant-btn-config-mobile { background: rgba(123,31,162,.12) !important; color: #c590e8 !important; border-color: rgba(123,31,162,.22) !important; } html.dark-mode .merchant-btn-edit-mobile { background: rgba(255,255,255,.06) !important; color: #b8bbb4 !important; border-color: rgba(255,255,255,.12) !important; } /* Desktop action buttons */ html.dark-mode .merchant-btn-qr-desktop { background: rgba(25,118,210,.12) !important; color: #90b8e8 !important; border-color: rgba(25,118,210,.20) !important; } html.dark-mode .merchant-btn-config-desktop { background: rgba(123,31,162,.12) !important; color: #c590e8 !important; border-color: rgba(123,31,162,.20) !important; } html.dark-mode .merchant-btn-edit-desktop { background: rgba(255,255,255,.06) !important; color: #b8bbb4 !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .merchant-card-desktop { background: #0e0f0f !important; } /* ============================================================ FEATURE SUMMARY WIDGET — mobile overrides ============================================================ */ html.dark-mode .feature-summary-widget__panel { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .feature-summary-widget__card { background: #111212 !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .feature-summary-widget__toggle { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .feature-summary-widget__toggle-copy strong { color: #c8cac0 !important; } html.dark-mode .feature-summary-widget__toggle-label { color: #777970 !important; } /* ============================================================ KYC NOTICE CARD — responsive variants ============================================================ */ html.dark-mode .kyc-notice-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .kyc-notice-card__btn { background: rgba(255,255,255,.07) !important; color: #f1f1ed !important; border: 1px solid rgba(255,255,255,.16) !important; } html.dark-mode .kyc-notice-card__btn:hover { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.28) !important; } /* ============================================================ LOGIN CARD (≤576px) ============================================================ */ html.dark-mode .login-card { background: rgba(14,15,15,.92) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .login-card h4 { color: #f1f1ed !important; } html.dark-mode .login-card .form-label { color: #b8bbb4 !important; } html.dark-mode .login-card .form-control { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .sm-mb-text { color: #b8bbb4 !important; } /* ============================================================ NOTIFICATION DROPDOWN (≤576px) ============================================================ */ html.dark-mode .notification-dropdown { background: rgba(14,15,15,.97) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .notification-dropdown .list-group-item { background: transparent !important; border-color: rgba(255,255,255,.08) !important; color: #b8bbb4 !important; } html.dark-mode .notification-dropdown .list-group-item:hover { background: rgba(255,255,255,.04) !important; color: #f1f1ed !important; } /* ============================================================ PAGINATION (≤575px) ============================================================ */ html.dark-mode .pagination-list li a { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #bebfb8 !important; } html.dark-mode .pagination-list li a.prev, html.dark-mode .pagination-list li a.next { background: rgba(255,255,255,.04) !important; color: #bebfb8 !important; } html.dark-mode .pagination-list li a:hover, html.dark-mode .pagination-list li a.active { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.28) !important; color: #f1f1ed !important; } /* ============================================================ HISTORY TABLE (≤1199px scroll) ============================================================ */ html.dark-mode .history-table { background: transparent !important; } html.dark-mode .history-table .table-list { background: transparent !important; } /* ============================================================ WALLET SLIDER NAV (≤991px) ============================================================ */ html.dark-mode .walet-slider .owl-nav button { color: rgba(255,255,255,.7) !important; } html.dark-mode .walet-slider .owl-nav button:hover { color: #f1f1ed !important; } /* * ============================================================ * DARK MODE — dashboard-mobile-app.css overrides * Adicione ao final do seu dark-mode.css existente * (após o bloco de overrides do dashboard-responsive.css) * * Escopo: apenas mobile (<992px), mesma lógica do arquivo * original. Todos os rgba(white), #fff, var(--front-color-white) * hardcoded são remapeados para superfícies fosco-escuras. * ============================================================ */ /* ============================================================ TOKENS RAIZ — redefine as variáveis --dk-* para dark ============================================================ */ html.dark-mode { --dk-bg: #090a0a; --dk-card: #0e0f0f; --dk-card-2: #141515; --dk-text: #f1f1ed; --dk-text-muted: #777970; --dk-text-dim: rgba(241,241,237,.38); --dk-line: rgba(255,255,255,.10); --dk-line-2: rgba(255,255,255,.07); --dk-overlay: rgba(0,0,0,.72); --dk-tile-soft: rgba(255,255,255,.04); --dk-tile-soft-hover: rgba(255,255,255,.08); --dk-header-bg-1: rgba(9,10,10,.96); --dk-header-bg-2: rgba(9,10,10,.88); --dk-header-bg-scrolled: rgba(9,10,10,.98); --dk-tabbar-bg-1: rgba(9,10,10,.98); --dk-tabbar-bg-2: rgba(9,10,10,.92); --dk-skel-1: rgba(255,255,255,.04); --dk-skel-2: rgba(255,255,255,.08); --dk-shadow-card: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px rgba(0,0,0,.42); --dk-shadow-fab: 0 12px 30px rgba(var(--dk-brand-rgb),.32), 0 4px 10px rgba(var(--dk-brand-rgb),.18); } /* ============================================================ QR SCANNER ============================================================ */ html.dark-mode .dk-qr-scanner { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; box-shadow: 0 24px 70px rgba(0,0,0,.65) !important; } html.dark-mode .dk-qr-scanner__title { color: #f1f1ed !important; } html.dark-mode .dk-qr-scanner__subtitle { color: #777970 !important; } html.dark-mode .dk-qr-scanner__close { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .dk-qr-scanner__manual label { color: #f1f1ed !important; } html.dark-mode .dk-qr-scanner__manual-row input { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .dk-qr-scanner__manual-row input::placeholder { color: #777970 !important; } html.dark-mode .dk-qr-scanner__status { color: #777970 !important; } html.dark-mode .dk-qr-scanner-backdrop { background: rgba(0,0,0,.72) !important; } /* ============================================================ MOBILE HEADER ============================================================ */ @media (max-width: 991.98px) { html.dark-mode .dk-mobile-header { background: linear-gradient(180deg, rgba(9,10,10,.98) 0%, rgba(9,10,10,.92) 100%) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important; } html.dark-mode .dk-mobile-header[data-scrolled="1"] { background: rgba(9,10,10,.98) !important; border-bottom-color: rgba(255,255,255,.12) !important; box-shadow: 0 10px 24px rgba(0,0,0,.55) !important; } /* Avatar */ html.dark-mode .dk-avatar::after { border-color: #0e0f0f !important; } /* Greeting */ html.dark-mode .dk-greet__hi { color: #777970 !important; } html.dark-mode .dk-greet__name { color: #f1f1ed !important; } /* Rank chip */ html.dark-mode .dk-rank-chip { background: linear-gradient(135deg, rgba(var(--front-color-warning-rgb),.14), rgba(255,255,255,.08)) !important; border: 1px solid rgba(var(--front-color-warning-rgb),.22) !important; } /* Icon buttons */ html.dark-mode .dk-icon-btn { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(var(--dk-brand-rgb),.04)) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; box-shadow: 0 8px 18px rgba(0,0,0,.28) !important; } html.dark-mode .dk-icon-btn:active { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.22) !important; } html.dark-mode .dk-icon-btn .badge-num { border-color: #090a0a !important; } html.dark-mode .dk-icon-btn .dot { border-color: #090a0a !important; } /* ============================================================ HERO WALLET CAROUSEL ============================================================ */ /* Dots */ html.dark-mode .dk-dots span { background: rgba(255,255,255,.18) !important; } /* Wallet card action buttons */ html.dark-mode .dk-wc__act { background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.88) !important; } /* Copy button */ html.dark-mode .dk-wc__copy { color: rgba(255,255,255,.45) !important; } /* Empty wallet state */ html.dark-mode .dk-wallet-empty__state { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px rgba(0,0,0,.42) !important; } /* ============================================================ KYC SLIM BANNER ============================================================ */ html.dark-mode .dk-kyc { background: linear-gradient(135deg, rgba(var(--kyc-rgb),.09), rgba(255,255,255,.04)), #0e0f0f !important; border: 1px solid rgba(var(--kyc-rgb),.22) !important; box-shadow: 0 10px 22px rgba(var(--kyc-rgb),.06) !important; } html.dark-mode .dk-kyc__title { color: #f1f1ed !important; } html.dark-mode .dk-kyc__sub { color: #777970 !important; } html.dark-mode .dk-kyc__ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important; } html.dark-mode .dk-kyc__cta { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(var(--kyc-rgb),.30) !important; } html.dark-mode .dk-kyc__close { background: rgba(var(--kyc-rgb),.10) !important; color: rgba(255,255,255,.45) !important; } /* ============================================================ ACTION HUB & QUICK ACTIONS PANEL ============================================================ */ html.dark-mode .dk-action-hub, html.dark-mode .dk-quick-actions-panel { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.09) !important; } /* Primary action strip */ html.dark-mode .dk-action-hub__primary { background: linear-gradient(135deg, rgba(var(--dk-brand-rgb),.04), rgba(var(--dk-brand-glow-rgb),.05)), rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.09) !important; } /* Divider between action cards */ html.dark-mode .dk-action-card + .dk-action-card { border-left: 1px solid rgba(255,255,255,.10) !important; } /* Labels */ html.dark-mode .dk-action-card__copy strong { color: #f1f1ed !important; } html.dark-mode .dk-action-hub__subhead { color: #f1f1ed !important; } html.dark-mode .dk-action-hub__more { background: transparent !important; color: var(--dk-brand) !important; } /* Section header */ html.dark-mode .dk-section__title { color: #f1f1ed !important; } /* ============================================================ QA TILES (more actions grid) ============================================================ */ html.dark-mode .dk-qa-tile { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.09) !important; color: #f1f1ed !important; } html.dark-mode .dk-qa-tile:hover { color: #f1f1ed !important; } html.dark-mode .dk-qa-tile__lb { color: #c8cac0 !important; } /* "More" tile dashed style */ html.dark-mode .dk-qa-tile__ic[data-tone="more"] { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)), #111212 !important; border-color: rgba(255,255,255,.14) !important; color: #777970 !important; } /* ============================================================ STATISTICS RAIL ============================================================ */ html.dark-mode .dk-stat-card { background: linear-gradient(135deg, rgba(var(--stat-rgb),.08), rgba(255,255,255,.03)), #0e0f0f !important; border: 1px solid rgba(var(--stat-rgb),.12) !important; box-shadow: none !important; } html.dark-mode .dk-stat-card__lb { color: #777970 !important; } html.dark-mode .dk-stat-card__val { color: #f1f1ed !important; } html.dark-mode .dk-stat-card__ic { box-shadow: none !important; } /* ============================================================ INSIGHTS / CHARTS ============================================================ */ html.dark-mode .dk-insight { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(var(--insight-rgb),.03)), #0e0f0f !important; border: 1px solid rgba(var(--insight-rgb),.14) !important; box-shadow: none !important; } html.dark-mode .dk-seg { background: rgba(var(--insight-rgb),.07) !important; border: 1px solid rgba(var(--insight-rgb),.12) !important; } html.dark-mode .dk-seg__btn { color: #777970 !important; } html.dark-mode .dk-seg__btn[data-active="1"] { background: var(--insight-color) !important; color: #f1f1ed !important; } html.dark-mode .dk-insight__period { background: rgba(var(--insight-rgb),.07) !important; color: #777970 !important; } html.dark-mode .dk-insight__num { color: #f1f1ed !important; } html.dark-mode .dk-insight__sub { color: #777970 !important; } html.dark-mode .dk-chart-shell::before { background: rgba(var(--insight-rgb),.14) !important; } /* ============================================================ RECENT TRANSACTIONS (mobile grouped) ============================================================ */ html.dark-mode .dk-trx-group__title { color: #777970 !important; } html.dark-mode .dk-trx-row { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.09) !important; color: #f1f1ed !important; } html.dark-mode .dk-trx-row:active { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(var(--trx-rgb),.04)), #0e0f0f !important; border-color: rgba(var(--trx-rgb),.18) !important; } html.dark-mode .dk-trx-row__ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; } html.dark-mode .dk-trx-row__ic .status-dot { border-color: #0e0f0f !important; } html.dark-mode .dk-trx-row__title { color: #f1f1ed !important; } html.dark-mode .dk-trx-row__amt { color: #f1f1ed !important; } html.dark-mode .dk-trx-row__meta { color: #777970 !important; } html.dark-mode .dk-trx-row__time { color: rgba(241,241,237,.38) !important; } /* ============================================================ HISTORY PAGE ============================================================ */ html.dark-mode .dk-history-page { color: #f1f1ed !important; } /* History filter accordion */ html.dark-mode .dk-history-filter { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px rgba(0,0,0,.42) !important; } html.dark-mode .dk-history-filter summary { color: #f1f1ed !important; } html.dark-mode .dk-history-filter summary b { background: var(--dk-brand) !important; color: #f1f1ed !important; } html.dark-mode .dk-history-filter summary > i:last-child { color: #777970 !important; } html.dark-mode .dk-history-field span { color: #777970 !important; } html.dark-mode .dk-history-field input, html.dark-mode .dk-history-field select { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .dk-history-field input:focus, html.dark-mode .dk-history-field select:focus { border-color: rgba(var(--dk-brand-rgb),.42) !important; box-shadow: 0 0 0 3px rgba(var(--dk-brand-rgb),.12) !important; } html.dark-mode .dk-history-field select option { background: #0e0f0f !important; color: #f1f1ed !important; } html.dark-mode .dk-history-filter__reset { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; } /* History rows */ html.dark-mode .dk-history-row { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 18px rgba(0,0,0,.32) !important; } html.dark-mode .dk-history-row:active { background: rgba(255,255,255,.04) !important; } html.dark-mode .dk-history-row__title { color: #f1f1ed !important; } html.dark-mode .dk-history-row__amount { color: #f1f1ed !important; } html.dark-mode .dk-history-row__meta { color: #777970 !important; } html.dark-mode .dk-history-row__trx { color: rgba(241,241,237,.38) !important; } html.dark-mode .dk-history-row__dot { background: rgba(255,255,255,.22) !important; } /* Empty state */ html.dark-mode .dk-history-empty { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px rgba(0,0,0,.42) !important; } html.dark-mode .dk-history-empty__preview { background: var(--dk-role-gradient-soft) !important; } html.dark-mode .dk-history-empty__preview > span { background: #0e0f0f !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px rgba(0,0,0,.42) !important; } html.dark-mode .dk-history-empty__preview strong { color: #f1f1ed !important; } html.dark-mode .dk-history-empty__preview small { color: #777970 !important; } /* Group titles */ html.dark-mode .dk-history-group__title { color: #777970 !important; } /* Pagination */ html.dark-mode .dk-history-pagination .page-link { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .dk-history-pagination .active .page-link { border-color: var(--dk-brand) !important; background: var(--dk-brand) !important; color: #f1f1ed !important; } /* Hero banner */ html.dark-mode .dk-history-hero h1 { color: #f1f1ed !important; } html.dark-mode .dk-history-hero p { color: rgba(241,241,237,.78) !important; } html.dark-mode .dk-history-hero__eyebrow { background: rgba(255,255,255,.14) !important; color: rgba(241,241,237,.88) !important; } html.dark-mode .dk-history-hero__icon { background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important; } html.dark-mode .dk-history-stat { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important; } /* ============================================================ BOTTOM TAB BAR + FAB ============================================================ */ html.dark-mode .dk-tabbar { background: linear-gradient(to top, rgba(9,10,10,.98) 60%, rgba(9,10,10,.92)) !important; border-top: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .dk-tab { color: #777970 !important; } html.dark-mode .dk-tab__lb { color: inherit !important; } html.dark-mode .dk-tab[data-active="1"], html.dark-mode .dk-tab.is-active { color: var(--dk-brand) !important; } html.dark-mode .dk-fab__ring { background: #090a0a !important; border-top: 1px solid rgba(255,255,255,.10) !important; } /* ============================================================ BOTTOM SHEETS ============================================================ */ html.dark-mode .dk-sheet-backdrop { background: rgba(0,0,0,.72) !important; } html.dark-mode .dk-sheet { background: #0e0f0f !important; border-top: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 -10px 40px rgba(0,0,0,.55) !important; } html.dark-mode .dk-sheet__handle { background: rgba(255,255,255,.12) !important; } html.dark-mode .dk-sheet__title { color: #f1f1ed !important; } html.dark-mode .dk-sheet__row { border-bottom: 1px solid rgba(255,255,255,.07) !important; color: #f1f1ed !important; background: transparent !important; } html.dark-mode .dk-sheet__row:hover { color: #f1f1ed !important; } html.dark-mode .dk-sheet__row__sub { color: #777970 !important; } html.dark-mode .dk-sheet__row .arrow { color: rgba(241,241,237,.30) !important; } /* ============================================================ MORE SHEET (menu principal) ============================================================ */ html.dark-mode .dk-more-sheet { background: #0e0f0f !important; border-top: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .dk-more-sheet .dk-sheet__handle { background: rgba(255,255,255,.12) !important; } html.dark-mode .dk-more-menu__title { color: #f1f1ed !important; } html.dark-mode .dk-more-menu__close { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #b8bbb4 !important; } /* Install banner — mantém gradiente da marca, só ajusta texto */ html.dark-mode .dk-more-install__copy strong { color: #f1f1ed !important; } html.dark-mode .dk-more-install__copy span { color: rgba(241,241,237,.82) !important; } html.dark-mode .dk-more-install__button { background: rgba(255,255,255,.92) !important; } /* Overview cards */ html.dark-mode .dk-more-overview { background: linear-gradient(180deg, rgba(var(--dk-brand-rgb),.05), rgba(255,255,255,.03)) !important; border: 1px solid rgba(255,255,255,.09) !important; } html.dark-mode .dk-more-overview__head span { color: #f1f1ed !important; } html.dark-mode .dk-more-overview__head small { color: var(--dk-brand) !important; } html.dark-mode .dk-more-overview-card { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.09) !important; color: #f1f1ed !important; } html.dark-mode .dk-more-overview-card:hover, html.dark-mode .dk-more-overview-card:active { color: #f1f1ed !important; } html.dark-mode .dk-more-overview-card__copy strong { color: #f1f1ed !important; } html.dark-mode .dk-more-overview-card__copy small { color: #777970 !important; } html.dark-mode .dk-more-overview-card__stat b { color: #f1f1ed !important; } html.dark-mode .dk-more-overview-card__stat em { color: #777970 !important; } /* Referral card */ html.dark-mode .dk-more-referral-card { background: radial-gradient(circle at 12% 16%, rgba(var(--front-color-success-rgb),.10), transparent 34%), linear-gradient(135deg, rgba(var(--front-color-success-rgb),.07), rgba(var(--dk-brand-rgb),.04)), rgba(255,255,255,.03) !important; border: 1px solid rgba(var(--front-color-success-rgb),.18) !important; color: #f1f1ed !important; } html.dark-mode .dk-more-referral-card:hover, html.dark-mode .dk-more-referral-card:active { color: #f1f1ed !important; } html.dark-mode .dk-more-referral-card__badge { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(var(--front-color-success-rgb),.20) !important; } html.dark-mode .dk-more-referral-card__copy strong { color: #f1f1ed !important; } html.dark-mode .dk-more-referral-card__copy small { color: #777970 !important; } /* Menu list items */ html.dark-mode .dk-more-menu__list { scrollbar-color: rgba(255,255,255,.12) transparent !important; } html.dark-mode .dk-more-menu__item { border-bottom: 1px solid rgba(255,255,255,.08) !important; color: #f1f1ed !important; background: transparent !important; } html.dark-mode .dk-more-menu__item:hover, html.dark-mode .dk-more-menu__item:active { color: #f1f1ed !important; } html.dark-mode .dk-more-menu__copy strong { color: #f1f1ed !important; } html.dark-mode .dk-more-menu__copy small { color: #777970 !important; } html.dark-mode .dk-more-menu__arrow { color: rgba(255,255,255,.25) !important; } /* Icon variants — ajusta só o bg, a cor já é específica */ html.dark-mode .dk-more-menu__icon--dark { background: rgba(255,255,255,.08) !important; color: #f1f1ed !important; } html.dark-mode .dk-more-menu__icon--slate { background: rgba(255,255,255,.06) !important; color: #b8bbb4 !important; } /* ============================================================ APPS GRID (tile sheet) ============================================================ */ html.dark-mode .dk-app-tile:hover, html.dark-mode .dk-app-tile:active { background: rgba(255,255,255,.06) !important; color: #f1f1ed !important; } html.dark-mode .dk-app-tile__icon { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .dk-app-tile__lb { color: #c8cac0 !important; } /* ============================================================ QUICK MENU SHEET (dk-apps-sheet--quick-menu) ============================================================ */ html.dark-mode .dk-apps-sheet--quick-menu { background: rgba(14,15,15,.99) !important; border-color: rgba(255,255,255,.10) !important; --quick-menu-surface: rgba(14,15,15,.99); --quick-menu-border: rgba(255,255,255,.10); --quick-menu-text: #f1f1ed; --quick-menu-muted: #777970; } html.dark-mode .dk-apps-sheet--quick-menu .dk-sheet__handle { background: rgba(255,255,255,.12) !important; } html.dark-mode .dk-apps-sheet--quick-menu .quick-function-menu__heading { color: #f1f1ed !important; } html.dark-mode .dk-apps-sheet--quick-menu .quick-function-menu__close { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .dk-apps-sheet--quick-menu .quick-function-menu__action { background: linear-gradient(180deg, #141515, #111212) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; } html.dark-mode .dk-apps-sheet--quick-menu .quick-function-menu__action:hover { border-color: rgba(255,255,255,.18) !important; } /* ============================================================ LANGUAGE SELECTOR ============================================================ */ html.dark-mode .dk-lang-row { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.09) !important; color: #f1f1ed !important; } html.dark-mode .dk-lang-row:hover { background: rgba(255,255,255,.07) !important; border-color: rgba(var(--dk-brand-rgb),.18) !important; color: #f1f1ed !important; } html.dark-mode .dk-lang-row:active { background: rgba(var(--dk-brand-rgb),.08) !important; } html.dark-mode .dk-lang-row.is-active { background: linear-gradient(135deg, rgba(var(--dk-brand-rgb),.10), rgba(var(--front-color-success-rgb),.06)) !important; border-color: rgba(var(--dk-brand-rgb),.22) !important; } html.dark-mode .dk-lang-row__flag { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .dk-lang-row.is-active .dk-lang-row__flag { background: rgba(255,255,255,.08) !important; border-color: rgba(var(--dk-brand-rgb),.20) !important; } html.dark-mode .dk-lang-row__native { color: #f1f1ed !important; } html.dark-mode .dk-lang-row__en { color: #777970 !important; } html.dark-mode .dk-lang-row__check { background: rgba(255,255,255,.08) !important; color: transparent !important; } html.dark-mode .dk-lang-row.is-active .dk-lang-row__check { background: var(--dk-brand) !important; color: #f1f1ed !important; } /* ============================================================ NOTIFICATION PANEL ============================================================ */ html.dark-mode .dk-notif-panel { background: rgba(14,15,15,.99) !important; border: 1px solid rgba(255,255,255,.10) !important; border-bottom: 0 !important; box-shadow: 0 -18px 48px rgba(0,0,0,.55) !important; } html.dark-mode .dk-notif-panel .dk-sheet__handle { background: rgba(255,255,255,.12) !important; } html.dark-mode .dk-notif-panel__title { color: #f1f1ed !important; } html.dark-mode .dk-notif-panel__close { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #b8bbb4 !important; box-shadow: 0 10px 22px rgba(0,0,0,.28) !important; } html.dark-mode .dk-notif-item { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.09) !important; color: #f1f1ed !important; } html.dark-mode .dk-notif-item:not(.is-unread) { border-color: transparent !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .dk-notif-item:last-child { border-bottom-color: transparent !important; } html.dark-mode .dk-notif-item.is-unread { background: rgba(var(--dk-brand-rgb),.06) !important; border-color: rgba(var(--dk-brand-rgb),.12) !important; } html.dark-mode .dk-notif-item__line { color: #b8bbb4 !important; } html.dark-mode .dk-notif-item__line strong { color: #f1f1ed !important; } html.dark-mode .dk-notif-item__line span { color: #b8bbb4 !important; } html.dark-mode .dk-notif-item__time { color: #777970 !important; } /* ============================================================ PWA INSTALL PROMPT ============================================================ */ html.dark-mode .dk-pwa-prompt { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; box-shadow: 0 18px 50px rgba(0,0,0,.55) !important; } html.dark-mode .dk-pwa-prompt__title { color: #f1f1ed !important; } html.dark-mode .dk-pwa-prompt__text { color: #777970 !important; } html.dark-mode .dk-pwa-prompt__dismiss { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #777970 !important; } /* PWA help sheet */ html.dark-mode .dk-pwa-help__note { color: #777970 !important; } html.dark-mode .dk-pwa-help__steps { color: #f1f1ed !important; } } /* end @media (max-width: 991.98px) */ /* * ============================================================ * DARK MODE — overrides para 6 arquivos CSS * Adicione ao final do dark-mode.css existente * * Cobre: * 1. lp-subscription-plans.css (.lp-sub-plans) * 2. lp-wallet-earn.css (.lp-earn) * 3. magnific-popup.css (.mfp-*) * 4. meanmenu.css (.mean-container) * 5. nice-select.css (.nice-select) * 6. premium-header.css (.premium-header) * ============================================================ */ /* ============================================================ 1. LANDING PAGE — SUBSCRIPTION PLANS (.lp-sub-plans) ============================================================ */ html.dark-mode .lp-sub-plans { background: #090a0a !important; } /* Eyebrow pill */ html.dark-mode .lp-sub-plans__eyebrow { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; color: var(--main-color) !important; } /* Heading */ html.dark-mode .lp-sub-plans__title { color: #f1f1ed !important; } /* Subtitle */ html.dark-mode .lp-sub-plans__sub { color: #777970 !important; } /* Billing toggle */ html.dark-mode .lp-sub-plans__toggle { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; color: #b8bbb4 !important; box-shadow: 0 4px 24px rgba(0,0,0,.40) !important; } html.dark-mode .lp-sub-plans__toggle-btn { color: #b8bbb4 !important; background: none !important; border: none !important; } html.dark-mode .lp-sub-plans__toggle-btn.active { color: #f1f1ed !important; } html.dark-mode .lp-sub-plans__toggle-save { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } /* Card — white base */ html.dark-mode .lp-sub-plans__card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 4px 32px rgba(0,0,0,.38) !important; } html.dark-mode .lp-sub-plans__card:not(.lp-sub-plans__card--featured):hover { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 16px 48px rgba(0,0,0,.55) !important; } /* Card names & amounts — white cards */ html.dark-mode .lp-sub-plans__card-name { color: #f1f1ed !important; } html.dark-mode .lp-sub-plans__card-tagline { color: #777970 !important; } html.dark-mode .lp-sub-plans__price-currency { color: #b8bbb4 !important; } html.dark-mode .lp-sub-plans__card-amount { color: #f1f1ed !important; } html.dark-mode .lp-sub-plans__price-period { color: #777970 !important; } html.dark-mode .lp-sub-plans__billing-note { color: #8fcf8f !important; } /* Trial pill — white card */ html.dark-mode .lp-sub-plans__trial-pill { background: rgba(180,83,9,.12) !important; color: #d4a84b !important; border: 1px solid rgba(180,83,9,.22) !important; } /* CTA default (colored) */ html.dark-mode .lp-sub-plans__cta--default { color: #f1f1ed !important; } /* Divider */ html.dark-mode .lp-sub-plans__divider { background: rgba(255,255,255,.08) !important; } /* Feature heading */ html.dark-mode .lp-sub-plans__feat-heading { color: rgba(255,255,255,.30) !important; } /* Feature rows */ html.dark-mode .lp-sub-plans__feature { color: #b8bbb4 !important; } /* Feature check icon */ html.dark-mode .lp-sub-plans__feat-icon { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } /* Limit pill */ html.dark-mode .lp-sub-plans__limit-pill { background: rgba(255,255,255,.06) !important; color: #777970 !important; border: 1px solid rgba(255,255,255,.10) !important; } /* Icon on white card */ html.dark-mode .lp-sub-plans__card:not(.lp-sub-plans__card--featured) .lp-sub-plans__card-icon { background: rgba(255,255,255,.08) !important; } /* Badge — free */ html.dark-mode .lp-sub-plans__badge--free { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; } /* Badge — pro */ html.dark-mode .lp-sub-plans__badge--pro { background: rgba(123,92,234,.12) !important; border: 1px solid rgba(123,92,234,.22) !important; color: #b8a0f8 !important; } /* ============================================================ 2. LANDING PAGE — WALLET EARN (.lp-earn) ============================================================ */ html.dark-mode .lp-earn { background: #090a0a !important; } html.dark-mode .lp-earn__eyebrow { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; } html.dark-mode .lp-earn__title { color: #f1f1ed !important; } html.dark-mode .lp-earn__sub { color: #777970 !important; } /* Card — white base */ html.dark-mode .lp-earn__card { background: #0e0f0f !important; border: 1.5px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .lp-earn__card:not(.lp-earn__card--featured):hover { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 4px 16px rgba(0,0,0,.45) !important; } /* Card name & tagline — white variant */ html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__card-name { color: #f1f1ed !important; } html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__card-tagline { color: #777970 !important; } /* Icon on white card */ html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__card-icon { background: rgba(255,255,255,.07) !important; } /* Rate */ html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__rate-pct { color: #777970 !important; } html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__rate-label { color: #777970 !important; } /* Pills — white card */ html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__pill { background: rgba(255,255,255,.07) !important; } html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__pill--muted { background: rgba(255,255,255,.05) !important; color: #b8bbb4 !important; } /* Divider */ html.dark-mode .lp-earn__divider { background: rgba(255,255,255,.08) !important; } /* Details rows */ html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__detail { border-bottom: 1px solid rgba(255,255,255,.06) !important; } html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__detail i { color: #777970 !important; } html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__detail-val { color: #f1f1ed !important; } html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__detail-sub { color: #777970 !important; } /* Bullets */ html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__bullet { color: #b8bbb4 !important; } html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__bullet-check { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } /* CTA button — white card */ html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__btn { background: rgba(255,255,255,.06) !important; border: 1.5px solid rgba(255,255,255,.14) !important; color: #c8cac0 !important; } html.dark-mode .lp-earn__card:not(.lp-earn__card--featured) .lp-earn__btn:hover { background: rgba(255,255,255,.14) !important; color: #f1f1ed !important; border-color: rgba(255,255,255,.28) !important; box-shadow: none !important; } /* Featured card button (white bg → translucent) */ html.dark-mode .lp-earn__card--featured .lp-earn__btn { background: rgba(255,255,255,.15) !important; color: #f1f1ed !important; } html.dark-mode .lp-earn__card--featured .lp-earn__btn:hover { background: rgba(255,255,255,.22) !important; opacity: 1 !important; } /* Badge wrappers */ html.dark-mode .lp-earn__badge--amber { /* keeps amber bg — just ensure text stays white */ color: #f1f1ed !important; } html.dark-mode .lp-earn__badge--blue { color: #f1f1ed !important; } /* ============================================================ 3. MAGNIFIC POPUP (.mfp-*) ============================================================ */ html.dark-mode .mfp-bg { background: #000 !important; opacity: 0.88 !important; } html.dark-mode .mfp-preloader { color: #b8bbb4 !important; } html.dark-mode .mfp-preloader a { color: #b8bbb4 !important; } html.dark-mode .mfp-preloader a:hover { color: #f1f1ed !important; } html.dark-mode .mfp-close { color: #f1f1ed !important; opacity: 0.75 !important; } html.dark-mode .mfp-close:hover, html.dark-mode .mfp-close:focus { opacity: 1 !important; } html.dark-mode .mfp-close-btn-in .mfp-close { color: #f1f1ed !important; } html.dark-mode .mfp-image-holder .mfp-close, html.dark-mode .mfp-iframe-holder .mfp-close { color: #f1f1ed !important; } html.dark-mode .mfp-counter { color: #b8bbb4 !important; } html.dark-mode .mfp-arrow-left:after { border-right-color: #f1f1ed !important; } html.dark-mode .mfp-arrow-left:before { border-right-color: rgba(241,241,237,.6) !important; } html.dark-mode .mfp-arrow-right:after { border-left-color: #f1f1ed !important; } html.dark-mode .mfp-arrow-right:before { border-left-color: rgba(241,241,237,.6) !important; } html.dark-mode .mfp-figure::after { background: #1a1c1a !important; box-shadow: 0 0 8px rgba(0,0,0,.8) !important; } html.dark-mode .mfp-figure small { color: #b8bbb4 !important; } html.dark-mode .mfp-title { color: #e8e9e4 !important; } html.dark-mode .mfp-iframe-scaler iframe { background: #0e0f0f !important; box-shadow: 0 0 8px rgba(0,0,0,.8) !important; } /* Mobile bottom bar */ html.dark-mode .mfp-img-mobile .mfp-bottom-bar { background: rgba(0,0,0,.75) !important; } html.dark-mode .mfp-img-mobile .mfp-close { background: rgba(0,0,0,.72) !important; } /* ============================================================ 4. MEANMENU (.mean-container) ============================================================ */ html.dark-mode .mean-container .mean-bar { background: #0e0f0f !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .mean-container a.meanmenu-reveal { color: #f1f1ed !important; } html.dark-mode .mean-container a.meanmenu-reveal span { background: #f1f1ed !important; } html.dark-mode .mean-container .mean-nav { background: #0e0f0f !important; } html.dark-mode .mean-container .mean-nav ul li a { color: #c8cac0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .mean-container .mean-nav ul li a:hover { color: #f1f1ed !important; background: rgba(255,255,255,.05) !important; } html.dark-mode .mean-container .mean-nav ul li a.mean-expand { color: #b8bbb4 !important; background: transparent !important; } html.dark-mode .mean-container .mean-nav ul li a.mean-expand:hover { color: #f1f1ed !important; } /* ============================================================ 5. NICE SELECT (.nice-select) ============================================================ */ html.dark-mode .nice-select { background: rgba(255,255,255,.04) !important; border: solid 1px rgba(255,255,255,.14) !important; color: #f1f1ed !important; } html.dark-mode .nice-select:hover { border-color: rgba(255,255,255,.24) !important; } html.dark-mode .nice-select:active, html.dark-mode .nice-select.open, html.dark-mode .nice-select:focus { border-color: rgba(255,255,255,.30) !important; } html.dark-mode .nice-select::after { border-bottom: 2px solid #777970 !important; border-right: 2px solid #777970 !important; } html.dark-mode .nice-select.disabled { border-color: rgba(255,255,255,.08) !important; color: #777970 !important; } html.dark-mode .nice-select.disabled::after { border-color: rgba(255,255,255,.14) !important; } html.dark-mode .nice-select .list { background-color: #111212 !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,.55) !important; } html.dark-mode .nice-select .option { color: #c8cac0 !important; border: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .nice-select .option:hover, html.dark-mode .nice-select .option.focus, html.dark-mode .nice-select .option.selected.focus { background-color: rgba(255,255,255,.08) !important; color: #f1f1ed !important; } html.dark-mode .nice-select .option.selected { color: #f1f1ed !important; } html.dark-mode .nice-select .option.disabled { color: #777970 !important; background-color: transparent !important; } html.dark-mode .nice-select .current { color: #f1f1ed !important; } /* ============================================================ 6. PREMIUM HEADER (.premium-header) ============================================================ */ /* Token overrides */ html.dark-mode .premium-header { --ph-bg-header: rgba(9,10,10,.96); --ph-ink-900: #f1f1ed; --ph-ink-700: #c8cac0; --ph-ink-500: #b8bbb4; --ph-ink-400: #777970; --ph-ink-300: rgba(255,255,255,.18); --ph-line: rgba(255,255,255,.10); --ph-line-strong: rgba(255,255,255,.14); --ph-brand-50: rgba(255,255,255,.07); --ph-brand-100: rgba(255,255,255,.14); --ph-shadow-sm: 0 1px 2px rgba(0,0,0,.38); --ph-shadow-md: 0 8px 24px -12px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.28); background: rgba(9,10,10,.96) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } /* Brand */ html.dark-mode .premium-header .ph-brand { border-right: 1px solid rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .premium-header .ph-brand:hover { color: #f1f1ed !important; } html.dark-mode .premium-header .ph-brand__name { color: #f1f1ed !important; } html.dark-mode .premium-header .ph-brand__tag { color: #777970 !important; } /* Breadcrumb */ html.dark-mode .premium-header .ph-breadcrumb { color: #777970 !important; } html.dark-mode .premium-header .ph-page-title { color: #f1f1ed !important; } /* Divider */ html.dark-mode .premium-header .ph-divider { background: rgba(255,255,255,.10) !important; } /* Icon buttons */ html.dark-mode .premium-header .ph-icon-btn { background: transparent !important; color: #c8cac0 !important; border: 1px solid transparent !important; } html.dark-mode .premium-header .ph-icon-btn:hover, html.dark-mode .premium-header .ph-icon-btn:focus { background: rgba(255,255,255,.07) !important; color: #f1f1ed !important; border-color: rgba(255,255,255,.14) !important; } html.dark-mode .premium-header .ph-icon-btn--primary { background: rgba(255,255,255,.07) !important; color: var(--ph-brand) !important; } html.dark-mode .premium-header .ph-icon-btn--primary:hover, html.dark-mode .premium-header .ph-icon-btn--primary:focus { background: var(--ph-brand) !important; color: #f1f1ed !important; border-color: var(--ph-brand) !important; } /* Quick actions button */ html.dark-mode .premium-header .ph-quick { background: rgba(255,255,255,.07) !important; color: var(--ph-brand) !important; } html.dark-mode .premium-header .ph-quick:hover, html.dark-mode .premium-header .ph-quick:focus, html.dark-mode .premium-header .ph-quick[aria-expanded="true"] { background: var(--ph-brand) !important; color: #f1f1ed !important; border-color: var(--ph-brand) !important; } /* Language switcher */ html.dark-mode .premium-header .ph-lang .dropdown-toggle { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .premium-header .ph-lang .dropdown-toggle:hover, html.dark-mode .premium-header .ph-lang .dropdown-toggle[aria-expanded="true"] { border-color: rgba(255,255,255,.22) !important; color: #f1f1ed !important; background: rgba(255,255,255,.08) !important; } html.dark-mode .premium-header .ph-lang .dropdown-menu { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 18px 42px rgba(0,0,0,.55) !important; } html.dark-mode .premium-header .ph-lang .dropdown-menu .dropdown-item { color: #c8cac0 !important; } html.dark-mode .premium-header .ph-lang .dropdown-menu .dropdown-item:hover, html.dark-mode .premium-header .ph-lang .dropdown-menu .dropdown-item:focus { background: rgba(255,255,255,.07) !important; color: #f1f1ed !important; } html.dark-mode .premium-header .ph-lang .dropdown-menu .dropdown-item.active { background: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } /* Notification button */ html.dark-mode .premium-header .ph-notify .notice { background: transparent !important; border: 1px solid transparent !important; color: #c8cac0 !important; } html.dark-mode .premium-header .ph-notify .notice:hover, html.dark-mode .premium-header .ph-notify .notice[aria-expanded="true"] { background: rgba(255,255,255,.07) !important; color: #f1f1ed !important; border-color: rgba(255,255,255,.14) !important; } /* Notification badge border */ html.dark-mode .premium-header .ph-notify .notice > .user-notification-trigger__badge { border-color: #090a0a !important; } html.dark-mode .dashboard-user-layout .append-new-notification .user-notification-trigger__badge { border-color: #090a0a !important; } /* Notification dropdown */ html.dark-mode .premium-header .ph-notify .notification-dropdown { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 18px 42px rgba(0,0,0,.55) !important; } html.dark-mode .premium-header .notification-dropdown__header { border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .premium-header .notification-dropdown__eyebrow { color: #777970 !important; } html.dark-mode .premium-header .notification-dropdown__title { color: #f1f1ed !important; } html.dark-mode .premium-header .notification-dropdown__count { background: rgba(255,255,255,.07) !important; color: var(--ph-brand) !important; } html.dark-mode .premium-header .notification-dropdown__item { color: #c8cac0 !important; } html.dark-mode .premium-header .notification-dropdown__item:hover, html.dark-mode .premium-header .notification-dropdown__item:focus { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .premium-header .notification-dropdown__icon { background: rgba(255,255,255,.07) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important; } html.dark-mode .premium-header .notification-dropdown__item-title { color: #f1f1ed !important; } html.dark-mode .premium-header .notification-dropdown__time { color: #777970 !important; } html.dark-mode .premium-header .notification-dropdown__message { color: #b8bbb4 !important; } html.dark-mode .premium-header .notification-dropdown__footer { border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .premium-header .notification-dropdown__action--read { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .premium-header .notification-dropdown__action--read:hover { background: rgba(90,154,90,.18) !important; } html.dark-mode .premium-header .notification-dropdown__action--view { background: rgba(255,255,255,.07) !important; } html.dark-mode .premium-header .notification-dropdown__action--view:hover { background: var(--ph-brand) !important; color: #f1f1ed !important; } /* Premium notification dropdown */ html.dark-mode .dashboard-user-layout .append-new-notification .user-notification-dropdown.user-notification-dropdown--premium { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 24px 54px rgba(0,0,0,.65) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.dark-mode .dashboard-user-layout .user-notification-dropdown__header { background: linear-gradient(135deg, rgba(var(--ph-brand-rgb),.08), rgba(var(--ph-accent-rgb),.06)), rgba(255,255,255,.02) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .dashboard-user-layout .user-notification-dropdown__head-icon { background: rgba(255,255,255,.07) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 12px 24px -18px rgba(var(--ph-brand-rgb),.5) !important; } html.dark-mode .dashboard-user-layout .user-notification-dropdown__eyebrow { color: var(--ph-brand) !important; } html.dark-mode .dashboard-user-layout .user-notification-dropdown__title { color: #f1f1ed !important; } html.dark-mode .dashboard-user-layout .user-notification-dropdown__subtitle { color: #b8bbb4 !important; } html.dark-mode .dashboard-user-layout .user-notification-dropdown__count { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: none !important; } html.dark-mode .dashboard-user-layout .user-notification-dropdown__count.is-clear { background: rgba(90,154,90,.10) !important; border-color: rgba(90,154,90,.18) !important; color: #8fcf8f !important; } html.dark-mode .dashboard-user-layout .user-notification-dropdown__list { background: rgba(255,255,255,.02) !important; } html.dark-mode .dashboard-user-layout .user-notification-card { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; } html.dark-mode .dashboard-user-layout .user-notification-card:hover, html.dark-mode .dashboard-user-layout .user-notification-card:focus { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; } html.dark-mode .dashboard-user-layout .user-notification-card.is-unread { border-color: rgba(var(--user-notification-tone-rgb, var(--ph-brand-rgb)),.18) !important; box-shadow: none !important; } html.dark-mode .dashboard-user-layout .user-notification-card__icon { background: rgba(var(--user-notification-tone-rgb, var(--ph-brand-rgb)),.12) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; } html.dark-mode .dashboard-user-layout .user-notification-card__time { color: #777970 !important; } html.dark-mode .dashboard-user-layout .user-notification-card__title { color: #f1f1ed !important; } html.dark-mode .dashboard-user-layout .user-notification-card__message { color: #b8bbb4 !important; } html.dark-mode .dashboard-user-layout .user-notification-dropdown__footer { background: rgba(255,255,255,.02) !important; border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .dashboard-user-layout .user-notification-dropdown__empty.user-not-found { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .dashboard-user-layout .user-notification-empty-preview { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .dashboard-user-layout .user-notification-empty-preview__icon { background: #0e0f0f !important; box-shadow: none !important; } html.dark-mode .dashboard-user-layout .user-notification-empty-preview__line { background: rgba(255,255,255,.10) !important; } html.dark-mode .dashboard-user-layout .user-notification-empty-preview__line--short { background: rgba(255,255,255,.07) !important; } html.dark-mode .dashboard-user-layout .user-notification-empty-preview__badge { background: rgba(90,154,90,.12) !important; box-shadow: inset 0 0 0 5px #0e0f0f !important; } /* Profile chip */ html.dark-mode .premium-header .ph-profile__btn { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)), radial-gradient(circle at 10% 0%, rgba(var(--ph-profile-tone-rgb),.07), transparent 36%) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: none !important; } html.dark-mode .premium-header .ph-profile__btn:hover, html.dark-mode .premium-header .ph-profile__btn:focus, html.dark-mode .premium-header .ph-profile.is-open .ph-profile__btn { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.22) !important; box-shadow: none !important; } html.dark-mode .premium-header .ph-profile__name { color: #f1f1ed !important; } html.dark-mode .premium-header .ph-avatar::after { border-color: #090a0a !important; } html.dark-mode .premium-header .ph-profile__verification { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; } html.dark-mode .premium-header .ph-profile__chev { color: #777970 !important; } /* Profile dropdown menu */ html.dark-mode .premium-header .ph-profile__menu { background: linear-gradient(180deg, #0e0f0f 0%, #111212 100%) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 18px 42px rgba(0,0,0,.55) !important; } html.dark-mode .premium-header .ph-profile__menu-card { background: linear-gradient(135deg, rgba(var(--front-color-primary-rgb),.06), rgba(255,255,255,.03)) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .premium-header .ph-profile__menu-avatar { border-color: #111212 !important; box-shadow: 0 0 0 2px rgba(var(--front-color-primary-rgb),.18) !important; } html.dark-mode .premium-header .ph-profile__menu-avatar::after { border-color: #0e0f0f !important; } html.dark-mode .premium-header .ph-profile__menu-user h4 { color: #f1f1ed !important; } html.dark-mode .premium-header .ph-profile__menu-badge--rank { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; } html.dark-mode .premium-header .ph-profile__menu-list a, html.dark-mode .premium-header .ph-profile__menu-utility { color: #c8cac0 !important; background: transparent !important; } html.dark-mode .premium-header .ph-profile__menu-list a:hover, html.dark-mode .premium-header .ph-profile__menu-list a:focus, html.dark-mode .premium-header .ph-profile__menu-utility:hover, html.dark-mode .premium-header .ph-profile__menu-utility:focus { background: rgba(255,255,255,.06) !important; color: #f1f1ed !important; } html.dark-mode .premium-header .ph-profile__menu-list a > span:first-child, html.dark-mode .premium-header .ph-profile__menu-icon { background: rgba(255,255,255,.07) !important; } html.dark-mode .premium-header .ph-profile__menu-label { color: #f1f1ed !important; } html.dark-mode .premium-header .ph-profile__menu-hint { color: #777970 !important; } html.dark-mode .premium-header .ph-profile__menu-arrow { color: rgba(255,255,255,.25) !important; } html.dark-mode .premium-header .ph-profile__menu-list a:hover .ph-profile__menu-label, html.dark-mode .premium-header .ph-profile__menu-list a:focus .ph-profile__menu-label, html.dark-mode .premium-header .ph-profile__menu-utility:hover .ph-profile__menu-label, html.dark-mode .premium-header .ph-profile__menu-utility:focus .ph-profile__menu-label { color: var(--ph-brand) !important; } html.dark-mode .premium-header .ph-profile__menu-divider { background: rgba(255,255,255,.08) !important; margin: 6px 0 !important; } /* Menu rank row */ html.dark-mode .premium-header .ph-profile__menu-rank { color: #c8cac0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .premium-header .ph-profile__menu-rank:hover { background: rgba(255,255,255,.06) !important; color: #f1f1ed !important; } /* Status panel */ html.dark-mode .premium-header .ph-profile__status-item { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.09) !important; color: #f1f1ed !important; } html.dark-mode .premium-header .ph-profile__status-item:hover, html.dark-mode .premium-header .ph-profile__status-item:focus { border-color: rgba(255,255,255,.18) !important; background: rgba(255,255,255,.06) !important; color: var(--ph-brand) !important; } html.dark-mode .premium-header .ph-profile__status-item.is-active { border-color: rgba(90,154,90,.22) !important; background: linear-gradient(135deg, rgba(90,154,90,.08), rgba(255,255,255,.03)) !important; } html.dark-mode .premium-header .ph-profile__status-icon { background: rgba(255,255,255,.07) !important; } html.dark-mode .premium-header .ph-profile__status-item.is-active .ph-profile__status-icon { background: rgba(90,154,90,.12) !important; } html.dark-mode .premium-header .ph-profile__status-label { color: #f1f1ed !important; } html.dark-mode .premium-header .ph-profile__status-value { color: #777970 !important; } html.dark-mode .premium-header .ph-profile__status-pill { background: rgba(255,255,255,.07) !important; color: #b8bbb4 !important; } html.dark-mode .premium-header .ph-profile__status-item.is-active .ph-profile__status-pill { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } /* Logout item */ html.dark-mode .premium-header .ph-profile__menu-list a.is-logout { background: rgba(210,60,60,.07) !important; } html.dark-mode .premium-header .ph-profile__menu-list a.is-logout:hover, html.dark-mode .premium-header .ph-profile__menu-list a.is-logout:focus { background: rgba(210,60,60,.12) !important; } html.dark-mode .premium-header .ph-profile__menu-list a.is-logout > span:first-child, html.dark-mode .premium-header .ph-profile__menu-list a.is-logout .ph-profile__menu-icon { background: rgba(210,60,60,.10) !important; } /* * ============================================================ * DARK MODE — subscription & swiper overrides * Adicione ao final do dark-mode.css existente * * Cobre: * 51. subscription-checkout.css (.ck-*) * 52. subscription-plans.css (.sp-*) * 53. subscription.css (.usp-*, .usc-*) * 54. swiper-bundle.min.css (.swiper*) * ============================================================ */ /* ============================================================ 51. SUBSCRIPTION CHECKOUT (.ck-*) ============================================================ */ /* Tokens locais */ html.dark-mode .card-main { --ck-blue: #6fa8dc; --ck-blue-dark: #4d8abf; --ck-blue-light: rgba(111,168,220,.10); --ck-blue-border: rgba(111,168,220,.22); --ck-ink-900: #f1f1ed; --ck-ink-700: #c8cac0; --ck-ink-500: #777970; --ck-ink-400: #555752; --ck-ink-300: rgba(255,255,255,.12); --ck-line: rgba(255,255,255,.10); --ck-line-soft: rgba(255,255,255,.07); --ck-bg: #111212; --ck-green: #8fcf8f; --ck-green-light: rgba(90,154,90,.14); --ck-amber: #d4a84b; --ck-amber-light: rgba(212,168,75,.12); --ck-rose: #e08080; --ck-rose-light: rgba(210,60,60,.12); } /* Page header */ html.dark-mode .ck-page-head { border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .ck-back-link { color: #777970 !important; } html.dark-mode .ck-back-link:hover { color: #c8cac0 !important; } html.dark-mode .ck-page-head__title { color: #f1f1ed !important; } html.dark-mode .ck-page-head__sub { color: #777970 !important; } html.dark-mode .ck-secure-badge { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.22) !important; } /* Plan card */ html.dark-mode .ck-plan-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .ck-plan-card__header { border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .ck-plan-card__eyebrow { color: #555752 !important; } html.dark-mode .ck-plan-card__name { color: #f1f1ed !important; } html.dark-mode .ck-plan-card__tagline { color: #777970 !important; } html.dark-mode .ck-plan-card__badge { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.22) !important; } /* Perks */ html.dark-mode .ck-perks { border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .ck-perk { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; border-color: rgba(212,168,75,.20) !important; } /* Features */ html.dark-mode .ck-features__heading { color: #555752 !important; } html.dark-mode .ck-feature { color: #c8cac0 !important; } html.dark-mode .ck-feature__check { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .ck-feature__value { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } /* From block */ html.dark-mode .ck-from-block { background: #111212 !important; border: 1px dashed rgba(255,255,255,.10) !important; } html.dark-mode .ck-from-block__lbl { color: #555752 !important; } html.dark-mode .ck-from-block__val { color: #f1f1ed !important; } html.dark-mode .ck-from-block__val span { color: #777970 !important; } html.dark-mode .ck-from-block__sub { color: #777970 !important; } /* Order card */ html.dark-mode .ck-order-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .ck-order-card__title { color: #f1f1ed !important; } /* Cycle selector */ html.dark-mode .ck-cycle-selector { background: rgba(255,255,255,.05) !important; } html.dark-mode .ck-cycle-btn { color: #777970 !important; } html.dark-mode .ck-cycle-btn:hover { color: #c8cac0 !important; } html.dark-mode .ck-cycle-btn.is-active { background: #0e0f0f !important; color: #f1f1ed !important; box-shadow: 0 1px 3px rgba(0,0,0,.35) !important; } html.dark-mode .ck-cycle-btn__save { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } /* Breakdown */ html.dark-mode .ck-breakdown__row { color: #c8cac0 !important; } html.dark-mode .ck-breakdown__row b { color: #f1f1ed !important; } html.dark-mode .ck-breakdown__row small { color: #555752 !important; } html.dark-mode .ck-breakdown__row--meta small { color: #777970 !important; } html.dark-mode .ck-breakdown__row--credit, html.dark-mode .ck-breakdown__row--credit b { color: #8fcf8f !important; } html.dark-mode .ck-breakdown__divider { background: rgba(255,255,255,.08) !important; } html.dark-mode .ck-breakdown__row--total { color: #f1f1ed !important; } html.dark-mode .ck-breakdown__row--total b { color: #6fa8dc !important; } /* Wallet block */ html.dark-mode .ck-wallet { background: rgba(111,168,220,.10) !important; border-color: rgba(111,168,220,.22) !important; } html.dark-mode .ck-wallet--low { background: rgba(210,60,60,.10) !important; border-color: rgba(210,60,60,.22) !important; } html.dark-mode .ck-wallet__icon { background: rgba(255,255,255,.08) !important; color: #6fa8dc !important; } html.dark-mode .ck-wallet--low .ck-wallet__icon { color: #e08080 !important; } html.dark-mode .ck-wallet__lbl { color: #777970 !important; } html.dark-mode .ck-wallet__val { color: #f1f1ed !important; } html.dark-mode .ck-wallet__ok { color: #8fcf8f !important; } html.dark-mode .ck-wallet__warn { color: #e08080 !important; } /* Pay button */ html.dark-mode .ck-pay-btn { background: linear-gradient(135deg, rgba(111,168,220,.18), rgba(77,138,191,.22)) !important; color: #f1f1ed !important; box-shadow: 0 8px 24px rgba(0,0,0,.45) !important; border: 1px solid rgba(111,168,220,.28) !important; } html.dark-mode .ck-pay-btn:hover:not(:disabled) { box-shadow: 0 12px 32px rgba(0,0,0,.55) !important; } html.dark-mode .ck-cancel-link { color: #777970 !important; } html.dark-mode .ck-cancel-link:hover { color: #c8cac0 !important; } /* Trust row */ html.dark-mode .ck-trust { border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .ck-trust span { color: #555752 !important; } html.dark-mode .ck-trust i { color: #6fa8dc !important; } /* Switch note */ html.dark-mode .sp-card__switch-note { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; border-color: rgba(90,154,90,.20) !important; } /* ============================================================ 52. SUBSCRIPTION PLANS (.sp-*) ============================================================ */ /* Tokens locais */ html.dark-mode :root, html.dark-mode { --sp-blue: #6fa8dc; --sp-blue-dark: #4d8abf; --sp-blue-light: rgba(111,168,220,.10); --sp-blue-mid: rgba(111,168,220,.16); --sp-blue-border: rgba(111,168,220,.22); --sp-text-primary: #f1f1ed; --sp-text-body: #c8cac0; --sp-text-muted: #777970; --sp-text-faint: #555752; --sp-surface: #0e0f0f; --sp-border: rgba(255,255,255,.10); --sp-border-hover: rgba(255,255,255,.22); --sp-green: #8fcf8f; --sp-green-light: rgba(90,154,90,.14); --sp-green-border: rgba(90,154,90,.22); --sp-amber: #d4a84b; --sp-amber-light: rgba(212,168,75,.12); --sp-shadow-xs: 0 1px 3px rgba(0,0,0,.4); --sp-shadow-sm: 0 2px 8px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.28); --sp-shadow-md: 0 6px 20px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); --sp-shadow-lg: 0 12px 36px rgba(0,0,0,.58), 0 4px 10px rgba(0,0,0,.3); --sp-shadow-feat: 0 8px 32px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.4); } /* Billing toggle */ html.dark-mode .sp-toggle { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 1px 4px rgba(0,0,0,.4) !important; } html.dark-mode .sp-toggle__btn { color: #777970 !important; } html.dark-mode .sp-toggle__btn:hover { color: #c8cac0 !important; } html.dark-mode .sp-toggle__btn.active { background: rgba(255,255,255,.12) !important; color: #f1f1ed !important; box-shadow: 0 2px 10px rgba(0,0,0,.4) !important; } html.dark-mode .sp-toggle__save { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .sp-toggle__btn.active .sp-toggle__save { background: rgba(255,255,255,.14) !important; color: rgba(255,255,255,.88) !important; } /* Billing hint */ html.dark-mode .sp-billing-hint { color: #777970 !important; } html.dark-mode .sp-billing-hint i { color: #d4a84b !important; } /* Card — base */ html.dark-mode .sp-card { background: #0e0f0f !important; border: 1.5px solid rgba(255,255,255,.10) !important; box-shadow: 0 2px 8px rgba(0,0,0,.42) !important; } html.dark-mode .sp-card:not(.sp-card--featured)::before { background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,.08) 45%, transparent 95%) !important; opacity: .5 !important; } html.dark-mode .sp-card:not(.sp-card--featured):hover::before { opacity: 1 !important; } html.dark-mode .sp-card:hover { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 10px 32px rgba(0,0,0,.55) !important; } /* Current plan */ html.dark-mode .sp-card--current { border: 2px solid rgba(111,168,220,.35) !important; box-shadow: 0 0 0 4px rgba(111,168,220,.08), 0 6px 20px rgba(0,0,0,.5) !important; } /* Featured card — mantém gradiente azul, ajusta texto */ html.dark-mode .sp-card--featured { background: linear-gradient(155deg, #1a2e50 0%, #0d1e3c 55%, #091528 100%) !important; border: none !important; box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5) !important; } /* Badges */ html.dark-mode .sp-badge--current { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; border-color: rgba(90,154,90,.22) !important; } html.dark-mode .sp-badge--featured { background: rgba(111,168,220,.20) !important; color: #a8c8e8 !important; box-shadow: none !important; } html.dark-mode .sp-badge--free { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.22) !important; } html.dark-mode .sp-badge--pro { background: rgba(160,148,230,.10) !important; color: #a094e6 !important; border-color: rgba(160,148,230,.18) !important; } /* Card top */ html.dark-mode .sp-card__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.20) !important; } html.dark-mode .sp-card__name { color: #f1f1ed !important; } html.dark-mode .sp-card__tagline { color: #777970 !important; } html.dark-mode .sp-card__currency { color: #777970 !important; } html.dark-mode .sp-card__amount { color: #f1f1ed !important; } html.dark-mode .sp-card__amount--free { color: #6fa8dc !important; } html.dark-mode .sp-card__period { color: #555752 !important; } html.dark-mode .sp-card__billing-note { color: #8fcf8f !important; } /* Divider */ html.dark-mode .sp-card__divider { background: rgba(255,255,255,.08) !important; } /* Feature list */ html.dark-mode .sp-card__feat-heading { color: #555752 !important; } html.dark-mode .sp-card__feature-item { color: #c8cac0 !important; } html.dark-mode .sp-card__feat-check { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } /* Pills */ html.dark-mode .sp-pill--trial { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .sp-pill--grace { background: rgba(255,255,255,.07) !important; color: #777970 !important; } html.dark-mode .sp-pill--value { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } /* CTA buttons — non-featured */ html.dark-mode .sp-card__btn--default { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.22) !important; } html.dark-mode .sp-card__btn--default:hover { background: rgba(111,168,220,.20) !important; color: #a8c8e8 !important; border-color: rgba(111,168,220,.35) !important; box-shadow: 0 6px 20px rgba(0,0,0,.5) !important; } /* CTA button — featured */ html.dark-mode .sp-card__btn--featured { background: rgba(255,255,255,.14) !important; color: #f1f1ed !important; box-shadow: 0 2px 8px rgba(0,0,0,.4) !important; } html.dark-mode .sp-card__btn--featured:hover { background: rgba(255,255,255,.22) !important; color: #f1f1ed !important; } /* CTA button — active */ html.dark-mode .sp-card__btn--active { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; border-color: rgba(90,154,90,.22) !important; } html.dark-mode .sp-card--featured .sp-card__btn--active { background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.78) !important; border-color: rgba(255,255,255,.16) !important; } /* CTA button — locked */ html.dark-mode .sp-card__btn--locked { background: rgba(255,255,255,.04) !important; color: #555752 !important; border-color: rgba(255,255,255,.08) !important; } /* Footer note */ html.dark-mode .sp-footer-note { color: #555752 !important; } html.dark-mode .sp-footer-note i { color: rgba(255,255,255,.14) !important; } /* Empty state */ html.dark-mode .sp-empty { color: #555752 !important; } /* ============================================================ 53. SUBSCRIPTION DASHBOARD (.usp-*, .usc-*) ============================================================ */ /* ── USP (plans grid) ── */ html.dark-mode .usp-notice { background: rgba(111,168,220,.08) !important; border-color: rgba(111,168,220,.16) !important; color: #c8cac0 !important; } html.dark-mode .usp-notice i { color: #6fa8dc !important; } html.dark-mode .usp-notice a { color: #6fa8dc !important; } /* Plan card base */ html.dark-mode .usp-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 2px 20px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.28) !important; } html.dark-mode .usp-card::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06) 40%, rgba(255,255,255,.06) 60%, transparent) !important; } html.dark-mode .usp-card:hover { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 12px 36px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.3) !important; } /* Dark (featured) card — mantém gradiente escuro original */ html.dark-mode .usp-card--dark { background: linear-gradient(150deg, #141f40 0%, #090e22 52%, #0d1130 100%) !important; border: 1px solid rgba(100,130,255,.16) !important; box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07) !important; } /* Current plan */ html.dark-mode .usp-card--current { border-color: rgba(90,154,90,.25) !important; box-shadow: 0 2px 16px rgba(90,154,90,.10) !important; } html.dark-mode .usp-card--current::after { background: linear-gradient(90deg, transparent, rgba(90,154,90,.20) 40%, rgba(90,154,90,.20) 60%, transparent) !important; } /* Badges */ html.dark-mode .usp-card__badge--dark { background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.88) !important; border-color: rgba(255,255,255,.14) !important; } html.dark-mode .usp-card__badge--pro { background: rgba(160,148,230,.10) !important; color: #a094e6 !important; border-color: rgba(160,148,230,.16) !important; } html.dark-mode .usp-card__badge--current { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; border-color: rgba(90,154,90,.20) !important; } /* Card text */ html.dark-mode .usp-card__name { color: #f1f1ed !important; } html.dark-mode .usp-card__desc { color: #777970 !important; } html.dark-mode .usp-card__currency { color: #777970 !important; } html.dark-mode .usp-card__amount { color: #f1f1ed !important; } html.dark-mode .usp-card__period { color: #555752 !important; } html.dark-mode .usp-card__annual-note { color: #8fcf8f !important; } /* CTA buttons */ html.dark-mode .usp-card__cta--default { box-shadow: 0 3px 16px rgba(0,0,0,.4) !important; } html.dark-mode .usp-card__cta--dark { background: rgba(255,255,255,.12) !important; color: #f1f1ed !important; box-shadow: 0 3px 14px rgba(0,0,0,.4) !important; } html.dark-mode .usp-card__cta--dark:hover { background: rgba(255,255,255,.18) !important; color: #f1f1ed !important; } html.dark-mode .usp-card__cta--active { background: rgba(90,154,90,.10) !important; color: #8fcf8f !important; border-color: rgba(90,154,90,.20) !important; } html.dark-mode .usp-card__cta--disabled { background: rgba(255,255,255,.04) !important; color: #555752 !important; } /* Divider */ html.dark-mode .usp-card__divider { background: rgba(255,255,255,.08) !important; } /* Feature list */ html.dark-mode .usp-card__feat-label { color: #555752 !important; } html.dark-mode .usp-card__feature { color: #c8cac0 !important; } html.dark-mode .usp-card__feat-icon { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .usp-card__feat-pill { background: rgba(255,255,255,.06) !important; color: #777970 !important; border-color: rgba(255,255,255,.08) !important; } /* ── USC (current subscription) ── */ /* Tokens v2 */ html.dark-mode .usc-current-v2 { --usc-text: #f1f1ed; --usc-muted: #777970; --usc-soft: #555752; --usc-border: rgba(255,255,255,.10); --usc-surface: #0e0f0f; --usc-surface-soft: #111212; --usc-blue: #6fa8dc; --usc-blue-soft: rgba(111,168,220,.10); --usc-green: #8fcf8f; --usc-green-soft: rgba(90,154,90,.14); --usc-amber: #d4a84b; --usc-amber-soft: rgba(212,168,75,.12); --usc-red: #e08080; --usc-red-soft: rgba(210,60,60,.12); color: #f1f1ed !important; } /* Shell */ html.dark-mode .usc-shell { background: radial-gradient(circle at top right, rgba(111,168,220,.06), transparent 30%), linear-gradient(180deg, #0e0f0f 0%, #111212 100%) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 18px 44px rgba(0,0,0,.45) !important; } /* Empty state */ html.dark-mode .usc-empty { background: radial-gradient(circle at top, rgba(111,168,220,.08), transparent 42%), linear-gradient(180deg, #0e0f0f 0%, #111212 100%) !important; border: 1px dashed rgba(255,255,255,.14) !important; } html.dark-mode .usc-empty__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; box-shadow: inset 0 0 0 1px rgba(111,168,220,.12) !important; } /* Hero */ html.dark-mode .usc-hero__eyebrow, html.dark-mode .usc-panel__eyebrow { color: #555752 !important; } html.dark-mode .usc-hero__eyebrow-dot { background: linear-gradient(135deg, #6fa8dc 0%, #8fcf8f 100%) !important; box-shadow: 0 0 0 5px rgba(111,168,220,.10) !important; } html.dark-mode .usc-hero__title { color: #f1f1ed !important; } html.dark-mode .usc-hero__subtitle { color: #777970 !important; } html.dark-mode .usc-hero__meta-item, html.dark-mode .usc-stat { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark-mode .usc-hero__meta-label, html.dark-mode .usc-stat__label { color: #555752 !important; } html.dark-mode .usc-hero__meta-item strong, html.dark-mode .usc-stat__value { color: #f1f1ed !important; } html.dark-mode .usc-stat__hint { color: #777970 !important; } html.dark-mode .usc-hero__btn--ghost { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; } /* Alerts */ html.dark-mode .usc-alert--warning { background: rgba(212,168,75,.10) !important; border-color: rgba(212,168,75,.18) !important; color: #d4a84b !important; } html.dark-mode .usc-alert--muted { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; color: #777970 !important; } /* Panel */ html.dark-mode .usc-panel__title { color: #f1f1ed !important; } html.dark-mode .usc-panel__subtitle { color: #777970 !important; } html.dark-mode .usc-panel__pill { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .usc-panel__pill--muted { background: rgba(255,255,255,.06) !important; color: #777970 !important; } html.dark-mode .usc-panel__empty { border: 1px dashed rgba(255,255,255,.12) !important; background: rgba(255,255,255,.02) !important; color: #777970 !important; } /* Feature & payment list */ html.dark-mode .usc-feature-list__item, html.dark-mode .usc-payment-list__item { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .usc-feature-list__icon { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .usc-feature-list__name, html.dark-mode .usc-payment-list__type { color: #f1f1ed !important; } html.dark-mode .usc-feature-list__meta, html.dark-mode .usc-payment-list__meta { color: #777970 !important; } html.dark-mode .usc-feature-list__value, html.dark-mode .usc-payment-list__amount { color: #f1f1ed !important; } /* ── USC v2 components ── */ html.dark-mode .usc-empty-state { border: 1px dashed rgba(111,168,220,.22) !important; background: linear-gradient(180deg, #0e0f0f 0%, #111212 100%) !important; } html.dark-mode .usc-empty-state__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .usc-empty-state__eyebrow { color: #6fa8dc !important; } html.dark-mode .usc-empty-state h5 { color: #f1f1ed !important; } html.dark-mode .usc-empty-state p { color: #777970 !important; } /* Overview */ html.dark-mode .usc-overview, html.dark-mode .usc-metric, html.dark-mode .usc-panel-v2 { border: 1px solid rgba(255,255,255,.10) !important; background: #0e0f0f !important; box-shadow: 0 10px 28px rgba(0,0,0,.38) !important; } html.dark-mode .usc-overview { background: linear-gradient(135deg, rgba(111,168,220,.07), rgba(90,154,90,.05)), #0e0f0f !important; } html.dark-mode .usc-kicker { color: #6fa8dc !important; } html.dark-mode .usc-overview__title-row h3 { color: #f1f1ed !important; } html.dark-mode .usc-overview__title-row p { color: #777970 !important; } /* Statuses */ html.dark-mode .usc-status--success, html.dark-mode .usc-pay-status--success { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .usc-status--info { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .usc-status--warning, html.dark-mode .usc-pay-status--warning { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .usc-status--danger, html.dark-mode .usc-pay-status--danger { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .usc-status--secondary, html.dark-mode .usc-status--dark, html.dark-mode .usc-pay-status--muted { background: rgba(255,255,255,.06) !important; color: #777970 !important; } /* Progress card */ html.dark-mode .usc-progress-card { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(111,168,220,.12) !important; } html.dark-mode .usc-progress-card__head { color: #f1f1ed !important; } html.dark-mode .usc-progress-card__head strong { color: #6fa8dc !important; } html.dark-mode .usc-progress-card__meta { color: #777970 !important; } html.dark-mode .usc-progress { background: rgba(255,255,255,.08) !important; } /* Actions */ html.dark-mode .usc-action--primary { background: rgba(111,168,220,.18) !important; color: #a8c8e8 !important; border: 1px solid rgba(111,168,220,.28) !important; box-shadow: 0 10px 24px rgba(0,0,0,.42) !important; } html.dark-mode .usc-action--primary:hover { color: #f1f1ed !important; } html.dark-mode .usc-action--ghost { border-color: rgba(111,168,220,.16) !important; background: rgba(255,255,255,.04) !important; color: #6fa8dc !important; } html.dark-mode .usc-action--danger { border-color: rgba(210,60,60,.18) !important; background: rgba(255,255,255,.03) !important; color: #e08080 !important; } /* Metrics */ html.dark-mode .usc-metric__label { color: #555752 !important; } html.dark-mode .usc-metric strong { color: #f1f1ed !important; } html.dark-mode .usc-metric small { color: #777970 !important; } html.dark-mode .usc-metric__icon--blue { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .usc-metric__icon--green { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .usc-metric__icon--amber { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .usc-metric__icon--violet { background: rgba(160,148,230,.10) !important; color: #a094e6 !important; } /* Notices */ html.dark-mode .usc-notice--warning { border: 1px solid rgba(212,168,75,.18) !important; background: rgba(212,168,75,.08) !important; color: #d4a84b !important; } html.dark-mode .usc-notice--info { border: 1px solid rgba(111,168,220,.16) !important; background: rgba(111,168,220,.08) !important; color: #6fa8dc !important; } /* Panel v2 */ html.dark-mode .usc-panel-v2 h4 { color: #f1f1ed !important; } html.dark-mode .usc-panel-v2 p { color: #777970 !important; } html.dark-mode .usc-count { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } /* Feature grid items */ html.dark-mode .usc-feature-item { background: #111212 !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .usc-feature-item__icon { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .usc-feature-item__copy strong { color: #f1f1ed !important; } html.dark-mode .usc-feature-item__copy small { color: #777970 !important; } html.dark-mode .usc-feature-item__value { color: #6fa8dc !important; } /* Detail & payment lists */ html.dark-mode .usc-detail-list > div, html.dark-mode .usc-payment-item { background: #111212 !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .usc-detail-list span, html.dark-mode .usc-payment-item span { color: #777970 !important; } html.dark-mode .usc-detail-list strong, html.dark-mode .usc-payment-item strong { color: #f1f1ed !important; } /* Mini empty */ html.dark-mode .usc-mini-empty { border: 1px dashed rgba(111,168,220,.16) !important; background: #111212 !important; color: #777970 !important; } html.dark-mode .usc-mini-empty i { color: #6fa8dc !important; } /* Sticky actions bar (mobile) */ @media (max-width: 420px) { html.dark-mode .usc-overview__actions { background: rgba(14,15,15,.92) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 12px 30px rgba(0,0,0,.55) !important; } } /* ============================================================ 54. SWIPER (.swiper*) ============================================================ */ /* Pagination bullets — inactive */ html.dark-mode .swiper-pagination-bullet { background: rgba(255,255,255,.22) !important; opacity: 1 !important; } /* Pagination bullets — active */ html.dark-mode .swiper-pagination-bullet-active { background: rgba(255,255,255,.72) !important; opacity: 1 !important; } /* Pagination progressbar */ html.dark-mode .swiper-pagination-progressbar { background: rgba(255,255,255,.10) !important; } html.dark-mode .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: rgba(255,255,255,.55) !important; } /* Navigation arrows */ html.dark-mode .swiper-button-next, html.dark-mode .swiper-button-prev { color: rgba(255,255,255,.65) !important; } html.dark-mode .swiper-button-next:hover, html.dark-mode .swiper-button-prev:hover { color: #f1f1ed !important; } html.dark-mode .swiper-button-next.swiper-button-disabled, html.dark-mode .swiper-button-prev.swiper-button-disabled { opacity: .22 !important; } /* Scrollbar */ html.dark-mode .swiper-scrollbar { background: rgba(255,255,255,.06) !important; } html.dark-mode .swiper-scrollbar-drag { background: rgba(255,255,255,.22) !important; } html.dark-mode .swiper-scrollbar-drag:hover { background: rgba(255,255,255,.38) !important; } /* 3D slide shadows */ html.dark-mode .swiper-3d .swiper-slide-shadow { background: rgba(0,0,0,.35) !important; } html.dark-mode .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0,0,0,.6), rgba(0,0,0,0)) !important; } html.dark-mode .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,0)) !important; } html.dark-mode .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)) !important; } html.dark-mode .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0)) !important; } /* Cube shadow */ html.dark-mode .swiper-cube .swiper-cube-shadow { opacity: .28 !important; } /* Lazy preloader */ html.dark-mode .swiper-lazy-preloader { border-color: rgba(255,255,255,.20) !important; border-top-color: transparent !important; } /* * ============================================================ * DARK MODE — virtual-card, wallet-earn e agent overrides * Adicione ao final do dark-mode.css existente * * Cobre: * 55. virtual-card.css (.vc-*, .vcard*) * 56. wallet-earn.css (.wallet-earn-page, .we-*, .we-stk-*) * 57. agent.css (.auth-shell, .auth-card, .agent-*) * ============================================================ */ /* ============================================================ 55. VIRTUAL CARD (.vc-*, .vcard*) ============================================================ */ /* Tokens locais */ html.dark-mode .vc-page, html.dark-mode .vc-modal { --vc-brand: #6fa8dc; --vc-brand-600: #4d8abf; --vc-brand-50: rgba(111,168,220,.10); --vc-ink: #f1f1ed; --vc-ink-2: #c8cac0; --vc-muted: #777970; --vc-muted-2: #555752; --vc-line: rgba(255,255,255,.10); --vc-line-2: rgba(255,255,255,.07); --vc-bg: #111212; --vc-panel: #0e0f0f; --vc-green: #8fcf8f; --vc-green-50: rgba(90,154,90,.14); --vc-red: #e08080; --vc-red-50: rgba(210,60,60,.12); --vc-amber: #d4a84b; --vc-amber-50: rgba(212,168,75,.12); --vc-violet: #a094e6; --vc-violet-50: rgba(160,148,230,.10); color: #f1f1ed !important; } /* ── Stat cards ── */ html.dark-mode .vc-stat { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .vc-stat__label { color: #555752 !important; } html.dark-mode .vc-stat__value { color: #f1f1ed !important; } html.dark-mode .vc-stat__sub { color: #777970 !important; } html.dark-mode .vc-stat__icon--brand { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .vc-stat__icon--violet { background: rgba(160,148,230,.10) !important; color: #a094e6 !important; } html.dark-mode .vc-stat__icon--amber { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .vc-stat__icon--green { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } /* ── Panel ── */ html.dark-mode .vc-panel { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .vc-panel__title { color: #f1f1ed !important; } html.dark-mode .vc-panel__subtitle { color: #777970 !important; } /* ── Hero field boxes ── */ html.dark-mode .vc-hero__balance-label { color: #555752 !important; } html.dark-mode .vc-hero__balance { color: #f1f1ed !important; } html.dark-mode .vc-hero__progress-value { color: #f1f1ed !important; } html.dark-mode .vc-hero__progress-label { color: #777970 !important; } html.dark-mode .vc-hero__progress-row .muted { color: #777970 !important; } html.dark-mode .vc-progress { background: rgba(255,255,255,.08) !important; } html.dark-mode .vc-hero__field { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .vc-hero__field-label { color: #555752 !important; } html.dark-mode .vc-hero__field-value > span { color: #f1f1ed !important; } html.dark-mode .vc-link-btn { color: #6fa8dc !important; } html.dark-mode .vc-icon-btn { color: #777970 !important; } html.dark-mode .vc-hero__eyebrow { color: #555752 !important; } html.dark-mode .vc-hero__title { color: #f1f1ed !important; } /* ── Quick actions bar ── */ html.dark-mode .vc-actions { border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .vc-actions__btn { color: #c8cac0 !important; background: transparent !important; } html.dark-mode .vc-actions__btn + .vc-actions__btn { border-left: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .vc-actions__btn:hover { background: rgba(255,255,255,.04) !important; } html.dark-mode .vc-actions__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .vc-actions__btn[data-tone="violet"] .vc-actions__icon { background: rgba(160,148,230,.10) !important; color: #a094e6 !important; } html.dark-mode .vc-actions__btn[data-tone="amber"] .vc-actions__icon { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .vc-actions__btn[data-tone="green"] .vc-actions__icon { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .vc-actions__btn[data-tone="red"] .vc-actions__icon { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } @media (max-width: 575.98px) { html.dark-mode .vc-actions__btn:nth-child(3), html.dark-mode .vc-actions__btn:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08) !important; } } /* ── Card switcher (mini cards) ── */ html.dark-mode .vc-switcher--scroll { scrollbar-color: rgba(255,255,255,.14) transparent !important; } html.dark-mode .vc-switcher--scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14) !important; } /* Add card placeholder */ html.dark-mode .vc-mini--add { border: 1.5px dashed rgba(255,255,255,.12) !important; background: rgba(255,255,255,.03) !important; color: #777970 !important; } html.dark-mode .vc-mini--add__plus { background: #111212 !important; border: 1px solid rgba(255,255,255,.10) !important; color: #6fa8dc !important; } html.dark-mode .vc-mini--add__title { color: #c8cac0 !important; } html.dark-mode .vc-mini--add__hint { color: #777970 !important; } /* ── Pills ── */ html.dark-mode .vc-pill { background: rgba(255,255,255,.06) !important; color: #777970 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: none !important; } html.dark-mode .vc-pill--green { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; border-color: rgba(90,154,90,.20) !important; } html.dark-mode .vc-pill--red { background: rgba(210,60,60,.12) !important; color: #e08080 !important; border-color: rgba(210,60,60,.18) !important; } html.dark-mode .vc-pill--amber { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; border-color: rgba(212,168,75,.18) !important; } html.dark-mode .vc-pill--blue { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.18) !important; } html.dark-mode .vc-pill--neutral { background: rgba(255,255,255,.05) !important; color: #777970 !important; border-color: rgba(255,255,255,.08) !important; } /* ── Transactions table ── */ html.dark-mode .vc-tx { border-top: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .vc-tx__head { background: rgba(255,255,255,.03) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; color: #555752 !important; } html.dark-mode .vc-tx__row + .vc-tx__row { border-top: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .vc-tx__icon { background: rgba(255,255,255,.06) !important; color: #c8cac0 !important; } html.dark-mode .vc-tx__icon--in { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .vc-tx__icon--out { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .vc-tx__title { color: #f1f1ed !important; } html.dark-mode .vc-tx__sub { color: #777970 !important; } html.dark-mode .vc-tx__when { color: #777970 !important; } html.dark-mode .vc-tx__when strong { color: #c8cac0 !important; } html.dark-mode .vc-tx__amount.is-in { color: #8fcf8f !important; } html.dark-mode .vc-tx__amount.is-out { color: #f1f1ed !important; } html.dark-mode .vc-tx__provider { background: rgba(255,255,255,.06) !important; color: #777970 !important; } /* ── Toggle ── */ html.dark-mode .vc-toggle { background: rgba(255,255,255,.14) !important; } html.dark-mode .vc-toggle::after { background: #c8cac0 !important; } html.dark-mode .vc-toggle.is-on { background: rgba(111,168,220,.35) !important; } html.dark-mode .vc-toggle.is-on::after { background: #f1f1ed !important; } /* ── Controls panel ── */ html.dark-mode .vc-control-row { border-bottom: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .vc-control-row__icon { background: rgba(255,255,255,.06) !important; color: #777970 !important; } html.dark-mode .vc-control-row.is-on .vc-control-row__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .vc-control-row__title { color: #f1f1ed !important; } html.dark-mode .vc-control-row__sub { color: #777970 !important; } /* ── Buttons ── */ html.dark-mode .vc-btn--primary { background: rgba(111,168,220,.18) !important; color: #a8c8e8 !important; border-color: rgba(111,168,220,.28) !important; box-shadow: none !important; } html.dark-mode .vc-btn--primary:hover { background: rgba(111,168,220,.28) !important; color: #f1f1ed !important; } html.dark-mode .vc-btn--secondary { background: rgba(255,255,255,.05) !important; color: #c8cac0 !important; border-color: rgba(255,255,255,.12) !important; box-shadow: none !important; } html.dark-mode .vc-btn--secondary:hover { background: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .vc-btn--ghost { background: transparent !important; color: #c8cac0 !important; } html.dark-mode .vc-btn--danger { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .vc-btn--violet { background: rgba(160,148,230,.18) !important; color: #c0b8f0 !important; } /* ── Modal ── */ html.dark-mode .vc-modal .modal-header { border-bottom: 1px solid rgba(255,255,255,.08) !important; background: linear-gradient(180deg, #111212 0%, #0e0f0f 100%) !important; } html.dark-mode .vc-modal__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .vc-modal__icon--violet { background: rgba(160,148,230,.10) !important; color: #a094e6 !important; } html.dark-mode .vc-modal__icon--amber { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .vc-modal__eyebrow { color: #555752 !important; } html.dark-mode .vc-modal__title { color: #f1f1ed !important; } html.dark-mode .vc-modal__subtitle { color: #777970 !important; } html.dark-mode .vc-modal .modal-footer { background: #111212 !important; border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .vc-modal .vc-btn--primary { background: rgba(111,168,220,.18) !important; color: #a8c8e8 !important; border-color: rgba(111,168,220,.28) !important; } html.dark-mode .vc-modal .vc-btn--secondary { background: rgba(255,255,255,.06) !important; color: #c8cac0 !important; border-color: rgba(255,255,255,.12) !important; } /* ── Form fields inside modal ── */ html.dark-mode .vc-field__label { color: #c8cac0 !important; } html.dark-mode .vc-field__hint { color: #777970 !important; } html.dark-mode .vc-input, html.dark-mode .vc-select { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .vc-input:focus, html.dark-mode .vc-select:focus { border-color: rgba(111,168,220,.35) !important; box-shadow: 0 0 0 3px rgba(111,168,220,.12) !important; } html.dark-mode .vc-input-group { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .vc-input-group:focus-within { border-color: rgba(111,168,220,.35) !important; box-shadow: 0 0 0 3px rgba(111,168,220,.12) !important; } html.dark-mode .vc-input-group__prefix, html.dark-mode .vc-input-group__suffix { color: #777970 !important; } /* ── Summary block ── */ html.dark-mode .vc-summary { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .vc-summary__row .label { color: #777970 !important; } html.dark-mode .vc-summary__row .value { color: #f1f1ed !important; } html.dark-mode .vc-summary__divider { background: rgba(255,255,255,.08) !important; } html.dark-mode .vc-summary__total .label { color: #c8cac0 !important; } html.dark-mode .vc-summary__total .value { color: #f1f1ed !important; } /* ── Chips & presets ── */ html.dark-mode .vc-chips__item { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; box-shadow: none !important; } html.dark-mode .vc-chips__item:hover { border-color: rgba(255,255,255,.22) !important; color: #f1f1ed !important; } html.dark-mode .vc-chips__item.is-active { background: rgba(111,168,220,.12) !important; border-color: rgba(111,168,220,.28) !important; color: #6fa8dc !important; } html.dark-mode .vc-modal .vc-chips__item { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; box-shadow: none !important; } html.dark-mode .vc-modal .vc-chips__item.is-active { background: rgba(111,168,220,.12) !important; border-color: rgba(111,168,220,.28) !important; color: #6fa8dc !important; box-shadow: 0 0 0 3px rgba(111,168,220,.10) !important; } html.dark-mode .vc-presets__btn { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .vc-presets__btn:hover { border-color: rgba(111,168,220,.30) !important; color: #6fa8dc !important; } /* ── Options (radio-style) ── */ html.dark-mode .vc-option { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .vc-option:hover { border-color: rgba(255,255,255,.22) !important; } html.dark-mode .vc-option.is-active { background: rgba(111,168,220,.08) !important; border-color: rgba(111,168,220,.28) !important; box-shadow: 0 0 0 3px rgba(111,168,220,.08) !important; } html.dark-mode .vc-option[disabled] { background: rgba(255,255,255,.02) !important; } html.dark-mode .vc-option__icon { background: rgba(255,255,255,.06) !important; color: #c8cac0 !important; } html.dark-mode .vc-option.is-active .vc-option__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.20) !important; } html.dark-mode .vc-option__title { color: #f1f1ed !important; } html.dark-mode .vc-option__sub { color: #777970 !important; } html.dark-mode .vc-option__badge { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .vc-option__badge--muted { background: rgba(255,255,255,.06) !important; color: #777970 !important; } html.dark-mode .vc-option__radio { border-color: rgba(255,255,255,.18) !important; background: rgba(255,255,255,.04) !important; } html.dark-mode .vc-option.is-active .vc-option__radio { border-color: #6fa8dc !important; background: #6fa8dc !important; } /* ── Stepper ── */ html.dark-mode .vc-stepper { background: rgba(255,255,255,.03) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .vc-stepper__dot { background: rgba(255,255,255,.10) !important; color: #777970 !important; } html.dark-mode .vc-stepper__item.is-done .vc-stepper__dot, html.dark-mode .vc-stepper__item.is-current .vc-stepper__dot { background: rgba(111,168,220,.30) !important; color: #f1f1ed !important; } html.dark-mode .vc-modal .vc-stepper__item.is-current .vc-stepper__dot { box-shadow: 0 0 0 3px rgba(111,168,220,.15) !important; } html.dark-mode .vc-stepper__label { color: #777970 !important; } html.dark-mode .vc-stepper__item.is-done .vc-stepper__label, html.dark-mode .vc-stepper__item.is-current .vc-stepper__label { color: #f1f1ed !important; } html.dark-mode .vc-stepper__line { background: rgba(255,255,255,.10) !important; } html.dark-mode .vc-stepper__item.is-done + .vc-stepper__line { background: rgba(111,168,220,.30) !important; } /* ── Spend chart ── */ html.dark-mode .vc-spend__total-value { color: #f1f1ed !important; } html.dark-mode .vc-spend__trend.is-up { color: #8fcf8f !important; } html.dark-mode .vc-spend__trend.is-down { color: #e08080 !important; } html.dark-mode .vc-spend__trend-sub { color: #777970 !important; } html.dark-mode .vc-spend__period { background: rgba(255,255,255,.06) !important; } html.dark-mode .vc-spend__period button { color: #777970 !important; } html.dark-mode .vc-spend__period button.is-active { background: #0e0f0f !important; color: #f1f1ed !important; box-shadow: 0 1px 2px rgba(0,0,0,.4) !important; } /* ── Donut & legend ── */ html.dark-mode .vc-mix__center-label { color: #555752 !important; } html.dark-mode .vc-mix__center-value { color: #f1f1ed !important; } html.dark-mode .vc-mix__name { color: #c8cac0 !important; } html.dark-mode .vc-mix__pct { color: #777970 !important; } html.dark-mode .vc-mix__amount { color: #f1f1ed !important; } /* ── Form section ── */ html.dark-mode .vc-form-section { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .vc-form-section__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .vc-form-section__icon--violet { background: rgba(160,148,230,.10) !important; color: #a094e6 !important; } html.dark-mode .vc-form-section__icon--amber { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .vc-form-section__icon--green { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .vc-form-section__title { color: #f1f1ed !important; } html.dark-mode .vc-form-section__subtitle { color: #777970 !important; } html.dark-mode .vc-form .form-label { color: #c8cac0 !important; } html.dark-mode .vc-form .form-control, html.dark-mode .vc-form .form-select { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; box-shadow: none !important; } html.dark-mode .vc-form .form-control::placeholder { color: #555752 !important; } html.dark-mode .vc-form .form-control:focus, html.dark-mode .vc-form .form-select:focus { border-color: rgba(111,168,220,.35) !important; box-shadow: 0 0 0 3px rgba(111,168,220,.10) !important; } /* Action bar */ html.dark-mode .vc-form-actions { background: #111212 !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .vc-form-actions__hint { color: #777970 !important; } @media (max-width: 767.98px) { html.dark-mode .vc-form-actions { background: rgba(14,15,15,.96) !important; box-shadow: 0 -8px 20px rgba(0,0,0,.5) !important; } } /* ── Cardholder cards ── */ html.dark-mode .vc-ch-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .vc-ch-card:hover { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 6px 18px rgba(0,0,0,.45) !important; } html.dark-mode .vc-ch-card__name { color: #f1f1ed !important; } html.dark-mode .vc-ch-card__sub { color: #777970 !important; } html.dark-mode .vc-ch-card__meta { border-top: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .vc-ch-card__meta-label { color: #555752 !important; } html.dark-mode .vc-ch-card__meta-value { color: #c8cac0 !important; } html.dark-mode .vc-ch-card__actions { border-top: 1px solid rgba(255,255,255,.07) !important; } /* Premium card row */ html.dark-mode .vc-ch-card--premium { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border-color: rgba(111,168,220,.12) !important; } html.dark-mode .vc-ch-card--premium::before { background: linear-gradient(180deg, #6fa8dc, #a094e6) !important; opacity: .5 !important; } html.dark-mode .vc-ch-card--premium .vc-ch-card__meta { border-left: 1px solid rgba(255,255,255,.07) !important; } /* ── Cardholder hero (show page) ── */ html.dark-mode .vc-ch-hero__name { color: #f1f1ed !important; } html.dark-mode .vc-ch-hero__sub { color: #777970 !important; } html.dark-mode .vc-ch-hero__quick { border-top: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .vc-ch-hero__quick-label { color: #555752 !important; } html.dark-mode .vc-ch-hero__quick-value { color: #c8cac0 !important; } /* ── Meta key/value ── */ html.dark-mode .vc-meta__label { color: #555752 !important; } html.dark-mode .vc-meta__value { color: #f1f1ed !important; } /* ── UBO rows ── */ html.dark-mode .vc-ubo-readonly__row { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .vc-ubo-readonly__name { color: #f1f1ed !important; } html.dark-mode .vc-ubo-readonly__meta { color: #777970 !important; } html.dark-mode .vc-ubo-row { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; } /* ── Trend pill ── */ html.dark-mode .vc-trend.is-up { color: #8fcf8f !important; } html.dark-mode .vc-trend.is-down { color: #e08080 !important; } /* ── Empty states ── */ html.dark-mode .vc-empty { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #777970 !important; } html.dark-mode .vc-empty__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .vc-empty__title { color: #f1f1ed !important; } html.dark-mode .vc-empty__hint { color: #777970 !important; } /* ── Issue modal helpers ── */ html.dark-mode .vc-issue-eyebrow { color: #555752 !important; } html.dark-mode .vc-issue-section-title { color: #c8cac0 !important; } html.dark-mode .vc-issue-note { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #777970 !important; } html.dark-mode .vc-issue-info { background: rgba(111,168,220,.08) !important; border: 1px solid rgba(111,168,220,.16) !important; color: #6fa8dc !important; } html.dark-mode .vc-issue-list { color: #777970 !important; } html.dark-mode .vc-field__help { color: #777970 !important; } html.dark-mode .vc-field__doc-link { color: #6fa8dc !important; } /* ── Design picker swatches ── */ html.dark-mode .vc-design-swatch.is-active { border-color: #6fa8dc !important; box-shadow: 0 0 0 3px rgba(111,168,220,.15) !important; } /* ── Request table ── */ html.dark-mode .vc-request-panel { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border: 1px solid rgba(111,168,220,.12) !important; } html.dark-mode .vc-request-panel__head { border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .vc-request-panel__eyebrow { color: #555752 !important; } html.dark-mode .vc-request-panel__title { color: #f1f1ed !important; } html.dark-mode .vc-request-panel__count { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; color: #777970 !important; } html.dark-mode .vc-request-table th { background: rgba(111,168,220,.07) !important; color: #c8cac0 !important; } html.dark-mode .vc-request-table td { border-bottom: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .vc-request-table tbody tr:hover { background: rgba(255,255,255,.03) !important; } html.dark-mode .vc-request-id { color: #555752 !important; } html.dark-mode .vc-request-date { color: #c8cac0 !important; } html.dark-mode .vc-request-note { color: #c8cac0 !important; } html.dark-mode .vc-request-empty { color: #777970 !important; } html.dark-mode .vc-request-wallet { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .vc-request-card-chip { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .vc-request-card-expiry { color: #777970 !important; } /* Mobile table cards */ @media (max-width: 767.98px) { html.dark-mode .vc-request-table tbody tr { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border: 1px solid rgba(111,168,220,.12) !important; } html.dark-mode .vc-request-table td::before { color: #555752 !important; } html.dark-mode .vc-request-table td:nth-child(2), html.dark-mode .vc-request-table td:nth-child(4), html.dark-mode .vc-request-table td:nth-child(5), html.dark-mode .vc-request-table td:nth-child(6) { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.07) !important; } } /* ── ch-show compact layout ── */ html.dark-mode .vc-ch-show > .vc-form-section { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border-color: rgba(111,168,220,.12) !important; box-shadow: none !important; } html.dark-mode .vc-ch-show > .vc-form-section::before { background: linear-gradient(180deg, #6fa8dc, #a094e6) !important; opacity: .45 !important; } html.dark-mode .vc-ch-show .vc-ch-hero__quick { border-left: 1px solid rgba(255,255,255,.07) !important; } @media (max-width: 575.98px) { html.dark-mode .vc-ch-show .vc-ch-hero__quick-item, html.dark-mode .vc-ch-show .vc-meta__row { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.07) !important; } } html.dark-mode .vc-ch-show .vc-ch-hero__quick { border-top: 1px solid rgba(255,255,255,.07) !important; } /* Admin color dot */ html.dark-mode .vc-admin-color-dot { border-color: rgba(255,255,255,.10) !important; background: rgba(255,255,255,.08) !important; } /* ============================================================ 56. WALLET EARN (.wallet-earn-page, .we-*, .we-stk-*) ============================================================ */ html.dark-mode .wallet-earn-page { --weu-text: #f1f1ed; --weu-copy: #c8cac0; --weu-muted: #777970; --weu-line: rgba(255,255,255,.10); --weu-surface: #0e0f0f; --weu-soft: #111212; --wev2-blue: #6fa8dc; --wev2-blue-dark: #4d8abf; --wev2-blue-light: rgba(111,168,220,.10); --wev2-blue-border: rgba(111,168,220,.22); --wev2-shadow-sm: 0 1px 3px rgba(0,0,0,.4); --wev2-shadow-md: 0 4px 16px rgba(0,0,0,.5); --wev2-shadow-blue: 0 6px 24px rgba(0,0,0,.55); } /* User stats */ html.dark-mode .wallet-earn-page .we-user-stat { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .wallet-earn-page .we-user-stat span { color: #555752 !important; } html.dark-mode .wallet-earn-page .we-user-stat strong { color: #f1f1ed !important; } html.dark-mode .wallet-earn-page .we-user-stat__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .wallet-earn-page .we-user-stat__icon--success { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .wallet-earn-page .we-user-stat__icon--warning { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .wallet-earn-page .we-user-stat__icon--reward { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } /* Page tabs */ html.dark-mode .wallet-earn-page .we-page-tab { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .wallet-earn-page .we-page-tab.active, html.dark-mode .wallet-earn-page .we-page-tab:hover { border-color: rgba(111,168,220,.22) !important; background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } /* Section heads */ html.dark-mode .wallet-earn-page .we-user-section__head h3 { color: #f1f1ed !important; } html.dark-mode .wallet-earn-page .we-user-section__head p { color: #777970 !important; } /* Hero */ html.dark-mode .wallet-earn-page .we-hero { background: radial-gradient(circle at top right, rgba(111,168,220,.08), transparent 40%), linear-gradient(180deg, #0e0f0f 0%, #111212 100%) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .wallet-earn-page .we-hero__copy h3 { color: #f1f1ed !important; } html.dark-mode .wallet-earn-page .we-hero__copy p { color: #777970 !important; } html.dark-mode .wallet-earn-page .we-hero__meta > div { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .wallet-earn-page .we-hero__meta span { color: #555752 !important; } html.dark-mode .wallet-earn-page .we-hero__meta strong { color: #f1f1ed !important; } /* Plan cards */ html.dark-mode .wallet-earn-page .we-plan-card { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .wallet-earn-page .we-plan-card h4 { color: #f1f1ed !important; } html.dark-mode .wallet-earn-page .we-plan-card p { color: #777970 !important; } html.dark-mode .wallet-earn-page .we-plan-card__rate { background: rgba(111,168,220,.10) !important; } html.dark-mode .wallet-earn-page .we-plan-card__rate strong { color: #6fa8dc !important; } html.dark-mode .wallet-earn-page .we-plan-card__rate span { color: #c8cac0 !important; } html.dark-mode .wallet-earn-page .we-plan-card__facts span { color: #c8cac0 !important; } html.dark-mode .wallet-earn-page .we-plan-card__facts i { color: #6fa8dc !important; } html.dark-mode .wallet-earn-page .we-plan-card__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } /* Chips / status */ html.dark-mode .wallet-earn-page .we-chip { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .wallet-earn-page .we-chip--strong { background: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .wallet-earn-page .we-chip--subtle { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .wallet-earn-page .we-status--success { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .wallet-earn-page .we-status--warning { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .wallet-earn-page .we-status--danger { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .wallet-earn-page .we-status--primary { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } /* Stake list */ html.dark-mode .wallet-earn-page .we-stake-item { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .wallet-earn-page .we-stake-item__title { color: #f1f1ed !important; } html.dark-mode .wallet-earn-page .we-stake-item__meta { color: #777970 !important; } html.dark-mode .wallet-earn-page .we-stake-item__amount { color: #f1f1ed !important; } html.dark-mode .wallet-earn-page .we-stake-item__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } /* Empty state */ html.dark-mode .wallet-earn-page .we-empty { background: rgba(111,168,220,.06) !important; border: 1px dashed rgba(111,168,220,.18) !important; } html.dark-mode .wallet-earn-page .we-empty span { background: rgba(255,255,255,.06) !important; color: #6fa8dc !important; } html.dark-mode .wallet-earn-page .we-empty h4 { color: #f1f1ed !important; } html.dark-mode .wallet-earn-page .we-empty p { color: #777970 !important; } /* Detail hero & grid */ html.dark-mode .wallet-earn-page .we-detail-hero { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .wallet-earn-page .we-detail-hero h3 { color: #f1f1ed !important; } html.dark-mode .wallet-earn-page .we-detail-hero p { color: #777970 !important; } html.dark-mode .wallet-earn-page .we-detail-grid > div { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .wallet-earn-page .we-detail-grid span { color: #555752 !important; } html.dark-mode .wallet-earn-page .we-detail-grid strong { color: #f1f1ed !important; } /* ── Plans v2 ── */ html.dark-mode .we-plan-card-v2 { background: #0e0f0f !important; border: 1.5px solid rgba(255,255,255,.10) !important; box-shadow: 0 2px 8px rgba(0,0,0,.42) !important; } html.dark-mode .we-plan-card-v2:hover { border-color: rgba(111,168,220,.28) !important; box-shadow: 0 8px 24px rgba(0,0,0,.55) !important; } /* Featured card keeps blue gradient */ html.dark-mode .we-plan-card-v2--featured { background: linear-gradient(145deg, #1a3058, #0d1e3c) !important; border: none !important; box-shadow: 0 8px 32px rgba(0,0,0,.65) !important; } html.dark-mode .we-plan-card-v2__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .we-plan-card-v2__name { color: #f1f1ed !important; } html.dark-mode .we-plan-card-v2__tagline { color: #777970 !important; } html.dark-mode .we-plan-card-v2__rate-value { color: #6fa8dc !important; } html.dark-mode .we-plan-card-v2__rate-pct { color: #777970 !important; } html.dark-mode .we-plan-card-v2__rate-label { color: #555752 !important; } html.dark-mode .we-plan-card-v2__pill { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .we-plan-card-v2__pill--muted { background: rgba(255,255,255,.06) !important; color: #777970 !important; } html.dark-mode .we-plan-card-v2__divider { background: rgba(255,255,255,.08) !important; } html.dark-mode .we-plan-card-v2__detail i { color: #555752 !important; } html.dark-mode .we-plan-card-v2__detail-val { color: #c8cac0 !important; } html.dark-mode .we-plan-card-v2__detail-sub { color: #555752 !important; } html.dark-mode .we-plan-card-v2__detail { border-bottom: 1px solid rgba(255,255,255,.06) !important; } html.dark-mode .we-plan-card-v2__bullet { color: #c8cac0 !important; } html.dark-mode .we-plan-card-v2__bullet-check { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } /* CTA */ html.dark-mode .we-plan-card-v2__btn { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.22) !important; } html.dark-mode .we-plan-card-v2__btn:hover:not(:disabled) { background: rgba(111,168,220,.22) !important; color: #c8dff0 !important; border-color: rgba(111,168,220,.38) !important; } html.dark-mode .we-plan-card-v2--featured .we-plan-card-v2__btn { background: rgba(255,255,255,.12) !important; color: #f1f1ed !important; border: none !important; } /* Badges */ html.dark-mode .we-plan-badge--amber { background: rgba(212,168,75,.22) !important; color: #d4a84b !important; } html.dark-mode .we-plan-badge--blue { background: rgba(111,168,220,.18) !important; color: #6fa8dc !important; } html.dark-mode .we-plan-badge--green { background: rgba(90,154,90,.18) !important; color: #8fcf8f !important; } html.dark-mode .we-plan-badge--default { background: rgba(255,255,255,.08) !important; color: #777970 !important; } /* ── Stake modal ── */ html.dark-mode .we-stake-modal .modal-content { background: #0e0f0f !important; box-shadow: 0 20px 60px rgba(0,0,0,.65) !important; } html.dark-mode .we-stake-modal .modal-header { background: linear-gradient(90deg, #1a3058, #0d2040) !important; border-bottom: none !important; } html.dark-mode .we-field-label { color: #c8cac0 !important; } html.dark-mode .we-field-balance { color: #777970 !important; } html.dark-mode .we-field-hint { color: #777970 !important; } html.dark-mode .we-field-error { color: #e08080 !important; } html.dark-mode .we-amount-currency { color: #555752 !important; } html.dark-mode .we-stake-estimate { background: rgba(90,154,90,.10) !important; border: 1px solid rgba(90,154,90,.20) !important; } html.dark-mode .we-stake-estimate__label { color: #777970 !important; } html.dark-mode .we-stake-estimate__profit { color: #8fcf8f !important; } html.dark-mode .we-stake-summary { background: rgba(111,168,220,.08) !important; border: 1px solid rgba(111,168,220,.16) !important; } html.dark-mode .we-stake-summary__item span { color: #555752 !important; } html.dark-mode .we-stake-summary__item strong { color: #f1f1ed !important; } html.dark-mode .we-stake-summary__profit { border-top: 1px solid rgba(111,168,220,.16) !important; } html.dark-mode .we-stake-summary__profit-label { color: #777970 !important; } html.dark-mode .we-stake-summary__profit-value { color: #8fcf8f !important; } html.dark-mode .we-stake-manual-notice { background: rgba(212,168,75,.10) !important; border: 1px solid rgba(212,168,75,.20) !important; color: #d4a84b !important; } /* ── My Stakes v2 ── */ html.dark-mode .we-stk-summary-card { background: #0e0f0f !important; border: 1.5px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .we-stk-summary-card__label { color: #555752 !important; } html.dark-mode .we-stk-summary-card__value { color: #f1f1ed !important; } html.dark-mode .we-stk-summary-card__sub { color: #777970 !important; } html.dark-mode .we-stk-summary-card__icon--active { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .we-stk-summary-card__icon--earned { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .we-stk-summary-card__icon--payout { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .we-stk-summary-card__icon--total { background: rgba(160,148,230,.10) !important; color: #a094e6 !important; } /* Tabs */ html.dark-mode .we-stk-tabs { background: #0e0f0f !important; border: 1.5px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .we-stk-tab { color: #777970 !important; } html.dark-mode .we-stk-tab:hover { color: #6fa8dc !important; background: rgba(111,168,220,.08) !important; } html.dark-mode .we-stk-tab.active { background: rgba(111,168,220,.18) !important; color: #a8c8e8 !important; box-shadow: none !important; } html.dark-mode .we-stk-tab__count { background: rgba(255,255,255,.06) !important; color: #777970 !important; } html.dark-mode .we-stk-tab.active .we-stk-tab__count { background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.75) !important; } /* Stake cards */ html.dark-mode .we-stk-card { background: #0e0f0f !important; border: 1.5px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .we-stk-card:hover { border-color: rgba(111,168,220,.22) !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; } /* Featured stake card keeps blue gradient */ html.dark-mode .we-stk-card--featured { background: linear-gradient(145deg, #1a3058, #0d1e3c) !important; border: none !important; box-shadow: 0 8px 32px rgba(0,0,0,.65) !important; } html.dark-mode .we-stk-card__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .we-stk-card__name { color: #f1f1ed !important; } html.dark-mode .we-stk-card__wallet { color: #777970 !important; } /* Status chips */ html.dark-mode .we-stk-chip--active { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .we-stk-chip--pending { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .we-stk-chip--completed { background: rgba(255,255,255,.07) !important; color: #777970 !important; } html.dark-mode .we-stk-chip--canceled, html.dark-mode .we-stk-chip--rejected { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .we-stk-chip--active .we-stk-chip__dot { background: #8fcf8f !important; box-shadow: 0 0 0 2px rgba(90,154,90,.25) !important; } html.dark-mode .we-stk-chip--pending .we-stk-chip__dot { background: #d4a84b !important; } html.dark-mode .we-stk-chip--completed .we-stk-chip__dot { background: #555752 !important; } html.dark-mode .we-stk-chip--canceled .we-stk-chip__dot, html.dark-mode .we-stk-chip--rejected .we-stk-chip__dot { background: #e08080 !important; } /* Amounts / dates / progress */ html.dark-mode .we-stk-card__amount { color: #f1f1ed !important; } html.dark-mode .we-stk-card__currency { color: #777970 !important; } html.dark-mode .we-stk-card__apy { color: #555752 !important; } html.dark-mode .we-stk-card__date { color: #777970 !important; } html.dark-mode .we-stk-card__date strong { color: #c8cac0 !important; } html.dark-mode .we-stk-card__progress-label { color: #777970 !important; } html.dark-mode .we-stk-card__progress-pct { color: #6fa8dc !important; } html.dark-mode .we-stk-card__progress-bar { background: rgba(255,255,255,.08) !important; } html.dark-mode .we-stk-card__footer { border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .we-stk-card__earned-label, html.dark-mode .we-stk-card__payout-label { color: #555752 !important; } html.dark-mode .we-stk-card__earned-val { color: #8fcf8f !important; } html.dark-mode .we-stk-card__payout-val { color: #c8cac0 !important; } html.dark-mode .we-stk-card__pending-badge { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .we-stk-card__closed-badge { color: #777970 !important; } html.dark-mode .we-stk-card__closed-icon { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } /* Empty state */ html.dark-mode .we-stk-empty__icon { background: #0e0f0f !important; color: #555752 !important; box-shadow: none !important; } html.dark-mode .we-stk-empty__title { color: #c8cac0 !important; } html.dark-mode .we-stk-empty__sub { color: #777970 !important; } /* Bottom sheet */ html.dark-mode .we-stk-sheet__backdrop { background: rgba(0,0,0,.72) !important; } html.dark-mode .we-stk-sheet__panel { background: #0e0f0f !important; box-shadow: 0 20px 60px rgba(0,0,0,.65) !important; } html.dark-mode .we-stk-sheet__header { border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .we-stk-sheet__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .we-stk-sheet__icon--featured { background: linear-gradient(135deg, #1a3058, #0d2040) !important; color: #f1f1ed !important; } html.dark-mode .we-stk-sheet__plan-name { color: #f1f1ed !important; } html.dark-mode .we-stk-sheet__wallet { color: #777970 !important; } html.dark-mode .we-stk-sheet__close { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #c8cac0 !important; } /* Detail hero */ html.dark-mode .we-stk-detail-hero { background: rgba(111,168,220,.08) !important; border: 1px solid rgba(111,168,220,.16) !important; } html.dark-mode .we-stk-detail-grid__key { color: #555752 !important; } html.dark-mode .we-stk-detail-grid__val { color: #f1f1ed !important; } html.dark-mode .we-stk-detail-progress { background: #111212 !important; border: 1.5px solid rgba(255,255,255,.10) !important; } html.dark-mode .we-stk-detail-progress__bar { background: rgba(255,255,255,.08) !important; } /* Earnings */ html.dark-mode .we-stk-detail-earnings--active { background: rgba(90,154,90,.10) !important; border: 1px solid rgba(90,154,90,.20) !important; } html.dark-mode .we-stk-detail-earnings--other { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .we-stk-detail-earnings__label { color: #777970 !important; } html.dark-mode .we-stk-detail-earnings--active .we-stk-detail-earnings__val { color: #8fcf8f !important; } html.dark-mode .we-stk-detail-earnings--other .we-stk-detail-earnings__val { color: #c8cac0 !important; } html.dark-mode .we-stk-detail-earnings__return-label { color: #777970 !important; } html.dark-mode .we-stk-detail-earnings__return-val { color: #f1f1ed !important; } /* History items */ html.dark-mode .we-stk-detail-history__title { color: #c8cac0 !important; } html.dark-mode .we-stk-detail-history__item { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .we-stk-detail-history__check { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .we-stk-detail-history__label { color: #f1f1ed !important; } html.dark-mode .we-stk-detail-history__date { color: #777970 !important; } html.dark-mode .we-stk-detail-history__amt { color: #8fcf8f !important; } html.dark-mode .we-stk-detail-pending { background: rgba(212,168,75,.10) !important; border: 1px solid rgba(212,168,75,.20) !important; } html.dark-mode .we-stk-detail-next { color: #c8cac0 !important; } /* ============================================================ 57. AGENT (.auth-shell, .auth-card, .agent-*) ============================================================ */ /* ── Auth shell ── */ html.dark-mode .auth-shell { background: radial-gradient(circle at 20% 10%, rgba(111,168,220,.06), transparent 40%), radial-gradient(circle at 80% 90%, rgba(160,148,230,.05), transparent 40%), #090a0a !important; } /* ── Auth card ── */ html.dark-mode .auth-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 16px 42px rgba(0,0,0,.55) !important; } html.dark-mode .auth-card .form-label { color: #c8cac0 !important; } html.dark-mode .auth-card .form-control, html.dark-mode .auth-card .form-select { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .auth-card .form-control:focus, html.dark-mode .auth-card .form-select:focus { box-shadow: 0 0 0 .14rem rgba(111,168,220,.14) !important; border-color: rgba(111,168,220,.35) !important; } html.dark-mode .auth-card .input-group-text { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #c8cac0 !important; } html.dark-mode .auth-card .auth-section-heading { color: #555752 !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .auth-card .auth-divider { border-top-color: rgba(255,255,255,.08) !important; } html.dark-mode .auth-card .auth-helper-text { color: #555752 !important; } html.dark-mode .auth-card > p.text-center { color: #c8cac0 !important; } /* Role badges */ html.dark-mode .auth-role-badge.is-user { background: rgba(111,168,220,.10) !important; border-color: rgba(111,168,220,.20) !important; color: #6fa8dc !important; } html.dark-mode .auth-role-badge.is-merchant { background: rgba(90,154,90,.12) !important; border-color: rgba(90,154,90,.20) !important; color: #8fcf8f !important; } /* ── Portal switch ── */ html.dark-mode .auth-portal-switch { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .auth-portal-switch .portal-tile { color: #777970 !important; } html.dark-mode .auth-portal-switch .portal-tile:hover { color: #c8cac0 !important; background: rgba(255,255,255,.07) !important; } /* ── Agent register hero ── */ html.dark-mode .agent-register-hero { background: linear-gradient(135deg, #1a2a40, #0d1525) !important; box-shadow: 0 12px 30px rgba(0,0,0,.5) !important; border: 1px solid rgba(111,168,220,.14) !important; } /* ── Agent console stats ── */ html.dark-mode .agent-stat, html.dark-mode .agent-action-panel, html.dark-mode .agent-ledger-panel, html.dark-mode .agent-pending-callout { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .agent-stat__label { color: #555752 !important; } html.dark-mode .agent-stat strong { color: #f1f1ed !important; } html.dark-mode .agent-action-panel__head h3, html.dark-mode .agent-ledger-panel__head h3 { color: #f1f1ed !important; } html.dark-mode .agent-action-panel__head p { color: #777970 !important; } html.dark-mode .agent-pending-callout { background: rgba(111,168,220,.07) !important; border-color: rgba(111,168,220,.14) !important; color: #6fa8dc !important; } html.dark-mode .agent-pending-callout i { background: rgba(255,255,255,.06) !important; color: #6fa8dc !important; } html.dark-mode .agent-pending-callout span { color: #777970 !important; } /* Ledger rows */ html.dark-mode .agent-ledger-row { border-top: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .agent-ledger-row strong { color: #f1f1ed !important; } html.dark-mode .agent-ledger-row span { color: #777970 !important; } /* ── Agent application panels ── */ html.dark-mode .agent-application-hero, html.dark-mode .agent-command-panel, html.dark-mode .agent-application-note, html.dark-mode .agent-field-summary, html.dark-mode .agent-account-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .agent-application-hero { background: linear-gradient(135deg, rgba(111,168,220,.07), rgba(160,148,230,.03)), #0e0f0f !important; border-color: rgba(111,168,220,.14) !important; box-shadow: none !important; } html.dark-mode .agent-application-hero h2, html.dark-mode .agent-command-panel h2 { color: #f1f1ed !important; } html.dark-mode .agent-application-hero p, html.dark-mode .agent-command-panel p { color: #777970 !important; } html.dark-mode .agent-application-note { background: rgba(111,168,220,.06) !important; border-color: rgba(111,168,220,.12) !important; } html.dark-mode .agent-application-note > div > strong { color: #f1f1ed !important; } html.dark-mode .agent-application-note > div > span { color: #777970 !important; } /* Process rail / steps */ html.dark-mode .agent-process-step { background: rgba(255,255,255,.04) !important; border-color: rgba(111,168,220,.12) !important; } html.dark-mode .agent-process-step span { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .agent-process-step.is-active span { background: rgba(111,168,220,.28) !important; color: #f1f1ed !important; } html.dark-mode .agent-process-step strong { color: #f1f1ed !important; } html.dark-mode .agent-process-step small { color: #777970 !important; } /* Application main grid */ html.dark-mode .agent-application-main { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; } /* Logo uploader */ html.dark-mode .agent-application-logo .avatar-upload { background: rgba(111,168,220,.04) !important; border: 1px dashed rgba(111,168,220,.20) !important; } html.dark-mode .agent-application-logo .avatar-edit label { background: #0e0f0f !important; border-color: rgba(111,168,220,.16) !important; box-shadow: none !important; } html.dark-mode .agent-application-logo .avatar-preview { background: rgba(255,255,255,.06) !important; border-color: rgba(111,168,220,.10) !important; box-shadow: none !important; } /* Field title */ html.dark-mode .agent-field-title strong { color: #f1f1ed !important; } html.dark-mode .agent-field-title small { color: #777970 !important; } /* Upload hint */ html.dark-mode .agent-upload-hint { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .agent-upload-hint span { color: #777970 !important; } /* Demo request card */ html.dark-mode .agent-demo-request { background: rgba(111,168,220,.06) !important; border-color: rgba(111,168,220,.12) !important; } html.dark-mode .agent-demo-request strong { color: #f1f1ed !important; } html.dark-mode .agent-demo-request small { color: #777970 !important; } /* Currency grid cards */ html.dark-mode .agent-currency-card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .agent-currency-card:hover { border-color: rgba(111,168,220,.28) !important; background: rgba(111,168,220,.05) !important; } html.dark-mode .agent-currency-card__mark { background: rgba(255,255,255,.06) !important; border-color: rgba(111,168,220,.14) !important; color: transparent !important; } html.dark-mode .agent-currency-card__body strong { color: #f1f1ed !important; } html.dark-mode .agent-currency-card__body small { color: #777970 !important; } html.dark-mode .agent-currency-card__input:checked + .agent-currency-card { background: rgba(111,168,220,.08) !important; border-color: rgba(111,168,220,.38) !important; box-shadow: none !important; } html.dark-mode .agent-currency-card__input:checked + .agent-currency-card .agent-currency-card__mark { background: rgba(111,168,220,.30) !important; border-color: rgba(111,168,220,.40) !important; color: #f1f1ed !important; } /* Application form */ html.dark-mode .agent-application-form .form-label { color: #c8cac0 !important; } html.dark-mode .agent-application-form .form-control, html.dark-mode .agent-application-form .form-select { background: rgba(255,255,255,.04) !important; border-color: rgba(111,168,220,.14) !important; background-color: #0e0f0f !important; color: #f1f1ed !important; } html.dark-mode .agent-application-form .form-control:focus, html.dark-mode .agent-application-form .form-select:focus { border-color: rgba(111,168,220,.38) !important; box-shadow: 0 0 0 .18rem rgba(111,168,220,.10) !important; } /* Application actions bar */ html.dark-mode .agent-application-actions { border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .agent-application-actions strong { color: #f1f1ed !important; } html.dark-mode .agent-application-actions span { color: #777970 !important; } /* Form alert */ html.dark-mode .agent-form-alert { background: rgba(111,168,220,.08) !important; border-color: rgba(111,168,220,.16) !important; color: #6fa8dc !important; } html.dark-mode .agent-field-help { color: #777970 !important; } /* Field summary */ html.dark-mode .agent-field-summary { background: rgba(255,255,255,.04) !important; } html.dark-mode .agent-field-summary--compact { background: linear-gradient(135deg, rgba(111,168,220,.06), rgba(160,148,230,.03)), #0e0f0f !important; } html.dark-mode .agent-field-summary strong { color: #f1f1ed !important; } html.dark-mode .agent-field-summary span { color: #777970 !important; } /* Command panel */ html.dark-mode .agent-command-panel { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .agent-command-panel--success { background: rgba(90,154,90,.07) !important; border-color: rgba(90,154,90,.20) !important; } html.dark-mode .agent-command-panel--warning { background: rgba(212,168,75,.08) !important; border-color: rgba(212,168,75,.22) !important; } html.dark-mode .agent-command-panel--danger { background: rgba(210,60,60,.08) !important; border-color: rgba(210,60,60,.20) !important; } html.dark-mode .agent-command-panel__logo { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .agent-command-panel__empty-icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .agent-command-panel__facts div { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .agent-command-panel__facts span, html.dark-mode .agent-account-card__meta span { color: #555752 !important; } html.dark-mode .agent-command-panel__facts strong, html.dark-mode .agent-account-card__meta strong { color: #f1f1ed !important; } /* Account card */ html.dark-mode .agent-account-card__main strong { color: #f1f1ed !important; } html.dark-mode .agent-account-card__main span { color: #777970 !important; } /* ── Tool tabs ── */ html.dark-mode .agent-tool-tabs { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .agent-tool-tab { color: #777970 !important; } html.dark-mode .agent-tool-tab i { background: rgba(255,255,255,.06) !important; color: #6fa8dc !important; } html.dark-mode .agent-tool-tab:hover { color: #6fa8dc !important; background: rgba(255,255,255,.05) !important; } html.dark-mode .agent-tool-tab:hover i { background: rgba(111,168,220,.12) !important; } html.dark-mode .agent-tool-tab.is-active { color: #f1f1ed !important; } html.dark-mode .agent-tool-tab.is-active i { background: rgba(255,255,255,.16) !important; color: #f1f1ed !important; } /* ── Overview grid ── */ html.dark-mode .agent-overview-panel { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .agent-overview-panel__head h3 { color: #f1f1ed !important; } html.dark-mode .agent-overview-panel__head p { color: #777970 !important; } html.dark-mode .agent-overview-kpi { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .agent-overview-kpi span { color: #555752 !important; } html.dark-mode .agent-overview-kpi strong { color: #f1f1ed !important; } html.dark-mode .agent-overview-request-row { border-top: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .agent-overview-request-row strong { color: #f1f1ed !important; } html.dark-mode .agent-overview-request-row span { color: #777970 !important; } /* ── QR workspace ── */ html.dark-mode .agent-qr-card, html.dark-mode .agent-print-qr-card, html.dark-mode .agent-qr-guide-card, html.dark-mode .agent-qr-checkout__merchant, html.dark-mode .agent-qr-checkout__form, html.dark-mode .agent-pending-qr-panel { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .agent-qr-card h3, html.dark-mode .agent-qr-guide-card h3, html.dark-mode .agent-qr-checkout h2 { color: #f1f1ed !important; } html.dark-mode .agent-qr-card p, html.dark-mode .agent-qr-guide-card p, html.dark-mode .agent-qr-checkout p { color: #777970 !important; } /* Print QR */ html.dark-mode .agent-print-qr-card__code { background: rgba(111,168,220,.04) !important; border: 1px dashed rgba(111,168,220,.18) !important; } /* QR poster */ html.dark-mode .agent-qr-poster { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .agent-qr-poster__top { border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .agent-qr-poster__top strong { color: #f1f1ed !important; } html.dark-mode .agent-qr-poster__code { background: #0e0f0f !important; border: 1px dashed rgba(255,255,255,.12) !important; } html.dark-mode .agent-qr-poster__identity strong { color: #f1f1ed !important; } html.dark-mode .agent-qr-poster__identity span { color: #777970 !important; } html.dark-mode .agent-qr-poster__steps span { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #777970 !important; } html.dark-mode .agent-qr-poster__assurance { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .agent-qr-poster__assurance span { color: #777970 !important; } html.dark-mode .agent-qr-poster-info div { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .agent-qr-poster-info span { color: #555752 !important; } html.dark-mode .agent-qr-poster-info strong { color: #f1f1ed !important; } /* Cashout counter panel */ html.dark-mode .agent-cashout-counter-panel { background: linear-gradient(135deg, rgba(111,168,220,.06), rgba(160,148,230,.03)), #0e0f0f !important; border-color: rgba(111,168,220,.14) !important; } html.dark-mode .agent-cashout-counter-panel__badge { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .agent-cashout-wallet-strip { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .agent-cashout-wallet-strip > span { color: #555752 !important; } html.dark-mode .agent-cashout-wallet-strip strong { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .agent-cashout-checklist { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .agent-cashout-checklist__head { color: #f1f1ed !important; } html.dark-mode .agent-cashout-checklist li { color: #777970 !important; } html.dark-mode .agent-cashout-form-panel__head h3 { color: #f1f1ed !important; } html.dark-mode .agent-cashout-form-panel__head p { color: #777970 !important; } html.dark-mode .agent-cashout-fields .form-control, html.dark-mode .agent-cashout-fields .form-select { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .agent-cashout-submit { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .agent-cashout-submit__copy > i { background: rgba(255,255,255,.07) !important; } /* Pending QR rows */ html.dark-mode .agent-pending-qr-row { border-top: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .agent-pending-qr-row strong { color: #f1f1ed !important; } html.dark-mode .agent-pending-qr-row span { color: #777970 !important; } /* QR regenerate modal */ html.dark-mode .agent-qr-regenerate-modal .modal-content { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; } html.dark-mode .agent-qr-regenerate-modal .modal-header { background: rgba(255,255,255,.03) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .agent-qr-regenerate-modal .modal-footer { border-top: 1px solid rgba(255,255,255,.08) !important; } html.dark-mode .agent-qr-regenerate-modal__title strong { color: #f1f1ed !important; } html.dark-mode .agent-qr-regenerate-modal__title small { color: #777970 !important; } html.dark-mode .agent-qr-regenerate-warning { background: rgba(212,168,75,.08) !important; border: 1px solid rgba(212,168,75,.20) !important; } html.dark-mode .agent-qr-regenerate-warning strong { color: #f1f1ed !important; } html.dark-mode .agent-qr-regenerate-warning span { color: #777970 !important; } html.dark-mode .agent-qr-regenerate-checklist div { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.07) !important; } html.dark-mode .agent-qr-regenerate-checklist span { color: #c8cac0 !important; } /* Section heads */ html.dark-mode .agent-section-head h3 { color: #f1f1ed !important; } /* Print card details */ html.dark-mode .agent-print-qr-card__caption strong { color: #f1f1ed !important; } html.dark-mode .agent-print-qr-card__caption span { color: #777970 !important; } html.dark-mode .agent-qr-guide-card span { color: #777970 !important; } html.dark-mode .agent-print-qr-card__details > span { color: #6fa8dc !important; } html.dark-mode .agent-print-qr-card__details h3 { color: #f1f1ed !important; } html.dark-mode .agent-print-qr-card__details p { color: #777970 !important; } /* * ============================================================ * DARK MODE — Adições para dashboard-style.css * Adicione ao final do seu dark-mode.css existente * * Cobre elementos não contemplados anteriormente: * - Referral sidebar card * - Submenu do left-menu-box (grouped) * - KYC Notice Card (strip + verify hero/status/timeline) * - Settings (todas as variantes premium) * - P2P (marketplace, my ads, trader profile, manage shell) * - Payment Links (card + empty state) * - Feature Summary Widget (complementos) * - Wallet Cards (all wallets page, receive QR modal, QR page) * - Notification settings page * - TRX Modal (ud-trx-modal) * - Quick Function Menu (complementos) * - Misc (withdraw field, p2p offer builder, badge-area) * ============================================================ */ /* ============================================================ REFERRAL SIDEBAR CARD ============================================================ */ html.dark-mode .dashboard-sidebar-referral-card { background: radial-gradient(circle at 18% 45%, rgba(34,197,94,.10), transparent 36%), linear-gradient(135deg, rgba(34,197,94,.06), rgba(255,255,255,.03)), #0e0f0f !important; border: 1px solid rgba(34,197,94,.18) !important; color: #c8cac0 !important; box-shadow: none !important; } html.dark-mode .dashboard-sidebar-referral-card:hover { border-color: rgba(34,197,94,.30) !important; background: radial-gradient(circle at 18% 45%, rgba(34,197,94,.14), transparent 38%), linear-gradient(135deg, rgba(34,197,94,.09), rgba(255,255,255,.04)), #0e0f0f !important; color: #8fcf8f !important; } html.dark-mode .dashboard-sidebar-referral-card__badge { background: rgba(34,197,94,.10) !important; border-color: rgba(34,197,94,.18) !important; color: #8fcf8f !important; } html.dark-mode .dashboard-sidebar-referral-card__title { color: #f1f1ed !important; } html.dark-mode .dashboard-sidebar-referral-card:hover .dashboard-sidebar-referral-card__title { color: #8fcf8f !important; } html.dark-mode .dashboard-sidebar-referral-card__subtitle { color: #777970 !important; } html.dark-mode .dashboard-sidebar-referral-card__image { background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(255,255,255,.06)) !important; color: #8fcf8f !important; } html.dark-mode .dashboard-sidebar-referral-card__action { background: linear-gradient(135deg, #22c55e, #15803d) !important; color: #f1f1ed !important; box-shadow: none !important; } html.dark-mode .dashboard-sidebar-referral-slot { border-top-color: rgba(255,255,255,.08) !important; background: linear-gradient(180deg, rgba(14,15,15,0), #0e0f0f 36%) !important; } /* ============================================================ KYC NOTICE CARD — STRIP (main-notice-card.kyc-notice-card) ============================================================ */ html.dark-mode .main-notice-card.kyc-notice-card { background: linear-gradient(90deg, rgba(20,21,21,.98) 0%, rgba(14,15,15,.96) 58%, rgba(13,14,14,.94) 100%) !important; border: 1px solid rgba(255,255,255,.10) !important; border-left: 2px solid rgba(255,255,255,.28) !important; } html.dark-mode .main-notice-card.kyc-notice-card--approved { border-left-color: rgba(90,154,90,.55) !important; } html.dark-mode .main-notice-card.kyc-notice-card--rejected { border-left-color: rgba(210,60,60,.55) !important; } html.dark-mode .main-notice-card.kyc-notice-card--missing { border-left-color: rgba(var(--front-color-primary-rgb),.55) !important; } html.dark-mode .kyc-notice-card__icon-box { color: #f1f1ed !important; } html.dark-mode .kyc-notice-card--pending .kyc-notice-card__icon-box { color: #d4a84b !important; } html.dark-mode .main-notice-card.kyc-notice-card .kyc-notice-card__title { color: #f1f1ed !important; } html.dark-mode .main-notice-card.kyc-notice-card .kyc-notice-card__text { color: #b8bbb4 !important; } html.dark-mode .kyc-notice-card__progress { color: #777970 !important; } html.dark-mode .kyc-notice-card__track { background: rgba(255,255,255,.08) !important; } html.dark-mode .kyc-notice-card__status-pill { background: rgba(90,154,90,.12) !important; border-color: rgba(90,154,90,.22) !important; color: #8fcf8f !important; } html.dark-mode .main-notice-card.kyc-notice-card .kyc-notice-card__btn { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; color: #c8cac0 !important; } html.dark-mode .main-notice-card.kyc-notice-card .kyc-notice-card__btn:hover, html.dark-mode .main-notice-card.kyc-notice-card .kyc-notice-card__btn:focus { background: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .main-notice-card.kyc-notice-card--rejected .kyc-notice-card__btn { background: rgba(210,60,60,.12) !important; border-color: rgba(210,60,60,.22) !important; color: #e08080 !important; } html.dark-mode .main-notice-card.kyc-notice-card .kyc-notice-card__dismiss { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; color: #777970 !important; } html.dark-mode .main-notice-card.kyc-notice-card .kyc-notice-card__dismiss:hover { background: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } /* ============================================================ KYC VERIFY PAGE — HERO, STATUS, TIMELINE, FORM ============================================================ */ html.dark-mode .kyc-verify-header__title { color: #f1f1ed !important; } html.dark-mode .kyc-verify-header__subtitle { color: #b8bbb4 !important; } html.dark-mode .kyc-verify-header__badge { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .kyc-verify-header__badge--pending { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .kyc-verify-header__badge--approved { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .kyc-verify-header__badge--rejected { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .kyc-verify-status { background: linear-gradient(135deg, #111212 0%, #0e0f0f 100%) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .kyc-verify-status--pending { border-color: rgba(212,168,75,.18) !important; } html.dark-mode .kyc-verify-status--approved { border-color: rgba(90,154,90,.18) !important; } html.dark-mode .kyc-verify-status--rejected { border-color: rgba(210,60,60,.18) !important; } html.dark-mode .kyc-verify-status__icon { background: #0e0f0f !important; color: #6fa8dc !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .kyc-verify-status__title { color: #f1f1ed !important; } html.dark-mode .kyc-verify-status__message { color: #b8bbb4 !important; } html.dark-mode .kyc-verify-timeline { border-top-color: rgba(255,255,255,.08) !important; } html.dark-mode .kyc-verify-timeline__dot { background: #0e0f0f !important; border-color: rgba(255,255,255,.14) !important; } html.dark-mode .kyc-verify-timeline__label { color: #c8cac0 !important; } html.dark-mode .kyc-verify-timeline__meta { color: #777970 !important; } html.dark-mode .kyc-verify-form-card { background: #0e0f0f !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .kyc-verify-form-card__header { background: linear-gradient(135deg, #111212, #0e0f0f) !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .kyc-verify-form-card__title { color: #f1f1ed !important; } html.dark-mode .kyc-verify-form-card__subtitle { color: #b8bbb4 !important; } html.dark-mode .kyc-verify-form-card__hint { background: rgba(90,154,90,.10) !important; color: #8fcf8f !important; } html.dark-mode .kyc-verify-form-card__footer { background: #111212 !important; border-top-color: rgba(255,255,255,.08) !important; } html.dark-mode .kyc-verify-form-card__legal { color: #777970 !important; } html.dark-mode .kyc-verify-field__label { color: #c8cac0 !important; } html.dark-mode .kyc-verify-field__hint { color: #777970 !important; } html.dark-mode .kyc-verify-template-empty, html.dark-mode .kyc-verify-template-loading { border-color: rgba(255,255,255,.10) !important; background: #111212 !important; color: #777970 !important; } html.dark-mode .kyc-verify-hero { background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.05), transparent 34%), linear-gradient(135deg, #111212, #0e0f0f) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .kyc-verify-hero__title { color: #f1f1ed !important; } html.dark-mode .kyc-verify-hero__subtitle { color: #b8bbb4 !important; } html.dark-mode .kyc-verify-hero__meta-item { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .kyc-verify-hero__meta-item span { color: #777970 !important; } html.dark-mode .kyc-verify-hero__meta-item strong { color: #f1f1ed !important; } html.dark-mode .kyc-verify-hero__badge { background: rgba(255,255,255,.06) !important; color: #b8bbb4 !important; } html.dark-mode .kyc-template-fields { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .kyc-template-fields__header { border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .kyc-template-fields__title { color: #f1f1ed !important; } html.dark-mode .kyc-template-fields__description { color: #777970 !important; } /* ============================================================ SETTINGS — PREMIUM WORKSPACE (settings-pro-card) ============================================================ */ html.dark-mode .settings-pro-card.single-form-card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-shell { background: radial-gradient(circle at 8% 0%, rgba(255,255,255,.02), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(14,15,15,.98)) !important; } html.dark-mode .settings-profile-card, html.dark-mode .settings-content--panel { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-profile-card__eyebrow, html.dark-mode .settings-profile-hero__eyebrow, html.dark-mode .settings-content__eyebrow { color: #555752 !important; } html.dark-mode .settings-profile-card__name { color: #f1f1ed !important; } html.dark-mode .settings-profile-card__meta { color: #777970 !important; } html.dark-mode .settings-profile-card__role { background: rgba(255,255,255,.07) !important; color: #c8cac0 !important; } html.dark-mode .settings-pro-card .settings-nav { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-pro-card .settings-nav__link { color: #b8bbb4 !important; border-color: transparent !important; } html.dark-mode .settings-pro-card .settings-nav__icon { background: rgba(255,255,255,.07) !important; color: #c8cac0 !important; } html.dark-mode .settings-nav__hint { color: #777970 !important; } html.dark-mode .settings-nav__meta { background: rgba(255,255,255,.06) !important; color: #777970 !important; } html.dark-mode .settings-pro-card .settings-nav__link.is-active { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.14) !important; color: #f1f1ed !important; } html.dark-mode .settings-pro-card .settings-nav__link.is-active .settings-nav__icon { background: rgba(255,255,255,.18) !important; color: #f1f1ed !important; } html.dark-mode .settings-nav__active-dot { background: #c8cac0 !important; } html.dark-mode .settings-content__header { border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .settings-content__title { color: #f1f1ed !important; } html.dark-mode .settings-content__badge { background: rgba(255,255,255,.07) !important; color: #c8cac0 !important; } html.dark-mode .settings-heading-action { box-shadow: none !important; } html.dark-mode .settings-profile-hero { background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.04), transparent 34%), linear-gradient(135deg, #111212, #0e0f0f) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-profile-hero__name { color: #f1f1ed !important; } html.dark-mode .settings-profile-hero__text { color: #777970 !important; } html.dark-mode .settings-section__icon { background: rgba(255,255,255,.07) !important; color: #c8cac0 !important; } html.dark-mode .settings-content__scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18) !important; } /* Current plan panel */ html.dark-mode .settings-content--panel .settings-current-plan { background: radial-gradient(circle at 100% 0, rgba(255,255,255,.04), transparent 34%), linear-gradient(180deg, #0e0f0f, #111212) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-content--panel .settings-current-plan__eyebrow { color: #777970 !important; } html.dark-mode .settings-content--panel .settings-current-plan__title { color: #f1f1ed !important; } html.dark-mode .settings-content--panel .settings-current-plan__text { color: #b8bbb4 !important; } html.dark-mode .settings-content--panel .settings-current-plan__badge--success { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .settings-content--panel .settings-current-plan__metric { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .settings-content--panel .settings-current-plan__metric span { color: #777970 !important; } html.dark-mode .settings-content--panel .settings-current-plan__metric strong { color: #f1f1ed !important; } html.dark-mode .settings-content--panel .settings-current-plan__features span { background: rgba(255,255,255,.06) !important; color: #c8cac0 !important; } html.dark-mode .settings-content--panel .settings-current-plan__footer { border-top-color: rgba(255,255,255,.08) !important; } html.dark-mode .settings-content--panel .settings-current-plan__footer span { color: #777970 !important; } html.dark-mode .settings-content--panel .settings-current-plan__link { color: #6fa8dc !important; } html.dark-mode .settings-content--panel .settings-active-list__item { background: #111212 !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .settings-content--panel .settings-active-list__icon { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .settings-content--panel .settings-active-list__body h6 { color: #f1f1ed !important; } html.dark-mode .settings-content--panel .settings-active-list__body p, html.dark-mode .settings-content--panel .settings-active-list__meta span { color: #777970 !important; } html.dark-mode .settings-content--panel .settings-active-list__meta strong { color: #f1f1ed !important; } /* Security suite tabs */ html.dark-mode .settings-content--panel .security-suite-tabs { background: linear-gradient(135deg, #111212, #0e0f0f) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-content--panel .security-suite-tabs__item { color: #b8bbb4 !important; } html.dark-mode .settings-content--panel .security-suite-tabs__item:hover { border-color: rgba(255,255,255,.12) !important; background: rgba(255,255,255,.06) !important; color: #f1f1ed !important; } html.dark-mode .settings-content--panel .security-suite-tabs__icon { background: rgba(255,255,255,.07) !important; color: #c8cac0 !important; } html.dark-mode .settings-content--panel .security-suite-tabs__item.is-active { border-color: rgba(255,255,255,.16) !important; } html.dark-mode .settings-content--panel .security-suite-tabs__item.is-active .security-suite-tabs__icon { background: rgba(255,255,255,.18) !important; color: #f1f1ed !important; } html.dark-mode .settings-content--panel .security-suite-tabs__hint { color: inherit !important; } /* Wallet PIN */ html.dark-mode .wallet-pin-input-wrap .form-control { background: #111212 !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .wallet-pin-input-wrap .form-control:focus { background: #0e0f0f !important; border-color: rgba(111,168,220,.35) !important; box-shadow: 0 0 0 4px rgba(111,168,220,.10) !important; } html.dark-mode .wallet-pin-input-wrap__icon { color: #777970 !important; } html.dark-mode .wallet-pin-tips__visual { background: linear-gradient(135deg, #111212, #0e0f0f) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .wallet-pin-tips__key { background: #0e0f0f !important; color: #6fa8dc !important; box-shadow: none !important; } html.dark-mode .wallet-pin-tips__dots span { background: #6fa8dc !important; box-shadow: 0 0 0 4px rgba(111,168,220,.10) !important; } html.dark-mode .wallet-pin-errors { color: #b8bbb4 !important; } html.dark-mode .wallet-pin-reset-link { color: #6fa8dc !important; } html.dark-mode .wallet-pin-card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .wallet-pin-card__header { background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(14,15,15,0)), #0e0f0f !important; } /* Notification settings */ html.dark-mode .settings-content--panel .notification-preferences-card, html.dark-mode .settings-content--panel .notification-feed-card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-content--panel .notification-header--split { background: linear-gradient(135deg, #111212, #0e0f0f) !important; } html.dark-mode .settings-content--panel .notification-header__icon { background: rgba(255,255,255,.07) !important; color: #c8cac0 !important; } html.dark-mode .settings-content--panel .notification-header__title { color: #f1f1ed !important; } html.dark-mode .settings-content--panel .notification-header__subtitle { color: #777970 !important; } html.dark-mode .settings-content--panel .notification-header__pill { background: rgba(90,154,90,.10) !important; color: #8fcf8f !important; } html.dark-mode .settings-content--panel .notification-toggle-card, html.dark-mode .settings-content--panel .notification-tune-card, html.dark-mode .settings-content--panel .notification-custom-tune, html.dark-mode .settings-content--panel .notification-preferences-actions { background: #111212 !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .settings-content--panel .notification-toggle-card__title { color: #f1f1ed !important; } html.dark-mode .settings-content--panel .notification-toggle-card__text { color: #777970 !important; } html.dark-mode .settings-content--panel .notification-toggle-switch { background: rgba(255,255,255,.10) !important; } html.dark-mode .settings-content--panel .notification-toggle-switch span { background: #c8cac0 !important; } html.dark-mode .settings-content--panel .notification-toggle-card__input:checked ~ .notification-toggle-switch { background: rgba(111,168,220,.35) !important; } html.dark-mode .settings-content--panel .notification-toggle-card:has(.notification-toggle-card__input:checked) { border-color: rgba(111,168,220,.20) !important; background: rgba(111,168,220,.06) !important; } html.dark-mode .settings-content--panel .notification-custom-tune__title { color: #f1f1ed !important; } html.dark-mode .settings-content--panel .notification-custom-tune__text { color: #777970 !important; } html.dark-mode .settings-content--panel .notification-custom-tune__badge { background: rgba(255,255,255,.07) !important; color: #c8cac0 !important; } html.dark-mode .settings-content--panel .notification-preferences-actions__hint { color: #777970 !important; } html.dark-mode .settings-content--panel .notification-feed-item { background: #0e0f0f !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .settings-content--panel .notification-feed-item:hover { background: #111212 !important; } html.dark-mode .settings-content--panel .notification-feed-item .notification-item__icon { background: rgba(255,255,255,.06) !important; } html.dark-mode .settings-content--panel .notification-feed-item .notification-item__mark-read { background: rgba(210,60,60,.12) !important; } /* Security readiness strip */ html.dark-mode .settings-content--panel .security-readiness-strip { background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(14,15,15,.98)), #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-content--panel .security-readiness-strip__label { color: #777970 !important; } html.dark-mode .settings-content--panel .security-readiness-strip__value { color: #f1f1ed !important; } html.dark-mode .settings-content--panel .security-readiness-strip__meter { background: rgba(255,255,255,.08) !important; } html.dark-mode .settings-content--panel .security-center-hero { background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(14,15,15,.98)), linear-gradient(180deg, #0e0f0f, #111212) !important; } html.dark-mode .settings-content--panel .security-activity-page-link { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .settings-content--panel .security-activity-page-link:hover { border-color: rgba(255,255,255,.22) !important; background: rgba(255,255,255,.06) !important; color: #f1f1ed !important; } html.dark-mode .settings-content--panel .security-activity-pagination { border-top-color: rgba(255,255,255,.08) !important; } html.dark-mode .settings-content--panel .security-activity-pagination__summary { color: #777970 !important; } html.dark-mode .settings-content--panel .security-activity-pagination .page-link { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .settings-content--panel .security-activity-pagination .page-item.active .page-link { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.22) !important; color: #f1f1ed !important; } /* Settings tips, steps, 2FA */ html.dark-mode .settings-tips { background: linear-gradient(180deg, #111212, #0e0f0f) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-tips__title { color: #f1f1ed !important; } html.dark-mode .settings-tips__list { color: #b8bbb4 !important; } html.dark-mode .settings-steps__title { color: #f1f1ed !important; } html.dark-mode .settings-steps__text { color: #b8bbb4 !important; } html.dark-mode .settings-steps__item { border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .settings-2fa-scan { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-2fa-scan__qr { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-2fa-scan__label { color: #777970 !important; } html.dark-mode .settings-2fa-scan__value { color: #c8cac0 !important; } html.dark-mode .settings-2fa-scan__secret { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .settings-status-card { background: linear-gradient(135deg, #111212, #0e0f0f) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-status-card__icon { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; color: #6fa8dc !important; } html.dark-mode .settings-status-card__title { color: #f1f1ed !important; } html.dark-mode .settings-status-card__text { color: #b8bbb4 !important; } html.dark-mode .settings-inline-alert { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-inline-alert__icon { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .settings-inline-alert__title { color: #f1f1ed !important; } html.dark-mode .settings-inline-alert__text { color: #b8bbb4 !important; } /* ============================================================ TRX MODAL (ud-trx-modal) — complementos não cobertos ============================================================ */ html.dark-mode .user-dashboard .ud-trx-modal__content::before { background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 40%), linear-gradient(180deg, transparent 72%, rgba(255,255,255,.02)) !important; } html.dark-mode .user-dashboard .ud-trx-modal__hero { background: radial-gradient(circle at top right, rgba(255,255,255,.04), transparent 34%), linear-gradient(145deg, #141515, #1a1c1a) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 14px 32px rgba(0,0,0,.4) !important; } html.dark-mode .user-dashboard .ud-trx-modal__eyebrow { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; color: #c8cac0 !important; } html.dark-mode .user-dashboard .ud-trx-modal__title { color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-trx-modal__subtitle { color: #b8bbb4 !important; } html.dark-mode .user-dashboard .ud-trx-modal__hero-icon { background: rgba(255,255,255,.08) !important; color: #c8cac0 !important; } html.dark-mode .user-dashboard .ud-trx-modal__hero-icon.deposit { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .user-dashboard .ud-trx-modal__hero-icon.withdraw { background: rgba(210,60,60,.14) !important; color: #e08080 !important; } html.dark-mode .user-dashboard .ud-trx-modal__hero-icon.send-money { background: rgba(111,168,220,.14) !important; color: #6fa8dc !important; } html.dark-mode .user-dashboard .ud-trx-modal__hero-icon.receive-money { background: rgba(160,148,230,.14) !important; color: #a094e6 !important; } html.dark-mode .user-dashboard .ud-trx-modal__hero-icon.exchange-money { background: rgba(212,168,75,.14) !important; color: #d4a84b !important; } html.dark-mode .user-dashboard .ud-trx-modal__hero-icon.reward { background: rgba(212,168,75,.14) !important; color: #d4a84b !important; } html.dark-mode .user-dashboard .ud-trx-modal__detail-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .user-dashboard .ud-trx-modal__textarea { background: #111212 !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .user-dashboard .ud-trx-modal__textarea:focus { border-color: rgba(111,168,220,.35) !important; box-shadow: 0 0 0 4px rgba(111,168,220,.10) !important; } html.dark-mode .user-dashboard .ud-trx-modal__download { background: linear-gradient(135deg, rgba(111,168,220,.28), rgba(77,138,191,.32)) !important; color: #f1f1ed !important; box-shadow: none !important; } html.dark-mode .user-dashboard .ud-trx-modal__dismiss { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #b8bbb4 !important; } html.dark-mode .user-dashboard .ud-trx-chip { background: rgba(255,255,255,.08) !important; color: #c8cac0 !important; } /* ============================================================ QUICK FUNCTION MENU — complementos ============================================================ */ html.dark-mode .quick-function-dropdown { background: rgba(14,15,15,.98) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 22px 50px rgba(0,0,0,.65) !important; } html.dark-mode .quick-function-dropdown::before { background: rgba(14,15,15,.98) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .quick-function-menu__header { background: linear-gradient(135deg, rgba(20,21,21,.98), rgba(17,18,18,.98)) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .quick-function-menu__wallet-card { color: #f1f1ed !important; } html.dark-mode .quick-function-menu__wallet-label { color: rgba(241,241,237,.65) !important; } html.dark-mode .quick-function-menu__wallet-code { color: rgba(241,241,237,.45) !important; } html.dark-mode .quick-function-menu__scan { background: linear-gradient(180deg, #141515, #111212) !important; border-color: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .quick-function-menu__scan:hover { color: #c8cac0 !important; } /* ============================================================ P2P — MARKETPLACE (offers panel) ============================================================ */ html.dark-mode .p2p-ui .p2p-offers-panel--marketplace { background: transparent !important; border: 0 !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__head { background: linear-gradient(180deg, rgba(20,21,21,.96), rgba(17,18,18,.96)) !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__head h6 { color: #c8cac0 !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card:hover { background: linear-gradient(180deg, #111212, #141515) !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-body { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-base, html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-number, html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-fiat { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-arrow { color: #555752 !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-per { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-limit__label, html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-payment__label { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-limit__value, html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-payment__value { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-payment-row { border-top-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-payment-pill { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-available-badge { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-available-badge__label { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-available-badge__value { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser__avatar { background: linear-gradient(180deg, #1a1c1a, #141515) !important; border-color: rgba(255,255,255,.12) !important; color: #c8cac0 !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser__name { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser__stats { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-seller-badge--verified { background: rgba(111,168,220,.10) !important; border-color: rgba(111,168,220,.18) !important; color: #6fa8dc !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-chip--promoted { background: rgba(212,168,75,.12) !important; border-color: rgba(212,168,75,.20) !important; color: #d4a84b !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offer-chip--featured { background: rgba(160,148,230,.10) !important; border-color: rgba(160,148,230,.18) !important; color: #a094e6 !important; } html.dark-mode .p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__status { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; color: #777970 !important; } /* ============================================================ P2P — MY ADS & MANAGE SHELL ============================================================ */ html.dark-mode .p2p-manage-hero { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .p2p-manage-hero__eyebrow { background: rgba(255,255,255,.07) !important; color: #c8cac0 !important; } html.dark-mode .p2p-manage-hero__title { color: #f1f1ed !important; } html.dark-mode .p2p-manage-hero__subtitle { color: #b8bbb4 !important; } html.dark-mode .p2p-manage-stat { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-manage-stat__label { color: #777970 !important; } html.dark-mode .p2p-manage-stat__value { color: #f1f1ed !important; } html.dark-mode .p2p-manage-stat__hint { color: #777970 !important; } html.dark-mode .p2p-manage-alert--warning { background: rgba(212,168,75,.08) !important; border-color: rgba(212,168,75,.18) !important; color: #d4a84b !important; } html.dark-mode .p2p-manage-alert--info { background: rgba(111,168,220,.08) !important; border-color: rgba(111,168,220,.16) !important; color: #6fa8dc !important; } html.dark-mode .p2p-manage-shell .p2p-promo-preview { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-manage-shell .p2p-promo-preview__title { color: #f1f1ed !important; } html.dark-mode .p2p-manage-shell .p2p-promo-meta { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-manage-shell .p2p-promo-meta__item { border-right-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-manage-shell .p2p-promo-meta__item:first-child { background: rgba(255,255,255,.04) !important; } html.dark-mode .p2p-manage-shell .p2p-promo-meta__item small { color: #777970 !important; } html.dark-mode .p2p-manage-shell .p2p-promo-meta__item strong { color: #f1f1ed !important; } html.dark-mode .p2p-manage-shell .p2p-promo-meta__item strong i { color: #6fa8dc !important; } html.dark-mode .p2p-manage-shell .p2p-promo-summary__group { border-top-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-manage-shell .p2p-promo-group-title { color: #f1f1ed !important; } html.dark-mode .p2p-manage-shell .p2p-promo-feature-card { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-manage-shell .p2p-promo-feature-card i { color: #6fa8dc !important; } html.dark-mode .p2p-manage-shell .p2p-promo-feature-card strong { color: #f1f1ed !important; } html.dark-mode .p2p-manage-shell .p2p-promo-feature-card small { color: #b8bbb4 !important; } html.dark-mode .p2p-manage-shell .p2p-promo-rules { color: #b8bbb4 !important; } html.dark-mode .p2p-manage-shell .p2p-promo-rule-chip { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .p2p-manage-shell .p2p-promo-rule-chip--success { background: rgba(90,154,90,.10) !important; border-color: rgba(90,154,90,.18) !important; color: #8fcf8f !important; } html.dark-mode .p2p-manage-shell .p2p-promo-rule-chip--warning { background: rgba(212,168,75,.10) !important; border-color: rgba(212,168,75,.18) !important; color: #d4a84b !important; } html.dark-mode .p2p-manage-shell .p2p-promo-empty { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; color: #777970 !important; } /* My ads cards */ html.dark-mode .p2p-ui .p2p-my-ad-card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-my-ad-card__accent { background: linear-gradient(180deg, rgba(111,168,220,.55), rgba(77,138,191,.55)) !important; } html.dark-mode .p2p-ui .p2p-my-ad-card__title { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-my-ad-card__metric-icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .p2p-ui .p2p-my-ad-card__metric-label { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-my-ad-card__metric-value { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-my-ad-card__meta-line { border-top-color: rgba(255,255,255,.08) !important; color: #777970 !important; } html.dark-mode .p2p-ui .p2p-my-ad-card__foot--warning { background: rgba(212,168,75,.08) !important; border-color: rgba(212,168,75,.16) !important; color: #d4a84b !important; } html.dark-mode .p2p-ui .p2p-my-ads-subtitle { color: #b8bbb4 !important; } /* P2P summary cards in my ads */ html.dark-mode .p2p-ui .p2p-summary-card { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-summary-card__label { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-summary-card__value { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-my-ads-empty__icon { background: linear-gradient(180deg, #141515, #1a1c1a) !important; color: #6fa8dc !important; } /* P2P method toolbar */ html.dark-mode .p2p-method-toolbar { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-method-toolbar__label { color: #777970 !important; } html.dark-mode .p2p-method-toolbar__stat { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .p2p-method-toolbar__stat--active { background: rgba(90,154,90,.10) !important; border-color: rgba(90,154,90,.18) !important; color: #8fcf8f !important; } html.dark-mode .p2p-method-toolbar .input-group-text, html.dark-mode .p2p-method-toolbar .form-select, html.dark-mode .p2p-method-toolbar .form-control { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } /* P2P method card */ html.dark-mode .p2p-method-card__inner { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-method-card:not(.p2p-method-card--disabled):hover .p2p-method-card__inner { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 10px 22px rgba(0,0,0,.4) !important; } html.dark-mode .p2p-method-card__check { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; } html.dark-mode .p2p-method-card .p2p-pm-check:checked + .p2p-method-card__inner .p2p-method-card__check { background: #6fa8dc !important; border-color: #6fa8dc !important; color: #f1f1ed !important; } html.dark-mode .p2p-method-card .p2p-pm-check:checked + .p2p-method-card__inner { background: linear-gradient(180deg, rgba(90,154,90,.06), rgba(90,154,90,.03)) !important; border-color: rgba(90,154,90,.22) !important; } html.dark-mode .p2p-method-card__brand { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #c8cac0 !important; } html.dark-mode .p2p-method-card__name { color: #f1f1ed !important; } html.dark-mode .p2p-method-card__status.is-ready { background: rgba(90,154,90,.10) !important; border-color: rgba(90,154,90,.18) !important; color: #8fcf8f !important; } html.dark-mode .p2p-method-card__status.is-missing { background: rgba(212,168,75,.10) !important; border-color: rgba(212,168,75,.18) !important; color: #d4a84b !important; } html.dark-mode .p2p-method-card__tag { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .p2p-method-card__hint { color: #777970 !important; } /* P2P ad details */ html.dark-mode .p2p-ui .p2p-ad-panel { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .p2p-ui .p2p-ad-summary-card { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-ad-summary-card__label { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-ad-summary-card__value { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-ad-summary-card__hint { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-ad-info-item { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-ad-info-item__label { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-ad-info-item__value { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-ad-section-block__label { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-ad-payment-item { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-ad-payment-item__fallback { background: rgba(255,255,255,.07) !important; color: #c8cac0 !important; } html.dark-mode .p2p-ui .p2p-ad-payment-item span { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-ad-terms-box, html.dark-mode .p2p-ui .p2p-ad-status-box { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .p2p-ui .p2p-ad-status-box span { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-ad-health-item { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui .p2p-ad-health-item span { color: #777970 !important; } html.dark-mode .p2p-ui .p2p-ad-health-item strong { color: #f1f1ed !important; } html.dark-mode .p2p-ui .p2p-ad-review-item { border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-ui .p2p-ad-review-item__comment { color: #b8bbb4 !important; } html.dark-mode .p2p-ui .p2p-ad-empty { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; color: #777970 !important; } html.dark-mode .p2p-ui .p2p-ad-inline-alert--warning { background: rgba(212,168,75,.08) !important; border-color: rgba(212,168,75,.16) !important; color: #d4a84b !important; } /* P2P trader profile */ html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-hero { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-hero__eyebrow, html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-section__eyebrow { color: #555752 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-hero__name { color: #f1f1ed !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-hero__meta { color: #777970 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-hero__trust { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-label { color: #777970 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-chip { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-score { color: #f1f1ed !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-bar { background: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-stat { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-stat__label { color: #777970 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-stat__value { color: #f1f1ed !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-section { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-section__title { color: #f1f1ed !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-section__subtitle { color: #b8bbb4 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-review-card { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-review-card__name { color: #f1f1ed !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-review-card__time { color: #777970 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-review-card__comment { color: #b8bbb4 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-tips li { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-empty { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-empty__icon { background: #0e0f0f !important; color: #6fa8dc !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-empty__title { color: #f1f1ed !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-empty__text { color: #b8bbb4 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offers-panel__head { background: linear-gradient(180deg, #0e0f0f, #111212) !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offers-panel__body { background: linear-gradient(180deg, #0e0f0f, #111212) !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-offer-profile-context__title { color: #f1f1ed !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-offer-profile-context__meta { color: #777970 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-offer-compact-meta__item { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-offer-compact-meta__label { color: #777970 !important; } html.dark-mode .p2p-ui.p2p-trader-profile .p2p-offer-compact-meta__value { color: #c8cac0 !important; } /* ============================================================ PAYMENT LINKS — CARD & EMPTY STATE ============================================================ */ html.dark-mode .payment-link-card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .payment-link-card:hover { border-color: rgba(255,255,255,.22) !important; } html.dark-mode .payment-link-card__icon { background: linear-gradient(135deg, rgba(111,168,220,.12), rgba(111,168,220,.06)) !important; color: #6fa8dc !important; } html.dark-mode .payment-link-card__title { color: #f1f1ed !important; } html.dark-mode .payment-link-card__meta-line { color: #777970 !important; } html.dark-mode .payment-link-card__currency { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .payment-link-card .payment-link-url-group { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .payment-link-card .payment-link-url-prefix { color: #777970 !important; } html.dark-mode .payment-link-card .payment-link-url-input { color: #c8cac0 !important; } html.dark-mode .payment-link-card .payment-link-copy-btn { border-left-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .payment-link-card__stat-label { color: #777970 !important; } html.dark-mode .payment-link-card__stat-value { color: #f1f1ed !important; } /* Payment link action buttons (tonal) */ html.dark-mode .payment-link-action.btn-outline-primary { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: transparent !important; } html.dark-mode .payment-link-action.btn-outline-primary:hover { background: rgba(111,168,220,.18) !important; } html.dark-mode .payment-link-action.btn-primary { background: rgba(111,168,220,.22) !important; color: #c8dff0 !important; border-color: transparent !important; } html.dark-mode .payment-link-action.btn-primary:hover { background: rgba(111,168,220,.30) !important; color: #f1f1ed !important; } html.dark-mode .payment-link-action.btn-outline-warning { background: rgba(212,168,75,.10) !important; color: #d4a84b !important; border-color: transparent !important; } html.dark-mode .payment-link-action.btn-outline-warning:hover { background: rgba(212,168,75,.18) !important; } html.dark-mode .payment-link-action.btn-outline-success { background: rgba(90,154,90,.10) !important; color: #8fcf8f !important; border-color: transparent !important; } html.dark-mode .payment-link-action.btn-outline-success:hover { background: rgba(90,154,90,.18) !important; } html.dark-mode .payment-link-action.btn-outline-danger { background: rgba(210,60,60,.10) !important; color: #e08080 !important; border-color: transparent !important; } html.dark-mode .payment-link-action.btn-outline-danger:hover { background: rgba(210,60,60,.18) !important; } /* Payment link empty state */ html.dark-mode .payment-link-empty { background: radial-gradient(circle at 12% 10%, rgba(111,168,220,.06), transparent 30%), radial-gradient(circle at 92% 0%, rgba(111,168,220,.08), transparent 32%), linear-gradient(180deg, #111212, #0e0f0f) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .payment-link-empty::before { border-color: rgba(255,255,255,.08) !important; } html.dark-mode .payment-link-empty__icon { background: #0e0f0f !important; color: #6fa8dc !important; box-shadow: 0 12px 26px rgba(0,0,0,.4) !important; } html.dark-mode .payment-link-empty__eyebrow { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .payment-link-empty__title { color: #f1f1ed !important; } html.dark-mode .payment-link-empty__hint { color: #b8bbb4 !important; } html.dark-mode .payment-link-empty__secure { color: #777970 !important; } html.dark-mode .payment-link-empty__preview { background: rgba(14,15,15,.88) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 18px 48px rgba(0,0,0,.4) !important; } html.dark-mode .payment-link-empty__preview-top span { background: rgba(255,255,255,.08) !important; } html.dark-mode .payment-link-empty__preview-row { background: #0e0f0f !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .payment-link-empty__preview-row i { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .payment-link-empty__preview-row strong { color: #f1f1ed !important; } html.dark-mode .payment-link-empty__preview-row small { color: #777970 !important; } html.dark-mode .payment-link-empty__preview-url { background: rgba(111,168,220,.08) !important; color: #6fa8dc !important; } /* ============================================================ WALLET — ALL WALLETS PAGE (wallet-card full grid) ============================================================ */ html.dark-mode .wallet-card__balance-panel { background: rgba(255,255,255,.04) !important; } html.dark-mode .wallet-card__balance-panel > span { color: #777970 !important; } html.dark-mode .wallet-card__balance-panel p { color: #777970 !important; } html.dark-mode .wallet-currency-preview-card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .wallet-currency-preview-card__row { border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .wallet-currency-preview-card__label { color: #777970 !important; } html.dark-mode .wallet-currency-preview-card__label i { background: rgba(255,255,255,.07) !important; color: #c8cac0 !important; } html.dark-mode .wallet-currency-preview-card strong { color: #f1f1ed !important; } html.dark-mode .wallet-currency-preview-card__live { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .wallet-currency-preview-card__roles { /* role colors come from inline styles, keep transparent wrapper */ } html.dark-mode .wallet-create-modal__content { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 18px 44px rgba(0,0,0,.55) !important; } html.dark-mode .wallet-create-modal__header { background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(14,15,15,0)), #0e0f0f !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .wallet-create-modal__mark { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)), #0e0f0f !important; border-color: rgba(255,255,255,.12) !important; color: #6fa8dc !important; } html.dark-mode .wallet-create-modal__title span:not(.wallet-create-modal__mark) { color: #777970 !important; } html.dark-mode .wallet-create-modal__title h6 { color: #f1f1ed !important; } html.dark-mode .wallet-create-modal__body { background: linear-gradient(180deg, #0e0f0f, #111212) !important; } html.dark-mode .wallet-create-modal__select-wrap .form-select { background-color: #0e0f0f !important; border-color: rgba(255,255,255,.12) !important; color: #f1f1ed !important; } html.dark-mode .wallet-create-modal__field .form-label { color: #c8cac0 !important; } html.dark-mode .wallet-create-modal__dismiss { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #777970 !important; } /* Wallet QR page */ html.dark-mode .wallet-qr-page__intro { background: linear-gradient(135deg, rgba(111,168,220,.06), rgba(90,154,90,.04)), #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .wallet-qr-page__intro-mark { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; box-shadow: none !important; } html.dark-mode .wallet-qr-page__intro span { color: #f1f1ed !important; } html.dark-mode .wallet-qr-page__intro p { color: #b8bbb4 !important; } html.dark-mode .wallet-qr-card { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(14,15,15,0)), #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 18px 45px rgba(0,0,0,.45) !important; } html.dark-mode .wallet-qr-card__code { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 16px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06) !important; } html.dark-mode .wallet-qr-card__scan-label { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; box-shadow: none !important; } html.dark-mode .wallet-qr-card__flag { background: rgba(255,255,255,.06) !important; } html.dark-mode .wallet-qr-card__currency h6, html.dark-mode .wallet-qr-card__balance strong { color: #f1f1ed !important; } html.dark-mode .wallet-qr-card__currency p, html.dark-mode .wallet-qr-card__balance span { color: #777970 !important; } html.dark-mode .wallet-qr-card__meta > div { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } html.dark-mode .wallet-qr-card__meta span, html.dark-mode .wallet-qr-card__link-box span { color: #777970 !important; } html.dark-mode .wallet-qr-card__meta strong { color: #f1f1ed !important; } html.dark-mode .wallet-qr-card__link-box input { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .wallet-qr-card__link-box button { background: rgba(111,168,220,.10) !important; border-color: rgba(111,168,220,.14) !important; color: #6fa8dc !important; } html.dark-mode .wallet-qr-card__btn--secondary { background: rgba(111,168,220,.10) !important; border-color: rgba(111,168,220,.16) !important; color: #6fa8dc !important; } html.dark-mode .wallet-qr-card__btn--ghost { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #b8bbb4 !important; } /* Wallet receive QR modal */ html.dark-mode .wallet-receive-qr-modal .modal-content { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 22px 58px rgba(0,0,0,.55) !important; } html.dark-mode .wallet-receive-qr-modal__hero { background: linear-gradient(135deg, rgba(111,168,220,.08), rgba(90,154,90,.04)), #0e0f0f !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .wallet-receive-qr-modal__mark { background: rgba(111,168,220,.10) !important; border-color: rgba(111,168,220,.12) !important; color: #6fa8dc !important; } html.dark-mode .wallet-receive-qr-modal__eyebrow { color: #6fa8dc !important; } html.dark-mode .wallet-receive-qr-modal .modal-title { color: #f1f1ed !important; } html.dark-mode .wallet-receive-qr-modal__hero small { color: #777970 !important; } html.dark-mode .wallet-receive-qr-modal__body { background: transparent !important; } html.dark-mode .wallet-receive-qr-modal__summary > div { background: rgba(111,168,220,.04) !important; border-color: rgba(111,168,220,.10) !important; } html.dark-mode .wallet-receive-qr-modal__summary span { color: #777970 !important; } html.dark-mode .wallet-receive-qr-modal__summary strong { color: #f1f1ed !important; } html.dark-mode .wallet-receive-qr-modal__scan-card { background: linear-gradient(180deg, rgba(111,168,220,.04), rgba(90,154,90,.02)), #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .wallet-receive-qr-modal__code { background: #f1f1ed !important; /* QR code precisa de fundo claro para ser escaneável */ border-color: rgba(255,255,255,.10) !important; box-shadow: 0 14px 30px rgba(0,0,0,.4) !important; } html.dark-mode .wallet-receive-qr-modal__hint { color: #777970 !important; } html.dark-mode .wallet-receive-qr-modal__url { border-color: rgba(255,255,255,.10) !important; background: #0e0f0f !important; } html.dark-mode .wallet-receive-qr-modal__url .form-control { background: rgba(255,255,255,.04) !important; color: #c8cac0 !important; } html.dark-mode .wallet-receive-qr-modal__footer { border-top-color: rgba(255,255,255,.08) !important; } /* ============================================================ WITHDRAW ACCOUNT FIELD STATE ============================================================ */ html.dark-mode .withdraw-account-field-state { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; color: #777970 !important; } html.dark-mode .withdraw-account-field-state.is-error { background: rgba(210,60,60,.08) !important; border-color: rgba(210,60,60,.20) !important; color: #e08080 !important; } html.dark-mode .withdraw-account-field-state.is-loading { background: rgba(111,168,220,.08) !important; border-color: rgba(111,168,220,.18) !important; color: #6fa8dc !important; } /* ============================================================ MERCHANT CARDS — complementos ============================================================ */ html.dark-mode .merchant-header-btn-payments { background: rgba(90,154,90,.10) !important; border-color: rgba(90,154,90,.18) !important; color: #8fcf8f !important; } html.dark-mode .merchant-header-btn-payments:hover { background: rgba(90,154,90,.18) !important; color: #8fcf8f !important; } html.dark-mode .merchant-header-btn-create { background: rgba(111,168,220,.10) !important; border-color: rgba(111,168,220,.18) !important; color: #6fa8dc !important; } html.dark-mode .merchant-header-btn-create:hover { background: rgba(111,168,220,.18) !important; color: #6fa8dc !important; } /* ============================================================ QR CARD (lista de QR codes) ============================================================ */ html.dark-mode .qr-card { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .qr-preview-wrapper { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; } /* QR SVG: fundo branco necessário para legibilidade */ html.dark-mode .qr-preview-wrapper svg, html.dark-mode .qr-code-wrapper svg, html.dark-mode .wallet-qr-card__code svg { background: #f1f1ed !important; border-radius: 4px !important; } html.dark-mode .amount-label { color: #f1f1ed !important; } html.dark-mode .expires-label { color: #777970 !important; } html.dark-mode .card-actions { background: rgba(255,255,255,.025) !important; border-top-color: rgba(255,255,255,.08) !important; } html.dark-mode .qr-print-section { background: #0e0f0f !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .payment-details { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .detail-label { color: #777970 !important; } html.dark-mode .detail-value { color: #f1f1ed !important; } html.dark-mode .print-header .business-name { color: #f1f1ed !important; } html.dark-mode .print-header .business-subtitle { color: #b8bbb4 !important; } html.dark-mode .qr-print-section hr { border-color: rgba(255,255,255,.10) !important; } html.dark-mode .scan-instruction { color: #b8bbb4 !important; } html.dark-mode .security-note { color: #777970 !important; } html.dark-mode .invoice-preview { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .qr-link-row a { color: #6fa8dc !important; } html.dark-mode .qr-link-row a:hover { color: #c8dff0 !important; } /* ============================================================ MISC — formulários inline, badges, utilitários ============================================================ */ /* Dropdown item active (flags de idioma) */ html.dark-mode .dropdown-menu .dropdown-item.active { background: rgba(255,255,255,.08) !important; color: #f1f1ed !important; } html.dark-mode .dropdown-menu .dropdown-item.active::after { color: #c8cac0 !important; } /* input-group premium style (single-input-inner) */ html.dark-mode .single-input-inner .input-group .form-control + .input-group-text { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; color: #c8cac0 !important; } /* User type switch (login) */ html.dark-mode .user-type-modern .user-type-option { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; color: #c8cac0 !important; } html.dark-mode .user-type-modern .user-type-option:hover { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.20) !important; color: #f1f1ed !important; } html.dark-mode .user-type-modern .btn-check:checked + .user-type-option { background: rgba(111,168,220,.18) !important; border-color: rgba(111,168,220,.30) !important; color: #c8dff0 !important; box-shadow: none !important; } /* Remove btn (file upload) */ html.dark-mode .remove-btn { color: #e08080 !important; } html.dark-mode .remove-btn:hover, html.dark-mode .remove-btn:focus { background: rgba(210,60,60,.10) !important; color: #e08080 !important; } /* Custom ticket form */ html.dark-mode .custom-ticket-form .file-preview { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } /* P2P offer builder disabled state */ html.dark-mode .p2p-offer-builder-fields:disabled { opacity: .55 !important; } /* Visa pro card (dark está ok pois já é escuro, só ajusta box-shadow) */ html.dark-mode .visa-pro-card { box-shadow: 0 10px 30px rgba(0,0,0,.5) !important; } /* Avatar upload */ html.dark-mode .avatar-upload .avatar-preview { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .avatar-upload .avatar-edit input + label svg { background: rgba(255,255,255,.08) !important; } /* Circle icon */ html.dark-mode .circle-icon { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; } /* Check card area */ html.dark-mode .check-card-area { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .check-card-area p { color: #8fcf8f !important; } /* Referral tree */ html.dark-mode .referral-tree li::before, html.dark-mode .referral-tree li::after { background: rgba(255,255,255,.12) !important; } html.dark-mode .referral-tree li a { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .referral-tree li a:hover { background: rgba(255,255,255,.06) !important; color: #f1f1ed !important; } /* Summery list dashed border */ html.dark-mode .summery-list li + li { border-top-color: rgba(255,255,255,.12) !important; } /* P2P inline alerts (promo page) */ html.dark-mode .p2p-promo-page .p2p-promo-preview { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-promo-page .p2p-promo-chip { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .p2p-promo-page .p2p-promo-meta { display: grid !important; } html.dark-mode .p2p-promo-page .p2p-promo-meta__item { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .p2p-promo-page .p2p-promo-meta__item small { color: #777970 !important; } html.dark-mode .p2p-promo-page .p2p-promo-meta__item strong { color: #f1f1ed !important; } html.dark-mode .p2p-promo-page .p2p-promo-summary__group { border-top-color: rgba(255,255,255,.08) !important; } html.dark-mode .p2p-promo-page .p2p-promo-empty { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; color: #777970 !important; } /* Withdraw account */ html.dark-mode .p2p-manage-shell .p2p-offer-builder-fields { color: #f1f1ed !important; } /* P2P my ads panel head */ html.dark-mode .p2p-ui .p2p-offers-panel__title { color: #f1f1ed !important; } /* Notification card header (dashboard) */ html.dark-mode .notification-header { background: rgba(255,255,255,.04) !important; } html.dark-mode .notification-header__title { color: #f1f1ed !important; } /* Nav tabs complemento */ html.dark-mode .single-element-tab li a.active { border-bottom-color: rgba(255,255,255,.55) !important; } /* * ============================================================ * DARK MODE — merchant.css + merchant-dashboard.css overrides * Inject AFTER dark-mode.css * * Activation: .dark-mode class on * ============================================================ */ /* ============================================================ MERCHANT BUTTONS ============================================================ */ html.dark-mode .btn-merchant { color: #f1f1ed !important; background: linear-gradient(135deg, rgba(var(--front-color-merchant-rgb), 0.55), rgba(var(--front-color-merchant-rgb), 0.38)) !important; border: 1px solid rgba(var(--front-color-merchant-rgb), 0.38) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38) !important; } html.dark-mode .btn-merchant:hover, html.dark-mode .btn-merchant:focus, html.dark-mode .btn-merchant:active { color: #f1f1ed !important; background: linear-gradient(135deg, rgba(var(--front-color-merchant-rgb), 0.70), rgba(var(--front-color-merchant-rgb), 0.55)) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.55) !important; } html.dark-mode .btn-light-merchant, html.dark-mode .btn-merchant-soft { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(var(--front-color-merchant-rgb), 0.10) !important; border: 1px solid rgba(var(--front-color-merchant-rgb), 0.18) !important; } html.dark-mode .btn-outline-merchant { color: var(--front-color-merchant, #c8cac0) !important; background: transparent !important; border: 1px solid rgba(var(--front-color-merchant-rgb), 0.28) !important; } html.dark-mode .btn-light-merchant:hover, html.dark-mode .btn-light-merchant:focus, html.dark-mode .btn-outline-merchant:hover, html.dark-mode .btn-outline-merchant:focus, html.dark-mode .btn-merchant-soft:hover, html.dark-mode .btn-merchant-soft:focus { color: #f1f1ed !important; background: rgba(var(--front-color-merchant-rgb), 0.22) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.38) !important; } /* ============================================================ MERCHANT SERVICE CARD (dashboard) ============================================================ */ html.dark-mode .dashboard-user-layout .merchant-service-card { background: #0e0f0f !important; border-color: rgba(var(--front-color-merchant-rgb), 0.12) !important; box-shadow: none !important; } /* ============================================================ MERCHANT APPLICATION HERO & CONFIG HERO ============================================================ */ html.dark-mode .merchant-application-hero, html.dark-mode .merchant-config-hero { background: linear-gradient(135deg, rgba(var(--front-color-merchant-rgb), 0.08), rgba(var(--front-color-merchant-rgb), 0.03)), #0e0f0f !important; border-color: rgba(var(--front-color-merchant-rgb), 0.16) !important; box-shadow: none !important; } html.dark-mode .merchant-application-hero h2, html.dark-mode .merchant-config-hero h2 { color: #f1f1ed !important; } html.dark-mode .merchant-application-hero p, html.dark-mode .merchant-config-hero p { color: #777970 !important; } html.dark-mode .merchant-application-hero__eyebrow, html.dark-mode .merchant-command-panel__eyebrow, html.dark-mode .merchant-section-head span, html.dark-mode .merchant-config-hero__eyebrow, html.dark-mode .merchant-credential-card__eyebrow { color: var(--front-color-merchant, #c8cac0) !important; } /* ============================================================ MERCHANT PROCESS STEPS ============================================================ */ html.dark-mode .merchant-process-step { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.14) !important; } html.dark-mode .merchant-process-step span { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(var(--front-color-merchant-rgb), 0.12) !important; } html.dark-mode .merchant-process-step.is-active span { color: #f1f1ed !important; background: rgba(var(--front-color-merchant-rgb), 0.38) !important; } html.dark-mode .merchant-process-step strong { color: #f1f1ed !important; } html.dark-mode .merchant-process-step small { color: #777970 !important; } /* ============================================================ MERCHANT APPLICATION MAIN GRID ============================================================ */ html.dark-mode .merchant-application-main, html.dark-mode .merchant-application-main--edit { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(14, 15, 15, 0)), #0e0f0f !important; border-color: rgba(255, 255, 255, 0.08) !important; } /* ============================================================ MERCHANT LOGO UPLOADER ============================================================ */ html.dark-mode .merchant-application-logo .avatar-upload { background: linear-gradient(135deg, rgba(var(--front-color-merchant-rgb), 0.05), rgba(var(--front-color-merchant-rgb), 0.02)), #111212 !important; border-color: rgba(var(--front-color-merchant-rgb), 0.20) !important; } html.dark-mode .merchant-application-logo .avatar-edit label { background: #0e0f0f !important; border-color: rgba(var(--front-color-merchant-rgb), 0.18) !important; box-shadow: none !important; } html.dark-mode .merchant-application-logo .avatar-preview { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.10) !important; box-shadow: none !important; } /* ============================================================ MERCHANT FIELD TITLES & HELPERS ============================================================ */ html.dark-mode .merchant-field-title span { color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-field-title strong { color: #f1f1ed !important; } html.dark-mode .merchant-field-title small, html.dark-mode .merchant-upload-hint span { color: #777970 !important; } html.dark-mode .merchant-upload-hint { background: #111212 !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-upload-hint i { color: var(--front-color-merchant, #c8cac0) !important; } /* ============================================================ MERCHANT DEMO REQUEST ============================================================ */ html.dark-mode .merchant-demo-request { background: linear-gradient(135deg, rgba(var(--front-color-merchant-rgb), 0.06), rgba(var(--front-color-merchant-rgb), 0.03)), #0e0f0f !important; border-color: rgba(var(--front-color-merchant-rgb), 0.12) !important; } html.dark-mode .merchant-demo-request span { color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-demo-request strong { color: #f1f1ed !important; } html.dark-mode .merchant-demo-request small { color: #777970 !important; } /* ============================================================ MERCHANT APPLICATION NOTE ============================================================ */ html.dark-mode .merchant-application-note { background: rgba(var(--front-color-merchant-rgb), 0.07) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.12) !important; } html.dark-mode .merchant-application-note__icon { background: rgba(var(--front-color-merchant-rgb), 0.35) !important; box-shadow: none !important; } html.dark-mode .merchant-application-note > div > strong { color: #f1f1ed !important; } html.dark-mode .merchant-application-note > div > span { color: #b8bbb4 !important; } /* ============================================================ MERCHANT APPLICATION FORM ============================================================ */ html.dark-mode .merchant-application-form .form-label { color: #c8cac0 !important; } html.dark-mode .merchant-application-form .form-control, html.dark-mode .merchant-application-form .form-select { background-color: rgba(255, 255, 255, 0.04) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.16) !important; color: #f1f1ed !important; } html.dark-mode .merchant-application-form .form-control:focus, html.dark-mode .merchant-application-form .form-select:focus { border-color: rgba(var(--front-color-merchant-rgb), 0.38) !important; box-shadow: 0 0 0 0.18rem rgba(var(--front-color-merchant-rgb), 0.12) !important; } html.dark-mode .merchant-application-form .form-control::placeholder { color: #555752 !important; } /* ============================================================ MERCHANT APPLICATION ACTIONS BAR ============================================================ */ html.dark-mode .merchant-application-actions { border-top-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-application-actions strong { color: #f1f1ed !important; } html.dark-mode .merchant-application-actions span { color: #777970 !important; } /* ============================================================ MERCHANT CURRENCY GRID CARDS ============================================================ */ html.dark-mode .merchant-currency-card { background: #0e0f0f !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-currency-card:hover { border-color: rgba(var(--front-color-merchant-rgb), 0.30) !important; background: rgba(var(--front-color-merchant-rgb), 0.06) !important; } html.dark-mode .merchant-currency-card__mark { background: #111212 !important; border-color: rgba(var(--front-color-merchant-rgb), 0.18) !important; color: transparent !important; } html.dark-mode .merchant-currency-card__body strong { color: #f1f1ed !important; } html.dark-mode .merchant-currency-card__body small { color: #777970 !important; } html.dark-mode .merchant-currency-card__input:checked + .merchant-currency-card { background: rgba(var(--front-color-merchant-rgb), 0.08) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.38) !important; box-shadow: none !important; } html.dark-mode .merchant-currency-card__input:checked + .merchant-currency-card .merchant-currency-card__mark { color: #f1f1ed !important; background: rgba(var(--front-color-merchant-rgb), 0.55) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.55) !important; } /* ============================================================ MERCHANT FIELD SUMMARY ============================================================ */ html.dark-mode .merchant-field-summary { background: #111212 !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-field-summary--compact { background: linear-gradient(135deg, rgba(var(--front-color-merchant-rgb), 0.07), rgba(var(--front-color-merchant-rgb), 0.03)), #0e0f0f !important; } html.dark-mode .merchant-field-summary strong { color: #f1f1ed !important; } html.dark-mode .merchant-field-summary span { color: #777970 !important; } html.dark-mode .merchant-field-summary__icon { background: rgba(var(--front-color-merchant-rgb), 0.35) !important; } html.dark-mode .merchant-field-summary__logo { background: #0e0f0f !important; border-color: rgba(var(--front-color-merchant-rgb), 0.14) !important; } /* ============================================================ MERCHANT COMMAND PANEL ============================================================ */ html.dark-mode .merchant-command-panel { background: #0e0f0f !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-command-panel h2 { color: #f1f1ed !important; } html.dark-mode .merchant-command-panel p { color: #777970 !important; } html.dark-mode .merchant-command-panel__logo { background: #111212 !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: none !important; } html.dark-mode .merchant-command-panel__empty-icon { background: rgba(var(--front-color-merchant-rgb), 0.12) !important; color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-command-panel__facts div { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-command-panel__facts span { color: #777970 !important; } html.dark-mode .merchant-command-panel__facts span i { color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-command-panel__facts strong { color: #f1f1ed !important; } html.dark-mode .merchant-command-panel--success { background: linear-gradient(135deg, rgba(90, 154, 90, 0.08), #0e0f0f) !important; border-color: rgba(90, 154, 90, 0.22) !important; } html.dark-mode .merchant-command-panel--danger { background: linear-gradient(135deg, rgba(210, 60, 60, 0.08), #0e0f0f) !important; border-color: rgba(210, 60, 60, 0.22) !important; } html.dark-mode .merchant-command-panel--warning, html.dark-mode .merchant-command-panel--info, html.dark-mode .merchant-command-panel--neutral { border-color: rgba(var(--front-color-merchant-rgb), 0.18) !important; background: #0e0f0f !important; } /* ============================================================ MERCHANT STAT GRID ============================================================ */ html.dark-mode .merchant-stat { background: #0e0f0f !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-stat__icon { background: rgba(var(--front-color-merchant-rgb), 0.12) !important; color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-stat__icon i { color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-stat span { color: #777970 !important; } html.dark-mode .merchant-stat strong { color: #f1f1ed !important; } html.dark-mode .merchant-stat small { color: #777970 !important; } /* ============================================================ MERCHANT SHOP LIST & CARD ============================================================ */ html.dark-mode .merchant-shop-list__head { background: linear-gradient(135deg, rgba(var(--front-color-merchant-rgb), 0.06), rgba(var(--front-color-merchant-rgb), 0.03)), #0e0f0f !important; border-color: rgba(var(--front-color-merchant-rgb), 0.12) !important; } html.dark-mode .merchant-shop-list__head span { color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-shop-list__head strong { color: #f1f1ed !important; } html.dark-mode .merchant-shop-list__head small { color: #777970 !important; } html.dark-mode .merchant-shop-card { background: #0e0f0f !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-shop-card:hover { border-color: rgba(var(--front-color-merchant-rgb), 0.24) !important; box-shadow: 0 12px 24px -22px rgba(0, 0, 0, 0.7) !important; } html.dark-mode .merchant-shop-card__logo { background: #111212 !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-shop-card__name { color: #f1f1ed !important; } html.dark-mode .merchant-shop-card__url { color: #777970 !important; } html.dark-mode .merchant-shop-card__url:hover, html.dark-mode .merchant-shop-card__url:focus { color: var(--front-color-merchant, #c8cac0) !important; } /* ============================================================ MERCHANT CHIPS & PILLS ============================================================ */ html.dark-mode .merchant-chip { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(var(--front-color-merchant-rgb), 0.10) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.18) !important; } html.dark-mode .merchant-chip--muted { color: #777970 !important; background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-chip--wallet { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(var(--front-color-merchant-rgb), 0.10) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.16) !important; } html.dark-mode .merchant-chip--wallet.is-missing { color: #d4a84b !important; background: rgba(212, 168, 75, 0.12) !important; border-color: rgba(212, 168, 75, 0.26) !important; } html.dark-mode .merchant-currency-pill { color: #777970 !important; background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-currency-pill.is-primary { color: #f1f1ed !important; background: rgba(var(--front-color-merchant-rgb), 0.35) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.35) !important; } html.dark-mode .merchant-currency-pill.is-missing { color: #d4a84b !important; background: rgba(212, 168, 75, 0.14) !important; border-color: rgba(212, 168, 75, 0.32) !important; } /* ============================================================ MERCHANT STATUS NOTES ============================================================ */ html.dark-mode .merchant-status-note { background: #111212 !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-status-note strong { color: #f1f1ed !important; } html.dark-mode .merchant-status-note span { color: #777970 !important; } html.dark-mode .merchant-status-note--success { background: rgba(90, 154, 90, 0.08) !important; border-color: rgba(90, 154, 90, 0.18) !important; } html.dark-mode .merchant-status-note--success > i { color: #8fcf8f !important; background: rgba(90, 154, 90, 0.14) !important; } html.dark-mode .merchant-status-note--warning { background: rgba(212, 168, 75, 0.08) !important; border-color: rgba(212, 168, 75, 0.24) !important; } html.dark-mode .merchant-status-note--warning > i { color: #d4a84b !important; background: rgba(212, 168, 75, 0.16) !important; } html.dark-mode .merchant-status-note--danger { background: rgba(210, 60, 60, 0.08) !important; border-color: rgba(210, 60, 60, 0.18) !important; } html.dark-mode .merchant-status-note--danger > i { color: #e08080 !important; background: rgba(210, 60, 60, 0.14) !important; } /* ============================================================ MERCHANT SHOP CARD RAIL & FACTS ============================================================ */ html.dark-mode .merchant-shop-card__label { color: #777970 !important; } html.dark-mode .merchant-shop-card__label i { color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-shop-card__fact-list li { background: #111212 !important; border-color: rgba(255, 255, 255, 0.07) !important; } html.dark-mode .merchant-shop-card__fact-list i { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(var(--front-color-merchant-rgb), 0.10) !important; } html.dark-mode .merchant-shop-card__fact-list span { color: #777970 !important; } html.dark-mode .merchant-shop-card__fact-list strong { color: #f1f1ed !important; } html.dark-mode .merchant-shop-card__rail small { color: #777970 !important; } /* ============================================================ MERCHANT CONFIG HERO — IDENTITY & STATS ============================================================ */ html.dark-mode .merchant-config-hero__logo { background: #111212 !important; border-color: rgba(var(--front-color-merchant-rgb), 0.16) !important; } html.dark-mode .merchant-config-hero__stats div { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.14) !important; } html.dark-mode .merchant-config-hero__stats span { color: #777970 !important; } html.dark-mode .merchant-config-hero__stats strong { color: #f1f1ed !important; } /* ============================================================ MERCHANT CONFIG SUMMARY ============================================================ */ html.dark-mode .merchant-config-summary div { background: #0e0f0f !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-config-summary i { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(var(--front-color-merchant-rgb), 0.10) !important; } html.dark-mode .merchant-config-summary span { color: #777970 !important; } html.dark-mode .merchant-config-summary strong { color: #f1f1ed !important; } /* ============================================================ MERCHANT CONFIG PANEL, CHECKLIST, INTEGRATION CARD ============================================================ */ html.dark-mode .merchant-config-panel, html.dark-mode .merchant-checklist-card, html.dark-mode .merchant-integration-card { background: #0e0f0f !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-config-panel__head h3, html.dark-mode .merchant-checklist-card__head h3, html.dark-mode .merchant-integration-card__head h3 { color: #f1f1ed !important; } html.dark-mode .merchant-config-panel__head p, html.dark-mode .merchant-checklist-card__head p, html.dark-mode .merchant-integration-card__head p { color: #777970 !important; } html.dark-mode .merchant-panel-icon { background: rgba(var(--front-color-merchant-rgb), 0.12) !important; color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-config-pill { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(var(--front-color-merchant-rgb), 0.10) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.18) !important; } /* ============================================================ MERCHANT ENVIRONMENT SWITCH ============================================================ */ html.dark-mode .merchant-environment-switch { background: #111212 !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-environment-btn { color: #c8cac0 !important; background: transparent !important; border-color: transparent !important; } html.dark-mode .merchant-environment-btn__icon { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.12) !important; } html.dark-mode .merchant-environment-btn__copy strong { color: #f1f1ed !important; } html.dark-mode .merchant-environment-btn__copy small { color: #777970 !important; } html.dark-mode .merchant-environment-btn__lock { color: #d4a84b !important; background: rgba(212, 168, 75, 0.14) !important; border-color: rgba(212, 168, 75, 0.28) !important; } html.dark-mode .merchant-environment-btn.active { color: #f1f1ed !important; background: rgba(var(--front-color-merchant-rgb), 0.28) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.38) !important; } html.dark-mode .merchant-environment-btn.active .merchant-environment-btn__icon { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-environment-btn.active .merchant-environment-btn__copy small { color: rgba(241, 241, 237, 0.70) !important; } html.dark-mode .merchant-environment-lock-note { color: #d4a84b !important; background: rgba(212, 168, 75, 0.10) !important; border-color: rgba(212, 168, 75, 0.24) !important; } html.dark-mode .merchant-environment-lock-note i { color: #d4a84b !important; background: rgba(212, 168, 75, 0.16) !important; } /* ============================================================ MERCHANT MODE ALERT ============================================================ */ html.dark-mode .merchant-mode-alert { background: rgba(var(--front-color-merchant-rgb), 0.07) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.14) !important; } html.dark-mode .merchant-mode-alert i { color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-mode-alert strong { color: #f1f1ed !important; } html.dark-mode .merchant-mode-alert span { color: #777970 !important; } /* ============================================================ MERCHANT CREDENTIAL CARDS ============================================================ */ html.dark-mode .merchant-credential-card { background: #0e0f0f !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-credential-card__icon { background: rgba(var(--front-color-merchant-rgb), 0.12) !important; color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-credential-card strong { color: #f1f1ed !important; } html.dark-mode .merchant-credential-card code { color: #c8cac0 !important; } html.dark-mode .merchant-credential-card small { color: #777970 !important; } html.dark-mode .merchant-credential-guide div { background: linear-gradient(135deg, rgba(var(--front-color-merchant-rgb), 0.06), rgba(var(--front-color-merchant-rgb), 0.03)), #0e0f0f !important; border-color: rgba(var(--front-color-merchant-rgb), 0.12) !important; } html.dark-mode .merchant-credential-guide i { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(var(--front-color-merchant-rgb), 0.12) !important; } html.dark-mode .merchant-credential-guide strong { color: #f1f1ed !important; } html.dark-mode .merchant-credential-guide span { color: #777970 !important; } html.dark-mode .merchant-copy-btn { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(var(--front-color-merchant-rgb), 0.10) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.18) !important; } html.dark-mode .merchant-copy-btn:hover, html.dark-mode .merchant-copy-btn:focus { color: #f1f1ed !important; background: rgba(var(--front-color-merchant-rgb), 0.28) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.38) !important; } /* ============================================================ MERCHANT CHECKLIST ============================================================ */ html.dark-mode .merchant-checklist li { background: #111212 !important; border-color: rgba(255, 255, 255, 0.07) !important; } html.dark-mode .merchant-checklist i { color: var(--front-color-merchant, #c8cac0) !important; background: rgba(var(--front-color-merchant-rgb), 0.10) !important; } html.dark-mode .merchant-checklist strong { color: #f1f1ed !important; } html.dark-mode .merchant-checklist span { color: #777970 !important; } /* ============================================================ MERCHANT GATEWAY CARDS ============================================================ */ html.dark-mode .merchant-gateway-form .merchant-gateway-statusbar span { color: #777970 !important; background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-gateway-form .merchant-gateway-statusbar i { color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-gateway-card { background: #0e0f0f !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-gateway-card:hover { border-color: rgba(var(--front-color-merchant-rgb), 0.30) !important; background: rgba(var(--front-color-merchant-rgb), 0.05) !important; } html.dark-mode .merchant-gateway-card__mark { background: #111212 !important; border-color: rgba(var(--front-color-merchant-rgb), 0.18) !important; color: transparent !important; } html.dark-mode .merchant-gateway-card__logo { background: #111212 !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-gateway-card__body strong { color: #f1f1ed !important; } html.dark-mode .merchant-gateway-card__body small { color: #777970 !important; } html.dark-mode .merchant-gateway-card__input:checked + .merchant-gateway-card { border-color: rgba(var(--front-color-merchant-rgb), 0.38) !important; background: rgba(var(--front-color-merchant-rgb), 0.08) !important; box-shadow: none !important; } html.dark-mode .merchant-gateway-card__input:checked + .merchant-gateway-card .merchant-gateway-card__mark { color: #f1f1ed !important; background: rgba(var(--front-color-merchant-rgb), 0.50) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.50) !important; } html.dark-mode .merchant-gateway-save { border-top-color: rgba(255, 255, 255, 0.08) !important; } html.dark-mode .merchant-gateway-save span { color: #777970 !important; } /* ============================================================ MERCHANT SHOP ACTIONS ============================================================ */ html.dark-mode .merchant-shop-action { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: #c8cac0 !important; } html.dark-mode .merchant-shop-action:hover { background: rgba(255, 255, 255, 0.10) !important; color: #f1f1ed !important; } /* ============================================================ merchant.css — CORE CARDS & PANELS ============================================================ */ html.dark-mode .merchant-application-hero, html.dark-mode .merchant-command-panel, html.dark-mode .merchant-application-note, html.dark-mode .merchant-field-summary, html.dark-mode .merchant-shop-card, html.dark-mode .merchant-config-hero, html.dark-mode .merchant-config-panel, html.dark-mode .merchant-credential-card, html.dark-mode .merchant-checklist-card, html.dark-mode .merchant-integration-card { background: #0e0f0f !important; border-color: rgba(255, 255, 255, 0.10) !important; } /* ============================================================ merchant-dashboard.css — CARD ITEMS ============================================================ */ html.dark-mode .merchant-card-item { background: #0e0f0f !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important; } html.dark-mode .merchant-card-item:hover { border-color: rgba(255, 255, 255, 0.22) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.42) !important; } html.dark-mode .merchant-name-mobile, html.dark-mode .merchant-name-desktop { color: #f1f1ed !important; } html.dark-mode .merchant-url-mobile, html.dark-mode .merchant-url-desktop, html.dark-mode .merchant-currency-desktop { color: #777970 !important; } /* Mobile card sections */ html.dark-mode .merchant-card-mobile-header { background: linear-gradient(135deg, #141515 0%, #111212 100%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-card-mobile-body { background: #0e0f0f !important; } html.dark-mode .merchant-stat-item { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-stat-label { color: #777970 !important; } html.dark-mode .merchant-stat-value { color: #f1f1ed !important; } /* Mobile action buttons */ html.dark-mode .merchant-btn-qr-mobile { background: rgba(25, 118, 210, 0.12) !important; color: #90b8e8 !important; border-color: rgba(25, 118, 210, 0.22) !important; } html.dark-mode .merchant-btn-config-mobile { background: rgba(123, 31, 162, 0.12) !important; color: #c590e8 !important; border-color: rgba(123, 31, 162, 0.22) !important; } html.dark-mode .merchant-btn-edit-mobile { background: rgba(255, 255, 255, 0.06) !important; color: #b8bbb4 !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* Desktop action buttons */ html.dark-mode .merchant-btn-qr-desktop { background: rgba(25, 118, 210, 0.12) !important; color: #90b8e8 !important; border-color: rgba(25, 118, 210, 0.20) !important; } html.dark-mode .merchant-btn-config-desktop { background: rgba(123, 31, 162, 0.12) !important; color: #c590e8 !important; border-color: rgba(123, 31, 162, 0.20) !important; } html.dark-mode .merchant-btn-edit-desktop { background: rgba(255, 255, 255, 0.06) !important; color: #b8bbb4 !important; border-color: rgba(255, 255, 255, 0.12) !important; } html.dark-mode .merchant-card-desktop { background: #0e0f0f !important; } /* Empty state */ html.dark-mode .merchant-empty-state { background: rgba(255, 255, 255, 0.02) !important; border: 2px dashed rgba(255, 255, 255, 0.10) !important; } html.dark-mode .merchant-empty-title { color: #f1f1ed !important; } html.dark-mode .merchant-empty-subtitle { color: #bebfb8 !important; } /* Header action buttons */ html.dark-mode .merchant-header-btn-payments { background: rgba(90, 154, 90, 0.10) !important; border-color: rgba(90, 154, 90, 0.18) !important; color: #8fcf8f !important; } html.dark-mode .merchant-header-btn-payments:hover { background: rgba(90, 154, 90, 0.18) !important; } html.dark-mode .merchant-header-btn-create { background: rgba(var(--front-color-merchant-rgb), 0.10) !important; border-color: rgba(var(--front-color-merchant-rgb), 0.18) !important; color: var(--front-color-merchant, #c8cac0) !important; } html.dark-mode .merchant-header-btn-create:hover { background: rgba(var(--front-color-merchant-rgb), 0.18) !important; } /* ============================================================ SHARED BASE — all main merchant panels default surface ============================================================ */ html.dark-mode .merchant-context, html.dark-mode .merchant-application, html.dark-mode .merchant-console { color: #b8bbb4 !important; } /* Modo dark */ [data-theme="dark"] .p2p-ui .p2p-offers-panel__body { background: transparent !important; } /* Dark mode */ [data-theme="dark"] .p2p-offer-section { background: transparent !important; border: 1px solid rgba(255,255,255,0.08) !important; } [data-theme="dark"] .p2p-offer-methods__list { border: 1px solid rgba(255,255,255,0.08) !important; background: transparent !important; } [data-theme="dark"] .p2p-offer-footer { border: 1px solid rgba(255,255,255,0.08) !important; background: transparent !important; } [data-theme="dark"] .p2p-ui.p2p-accounts .p2p-accounts-side__notice { background: transparent !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; color: #cbd5e1 !important; } [data-theme="dark"] element.style { background: transparent !important; border: 1px solid rgba(255,255,255,0.08) !important; } html.dark-mode .gc-stat-card { background: linear-gradient(145deg, #101111, #191b1a) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 16px !important; padding: 18px 20px !important; display: flex !important; align-items: center !important; gap: 14px !important; } /* ── usp-notice ── */ html.dark-mode .usp-notice { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; color: #b8bbb4 !important; } html.dark-mode .usp-notice i { color: #6fa8dc !important; } html.dark-mode .usp-notice a { color: #6fa8dc !important; } /* ── usp-card annual note ── */ html.dark-mode .usp-card__annual-note { color: #8fcf8f !important; } html.dark-mode .usp-card--dark .usp-card__annual-note { color: #8fcf8f !important; } /* ── usp-card feat-icon (light card variant) ── */ html.dark-mode .usp-card:not(.usp-card--dark) .usp-card__feat-icon { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } /* ── usc-shell hero padding variant ── */ html.dark-mode .usc-shell--hero { background: radial-gradient(circle at top right, rgba(255,255,255,.03), transparent 30%), linear-gradient(180deg, #0e0f0f 0%, #111212 100%) !important; border-color: rgba(255,255,255,.10) !important; } /* ── usc-hero eyebrow dot ── */ html.dark-mode .usc-hero__eyebrow-dot { background: linear-gradient(135deg, #6fa8dc 0%, #a0b8e8 100%) !important; box-shadow: 0 0 0 5px rgba(111,168,220,.12) !important; } /* ── usc-hero actions ── */ html.dark-mode .usc-hero__actions { gap: 12px; } html.dark-mode .usc-hero__btn--ghost { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #c8cac0 !important; } /* ── usc-progress ── */ html.dark-mode .usc-progress { background: rgba(255,255,255,.08) !important; } html.dark-mode .usc-progress span { background: linear-gradient(90deg, #6fa8dc, #8fcf8f) !important; } /* ── usc-progress-card ── */ html.dark-mode .usc-progress-card { background: rgba(255,255,255,.03) !important; border-color: rgba(111,168,220,.12) !important; } html.dark-mode .usc-progress-card__head { color: #f1f1ed !important; } html.dark-mode .usc-progress-card__head strong { color: #6fa8dc !important; } html.dark-mode .usc-progress-card__meta { color: #777970 !important; } /* ── usc layout grid ── */ html.dark-mode .usc-layout { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr); } /* ── usc-feature-grid items ── */ html.dark-mode .usc-feature-grid { gap: 9px; } /* ── usc-pay-status ── */ html.dark-mode .usc-pay-status--success { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .usc-pay-status--warning { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .usc-pay-status--danger { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .usc-pay-status--muted { background: rgba(255,255,255,.06) !important; color: #777970 !important; } /* ── usc-payment-item right alignment ── */ html.dark-mode .usc-payment-item__right { align-items: flex-end; } /* ── usc-kicker ── */ html.dark-mode .usc-kicker { color: #6fa8dc !important; } /* ── usc-count ── */ html.dark-mode .usc-count { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } /* ── usc-notice variants ── */ html.dark-mode .usc-notice--warning { background: rgba(212,168,75,.08) !important; border-color: rgba(212,168,75,.18) !important; color: #d4a84b !important; } html.dark-mode .usc-notice--info { background: rgba(111,168,220,.08) !important; border-color: rgba(111,168,220,.16) !important; color: #6fa8dc !important; } /* ── usc-alert variants ── */ html.dark-mode .usc-alert--warning { background: rgba(212,168,75,.08) !important; border-color: rgba(212,168,75,.18) !important; color: #d4a84b !important; } html.dark-mode .usc-alert--muted { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; color: #777970 !important; } /* ── usc-panel pill variants ── */ html.dark-mode .usc-panel__pill { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .usc-panel__pill--muted { background: rgba(255,255,255,.06) !important; color: #777970 !important; } /* ── usc-panel empty ── */ html.dark-mode .usc-panel__empty { background: rgba(255,255,255,.02) !important; border-color: rgba(255,255,255,.12) !important; color: #777970 !important; } /* ── usc-stat grid ── */ html.dark-mode .usc-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } html.dark-mode .usc-stat__hint { color: #777970 !important; } /* * ============================================================ * DARK MODE — subscription-plans.css additions * Adicione ao final do seu dark-mode.css existente * ============================================================ */ /* ── Switch note ── */ html.dark-mode .sp-card__switch-note { background: rgba(90,154,90,.12) !important; border-color: rgba(90,154,90,.22) !important; color: #8fcf8f !important; } /* ── Billing toggle ── */ html.dark-mode .sp-toggle { background: #0e0f0f !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; } html.dark-mode .sp-toggle__btn { color: #777970 !important; background: transparent !important; } html.dark-mode .sp-toggle__btn:hover { color: #c8cac0 !important; } html.dark-mode .sp-toggle__btn.active { background: rgba(111,168,220,.22) !important; color: #f1f1ed !important; box-shadow: none !important; } html.dark-mode .sp-toggle__save { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .sp-toggle__btn.active .sp-toggle__save { background: rgba(255,255,255,.14) !important; color: rgba(241,241,237,.88) !important; } /* ── Billing hint ── */ html.dark-mode .sp-billing-hint { color: #777970 !important; } html.dark-mode .sp-billing-hint i { color: #d4a84b !important; } /* ── Card base (white cards) ── */ html.dark-mode .sp-card { background: linear-gradient(145deg, #101111, #191b1a) !important; border-color: rgba(255,255,255,.09) !important; box-shadow: 0 24px 64px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.10) !important; } html.dark-mode .sp-card:not(.sp-card--featured)::before { background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,.08) 45%, transparent 95%) !important; } html.dark-mode .sp-card:hover { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 10px 32px rgba(0,0,0,.55) !important; } /* ── Current plan ── */ html.dark-mode .sp-card--current { border-color: rgba(111,168,220,.35) !important; box-shadow: 0 0 0 4px rgba(111,168,220,.08), 0 6px 20px rgba(0,0,0,.5) !important; } /* ── Featured card — mantém gradiente azul ── */ html.dark-mode .sp-card--featured { background: linear-gradient(155deg, #1a2e50 0%, #0d1e3c 55%, #091528 100%) !important; border: none !important; box-shadow: 0 8px 32px rgba(0,0,0,.70), 0 2px 8px rgba(0,0,0,.50) !important; } /* ── Badges ── */ html.dark-mode .sp-badge--current { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; border-color: rgba(90,154,90,.22) !important; } html.dark-mode .sp-badge--featured { background: rgba(111,168,220,.55) !important; color: #f1f1ed !important; box-shadow: none !important; } html.dark-mode .sp-badge--free { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.22) !important; } html.dark-mode .sp-badge--pro { background: rgba(160,148,230,.10) !important; color: #a094e6 !important; border-color: rgba(160,148,230,.18) !important; } /* ── Card icon ── */ html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.20) !important; } /* ── Text ── */ html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__name { color: #f1f1ed !important; } html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__tagline { color: #777970 !important; } html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__currency { color: #777970 !important; } html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__amount { color: #f1f1ed !important; } html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__amount--free { color: #6fa8dc !important; } html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__period { color: #555752 !important; } html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__billing-note { color: #8fcf8f !important; } /* ── Pills ── */ html.dark-mode .sp-card:not(.sp-card--featured) .sp-pill--trial { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .sp-card:not(.sp-card--featured) .sp-pill--grace { background: rgba(255,255,255,.07) !important; color: #777970 !important; } html.dark-mode .sp-pill--value { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } /* ── Divider ── */ html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__divider { background: rgba(255,255,255,.08) !important; } /* ── Feature list ── */ html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__feat-heading { color: #555752 !important; } html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__feature-item { color: #c8cac0 !important; } html.dark-mode .sp-card:not(.sp-card--featured) .sp-card__feat-check { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } /* ── CTA buttons ── */ html.dark-mode .sp-card__btn--default { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; border-color: rgba(111,168,220,.22) !important; } html.dark-mode .sp-card__btn--default:hover { background: rgba(111,168,220,.22) !important; color: #c8dff0 !important; border-color: rgba(111,168,220,.38) !important; box-shadow: none !important; } html.dark-mode .sp-card__btn--featured { background: rgba(255,255,255,.14) !important; color: #f1f1ed !important; box-shadow: none !important; } html.dark-mode .sp-card__btn--featured:hover { background: rgba(255,255,255,.22) !important; color: #f1f1ed !important; } html.dark-mode .sp-card__btn--active { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; border-color: rgba(90,154,90,.22) !important; } html.dark-mode .sp-card--featured .sp-card__btn--active { background: rgba(255,255,255,.10) !important; color: rgba(241,241,237,.78) !important; border-color: rgba(255,255,255,.16) !important; } html.dark-mode .sp-card__btn--locked { background: rgba(255,255,255,.04) !important; color: #555752 !important; border-color: rgba(255,255,255,.08) !important; } /* ── Footer note ── */ html.dark-mode .sp-footer-note { color: #555752 !important; } html.dark-mode .sp-footer-note i { color: rgba(255,255,255,.14) !important; } /* ── Empty state ── */ html.dark-mode .sp-empty { color: #555752 !important; } /* ============================================================ DARK MODE — my-subscription.css (ms-*) ============================================================ */ /* ── Tokens ── */ html.dark-mode .ms-page { --ms-navy-900: #090a0a; --ms-navy-800: #0e0f0f; --ms-navy-700: #141515; --ms-blue-600: #6fa8dc; --ms-blue-500: #a0b8e8; --ms-blue-100: rgba(111,168,220,.14); --ms-blue-50: rgba(111,168,220,.08); --ms-green-500: #8fcf8f; --ms-green-100: rgba(90,154,90,.14); --ms-green-50: rgba(90,154,90,.10); --ms-lavender-500:#a094e6; --ms-lavender-100:rgba(160,148,230,.12); --ms-amber-500: #d4a84b; --ms-amber-100: rgba(212,168,75,.12); --ms-rose-500: #e08080; --ms-rose-100: rgba(210,60,60,.12); --ms-ink-900: #f1f1ed; --ms-ink-700: #c8cac0; --ms-ink-500: #777970; --ms-ink-400: #555752; --ms-ink-300: rgba(255,255,255,.18); --ms-line: rgba(255,255,255,.10); --ms-line-soft: rgba(255,255,255,.07); --ms-card: linear-gradient(145deg, #101111, #191b1a); color: #f1f1ed !important; } /* ── Buttons ── */ html.dark-mode .ms-btn--ghost { background: rgba(255,255,255,.05) !important; color: #c8cac0 !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .ms-btn--ghost:hover { border-color: rgba(255,255,255,.22) !important; color: #f1f1ed !important; } html.dark-mode .ms-btn--primary { background: rgba(111,168,220,.22) !important; color: #f1f1ed !important; } html.dark-mode .ms-btn--primary:hover { background: rgba(111,168,220,.32) !important; color: #f1f1ed !important; } html.dark-mode .ms-btn--bright { background: rgba(255,255,255,.10) !important; color: #f1f1ed !important; } html.dark-mode .ms-btn--bright:hover { background: rgba(255,255,255,.16) !important; } html.dark-mode .ms-btn--danger { background: rgba(210,60,60,.10) !important; color: #e08080 !important; border-color: rgba(210,60,60,.20) !important; } html.dark-mode .ms-btn--danger:hover { background: rgba(210,60,60,.18) !important; } /* ── Empty state ── */ html.dark-mode .ms-empty__icon { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .ms-empty__eyebrow { background: rgba(255,255,255,.06) !important; color: #777970 !important; } html.dark-mode .ms-empty h5 { color: #f1f1ed !important; } html.dark-mode .ms-empty p { color: #777970 !important; } /* ── Notices ── */ html.dark-mode .ms-notice--warning { background: rgba(212,168,75,.08) !important; border-color: rgba(212,168,75,.18) !important; color: #d4a84b !important; } html.dark-mode .ms-notice--info { background: rgba(111,168,220,.08) !important; border-color: rgba(111,168,220,.16) !important; color: #6fa8dc !important; } /* ── Stats (os cards brancos da screenshot) ── */ html.dark-mode .ms-stat { background: linear-gradient(145deg, #101111, #191b1a) !important; border-color: rgba(255,255,255,.09) !important; box-shadow: 0 24px 64px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.10) !important; } html.dark-mode .ms-stat__lbl { color: #777970 !important; } html.dark-mode .ms-stat__val { color: #f1f1ed !important; } html.dark-mode .ms-stat__delta { color: #8fcf8f !important; } html.dark-mode .ms-stat__delta--flat { color: #555752 !important; } /* ── Cards ── */ html.dark-mode .ms-card { background: linear-gradient(145deg, #101111, #191b1a) !important; border-color: rgba(255,255,255,.09) !important; box-shadow: 0 24px 64px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.10) !important; } html.dark-mode .ms-card h3 { color: #f1f1ed !important; } html.dark-mode .ms-card__sub { color: #777970 !important; } html.dark-mode .ms-section-lbl { color: #777970 !important; } html.dark-mode .ms-section-hint { color: #777970 !important; } html.dark-mode .ms-divider { background: rgba(255,255,255,.07) !important; } html.dark-mode .ms-mini-empty { color: #555752 !important; } html.dark-mode .ms-mini-empty i { color: #6fa8dc !important; } /* ── Meters (barras de uso) ── */ html.dark-mode .ms-meters::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10) !important; } html.dark-mode .ms-meters:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18) !important; } html.dark-mode .ms-meter-name { color: #f1f1ed !important; } html.dark-mode .ms-meter-val { color: #777970 !important; } html.dark-mode .ms-meter-val b { color: #f1f1ed !important; } html.dark-mode .ms-meter-sep { color: #555752 !important; } html.dark-mode .ms-meter-cap { color: #c8cac0 !important; } html.dark-mode .ms-meter-reset { color: #555752 !important; } html.dark-mode .ms-bar { background: rgba(255,255,255,.07) !important; } html.dark-mode .ms-meter-foot--warn { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .ms-meter-foot--over { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .ms-locked { background: rgba(255,255,255,.06) !important; color: #555752 !important; } /* ── Icon colors ── */ html.dark-mode .ms-icn-blue { background: rgba(111,168,220,.12) !important; color: #6fa8dc !important; } html.dark-mode .ms-icn-green { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; } html.dark-mode .ms-icn-amber { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .ms-icn-lav { background: rgba(160,148,230,.12) !important; color: #a094e6 !important; } html.dark-mode .ms-icn-rose { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } /* ── Billing ── */ html.dark-mode .ms-billing-amount { color: #f1f1ed !important; } html.dark-mode .ms-billing-amount small { color: #777970 !important; } html.dark-mode .ms-next-date { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .ms-method__title { color: #f1f1ed !important; } html.dark-mode .ms-method__title span { color: #555752 !important; } html.dark-mode .ms-method__sub { color: #777970 !important; } /* ── Cycle toggle ── */ html.dark-mode .ms-cycle-toggle { background: rgba(255,255,255,.05) !important; } html.dark-mode .ms-cycle-toggle button { color: #777970 !important; background: transparent !important; } html.dark-mode .ms-cycle-toggle button.active { background: #111212 !important; color: #f1f1ed !important; box-shadow: 0 1px 3px rgba(0,0,0,.4) !important; } html.dark-mode .ms-save { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } /* ── Preview / summary rows ── */ html.dark-mode .ms-preview-row { color: #c8cac0 !important; } html.dark-mode .ms-preview-row b { color: #f1f1ed !important; } html.dark-mode .ms-preview-cycle { color: #777970 !important; } html.dark-mode .ms-summary-row { color: #777970 !important; border-bottom-color: rgba(255,255,255,.07) !important; } html.dark-mode .ms-summary-row b { color: #f1f1ed !important; } /* ── Upgrade strip ── */ html.dark-mode .ms-upgrade-strip { background: linear-gradient(135deg, rgba(111,168,220,.07), rgba(111,168,220,.04)) !important; border-color: rgba(111,168,220,.14) !important; } html.dark-mode .ms-us__text h4 { color: #f1f1ed !important; } html.dark-mode .ms-us__text p { color: #777970 !important; } html.dark-mode .ms-us__text b { color: #6fa8dc !important; } /* ── Invoice table ── */ html.dark-mode .ms-inv-table th { color: #777970 !important; border-bottom-color: rgba(255,255,255,.07) !important; } html.dark-mode .ms-inv-table td { color: #f1f1ed !important; border-bottom-color: rgba(255,255,255,.07) !important; } html.dark-mode .ms-inv-id { color: #c8cac0 !important; } html.dark-mode .ms-s-paid { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .ms-s-free { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .ms-s-pending { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .ms-s-failed { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } /* ── Danger zone ── */ html.dark-mode .ms-danger-zone { background: linear-gradient(145deg, #101111, #191b1a) !important; border-color: rgba(255,255,255,.09) !important; } html.dark-mode .ms-dz__text h4 { color: #f1f1ed !important; } html.dark-mode .ms-dz__text p { color: #777970 !important; } /* ============================================================ DARK MODE — gift-card.css (gc-*) ============================================================ */ /* ── Tokens ── */ html.dark-mode .gc-page, html.dark-mode .gc-create { --dk-primary: #6fa8dc; --dk-primary-600: #4d8abf; --dk-primary-50: rgba(111,168,220,.08); --dk-primary-100: rgba(111,168,220,.14); --dk-accent: #6fa8dc; --dk-accent-2: #a0b8e8; --dk-success: #8fcf8f; --dk-success-50: rgba(90,154,90,.14); --dk-warning: #d4a84b; --dk-warning-50: rgba(212,168,75,.12); --dk-danger: #e08080; --dk-danger-50: rgba(210,60,60,.12); --dk-info: #6fa8dc; --dk-info-50: rgba(111,168,220,.10); --dk-app-bg: #090a0a; --dk-card: linear-gradient(145deg, #101111, #191b1a); --dk-card-line: rgba(255,255,255,.10); --dk-card-line-soft: rgba(255,255,255,.07); --dk-ink: #f1f1ed; --dk-ink-2: #c8cac0; --dk-mute: #777970; --dk-mute-2: #555752; --dk-bg-soft: #111212; color: #f1f1ed !important; } /* ── Breadcrumb ── */ html.dark-mode .gc-breadcrumb, html.dark-mode .gc-breadcrumb a { color: #777970 !important; } html.dark-mode .gc-breadcrumb .cur { color: #f1f1ed !important; } html.dark-mode .gc-page-title { color: #f1f1ed !important; } html.dark-mode .gc-page-sub { color: #777970 !important; } /* ── Stat cards ── */ html.dark-mode .gc-stat-card { background: linear-gradient(145deg, #101111, #191b1a) !important; border-color: rgba(255,255,255,.09) !important; box-shadow: 0 24px 64px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.10) !important; } html.dark-mode .gc-stat-card .lbl { color: #777970 !important; } html.dark-mode .gc-stat-card .val { color: #f1f1ed !important; } html.dark-mode .gc-stat-card .pct { color: #8fcf8f !important; } /* ── Tabs ── */ html.dark-mode .gc-tabs { background: linear-gradient(145deg, #101111, #191b1a) !important; border-color: rgba(255,255,255,.09) !important; } html.dark-mode .gc-tabs .tab { color: #777970 !important; background: transparent !important; } html.dark-mode .gc-tabs .tab .count { background: rgba(255,255,255,.06) !important; color: #777970 !important; } html.dark-mode .gc-tabs .tab.is-active { background: rgba(111,168,220,.12) !important; color: #6fa8dc !important; } html.dark-mode .gc-tabs .tab.is-active .count { background: rgba(111,168,220,.18) !important; color: #6fa8dc !important; } /* ── Row cards ── */ html.dark-mode .gc-row { background: linear-gradient(145deg, #101111, #191b1a) !important; border-color: rgba(255,255,255,.09) !important; } html.dark-mode .gc-row .gc-row-name { color: #f1f1ed !important; } html.dark-mode .gc-row .gc-row-meta { color: #777970 !important; } html.dark-mode .gc-row .gc-row-amount { color: #f1f1ed !important; } html.dark-mode .gc-row .gc-row-code { background: rgba(255,255,255,.06) !important; color: #c8cac0 !important; } /* ── Badges ── */ html.dark-mode .gc-badge.success { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; } html.dark-mode .gc-badge.warning { background: rgba(212,168,75,.12) !important; color: #d4a84b !important; } html.dark-mode .gc-badge.danger { background: rgba(210,60,60,.12) !important; color: #e08080 !important; } html.dark-mode .gc-badge.info { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .gc-badge.muted { background: rgba(255,255,255,.06) !important; color: #777970 !important; } /* ── Buttons ── */ html.dark-mode .gc-btn.light { background: rgba(255,255,255,.06) !important; color: #c8cac0 !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .gc-btn.ghost { color: #777970 !important; } html.dark-mode .gc-btn.light-success { background: rgba(90,154,90,.12) !important; color: #8fcf8f !important; border-color: rgba(90,154,90,.22) !important; } /* ── Summary list ── */ html.dark-mode .gc-summary .row { color: #c8cac0 !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .gc-summary .row .l { color: #777970 !important; } html.dark-mode .gc-summary .row .r { color: #f1f1ed !important; } html.dark-mode .gc-summary .row.total { border-top-color: rgba(255,255,255,.10) !important; } html.dark-mode .gc-summary .row.total .l { color: #f1f1ed !important; } /* ── Summery list (misspelled, voucher partial) ── */ html.dark-mode .summery-list li { color: #c8cac0 !important; border-bottom-color: rgba(255,255,255,.08) !important; } html.dark-mode .summery-list .summary-total { border-top-color: rgba(255,255,255,.10) !important; } /* ════════════════════════════════════ CREATE WIZARD ════════════════════════════════════ */ /* ── Stepper card ── */ html.dark-mode .gc-create__stepper-card { background: linear-gradient(145deg, #101111, #191b1a) !important; border-color: rgba(255,255,255,.09) !important; } /* ── Stepper steps ── */ html.dark-mode .gc-stepper .step .n { background: #111212 !important; color: #777970 !important; border-color: rgba(255,255,255,.12) !important; } html.dark-mode .gc-stepper .step .lbl { color: #777970 !important; } html.dark-mode .gc-stepper .step .lbl b { color: #c8cac0 !important; } html.dark-mode .gc-stepper .bar { background: rgba(255,255,255,.10) !important; } html.dark-mode .gc-stepper .step.current .n { background: linear-gradient(135deg, #6fa8dc, #4d8abf) !important; color: #f1f1ed !important; border-color: transparent !important; } html.dark-mode .gc-stepper .step.current .lbl b { color: #6fa8dc !important; } html.dark-mode .gc-stepper .step.done .n { background: rgba(90,154,90,.14) !important; color: #8fcf8f !important; border-color: rgba(90,154,90,.22) !important; } html.dark-mode .gc-stepper .bar.done { background: linear-gradient(90deg, rgba(90,154,90,.35), rgba(90,154,90,.55)) !important; } /* ── Step panel ── */ html.dark-mode .gc-step-panel__title { color: #f1f1ed !important; } html.dark-mode .gc-step-panel__sub { color: #777970 !important; } html.dark-mode .gc-step-panel__meta { color: #777970 !important; } /* ── Field labels ── */ html.dark-mode .gc-field-label { color: #c8cac0 !important; } html.dark-mode .gc-field-label__opt { color: #777970 !important; } html.dark-mode .gc-field-hint { color: #777970 !important; } /* ── Chips ── */ html.dark-mode .gc-chip { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; color: #c8cac0 !important; } html.dark-mode .gc-chip:hover { border-color: rgba(111,168,220,.30) !important; } html.dark-mode .gc-chip.is-active { background: rgba(111,168,220,.12) !important; border-color: rgba(111,168,220,.30) !important; color: #6fa8dc !important; } /* ── Template grid ── */ html.dark-mode .gc-template-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14) !important; } html.dark-mode .gc-template-card .inner { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .gc-template-card:hover .inner { border-color: rgba(111,168,220,.30) !important; } html.dark-mode .gc-template-card.is-selected .inner { border-color: #6fa8dc !important; } html.dark-mode .gc-template-card__meta .name { color: #f1f1ed !important; } html.dark-mode .gc-template-card__meta .cat { color: #777970 !important; } html.dark-mode .gc-template-card__meta .tick { background: rgba(255,255,255,.06) !important; color: transparent !important; } html.dark-mode .gc-template-card.is-selected .tick { background: #6fa8dc !important; color: #f1f1ed !important; } /* ── Wallet selector ── */ html.dark-mode .gc-wallet-card { background: #111212 !important; border-color: rgba(255,255,255,.10) !important; } html.dark-mode .gc-wallet-card:hover { border-color: rgba(111,168,220,.30) !important; } html.dark-mode .gc-wallet-card.is-selected { background: rgba(111,168,220,.08) !important; border-color: #6fa8dc !important; } html.dark-mode .gc-wallet-card__name { color: #f1f1ed !important; } html.dark-mode .gc-wallet-card__tick { background: rgba(255,255,255,.06) !important; color: transparent !important; } html.dark-mode .gc-wallet-card.is-selected .gc-wallet-card__tick { background: #6fa8dc !important; color: #f1f1ed !important; } html.dark-mode .gc-wallet-card__lbl { color: #777970 !important; } html.dark-mode .gc-wallet-card__bal { color: #f1f1ed !important; } /* ── Amount input ── */ html.dark-mode .gc-amount-input__symbol { color: #777970 !important; } html.dark-mode .gc-amount-input__currency { color: #777970 !important; } /* ── Mode toggle ── */ html.dark-mode .gc-mode-toggle { background: rgba(255,255,255,.05) !important; } html.dark-mode .gc-mode-toggle button { color: #777970 !important; } html.dark-mode .gc-mode-toggle button.is-active { background: #111212 !important; color: #f1f1ed !important; } /* ── Review cards ── */ html.dark-mode .gc-review-card { background: #111212 !important; border-color: rgba(255,255,255,.09) !important; } html.dark-mode .gc-review-card .ic { background: rgba(111,168,220,.10) !important; color: #6fa8dc !important; } html.dark-mode .gc-review-card .lbl { color: #777970 !important; } html.dark-mode .gc-review-card .val { color: #f1f1ed !important; } html.dark-mode .gc-review-card .meta { color: #777970 !important; } html.dark-mode .gc-review-message { background: #111212 !important; border-color: rgba(255,255,255,.09) !important; } html.dark-mode .gc-review-message__body { color: #c8cac0 !important; } html.dark-mode .gc-terms-card { background: rgba(111,168,220,.08) !important; border-color: rgba(111,168,220,.18) !important; color: #6fa8dc !important; } html.dark-mode .gc-terms-card__title { color: #6fa8dc !important; } html.dark-mode .gc-terms-card__sub { color: #777970 !important; } /* ── Step nav ── */ html.dark-mode .gc-step-nav { border-top-color: rgba(255,255,255,.08) !important; } html.dark-mode .gc-step-nav__indicator { color: #777970 !important; } /* ── Sidebar preview ── */ html.dark-mode .gc-side-eyebrow { color: #777970 !important; } html.dark-mode .gc-side-title { color: #f1f1ed !important; } html.dark-mode .gc-msg-bubble { background: #111212 !important; border-color: rgba(255,255,255,.09) !important; color: #c8cac0 !important; } html.dark-mode .gc-secure-hint { color: #777970 !important; } /* * ============================================================ * END — dark-mode-merchant.css * ============================================================ */ /* * ============================================================ * DARK MODE — pct-card surface unificado * Aplica o mesmo visual fosco-chumbo do pct-summary-card * a todos os containers principais do sistema * ============================================================ */ html.dark-mode .single-card-box, html.dark-mode .single-card-box.style-shadow, html.dark-mode .single-form-card, html.dark-mode .single-chart-inner, html.dark-mode .single-amount-card, html.dark-mode .walet-inner, html.dark-mode .card, html.dark-mode .modal-content, html.dark-mode .settings-section, html.dark-mode .settings-profile-card, html.dark-mode .settings-content--panel, html.dark-mode .settings-pro-card.single-form-card, html.dark-mode .wallet-card, html.dark-mode .wallet-qr-card, html.dark-mode .wallet-create-modal__content, html.dark-mode .wallet-receive-qr-modal .modal-content, html.dark-mode .qr-card, html.dark-mode .transaction-item, html.dark-mode .history-table .table-list .list-content, html.dark-mode .notification-card, html.dark-mode .notification-dropdown, html.dark-mode .ud-hero, html.dark-mode .user-dashboard .ud-stat-card, html.dark-mode .user-dashboard .ud-chart-card, html.dark-mode .user-dashboard .ud-transactions, html.dark-mode .user-dashboard .ud-transactions--recent, html.dark-mode .user-dashboard .ud-trx-modal__content, html.dark-mode .user-dashboard .ud-trx-modal__panel, html.dark-mode .user-dashboard .ud-trx-modal__action-panel, html.dark-mode .feature-summary-widget__panel, html.dark-mode .feature-summary-widget__card, html.dark-mode .payment-link-card, html.dark-mode .payment-link-empty, html.dark-mode .merchant-card-item, html.dark-mode .merchant-shop-card, html.dark-mode .merchant-command-panel, html.dark-mode .merchant-config-panel, html.dark-mode .merchant-credential-card, html.dark-mode .merchant-checklist-card, html.dark-mode .merchant-integration-card, html.dark-mode .merchant-stat, html.dark-mode .merchant-application-hero, html.dark-mode .merchant-config-hero, html.dark-mode .p2p-ui .p2p-offers-panel, html.dark-mode .p2p-ui .p2p-offer-card, html.dark-mode .p2p-ui .p2p-filterbar, html.dark-mode .p2p-ui .p2p-ad-panel, html.dark-mode .p2p-ui .p2p-my-ad-card, html.dark-mode .p2p-ui .p2p-summary-card, html.dark-mode .p2p-ui .p2p-account-card, html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-hero, html.dark-mode .p2p-ui.p2p-trader-profile .p2p-trader-section, html.dark-mode .p2p-manage-hero, html.dark-mode .usc-shell, html.dark-mode .usc-overview, html.dark-mode .usc-metric, html.dark-mode .usc-panel-v2, html.dark-mode .usp-card, html.dark-mode .sp-card, html.dark-mode .ck-plan-card, html.dark-mode .ck-order-card, html.dark-mode .vc-panel, html.dark-mode .vc-stat, html.dark-mode .vc-form-section, html.dark-mode .vc-ch-card, html.dark-mode .we-plan-card-v2, html.dark-mode .we-stk-card, html.dark-mode .we-stk-summary-card, html.dark-mode .we-stk-tabs, html.dark-mode .we-stk-detail-progress, html.dark-mode .we-hero, html.dark-mode .we-plan-card, html.dark-mode .we-detail-hero, html.dark-mode .lp-sub-plans__card, html.dark-mode .lp-earn__card, html.dark-mode .auth-card, html.dark-mode .login-card, html.dark-mode .agent-stat, html.dark-mode .agent-action-panel, html.dark-mode .agent-ledger-panel, html.dark-mode .agent-application-hero, html.dark-mode .agent-command-panel, html.dark-mode .agent-overview-panel, html.dark-mode .agent-qr-card, html.dark-mode .agent-print-qr-card, html.dark-mode .agent-account-card, html.dark-mode .agent-application-main, html.dark-mode .dk-history-row, html.dark-mode .dk-history-filter, html.dark-mode .dk-stat-card, html.dark-mode .dk-insight, html.dark-mode .dk-wallet-empty__state, html.dark-mode .dk-sheet, html.dark-mode .dk-more-sheet, html.dark-mode .dk-notif-panel, html.dark-mode .dk-notif-item, html.dark-mode .user-notification-card, html.dark-mode .kyc-verify-form-card, html.dark-mode .kyc-verify-status, html.dark-mode .kyc-verify-hero, html.dark-mode .kyc-template-fields, html.dark-mode .security-check-card, html.dark-mode .security-activity-item, html.dark-mode .main-notice-card, html.dark-mode .main-notice-card.kyc-notice-card { background: linear-gradient(145deg, #101111, #191b1a) !important; border: 1px solid rgba(255,255,255,.09) !important; box-shadow: 0 24px 64px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.1) !important; }