/* Loopex design tokens + dark mode overrides */

:root {
    --lx-primary: #106aff;
    --lx-primary-soft: rgba(16, 106, 255, 0.12);
    --lx-bg: #ffffff;
    --lx-bg-muted: #f5f7fb;
    --lx-surface: #ffffff;
    --lx-surface-2: #fafafa;
    --lx-text: #1a1d26;
    --lx-text-muted: #667085;
    --lx-border: #e7e9ee;
    --lx-shadow: 0 6px 20px rgba(26, 29, 38, 0.06);
    --lx-nav-height: 60px;
    --lx-success: #0f7b4a;
    --lx-danger: #c0392b;
    color-scheme: light;
}

html.theme-dark {
    --lx-primary: #4d8fff;
    --lx-primary-soft: rgba(77, 143, 255, 0.18);
    --lx-bg: #1c1c1c;
    --lx-bg-muted: #222222;
    --lx-surface: #1c1c1c;
    --lx-surface-2: #262626;
    --lx-text: #e8eaed;
    --lx-text-muted: #9aa3b2;
    --lx-border: rgba(255, 255, 255, 0.08);
    --lx-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    --lx-success: #3dcb6c;
    --lx-danger: #ff6b7a;
    color-scheme: dark;
}

html,
body {
    background-color: var(--lx-bg);
    color: var(--lx-text);
    transition: background-color 0.25s ease, color 0.25s ease;
}

html.theme-dark body {
    background: #1c1c1c;
}

/* ── Shell / chrome ── */
html.theme-dark .app-shell,
html.theme-dark .page-container {
    background-color: var(--lx-bg) !important;
    box-shadow: 0 0 0 1px var(--lx-border) !important;
    color: var(--lx-text);
}

html.theme-dark .mobile-topbar,
html.theme-dark .nav-menu,
html.theme-dark .side-menu,
html.theme-dark .top-row,
html.theme-dark .navbar-desktop,
html.theme-dark .top-bar {
    background: var(--lx-surface) !important;
    background-color: var(--lx-surface) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text);
}

html.theme-dark .topbar-divider,
html.theme-dark .side-menu-divider,
html.theme-dark .side-menu-header,
html.theme-dark .side-menu-social {
    background-color: var(--lx-border);
    border-color: var(--lx-border) !important;
}

html.theme-dark .side-menu-link {
    color: var(--lx-text) !important;
}

html.theme-dark .side-menu-link:hover {
    background-color: var(--lx-primary-soft) !important;
    color: var(--lx-primary) !important;
}

html.theme-dark .social-footer {
    background: var(--lx-surface) !important;
    border-color: var(--lx-border) !important;
}

html.theme-dark .social-footer p {
    color: var(--lx-text-muted) !important;
}

html.theme-dark .social-icon {
    background-color: var(--lx-primary-soft) !important;
    color: var(--lx-primary) !important;
}

html.theme-dark .bottom-nav-text {
    color: var(--lx-text-muted);
}

html.theme-dark .active-text {
    color: var(--lx-primary) !important;
}

html.theme-dark .nav-links a {
    color: var(--lx-text-muted);
}

html.theme-dark .footer,
html.theme-dark .footer-text {
    background-color: var(--lx-bg-muted) !important;
    color: var(--lx-text) !important;
}

/* ── Loaders ── */
html.theme-dark .loader-container,
html.theme-dark #loading-screen {
    background-color: var(--lx-bg) !important;
    background: var(--lx-bg) !important;
    color: var(--lx-text);
}

/* ── Common page surfaces / cards ── */
html.theme-dark .menu-card,
html.theme-dark .coin-card,
html.theme-dark .faq-item,
html.theme-dark .gold-product,
html.theme-dark .gold-benefit,
html.theme-dark .gold-faq__panels,
html.theme-dark .stars-search,
html.theme-dark .input-style,
html.theme-dark .field .input,
html.theme-dark input.input,
html.theme-dark select.input,
html.theme-dark textarea.input,
html.theme-dark .mud-paper,
html.theme-dark .mud-expand-panel,
html.theme-dark .mud-list,
html.theme-dark .mud-dialog,
html.theme-dark .mud-popover,
html.theme-dark .mud-table,
html.theme-dark .card,
html.theme-dark .wallet-card,
html.theme-dark .asset-card,
html.theme-dark .ticket-card,
html.theme-dark .order-card,
html.theme-dark .tx-card,
html.theme-dark .stat-card,
html.theme-dark .info-card,
html.theme-dark .soft-tile,
html.theme-dark .feature-card,
html.theme-dark .list-item,
html.theme-dark .sheet,
html.theme-dark .drawer-panel,
html.theme-dark .otp-box,
html.theme-dark .form-section {
    background-color: var(--lx-surface) !important;
    background: var(--lx-surface) !important;
    color: var(--lx-text) !important;
    border-color: var(--lx-border) !important;
    box-shadow: var(--lx-shadow) !important;
}

html.theme-dark .warning-card {
    background: #2a2418 !important;
    background-color: #2a2418 !important;
    border-color: #6a5420 !important;
    color: #d4c08a !important;
    box-shadow: none !important;
}

html.theme-dark .warning-title,
html.theme-dark .warning-title .mud-icon-root,
html.theme-dark .warning-icon {
    color: #f0c14b !important;
}

html.theme-dark .warning-text,
html.theme-dark .warning-desc,
html.theme-dark .warning-card p {
    color: #d4c08a !important;
}

html.theme-dark .profile-sidebar,
html.theme-dark .profile-top,
html.theme-dark .profile-main,
html.theme-dark .midPage,
html.theme-dark .container,
html.theme-dark .layout,
html.theme-dark .gold-page,
html.theme-dark .stars-page,
html.theme-dark .trade-page,
html.theme-dark .market-page,
html.theme-dark .wallet-page {
    color: var(--lx-text);
}

html.theme-dark .name,
html.theme-dark .title,
html.theme-dark .header-title,
html.theme-dark .section-title,
html.theme-dark .toolbar-title,
html.theme-dark .gold-section-title,
html.theme-dark .gold-product__symbol,
html.theme-dark .gold-product__price,
html.theme-dark .gold-hero__amount,
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4 {
    color: var(--lx-text) !important;
}

    html.theme-dark .subtitle,
    html.theme-dark .phone,
    html.theme-dark .coin-name,
    html.theme-dark .gold-product__name,
    html.theme-dark .gold-product__price-label,
    html.theme-dark .gold-hero__hint,
    html.theme-dark .gold-hero__label,
    html.theme-dark .muted,
    html.theme-dark .text-muted,
    html.theme-dark p {
        /*color: var(--lx-text-muted) !important;*/
        color: #f3f3f3 !important;
    }

html.theme-dark .gold-hero {
    background: linear-gradient(145deg, #2a2416 0%, #1e1a12 45%, #15120e 100%) !important;
    border-color: rgba(201, 162, 39, 0.28) !important;
}

html.theme-dark .hero.review {
    background: linear-gradient(180deg, #1e2a3d 0%, #18202c 100%) !important;
    border-color: rgba(77, 143, 255, 0.4) !important;
}

html.theme-dark .hero.progress {
    background: linear-gradient(180deg, #2a2418 0%, #1e1a12 100%) !important;
    border-color: rgba(240, 193, 75, 0.35) !important;
}

html.theme-dark .hero.done {
    background: linear-gradient(180deg, #1a2a20 0%, #16201a 100%) !important;
    border-color: rgba(61, 203, 108, 0.35) !important;
}

html.theme-dark .gold-hero__label {
    color: #e0c15a !important;
}

html.theme-dark .gold-benefit {
    background: var(--lx-surface-2) !important;
}

html.theme-dark .gold-benefit__icon {
    background: rgba(201, 162, 39, 0.18) !important;
    color: #e0c15a !important;
}

html.theme-dark label,
html.theme-dark .field label {
    color: var(--lx-text-muted) !important;
}

html.theme-dark .input,
html.theme-dark input,
html.theme-dark select,
html.theme-dark textarea {
    color: var(--lx-text);
    background-color: var(--lx-surface-2);
    border-color: var(--lx-border);
}

html.theme-dark .input::placeholder,
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder {
    color: #6b7380;
}

/* Glass headers / bars */
html.theme-dark .glass-bar {
    /*background: rgba(21, 26, 34, 0.88) !important;*/
    backdrop-filter: blur(12px);
    color: var(--lx-text);
}

/* Home / market tiles often use white */
html.theme-dark .bg-white,
html.theme-dark [class*="bg-white"] {
    background-color: var(--lx-surface) !important;
}

html.theme-dark .text-gray-700,
html.theme-dark .text-gray-800,
html.theme-dark .text-gray-900,
html.theme-dark .text-slate-700,
html.theme-dark .text-slate-800,
html.theme-dark .text-slate-900 {
    color: var(--lx-text) !important;
}

html.theme-dark .text-gray-500,
html.theme-dark .text-gray-600,
html.theme-dark .text-slate-500,
html.theme-dark .text-slate-600 {
    color: var(--lx-text-muted) !important;
}

html.theme-dark .border,
html.theme-dark .border-gray-200,
html.theme-dark .border-slate-200 {
    border-color: var(--lx-border) !important;
}

/* MudBlazor polish */
html.theme-dark .mud-input-control,
html.theme-dark .mud-input,
html.theme-dark .mud-input-slot {
    color: var(--lx-text);
}

html.theme-dark .mud-overlay {
    backdrop-filter: blur(2px);
}

html.theme-dark .swal2-popup {
    background: var(--lx-surface) !important;
    color: var(--lx-text) !important;
}

/* Auth / login surfaces */
html.theme-dark .login-page,
html.theme-dark .otp-page,
html.theme-dark .auth-page,
html.theme-dark .auth-card,
html.theme-dark .login-card,
html.theme-dark .signin-card {
    background: var(--lx-bg) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .auth-header h3,
html.theme-dark .auth-title,
html.theme-dark .auth-back-btn {
    color: var(--lx-text) !important;
}

html.theme-dark .auth-text,
html.theme-dark .logo-text,
html.theme-dark .timer-box,
html.theme-dark .terms-message {
    color: var(--lx-text-muted) !important;
}

html.theme-dark .auth-input,
html.theme-dark .code-input,
html.theme-dark .otp-box {
    background: var(--lx-surface-2) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
    box-shadow: none !important;
}

html.theme-dark .otp-box.is-filled {
    background: var(--lx-primary-soft) !important;
    border-color: var(--lx-primary) !important;
}

html.theme-dark .resend-text,
html.theme-dark .terms-link,
html.theme-dark .mobile-highlight,
html.theme-dark .logo-text .brand {
    color: var(--lx-primary) !important;
}

html.theme-dark .divider {
    background-color: var(--lx-border) !important;
}

/* Market page */
html.theme-dark .market-page {
    background: var(--lx-bg) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .market-hero,
html.theme-dark .highlight-card,
html.theme-dark .market-list-card,
html.theme-dark .base-switch,
html.theme-dark .market-search {
    background: var(--lx-surface) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .market-row {
    background: transparent !important;
    box-shadow: none !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .list-head {
    background: var(--lx-surface-2) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text-muted) !important;
}

html.theme-dark .mini-icon,
html.theme-dark .coin-icon {
    background: var(--lx-surface-2) !important;
    border-color: var(--lx-border) !important;
}

/* Home tiles & market */
html.theme-dark .soft-tile,
html.theme-dark .home-card,
html.theme-dark .top-coins-grid .coin-card:not(.bg-xaut):not(.bg-paxg),
html.theme-dark .market-item,
html.theme-dark .currency-item,
html.theme-dark .filter-chip,
html.theme-dark .tab-btn,
html.theme-dark .chip {
    background-color: var(--lx-surface) !important;
    color: var(--lx-text) !important;
    border-color: var(--lx-border) !important;
}

html.theme-dark .bg-xaut,
html.theme-dark .bg-paxg {
    background: linear-gradient(145deg, #8a7028, #5c4a14) !important;
    color: #fff8e7 !important;
}

/* Trade converter */
html.theme-dark .converter-wrapper,
html.theme-dark .converter-box,
html.theme-dark .trade-box,
html.theme-dark .amount-box,
html.theme-dark .summary-box,
html.theme-dark .coin-drawer,
html.theme-dark .drawer-sheet,
html.theme-dark .currency-dropdown {
    background: var(--lx-surface) !important;
    color: var(--lx-text) !important;
    border-color: var(--lx-border) !important;
}

html.theme-dark .trade-mode-tabs,
html.theme-dark .currency-wrapper,
html.theme-dark .balance-slider,
html.theme-dark .summary-card,
html.theme-dark .fee-row,
html.theme-dark .fee-trade-row,
html.theme-dark .drawer-note {
    background: var(--lx-bg-muted) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .currency-row {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

html.theme-dark .drawer-overlay {
    background: rgba(0, 0, 0, 0.62) !important;
}

html.theme-dark .drawer-body,
html.theme-dark .drawer-sheet .drawer-header {
    background: var(--lx-surface) !important;
    color: var(--lx-text) !important;
    border-color: var(--lx-border) !important;
}

html.theme-dark .drawer-actions {
    background: var(--lx-surface) !important;
}

html.theme-dark .drawer-actions .drawer-cancel {
    background: var(--lx-surface-2) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .fee-trade-rows {
    background: color-mix(in srgb, var(--lx-bg) 55%, var(--lx-surface-2)) !important;
    border-color: var(--lx-border) !important;
}

html.theme-dark .trade-mode-tab {
    background: transparent !important;
    color: var(--lx-text-muted) !important;
}

html.theme-dark .trade-mode-tab.active {
    background: var(--lx-surface-2) !important;
    color: var(--lx-primary) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

html.theme-dark .currency-symbol {
    background: color-mix(in srgb, var(--lx-surface) 55%, var(--lx-surface-2)) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
    box-shadow: none !important;
}

html.theme-dark .currency-amount-input,
html.theme-dark .currency-code,
html.theme-dark .input-label,
html.theme-dark .balance-slider-label,
html.theme-dark .balance-mark {
    color: var(--lx-text) !important;
}

html.theme-dark .input-label,
html.theme-dark .currency-sub,
html.theme-dark .balance-slider-label,
html.theme-dark .balance-mark {
    color: var(--lx-text-muted) !important;
}

html.theme-dark .balance-mark.active,
html.theme-dark .balance-mark:hover,
html.theme-dark .balance-slider-percent,
html.theme-dark .trade-mode-tab:hover {
    color: var(--lx-primary) !important;
}

html.theme-dark .balance-mark.active,
html.theme-dark .balance-mark:hover {
    background: var(--lx-primary-soft) !important;
}

html.theme-dark .balance-slider-input {
    background: linear-gradient(
        to right,
        var(--lx-primary) 0%,
        var(--lx-primary) var(--slider-progress, 0%),
        #3a3a3a var(--slider-progress, 0%),
        #3a3a3a 100%
    ) !important;
}

html.theme-dark .balance-slider-input::-webkit-slider-thumb,
html.theme-dark .balance-slider-input::-moz-range-thumb {
    background: #2a2a2a !important;
    border-color: var(--lx-primary) !important;
}

html.theme-dark .fee-trade-pill {
    background: var(--lx-primary-soft) !important;
    color: var(--lx-primary) !important;
    border-color: var(--lx-border) !important;
}

/* Orders */
html.theme-dark .orders-container,
html.theme-dark .orders-page {
    background: var(--lx-bg) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .order-card {
    background: var(--lx-surface) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .order-body {
    background: var(--lx-surface-2) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .input-group input {
    background: var(--lx-surface-2) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .input-group label {
    background: transparent !important;
    color: var(--lx-text-muted) !important;
}

html.theme-dark .pdp-input-box {
    background: var(--lx-surface-2) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .pdp-input {
    color: var(--lx-text) !important;
    background: transparent !important;
}

html.theme-dark .pdp-popup {
    background: var(--lx-surface) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .pdp-day,
html.theme-dark .pdp-cell,
html.theme-dark .pdp-label-btn,
html.theme-dark .pdp-header-title {
    color: var(--lx-text) !important;
}

html.theme-dark .pdp-nav,
html.theme-dark .pdp-label-btn {
    background: var(--lx-surface-2) !important;
}

html.theme-dark .order-date,
html.theme-dark .currency-symbol,
html.theme-dark .amount-text,
html.theme-dark .no-orders-text {
    color: var(--lx-text-muted) !important;
}

html.theme-dark .order-number,
html.theme-dark .order-toggle,
html.theme-dark .convert-arrow {
    color: var(--lx-primary) !important;
}

html.theme-dark .bottom-sheet {
    background: var(--lx-surface) !important;
    color: var(--lx-text) !important;
}

/* Referral */
html.theme-dark .referral-wrapper,
html.theme-dark .referral-code-box,
html.theme-dark .stat-box,
html.theme-dark .modal-content {
    background: var(--lx-surface) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .referral-code-box,
html.theme-dark .stat-box {
    background: var(--lx-surface-2) !important;
}

html.theme-dark .referral-title,
html.theme-dark .referral-label,
html.theme-dark .referral-code,
html.theme-dark .stat-value,
html.theme-dark .referral-back-btn {
    color: var(--lx-text) !important;
}

html.theme-dark .referral-description,
html.theme-dark .referral-descriptions,
html.theme-dark .stat-label,
html.theme-dark .referral-copy-btn {
    color: var(--lx-text-muted) !important;
}

html.theme-dark .modal-content h3 {
    color: var(--lx-primary) !important;
}

/* Support */
html.theme-dark .support-item {
    background: var(--lx-surface) !important;
    border-color: var(--lx-border) !important;
    color: var(--lx-text) !important;
}

html.theme-dark .support-title-text,
html.theme-dark .support-back-btn,
html.theme-dark .header-title {
    color: var(--lx-text) !important;
}

html.theme-dark .support-subtitle-text,
html.theme-dark .support-chevron {
    color: var(--lx-text-muted) !important;
}

/* Wallet */
html.theme-dark .balance-card,
html.theme-dark .wallet-header,
html.theme-dark .asset-row,
html.theme-dark .action-btn {
    background: var(--lx-surface) !important;
    color: var(--lx-text) !important;
    border-color: var(--lx-border) !important;
}

/* Generic white hard overrides for leftover page CSS */
html.theme-dark [style*="background-color: #fff"],
html.theme-dark [style*="background-color:#fff"],
html.theme-dark [style*="background-color: white"],
html.theme-dark [style*="background-color:white"],
html.theme-dark [style*="background: #fff"],
html.theme-dark [style*="background:#fff"],
html.theme-dark [style*="background: white"],
html.theme-dark [style*="background:white"] {
    background-color: var(--lx-surface) !important;
}

html.theme-dark [style*="color: #333"],
html.theme-dark [style*="color:#333"],
html.theme-dark [style*="color: #1a1d26"],
html.theme-dark [style*="color:#1a1d26"],
html.theme-dark [style*="color: #16324a"],
html.theme-dark [style*="color:#16324a"] {
    color: var(--lx-text) !important;
}

/* Scrollbars remain hidden; keep focus rings visible */
html.theme-dark *:focus-visible {
    outline-color: var(--lx-primary);
}

/* Theme toggle button */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: none;
    border-radius: 0.45rem;
    background: var(--lx-primary-soft);
    color: var(--lx-primary);
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
}

.theme-toggle-btn:hover {
    background: color-mix(in srgb, var(--lx-primary) 18%, transparent);
}

.theme-toggle-btn:active {
    opacity: 0.9;
}

.theme-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--lx-border);
    background: var(--lx-surface);
    box-shadow: var(--lx-shadow);
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: start;
}

.theme-toggle-row__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.theme-toggle-row__title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--lx-text);
}

.theme-toggle-row__sub {
    font-size: 0.78rem;
    color: var(--lx-text-muted);
}

.theme-toggle-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--lx-primary-soft);
    color: var(--lx-primary);
    flex-shrink: 0;
}