/* =========================================================================
   Global toast pill — used by showToast() in main.js. Previously this style
   was duplicated across every page CSS file. Hoisted here so theme.css (which
   loads on every authed page via head_hints.php) guarantees a styled toast
   regardless of which page-specific stylesheet a page chooses to ship. Earlier
   addmoney.php lost its toast pill styling when sell.css was removed from
   the page — this rule restores it for every page in one place.
   ========================================================================= */
.toast-pill {
    visibility: hidden;
    min-width: 200px;
    background-color: rgba(30, 30, 40, 0.95);
    color: #fff;
    text-align: center;
    border-radius: 50px;
    padding: 10px 24px;
    position: fixed;
    z-index: 10000;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 30px;
    width: max-content;
    max-width: 90vw;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
    pointer-events: none;
}

.toast-pill.show {
    visibility: visible;
    opacity: 1;
    bottom: 40px;
    pointer-events: auto;
}

/* sell.js / addmoney.js pass `sell-toast-override` so toasts from the
   exchange flow read in their orange accent. */
.toast-pill.sell-toast-override {
    background-color: rgba(255, 122, 69, 0.96);
    border-color: rgba(255, 255, 255, 0.18);
}

html[data-app-theme="white"] .toast-pill,

/* Light theme — invert the toast so it stays legible on the white surface. */
body.white-mode .toast-pill {
    background-color: rgba(20, 20, 20, 0.92);
    color: #fff;
    border-color: rgba(17, 24, 39, 0.18);
    box-shadow: 0 12px 30px rgba(28, 37, 54, 0.18);
}

html[data-app-theme="white"] .toast-pill.sell-toast-override,

body.white-mode .toast-pill.sell-toast-override {
    background-color: rgba(255, 122, 69, 0.96);
    color: #ffffff;
    border-color: rgba(255, 122, 69, 0.6);
}

html[data-app-theme="white"] body,
body.white-mode {
    --hero-gradient: radial-gradient(circle at 50% 0%, rgba(255, 128, 76, 0.22) 0%, rgba(255, 255, 255, 0) 68%);
    --card-hover-bg: rgba(255, 109, 61, 0.08);
    --glow-color: rgba(255, 130, 92, 0.28);
    --support-gradient: linear-gradient(135deg, #ff7a45 0%, #ff9c47 100%);
    --card-glass: rgba(255, 255, 255, 0.94);
    --card-border: rgba(255, 132, 90, 0.14);
    --primary: #ff7a45;
    --primary-hover: #f3642c;
    --secondary: #45d6cc;
    --bg-dark: #f6f8fc;
    --bg-card: #ffffff;
    --text-main: #141414;
    --text-muted: #6f7a8f;
    --danger: #ff4f7a;
    --success: #1fbf8f;
    --border: rgba(17, 24, 39, 0.1);
    --shadow: 0 18px 40px rgba(28, 37, 54, 0.08);
    --primary-gradient: linear-gradient(135deg, #ff824e 0%, #ffb347 100%);
    --primary-glow: rgba(255, 130, 92, 0.24);
    --success-glow: rgba(69, 214, 204, 0.2);
    --danger-glow: rgba(255, 79, 122, 0.18);
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(255, 132, 90, 0.14);
    /* Single authoritative background — the gradient was overridden by the
       background-color below anyway, so we keep just the solid colour. */
    background-color: #f6f8fc !important;
    background-image: none !important;
    color: var(--text-main);
}

html[data-app-theme="white"] body,
html[data-app-theme="white"] .sc-container,
html[data-app-theme="white"] .container,
html[data-app-theme="white"] main,
body.white-mode,
body.white-mode .sc-container,
body.white-mode .container,
body.white-mode main {
    color: var(--text-main);
}

html[data-app-theme="white"] a,

body.white-mode a {
    color: inherit;
}

html[data-app-theme="white"] .logo span,

body.white-mode .logo span {
    color: #ff8f1f !important;
}

html[data-app-theme="white"] .sc-container,

body.white-mode .sc-container,
html[data-app-theme="white"] .page-content,
body.white-mode .page-content {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] .navbar,
body.white-mode .navbar,
html[data-app-theme="white"] .navbar.glass-nav,
body.white-mode .navbar.glass-nav {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.94),
        rgba(248, 250, 255, 0.88)
    ) !important;

    border-bottom: 1px solid rgba(17, 24, 39, 0.07) !important;

    box-shadow:
        0 12px 30px rgba(28, 37, 54, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;

    backdrop-filter: blur(20px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
}
html[data-app-theme="white"] .logo,
body.white-mode .logo,
html[data-app-theme="white"] .mobile-back-btn,
body.white-mode .mobile-back-btn,
html[data-app-theme="white"] .nav-links span.hidden-mobile,
body.white-mode .nav-links span.hidden-mobile,
html[data-app-theme="white"] .mobile-menu-btn,
body.white-mode .mobile-menu-btn,
html[data-app-theme="white"] .mobile-back-btn .material-icons-round,
body.white-mode .mobile-back-btn .material-icons-round {
    color: #161616 !important;
}

html[data-app-theme="white"] .desktop-logout,

body.white-mode .desktop-logout {
    background: #ffffff !important;
    border-color: rgba(17, 24, 39, 0.12) !important;
    color: #161616 !important;
    box-shadow: 0 10px 24px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .desktop-logout:hover,

body.white-mode .desktop-logout:hover {
    background: #fff1eb !important;
    border-color: rgba(255, 122, 69, 0.28) !important;
    color: #ff6e39 !important;
}

html[data-app-theme="white"] .verified-tick,

body.white-mode .verified-tick {
    color: #ffb300 !important;
    filter:
        drop-shadow(0 0 2px rgba(255, 179, 0, 0.55))
        drop-shadow(0 0 8px rgba(255, 166, 0, 0.28)) !important;
    text-shadow: 0 0 10px rgba(255, 183, 3, 0.18);
}

html[data-app-theme="white"] .mobile-menu,

body.white-mode .mobile-menu {
    background:
        linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(255 255 255 / 98%)) !important;
    border-left: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: -18px 0 38px rgba(28, 37, 54, 0.12) !important;
}

html[data-app-theme="white"] .mobile-menu .menu-item,

body.white-mode .mobile-menu .menu-item {
    color: #374151 !important;
}

html[data-app-theme="white"] .mobile-menu .menu-item .material-icons-round,

body.white-mode .mobile-menu .menu-item .material-icons-round {
    color: inherit !important;
}

html[data-app-theme="white"] .mobile-menu .menu-item:hover,

body.white-mode .mobile-menu .menu-item:hover,
html[data-app-theme="white"] .mobile-menu .menu-item:active,
body.white-mode .mobile-menu .menu-item:active,
html[data-app-theme="white"] .mobile-menu .menu-item.active,
body.white-mode .mobile-menu .menu-item.active {
    background: linear-gradient(135deg, rgba(255, 130, 92, 0.16), rgba(69, 214, 204, 0.14)) !important;
    color: #111827 !important;
}

html[data-app-theme="white"] .app-theme-switch,

body.white-mode .app-theme-switch {
    margin-top: 0.35rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 28px rgba(28, 37, 54, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.app-theme-switch {
    margin-top: 0.35rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    cursor: pointer;
}

.mobile-menu .app-theme-switch {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.app-theme-switch-copy {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.mobile-menu .app-theme-switch-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.app-theme-switch-copy .material-icons-round {
    font-size: 1rem;
}

.app-theme-switch-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.mobile-menu .app-theme-switch-text {
    flex: 1 1 auto;
}

.app-theme-switch-title {
    font-size: 0.96rem;
    font-weight: 600;
    color: inherit;
}

.app-theme-switch-note {
    font-size: 0.76rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.62);
}

html[data-app-theme="white"] .app-theme-switch-note,

body.white-mode .app-theme-switch-note {
    color: #7b879a;
}

.app-theme-toggle {
    position: relative;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
    cursor: pointer;
}

.mobile-menu .app-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.app-theme-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.app-theme-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: all 0.22s ease;
    cursor: pointer;
}

.app-theme-toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.app-theme-toggle:hover .app-theme-toggle-track {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.16);
}

.app-theme-toggle:hover .app-theme-toggle-track::after {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

.app-theme-toggle:active .app-theme-toggle-track::after {
    transform: translateX(1px) scale(0.96);
}

.app-theme-toggle input:checked + .app-theme-toggle-track {
    background: linear-gradient(135deg, #22c55e 0%, #14b8a6 100%);
    border-color: rgba(20, 184, 166, 0.18);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.24);
}

.app-theme-toggle input:checked + .app-theme-toggle-track::after {
    transform: translateX(20px);
}

.app-theme-toggle input:checked:hover + .app-theme-toggle-track {
    filter: saturate(1.05) brightness(1.02);
}

.app-theme-toggle input:checked:active + .app-theme-toggle-track::after {
    transform: translateX(20px) scale(0.96);
}

html[data-app-theme="white"] .app-theme-toggle-track,

body.white-mode .app-theme-toggle-track {
    background: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.12);
}

/* White-mode bottom nav — match the dark mode's compact mobile-finance polish:
   rounded 22px top corners, clean opaque surface, subtle border, orange active
   state, lifted central FAB with soft drop-shadow. */
html[data-app-theme="white"] .bottom-nav,
body.white-mode .bottom-nav {

    background: #ffffff !important;

    border-top: 1px solid rgba(17, 24, 39, 0.08) !important;

    border-radius: 22px 22px 0 0 !important;

    box-shadow:
        0 -8px 24px rgba(28, 37, 54, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;

    backdrop-filter: blur(18px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;

    padding: 0.35rem 0.15rem max(0.4rem, env(safe-area-inset-bottom)) !important;
}

html[data-app-theme="white"] .bottom-nav-item,
body.white-mode .bottom-nav-item {
    color: #7a8397 !important;
    min-height: 52px !important;
    padding: 0.3rem 0.1rem !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border-radius: 14px !important;
    transition: color 0.15s ease, background 0.15s ease !important;
}
html[data-app-theme="white"] .bottom-nav-item .material-icons-round,
body.white-mode .bottom-nav-item .material-icons-round {
    color: #7a8397 !important;
    font-size: 1.2rem !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}
html[data-app-theme="white"] .bottom-nav-item span:last-child,
body.white-mode .bottom-nav-item span:last-child {
    color: #7a8397 !important;
    font-weight: 500 !important;
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
}

html[data-app-theme="white"] .bottom-nav-item.active .material-icons-round,
body.white-mode .bottom-nav-item.active .material-icons-round,
html[data-app-theme="white"] .bottom-nav-item.active span:last-child,
body.white-mode .bottom-nav-item.active span:last-child {
    color: #ff7a45 !important;
}
html[data-app-theme="white"] .bottom-nav-item.active .material-icons-round,
body.white-mode .bottom-nav-item.active .material-icons-round {
    transform: translateY(-1px);
}

html[data-app-theme="white"] .bottom-nav-qr,
body.white-mode .bottom-nav-qr {
    transform: translateY(-8px) !important;
    gap: 0.18rem !important;
}

html[data-app-theme="white"] .bottom-nav-qr span:last-child,
body.white-mode .bottom-nav-qr span:last-child,
html[data-app-theme="white"] .bottom-nav-qr.active span:last-child,
body.white-mode .bottom-nav-qr.active span:last-child,
html[data-app-theme="white"] .bottom-nav-qr.scan-available span:last-child,
body.white-mode .bottom-nav-qr.scan-available span:last-child {
    color: #4b5563 !important;
    font-weight: 600 !important;
    font-size: 0.62rem !important;
    text-shadow: none !important;
}

html[data-app-theme="white"] .bottom-nav-qr .qr-fab-ring-outer,
body.white-mode .bottom-nav-qr .qr-fab-ring-outer {
    width: 56px !important;
    height: 56px !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] .bottom-nav-qr .qr-fab-btn,
body.white-mode .bottom-nav-qr .qr-fab-btn {
    width: 46px !important;
    height: 46px !important;
    background: #ffffff !important;
    color: #18181b !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 10px 22px rgba(28, 37, 54, 0.14), 0 2px 6px rgba(28, 37, 54, 0.06) !important;
    animation: none !important;
    filter: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

html[data-app-theme="white"] .bottom-nav-qr.scan-available .qr-fab-btn,
body.white-mode .bottom-nav-qr.scan-available .qr-fab-btn,
html[data-app-theme="white"] .bottom-nav-qr.active .qr-fab-btn,
body.white-mode .bottom-nav-qr.active .qr-fab-btn {
    background: linear-gradient(135deg, #ff824e 0%, #ffb347 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(255, 130, 92, 0.42), 0 2px 6px rgba(28, 37, 54, 0.08) !important;
}
html[data-app-theme="white"] .bottom-nav-qr.scan-available .qr-fab-btn .material-icons-round,
body.white-mode .bottom-nav-qr.scan-available .qr-fab-btn .material-icons-round,
html[data-app-theme="white"] .bottom-nav-qr.scan-available .qr-fab-btn .qr-fab-icon,
body.white-mode .bottom-nav-qr.scan-available .qr-fab-btn .qr-fab-icon,
html[data-app-theme="white"] .bottom-nav-qr.active .qr-fab-btn .material-icons-round,
body.white-mode .bottom-nav-qr.active .qr-fab-btn .material-icons-round,
html[data-app-theme="white"] .bottom-nav-qr.active .qr-fab-btn .qr-fab-icon,
body.white-mode .bottom-nav-qr.active .qr-fab-btn .qr-fab-icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
html[data-app-theme="white"] .bottom-nav-qr.scan-available .qr-fab-ring-outer,
body.white-mode .bottom-nav-qr.scan-available .qr-fab-ring-outer {
    background: transparent !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] .bottom-nav-qr:hover .qr-fab-btn,
body.white-mode .bottom-nav-qr:hover .qr-fab-btn {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(28, 37, 54, 0.18), 0 2px 6px rgba(28, 37, 54, 0.08) !important;
}
html[data-app-theme="white"] .bottom-nav-qr.scan-available:hover .qr-fab-btn,
body.white-mode .bottom-nav-qr.scan-available:hover .qr-fab-btn,
html[data-app-theme="white"] .bottom-nav-qr.active:hover .qr-fab-btn,
body.white-mode .bottom-nav-qr.active:hover .qr-fab-btn {
    box-shadow: 0 14px 30px rgba(255, 130, 92, 0.52), 0 2px 6px rgba(28, 37, 54, 0.08) !important;
}

/* Class-based colored icon discs for every quick-action utility tile in white
   mode. Class selectors are stable when the DOM order shifts (legacy nth-child
   rules below break the moment we add Wallet/Refer/Ranks). White text on a
   tinted disc, with a matching soft drop shadow. */
html[data-app-theme="white"] .quick-actions-grid .utility-shortcut-btn.action-wallet .material-icons-round,
body.white-mode .quick-actions-grid .utility-shortcut-btn.action-wallet .material-icons-round {
    background: linear-gradient(135deg, #ff9a4d 0%, #ffb347 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(255, 154, 77, 0.22) !important;
    border-color: transparent !important;
}
html[data-app-theme="white"] .quick-actions-grid .utility-shortcut-btn.action-earn .material-icons-round,
body.white-mode .quick-actions-grid .utility-shortcut-btn.action-earn .material-icons-round {
    background: linear-gradient(135deg, #ff9a4d 0%, #ffb347 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(255, 154, 77, 0.22) !important;
    border-color: transparent !important;
}
html[data-app-theme="white"] .quick-actions-grid .utility-shortcut-btn.action-gift .material-icons-round,
body.white-mode .quick-actions-grid .utility-shortcut-btn.action-gift .material-icons-round {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(139, 92, 246, 0.22) !important;
    border-color: transparent !important;
}
html[data-app-theme="white"] .quick-actions-grid .utility-shortcut-btn.action-recharge .material-icons-round,
body.white-mode .quick-actions-grid .utility-shortcut-btn.action-recharge .material-icons-round {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.22) !important;
    border-color: transparent !important;
}
html[data-app-theme="white"] .quick-actions-grid .utility-shortcut-btn.action-bills .material-icons-round,
body.white-mode .quick-actions-grid .utility-shortcut-btn.action-bills .material-icons-round {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.22) !important;
    border-color: transparent !important;
}
html[data-app-theme="white"] .quick-actions-grid .utility-shortcut-btn.action-refer .material-icons-round,
body.white-mode .quick-actions-grid .utility-shortcut-btn.action-refer .material-icons-round {
    background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(236, 72, 153, 0.22) !important;
    border-color: transparent !important;
}
html[data-app-theme="white"] .quick-actions-grid .utility-shortcut-btn.action-ranks .material-icons-round,
body.white-mode .quick-actions-grid .utility-shortcut-btn.action-ranks .material-icons-round {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.22) !important;
    border-color: transparent !important;
}
html[data-app-theme="white"] .quick-actions-grid .utility-shortcut-btn.action-utility-shortcut .material-icons-round,
body.white-mode .quick-actions-grid .utility-shortcut-btn.action-utility-shortcut .material-icons-round {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.22) !important;
    border-color: transparent !important;
}

html[data-app-theme="white"] .bottom-nav-qr .qr-fab-btn .material-icons-round,
body.white-mode .bottom-nav-qr .qr-fab-btn .material-icons-round,
html[data-app-theme="white"] .bottom-nav-qr .qr-fab-btn .qr-fab-icon,
body.white-mode .bottom-nav-qr .qr-fab-btn .qr-fab-icon {
    color: #18181b !important;
    fill: none !important;
    stroke: currentColor !important;
}

html[data-app-theme="white"] .bottom-nav-qr .qr-fab-ring-outer::before,
body.white-mode .bottom-nav-qr .qr-fab-ring-outer::before,
html[data-app-theme="white"] .bottom-nav-qr .qr-fab-ring-outer::after,
body.white-mode .bottom-nav-qr .qr-fab-ring-outer::after,
html[data-app-theme="white"] .bottom-nav-qr.active .qr-fab-ring-outer::before,
body.white-mode .bottom-nav-qr.active .qr-fab-ring-outer::before,
html[data-app-theme="white"] .bottom-nav-qr.active .qr-fab-ring-outer::after,
body.white-mode .bottom-nav-qr.active .qr-fab-ring-outer::after,
html[data-app-theme="white"] .bottom-nav-qr.scan-available .qr-fab-ring-outer::before,
body.white-mode .bottom-nav-qr.scan-available .qr-fab-ring-outer::before,
html[data-app-theme="white"] .bottom-nav-qr.scan-available .qr-fab-ring-outer::after,
body.white-mode .bottom-nav-qr.scan-available .qr-fab-ring-outer::after {
    content: none !important;
    display: none !important;
}

html[data-app-theme="white"] .glass-card,

body.white-mode .glass-card,
html[data-app-theme="white"] .wallet-hero,
body.white-mode .wallet-hero,
html[data-app-theme="white"] .wallet-action-card,
body.white-mode .wallet-action-card,
html[data-app-theme="white"] .info-box,
body.white-mode .info-box,
html[data-app-theme="white"] .transaction-item,
body.white-mode .transaction-item,
html[data-app-theme="white"] .method-card,
body.white-mode .method-card,
html[data-app-theme="white"] .backup-card,
body.white-mode .backup-card,
html[data-app-theme="white"] .form-card,
body.white-mode .form-card,
html[data-app-theme="white"] .sc-card,
body.white-mode .sc-card,
html[data-app-theme="white"] .modal-content,
body.white-mode .modal-content,
html[data-app-theme="white"] .backup-modal,
body.white-mode .backup-modal,
html[data-app-theme="white"] .settings-method-modal__dialog,
body.white-mode .settings-method-modal__dialog,
html[data-app-theme="white"] .official-verify-card,
body.white-mode .official-verify-card,
html[data-app-theme="white"] .faq-modern,
body.white-mode .faq-modern,
html[data-app-theme="white"] .faq-item,
body.white-mode .faq-item,
html[data-app-theme="white"] .support-card,
body.white-mode .support-card,
html[data-app-theme="white"] .leaderboard-card,
body.white-mode .leaderboard-card,
html[data-app-theme="white"] .table-container,
body.white-mode .table-container,
html[data-app-theme="white"] .transaction-card,
body.white-mode .transaction-card,
html[data-app-theme="white"] .history-card,
body.white-mode .history-card,
html[data-app-theme="white"] .ut-card,
body.white-mode .ut-card,
html[data-app-theme="white"] .ut-modal,
body.white-mode .ut-modal,
html[data-app-theme="white"] .promo-card,
body.white-mode .promo-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 18px 40px rgba(28, 37, 54, 0.08) !important;
    color: var(--text-main) !important;
    background-clip: padding-box !important;
    isolation: isolate !important;
}

html[data-app-theme="white"] .dashboard-hero,

body.white-mode .dashboard-hero,
html[data-app-theme="white"] .settings-header,
body.white-mode .settings-header,
html[data-app-theme="white"] .backup-head,
body.white-mode .backup-head,
html[data-app-theme="white"] .section-header,
body.white-mode .section-header {
    color: var(--text-main) !important;
}

html[data-app-theme="white"] .dashboard-hero,

body.white-mode .dashboard-hero{
    padding: 0.25rem 0 0.5rem !important;
    margin-bottom: 1rem !important;
}
html[data-app-theme="white"] .dashboard-hero .hero-text h1,
body.white-mode .dashboard-hero .hero-text h1{
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}
html[data-app-theme="white"] .dashboard-hero .hero-text p,
body.white-mode .dashboard-hero .hero-text p{
    font-size: 0.82rem !important;
}

html[data-app-theme="white"] .stat-sub-text,

body.white-mode .stat-sub-text,
html[data-app-theme="white"] .wallet-balance-label,
body.white-mode .wallet-balance-label,
html[data-app-theme="white"] .wallet-balance-sub,
body.white-mode .wallet-balance-sub,
html[data-app-theme="white"] .tx-date,
body.white-mode .tx-date,
html[data-app-theme="white"] .method-label,
body.white-mode .method-label,
html[data-app-theme="white"] .settings-subtitle,
body.white-mode .settings-subtitle,
html[data-app-theme="white"] .backup-subtitle,
body.white-mode .backup-subtitle,
html[data-app-theme="white"] .info-list,
body.white-mode .info-list,
html[data-app-theme="white"] .text-muted,
body.white-mode .text-muted,
html[data-app-theme="white"] .verification-badge,
body.white-mode .verification-badge {
    color: var(--text-muted);
}

html[data-app-theme="white"] .stat-main-value,

body.white-mode .stat-main-value,
html[data-app-theme="white"] .wallet-balance-amount,
body.white-mode .wallet-balance-amount,
html[data-app-theme="white"] .wallet-balance-label,
body.white-mode .wallet-balance-label,
html[data-app-theme="white"] .tx-title,
body.white-mode .tx-title,
html[data-app-theme="white"] .method-value,
body.white-mode .method-value,
html[data-app-theme="white"] .settings-title,
body.white-mode .settings-title,
html[data-app-theme="white"] .section-title,
body.white-mode .section-title,
html[data-app-theme="white"] .backup-title,
body.white-mode .backup-title,
html[data-app-theme="white"] .hero-text h1,
body.white-mode .hero-text h1 {
    color: var(--text-main) !important;
}

html[data-app-theme="white"] #withdrawModal .modal-header h3,

body.white-mode #withdrawModal .modal-header h3 {
    color: var(--text-main) !important;
}

html[data-app-theme="white"] .balance-visibility-toggle,

body.white-mode .balance-visibility-toggle,
html[data-app-theme="white"] .action-icon-btn,
body.white-mode .action-icon-btn,
html[data-app-theme="white"] .backup-modal-close,
body.white-mode .backup-modal-close,
html[data-app-theme="white"] .settings-method-modal__close,
body.white-mode .settings-method-modal__close {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #20242d !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 10px 24px rgba(28, 37, 54, 0.07) !important;
}

html[data-app-theme="white"] .btn-outline,

body.white-mode .btn-outline,
html[data-app-theme="white"] .sc-btn.sc-btn-outline,
body.white-mode .sc-btn.sc-btn-outline,
html[data-app-theme="white"] .settings-view-btn,
body.white-mode .settings-view-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #20242d !important;
    border-color: rgba(17, 24, 39, 0.1) !important;
    box-shadow: 0 10px 24px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .settings-view-btn.is-active,

body.white-mode .settings-view-btn.is-active,
html[data-app-theme="white"] .btn-outline:hover,
body.white-mode .btn-outline:hover,
html[data-app-theme="white"] .sc-btn.sc-btn-outline:hover,
body.white-mode .sc-btn.sc-btn-outline:hover {
    background: linear-gradient(135deg, rgba(255, 130, 92, 0.18), rgba(69, 214, 204, 0.15)) !important;
    color: #111827 !important;
}

html[data-app-theme="white"] .settings-view-switch,

body.white-mode .settings-view-switch,
html[data-app-theme="white"] .ut-rch-mode-switch,
body.white-mode .ut-rch-mode-switch {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    box-shadow: 0 12px 28px rgba(28, 37, 54, 0.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-app-theme="white"] .settings-view-btn,

body.white-mode .settings-view-btn,
html[data-app-theme="white"] .ut-rch-mode-btn,
body.white-mode .ut-rch-mode-btn {
    background: transparent !important;
    color: #667085 !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] .settings-view-btn:hover,

body.white-mode .settings-view-btn:hover,
html[data-app-theme="white"] .ut-rch-mode-btn:hover,
body.white-mode .ut-rch-mode-btn:hover {
    color: #111827 !important;
    background: rgba(255, 130, 92, 0.08) !important;
}

html[data-app-theme="white"] .settings-view-btn.is-active,

body.white-mode .settings-view-btn.is-active,
html[data-app-theme="white"] .ut-rch-mode-btn.is-active,
body.white-mode .ut-rch-mode-btn.is-active {
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 6px 14px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .settings-header,

body.white-mode .settings-header,
html[data-app-theme="white"] .backup-card,
body.white-mode .backup-card,
html[data-app-theme="white"] #payment-methods-section,
body.white-mode #payment-methods-section,
html[data-app-theme="white"] #wallet-backup-section,
body.white-mode #wallet-backup-section,
html[data-app-theme="white"] .methods-grid,
body.white-mode .methods-grid {
    background: transparent !important;
}

html[data-app-theme="white"] .sc-container,

body.white-mode .sc-container {
    background:
        radial-gradient(circle at top left, rgba(255, 184, 107, 0.10), transparent 26%),
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.10), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 255, 0.82)) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 24px 50px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .settings-header,

body.white-mode .settings-header {
    margin-bottom: 2.15rem !important;
}

html[data-app-theme="white"] .settings-title,

body.white-mode .settings-title {
    color: #111827 !important;
    letter-spacing: -0.03em !important;
}

html[data-app-theme="white"] .settings-subtitle,

body.white-mode .settings-subtitle {
    color: #667085 !important;
}

html[data-app-theme="white"] .sc-btn.sc-btn-primary,

body.white-mode .sc-btn.sc-btn-primary,
html[data-app-theme="white"] .promo-btn,
body.white-mode .promo-btn {
    background: linear-gradient(135deg, #b8ff63 0%, #d8ff79 100%) !important;
    color: #0f172a !important;
    border-color: rgba(98, 146, 32, 0.18) !important;
    box-shadow: 0 14px 28px rgba(184, 255, 99, 0.24) !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
}

html[data-app-theme="white"] .action-card,
html[data-app-theme="white"] .wallet-action-card,
html[data-app-theme="white"] .utility-shortcut-btn,
body.white-mode .action-card,
body.white-mode .wallet-action-card,
body.white-mode .utility-shortcut-btn {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    color: var(--text-main) !important;
    box-shadow: 0 16px 34px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .settings-add-method-btn,

body.white-mode .settings-add-method-btn {
    min-height: 44px !important;
    background: linear-gradient(135deg, #ff9a4d 0%, #ffc56b 100%) !important;
    color: #111827 !important;
    border-color: rgba(255, 154, 77, 0.18) !important;
    box-shadow: 0 16px 32px rgba(255, 154, 77, 0.24) !important;
}

html[data-app-theme="white"] .settings-add-method-btn:hover,

body.white-mode .settings-add-method-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(255, 154, 77, 0.28) !important;
}

html[data-app-theme="white"] .action-buy,
body.white-mode .action-buy {
    background: linear-gradient(135deg, #22c55e 0%, #0f9f63 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 30px rgba(15, 159, 99, 0.22) !important;
}

html[data-app-theme="white"] .action-sell,
body.white-mode .action-sell {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 30px rgba(249, 115, 22, 0.24) !important;
}

html[data-app-theme="white"] .stat-icon,

body.white-mode .stat-icon,
html[data-app-theme="white"] .action-icon-box,
body.white-mode .action-icon-box,
html[data-app-theme="white"] .method-icon-box,
body.white-mode .method-icon-box,
html[data-app-theme="white"] .tx-icon,
body.white-mode .tx-icon {
    border: 1.5px solid rgba(24, 24, 27, 0.9) !important;
    box-shadow: 4px 4px 0 rgba(24, 24, 27, 0.9) !important;
}

html[data-app-theme="white"] .icon-wallet,

/* nth-child icon rules removed — class-based selectors (.action-wallet,
   .action-earn, .action-gift, etc.) defined below handle these correctly
   and don't break when tile order changes. */
body.white-mode .icon-wallet,
html[data-app-theme="white"] .action-buy .material-icons-round,
body.white-mode .action-buy .material-icons-round,
html[data-app-theme="white"] .method-card-bank .method-icon-box,
body.white-mode .method-card-bank .method-icon-box {
    background: #8b5cf6 !important;
    color: #ffffff !important;
}

html[data-app-theme="white"] .icon-buy,

body.white-mode .icon-buy,
html[data-app-theme="white"] .action-sell .material-icons-round,
body.white-mode .action-sell .material-icons-round,
html[data-app-theme="white"] .tx-amount.positive + .tx-status,
body.white-mode .tx-amount.positive + .tx-status {
    color: #ffffff !important;
}

html[data-app-theme="white"] .icon-buy,

body.white-mode .icon-buy {
    background: #22c55e !important;
    color: #ffffff !important;
}

html[data-app-theme="white"] .icon-sell,

body.white-mode .icon-sell,
html[data-app-theme="white"] .tx-icon,
body.white-mode .tx-icon,
html[data-app-theme="white"] .method-card:not(.method-card-bank) .method-icon-box,
body.white-mode .method-card:not(.method-card-bank) .method-icon-box {
    background: #f97316 !important;
    color: #ffffff !important;
}

html[data-app-theme="white"] .action-card .material-icons-round,
html[data-app-theme="white"] .utility-shortcut-btn .material-icons-round,
html[data-app-theme="white"] .wallet-action-card .material-icons-round,
body.white-mode .action-card .material-icons-round,
body.white-mode .utility-shortcut-btn .material-icons-round,
body.white-mode .wallet-action-card .material-icons-round,
html[data-app-theme="white"] .method-icon-box .material-icons-round,
body.white-mode .method-icon-box .material-icons-round,
html[data-app-theme="white"] .tx-icon .material-icons-round,
body.white-mode .tx-icon .material-icons-round,
html[data-app-theme="white"] .stat-icon .material-icons-round,
body.white-mode .stat-icon .material-icons-round {
    color: #ffffff !important;
}

html[data-app-theme="white"] .quick-actions-grid .action-card,
html[data-app-theme="white"] .quick-actions-grid .action-card span,
html[data-app-theme="white"] .quick-actions-grid .action-card .material-icons-round,
html[data-app-theme="white"] .utility-shortcuts-grid .utility-shortcut-btn .material-icons-round,
body.white-mode .quick-actions-grid .action-card,
body.white-mode .quick-actions-grid .action-card span,
body.white-mode .quick-actions-grid .action-card .material-icons-round,
html[data-app-theme="white"] .dashboard-stats-grid .stat-icon .material-icons-round,
body.white-mode .dashboard-stats-grid .stat-icon .material-icons-round,
body.white-mode .utility-shortcuts-grid .utility-shortcut-btn .material-icons-round {
    color: #ffffff !important;
}

html[data-app-theme="white"] .quick-actions-grid .action-sell,

body.white-mode .quick-actions-grid .action-sell,
html[data-app-theme="white"] .quick-actions-grid .action-sell span,
body.white-mode .quick-actions-grid .action-sell span,
html[data-app-theme="white"] .quick-actions-grid .action-sell .material-icons-round,
body.white-mode .quick-actions-grid .action-sell .material-icons-round {
    color: #ffffff !important;
}

html[data-app-theme="white"] .quick-actions-grid .action-buy .material-icons-round,

body.white-mode .quick-actions-grid .action-buy .material-icons-round,
html[data-app-theme="white"] .quick-actions-grid .action-sell .material-icons-round,
body.white-mode .quick-actions-grid .action-sell .material-icons-round {
    background: transparent !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] .settings-view-switch,

body.white-mode .settings-view-switch {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 14px 30px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .settings-view-btn,

body.white-mode .settings-view-btn {
    color: #667085 !important;
}

html[data-app-theme="white"] .settings-view-btn.is-active,

body.white-mode .settings-view-btn.is-active {
    background: linear-gradient(180deg, #ffffff 0%, #fff8ef 100%) !important;
    color: #111827 !important;
    box-shadow: 0 8px 18px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .method-card,

body.white-mode .method-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96)) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 14px 28px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .method-card:hover,

body.white-mode .method-card:hover {
    background: linear-gradient(180deg, #ffffff 0%, #fff8ef 100%) !important;
    border-color: rgba(255, 154, 77, 0.22) !important;
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(28, 37, 54, 0.09) !important;
}

html[data-app-theme="white"] .method-card-bank,

body.white-mode .method-card-bank {
    border-color: rgba(255, 154, 77, 0.26) !important;
    box-shadow: 0 0 0 1px rgba(255, 154, 77, 0.10), 0 14px 28px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .method-icon-box,

body.white-mode .method-icon-box,
html[data-app-theme="white"] .method-card-bank .method-icon-box,
body.white-mode .method-card-bank .method-icon-box,
html[data-app-theme="white"] .method-card:not(.method-card-bank) .method-icon-box,
body.white-mode .method-card:not(.method-card-bank) .method-icon-box {
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    box-shadow: 0 8px 18px rgba(28, 37, 54, 0.10) !important;
}

html[data-app-theme="white"] .method-card-bank .method-icon-box,

body.white-mode .method-card-bank .method-icon-box {
    background: linear-gradient(135deg, #5ad6cf 0%, #91f0ea 100%) !important;
}

html[data-app-theme="white"] .method-card:not(.method-card-bank) .method-icon-box,

body.white-mode .method-card:not(.method-card-bank) .method-icon-box {
    background: linear-gradient(135deg, #b08cff 0%, #d8c2ff 100%) !important;
}

html[data-app-theme="white"] .action-icon-btn,

body.white-mode .action-icon-btn {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #475569 !important;
    box-shadow: 0 8px 18px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .action-icon-btn:hover,

body.white-mode .action-icon-btn:hover {
    background: #fff4e8 !important;
    color: #111827 !important;
    border-color: rgba(255, 154, 77, 0.18) !important;
}

html[data-app-theme="white"] .promo-card.bg-1,

body.white-mode .promo-card.bg-1 {
    background: linear-gradient(135deg, #ffcab1 0%, #fff0d4 100%) !important;
}

html[data-app-theme="white"] .promo-card.bg-2,

body.white-mode .promo-card.bg-2 {
    background: linear-gradient(135deg, #c8f7ff 0%, #e7fff4 100%) !important;
}

html[data-app-theme="white"] .promo-card.bg-3,

body.white-mode .promo-card.bg-3 {
    background: linear-gradient(135deg, #ffe6a5 0%, #fff6d4 100%) !important;
}

html[data-app-theme="white"] .promo-card.bg-4,

body.white-mode .promo-card.bg-4,
html[data-app-theme="white"] .promo-card.bg-telegram,
body.white-mode .promo-card.bg-telegram {
    background: linear-gradient(135deg, #e5dbff 0%, #f6efff 100%) !important;
}

html[data-app-theme="white"] .promo-title,

body.white-mode .promo-title,
html[data-app-theme="white"] .promo-desc,
body.white-mode .promo-desc,
html[data-app-theme="white"] .promo-btn,
body.white-mode .promo-btn {
    color: #111827 !important;
}

html[data-app-theme="white"] .feature-badge,

body.white-mode .feature-badge,
html[data-app-theme="white"] .verification-badge,
body.white-mode .verification-badge,
html[data-app-theme="white"] .stat-trend,
body.white-mode .stat-trend,
html[data-app-theme="white"] .tx-status,
body.white-mode .tx-status,
html[data-app-theme="white"] .badge-container .feature-badge,
body.white-mode .badge-container .feature-badge {
    background: #fff3eb !important;
    color: #a55222 !important;
    border-color: rgba(255, 154, 77, 0.14) !important;
}

html[data-app-theme="white"] .feature-badge-fastest,

body.white-mode .feature-badge-fastest {
    background: #fff1da !important;
    color: #9a6700 !important;
    border-color: rgba(245, 158, 11, 0.18) !important;
}

html[data-app-theme="white"] .tx-amount.positive,

body.white-mode .tx-amount.positive {
    color: #1ea672 !important;
}

html[data-app-theme="white"] .tx-amount.negative,

body.white-mode .tx-amount.negative {
    color: #ff4f7a !important;
}

html[data-app-theme="white"] .sc-input,

body.white-mode .sc-input,
html[data-app-theme="white"] select.sc-input,
body.white-mode select.sc-input,
html[data-app-theme="white"] textarea.sc-input,
body.white-mode textarea.sc-input,
html[data-app-theme="white"] .settings-select-input,
body.white-mode .settings-select-input,
html[data-app-theme="white"] input[type="text"],
body.white-mode input[type="text"],
html[data-app-theme="white"] input[type="number"],
body.white-mode input[type="number"],
html[data-app-theme="white"] input[type="email"],
body.white-mode input[type="email"],
html[data-app-theme="white"] input[type="password"],
body.white-mode input[type="password"],
html[data-app-theme="white"] input[type="tel"],
body.white-mode input[type="tel"],
html[data-app-theme="white"] input[type="search"],
body.white-mode input[type="search"],
html[data-app-theme="white"] input[type="date"],
body.white-mode input[type="date"],
html[data-app-theme="white"] input[type="datetime-local"],
body.white-mode input[type="datetime-local"],
html[data-app-theme="white"] select:not([class*="dropify"]),
body.white-mode select:not([class*="dropify"]),
html[data-app-theme="white"] textarea,
body.white-mode textarea {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #111827 !important;
    border-color: rgba(17, 24, 39, 0.12) !important;
}

html[data-app-theme="white"] .sc-label,

body.white-mode .sc-label,
html[data-app-theme="white"] label,
body.white-mode label,
html[data-app-theme="white"] .form-header,
body.white-mode .form-header,
html[data-app-theme="white"] .backup-modal-label,
body.white-mode .backup-modal-label,
html[data-app-theme="white"] .backup-modal-head h3,
body.white-mode .backup-modal-head h3 {
    color: #1f2937 !important;
}

html[data-app-theme="white"] .modal,

body.white-mode .modal,
html[data-app-theme="white"] .backup-modal-overlay,
body.white-mode .backup-modal-overlay,
html[data-app-theme="white"] .settings-method-modal.hidden + *,
body.white-mode .settings-method-modal.hidden + *,
html[data-app-theme="white"] .app-dialog-overlay,
body.white-mode .app-dialog-overlay {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-app-theme="white"] .backup-modal-overlay,

body.white-mode .backup-modal-overlay,
html[data-app-theme="white"] .settings-method-modal,
body.white-mode .settings-method-modal,
html[data-app-theme="white"] .modal,
body.white-mode .modal {
    background: rgba(248, 240, 233, 0.5) !important;
}

html[data-app-theme="white"] .settings-method-modal__head,

body.white-mode .settings-method-modal__head {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 244, 0.94)) !important;
    border-bottom-color: rgba(17, 24, 39, 0.08) !important;
}

html[data-app-theme="white"] .settings-method-modal__actions,

body.white-mode .settings-method-modal__actions {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 242, 0.98)) !important;
    border-top-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 -10px 24px rgba(28, 37, 54, 0.05) !important;
}

html[data-app-theme="white"] .settings-method-modal .sc-btn-outline,

body.white-mode .settings-method-modal .sc-btn-outline {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    color: #20242d !important;
}

html[data-app-theme="white"] .settings-method-modal .sc-btn-outline:hover,

body.white-mode .settings-method-modal .sc-btn-outline:hover {
    background: rgba(255, 130, 92, 0.08) !important;
}

html[data-app-theme="white"] .settings-method-modal .sc-input,

body.white-mode .settings-method-modal .sc-input {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(17, 24, 39, 0.1) !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .settings-method-modal .sc-input:focus,

body.white-mode .settings-method-modal .sc-input:focus {
    background: #ffffff !important;
    border-color: rgba(255, 143, 31, 0.3) !important;
    box-shadow: 0 0 0 4px rgba(255, 143, 31, 0.08) !important;
}

html[data-app-theme="white"] .settings-method-modal .sc-input::placeholder,

body.white-mode .settings-method-modal .sc-input::placeholder {
    color: #8b95a7 !important;
}

html[data-app-theme="white"] .app-dialog-card,

body.white-mode .app-dialog-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 252, 0.98)) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 24px 60px rgba(28, 37, 54, 0.12) !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .app-dialog-head,

body.white-mode .app-dialog-head {
    border-bottom-color: rgba(17, 24, 39, 0.08) !important;
}

html[data-app-theme="white"] .app-dialog-title,

body.white-mode .app-dialog-title {
    color: #141414 !important;
}

html[data-app-theme="white"] .app-dialog-text,

body.white-mode .app-dialog-text,
html[data-app-theme="white"] .app-dialog-list li,
body.white-mode .app-dialog-list li {
    color: #64748b !important;
}

html[data-app-theme="white"] .app-dialog-list li,

body.white-mode .app-dialog-list li {
    border-color: rgba(17, 24, 39, 0.08) !important;
    background: rgba(255, 255, 255, 0.86) !important;
}

html[data-app-theme="white"] .app-dialog-close,

body.white-mode .app-dialog-close {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #475569 !important;
}

html[data-app-theme="white"] .app-dialog-close:hover,

body.white-mode .app-dialog-close:hover {
    background: #fff4e8 !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .app-dialog-btn-secondary,

body.white-mode .app-dialog-btn-secondary {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #141414 !important;
    border-color: rgba(17, 24, 39, 0.12) !important;
}

html[data-app-theme="white"] .app-dialog-btn-secondary:hover,

body.white-mode .app-dialog-btn-secondary:hover {
    background: #fff4e8 !important;
}

html[data-app-theme="white"] .app-dialog-btn-danger,

body.white-mode .app-dialog-btn-danger {
    background: #ef2b2d !important;
    border-color: #ef2b2d !important;
    color: #ffffff !important;
}

html[data-app-theme="white"] .wallet-hero,

body.white-mode .wallet-hero {
    background: linear-gradient(145deg, #fff8ef 0%, #ffffff 55%, #f5fbff 100%) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 20px 42px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .info-box,

body.white-mode .info-box {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 16px 34px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .info-list li,

body.white-mode .info-list li {
    color: #718096 !important;
}

html[data-app-theme="white"] .info-list li strong,

body.white-mode .info-list li strong {
    color: #141414 !important;
}

html[data-app-theme="white"] .pagination-btn,

body.white-mode .pagination-btn,
html[data-app-theme="white"] .tab-trigger,
body.white-mode .tab-trigger,
html[data-app-theme="white"] .mobile-back-btn:hover,
body.white-mode .mobile-back-btn:hover {
    color: #111827 !important;
}

html[data-app-theme="white"] .market-pulse-section,

body.white-mode .market-pulse-section {
    background:
        radial-gradient(circle at top right, rgba(255, 183, 3, 0.16), transparent 32%),
        radial-gradient(circle at bottom left, rgba(69, 214, 204, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 22px 44px rgba(28, 37, 54, 0.08) !important;
    border-radius: 1rem !important;
}

html[data-app-theme="white"] .pulse-badge,

body.white-mode .pulse-badge {
    background: rgba(255, 114, 94, 0.14) !important;
    color: #ff5a3d !important;
    border-color: rgba(255, 114, 94, 0.22) !important;
    box-shadow: 0 10px 22px rgba(255, 114, 94, 0.16) !important;
    text-shadow: none !important;
}

html[data-app-theme="white"] .pulse-badge::after,

body.white-mode .pulse-badge::after,
html[data-app-theme="white"] .pulse-badge i,
body.white-mode .pulse-badge i {
    animation: none !important;
    filter: none !important;
}

html[data-app-theme="white"] .pulse-badge::after,

body.white-mode .pulse-badge::after {
    background: rgba(255, 114, 94, 0.18) !important;
}

html[data-app-theme="white"] .market-pulse-title,

body.white-mode .market-pulse-title {
    background: linear-gradient(135deg, #ffb703 0%, #ff8f1f 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

html[data-app-theme="white"] .market-pulse-subtitle,

body.white-mode .market-pulse-subtitle,
html[data-app-theme="white"] .stat-label,
body.white-mode .stat-label {
    color: #7b879a !important;
}

html[data-app-theme="white"] .pulse-stats-grid,

body.white-mode .pulse-stats-grid {
    background: linear-gradient(180deg, #fff9f1 0%, #f8fbff 100%) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

html[data-app-theme="white"] .stat-box:not(:last-child)::after,

body.white-mode .stat-box:not(:last-child)::after {
    background: rgba(17, 24, 39, 0.08) !important;
}

html[data-app-theme="white"] .stat-value,

body.white-mode .stat-value,
html[data-app-theme="white"] .text-success,
body.white-mode .text-success,
html[data-app-theme="white"] .text-primary,
body.white-mode .text-primary,
html[data-app-theme="white"] .text-warning,
body.white-mode .text-warning,
html[data-app-theme="white"] .text-info,
body.white-mode .text-info {
    color: #141414 !important;
}

html[data-app-theme="white"] .market-pulse-section .text-success,

body.white-mode .market-pulse-section .text-success {
    color: #168764 !important;
}

html[data-app-theme="white"] .market-pulse-section .text-primary,

body.white-mode .market-pulse-section .text-primary {
    color: #1d4ed8 !important;
}

html[data-app-theme="white"] .market-pulse-section .text-warning,

body.white-mode .market-pulse-section .text-warning {
    color: #c25b12 !important;
}

html[data-app-theme="white"] .market-pulse-section .text-info,

body.white-mode .market-pulse-section .text-info {
    color: #0f766e !important;
}

html[data-app-theme="white"] .recent-activity-card,

body.white-mode .recent-activity-card,
html[data-app-theme="white"] .recent-activity-card .table-responsive,
body.white-mode .recent-activity-card .table-responsive,
html[data-app-theme="white"] .recent-activity-card .custom-table,
body.white-mode .recent-activity-card .custom-table,
html[data-app-theme="white"] .desktop-table-wrapper,
body.white-mode .desktop-table-wrapper {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .recent-activity-card,

body.white-mode .recent-activity-card {
    border-radius: 1rem !important;
    box-shadow: 0 22px 44px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .recent-activity-card .table-responsive,

body.white-mode .recent-activity-card .table-responsive {
    border: 1px solid rgba(17, 24, 39, 0.06) !important;
    border-radius: 0.9rem !important;
    overflow: hidden !important;
}

html[data-app-theme="white"] .recent-activity-header .text-primary,

body.white-mode .recent-activity-header .text-primary {
    background: rgba(255, 130, 92, 0.08) !important;
    border: 1px solid rgba(255, 130, 92, 0.16) !important;
    color: #111827 !important;
}

html[data-app-theme="white"] .recent-activity-header .text-primary:hover,

body.white-mode .recent-activity-header .text-primary:hover {
    background: rgba(255, 130, 92, 0.14) !important;
    border-color: rgba(255, 130, 92, 0.22) !important;
}

html[data-app-theme="white"] .recent-activity-header h3,

body.white-mode .recent-activity-header h3,
html[data-app-theme="white"] .recent-activity-card .custom-table td,
body.white-mode .recent-activity-card .custom-table td,
html[data-app-theme="white"] .recent-activity-card .custom-table th,
body.white-mode .recent-activity-card .custom-table th,
html[data-app-theme="white"] .dashboard-history-title,
body.white-mode .dashboard-history-title,
html[data-app-theme="white"] .page-title,
body.white-mode .page-title,
html[data-app-theme="white"] .page-subtitle,
body.white-mode .page-subtitle {
    color: #141414 !important;
    -webkit-text-fill-color: initial !important;
}

html[data-app-theme="white"] .dashboard-history-item,

body.white-mode .dashboard-history-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98)) !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 14px 28px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .dashboard-history-date,

body.white-mode .dashboard-history-date {
    color: #7b879a !important;
}

html[data-app-theme="white"] .recent-activity-card .custom-table thead,

body.white-mode .recent-activity-card .custom-table thead,
html[data-app-theme="white"] .sc-table th,
body.white-mode .sc-table th {
    background: rgba(255, 130, 92, 0.08) !important;
}

html[data-app-theme="white"] .recent-activity-card .custom-table tr,

body.white-mode .recent-activity-card .custom-table tr,
html[data-app-theme="white"] .recent-activity-card .custom-table td,
body.white-mode .recent-activity-card .custom-table td,
html[data-app-theme="white"] .sc-table tr,
body.white-mode .sc-table tr,
html[data-app-theme="white"] .sc-table td,
body.white-mode .sc-table td {
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #141414 !important;
}

@media (max-width: 768px) {
    html[data-app-theme="white"] .recent-activity-card .custom-table tr,
    body.white-mode .recent-activity-card .custom-table tr {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98)) !important;
        border: 1px solid rgba(17, 24, 39, 0.08) !important;
        box-shadow: 0 14px 28px rgba(28, 37, 54, 0.06) !important;
    }

    html[data-app-theme="white"] .recent-activity-card .custom-table td,

    body.white-mode .recent-activity-card .custom-table td {
        border-bottom: 1px dashed rgba(17, 24, 39, 0.08) !important;
        color: #141414 !important;
    }

    html[data-app-theme="white"] .recent-activity-card .custom-table td::before,

    body.white-mode .recent-activity-card .custom-table td::before {
        color: #7b879a !important;
    }
}

html[data-app-theme="white"] .txn-item,

body.white-mode .txn-item,
html[data-app-theme="white"] .mobile-list .txn-item,
body.white-mode .mobile-list .txn-item,
html[data-app-theme="white"] .tw-bg-card,
body.white-mode .tw-bg-card {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #141414 !important;
    box-shadow: 0 16px 34px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .tw-text-foreground,

body.white-mode .tw-text-foreground,
html[data-app-theme="white"] .font-bold,
body.white-mode .font-bold,
html[data-app-theme="white"] .txn-item .tw-font-semibold,
body.white-mode .txn-item .tw-font-semibold,
html[data-app-theme="white"] .txn-item .tx-title,
body.white-mode .txn-item .tx-title,
html[data-app-theme="white"] .txn-item .tx-amount,
body.white-mode .txn-item .tx-amount {
    color: #141414 !important;
}

html[data-app-theme="white"] .tw-text-muted-foreground,

body.white-mode .tw-text-muted-foreground,
html[data-app-theme="white"] .text-muted,
body.white-mode .text-muted,
html[data-app-theme="white"] .search-icon,
body.white-mode .search-icon {
    color: #7b879a !important;
}

html[data-app-theme="white"] .shadcn-tabs-list,

body.white-mode .shadcn-tabs-list {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 12px 24px rgba(28, 37, 54, 0.05) !important;
}

html[data-app-theme="white"] .tab-trigger,

body.white-mode .tab-trigger {
    color: #6b7280 !important;
}

html[data-app-theme="white"] .tab-trigger:hover,

body.white-mode .tab-trigger:hover,
html[data-app-theme="white"] .tab-trigger.active,
body.white-mode .tab-trigger.active {
    background: linear-gradient(135deg, rgba(255, 130, 92, 0.16), rgba(69, 214, 204, 0.13)) !important;
    color: #141414 !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] .select-trigger,

body.white-mode .select-trigger,
html[data-app-theme="white"] .search-container .sc-input,
body.white-mode .search-container .sc-input,
html[data-app-theme="white"] .sc-input,
body.white-mode .sc-input {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(17, 24, 39, 0.1) !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .status-badge,

body.white-mode .status-badge,
html[data-app-theme="white"] .tw-ring-1,
body.white-mode .tw-ring-1 {
    box-shadow: none !important;
}

html[data-app-theme="white"] .status-badge.approved,

body.white-mode .status-badge.approved,
html[data-app-theme="white"] .tw-bg-emerald-500\/10,
body.white-mode .tw-bg-emerald-500\/10 {
    background: rgba(31, 191, 143, 0.12) !important;
    color: #168764 !important;
}

html[data-app-theme="white"] .status-badge.pending,

body.white-mode .status-badge.pending,
html[data-app-theme="white"] .tw-bg-amber-500\/10,
body.white-mode .tw-bg-amber-500\/10 {
    background: rgba(255, 183, 3, 0.14) !important;
    color: #9a6700 !important;
}

html[data-app-theme="white"] .text-amber-500,

body.white-mode .text-amber-500,
html[data-app-theme="white"] .text-warning,
body.white-mode .text-warning,
html[data-app-theme="white"] #sp-hd-status,
body.white-mode #sp-hd-status,
html[data-app-theme="white"] #sp-pending-estimate strong,
body.white-mode #sp-pending-estimate strong,
html[data-app-theme="white"] #sp-pending-estimate .material-icons-round,
body.white-mode #sp-pending-estimate .material-icons-round {
    color: #b45309 !important;
}

html[data-app-theme="white"] .status-badge.rejected,

body.white-mode .status-badge.rejected,
html[data-app-theme="white"] .tw-bg-rose-500\/10,
body.white-mode .tw-bg-rose-500\/10 {
    background: rgba(255, 79, 122, 0.12) !important;
    color: #c73359 !important;
}

html[data-app-theme="white"] .tw-text-emerald-400,

body.white-mode .tw-text-emerald-400 {
    color: #168764 !important;
}

html[data-app-theme="white"] .tw-text-rose-400,

body.white-mode .tw-text-rose-400,
html[data-app-theme="white"] .amount-negative,
body.white-mode .amount-negative {
    color: #c73359 !important;
}

html[data-app-theme="white"] .amount-positive,

body.white-mode .amount-positive {
    color: #168764 !important;
}

html[data-app-theme="white"] body,

body.white-mode {
    --ut-bg: #f6f8fc;
    --ut-card: #ffffff;
    --ut-card-soft: #fff7ef;
    --ut-border: rgba(17, 24, 39, 0.08);
    --ut-border-strong: rgba(255, 143, 31, 0.24);
    --ut-text: #141414;
    --ut-muted: #718096;
    --ut-subtle: #8b95a7;
    --ut-success: #18a76d;
    --ut-warning: #f5a524;
    --ut-danger: #e64d67;
    --ut-primary: #ff8f1f;
}

html[data-app-theme="white"] .ut-hero,

body.white-mode .ut-hero {
    background: linear-gradient(145deg, #fff8ef 0%, #ffffff 55%, #f5fbff 100%) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 20px 42px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .ut-hero::before,

body.white-mode .ut-hero::before {
    background: radial-gradient(circle, rgba(255, 143, 31, 0.18), transparent 62%) !important;
}

html[data-app-theme="white"] .ut-hero-badge,

body.white-mode .ut-hero-badge {
    background: rgba(255, 143, 31, 0.1) !important;
    border-color: rgba(255, 143, 31, 0.2) !important;
    color: #d96c00 !important;
}

html[data-app-theme="white"] .ut-hero h1,

body.white-mode .ut-hero h1,
html[data-app-theme="white"] .ut-section-header h3,
body.white-mode .ut-section-header h3,
html[data-app-theme="white"] .ut-order-info strong,
body.white-mode .ut-order-info strong,
html[data-app-theme="white"] .ut-action-label,
body.white-mode .ut-action-label,
html[data-app-theme="white"] .ut-modal-title,
body.white-mode .ut-modal-title,
html[data-app-theme="white"] .ut-brand-name,
body.white-mode .ut-brand-name,
html[data-app-theme="white"] .ut-brand-header-name,
body.white-mode .ut-brand-header-name {
    color: #141414 !important;
}

html[data-app-theme="white"] .ut-hero p,

body.white-mode .ut-hero p,
html[data-app-theme="white"] .ut-view-all,
body.white-mode .ut-view-all,
html[data-app-theme="white"] .ut-order-info span,
body.white-mode .ut-order-info span,
html[data-app-theme="white"] .ut-modal-sub,
body.white-mode .ut-modal-sub,
html[data-app-theme="white"] .ut-brand-header-sub,
body.white-mode .ut-brand-header-sub,
html[data-app-theme="white"] .ut-empty p,
body.white-mode .ut-empty p,
html[data-app-theme="white"] .ut-label,
body.white-mode .ut-label,
html[data-app-theme="white"] .ut-field span,
body.white-mode .ut-field span,
html[data-app-theme="white"] .ut-page-link,
body.white-mode .ut-page-link {
    color: #718096 !important;
}

html[data-app-theme="white"] .ut-ticker,

body.white-mode .ut-ticker,
html[data-app-theme="white"] .ut-balance-chip,
body.white-mode .ut-balance-chip,
html[data-app-theme="white"] .ut-debit-preview,
body.white-mode .ut-debit-preview,
html[data-app-theme="white"] .ut-info-note,
body.white-mode .ut-info-note,
html[data-app-theme="white"] .ut-plan-card,
body.white-mode .ut-plan-card,
html[data-app-theme="white"] .ut-voucher-copy-btn,
body.white-mode .ut-voucher-copy-btn,
html[data-app-theme="white"] .ut-voucher-copy-btn-small,
body.white-mode .ut-voucher-copy-btn-small {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #141414 !important;
    box-shadow: 0 12px 24px rgba(28, 37, 54, 0.05) !important;
}

html[data-app-theme="white"] .ut-modal-backdrop,

body.white-mode .ut-modal-backdrop {
    background: rgba(17, 24, 39, 0.42) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

html[data-app-theme="white"] .ut-modal-header,

body.white-mode .ut-modal-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 245, 0.94)) !important;
    border-bottom-color: rgba(17, 24, 39, 0.08) !important;
}

html[data-app-theme="white"] .ut-action-btn,

body.white-mode .ut-action-btn,
html[data-app-theme="white"] .ut-order-row,
body.white-mode .ut-order-row,
html[data-app-theme="white"] .ut-brand-tile,
body.white-mode .ut-brand-tile,
html[data-app-theme="white"] .ut-page-link,
body.white-mode .ut-page-link,
html[data-app-theme="white"] .ut-modal,
body.white-mode .ut-modal,
html[data-app-theme="white"] .ut-input,
body.white-mode .ut-input,
html[data-app-theme="white"] .ut-empty,
body.white-mode .ut-empty {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #141414 !important;
    box-shadow: 0 16px 34px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .ut-action-btn:hover,

body.white-mode .ut-action-btn:hover,
html[data-app-theme="white"] .ut-order-row:hover,
body.white-mode .ut-order-row:hover,
html[data-app-theme="white"] .ut-brand-tile:hover,
body.white-mode .ut-brand-tile:hover,
html[data-app-theme="white"] .ut-page-link:hover,
body.white-mode .ut-page-link:hover,
html[data-app-theme="white"] .ut-plan-card.selected,
body.white-mode .ut-plan-card.selected {
    background: #fff7ef !important;
    border-color: rgba(255, 143, 31, 0.22) !important;
}

html[data-app-theme="white"] .ut-modal-section--soft,

body.white-mode .ut-modal-section--soft {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 247, 238, 0.8)) !important;
    border-color: rgba(17, 24, 39, 0.07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

html[data-app-theme="white"] .ut-section-mini-head strong,

body.white-mode .ut-section-mini-head strong {
    color: #141414 !important;
}

html[data-app-theme="white"] .ut-section-mini-head span,

body.white-mode .ut-section-mini-head span {
    color: #718096 !important;
}

html[data-app-theme="white"] .ut-action-icon,

body.white-mode .ut-action-icon,
html[data-app-theme="white"] .ut-order-icon,
body.white-mode .ut-order-icon,
html[data-app-theme="white"] .ut-brand-logo,
body.white-mode .ut-brand-logo,
html[data-app-theme="white"] .ut-brand-header-logo,
body.white-mode .ut-brand-header-logo {
    border: 1.5px solid rgba(24, 24, 27, 0.9) !important;
    box-shadow: 4px 4px 0 rgba(24, 24, 27, 0.9) !important;
}

html[data-app-theme="white"] .ut-brand-logo.has-image,

body.white-mode .ut-brand-logo.has-image,
html[data-app-theme="white"] .ut-brand-header-logo.has-image,
body.white-mode .ut-brand-header-logo.has-image {
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 10px 22px rgba(28, 37, 54, 0.08) !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

html[data-app-theme="white"] .ut-brand-tile--other .ut-brand-logo,

body.white-mode .ut-brand-tile--other .ut-brand-logo,
html[data-app-theme="white"] .ut-brand-header-logo--other,
body.white-mode .ut-brand-header-logo--other {
    background: linear-gradient(135deg, #f4ebff, #ede9fe) !important;
    color: #6d28d9 !important;
    border: 1px solid rgba(124, 58, 237, 0.14) !important;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.12) !important;
}

html[data-app-theme="white"] .ut-brand-tile--other:hover,

body.white-mode .ut-brand-tile--other:hover {
    border-color: rgba(124, 58, 237, 0.2) !important;
    background: linear-gradient(180deg, #faf5ff, #fff7ed) !important;
}

html[data-app-theme="white"] .ut-action-btn:nth-child(1) .ut-action-icon,

body.white-mode .ut-action-btn:nth-child(1) .ut-action-icon,
html[data-app-theme="white"] .ut-order-row:nth-child(3n+1) .ut-order-icon,
body.white-mode .ut-order-row:nth-child(3n+1) .ut-order-icon {
    background: #4fd5cd !important;
}

html[data-app-theme="white"] .ut-action-btn:nth-child(2) .ut-action-icon,

body.white-mode .ut-action-btn:nth-child(2) .ut-action-icon,
html[data-app-theme="white"] .ut-order-row:nth-child(3n+2) .ut-order-icon,
body.white-mode .ut-order-row:nth-child(3n+2) .ut-order-icon {
    background: #ffe66b !important;
}

html[data-app-theme="white"] .ut-action-btn:nth-child(3) .ut-action-icon,

body.white-mode .ut-action-btn:nth-child(3) .ut-action-icon,
html[data-app-theme="white"] .ut-order-row:nth-child(3n) .ut-order-icon,
body.white-mode .ut-order-row:nth-child(3n) .ut-order-icon {
    background: #a78bfa !important;
}

html[data-app-theme="white"] .ut-action-icon .material-icons-round,

body.white-mode .ut-action-icon .material-icons-round,
html[data-app-theme="white"] .ut-order-icon .material-icons-round,
body.white-mode .ut-order-icon .material-icons-round,
html[data-app-theme="white"] .ut-brand-header-logo,
body.white-mode .ut-brand-header-logo,
html[data-app-theme="white"] .ut-brand-logo,
body.white-mode .ut-brand-logo {
    color: #0f172a !important;
}

html[data-app-theme="white"] .ut-btn.primary,

body.white-mode .ut-btn.primary {
    background: linear-gradient(135deg, #b8ff63 0%, #d8ff79 100%) !important;
    color: #0f172a !important;
    box-shadow: 0 14px 28px rgba(184, 255, 99, 0.24) !important;
}

html[data-app-theme="white"] .ut-btn.secondary,

body.white-mode .ut-btn.secondary {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #141414 !important;
    border-color: rgba(17, 24, 39, 0.1) !important;
}

html[data-app-theme="white"] .ut-btn-row,

body.white-mode .ut-btn-row {
    border-top-color: rgba(17, 24, 39, 0.08) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 252, 247, 0.96) 18%, rgba(255, 248, 240, 1)) !important;
    box-shadow: 0 -10px 24px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .ut-btn-row .ut-btn.primary,

body.white-mode .ut-btn-row .ut-btn.primary {
    background: linear-gradient(135deg, #b8ff63 0%, #d8ff79 100%) !important;
    color: #0f172a !important;
    box-shadow: 0 14px 28px rgba(184, 255, 99, 0.24) !important;
}

html[data-app-theme="white"] .ut-input,

body.white-mode .ut-input,
html[data-app-theme="white"] select.ut-input,
body.white-mode select.ut-input,
html[data-app-theme="white"] textarea.ut-input,
body.white-mode textarea.ut-input {
    color: #141414 !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

html[data-app-theme="white"] .ut-input::placeholder,

body.white-mode .ut-input::placeholder {
    color: #8b95a7 !important;
}

html[data-app-theme="white"] #rchLookupStatus,

body.white-mode #rchLookupStatus,
html[data-app-theme="white"] #rchManualHelp,
body.white-mode #rchManualHelp {
    color: #64748b !important;
}

html[data-app-theme="white"] .ut-debit-preview,

body.white-mode .ut-debit-preview {
    background: linear-gradient(135deg, #fff8ef 0%, #ffffff 100%) !important;
}

html[data-app-theme="white"] .ut-debit-preview strong,

body.white-mode .ut-debit-preview strong,
html[data-app-theme="white"] #giftDebitAmt,
body.white-mode #giftDebitAmt,
html[data-app-theme="white"] #rchDebitAmt,
body.white-mode #rchDebitAmt,
html[data-app-theme="white"] #billDebitAmt,
body.white-mode #billDebitAmt {
    color: #ea6a00 !important;
}

html[data-app-theme="white"] .ut-plan-list::-webkit-scrollbar-thumb,

body.white-mode .ut-plan-list::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.38) !important;
}

html[data-app-theme="white"] .ut-plan-card,

body.white-mode .ut-plan-card {
    background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 10px 20px rgba(28, 37, 54, 0.05) !important;
}

html[data-app-theme="white"] .ut-plan-card:hover,

body.white-mode .ut-plan-card:hover {
    border-color: rgba(255, 143, 31, 0.24) !important;
    box-shadow: 0 14px 28px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .ut-plan-card.selected,

body.white-mode .ut-plan-card.selected {
    background: linear-gradient(180deg, #fff5e8 0%, #fffdf8 100%) !important;
    border-color: rgba(255, 143, 31, 0.32) !important;
    box-shadow: 0 16px 30px rgba(255, 143, 31, 0.12) !important;
}

html[data-app-theme="white"] .ut-plan-amt-pill,

body.white-mode .ut-plan-amt-pill {
    background: linear-gradient(135deg, #141414 0%, #2f2f35 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(20, 20, 20, 0.14) !important;
}

html[data-app-theme="white"] .ut-plan-icon-tag,

body.white-mode .ut-plan-icon-tag {
    color: #596579 !important;
    font-weight: 600 !important;
}

html[data-app-theme="white"] .ut-plan-icon-tag .material-icons-round,

body.white-mode .ut-plan-icon-tag .material-icons-round {
    color: #ff8f1f !important;
}

html[data-app-theme="white"] .ut-plan-val-box,

body.white-mode .ut-plan-val-box {
    padding: 0.45rem 0.75rem !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 143, 31, 0.18) !important;
    background: rgba(255, 143, 31, 0.08) !important;
}

html[data-app-theme="white"] .ut-plan-val-lbl,

body.white-mode .ut-plan-val-lbl {
    color: #8a6a3d !important;
    font-weight: 700 !important;
}

html[data-app-theme="white"] .ut-plan-val-txt,

body.white-mode .ut-plan-val-txt {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

html[data-app-theme="white"] .ut-plan-sel-btn,

body.white-mode .ut-plan-sel-btn {
    border-color: rgba(17, 24, 39, 0.14) !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 6px 14px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .ut-plan-sel-btn:hover,

body.white-mode .ut-plan-sel-btn:hover {
    background: #fff4e8 !important;
    border-color: rgba(255, 143, 31, 0.22) !important;
    color: #d96c00 !important;
}

html[data-app-theme="white"] .ut-plan-card.selected .ut-plan-sel-btn,

body.white-mode .ut-plan-card.selected .ut-plan-sel-btn {
    background: linear-gradient(135deg, #ff9b42 0%, #ffb347 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(255, 143, 31, 0.24) !important;
}

html[data-app-theme="white"] .ut-plan-desc,

body.white-mode .ut-plan-desc {
    border-top-color: rgba(17, 24, 39, 0.12) !important;
    color: #6b7280 !important;
}

html[data-app-theme="white"] .ut-confirm-row span,

body.white-mode .ut-confirm-row span,
html[data-app-theme="white"] .ut-voucher-section-title,
body.white-mode .ut-voucher-section-title,
html[data-app-theme="white"] .ut-voucher-amount,
body.white-mode .ut-voucher-amount,
html[data-app-theme="white"] .ut-voucher-code-index,
body.white-mode .ut-voucher-code-index {
    color: #8b95a7 !important;
}

html[data-app-theme="white"] .ut-confirm-row strong,

body.white-mode .ut-confirm-row strong,
html[data-app-theme="white"] .ut-voucher-name,
body.white-mode .ut-voucher-name,
html[data-app-theme="white"] .ut-voucher-table-name,
body.white-mode .ut-voucher-table-name,
html[data-app-theme="white"] .ut-voucher-table-amount,
body.white-mode .ut-voucher-table-amount {
    color: #141414 !important;
}

html[data-app-theme="white"] .ut-confirm-divider,

body.white-mode .ut-confirm-divider,
html[data-app-theme="white"] .ut-voucher-table-head th,
body.white-mode .ut-voucher-table-head th,
html[data-app-theme="white"] .ut-voucher-table-row td,
body.white-mode .ut-voucher-table-row td {
    border-color: rgba(17, 24, 39, 0.08) !important;
}

html[data-app-theme="white"] .ut-voucher-card,

body.white-mode .ut-voucher-card,
html[data-app-theme="white"] .ut-voucher-table-shell,
body.white-mode .ut-voucher-table-shell {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 240, 0.94)) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 14px 30px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .ut-voucher-card-main,

body.white-mode .ut-voucher-card-main {
    background: transparent !important;
}

html[data-app-theme="white"] .ut-voucher-code,

body.white-mode .ut-voucher-code,
html[data-app-theme="white"] .ut-voucher-table-code,
body.white-mode .ut-voucher-table-code {
    color: #334155 !important;
}

html[data-app-theme="white"] .ut-voucher-code-box,

body.white-mode .ut-voucher-code-box {
    background: #fffaf5 !important;
    border-color: rgba(17, 24, 39, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

html[data-app-theme="white"] .ut-voucher-table-head th,

body.white-mode .ut-voucher-table-head th {
    color: #94a3b8 !important;
}

html[data-app-theme="white"] .ut-voucher-copy-btn-small,

body.white-mode .ut-voucher-copy-btn-small {
    background: #ffffff !important;
    border-color: rgba(17, 24, 39, 0.1) !important;
    color: #334155 !important;
    box-shadow: 0 8px 16px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .ut-voucher-copy-btn-small:hover,

body.white-mode .ut-voucher-copy-btn-small:hover {
    background: #fff4e8 !important;
    border-color: rgba(255, 143, 31, 0.18) !important;
    color: #d96c00 !important;
}

html[data-app-theme="white"] .ut-voucher-pending,

body.white-mode .ut-voucher-pending {
    background: linear-gradient(135deg, #fff7f2, #ffffff) !important;
    border-color: rgba(255, 143, 31, 0.14) !important;
    color: #718096 !important;
}

html[data-app-theme="white"] .ut-voucher-pending-icon,

body.white-mode .ut-voucher-pending-icon,
html[data-app-theme="white"] .ut-voucher-inline-titleicon,
body.white-mode .ut-voucher-inline-titleicon,
html[data-app-theme="white"] .ut-voucher-inline-count,
body.white-mode .ut-voucher-inline-count {
    color: #893ffc !important;
}

html[data-app-theme="white"] .ut-voucher-inline-title,

body.white-mode .ut-voucher-inline-title {
    color: #8b95a7 !important;
}

html[data-app-theme="white"] .ut-voucher-inline-count,

body.white-mode .ut-voucher-inline-count {
    background: rgba(137, 63, 252, 0.08) !important;
    border-color: rgba(137, 63, 252, 0.16) !important;
}

html[data-app-theme="white"] .ut-voucher-inline-card,

body.white-mode .ut-voucher-inline-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 240, 0.94)) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 14px 30px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .ut-voucher-inline-item.is-bordered,

body.white-mode .ut-voucher-inline-item.is-bordered {
    border-top-color: rgba(17, 24, 39, 0.08) !important;
}

html[data-app-theme="white"] .ut-voucher-inline-index,

body.white-mode .ut-voucher-inline-index {
    color: #94a3b8 !important;
}

html[data-app-theme="white"] .ut-voucher-inline-label,

body.white-mode .ut-voucher-inline-label {
    color: #141414 !important;
}

html[data-app-theme="white"] .ut-voucher-inline-amount,

body.white-mode .ut-voucher-inline-amount {
    color: #16a34a !important;
}

html[data-app-theme="white"] .ut-voucher-inline-code,

body.white-mode .ut-voucher-inline-code {
    background: #fffaf5 !important;
    border-color: rgba(17, 24, 39, 0.1) !important;
    color: #334155 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

html[data-app-theme="white"] .ut-voucher-inline-copy,

body.white-mode .ut-voucher-inline-copy {
    background: #ffffff !important;
    border-color: rgba(17, 24, 39, 0.1) !important;
    color: #64748b !important;
    box-shadow: 0 8px 16px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .ut-voucher-inline-copy:hover,

body.white-mode .ut-voucher-inline-copy:hover {
    background: #fff4e8 !important;
    border-color: rgba(255, 143, 31, 0.18) !important;
    color: #d96c00 !important;
}

html[data-app-theme="white"] .ut-modal-close,

body.white-mode .ut-modal-close {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #64748b !important;
    box-shadow: 0 8px 18px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .ut-modal-close:hover,

body.white-mode .ut-modal-close:hover {
    background: #fff1eb !important;
    border-color: rgba(255, 143, 31, 0.18) !important;
    color: #d96c00 !important;
}

html[data-app-theme="white"] .ut-balance-chip strong,

body.white-mode .ut-balance-chip strong,
html[data-app-theme="white"] .ut-order-meta strong,
body.white-mode .ut-order-meta strong,
html[data-app-theme="white"] .ut-brand-low,
body.white-mode .ut-brand-low {
    color: #141414 !important;
}

html[data-app-theme="white"] .ut-order-meta .ut-status,

body.white-mode .ut-order-meta .ut-status {
    font-weight: 800 !important;
}

html[data-app-theme="white"] .ut-status.pending,

body.white-mode .ut-status.pending {
    background: rgba(255, 183, 3, 0.14) !important;
    color: #9a6700 !important;
}

html[data-app-theme="white"] .ut-status.approved,

body.white-mode .ut-status.approved,
html[data-app-theme="white"] .ut-status.success,
body.white-mode .ut-status.success,
html[data-app-theme="white"] .ut-status.processing,
body.white-mode .ut-status.processing {
    background: rgba(31, 191, 143, 0.12) !important;
    color: #168764 !important;
}

html[data-app-theme="white"] .ut-status.rejected,

body.white-mode .ut-status.rejected {
    background: rgba(255, 79, 122, 0.12) !important;
    color: #c73359 !important;
}

html[data-app-theme="white"] .refer-hero,

body.white-mode .refer-hero {
    background:
        radial-gradient(circle at top left, rgba(255, 143, 31, 0.16), transparent 36%),
        radial-gradient(circle at bottom right, rgba(79, 213, 205, 0.15), transparent 34%),
        linear-gradient(180deg, #fff8ef 0%, #ffffff 58%, #f5fbff 100%) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 20px 42px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .hero-glow,

body.white-mode .hero-glow {
    opacity: 0.35 !important;
    filter: blur(70px) !important;
}

html[data-app-theme="white"] .glow-1,

body.white-mode .glow-1 {
    background: rgba(255, 143, 31, 0.22) !important;
}

html[data-app-theme="white"] .glow-2,

body.white-mode .glow-2 {
    background: rgba(79, 213, 205, 0.18) !important;
}

html[data-app-theme="white"] .bonus-tag,

body.white-mode .bonus-tag {
    background: linear-gradient(135deg, #ffb703 0%, #ff8f1f 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(255, 143, 31, 0.2) !important;
}

html[data-app-theme="white"] .refer-hero h1,

body.white-mode .refer-hero h1,
html[data-app-theme="white"] .copy-label,
body.white-mode .copy-label,
html[data-app-theme="white"] .history-section h3,
body.white-mode .history-section h3,
html[data-app-theme="white"] .friend-name,
body.white-mode .friend-name,
html[data-app-theme="white"] .share-btn,
body.white-mode .share-btn {
    color: #141414 !important;
}

html[data-app-theme="white"] .text-gradient-gold,

body.white-mode .text-gradient-gold {
    background: linear-gradient(135deg, #ffb703 0%, #ff8f1f 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html[data-app-theme="white"] .hero-subtext,

body.white-mode .hero-subtext,
html[data-app-theme="white"] .step-box,
body.white-mode .step-box,
html[data-app-theme="white"] .friend-date,
body.white-mode .friend-date,
html[data-app-theme="white"] .terms-content,
body.white-mode .terms-content,
html[data-app-theme="white"] .text-muted,
body.white-mode .text-muted {
    color: #718096 !important;
}

html[data-app-theme="white"] .step-arrow,

body.white-mode .step-arrow {
    color: rgba(17, 24, 39, 0.18) !important;
}

html[data-app-theme="white"] .step-icon,

body.white-mode .step-icon {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 12px 24px rgba(28, 37, 54, 0.06) !important;
    backdrop-filter: none !important;
}

html[data-app-theme="white"] .step-box:nth-child(1) .step-icon,

body.white-mode .step-box:nth-child(1) .step-icon {
    background: #4fd5cd !important;
}

html[data-app-theme="white"] .step-box:nth-child(3) .step-icon,

body.white-mode .step-box:nth-child(3) .step-icon {
    background: #ffe66b !important;
}

html[data-app-theme="white"] .step-box.highlight .step-icon,

body.white-mode .step-box.highlight .step-icon {
    background: #a78bfa !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #0f172a !important;
}

html[data-app-theme="white"] .step-icon .material-icons-round,

body.white-mode .step-icon .material-icons-round,
html[data-app-theme="white"] .step-box.highlight span,
body.white-mode .step-box.highlight span {
    color: #0f172a !important;
}

html[data-app-theme="white"] .stat-item,

body.white-mode .stat-item,
html[data-app-theme="white"] .friend-item,
body.white-mode .friend-item,
html[data-app-theme="white"] .input-wrapper .sc-input,
body.white-mode .input-wrapper .sc-input,
html[data-app-theme="white"] .share-btn,
body.white-mode .share-btn,
html[data-app-theme="white"] .term-bullet,
body.white-mode .term-bullet {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #141414 !important;
    box-shadow: 0 12px 24px rgba(28, 37, 54, 0.05) !important;
}

html[data-app-theme="white"] .stat-item,

body.white-mode .stat-item {
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
}

html[data-app-theme="white"] .copy-btn,

body.white-mode .copy-btn {
    background: linear-gradient(135deg, #ff8f1f 0%, #ffb703 100%) !important;
    color: #ffffff !important;
}

html[data-app-theme="white"] .share-btn,

body.white-mode .share-btn {
    background: linear-gradient(135deg, #f8fbff 0%, #fff8ef 100%) !important;
}

html[data-app-theme="white"] .history-section .status-badge.completed,

body.white-mode .history-section .status-badge.completed {
    background: rgba(31, 191, 143, 0.12) !important;
    color: #168764 !important;
}

html[data-app-theme="white"] .history-section .status-badge.pending,

body.white-mode .history-section .status-badge.pending {
    background: rgba(255, 183, 3, 0.14) !important;
    color: #9a6700 !important;
}

html[data-app-theme="white"] .term-bullet,

body.white-mode .term-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html[data-app-theme="white"] .support-hero,

body.white-mode .support-hero {
    background:
        radial-gradient(circle at top left, rgba(255, 143, 31, 0.16), transparent 34%),
        radial-gradient(circle at bottom right, rgba(79, 213, 205, 0.14), transparent 32%),
        linear-gradient(180deg, #fff8ef 0%, #ffffff 62%, #f5fbff 100%) !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 20px 42px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .sc-container,

body.white-mode .sc-container {
    background-color: transparent !important;
    background-image: none !important;
}

html[data-app-theme="white"] .support-grid,

body.white-mode .support-grid,
html[data-app-theme="white"] #support-official-verify,
body.white-mode #support-official-verify,
html[data-app-theme="white"] .faq-section,
body.white-mode .faq-section,
html[data-app-theme="white"] .official-verify-section,
body.white-mode .official-verify-section {
    background: transparent !important;
}

html[data-app-theme="white"] .support-title,

body.white-mode .support-title,
html[data-app-theme="white"] .card-title,
body.white-mode .card-title,
html[data-app-theme="white"] .official-verify-title,
body.white-mode .official-verify-title,
html[data-app-theme="white"] .faq-header,
body.white-mode .faq-header,
html[data-app-theme="white"] .faq-trigger,
body.white-mode .faq-trigger,
html[data-app-theme="white"] .verify-modal-title,
body.white-mode .verify-modal-title {
    color: #141414 !important;
}

html[data-app-theme="white"] .support-subtitle,

body.white-mode .support-subtitle,
html[data-app-theme="white"] .card-desc,
body.white-mode .card-desc,
html[data-app-theme="white"] .official-verify-copy,
body.white-mode .official-verify-copy,
html[data-app-theme="white"] .official-verify-note,
body.white-mode .official-verify-note,
html[data-app-theme="white"] .faq-content p,
body.white-mode .faq-content p,
html[data-app-theme="white"] .verify-modal-text,
body.white-mode .verify-modal-text,
html[data-app-theme="white"] .verify-modal-footnote p,
body.white-mode .verify-modal-footnote p {
    color: #718096 !important;
}

html[data-app-theme="white"] .support-card,

body.white-mode .support-card,
html[data-app-theme="white"] .official-verify-section .verify-card,
body.white-mode .official-verify-section .verify-card,
html[data-app-theme="white"] .faq-modern,
body.white-mode .faq-modern,
html[data-app-theme="white"] .faq-box,
body.white-mode .faq-box,
html[data-app-theme="white"] .verify-modal-card,
body.white-mode .verify-modal-card {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 16px 34px rgba(28, 37, 54, 0.06) !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .support-card:hover,

body.white-mode .support-card:hover,
html[data-app-theme="white"] .faq-box.active,
body.white-mode .faq-box.active {
    background: #fff7ef !important;
    border-color: rgba(255, 143, 31, 0.22) !important;
}

html[data-app-theme="white"] .promo-card,

body.white-mode .promo-card,
html[data-app-theme="white"] .support-card,
body.white-mode .support-card,
html[data-app-theme="white"] .faq-box,
body.white-mode .faq-box,
html[data-app-theme="white"] .official-verify-section .verify-card,
body.white-mode .official-verify-section .verify-card,
html[data-app-theme="white"] .sc-card,
body.white-mode .sc-card,
html[data-app-theme="white"] .glass-card,
body.white-mode .glass-card {
    overflow: hidden !important;
    border-radius: 0.75rem !important;
}

html[data-app-theme="white"] .payment-method-missing-card__title,

body.white-mode .payment-method-missing-card__title {
    color: #141414 !important;
}

html[data-app-theme="white"] .payment-method-missing-card__text,

body.white-mode .payment-method-missing-card__text {
    color: #6f7a8f !important;
}

html[data-app-theme="white"] .dashboard-stat-card,

body.white-mode .dashboard-stat-card {
    border-radius: 0.75rem !important;
}

html[data-app-theme="white"] .promo-container,

body.white-mode .promo-container,
html[data-app-theme="white"] .promo-slider,
body.white-mode .promo-slider,
html[data-app-theme="white"] .promo-card,
body.white-mode .promo-card {
    border-radius: 1rem !important;
}

html[data-app-theme="white"] .promo-card::before,

body.white-mode .promo-card::before,
html[data-app-theme="white"] .promo-card::after,
body.white-mode .promo-card::after,
html[data-app-theme="white"] .support-card::before,
body.white-mode .support-card::before,
html[data-app-theme="white"] .support-card::after,
body.white-mode .support-card::after,
html[data-app-theme="white"] .faq-box::before,
body.white-mode .faq-box::before,
html[data-app-theme="white"] .faq-box::after,
body.white-mode .faq-box::after {
    border-radius: inherit !important;
}

html[data-app-theme="white"] .icon-wrapper,

body.white-mode .icon-wrapper {
    border: 1.5px solid rgba(24, 24, 27, 0.9) !important;
    box-shadow: 4px 4px 0 rgba(24, 24, 27, 0.9) !important;
}

html[data-app-theme="white"] .support-card:nth-child(1) .icon-wrapper,

body.white-mode .support-card:nth-child(1) .icon-wrapper {
    background: #4fd5cd !important;
}

html[data-app-theme="white"] .support-card:nth-child(2) .icon-wrapper,

body.white-mode .support-card:nth-child(2) .icon-wrapper {
    background: #a78bfa !important;
}

html[data-app-theme="white"] .icon-wrapper .material-icons-round,

body.white-mode .icon-wrapper .material-icons-round,
html[data-app-theme="white"] .faq-trigger .material-icons-round,
body.white-mode .faq-trigger .material-icons-round,
html[data-app-theme="white"] .verify-arrow,
body.white-mode .verify-arrow,
html[data-app-theme="white"] .verify-modal-close .material-icons-round,
body.white-mode .verify-modal-close .material-icons-round,
html[data-app-theme="white"] .verify-modal-icon .material-icons-round,
body.white-mode .verify-modal-icon .material-icons-round {
    color: #0f172a !important;
}

html[data-app-theme="white"] .status-indicator,

body.white-mode .status-indicator {
    color: #4b5563 !important;
}

html[data-app-theme="white"] .status-dot,

body.white-mode .status-dot {
    background: #18a76d !important;
    box-shadow: 0 0 0 6px rgba(31, 191, 143, 0.12) !important;
}

html[data-app-theme="white"] .official-verify-eyebrow,

body.white-mode .official-verify-eyebrow {
    background: rgba(255, 143, 31, 0.1) !important;
    border-color: rgba(255, 143, 31, 0.2) !important;
    color: #d96c00 !important;
}

html[data-app-theme="white"] .official-verify-section .verify-select-trigger,

body.white-mode .official-verify-section .verify-select-trigger,
html[data-app-theme="white"] .official-verify-section .verify-search-input,
body.white-mode .official-verify-section .verify-search-input,
html[data-app-theme="white"] .official-verify-section .verify-select-menu,
body.white-mode .official-verify-section .verify-select-menu,
html[data-app-theme="white"] .official-verify-section .verify-form,
body.white-mode .official-verify-section .verify-form,
html[data-app-theme="white"] .verify-modal-btn,
body.white-mode .verify-modal-btn,
html[data-app-theme="white"] .verify-modal-close,
body.white-mode .verify-modal-close {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #141414 !important;
    box-shadow: 0 10px 24px rgba(28, 37, 54, 0.05) !important;
}

html[data-app-theme="white"] .official-verify-section .verify-search-btn,

body.white-mode .official-verify-section .verify-search-btn,
html[data-app-theme="white"] .verify-modal-btn,
body.white-mode .verify-modal-btn {
    background: linear-gradient(135deg, #b8ff63 0%, #d8ff79 100%) !important;
    color: #0f172a !important;
    border-color: rgba(98, 146, 32, 0.18) !important;
}

html[data-app-theme="white"] .official-verify-section .verify-selected,

body.white-mode .official-verify-section .verify-selected,
html[data-app-theme="white"] .official-verify-section .verify-option-name,
body.white-mode .official-verify-section .verify-option-name,
html[data-app-theme="white"] .official-verify-section .verify-search-input::placeholder,
body.white-mode .official-verify-section .verify-search-input::placeholder {
    color: #718096 !important;
}

html[data-app-theme="white"] .faq-trigger,

body.white-mode .faq-trigger {
    background: transparent !important;
}

html[data-app-theme="white"] .faq-box,

body.white-mode .faq-box {
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
}

html[data-app-theme="white"] .verify-modal-icon,

body.white-mode .verify-modal-icon {
    background: #fff7ef !important;
    border-color: rgba(255, 143, 31, 0.18) !important;
}

html[data-app-theme="white"] .official-verify-section,

body.white-mode .official-verify-section,
html[data-app-theme="white"] .leaderboard-list,
body.white-mode .leaderboard-list,
html[data-app-theme="white"] .faq-section,
body.white-mode .faq-section {
    background: transparent !important;
}

html[data-app-theme="white"] .month-badge,

body.white-mode .month-badge {
    background: rgba(255, 143, 31, 0.1) !important;
    color: #d96c00 !important;
    border-color: rgba(255, 143, 31, 0.18) !important;
}

html[data-app-theme="white"] .avatar-img,

body.white-mode .avatar-img {
    border-color: rgba(17, 24, 39, 0.08) !important;
    background: #ffffff !important;
    box-shadow: 0 12px 24px rgba(28, 37, 54, 0.08) !important;
}

html[data-app-theme="white"] .rank-badge,

body.white-mode .rank-badge {
    border-color: #ffffff !important;
}

html[data-app-theme="white"] .podium-info,

body.white-mode .podium-info,
html[data-app-theme="white"] .bg-glass,
body.white-mode .bg-glass {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 16px 34px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .rank-1 .podium-info,

body.white-mode .rank-1 .podium-info {
    background: linear-gradient(180deg, rgba(255, 183, 3, 0.18) 0%, #ffffff 100%) !important;
}

html[data-app-theme="white"] .rank-2 .podium-info,

body.white-mode .rank-2 .podium-info {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.18) 0%, #ffffff 100%) !important;
}

html[data-app-theme="white"] .rank-3 .podium-info,

body.white-mode .rank-3 .podium-info {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.16) 0%, #ffffff 100%) !important;
}

html[data-app-theme="white"] .podium-username,

body.white-mode .podium-username,
html[data-app-theme="white"] .list-user,
body.white-mode .list-user,
html[data-app-theme="white"] .list-vol span:first-child,
body.white-mode .list-vol span:first-child {
    color: #141414 !important;
}

html[data-app-theme="white"] .podium-volume,

body.white-mode .podium-volume,
html[data-app-theme="white"] .list-rank,
body.white-mode .list-rank {
    color: #718096 !important;
}

html[data-app-theme="white"] .reward-pill,

body.white-mode .reward-pill {
    background: #fff7ef !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .bg-glass:hover,

body.white-mode .bg-glass:hover {
    background: #fff7ef !important;
    border-color: rgba(255, 143, 31, 0.22) !important;
}

html[data-app-theme="white"] .sc-stepper,

body.white-mode .sc-stepper {
    isolation: isolate;
    align-items: flex-start;
    padding-top: 0.12rem;
}

html[data-app-theme="white"] .sc-stepper::before,

body.white-mode .sc-stepper::before {
    top: 1.12rem !important;
    left: 1rem !important;
    right: 1rem !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(90deg, rgba(79, 213, 205, 0.18) 0%, rgba(17, 24, 39, 0.1) 50%, rgba(255, 183, 3, 0.16) 100%) !important;
}

html[data-app-theme="white"] .sc-step,

body.white-mode .sc-step {
    background: transparent !important;
    padding: 0 !important;
    min-width: 4.25rem;
    gap: 0.42rem !important;
}

html[data-app-theme="white"] .sc-step-circle,

body.white-mode .sc-step-circle {
    background: #ffffff !important;
    border-color: rgba(17, 24, 39, 0.12) !important;
    color: #667085 !important;
    box-shadow: 0 8px 18px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .sc-step.active .sc-step-circle,

body.white-mode .sc-step.active .sc-step-circle {
    background: linear-gradient(135deg, #d9ff72 0%, #ffe06f 100%) !important;
    border-color: rgba(194, 201, 73, 0.2) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 22px rgba(201, 255, 102, 0.16) !important;
}

html[data-app-theme="white"] .sc-step-label,

body.white-mode .sc-step-label {
    color: #7b8798 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

html[data-app-theme="white"] .sc-step.active .sc-step-label,

body.white-mode .sc-step.active .sc-step-label {
    color: #141414 !important;
}

html[data-app-theme="white"] .sc-title,

body.white-mode .sc-title {
    background: linear-gradient(135deg, #141414 0%, #ff9a3c 78%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

html[data-app-theme="white"] .sc-subtitle,

body.white-mode .sc-subtitle {
    color: #64748b !important;
}

html[data-app-theme="white"] .live-rate-badge-red,

body.white-mode .live-rate-badge-red {
    background: linear-gradient(135deg, rgba(255, 239, 236, 0.98) 0%, rgba(255, 248, 245, 0.98) 100%) !important;
    border-color: rgba(255, 114, 94, 0.18) !important;
    box-shadow: 0 18px 32px rgba(255, 114, 94, 0.12) !important;
}

html[data-app-theme="white"] .live-rate-badge-red .rate-label,

body.white-mode .live-rate-badge-red .rate-label,
html[data-app-theme="white"] .live-rate-badge-red .live-badge-meta,
body.white-mode .live-rate-badge-red .live-badge-meta,
html[data-app-theme="white"] .live-rate-badge-red .live-badge-meta-small,
body.white-mode .live-rate-badge-red .live-badge-meta-small {
    color: #ff6f61 !important;
}

html[data-app-theme="white"] .live-rate-badge-red .rate-value,

body.white-mode .live-rate-badge-red .rate-value {
    color: #ef4444 !important;
}

html[data-app-theme="white"] .live-rate-badge-red .live-badge-icon,

body.white-mode .live-rate-badge-red .live-badge-icon {
    filter: none !important;
}

html[data-app-theme="white"] .details-box,

body.white-mode .details-box,
html[data-app-theme="white"] .sc-card-subtle,
body.white-mode .sc-card-subtle,
html[data-app-theme="white"] .qr-card,
body.white-mode .qr-card,
html[data-app-theme="white"] .qr-card-merged,
body.white-mode .qr-card-merged,
html[data-app-theme="white"] .payment-summary-card,
body.white-mode .payment-summary-card {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 18px 38px rgba(28, 37, 54, 0.06) !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .sc-card-subtle,

body.white-mode .sc-card-subtle,
html[data-app-theme="white"] .qr-card,
body.white-mode .qr-card,
html[data-app-theme="white"] .qr-card-merged,
body.white-mode .qr-card-merged,
html[data-app-theme="white"] .details-box,
body.white-mode .details-box {
    overflow: hidden !important;
    background-clip: padding-box !important;
}

html[data-app-theme="white"] .address-item,

body.white-mode .address-item {
    background: #fff7ef !important;
    border-color: rgba(255, 143, 31, 0.18) !important;
    color: #141414 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important;
}

html[data-app-theme="white"] .address-item:hover,

body.white-mode .address-item:hover {
    background: #fff1de !important;
    border-color: rgba(255, 143, 31, 0.26) !important;
}

html[data-app-theme="white"] .qr-card-label,

body.white-mode .qr-card-label,
html[data-app-theme="white"] .sc-card-subtle .text-secondary,
body.white-mode .sc-card-subtle .text-secondary,
html[data-app-theme="white"] .details-box .text-secondary,
body.white-mode .details-box .text-secondary,
html[data-app-theme="white"] .details-box .text-slate-400,
body.white-mode .details-box .text-slate-400,
html[data-app-theme="white"] .details-box .text-slate-500,
body.white-mode .details-box .text-slate-500 {
    color: #718096 !important;
}

html[data-app-theme="white"] .details-label,

body.white-mode .details-label,
html[data-app-theme="white"] .copy-hint,
body.white-mode .copy-hint,
html[data-app-theme="white"] .details-box .text-zinc-400,
body.white-mode .details-box .text-zinc-400,
html[data-app-theme="white"] .details-box .text-zinc-500,
body.white-mode .details-box .text-zinc-500,
html[data-app-theme="white"] .sc-card-subtle .text-zinc-400,
body.white-mode .sc-card-subtle .text-zinc-400,
html[data-app-theme="white"] .sc-card-subtle .text-zinc-500,
body.white-mode .sc-card-subtle .text-zinc-500,
html[data-app-theme="white"] .sc-card-subtle .text-zinc-300,
body.white-mode .sc-card-subtle .text-zinc-300,
html[data-app-theme="white"] .payment-summary-card .text-zinc-400,
body.white-mode .payment-summary-card .text-zinc-400,
html[data-app-theme="white"] .payment-summary-card .text-zinc-500,
body.white-mode .payment-summary-card .text-zinc-500,
html[data-app-theme="white"] .payment-summary-card .text-zinc-300,
body.white-mode .payment-summary-card .text-zinc-300 {
    color: #718096 !important;
}

html[data-app-theme="white"] .details-value,

body.white-mode .details-value,
html[data-app-theme="white"] .details-box h3,
body.white-mode .details-box h3,
html[data-app-theme="white"] .details-box .text-white,
body.white-mode .details-box .text-white,
html[data-app-theme="white"] .sc-card-subtle .text-white,
body.white-mode .sc-card-subtle .text-white,
html[data-app-theme="white"] .payment-summary-card .text-white,
body.white-mode .payment-summary-card .text-white,
html[data-app-theme="white"] .details-box .font-semibold,
body.white-mode .details-box .font-semibold,
html[data-app-theme="white"] .details-box .font-bold,
body.white-mode .details-box .font-bold,
html[data-app-theme="white"] .sc-card-subtle .font-semibold,
body.white-mode .sc-card-subtle .font-semibold,
html[data-app-theme="white"] .sc-card-subtle .font-bold,
body.white-mode .sc-card-subtle .font-bold,
html[data-app-theme="white"] .payment-summary-card .font-semibold,
body.white-mode .payment-summary-card .font-semibold,
html[data-app-theme="white"] .payment-summary-card .font-bold,
body.white-mode .payment-summary-card .font-bold {
    color: #141414 !important;
}

html[data-app-theme="white"] .details-box .text-emerald-500,

body.white-mode .details-box .text-emerald-500,
html[data-app-theme="white"] .sc-card-subtle .text-emerald-400,
body.white-mode .sc-card-subtle .text-emerald-400,
html[data-app-theme="white"] .sc-card-subtle .text-emerald-500,
body.white-mode .sc-card-subtle .text-emerald-500,
html[data-app-theme="white"] .payment-summary-card .text-emerald-500,
body.white-mode .payment-summary-card .text-emerald-500 {
    color: #168764 !important;
}

html[data-app-theme="white"] .details-box .bg-zinc-900\/50,

body.white-mode .details-box .bg-zinc-900\/50,
html[data-app-theme="white"] .details-box .bg-zinc-900\/30,
body.white-mode .details-box .bg-zinc-900\/30,
html[data-app-theme="white"] .sc-card-subtle .bg-zinc-900\/50,
body.white-mode .sc-card-subtle .bg-zinc-900\/50,
html[data-app-theme="white"] .sc-card-subtle .bg-zinc-900\/30,
body.white-mode .sc-card-subtle .bg-zinc-900\/30,
html[data-app-theme="white"] .payment-summary-card .bg-zinc-900\/50,
body.white-mode .payment-summary-card .bg-zinc-900\/50,
html[data-app-theme="white"] .payment-summary-card .bg-zinc-900\/30,
body.white-mode .payment-summary-card .bg-zinc-900\/30,
html[data-app-theme="white"] .bg-zinc-900\/50.details-box,
body.white-mode .bg-zinc-900\/50.details-box,
html[data-app-theme="white"] .bg-zinc-900\/50.payment-summary-card,
body.white-mode .bg-zinc-900\/50.payment-summary-card {
    background: #fff7ef !important;
    border-color: rgba(255, 143, 31, 0.14) !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .details-box .bg-zinc-800,

body.white-mode .details-box .bg-zinc-800,
html[data-app-theme="white"] .sc-card-subtle .bg-zinc-800,
body.white-mode .sc-card-subtle .bg-zinc-800,
html[data-app-theme="white"] .border-zinc-800.details-box,
body.white-mode .border-zinc-800.details-box,
html[data-app-theme="white"] .border-zinc-800.sc-card-subtle,
body.white-mode .border-zinc-800.sc-card-subtle,
html[data-app-theme="white"] .border-zinc-800.payment-summary-card,
body.white-mode .border-zinc-800.payment-summary-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
}

html[data-app-theme="white"] .details-box .border-zinc-800,

body.white-mode .details-box .border-zinc-800,
html[data-app-theme="white"] .details-box .border-zinc-700,
body.white-mode .details-box .border-zinc-700,
html[data-app-theme="white"] .details-box .border-zinc-600,
body.white-mode .details-box .border-zinc-600,
html[data-app-theme="white"] .sc-card-subtle .border-zinc-800,
body.white-mode .sc-card-subtle .border-zinc-800,
html[data-app-theme="white"] .sc-card-subtle .border-zinc-700,
body.white-mode .sc-card-subtle .border-zinc-700,
html[data-app-theme="white"] .sc-card-subtle .border-zinc-600,
body.white-mode .sc-card-subtle .border-zinc-600,
html[data-app-theme="white"] .payment-summary-card .border-zinc-800,
body.white-mode .payment-summary-card .border-zinc-800,
html[data-app-theme="white"] .payment-summary-card .border-zinc-700,
body.white-mode .payment-summary-card .border-zinc-700,
html[data-app-theme="white"] .payment-summary-card .border-zinc-600,
body.white-mode .payment-summary-card .border-zinc-600 {
    border-color: rgba(17, 24, 39, 0.12) !important;
}

html[data-app-theme="white"] .details-box .bg-white,

body.white-mode .details-box .bg-white,
html[data-app-theme="white"] .sc-card-subtle .bg-white,
body.white-mode .sc-card-subtle .bg-white,
html[data-app-theme="white"] .payment-summary-card .bg-white,
body.white-mode .payment-summary-card .bg-white {
    background: #ffffff !important;
}

html[data-app-theme="white"] .sc-card-subtle input[type="checkbox"],

body.white-mode .sc-card-subtle input[type="checkbox"],
html[data-app-theme="white"] .details-box input[type="checkbox"],
body.white-mode .details-box input[type="checkbox"],
html[data-app-theme="white"] .payment-summary-card input[type="checkbox"],
body.white-mode .payment-summary-card input[type="checkbox"] {
    background: #ffffff !important;
    border-color: rgba(17, 24, 39, 0.22) !important;
}

html[data-app-theme="white"] .sc-card-subtle .sc-btn-outline.text-white,

body.white-mode .sc-card-subtle .sc-btn-outline.text-white,
html[data-app-theme="white"] .details-box .sc-btn-outline.text-white,
body.white-mode .details-box .sc-btn-outline.text-white,
html[data-app-theme="white"] .payment-summary-card .sc-btn-outline.text-white,
body.white-mode .payment-summary-card .sc-btn-outline.text-white {
    color: #141414 !important;
    border-color: rgba(17, 24, 39, 0.12) !important;
    background: rgba(255, 255, 255, 0.96) !important;
}

html[data-app-theme="white"] .sc-card-subtle .sc-btn-outline.text-white:hover,

body.white-mode .sc-card-subtle .sc-btn-outline.text-white:hover,
html[data-app-theme="white"] .details-box .sc-btn-outline.text-white:hover,
body.white-mode .details-box .sc-btn-outline.text-white:hover,
html[data-app-theme="white"] .payment-summary-card .sc-btn-outline.text-white:hover,
body.white-mode .payment-summary-card .sc-btn-outline.text-white:hover {
    background: #fff4e8 !important;
}

html[data-app-theme="white"] .amount-copy-btn,

body.white-mode .amount-copy-btn {
    background: rgba(255, 183, 3, 0.12) !important;
    border-color: rgba(255, 183, 3, 0.18) !important;
    color: #9a6700 !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] .amount-copy-btn:hover,

body.white-mode .amount-copy-btn:hover {
    background: rgba(255, 183, 3, 0.18) !important;
    border-color: rgba(255, 183, 3, 0.24) !important;
}

html[data-app-theme="white"] #active-session-box,

body.white-mode #active-session-box {
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 16px 34px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] #active-session-line,

body.white-mode #active-session-line,
html[data-app-theme="white"] #active-session-subtext,
body.white-mode #active-session-subtext {
    color: #718096 !important;
}

html[data-app-theme="white"] #active-session-text,

body.white-mode #active-session-text {
    color: #141414 !important;
}

html[data-app-theme="white"] #active-session-line > span:first-child,

body.white-mode #active-session-line > span:first-child {
    color: #b45309 !important;
}

html[data-app-theme="white"] #active-session-line > span:nth-child(2),

body.white-mode #active-session-line > span:nth-child(2),
html[data-app-theme="white"] #active-session-line > span:nth-child(4),
body.white-mode #active-session-line > span:nth-child(4) {
    color: rgba(17, 24, 39, 0.18) !important;
}

html[data-app-theme="white"] #cancel-active-session-btn,

body.white-mode #cancel-active-session-btn {
    background: rgba(255, 95, 86, 0.12) !important;
    border-color: rgba(255, 95, 86, 0.18) !important;
    color: #ef4444 !important;
}

html[data-app-theme="white"] .wallet-hero .wallet-balance-label-row,

body.white-mode .wallet-hero .wallet-balance-label-row,
html[data-app-theme="white"] .wallet-hero .wallet-balance-label,
body.white-mode .wallet-hero .wallet-balance-label,
html[data-app-theme="white"] .wallet-hero .wallet-balance-amount,
body.white-mode .wallet-hero .wallet-balance-amount,
html[data-app-theme="white"] .wallet-hero .wallet-balance-sub,
body.white-mode .wallet-hero .wallet-balance-sub {
    text-shadow: none !important;
}

html[data-app-theme="white"] .wallet-balance-sub,

body.white-mode .wallet-balance-sub {
    background: #eef2f7 !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: #667085 !important;
}

html[data-app-theme="white"] .wallet-balance-sub span[style],

body.white-mode .wallet-balance-sub span[style] {
    color: #d97706 !important;
}

html[data-app-theme="white"] .info-title,

body.white-mode .info-title,
html[data-app-theme="white"] .info-title .material-icons-round,
body.white-mode .info-title .material-icons-round,
html[data-app-theme="white"] .action-label,
body.white-mode .action-label,
html[data-app-theme="white"] .tx-title,
body.white-mode .tx-title,
html[data-app-theme="white"] .section-title,
body.white-mode .section-title {
    color: #141414 !important;
}

html[data-app-theme="white"] .info-title .material-icons-round,

body.white-mode .info-title .material-icons-round {
    color: #ff8f1f !important;
}

html[data-app-theme="white"] .info-list li::before,

body.white-mode .info-list li::before {
    color: #ff8f1f !important;
}

html[data-app-theme="white"] .wallet-action-card.disabled,

body.white-mode .wallet-action-card.disabled {
    background: rgba(248, 250, 252, 0.96) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    opacity: 0.82 !important;
}

html[data-app-theme="white"] .wallet-action-card.disabled .action-icon-box,

body.white-mode .wallet-action-card.disabled .action-icon-box {
    background: #e5e7eb !important;
    color: #64748b !important;
}

html[data-app-theme="white"] .wallet-action-card.disabled .material-icons-round,

body.white-mode .wallet-action-card.disabled .material-icons-round,
html[data-app-theme="white"] .wallet-action-card.disabled .action-label,
body.white-mode .wallet-action-card.disabled .action-label {
    color: #64748b !important;
}

html[data-app-theme="white"] .transaction-item,

body.white-mode .transaction-item {
    align-items: center !important;
}

html[data-app-theme="white"] .transaction-item .text-right,

body.white-mode .transaction-item .text-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.24rem;
}

html[data-app-theme="white"] .tx-date,

body.white-mode .tx-date {
    color: #7b8798 !important;
}

html[data-app-theme="white"] .tx-status,

body.white-mode .tx-status {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] #withdrawPaymentMethod,

body.white-mode #withdrawPaymentMethod,
html[data-app-theme="white"] #withdrawPaymentMethod:focus,
body.white-mode #withdrawPaymentMethod:focus,
html[data-app-theme="white"] #withdrawPaymentMethod option,
body.white-mode #withdrawPaymentMethod option {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #111827 !important;
    border-color: rgba(17, 24, 39, 0.12) !important;
}

html[data-app-theme="white"] body,

body.white-mode {
    --sp-bg: #f7f9fe;
    --sp-card: #ffffff;
    --sp-card-soft: #f6efe7;
    --sp-border: rgba(15, 23, 42, 0.08);
    --sp-border-strong: rgba(15, 23, 42, 0.14);
    --sp-text: #141414;
    --sp-muted: #6b7280;
    --sp-subtle: #8a94a6;
    --sp-success: #18a76d;
    --sp-warning: #d97706;
    --sp-danger: #ef4444;
}

html[data-app-theme="white"] .sp-card,

body.white-mode .sp-card,
html[data-app-theme="white"] .sp-modal,
body.white-mode .sp-modal {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(252, 248, 244, 0.98)) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 18px 40px rgba(28, 37, 54, 0.08), 0 2px 8px rgba(28, 37, 54, 0.04) !important;
    backdrop-filter: none !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .sp-main-btn,

body.white-mode .sp-main-btn {
    background: linear-gradient(135deg, #ff8a55 0%, #ffbd59 100%) !important;
    border-color: rgba(255, 132, 78, 0.18) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 32px rgba(255, 130, 78, 0.24) !important;
}

html[data-app-theme="white"] .sp-main-btn .material-icons-round,

body.white-mode .sp-main-btn .material-icons-round {
    color: #ffffff !important;
}

html[data-app-theme="white"] .sp-scan-hint,

body.white-mode .sp-scan-hint,
html[data-app-theme="white"] .sp-camera-hint,
body.white-mode .sp-camera-hint,
html[data-app-theme="white"] .sp-amount-usdt,
body.white-mode .sp-amount-usdt,
html[data-app-theme="white"] .sp-result-sub,
body.white-mode .sp-result-sub,
html[data-app-theme="white"] .sp-pending-label,
body.white-mode .sp-pending-label,
html[data-app-theme="white"] .sp-history-page-meta,
body.white-mode .sp-history-page-meta,
html[data-app-theme="white"] .sp-disabled-card p,
body.white-mode .sp-disabled-card p,
html[data-app-theme="white"] .sp-loading,
body.white-mode .sp-loading,
html[data-app-theme="white"] .sp-history-info .meta,
body.white-mode .sp-history-info .meta,
html[data-app-theme="white"] .sp-benefit-item p,
body.white-mode .sp-benefit-item p,
html[data-app-theme="white"] .sp-history-title,
body.white-mode .sp-history-title {
    color: #718096 !important;
}

html[data-app-theme="white"] .sp-scan-hint strong,

body.white-mode .sp-scan-hint strong,
html[data-app-theme="white"] .sp-result-title,
body.white-mode .sp-result-title,
html[data-app-theme="white"] .sp-pending-label strong,
body.white-mode .sp-pending-label strong,
html[data-app-theme="white"] .sp-benefit-item strong,
body.white-mode .sp-benefit-item strong,
html[data-app-theme="white"] .sp-history-info .amt,
body.white-mode .sp-history-info .amt,
html[data-app-theme="white"] .sp-history-title,
body.white-mode .sp-history-title,
html[data-app-theme="white"] .sp-disabled-card h3,
body.white-mode .sp-disabled-card h3,
html[data-app-theme="white"] .sp-modal-title,
body.white-mode .sp-modal-title,
html[data-app-theme="white"] .sp-amount-display .sp-big,
body.white-mode .sp-amount-display .sp-big,
html[data-app-theme="white"] .sp-amount-display .sp-sub,
body.white-mode .sp-amount-display .sp-sub {
    color: #141414 !important;
}

html[data-app-theme="white"] .sp-scan-step,

body.white-mode .sp-scan-step,
html[data-app-theme="white"] .sp-benefit-item,
body.white-mode .sp-benefit-item,
html[data-app-theme="white"] .sp-history-item,
body.white-mode .sp-history-item,
html[data-app-theme="white"] .sp-amount-display,
body.white-mode .sp-amount-display,
html[data-app-theme="white"] .sp-pending-notice,
body.white-mode .sp-pending-notice,
html[data-app-theme="white"] .sp-qr-decoded,
body.white-mode .sp-qr-decoded {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 245, 239, 0.96)) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: #141414 !important;
}

html[data-app-theme="white"] .sp-scan-step .material-icons-round,

body.white-mode .sp-scan-step .material-icons-round,
html[data-app-theme="white"] .sp-benefit-item .material-icons-round,
body.white-mode .sp-benefit-item .material-icons-round,
html[data-app-theme="white"] .sp-history-icon,
body.white-mode .sp-history-icon,
html[data-app-theme="white"] .sp-qr-decoded .material-icons-round,
body.white-mode .sp-qr-decoded .material-icons-round {
    border: none !important;
    box-shadow: 0 12px 24px rgba(28, 37, 54, 0.12) !important;
}

html[data-app-theme="white"] .sp-scan-step:nth-child(1) .material-icons-round,

body.white-mode .sp-scan-step:nth-child(1) .material-icons-round,
html[data-app-theme="white"] .sp-benefit-item:nth-child(1) .material-icons-round,
body.white-mode .sp-benefit-item:nth-child(1) .material-icons-round,
html[data-app-theme="white"] .sp-qr-decoded .material-icons-round,
body.white-mode .sp-qr-decoded .material-icons-round,
html[data-app-theme="white"] .sp-history-icon.success,
body.white-mode .sp-history-icon.success {
    background: linear-gradient(135deg, #1fcf8b 0%, #43dba4 100%) !important;
    color: #ffffff !important;
}

html[data-app-theme="white"] .sp-scan-step:nth-child(2) .material-icons-round,

body.white-mode .sp-scan-step:nth-child(2) .material-icons-round,
html[data-app-theme="white"] .sp-benefit-item:nth-child(2) .material-icons-round,
body.white-mode .sp-benefit-item:nth-child(2) .material-icons-round,
html[data-app-theme="white"] .sp-history-icon.pending,
body.white-mode .sp-history-icon.pending {
    background: linear-gradient(135deg, #f59e0b 0%, #f7b733 100%) !important;
    color: #ffffff !important;
}

html[data-app-theme="white"] .sp-scan-step:nth-child(3) .material-icons-round,

body.white-mode .sp-scan-step:nth-child(3) .material-icons-round,
html[data-app-theme="white"] .sp-benefit-item:nth-child(3) .material-icons-round,
body.white-mode .sp-benefit-item:nth-child(3) .material-icons-round,
html[data-app-theme="white"] .sp-history-icon.cancelled,
body.white-mode .sp-history-icon.cancelled {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
    color: #ffffff !important;
}

html[data-app-theme="white"] .sp-scan-step .material-icons-round,

body.white-mode .sp-scan-step .material-icons-round,
html[data-app-theme="white"] .sp-benefit-item .material-icons-round,
body.white-mode .sp-benefit-item .material-icons-round {
    width: 2.35rem;
    height: 2.35rem;
    min-width: 2.35rem;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem !important;
    margin-top: 0 !important;
}

html[data-app-theme="white"] .sp-history-item:hover,

body.white-mode .sp-history-item:hover,
html[data-app-theme="white"] .sp-benefit-item:hover,
body.white-mode .sp-benefit-item:hover,
html[data-app-theme="white"] .sp-scan-step:hover,
body.white-mode .sp-scan-step:hover {
    background: linear-gradient(180deg, #fffdfb, #f9efe3) !important;
    border-color: rgba(255, 143, 31, 0.18) !important;
}

html[data-app-theme="white"] .sp-history-wallet-date,

body.white-mode .sp-history-wallet-date,
html[data-app-theme="white"] #sp-hd-dates,
body.white-mode #sp-hd-dates,
html[data-app-theme="white"] #sp-hd-note.is-empty,
body.white-mode #sp-hd-note.is-empty {
    color: #7b8798 !important;
}

html[data-app-theme="white"] .sp-field-wrap,

body.white-mode .sp-field-wrap,
html[data-app-theme="white"] .sp-amount-input-wrap,
body.white-mode .sp-amount-input-wrap,
html[data-app-theme="white"] .sp-text-input,
body.white-mode .sp-text-input,
html[data-app-theme="white"] #sp-amount-inr,
body.white-mode #sp-amount-inr {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    color: #111827 !important;
}

html[data-app-theme="white"] .sp-field-icon,

body.white-mode .sp-field-icon,
html[data-app-theme="white"] .sp-amount-currency,
body.white-mode .sp-amount-currency,
html[data-app-theme="white"] .sp-amount-label,
body.white-mode .sp-amount-label {
    color: #7b8798 !important;
}

html[data-app-theme="white"] .sp-field-icon,

body.white-mode .sp-field-icon {
    color: #f97316 !important;
}

html[data-app-theme="white"] .sp-amount-usdt,

body.white-mode .sp-amount-usdt {
    color: #8a94a6 !important;
}

html[data-app-theme="white"] .sp-amount-usdt span,

body.white-mode .sp-amount-usdt span,
html[data-app-theme="white"] #sp-usdt-equiv,
body.white-mode #sp-usdt-equiv {
    color: #111827 !important;
    font-weight: 800 !important;
}

html[data-app-theme="white"] .sp-text-input::placeholder,

body.white-mode .sp-text-input::placeholder,
html[data-app-theme="white"] #sp-amount-inr::placeholder,
body.white-mode #sp-amount-inr::placeholder {
    color: #98a2b3 !important;
}

html[data-app-theme="white"] .sp-btn.sp-btn-outline,

body.white-mode .sp-btn.sp-btn-outline,
html[data-app-theme="white"] .sp-history-page-btn,
body.white-mode .sp-history-page-btn,
html[data-app-theme="white"] .sp-modal-close,
body.white-mode .sp-modal-close,
html[data-app-theme="white"] .sp-history-utr-copy,
body.white-mode .sp-history-utr-copy {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #20242d !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 10px 24px rgba(28, 37, 54, 0.06) !important;
}

html[data-app-theme="white"] .sp-btn.sp-btn-primary,

body.white-mode .sp-btn.sp-btn-primary {
    background: linear-gradient(135deg, #b7ff53 0%, #d1ff68 100%) !important;
    color: #0f172a !important;
    border-color: rgba(98, 146, 32, 0.18) !important;
    box-shadow: 0 14px 28px rgba(184, 255, 99, 0.24) !important;
}

html[data-app-theme="white"] .sp-balance-warn,

body.white-mode .sp-balance-warn {
    background: rgba(255, 95, 86, 0.08) !important;
    border-color: rgba(255, 95, 86, 0.16) !important;
    color: #ef4444 !important;
}

html[data-app-theme="white"] .sp-pending-notice .material-icons-round,

body.white-mode .sp-pending-notice .material-icons-round,
html[data-app-theme="white"] .sp-balance-warn .material-icons-round,
body.white-mode .sp-balance-warn .material-icons-round,
html[data-app-theme="white"] .sp-disabled-card .material-icons-round,
body.white-mode .sp-disabled-card .material-icons-round {
    color: inherit !important;
}

html[data-app-theme="white"] .sp-completed-pill,

body.white-mode .sp-completed-pill,
html[data-app-theme="white"] #sp-pending-estimate,
body.white-mode #sp-pending-estimate {
    background: linear-gradient(180deg, rgba(255, 237, 213, 0.9), rgba(255, 247, 237, 0.98)) !important;
    color: #ea580c !important;
    border-color: rgba(251, 146, 60, 0.26) !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] .sp-pending-notice,

body.white-mode .sp-pending-notice {
    color: #718096 !important;
}

html[data-app-theme="white"] .sp-timer-track,

body.white-mode .sp-timer-track {
    stroke: rgba(17, 24, 39, 0.08) !important;
}

html[data-app-theme="white"] .sp-timer-arc,

body.white-mode .sp-timer-arc {
    stroke: #ff8f1f !important;
}

html[data-app-theme="white"] .sp-timer-text,

body.white-mode .sp-timer-text {
    color: #141414 !important;
}

html[data-app-theme="white"] .sp-wifi-bar,

body.white-mode .sp-wifi-bar {
    background: linear-gradient(180deg, #4fd5cd 0%, #ffb347 100%) !important;
}

html[data-app-theme="white"] .sp-history-badge,

body.white-mode .sp-history-badge {
    background: linear-gradient(180deg, rgba(255, 237, 213, 0.9), rgba(255, 247, 237, 0.98)) !important;
    color: #d96c00 !important;
}

html[data-app-theme="white"] .sp-history-wallet-title,

body.white-mode .sp-history-wallet-title {
    color: #141414 !important;
}

html[data-app-theme="white"] .sp-history-wallet-amount.negative,

body.white-mode .sp-history-wallet-amount.negative {
    color: #ff4f75 !important;
}

html[data-app-theme="white"] .sp-history-wallet-status.success,

body.white-mode .sp-history-wallet-status.success {
    color: #f97316 !important;
}

html[data-app-theme="white"] .sp-history-wallet-status.pending,

body.white-mode .sp-history-wallet-status.pending {
    color: #d97706 !important;
}

html[data-app-theme="white"] .sp-history-wallet-status.rejected,

body.white-mode .sp-history-wallet-status.rejected,
html[data-app-theme="white"] .sp-history-wallet-status.cancelled,
body.white-mode .sp-history-wallet-status.cancelled {
    color: #ef4444 !important;
}

html[data-app-theme="white"] .sp-modal-overlay,

body.white-mode .sp-modal-overlay,
html[data-app-theme="white"] #sp-confirm-modal,
body.white-mode #sp-confirm-modal,
html[data-app-theme="white"] #sp-history-detail-modal,
body.white-mode #sp-history-detail-modal,
html[data-app-theme="white"] #sp-camera-perm-modal,
body.white-mode #sp-camera-perm-modal {
    background: rgba(248, 240, 233, 0.52) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

html[data-app-theme="white"] #sp-confirm-modal > div,

body.white-mode #sp-confirm-modal > div,
html[data-app-theme="white"] #sp-history-detail-modal > div,
body.white-mode #sp-history-detail-modal > div,
html[data-app-theme="white"] #sp-camera-perm-modal > div,
body.white-mode #sp-camera-perm-modal > div {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(252, 247, 242, 0.985)) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 24px 48px rgba(28, 37, 54, 0.12) !important;
}

html[data-app-theme="white"] #sp-confirm-modal h3,

body.white-mode #sp-confirm-modal h3,
html[data-app-theme="white"] #sp-history-detail-modal h3,
body.white-mode #sp-history-detail-modal h3,
html[data-app-theme="white"] #sp-camera-perm-modal .text-sm,
body.white-mode #sp-camera-perm-modal .text-sm,
html[data-app-theme="white"] #sp-confirm-modal .text-zinc-100,
body.white-mode #sp-confirm-modal .text-zinc-100,
html[data-app-theme="white"] #sp-history-detail-modal .text-zinc-100,
body.white-mode #sp-history-detail-modal .text-zinc-100,
html[data-app-theme="white"] #sp-camera-perm-modal .text-zinc-100,
body.white-mode #sp-camera-perm-modal .text-zinc-100 {
    color: #141414 !important;
}

html[data-app-theme="white"] #sp-confirm-modal .border-border,

body.white-mode #sp-confirm-modal .border-border,
html[data-app-theme="white"] #sp-history-detail-modal .border-border,
body.white-mode #sp-history-detail-modal .border-border,
html[data-app-theme="white"] #sp-camera-perm-modal .border-border,
body.white-mode #sp-camera-perm-modal .border-border {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-app-theme="white"] #sp-confirm-modal .p-3.border-b,

body.white-mode #sp-confirm-modal .p-3.border-b,
html[data-app-theme="white"] #sp-history-detail-modal .p-3.border-b,
body.white-mode #sp-history-detail-modal .p-3.border-b,
html[data-app-theme="white"] #sp-camera-perm-modal .border-b,
body.white-mode #sp-camera-perm-modal .border-b {
    background: linear-gradient(180deg, #f2ebe4, #ece4dc) !important;
}

html[data-app-theme="white"] #sp-confirm-modal #sp-modal-close,

body.white-mode #sp-confirm-modal #sp-modal-close,
html[data-app-theme="white"] #sp-history-detail-modal #sp-history-modal-close,
body.white-mode #sp-history-detail-modal #sp-history-modal-close,
html[data-app-theme="white"] #sp-camera-perm-modal #sp-camera-perm-close,
body.white-mode #sp-camera-perm-modal #sp-camera-perm-close {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.12) !important;
    color: #64748b !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] #sp-confirm-modal #sp-modal-close .material-icons-round,

body.white-mode #sp-confirm-modal #sp-modal-close .material-icons-round,
html[data-app-theme="white"] #sp-history-detail-modal #sp-history-modal-close .material-icons-round,
body.white-mode #sp-history-detail-modal #sp-history-modal-close .material-icons-round,
html[data-app-theme="white"] #sp-camera-perm-modal #sp-camera-perm-close .material-icons-round,
body.white-mode #sp-camera-perm-modal #sp-camera-perm-close .material-icons-round {
    color: #64748b !important;
}

html[data-app-theme="white"] #sp-confirm-modal .bg-card,

body.white-mode #sp-confirm-modal .bg-card,
html[data-app-theme="white"] #sp-confirm-modal .bg-primary\/5,
body.white-mode #sp-confirm-modal .bg-primary\/5,
html[data-app-theme="white"] #sp-history-detail-modal .bg-card,
body.white-mode #sp-history-detail-modal .bg-card,
html[data-app-theme="white"] #sp-history-detail-modal .bg-primary\/5,
body.white-mode #sp-history-detail-modal .bg-primary\/5,
html[data-app-theme="white"] #sp-history-detail-modal .bg-muted\/10,
body.white-mode #sp-history-detail-modal .bg-muted\/10,
html[data-app-theme="white"] #sp-confirm-modal .bg-muted\/10,
body.white-mode #sp-confirm-modal .bg-muted\/10,
html[data-app-theme="white"] #sp-success-utr-block,
body.white-mode #sp-success-utr-block,
html[data-app-theme="white"] #sp-success-meta > div,
body.white-mode #sp-success-meta > div {
    background: linear-gradient(180deg, #fff8f1, #fff3e7) !important;
    border-color: rgba(251, 146, 60, 0.16) !important;
    color: #141414 !important;
}

html[data-app-theme="white"] #paymentModalContent > .bg-primary\/5,

body.white-mode #paymentModalContent > .bg-primary\/5,
html[data-app-theme="white"] #historyModalContent > .bg-primary\/5,
body.white-mode #historyModalContent > .bg-primary\/5 {
    background: linear-gradient(180deg, #fff8f1, #fff3e7) !important;
    border-color: rgba(251, 146, 60, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html[data-app-theme="white"] #sp-hd-summary,

body.white-mode #sp-hd-summary {
    background: linear-gradient(180deg, #fff8f1, #fff3e7) !important;
    border-color: rgba(251, 146, 60, 0.22) !important;
}

html[data-app-theme="white"] .sp-hd-info-card,

body.white-mode .sp-hd-info-card,
html[data-app-theme="white"] .sp-hd-note-card,
body.white-mode .sp-hd-note-card {
    background: linear-gradient(180deg, #fffdfa, #fff6ee) !important;
    border-color: rgba(251, 146, 60, 0.14) !important;
}

html[data-app-theme="white"] .sp-hd-status-pill.is-success,

body.white-mode .sp-hd-status-pill.is-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #0f9f6e !important;
}

html[data-app-theme="white"] .sp-hd-status-pill.is-pending,

body.white-mode .sp-hd-status-pill.is-pending {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
}

html[data-app-theme="white"] .sp-hd-status-pill.is-rejected,

body.white-mode .sp-hd-status-pill.is-rejected,
html[data-app-theme="white"] .sp-hd-status-pill.is-cancelled,
body.white-mode .sp-hd-status-pill.is-cancelled {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
}

html[data-app-theme="white"] #sp-hd-usdt,

body.white-mode #sp-hd-usdt,
html[data-app-theme="white"] #sp-hd-amount,
body.white-mode #sp-hd-amount {
    color: #111827 !important;
}

html[data-app-theme="white"] #paymentModalContent h4,

body.white-mode #paymentModalContent h4,
html[data-app-theme="white"] #historyModalContent h4,
body.white-mode #historyModalContent h4,
html[data-app-theme="white"] #paymentModalContent .uppercase,
body.white-mode #paymentModalContent .uppercase,
html[data-app-theme="white"] #historyModalContent .uppercase,
body.white-mode #historyModalContent .uppercase {
    color: #6b7280 !important;
}

html[data-app-theme="white"] #paymentModalContent .text-red-500,

body.white-mode #paymentModalContent .text-red-500,
html[data-app-theme="white"] #historyModalContent .text-red-500,
body.white-mode #historyModalContent .text-red-500 {
    color: #111827 !important;
}

html[data-app-theme="white"] #paymentModalContent .text-emerald-500,

body.white-mode #paymentModalContent .text-emerald-500,
html[data-app-theme="white"] #historyModalContent .text-emerald-500,
body.white-mode #historyModalContent .text-emerald-500,
html[data-app-theme="white"] #paymentModalContent .text-primary,
body.white-mode #paymentModalContent .text-primary,
html[data-app-theme="white"] #sp-success-screen .text-primary,
body.white-mode #sp-success-screen .text-primary {
    color: #ea580c !important;
}

html[data-app-theme="white"] #paymentModalContent .bg-emerald-500\/10,

body.white-mode #paymentModalContent .bg-emerald-500\/10,
html[data-app-theme="white"] #historyModalContent .bg-emerald-500\/10,
body.white-mode #historyModalContent .bg-emerald-500\/10 {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.16) !important;
    color: #15803d !important;
}

html[data-app-theme="white"] #sp-confirm-modal .text-muted-foreground,

body.white-mode #sp-confirm-modal .text-muted-foreground,
html[data-app-theme="white"] #sp-history-detail-modal .text-muted-foreground,
body.white-mode #sp-history-detail-modal .text-muted-foreground,
html[data-app-theme="white"] #sp-camera-perm-modal .text-zinc-300,
body.white-mode #sp-camera-perm-modal .text-zinc-300,
html[data-app-theme="white"] #sp-camera-perm-modal .text-zinc-200,
body.white-mode #sp-camera-perm-modal .text-zinc-200,
html[data-app-theme="white"] #sp-camera-perm-modal .text-zinc-100,
body.white-mode #sp-camera-perm-modal .text-zinc-100 {
    color: #718096 !important;
}

html[data-app-theme="white"] #sp-confirm-modal .bg-zinc-100,

body.white-mode #sp-confirm-modal .bg-zinc-100,
html[data-app-theme="white"] #sp-history-detail-modal #sp-history-modal-ok,
body.white-mode #sp-history-detail-modal #sp-history-modal-ok,
html[data-app-theme="white"] #sp-camera-open-settings,
body.white-mode #sp-camera-open-settings {
    background: linear-gradient(135deg, #b7ff53 0%, #d1ff68 100%) !important;
    color: #0f172a !important;
    border-color: rgba(98, 146, 32, 0.18) !important;
    box-shadow: 0 14px 28px rgba(184, 255, 99, 0.2) !important;
}

html[data-app-theme="white"] #sp-confirm-modal #sp-modal-edit,

body.white-mode #sp-confirm-modal #sp-modal-edit,
html[data-app-theme="white"] #sp-camera-perm-cancel,
body.white-mode #sp-camera-perm-cancel,
html[data-app-theme="white"] #sp-camera-perm-close,
body.white-mode #sp-camera-perm-close {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #20242d !important;
    border-color: rgba(17, 24, 39, 0.1) !important;
}

html[data-app-theme="white"] #sp-success-screen .sp-card,

body.white-mode #sp-success-screen .sp-card,
html[data-app-theme="white"] #sp-cancelled-screen .sp-card,
body.white-mode #sp-cancelled-screen .sp-card {
    background: linear-gradient(180deg, #ffffff, #fbf7f1) !important;
}

html[data-app-theme="white"] .sp-success-celebration,

body.white-mode .sp-success-celebration {
    filter: drop-shadow(0 14px 26px rgba(34, 197, 94, 0.18)) !important;
}

html[data-app-theme="white"] .sp-success-ring,

body.white-mode .sp-success-ring {
    stroke: #22c55e !important;
    fill: rgb(0 255 94 / 78%) !important;
}

html[data-app-theme="white"] .sp-success-check,

body.white-mode .sp-success-check {
    stroke: #ffffff !important;
}

html[data-app-theme="white"] .sp-result-title.success,

body.white-mode .sp-result-title.success {
    color: #141414 !important;
}

html[data-app-theme="white"] .sp-result-title.cancelled,

body.white-mode .sp-result-title.cancelled {
    color: #b91c1c !important;
}

html[data-app-theme="white"] #sp-success-msg,

body.white-mode #sp-success-msg,
html[data-app-theme="white"] #sp-cancelled-sub,
body.white-mode #sp-cancelled-sub {
    color: #7b8798 !important;
}

html[data-app-theme="white"] #sp-success-amount,

body.white-mode #sp-success-amount {
    color: #111827 !important;
}

html[data-app-theme="white"] #sp-success-utr-block .material-icons-round,

body.white-mode #sp-success-utr-block .material-icons-round,
html[data-app-theme="white"] #sp-success-meta .material-icons-round,
body.white-mode #sp-success-meta .material-icons-round,
html[data-app-theme="white"] #sp-confirm-modal h3 .material-icons-round,
body.white-mode #sp-confirm-modal h3 .material-icons-round,
html[data-app-theme="white"] #sp-camera-open-settings .material-icons-round,
body.white-mode #sp-camera-open-settings .material-icons-round {
    color: #ffffff !important;
}

html[data-app-theme="white"] #sp-success-utr-block > .material-icons-round,

body.white-mode #sp-success-utr-block > .material-icons-round,
html[data-app-theme="white"] #sp-confirm-modal h3 .material-icons-round,
body.white-mode #sp-confirm-modal h3 .material-icons-round,
html[data-app-theme="white"] #sp-camera-open-settings .material-icons-round,
body.white-mode #sp-camera-open-settings .material-icons-round {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.2);
}

html[data-app-theme="white"] #sp-success-utr-block button,

body.white-mode #sp-success-utr-block button,
html[data-app-theme="white"] #paymentModalContent button,
body.white-mode #paymentModalContent button,
html[data-app-theme="white"] #historyModalContent button,
body.white-mode #historyModalContent button,
html[data-app-theme="white"] #sp-camera-perm-modal button,
body.white-mode #sp-camera-perm-modal button {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

html[data-app-theme="white"] #sp-success-utr-block button:hover,

body.white-mode #sp-success-utr-block button:hover,
html[data-app-theme="white"] #paymentModalContent button:hover,
body.white-mode #paymentModalContent button:hover,
html[data-app-theme="white"] #historyModalContent button:hover,
body.white-mode #historyModalContent button:hover,
html[data-app-theme="white"] #sp-camera-perm-modal button:hover,
body.white-mode #sp-camera-perm-modal button:hover {
    transform: translateY(-1px);
}

html[data-app-theme="white"] #sp-success-utr-block button,

body.white-mode #sp-success-utr-block button {
    background: #1f2937 !important;
    border: 1px solid rgba(15, 23, 42, 0.04) !important;
    box-shadow: 0 12px 20px rgba(15, 23, 42, 0.12) !important;
}

html[data-app-theme="white"] #sp-success-utr-block button .material-icons-round,

body.white-mode #sp-success-utr-block button .material-icons-round {
    color: #ffffff !important;
    width: auto;
    height: auto;
    min-width: 0;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-app-theme="white"] #sp-success-meta > div span:first-child,

body.white-mode #sp-success-meta > div span:first-child,
html[data-app-theme="white"] #sp-success-utr-block .block.text-\[10px\],
body.white-mode #sp-success-utr-block .block.text-\[10px\],
html[data-app-theme="white"] #historyModalContent .text-\[10px\],
body.white-mode #historyModalContent .text-\[10px\],
html[data-app-theme="white"] #paymentModalContent .text-\[10px\],
body.white-mode #paymentModalContent .text-\[10px\] {
    color: #6b7280 !important;
}

html[data-app-theme="white"] #sp-history-detail-modal #sp-hd-status,

body.white-mode #sp-history-detail-modal #sp-hd-status {
    background: #1f2937 !important;
    color: #ffffff !important;
}

html[data-app-theme="white"] #sp-history-detail-modal #sp-hd-amount,

body.white-mode #sp-history-detail-modal #sp-hd-amount {
    color: #111827 !important;
}

html[data-app-theme="white"] #sp-history-detail-modal #sp-hd-usdt,

body.white-mode #sp-history-detail-modal #sp-hd-usdt {
    color: #334155 !important;
}

html[data-app-theme="white"] .sp-card .material-icons-round,

body.white-mode .sp-card .material-icons-round,
html[data-app-theme="white"] #sp-confirm-modal .material-icons-round,
body.white-mode #sp-confirm-modal .material-icons-round,
html[data-app-theme="white"] #sp-history-detail-modal .material-icons-round,
body.white-mode #sp-history-detail-modal .material-icons-round,
html[data-app-theme="white"] #sp-camera-perm-modal .material-icons-round,
body.white-mode #sp-camera-perm-modal .material-icons-round {
    color: inherit;
}

/* Global Pull To Refresh */
.app-pull-refresh {
    --pull-distance: 0px;
    --pull-refresh-offset: 74px;
    position: fixed;
    top: 64px;
    left: 50%;
    z-index: 1200;
    transform: translate(-50%, calc(-100% - var(--pull-refresh-offset) + var(--pull-distance)));
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
    opacity: 0;
}

.app-pull-refresh__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 12, 15, 0.92);
    color: #f5f5f5;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 0.8rem;
    font-weight: 700;
}

.app-pull-refresh__icon {
    font-size: 1rem;
    transition: transform 0.18s ease;
}

body.app-pull-refresh-active .app-pull-refresh {
    opacity: 1;
}

body.app-pull-refresh-ready .app-pull-refresh__pill {
    background: rgba(255, 255, 255, 0.98);
    color: #111827;
}

body.app-pull-refresh-ready .app-pull-refresh__icon {
    transform: rotate(180deg);
}

body.app-pull-refresh-refreshing .app-pull-refresh {
    opacity: 1;
    transform: translate(-50%, 10px);
}

body.app-pull-refresh-refreshing .app-pull-refresh__icon {
    animation: spin 0.9s linear infinite;
}

html[data-app-theme="white"] .app-pull-refresh__pill,

body.white-mode .app-pull-refresh__pill {
    border-color: rgba(17, 24, 39, 0.08);
    background: rgba(255, 255, 255, 0.96);
    color: #111827;
    box-shadow: 0 14px 28px rgba(28, 37, 54, 0.10);
}

@media (pointer: fine) {
    .app-pull-refresh {
        display: none !important;
    }
}

/* =========================================================================
   Pages that must NOT show the bottom nav (sell + addmoney are checkout-style
   flows). The nav DOM may still be present because of SPA persistence from a
   previous page (data-spa-persist="bottom-nav"); we hide it via CSS rather
   than removing it so the persisted node continues to track across pages and
   reappears the moment the user navigates back to dashboard / wallet / etc.
   We also force zero body padding on these checkout pages so no old per-page
   nav spacing rules can leave an empty gap. */
body.sell-page .bottom-nav,
body.addmoney-page .bottom-nav {
    display: none !important;
}
body.sell-page,
body.addmoney-page {
    padding-bottom: 0 !important;
}
@media (max-width: 768px) {
    body.sell-page,
    body.addmoney-page {
        padding-bottom: 0 !important;
    }
}

/* =========================================================================
   Disable the body-level pageEnter animation. Every per-page CSS adds
   `animation: pageEnter 0.4s ease-out` to `body`, and the keyframe applies
   `transform: translateY(10px)` — which makes <body> a containing block for
   `position: fixed` descendants. The bottom nav then slides with the body
   on every page change, producing the "hide and animate back" effect.
   Killing the animation keeps the bottom nav perfectly fixed and removes the
   distracting flash on navigation. Individual page content can still animate
   inside its own .container / main wrappers — only the body root is locked. */
body,
html body {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
    opacity: 1 !important;
}

html[data-app-theme="white"] .exch-header,

/* =========================================================================
   White-mode styling for the exchange-flow components (.exch-*)
   Used by sell.php and addmoney.php. The dark equivalents live in
   theme-dark.css under html:not([data-app-theme="white"]). Every rule below
   is scoped to body.white-mode so dark mode is untouched.
   ========================================================================= */

/* Header pills */
body.white-mode .exch-header { padding: 1rem 0.25rem 0.85rem !important; text-align: left !important; background: transparent !important; border: none !important; }
html[data-app-theme="white"] .exch-header h1,
body.white-mode .exch-header h1,
html[data-app-theme="white"] .exch-header .exch-title,
body.white-mode .exch-header .exch-title {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #141414 !important;
    margin: 0 0 0.35rem !important;
    letter-spacing: -0.01em !important;
    background: none !important;
    -webkit-text-fill-color: #141414 !important;
    line-height: 1.15 !important;
}
html[data-app-theme="white"] .exch-header p,
body.white-mode .exch-header p,
html[data-app-theme="white"] .exch-header .exch-subtitle,
body.white-mode .exch-header .exch-subtitle {
    margin: 0 !important;
    font-size: 0.85rem !important;
    color: #6f7a8f !important;
    line-height: 1.4 !important;
}
html[data-app-theme="white"] .exch-meta-row,
body.white-mode .exch-meta-row {
    margin-top: 0.85rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}
html[data-app-theme="white"] .exch-rate-pill,
body.white-mode .exch-rate-pill,
html[data-app-theme="white"] .exch-min-pill,
body.white-mode .exch-min-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    font-size: 0.74rem !important;
    color: #6f7a8f !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(28, 37, 54, 0.06) !important;
}
html[data-app-theme="white"] .exch-rate-pill b,
body.white-mode .exch-rate-pill b,
html[data-app-theme="white"] .exch-rate-pill strong,
body.white-mode .exch-rate-pill strong { color: #141414 !important; font-weight: 700 !important; }
html[data-app-theme="white"] .exch-rate-pill::before,
body.white-mode .exch-rate-pill::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: #1fbf8f !important;
    box-shadow: 0 0 0 4px rgba(31, 191, 143, 0.18) !important;
    flex-shrink: 0 !important;
}
html[data-app-theme="white"] .exch-min-pill .material-icons-round,
body.white-mode .exch-min-pill .material-icons-round {
    font-size: 0.85rem !important;
    color: #ff7a45 !important;
}

html[data-app-theme="white"] .exch-flow-card,

/* Flow card */
body.white-mode .exch-flow-card {
    padding: 1rem !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 16px 32px rgba(28, 37, 54, 0.06) !important;
}
@media (min-width: 480px) {
    html[data-app-theme="white"] .exch-flow-card,
    body.white-mode .exch-flow-card { padding: 1.25rem !important; }
}

html[data-app-theme="white"] .exch-session-banner,

/* Session banner */
body.white-mode .exch-session-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding: 0.7rem 0.9rem !important;
    margin-bottom: 0.9rem !important;
    background: rgba(255, 122, 69, 0.06) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 122, 69, 0.28) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
html[data-app-theme="white"] .exch-session-banner.hidden,
body.white-mode .exch-session-banner.hidden,
html[data-app-theme="white"] .hidden.exch-session-banner,
body.white-mode .hidden.exch-session-banner { display: none !important; }
html[data-app-theme="white"] .exch-session-banner__copy,
body.white-mode .exch-session-banner__copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.75rem !important;
    color: #141414 !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
}
html[data-app-theme="white"] .exch-session-banner__pending,
body.white-mode .exch-session-banner__pending {
    color: #ff7a45 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.05em !important;
}
html[data-app-theme="white"] .exch-session-banner__amount,
body.white-mode .exch-session-banner__amount { color: #141414 !important; font-weight: 700 !important; }
html[data-app-theme="white"] .exch-session-banner__sep,
body.white-mode .exch-session-banner__sep { color: rgba(20, 20, 20, 0.25) !important; }
html[data-app-theme="white"] .exch-session-banner__close,
body.white-mode .exch-session-banner__close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    background: #ffffff !important;
    color: #141414 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
html[data-app-theme="white"] .exch-session-banner__close:hover,
body.white-mode .exch-session-banner__close:hover {
    border-color: #ff4f7a !important;
    color: #ff4f7a !important;
    background: rgba(255, 79, 122, 0.08) !important;
}
html[data-app-theme="white"] .exch-session-banner__close .material-icons-round,
body.white-mode .exch-session-banner__close .material-icons-round { font-size: 16px !important; }

html[data-app-theme="white"] .exch-stepper,

/* Stepper spacing tweak */
body.white-mode .exch-stepper { margin: 0.25rem 0.25rem 1.4rem !important; }

html[data-app-theme="white"] .exch-converter,

/* You-send / You-receive converter */
body.white-mode .exch-converter {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    margin-bottom: 1rem !important;
}
html[data-app-theme="white"] .exch-converter-card,
body.white-mode .exch-converter-card {
    background: #f7f8fb !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 18px !important;
    padding: 0.95rem 1rem !important;
    transition: border-color 0.18s ease !important;
}
html[data-app-theme="white"] .exch-converter-card:focus-within,
body.white-mode .exch-converter-card:focus-within {
    border-color: #ff7a45 !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.16) !important;
}
html[data-app-theme="white"] .exch-converter-label,
body.white-mode .exch-converter-label {
    display: block !important;
    font-size: 0.74rem !important;
    color: #6f7a8f !important;
    font-weight: 600 !important;
    margin-bottom: 0.45rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
html[data-app-theme="white"] .exch-converter-input-row,
body.white-mode .exch-converter-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
html[data-app-theme="white"] .exch-converter-card .exch-converter-input-row .exch-amount-input,
body.white-mode .exch-converter-card .exch-converter-input-row .exch-amount-input,
html[data-app-theme="white"] .exch-converter-card .exch-converter-input-row input.sc-input,
body.white-mode .exch-converter-card .exch-converter-input-row input.sc-input,
html[data-app-theme="white"] .exch-converter-card .exch-converter-input-row input[readonly],
body.white-mode .exch-converter-card .exch-converter-input-row input[readonly],
html[data-app-theme="white"] .exch-converter-card .exch-converter-input-row input[type="text"],
body.white-mode .exch-converter-card .exch-converter-input-row input[type="text"],
html[data-app-theme="white"] .exch-converter-card .exch-converter-input-row input[type="number"],
body.white-mode .exch-converter-card .exch-converter-input-row input[type="number"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #141414 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    height: auto !important;
}
html[data-app-theme="white"] .exch-converter-card .exch-converter-input-row input:focus,
body.white-mode .exch-converter-card .exch-converter-input-row input:focus { outline: none !important; box-shadow: none !important; }
html[data-app-theme="white"] .exch-converter-card .exch-converter-input-row input::placeholder,
body.white-mode .exch-converter-card .exch-converter-input-row input::placeholder { color: rgba(20, 20, 20, 0.3) !important; }
html[data-app-theme="white"] .exch-converter-suffix,
body.white-mode .exch-converter-suffix {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #6f7a8f !important;
    padding: 0.35rem 0.65rem !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    flex-shrink: 0 !important;
}
html[data-app-theme="white"] .exch-converter-suffix-usdt,
body.white-mode .exch-converter-suffix-usdt { color: #ff4f7a !important; }
html[data-app-theme="white"] .exch-converter-suffix-inr,
body.white-mode .exch-converter-suffix-inr,
html[data-app-theme="white"] .exch-converter-suffix-success,
body.white-mode .exch-converter-suffix-success { color: #1fbf8f !important; }
html[data-app-theme="white"] .exch-converter-card.exch-converter-receive .exch-converter-input-row .exch-amount-input,
body.white-mode .exch-converter-card.exch-converter-receive .exch-converter-input-row .exch-amount-input,
html[data-app-theme="white"] .exch-converter-card.exch-converter-receive .exch-converter-input-row input.sc-input,
body.white-mode .exch-converter-card.exch-converter-receive .exch-converter-input-row input.sc-input,
html[data-app-theme="white"] .exch-converter-card.exch-converter-receive .exch-converter-input-row input[readonly],
body.white-mode .exch-converter-card.exch-converter-receive .exch-converter-input-row input[readonly] {
    color: #1fbf8f !important;
}
html[data-app-theme="white"] .exch-converter-meta,
body.white-mode .exch-converter-meta {
    margin-top: 0.5rem !important;
    font-size: 0.72rem !important;
    color: #6f7a8f !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
}
html[data-app-theme="white"] .exch-converter-error,
body.white-mode .exch-converter-error {
    display: inline-flex;
    margin-top: 0.5rem !important;
    font-size: 0.74rem !important;
    color: #ff4f7a !important;
    font-weight: 600 !important;
    align-items: center !important;
    gap: 0.3rem !important;
}
html[data-app-theme="white"] .exch-converter-error.hidden,
body.white-mode .exch-converter-error.hidden { display: none !important; }
html[data-app-theme="white"] .exch-converter-error .material-icons-round,
body.white-mode .exch-converter-error .material-icons-round { font-size: 0.95rem !important; color: #ff4f7a !important; }
html[data-app-theme="white"] .exch-converter-arrow,
body.white-mode .exch-converter-arrow {
    align-self: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: -0.6rem 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 12px rgba(28, 37, 54, 0.08) !important;
    color: #ff7a45 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
}
html[data-app-theme="white"] .exch-converter-arrow .material-icons-round,
body.white-mode .exch-converter-arrow .material-icons-round { font-size: 1.1rem !important; color: #ff7a45 !important; }

html[data-app-theme="white"] .exch-quick-chips,

/* Quick amount chips */
body.white-mode .exch-quick-chips {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    margin-bottom: 1.1rem !important;
}
html[data-app-theme="white"] .exch-quick-chip,
body.white-mode .exch-quick-chip {
    background: #ffffff !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    color: #141414 !important;
    border-radius: 12px !important;
    padding: 0.55rem 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease !important;
    min-height: 44px !important;
}
html[data-app-theme="white"] .exch-quick-chip:hover,
body.white-mode .exch-quick-chip:hover,
html[data-app-theme="white"] .exch-quick-chip:focus-visible,
body.white-mode .exch-quick-chip:focus-visible {
    border-color: #ff7a45 !important;
    color: #ff7a45 !important;
    outline: none !important;
}
html[data-app-theme="white"] .exch-quick-chip.is-active,
body.white-mode .exch-quick-chip.is-active {
    background: rgba(255, 122, 69, 0.1) !important;
    border-color: #ff7a45 !important;
    color: #ff7a45 !important;
}

html[data-app-theme="white"] .exch-section-title,

/* Section title */
body.white-mode .exch-section-title {
    display: block !important;
    font-size: 0.76rem !important;
    color: #6f7a8f !important;
    font-weight: 600 !important;
    margin: 0.25rem 0.1rem 0.5rem !important;
}

html[data-app-theme="white"] .exch-picker-hidden-select,

/* Hidden select used by the picker */
body.white-mode .exch-picker-hidden-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html[data-app-theme="white"] .exch-network-picker,

/* Network / payout picker cards */
body.white-mode .exch-network-picker { margin-bottom: 1rem !important; }
html[data-app-theme="white"] .exch-picker-cards,
body.white-mode .exch-picker-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
}
html[data-app-theme="white"] .exch-picker-card,
body.white-mode .exch-picker-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    text-align: left !important;
    background: #ffffff !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    border-radius: 14px !important;
    padding: 0.75rem 0.9rem !important;
    color: #141414 !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease !important;
    min-height: 64px !important;
    box-shadow: 0 4px 14px rgba(28, 37, 54, 0.04) !important;
    -webkit-tap-highlight-color: transparent !important;
}
html[data-app-theme="white"] .exch-picker-card:hover,
body.white-mode .exch-picker-card:hover,
html[data-app-theme="white"] .exch-picker-card:focus-visible,
body.white-mode .exch-picker-card:focus-visible {
    border-color: rgba(17, 24, 39, 0.18) !important;
    background: #fafbff !important;
    outline: none !important;
    box-shadow: 0 6px 18px rgba(28, 37, 54, 0.08) !important;
}
html[data-app-theme="white"] .exch-picker-card.is-selected,
body.white-mode .exch-picker-card.is-selected {
    border-color: #ff7a45 !important;
    background: rgba(255, 122, 69, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.16) !important;
}
html[data-app-theme="white"] .exch-picker-card:active,
body.white-mode .exch-picker-card:active { transform: scale(0.99) !important; }
html[data-app-theme="white"] .exch-picker-card__icon,
body.white-mode .exch-picker-card__icon {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 122, 69, 0.12) !important;
    border: 1px solid rgba(255, 122, 69, 0.22) !important;
    color: #ff7a45 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em !important;
}
html[data-app-theme="white"] .exch-picker-card.is-selected .exch-picker-card__icon,
body.white-mode .exch-picker-card.is-selected .exch-picker-card__icon {
    background: linear-gradient(135deg, #ff824e 0%, #ffb347 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
html[data-app-theme="white"] .exch-picker-card__icon .material-icons-round,
body.white-mode .exch-picker-card__icon .material-icons-round { font-size: 1.05rem !important; }
html[data-app-theme="white"] .exch-picker-card__body,
body.white-mode .exch-picker-card__body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
}
html[data-app-theme="white"] .exch-picker-card__name,
body.white-mode .exch-picker-card__name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #141414 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html[data-app-theme="white"] .exch-picker-card__hint,
body.white-mode .exch-picker-card__hint {
    font-size: 0.72rem !important;
    color: #6f7a8f !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html[data-app-theme="white"] .exch-picker-card--network .exch-picker-card__hint,
body.white-mode .exch-picker-card--network .exch-picker-card__hint {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace !important;
    letter-spacing: 0.01em !important;
}
html[data-app-theme="white"] .exch-picker-card--payout .exch-picker-card__name,
body.white-mode .exch-picker-card--payout .exch-picker-card__name {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.01em !important;
}
html[data-app-theme="white"] .exch-picker-card__radio,
body.white-mode .exch-picker-card__radio {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    border-radius: 999px !important;
    border: 2px solid rgba(17, 24, 39, 0.18) !important;
    background: #ffffff !important;
    position: relative !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}
html[data-app-theme="white"] .exch-picker-card.is-selected .exch-picker-card__radio,
body.white-mode .exch-picker-card.is-selected .exch-picker-card__radio {
    border-color: #ff7a45 !important;
    background: #ff7a45 !important;
}
html[data-app-theme="white"] .exch-picker-card.is-selected .exch-picker-card__radio::after,
body.white-mode .exch-picker-card.is-selected .exch-picker-card__radio::after {
    content: '' !important;
    position: absolute !important;
    inset: 4px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
}
html[data-app-theme="white"] .exch-picker-empty,
body.white-mode .exch-picker-empty {
    padding: 1.1rem 1rem !important;
    background: #f7f8fb !important;
    border: 1px dashed rgba(17, 24, 39, 0.18) !important;
    border-radius: 14px !important;
    color: #6f7a8f !important;
    font-size: 0.8rem !important;
    text-align: center !important;
}

html[data-app-theme="white"] .exch-payment-card,

/* Payment instruction card */
body.white-mode .exch-payment-card {
    background: #ffffff !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 18px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 8px 20px rgba(28, 37, 54, 0.05) !important;
}
html[data-app-theme="white"] .exch-payment-card.hidden,
body.white-mode .exch-payment-card.hidden { display: none !important; }
html[data-app-theme="white"] .exch-qr-frame,
body.white-mode .exch-qr-frame {
    background: #ffffff !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 14px !important;
    padding: 0.65rem !important;
    width: 168px !important;
    height: 168px !important;
    margin: 0.15rem auto 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 22px rgba(28, 37, 54, 0.08) !important;
}
html[data-app-theme="white"] .exch-qr-frame img,
body.white-mode .exch-qr-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}
html[data-app-theme="white"] .exch-payment-row,
body.white-mode .exch-payment-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding: 0.7rem 0 !important;
    border-top: 1px solid rgba(17, 24, 39, 0.06) !important;
}
html[data-app-theme="white"] .exch-payment-row:first-of-type,
body.white-mode .exch-payment-row:first-of-type { border-top: none !important; padding-top: 0.35rem !important; }
html[data-app-theme="white"] .exch-payment-row.exch-payment-row--stacked,
body.white-mode .exch-payment-row.exch-payment-row--stacked {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
}
html[data-app-theme="white"] .exch-payment-label,
body.white-mode .exch-payment-label { font-size: 0.74rem !important; color: #6f7a8f !important; font-weight: 600 !important; flex-shrink: 0 !important; }
html[data-app-theme="white"] .exch-payment-value,
body.white-mode .exch-payment-value { font-size: 0.85rem !important; color: #141414 !important; font-weight: 700 !important; text-align: right !important; min-width: 0 !important; word-break: break-all !important; }
html[data-app-theme="white"] .exch-network-badge,
body.white-mode .exch-network-badge {
    display: inline-block !important;
    padding: 0.18rem 0.55rem !important;
    border-radius: 8px !important;
    background: rgba(255, 122, 69, 0.1) !important;
    border: 1px solid rgba(255, 122, 69, 0.3) !important;
    color: #ff7a45 !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    text-align: center !important;
}
html[data-app-theme="white"] .exch-mono,
body.white-mode .exch-mono,
html[data-app-theme="white"] code.exch-mono,
body.white-mode code.exch-mono,
html[data-app-theme="white"] .exch-payment-card code.address-item,
body.white-mode .exch-payment-card code.address-item {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace !important;
    font-size: 0.78rem !important;
    color: #141414 !important;
    background: #f7f8fb !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    padding: 0.65rem 0.75rem !important;
    border-radius: 10px !important;
    word-break: break-all !important;
    line-height: 1.45 !important;
    display: block !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease !important;
}
html[data-app-theme="white"] .exch-payment-card code.address-item:hover,
body.white-mode .exch-payment-card code.address-item:hover { border-color: #ff7a45 !important; }
html[data-app-theme="white"] .exch-payment-value-row,
body.white-mode .exch-payment-value-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
}
html[data-app-theme="white"] .exch-payment-value-row .exch-mono,
body.white-mode .exch-payment-value-row .exch-mono { flex: 1 1 auto !important; }
html[data-app-theme="white"] .exch-icon-btn,
body.white-mode .exch-icon-btn,
html[data-app-theme="white"] button.amount-copy-btn.exch-icon-btn,
body.white-mode button.amount-copy-btn.exch-icon-btn {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    background: #ffffff !important;
    color: #141414 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    box-shadow: 0 2px 6px rgba(28, 37, 54, 0.04) !important;
}
html[data-app-theme="white"] .exch-icon-btn:hover,
body.white-mode .exch-icon-btn:hover,
html[data-app-theme="white"] .exch-icon-btn:focus-visible,
body.white-mode .exch-icon-btn:focus-visible {
    background: rgba(255, 122, 69, 0.08) !important;
    border-color: #ff7a45 !important;
    color: #ff7a45 !important;
    outline: none !important;
}
html[data-app-theme="white"] .exch-icon-btn .material-icons-round,
body.white-mode .exch-icon-btn .material-icons-round { font-size: 1.05rem !important; }

html[data-app-theme="white"] .exch-warning,

/* Warning callout */
body.white-mode .exch-warning {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.55rem !important;
    margin-top: 0.85rem !important;
    padding: 0.65rem 0.8rem !important;
    background: rgba(255, 122, 69, 0.06) !important;
    border: 1px solid rgba(255, 122, 69, 0.2) !important;
    border-radius: 12px !important;
    font-size: 0.74rem !important;
    color: #b34a18 !important;
    line-height: 1.45 !important;
}
html[data-app-theme="white"] .exch-warning .material-icons-round,
body.white-mode .exch-warning .material-icons-round { font-size: 1rem !important; color: #ff7a45 !important; flex-shrink: 0 !important; margin-top: 1px !important; }
html[data-app-theme="white"] .exch-warning strong,
body.white-mode .exch-warning strong { color: #141414 !important; font-weight: 700 !important; }

html[data-app-theme="white"] .exch-confirm-check,

/* Confirmation check */
body.white-mode .exch-confirm-check {
    margin-top: 0.85rem !important;
    padding: 0.8rem 0.85rem !important;
    background: #f7f8fb !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 12px !important;
}
html[data-app-theme="white"] .exch-confirm-check label,
body.white-mode .exch-confirm-check label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
    cursor: pointer !important;
    color: #141414 !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}
html[data-app-theme="white"] .exch-confirm-check input[type="checkbox"],
body.white-mode .exch-confirm-check input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-top: 1px !important;
    accent-color: #ff7a45 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}
html[data-app-theme="white"] .exch-confirm-check strong,
body.white-mode .exch-confirm-check strong { color: #1fbf8f !important; font-weight: 700 !important; }

html[data-app-theme="white"] .exch-summary-card,

/* Order summary card */
body.white-mode .exch-summary-card {
    background: #f7f8fb !important;
    background-image: none !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 18px !important;
    padding: 0.95rem 1rem !important;
    margin-bottom: 1rem !important;
}
html[data-app-theme="white"] .exch-summary-card h3,
body.white-mode .exch-summary-card h3,
html[data-app-theme="white"] .exch-summary-card .exch-summary-title,
body.white-mode .exch-summary-card .exch-summary-title {
    font-size: 0.74rem !important;
    color: #6f7a8f !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 0.6rem !important;
}
html[data-app-theme="white"] .exch-summary-row,
body.white-mode .exch-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.5rem 0 !important;
    border-top: 1px solid rgba(17, 24, 39, 0.06) !important;
    font-size: 0.88rem !important;
}
html[data-app-theme="white"] .exch-summary-row:first-of-type,
body.white-mode .exch-summary-row:first-of-type { border-top: none !important; padding-top: 0 !important; }
html[data-app-theme="white"] .exch-summary-row > span:first-child,
body.white-mode .exch-summary-row > span:first-child { color: #6f7a8f !important; font-weight: 500 !important; }
html[data-app-theme="white"] .exch-summary-row > span:last-child,
body.white-mode .exch-summary-row > span:last-child,
html[data-app-theme="white"] .exch-summary-row .exch-summary-value,
body.white-mode .exch-summary-row .exch-summary-value { color: #141414 !important; font-weight: 700 !important; text-align: right !important; word-break: break-word !important; }
html[data-app-theme="white"] .exch-summary-row .exch-summary-value.success,
body.white-mode .exch-summary-row .exch-summary-value.success { color: #1fbf8f !important; }
html[data-app-theme="white"] .exch-summary-row .exch-summary-value.danger,
body.white-mode .exch-summary-row .exch-summary-value.danger { color: #ff4f7a !important; }

html[data-app-theme="white"] .exch-field,

/* Generic field wrapper */
body.white-mode .exch-field { margin-bottom: 1rem !important; }
html[data-app-theme="white"] .exch-field .sc-label,
body.white-mode .exch-field .sc-label,
html[data-app-theme="white"] .exch-field > label,
body.white-mode .exch-field > label {
    display: block !important;
    font-size: 0.78rem !important;
    color: #6f7a8f !important;
    font-weight: 600 !important;
    margin-bottom: 0.45rem !important;
}
html[data-app-theme="white"] .exch-field .sc-input,
body.white-mode .exch-field .sc-input {
    width: 100% !important;
    height: 52px !important;
    padding: 0 1rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    border-radius: 14px !important;
    color: #141414 !important;
    font-size: 0.95rem !important;
}
html[data-app-theme="white"] .exch-field .sc-input::placeholder,
body.white-mode .exch-field .sc-input::placeholder { color: rgba(20, 20, 20, 0.32) !important; }
html[data-app-theme="white"] .exch-field .sc-input:focus,
body.white-mode .exch-field .sc-input:focus {
    outline: none !important;
    border-color: #ff7a45 !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.16) !important;
}
html[data-app-theme="white"] .exch-field .sc-input.exch-mono-input,
body.white-mode .exch-field .sc-input.exch-mono-input,
html[data-app-theme="white"] .exch-field input[name="txn_hash"],
body.white-mode .exch-field input[name="txn_hash"] {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.01em !important;
}
html[data-app-theme="white"] .exch-field .exch-field-hint,
body.white-mode .exch-field .exch-field-hint { margin-top: 0.4rem !important; font-size: 0.72rem !important; color: #6f7a8f !important; }
html[data-app-theme="white"] .exch-field .exch-input-error,
body.white-mode .exch-field .exch-input-error { margin-top: 0.4rem !important; font-size: 0.74rem !important; color: #ff4f7a !important; font-weight: 600 !important; }
html[data-app-theme="white"] .exch-field .exch-input-error.hidden,
body.white-mode .exch-field .exch-input-error.hidden { display: none !important; }
html[data-app-theme="white"] .exch-field .sc-input.input-success,
body.white-mode .exch-field .sc-input.input-success { border-color: #1fbf8f !important; background: rgba(31, 191, 143, 0.06) !important; }
html[data-app-theme="white"] .exch-field .sc-input.input-error,
body.white-mode .exch-field .sc-input.input-error { border-color: #ff4f7a !important; background: rgba(255, 79, 122, 0.06) !important; }

html[data-app-theme="white"] .exch-flow-card .wizard-actions,

/* Wizard actions */
body.white-mode .exch-flow-card .wizard-actions {
    display: flex !important;
    gap: 0.6rem !important;
    margin-top: 1rem !important;
}
html[data-app-theme="white"] .exch-flow-card .wizard-actions.single,
body.white-mode .exch-flow-card .wizard-actions.single { justify-content: stretch !important; }
html[data-app-theme="white"] .exch-flow-card .wizard-actions .sc-btn,
body.white-mode .exch-flow-card .wizard-actions .sc-btn {
    flex: 1 1 0 !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.95rem !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
}
html[data-app-theme="white"] .exch-flow-card .wizard-actions .sc-btn-primary,
body.white-mode .exch-flow-card .wizard-actions .sc-btn-primary {
    background: linear-gradient(135deg, #ff824e 0%, #ffb347 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 22px rgba(255, 122, 69, 0.32) !important;
}
html[data-app-theme="white"] .exch-flow-card .wizard-actions .sc-btn-primary:hover:not(:disabled),
body.white-mode .exch-flow-card .wizard-actions .sc-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(255, 122, 69, 0.4) !important;
}
html[data-app-theme="white"] .exch-flow-card .wizard-actions .sc-btn-primary:disabled,
body.white-mode .exch-flow-card .wizard-actions .sc-btn-primary:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
html[data-app-theme="white"] .exch-flow-card .wizard-actions .sc-btn-outline,
body.white-mode .exch-flow-card .wizard-actions .sc-btn-outline {
    background: #ffffff !important;
    color: #141414 !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    box-shadow: 0 4px 12px rgba(28, 37, 54, 0.06) !important;
}
html[data-app-theme="white"] .exch-flow-card .wizard-actions .sc-btn-outline:hover,
body.white-mode .exch-flow-card .wizard-actions .sc-btn-outline:hover {
    border-color: #ff7a45 !important;
    color: #ff7a45 !important;
}

html[data-app-theme="white"] .exch-terms,

body.white-mode .exch-terms { margin-top: 0.85rem !important; text-align: center !important; font-size: 0.72rem !important; color: #8a94a6 !important; }

html[data-app-theme="white"] .exch-missing-payment,

/* Missing payment method screen */
body.white-mode .exch-missing-payment { text-align: center !important; padding: 1.5rem 0.5rem !important; }
html[data-app-theme="white"] .exch-missing-payment__icon,
body.white-mode .exch-missing-payment__icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 1.1rem !important;
    border-radius: 999px !important;
    background: rgba(255, 122, 69, 0.1) !important;
    border: 1px solid rgba(255, 122, 69, 0.3) !important;
    color: #ff7a45 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html[data-app-theme="white"] .exch-missing-payment__icon .material-icons-round,
body.white-mode .exch-missing-payment__icon .material-icons-round { font-size: 1.85rem !important; }
html[data-app-theme="white"] .exch-missing-payment__title,
body.white-mode .exch-missing-payment__title { font-size: 1.05rem !important; color: #141414 !important; font-weight: 700 !important; margin: 0 0 0.35rem !important; }
html[data-app-theme="white"] .exch-missing-payment__text,
body.white-mode .exch-missing-payment__text { font-size: 0.85rem !important; color: #6f7a8f !important; line-height: 1.5 !important; margin: 0 auto 1.25rem !important; max-width: 360px !important; }
html[data-app-theme="white"] .exch-missing-payment__cta,
body.white-mode .exch-missing-payment__cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    min-height: 48px !important;
    padding: 0 1.5rem !important;
    background: linear-gradient(135deg, #ff824e 0%, #ffb347 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(255, 122, 69, 0.32) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
html[data-app-theme="white"] .exch-missing-payment__cta:hover,
body.white-mode .exch-missing-payment__cta:hover { transform: translateY(-1px) !important; box-shadow: 0 14px 28px rgba(255, 122, 69, 0.4) !important; }

html[data-app-theme="white"] .deposit-verification-modal,

/* Deposit verification modal (white mode) */
body.white-mode .deposit-verification-modal { background: rgba(28, 37, 54, 0.45) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
html[data-app-theme="white"] .deposit-verification-modal__card,
body.white-mode .deposit-verification-modal__card {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 56px rgba(28, 37, 54, 0.18) !important;
    padding: 1.5rem 1.25rem 1.25rem !important;
    max-width: 380px !important;
}
html[data-app-theme="white"] .deposit-verification-modal__orb,
body.white-mode .deposit-verification-modal__orb { background: transparent !important; }
html[data-app-theme="white"] .deposit-verification-modal__ring,
body.white-mode .deposit-verification-modal__ring { border-color: rgba(255, 122, 69, 0.16) !important; }
html[data-app-theme="white"] .deposit-verification-modal__ring--outer,
body.white-mode .deposit-verification-modal__ring--outer { border-color: rgba(255, 122, 69, 0.1) !important; }
html[data-app-theme="white"] .deposit-verification-modal__ring--inner,
body.white-mode .deposit-verification-modal__ring--inner { border-color: rgba(255, 122, 69, 0.24) !important; }
html[data-app-theme="white"] .deposit-verification-modal__core,
body.white-mode .deposit-verification-modal__core { background: rgba(255, 122, 69, 0.08) !important; border: 1px solid rgba(255, 122, 69, 0.28) !important; }
html[data-app-theme="white"] .deposit-anim .material-icons-round,
body.white-mode .deposit-anim .material-icons-round { color: #ff7a45 !important; }
html[data-app-theme="white"] .deposit-verification-modal__card[data-stage="success"] .deposit-anim--success,
body.white-mode .deposit-verification-modal__card[data-stage="success"] .deposit-anim--success,
html[data-app-theme="white"] .deposit-verification-modal__card[data-stage="success"] .deposit-anim--success .material-icons-round,
body.white-mode .deposit-verification-modal__card[data-stage="success"] .deposit-anim--success .material-icons-round { color: #1fbf8f !important; }
html[data-app-theme="white"] .deposit-verification-modal__eyebrow,
body.white-mode .deposit-verification-modal__eyebrow { color: #ff7a45 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 0.72rem !important; font-weight: 700 !important; }
html[data-app-theme="white"] .deposit-verification-modal__title,
body.white-mode .deposit-verification-modal__title { color: #141414 !important; font-size: 1.15rem !important; font-weight: 800 !important; margin: 0.35rem 0 0.45rem !important; }
html[data-app-theme="white"] .deposit-verification-modal__text,
body.white-mode .deposit-verification-modal__text { color: #6f7a8f !important; font-size: 0.85rem !important; line-height: 1.45 !important; }
html[data-app-theme="white"] .deposit-verification-modal__amount,
body.white-mode .deposit-verification-modal__amount {
    margin: 0.95rem 0 0 !important;
    padding: 0.7rem 0.9rem !important;
    background: rgba(31, 191, 143, 0.1) !important;
    border: 1px solid rgba(31, 191, 143, 0.3) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
}
html[data-app-theme="white"] .deposit-verification-modal__amount-label,
body.white-mode .deposit-verification-modal__amount-label { color: #6f7a8f !important; font-size: 0.78rem !important; font-weight: 600 !important; }
html[data-app-theme="white"] .deposit-verification-modal__amount-value,
body.white-mode .deposit-verification-modal__amount-value { color: #1fbf8f !important; font-size: 1.05rem !important; font-weight: 800 !important; }
html[data-app-theme="white"] .deposit-verification-modal__steps,
body.white-mode .deposit-verification-modal__steps {
    margin-top: 1.1rem !important;
    padding: 0.85rem !important;
    background: #f7f8fb !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 14px !important;
}
html[data-app-theme="white"] .deposit-step,
body.white-mode .deposit-step { display: flex !important; align-items: center !important; gap: 0.6rem !important; padding: 0.32rem 0 !important; }
html[data-app-theme="white"] .deposit-step::before,
body.white-mode .deposit-step::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(17, 24, 39, 0.18) !important;
    flex-shrink: 0 !important;
}
html[data-app-theme="white"] .deposit-step.is-active::before,
body.white-mode .deposit-step.is-active::before { background: #ff7a45 !important; box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.2) !important; }
html[data-app-theme="white"] .deposit-step.is-complete::before,
body.white-mode .deposit-step.is-complete::before,
html[data-app-theme="white"] .deposit-step[data-step="success"].is-active::before,
body.white-mode .deposit-step[data-step="success"].is-active::before { background: #1fbf8f !important; box-shadow: 0 0 0 4px rgba(31, 191, 143, 0.2) !important; }
html[data-app-theme="white"] .deposit-step__label,
body.white-mode .deposit-step__label { font-size: 0.8rem !important; color: #6f7a8f !important; font-weight: 500 !important; }
html[data-app-theme="white"] .deposit-step.is-active .deposit-step__label,
body.white-mode .deposit-step.is-active .deposit-step__label { color: #141414 !important; font-weight: 600 !important; }
html[data-app-theme="white"] .deposit-verification-modal__redirect,
body.white-mode .deposit-verification-modal__redirect { margin-top: 0.85rem !important; text-align: center !important; font-size: 0.78rem !important; color: #6f7a8f !important; }
html[data-app-theme="white"] .deposit-verification-modal__redirect span,
body.white-mode .deposit-verification-modal__redirect span { color: #ff7a45 !important; font-weight: 700 !important; }

html[data-app-theme="white"] .sc-container .sc-card .live-rate-badge,

/* =========================================================================
   White-mode patches for buy.php — the buy page leans on raw Tailwind utility
   classes for its dark visual (bg-zinc-*, border-zinc-*, text-zinc-*) without
   wrapping them in .details-box / .sc-card-subtle, so the parent-scoped
   white-mode rules above miss them. Light/dark contrast on desktop suffered
   most: dark-on-white text and dark borders looked broken against the white
   page. Targeting the buy.php sc-card subtree keeps these overrides off other
   pages that may use the same Tailwind classes legitimately.
   ========================================================================= */

body.white-mode .sc-container .sc-card .live-rate-badge {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(34, 197, 94, 0.06)) !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
    color: #047857 !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.08) !important;
}
html[data-app-theme="white"] .sc-container .sc-card .live-rate-badge .rate-label,
body.white-mode .sc-container .sc-card .live-rate-badge .rate-label,
html[data-app-theme="white"] .sc-container .sc-card .live-rate-badge .rate-helper-text,
body.white-mode .sc-container .sc-card .live-rate-badge .rate-helper-text {
    color: #4b5563 !important;
}
html[data-app-theme="white"] .sc-container .sc-card .live-rate-badge .rate-value,
body.white-mode .sc-container .sc-card .live-rate-badge .rate-value {
    color: #047857 !important;
    font-weight: 800 !important;
}
html[data-app-theme="white"] .sc-container .sc-card .live-badge-icon,
body.white-mode .sc-container .sc-card .live-badge-icon {
    color: #ff7a45 !important;
}

html[data-app-theme="white"] .sc-container .sc-card label[for="buy-proof"],

/* File-upload drop zone in buy.php step 3 — border-zinc-* without a parent
   class match. Light-mode border + hover so the dotted outline reads against
   the white card. */
body.white-mode .sc-container .sc-card label[for="buy-proof"],
html[data-app-theme="white"] .sc-container .sc-card .border-dashed.border-zinc-700,
body.white-mode .sc-container .sc-card .border-dashed.border-zinc-700 {
    border-color: rgba(17, 24, 39, 0.18) !important;
    background: #fafbff !important;
    color: #141414 !important;
}
html[data-app-theme="white"] .sc-container .sc-card label[for="buy-proof"]:hover,
body.white-mode .sc-container .sc-card label[for="buy-proof"]:hover,
html[data-app-theme="white"] .sc-container .sc-card .border-dashed.border-zinc-700:hover,
body.white-mode .sc-container .sc-card .border-dashed.border-zinc-700:hover {
    border-color: rgba(255, 122, 69, 0.5) !important;
    background: #fff7ef !important;
}
html[data-app-theme="white"] .sc-container .sc-card #upload-placeholder .text-sm,
body.white-mode .sc-container .sc-card #upload-placeholder .text-sm {
    color: #141414 !important;
}
html[data-app-theme="white"] .sc-container .sc-card #upload-placeholder .text-xs.text-zinc-500,
body.white-mode .sc-container .sc-card #upload-placeholder .text-xs.text-zinc-500 {
    color: #6f7a8f !important;
}

html[data-app-theme="white"] .sc-container .sc-card .sc-input-wrapper > .text-zinc-500,

/* Standalone .text-zinc-500 helpers in buy.php (after the wallet select and
   under the confirm button) that have no card/box parent. */
body.white-mode .sc-container .sc-card .sc-input-wrapper > .text-zinc-500,
html[data-app-theme="white"] .sc-container .sc-card > form > .text-zinc-500,
body.white-mode .sc-container .sc-card > form > .text-zinc-500 {
    color: #6f7a8f !important;
}

html[data-app-theme="white"] .sc-container .sc-card .sc-input,

/* sc-input (selects + text inputs) on buy.php — dark border/bg by default. */
body.white-mode .sc-container .sc-card .sc-input {
    background: #ffffff !important;
    color: #141414 !important;
    border-color: rgba(17, 24, 39, 0.12) !important;
}
html[data-app-theme="white"] .sc-container .sc-card .sc-input::placeholder,
body.white-mode .sc-container .sc-card .sc-input::placeholder {
    color: rgba(20, 20, 20, 0.35) !important;
}
html[data-app-theme="white"] .sc-container .sc-card .sc-input:focus,
/* Keep the .sc-input border static on focus in white mode — the orange ring
   read harsh on the white card and clashed with the surrounding .exch-converter-card
   focus-within accent. The input is still keyboard-visible via the
   converter-card's own focus-within ring above. */
body.white-mode .sc-container .sc-card .sc-input:focus {
    border-color: rgba(17, 24, 39, 0.12) !important;
    box-shadow: none !important;
    outline: none !important;
}
html[data-app-theme="white"] .sc-container .sc-card .sc-input-suffix,
body.white-mode .sc-container .sc-card .sc-input-suffix {
    color: #6f7a8f !important;
}

html[data-app-theme="white"] .sc-container .sc-card #min-amount-alert,

/* Min-amount alert inline-styled with var(--buy-sell-destructive) — make sure
   it stays legible on white. */
body.white-mode .sc-container .sc-card #min-amount-alert {
    color: #c0392b !important;
}

/* =========================================================================
   White-mode patches for sell.php / addmoney.php on desktop. The wizard card
   sits inside .exch-page (clamped to 540px above) and on a wide monitor the
   surrounding viewport keeps the dark page background bleed-through invisible
   only when the body is explicitly white. Reaffirm the wizard surface colour
   on desktop so any inherited dark gradients from sell.css/addmoney.css don't
   leak through.
   ========================================================================= */
@media (min-width: 720px) {
    html[data-app-theme="white"] .exch-flow-card,
    body.white-mode .exch-flow-card {
        background: #ffffff !important;
        border-color: rgba(17, 24, 39, 0.08) !important;
        box-shadow: 0 24px 50px rgba(28, 37, 54, 0.08) !important;
    }

    /* Center the merged step-2 column on desktop without letting the QR card
       stretch edge-to-edge — keeps the layout readable instead of a wide form
       on a 1080p+ monitor. */
    body.sell-page.white-mode .exch-step-grid--merged,
    body.addmoney-page.white-mode .exch-step-grid--merged {
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

body.sell-page.white-mode,
body.addmoney-page.white-mode {
    background: #f6f8fc !important;
    background-image: none !important;
    color: #141414 !important;
}

body.sell-page.white-mode > .sc-container,
body.addmoney-page.white-mode > .sc-container {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.sell-page.white-mode .exch-flow-card,
body.addmoney-page.white-mode .exch-flow-card,
body.sell-page.white-mode #payment-invoice-host,
body.addmoney-page.white-mode #payment-invoice-host {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    color: #141414 !important;
    box-shadow: 0 24px 50px rgba(28, 37, 54, 0.08) !important;
}

body.sell-page.white-mode .exch-flow-card.hidden,
body.addmoney-page.white-mode .exch-flow-card.hidden,
body.sell-page.white-mode #payment-invoice-host.hidden,
body.addmoney-page.white-mode #payment-invoice-host.hidden {
    display: none !important;
}

body.sell-page.white-mode .exch-step .sc-step-circle,
body.addmoney-page.white-mode .exch-step .sc-step-circle {
    background: #ffffff !important;
    border-color: rgba(17, 24, 39, 0.12) !important;
    color: #6f7a8f !important;
}

body.sell-page.white-mode .exch-step.active .sc-step-circle,
body.addmoney-page.white-mode .exch-step.active .sc-step-circle {
    background: #eaff68 !important;
    border-color: #eaff68 !important;
    color: #141414 !important;
}

html[data-app-theme="white"] #transferModal .wallet-transfer-modal,
body.white-mode #transferModal .wallet-transfer-modal {
    background: #ffffff !important;
    color: #141414 !important;
}

html[data-app-theme="white"] #transferModal h3[data-i18n="wallet_transfer"],
html[data-app-theme="white"] #transferModal .sc-label,
html[data-app-theme="white"] #transferModal .wallet-transfer-review h4,
html[data-app-theme="white"] #transferModal .close-btn,
body.white-mode #transferModal h3[data-i18n="wallet_transfer"],
body.white-mode #transferModal .sc-label,
body.white-mode #transferModal .wallet-transfer-review h4,
body.white-mode #transferModal .close-btn {
    color: #141414 !important;
}

html[data-app-theme="white"] #transferModal .wallet-transfer-result-muted,
html[data-app-theme="white"] #transferModal .wallet-transfer-hint,
html[data-app-theme="white"] #transferModal .wallet-transfer-recipient,
html[data-app-theme="white"] #transferModal .wallet-transfer-review p,
body.white-mode #transferModal .wallet-transfer-result-muted,
body.white-mode #transferModal .wallet-transfer-hint,
body.white-mode #transferModal .wallet-transfer-recipient,
body.white-mode #transferModal .wallet-transfer-review p {
    color: #5f6b7a !important;
}

/* Force orange styling for Wallet and Earn buttons across ALL modes */
.quick-actions-grid .utility-shortcut-btn.action-wallet .material-icons-round,
.quick-actions-grid .utility-shortcut-btn.action-earn .material-icons-round,
.utility-shortcuts-grid .utility-shortcut-btn.action-wallet .material-icons-round,
.utility-shortcuts-grid .utility-shortcut-btn.action-earn .material-icons-round {
    background: linear-gradient(135deg, #ff9a4d 0%, #ffb347 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(255, 154, 77, 0.22) !important;
    border-color: transparent !important;
}
.utility-shortcuts-grid .utility-shortcut-btn.action-wallet,
.utility-shortcuts-grid .utility-shortcut-btn.action-earn {
    border-color: rgba(255, 154, 77, 0.4) !important;
    background: rgba(255, 154, 77, 0.05) !important;
}
.utility-shortcuts-grid .utility-shortcut-btn.action-wallet:hover,
.utility-shortcuts-grid .utility-shortcut-btn.action-earn:hover {
    border-color: rgba(255, 154, 77, 0.8) !important;
    background: rgba(255, 154, 77, 0.1) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Global SPA async-data skeletons (.spa-skel*)
   Shown only during SPA navigation while api/pagedata.php is in flight; the
   page's fill script removes the skeleton once data arrives. Purely additive —
   no existing component/colour is altered. Lives in theme.css so every user
   page can use it without re-declaring styles.
   ────────────────────────────────────────────────────────────────────────── */
.spa-skel {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    color: transparent !important;
}
body.white-mode .spa-skel {
    background: rgba(17, 24, 39, 0.07);
}
.spa-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    animation: spaSkelShimmer 1.2s infinite;
}
body.white-mode .spa-skel::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}
.spa-skel-num { display: inline-block; min-width: 96px; height: 1.2em; vertical-align: middle; }
.spa-skel-badge { display: inline-block; width: 74px; height: 18px; border-radius: 9px; vertical-align: middle; }
.spa-skel-line { height: 12px; border-radius: 6px; }
.spa-skel-icon { border-radius: 50%; }
.spa-skel-box { border-radius: 16px; }
@keyframes spaSkelShimmer { 100% { transform: translateX(100%); } }