/* Unified interface layer. Loaded last so legacy pages follow one visual system. */
:root {
    --ui-radius-xs: 10px;
    --ui-radius-sm: 14px;
    --ui-radius-md: 18px;
    --ui-radius-lg: 24px;
    --ui-shadow-xs: 0 4px 14px rgba(15, 23, 42, .045);
    --ui-shadow-sm: 0 10px 30px rgba(15, 23, 42, .075);
    --ui-shadow-md: 0 22px 60px rgba(15, 23, 42, .12);
    --ui-ring: 0 0 0 4px rgba(var(--primary-rgb), .13);

    /* Map page-specific legacy palettes back to the admin theme. */
    --fintech-primary: var(--primary);
    --fintech-primary-dark: var(--primary-d);
    --fintech-primary-light: rgba(var(--primary-rgb), .10);
    --fintech-bg: transparent;
    --fintech-card-bg: var(--theme-surface);
    --fintech-text: var(--text-main);
    --fintech-text-main: var(--text-main);
    --fintech-text-muted: var(--text-muted);
    --fintech-border: var(--theme-border);
    --dash-primary: var(--primary);
    --dash-primary-light: rgba(var(--primary-rgb), .10);
    --dash-bg-card: var(--theme-surface);
    --dash-border: var(--theme-border);
    --dash-text-dark: var(--text-main);
    --dash-text-muted: var(--text-muted);
    --or: var(--primary);
    --or-d: var(--primary-d);
    --or-l: rgba(var(--primary-rgb), .10);
    --p-orange: var(--primary);
    --p-orange-dark: var(--primary-d);
    --p-orange-soft: rgba(var(--primary-rgb), .10);
    --body-bg: transparent;
    --bg: transparent;
    --surface: var(--theme-surface);
    --card: var(--theme-surface);
    --glass: rgba(var(--surface-rgb), .86);
    --bdr: var(--theme-border);
    --ink: var(--text-main);
    --ink-m: var(--text-muted);
    --ink-s: color-mix(in srgb, var(--text-muted) 75%, transparent);
}

html { background: var(--theme-page) !important; }
body {
    color: var(--text-main) !important;
    line-height: 1.65;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 12%, rgba(var(--primary-rgb), .13), transparent 26rem),
        radial-gradient(circle at 90% 75%, rgba(var(--primary-rgb), .08), transparent 24rem);
}

/* Layout rhythm shared by every member/admin page. */
.dashboard-wrap {
    width: 100%;
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: stretch;
    background: transparent !important;
}
.dashboard-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: clamp(1rem, 2.1vw, 2rem) !important;
    background: transparent !important;
}
.dashboard-container,
.main-container,
.page-container,
.container-content {
    width: min(100%, 1320px) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
}
.scope-member:not(.auth-layout) > main,
.scope-guest:not(.auth-layout) > main {
    position: relative;
}

/* Navigation */
.navbar-smm {
    min-height: 72px;
    background: color-mix(in srgb, var(--theme-surface) 89%, transparent) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .055) !important;
}
.navbar-brand .site-logo {
    background: var(--theme-muted) !important;
    border: 1px solid var(--theme-border);
    box-shadow: none !important;
}
.nav-link {
    color: var(--text-muted) !important;
    border: 1px solid transparent;
}
.nav-link:hover,
.nav-link.active {
    color: var(--primary-d) !important;
    border-color: rgba(var(--primary-rgb), .14);
    background: rgba(var(--primary-rgb), .08) !important;
    transform: none !important;
}
.dropdown-menu {
    padding: .65rem !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: color-mix(in srgb, var(--theme-surface) 96%, transparent) !important;
    box-shadow: var(--ui-shadow-md) !important;
    backdrop-filter: blur(20px);
}
.dropdown-item {
    color: var(--text-main) !important;
    border-radius: 11px !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--primary-d) !important;
    background: rgba(var(--primary-rgb), .09) !important;
}
.mobile-main-menu,
.mobile-main-menu .offcanvas-header,
.mobile-main-menu .mobile-menu-footer {
    background: color-mix(in srgb, var(--theme-surface) 96%, transparent) !important;
    border-color: var(--theme-border) !important;
}
.mobile-menu-icon,
.mobile-avatar,
.mobile-login-status,
.mobile-close-btn {
    background: var(--theme-muted) !important;
    color: var(--primary-d) !important;
    border-color: var(--theme-border) !important;
}
.mobile-menu-link.active .mobile-menu-icon {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-d)) !important;
}

/* Typography and page headings */
.page-title,
.header-title,
.dashboard-title,
.section-title,
.card-title,
h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
}
.page-title {
    letter-spacing: -.035em;
    font-weight: 900 !important;
}
.page-subtitle,
.header-subtitle,
.section-subtitle,
.help-text,
.form-text,
small.text-muted {
    color: var(--text-muted) !important;
}
.header-action {
    padding: 1.1rem 1.2rem !important;
    margin-bottom: 1.35rem !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--ui-radius-md);
    background: color-mix(in srgb, var(--theme-surface) 91%, transparent) !important;
    box-shadow: var(--ui-shadow-xs);
    backdrop-filter: blur(16px);
}

/* One card system for old and new pages. */
.card,
.card-smm,
.card-glass,
.dash-card,
.premium-card,
.checkout-card,
.form-container,
.api-card,
.terms-card,
.profile-card,
.service-card,
.order-card-item,
.deposit-card-item,
.filter-wrapper,
.table-container,
.stat-card,
.info-card,
.setting-card,
.panel-card,
.summary-card,
.wallet-card:not(.wallet-hero),
.clean-card {
    color: var(--text-main) !important;
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-xs) !important;
    backdrop-filter: blur(18px);
}
.card:hover,
.card-smm:hover,
.dash-card:hover,
.premium-card:hover,
.service-card:hover,
.api-card:hover,
.terms-card:hover {
    border-color: rgba(var(--primary-rgb), .32) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}
.card-header,
.card-footer,
.section-head,
.api-section-head,
.terminal-header,
.table-card-header {
    color: var(--text-main) !important;
    background: transparent !important;
    border-color: var(--theme-border) !important;
}
.section-icon,
.stat-icon,
.stat-icon-wrapper,
.card-icon,
.info-icon,
.step-circle,
.service-icon,
.platform-icon {
    color: var(--primary-d) !important;
    background: rgba(var(--primary-rgb), .10) !important;
    border-color: rgba(var(--primary-rgb), .18) !important;
    box-shadow: none !important;
}

/* Forms */
.form-control,
.form-select,
.clean-input,
.clean-select,
.filter-select,
.search-input,
.input-group-text,
textarea,
select {
    color: var(--text-main) !important;
    background-color: color-mix(in srgb, var(--theme-muted) 92%, transparent) !important;
    border: 1.5px solid var(--theme-border) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}
.clean-input,
.clean-select,
.filter-select {
    width: 100%;
    min-height: 44px;
    padding: .68rem .9rem;
    font: inherit;
}
.form-control:focus,
.form-select:focus,
.clean-input:focus,
.clean-select:focus,
.filter-select:focus,
textarea:focus,
select:focus {
    color: var(--text-main) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--primary) !important;
    box-shadow: var(--ui-ring) !important;
    outline: 0;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.clean-input[readonly] {
    color: var(--text-muted) !important;
    background: color-mix(in srgb, var(--theme-muted) 86%, transparent) !important;
    opacity: .82;
}
.form-label {
    color: var(--text-main) !important;
    font-weight: 800 !important;
}
.form-check-input {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--theme-border)) !important;
}
.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.switch-box,
.seamless-group,
.search-input-box,
.upload-zone,
.info-list-row,
.summary-row,
.mobile-meta-grid,
.sync-rule-help {
    background: color-mix(in srgb, var(--theme-muted) 92%, transparent) !important;
    border-color: var(--theme-border) !important;
}

/* Buttons */
.btn,
.btn-action,
.btn-orange,
.btn-save,
.btn-submit,
.btn-submit-order,
.btn-filter,
.btn-soft,
.btn-nav-login,
.btn-nav-register {
    border-radius: 12px !important;
    font-weight: 800 !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}
.btn-primary,
.btn-orange,
.btn-save,
.btn-submit,
.btn-submit-order,
.btn-filter,
.btn-action.primary,
.btn-nav-register {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-d)) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), .20) !important;
}
.btn-primary:hover,
.btn-orange:hover,
.btn-save:hover,
.btn-submit:hover,
.btn-submit-order:hover,
.btn-filter:hover,
.btn-action.primary:hover,
.btn-nav-register:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(var(--primary-rgb), .28) !important;
}
.btn-light,
.btn-secondary,
.btn-outline-secondary,
.btn-soft,
.btn-nav-login {
    color: var(--text-main) !important;
    background: var(--theme-muted) !important;
    border-color: var(--theme-border) !important;
}
.btn-light:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-soft:hover,
.btn-nav-login:hover {
    color: var(--primary-d) !important;
    background: rgba(var(--primary-rgb), .09) !important;
    border-color: rgba(var(--primary-rgb), .28) !important;
}
.btn-outline-primary {
    color: var(--primary-d) !important;
    background: transparent !important;
    border-color: rgba(var(--primary-rgb), .45) !important;
}
.btn-outline-primary:hover {
    color: #fff !important;
    background: var(--primary) !important;
}

/* Tables and list data */
.table-responsive,
.table-container,
.desktop-table-container {
    border-radius: var(--ui-radius-md);
}
.table {
    margin-bottom: 0 !important;
    color: var(--text-main) !important;
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--text-main) !important;
    --bs-table-border-color: var(--theme-border) !important;
}
.table thead th,
.clean-table th,
.table-smm thead th {
    color: var(--text-muted) !important;
    background: color-mix(in srgb, var(--theme-muted) 94%, transparent) !important;
    border-color: var(--theme-border) !important;
    font-size: .77rem !important;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table tbody td,
.clean-table td,
.table-smm td {
    color: var(--text-main) !important;
    background: transparent !important;
    border-color: color-mix(in srgb, var(--theme-border) 76%, transparent) !important;
}
.table tbody tr:hover > *,
.clean-table tbody tr:hover > * {
    background: rgba(var(--primary-rgb), .045) !important;
}
.pagination .page-link {
    color: var(--text-main) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}
.pagination .active .page-link {
    color: #fff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Alerts, badges and tabs */
.alert {
    border-radius: var(--ui-radius-sm) !important;
    border-width: 1px !important;
    box-shadow: none !important;
}
.alert-light,
.alert-secondary,
.alert-info {
    color: var(--text-main) !important;
    background: color-mix(in srgb, var(--theme-muted) 92%, transparent) !important;
    border-color: var(--theme-border) !important;
}
.badge-soft,
.custom-badge,
.code-pill,
.balance-pill,
.badge-opt,
.badge-req {
    border-radius: 999px !important;
    border: 1px solid var(--theme-border) !important;
}
.nav-tabs,
.nav-pills {
    border-color: var(--theme-border) !important;
}
.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--text-muted) !important;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--primary-d) !important;
    background: rgba(var(--primary-rgb), .10) !important;
    border-color: rgba(var(--primary-rgb), .24) !important;
}

/* Admin sidebar shared by every back-office page. */
.admin-sidebar {
    width: 278px !important;
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent) !important;
    border-right: 1px solid var(--theme-border) !important;
    box-shadow: 12px 0 34px rgba(15, 23, 42, .035);
    backdrop-filter: blur(20px);
}
.admin-sidebar-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary) 25%, var(--theme-border)) !important;
}
.admin-sidebar-section {
    color: var(--text-muted) !important;
    letter-spacing: .075em !important;
}
.admin-sidebar-link {
    min-height: 48px;
    color: var(--text-muted) !important;
    border: 1px solid transparent;
    border-radius: 14px !important;
}
.admin-sidebar-link:hover {
    color: var(--primary-d) !important;
    background: rgba(var(--primary-rgb), .07) !important;
    border-color: rgba(var(--primary-rgb), .14);
    transform: translateX(2px) !important;
}
.admin-sidebar-link.active {
    color: var(--primary-d) !important;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .15), rgba(var(--primary-rgb), .065)) !important;
    border-color: rgba(var(--primary-rgb), .20);
    box-shadow: inset 3px 0 0 var(--primary);
}
.admin-sidebar-link.admin-logout-link {
    color: #dc2626 !important;
    background: color-mix(in srgb, #ef4444 8%, var(--theme-surface)) !important;
    border-color: color-mix(in srgb, #ef4444 25%, var(--theme-border)) !important;
}
.mobile-toggle-wrapper {
    background: transparent !important;
}
.mobile-toggle-btn {
    color: var(--text-main) !important;
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent) !important;
    border-color: var(--theme-border) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

/* API docs and code areas */
.terminal-wrapper,
.code-box,
.api-code,
.api-json,
pre,
code.code-block {
    border-color: color-mix(in srgb, var(--primary) 25%, #1e293b) !important;
    border-radius: var(--ui-radius-sm) !important;
}
.terminal-wrapper,
.code-box,
.api-code,
.api-json,
pre {
    background: color-mix(in srgb, #0f172a 94%, var(--primary)) !important;
    color: #e2e8f0 !important;
}
code:not(.code-block) {
    color: var(--primary-d);
}
.doc-menu-item {
    color: var(--text-muted) !important;
    border-color: transparent !important;
}
.doc-menu-item:hover,
.doc-menu-item.active {
    color: var(--primary-d) !important;
    background: rgba(var(--primary-rgb), .09) !important;
    border-color: rgba(var(--primary-rgb), .18) !important;
}

/* Member pages with older fintech styles. */
.page-profile .profile-wrapper,
.page-deposit .deposit-wrapper,
.page-order_create .order-wrapper,
.page-orders .orders-wrapper,
.page-services .services-wrapper,
.page-premium_apps .premium-wrapper {
    background: transparent !important;
}
.page-profile .profile-hero,
.page-deposit .wallet-card,
.page-dashboard .wallet-panel,
.page-dashboard .dashboard-hero {
    border-radius: var(--ui-radius-lg) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    background:
        radial-gradient(circle at 82% 12%, rgba(255,255,255,.21), transparent 25%),
        linear-gradient(145deg, var(--primary), var(--primary-d)) !important;
    box-shadow: 0 22px 55px rgba(var(--primary-rgb), .24) !important;
}
.page-profile .profile-card,
.page-deposit .deposit-card,
.page-order_create .checkout-card,
.page-orders .orders-card {
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent) !important;
    border-color: var(--theme-border) !important;
}
.page-deposit .channel-option,
.page-deposit .deposit-method-card,
.page-deposit .method-card,
.page-order_create .platform-card,
.page-order_create .service-option,
.page-premium_apps .premium-card {
    color: var(--text-main) !important;
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent) !important;
    border-color: var(--theme-border) !important;
}
.page-deposit .channel-option.active,
.page-deposit .deposit-method-card.active,
.page-deposit .method-card.active,
.page-order_create .platform-card.active,
.page-order_create .service-option.active {
    color: var(--primary-d) !important;
    background: rgba(var(--primary-rgb), .10) !important;
    border-color: var(--primary) !important;
    box-shadow: var(--ui-ring) !important;
}

/* Landing and auth are already custom-built; only unify their surfaces and palette edges. */
.page-index .home-section.section-tinted {
    background: color-mix(in srgb, var(--theme-muted) 82%, transparent) !important;
}
.page-index .platform-card,
.page-index .feature-card,
.page-index .category-card,
.page-index .console-card {
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent) !important;
    border-color: var(--theme-border) !important;
}
.auth-layout .auth-frame {
    border-color: var(--theme-border) !important;
    background: color-mix(in srgb, var(--theme-surface) 84%, transparent) !important;
}
.auth-layout .auth-form-pane {
    background: color-mix(in srgb, var(--theme-surface) 96%, transparent) !important;
}
.auth-layout .auth-input {
    color: var(--text-main) !important;
    background: var(--theme-muted) !important;
    border-color: var(--theme-border) !important;
}

/* Modal/offcanvas consistency */
.modal-content,
.offcanvas,
.popover,
.toast {
    color: var(--text-main) !important;
    background: color-mix(in srgb, var(--theme-surface) 96%, transparent) !important;
    border-color: var(--theme-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-md) !important;
}
.modal-header,
.modal-footer,
.offcanvas-header {
    border-color: var(--theme-border) !important;
}
.btn-close {
    filter: none;
}

/* Footer */
footer {
    margin-top: 1.5rem;
    background: color-mix(in srgb, var(--theme-surface) 90%, transparent) !important;
    border-top-color: var(--theme-border) !important;
}

/* Prevent old hard-coded white panels from ignoring dark/custom palettes. */
.bg-white,
.bg-light,
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"] {
    border-color: var(--theme-border) !important;
}
.bg-white { background-color: var(--theme-surface) !important; }
.bg-light { background-color: var(--theme-muted) !important; }
.text-dark { color: var(--text-main) !important; }
.text-muted { color: var(--text-muted) !important; }
.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--theme-border) !important; }

/* Responsive cleanup across all screens. */
@media (max-width: 991.98px) {
    .dashboard-wrap { flex-direction: column; }
    .dashboard-content { padding: 1rem !important; }
    .admin-sidebar { width: min(88vw, 310px) !important; }
    .header-action { padding: 1rem !important; }
}
@media (max-width: 767.98px) {
    .dashboard-content { padding: .8rem !important; }
    .dash-card,
    .card,
    .card-smm,
    .premium-card,
    .api-card,
    .terms-card { border-radius: 16px !important; }
    .page-title { font-size: clamp(1.45rem, 7vw, 1.85rem) !important; }
    .header-action { align-items: flex-start !important; }
    .table-responsive { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}