* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #1491e5;
    --primary-dark: #0d7cc7;
    --navy: #0f1c3f;
    --success: #16c47f;
    --danger: #ef4444;
    --text-main: #0f172a;
    --text-soft: #64748b;
    --border-soft: #d9e2ec;
    --surface-white: #ffffff;
    --surface-blue: #f3f8ff;
    --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
    --radius-xl: 24px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background .25s ease, color .25s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-app {
    min-height: 76px;
    padding: 18px 28px;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
}

body.theme-dark .topbar-app {
    background: rgba(17,24,39,0.82);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-page-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.topbar-icon-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--muted);
    position: relative;
    transition: .2s ease;
}

.admin-loan-products-header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-loan-products-top {
    align-items: start;
}

.admin-card__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.admin-card__header p {
    margin: 0;
    color: var(--text-muted, #7c8ba1);
    font-size: 13px;
    line-height: 1.5;
}

.admin-loan-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-block--full {
    grid-column: 1 / -1;
}

.admin-loan-product-switch {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-color, #0f172a);
}

.admin-loan-product-switch input {
    width: 18px;
    height: 18px;
}

.admin-loan-product-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.admin-loan-product-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-loan-preview-tile {
    border: 1px solid rgba(70, 121, 229, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.92));
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-loan-preview-badge {
    align-self: flex-start;
    border-radius: 999px;
    background: rgba(47, 165, 255, 0.14);
    color: #1070d6;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
}

.admin-loan-preview-tile strong {
    font-size: 15px;
}

.admin-loan-preview-tile p {
    margin: 0;
    color: var(--text-muted, #607089);
    font-size: 13px;
    line-height: 1.55;
}

.admin-loan-preview-metrics {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-loan-preview-metrics > div {
    border-radius: 16px;
    background: rgba(18, 35, 74, 0.05);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-loan-preview-metrics span {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #718198);
}

.admin-loan-preview-metrics strong {
    font-size: 14px;
}

.admin-loan-products-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-loan-product-item {
    border: 1px solid rgba(70, 121, 229, 0.16);
    border-radius: 20px;
    padding: 18px 20px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.82);
}

.admin-loan-product-item__main {
    flex: 1;
    min-width: 0;
}

.admin-loan-product-item__head {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: flex-start;
}

.admin-loan-product-item__head h4 {
    margin: 0;
    font-size: 16px;
}

.admin-loan-product-item__head p {
    margin: 4px 0 0;
    color: var(--text-muted, #718198);
    font-size: 12px;
}

.admin-loan-product-item__meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-loan-product-item__meta span {
    border-radius: 999px;
    background: rgba(18, 35, 74, 0.06);
    padding: 7px 12px;
    font-size: 12px;
    color: var(--text-color, #10203a);
}

.admin-loan-product-item__summary {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted, #5f718d);
    line-height: 1.55;
}

.admin-loan-product-item__summary span {
    margin-left: 12px;
    font-weight: 700;
    color: var(--text-color, #0f172a);
}

.admin-loan-product-item__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.credit-product-card__summary {
    margin-top: 8px;
    min-height: 40px;
    color: var(--muted-color, #8aa0bc);
    font-size: 12px;
    line-height: 1.55;
}

.loan-step-intro {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(47, 165, 255, 0.08);
    border: 1px solid rgba(47, 165, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.loan-step-intro strong {
    font-size: 14px;
}

.loan-step-intro span {
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted-color, #7a8da8);
}

.admin-loan-workflow-card {
    margin-bottom: 22px;
}

.admin-loan-workflow-card .admin-card__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.admin-loan-workflow-steps {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}

.admin-loan-workflow-step {
    border-radius: 16px;
    border: 1px solid rgba(18, 35, 74, 0.08);
    background: rgba(18, 35, 74, 0.03);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 92px;
}

.admin-loan-workflow-step span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 35, 74, 0.08);
    font-size: 12px;
    font-weight: 700;
}

.admin-loan-workflow-step strong {
    font-size: 12px;
    line-height: 1.45;
}

.admin-loan-workflow-step.is-active {
    border-color: rgba(47, 165, 255, 0.35);
    background: rgba(47, 165, 255, 0.1);
}

.admin-loan-workflow-step.is-active span {
    background: #1f8fff;
    color: #fff;
}

.admin-loan-workflow-step.is-done {
    border-color: rgba(18, 179, 118, 0.26);
    background: rgba(18, 179, 118, 0.08);
}

.admin-loan-workflow-step.is-done span {
    background: #10b981;
    color: #fff;
}

body.dark-mode .admin-loan-preview-tile,
body.dark-mode .admin-loan-product-item {
    background: rgba(10, 18, 40, 0.82);
    border-color: rgba(95, 137, 255, 0.18);
}

body.dark-mode .admin-loan-preview-metrics > div {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .loan-step-intro {
    background: rgba(47, 165, 255, 0.09);
    border-color: rgba(95, 137, 255, 0.18);
}

body.dark-mode .admin-loan-workflow-step {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
}

body.dark-mode .admin-loan-product-item__meta span {
    background: rgba(255, 255, 255, 0.05);
    color: #d9e4ff;
}

body.dark-mode .admin-loan-preview-tile p,
body.dark-mode .admin-loan-product-item__head p,
body.dark-mode .admin-loan-product-item__summary,
body.dark-mode .admin-card__header p {
    color: rgba(216, 228, 255, 0.72);
}

@media (max-width: 1080px) {
    .admin-loan-product-grid,
    .admin-loan-product-preview-grid,
    .admin-loan-preview-metrics {
        grid-template-columns: 1fr;
    }

    .admin-loan-workflow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-loan-product-item {
        flex-direction: column;
    }

    .admin-loan-product-item__actions {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.topbar-icon-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.topbar-icon-btn .icon,
.topbar-icon-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.topbar-mini-text {
    font-size: 12px;
    font-weight: 700;
    margin-left: 0;
    line-height: 1;
}

.topbar-bell-btn {
    overflow: visible;
}

.topbar-dot {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4d4f;
    border: 2px solid var(--card);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 8px;
    border-left: 1px solid var(--border);
    margin-left: 4px;
}

.topbar-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16a3f7, #0f6abf);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.topbar-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.topbar-user-meta strong {
    font-size: 14px;
    color: var(--text);
}

.topbar-user-meta span {
    font-size: 12px;
    color: var(--muted);
}

.mobile-menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Layout principal */

.app-layout {
    min-height: 100vh;
    display: flex;
    background: var(--bg);
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-main-content {
    padding: 26px 30px 34px;
}

/* Sidebar */

.sidebar {
    width: 252px;
    background: var(--card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 50;
}

.sidebar-head {
    padding: 22px 20px 16px;
}

.sidebar-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Admin public site */
.admin-public-site-form {
    display: grid;
    gap: 1.5rem;
}

.admin-public-site-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.admin-public-site-lang-card {
    padding: 1.35rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.25rem;
    background: rgba(248, 250, 252, 0.82);
}

.admin-public-site-lang-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-public-site-lang-card__head strong {
    font-size: 1rem;
    color: var(--text);
}

.admin-public-site-lang-card__head small {
    color: var(--text-muted);
}

body.theme-dark .admin-public-site-lang-card {
    border-color: rgba(71, 85, 105, 0.5);
    background: rgba(15, 23, 42, 0.72);
}

@media (max-width: 900px) {
    .admin-public-site-lang-grid {
        grid-template-columns: 1fr;
    }
}

.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.4rem;
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.12), rgba(37, 99, 235, 0.12));
    border-bottom: 1px solid rgba(14, 116, 144, 0.18);
}

.impersonation-banner__copy {
    display: grid;
    gap: 0.2rem;
}

.impersonation-banner__copy strong {
    color: var(--text);
    font-size: 0.95rem;
}

.impersonation-banner__copy span {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.impersonation-banner__form {
    flex-shrink: 0;
}

body.theme-dark .impersonation-banner {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.18), rgba(37, 99, 235, 0.16));
    border-bottom-color: rgba(59, 130, 246, 0.2);
}

@media (max-width: 768px) {
    .impersonation-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .impersonation-banner__form {
        width: 100%;
    }

    .impersonation-banner__form .btn {
        width: 100%;
    }
}

.sidebar-logo-media {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1491e5, #0f6abf);
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sidebar-logo-image--dark {
    display: none;
}

body.theme-dark .sidebar-logo-image--light,
body.dark-mode .sidebar-logo-image--light,
html.dark .sidebar-logo-image--light,
[data-theme="dark"] .sidebar-logo-image--light,
.theme-dark .sidebar-logo-image--light {
    display: none;
}

body.theme-dark .sidebar-logo-image--dark,
body.dark-mode .sidebar-logo-image--dark,
html.dark .sidebar-logo-image--dark,
[data-theme="dark"] .sidebar-logo-image--dark,
.theme-dark .sidebar-logo-image--dark {
    display: block;
}

.sidebar-logo-text {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}

.sidebar-logo--custom {
    gap: 0;
    width: 100%;
}

.sidebar-logo--custom .sidebar-logo-media {
    width: auto;
    max-width: 260px;
    height: 60px;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
}

.sidebar-logo--custom .sidebar-logo-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.admin-settings-brand-preview {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
}

.admin-settings-brand-preview.is-hidden {
    display: none;
}

.admin-settings-brand-preview__frame {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
}

.admin-settings-brand-preview__frame--wide {
    width: 160px;
    height: 96px;
    border-radius: 18px;
}

.admin-settings-brand-preview__frame--dark {
    background: #0f172a;
}

.admin-settings-brand-preview__frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.admin-settings-brand-preview__meta {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.admin-settings-brand-preview__meta a {
    color: var(--primary);
    font-weight: 700;
}

.admin-settings-field__hint {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.admin-settings-checkbox--inline {
    margin-top: 10px;
    display: inline-flex;
}

.sidebar-body {
    flex: 1;
    padding: 10px 16px 20px;
}

.sidebar-group {
    display: grid;
    gap: 8px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px;
    border-radius: 14px;
    color: #334155;
    transition: .2s ease;
    font-weight: 500;
}

.sidebar-link:hover {
    background: #eef6ff;
    color: #127bca;
}

.user-nav-link__text {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sidebar-badge--warning {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.sidebar-link.active {
    background: #eaf4ff;
    color: #127bca;
    font-weight: 700;
}

.sidebar-link-icon,
.icon,
.kpi-icon,
.transaction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-link-icon svg,
.icon svg,
.kpi-icon svg,
.transaction-icon svg {
    width: 20px;
    height: 20px;
}

.sidebar-foot {
    padding: 16px;
    border-top: 1px solid var(--border);
}

.sidebar-overlay {
    display: none;
}

/* Dashboard */

.dashboard-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.dashboard-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.dashboard-subtitle {
    color: var(--muted);
    font-size: 15px;
}

.dashboard-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: .2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-dark {
    background: var(--navy);
    color: #fff;
}

.btn-dark:hover {
    background: #0b1531;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

.kpi-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.kpi-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.kpi-label {
    font-size: 15px;
    color: #475569;
    margin-bottom: 10px;
}

.kpi-value {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #0f172a;
}

.kpi-trend {
    font-size: 14px;
    font-weight: 700;
}

.kpi-trend-up {
    color: #10b981;
}

.kpi-trend-down {
    color: #ef4444;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.9fr);
    gap: 22px;
}

.panel-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.panel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

.panel-card-header h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}

.panel-select {
    height: 40px;
    min-width: 190px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0 14px;
    outline: none;
}

.chart-mock {
    position: relative;
    height: 330px;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(to bottom, transparent 24%, rgba(148, 163, 184, 0.14) 25%, transparent 26%),
        linear-gradient(to bottom, transparent 49%, rgba(148, 163, 184, 0.14) 50%, transparent 51%),
        linear-gradient(to bottom, transparent 74%, rgba(148, 163, 184, 0.14) 75%, transparent 76%);
}

.chart-grid-lines {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 72px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #94a3b8;
    font-size: 13px;
    z-index: 2;
}

.chart-svg {
    position: absolute;
    inset: 0 0 0 70px;
    width: calc(100% - 70px);
    height: 100%;
}

.transaction-modern-list {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.transaction-modern-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.transaction-modern-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.transaction-modern-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.transaction-modern-title {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
}

.transaction-modern-date {
    color: var(--muted);
    font-size: 14px;
}

.transaction-modern-right {
    font-weight: 700;
    white-space: nowrap;
}

.amount-positive {
    color: #10b981;
}

.amount-negative {
    color: #0f172a;
}

.panel-link {
    color: #0f8ce9;
    font-weight: 600;
    font-size: 15px;
}

.panel-link:hover {
    text-decoration: underline;
}

/* Auth conservé mais premium simple */

.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 28%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.10), transparent 24%),
        linear-gradient(135deg, var(--bg-soft), var(--bg));
    color: var(--text);
}

.auth-screen {
    min-height: calc(100vh - 78px);
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 24px 56px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 28px;
    align-items: stretch;
}

.auth-showcase {
    border-radius: 32px;
    padding: 38px;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.02)), var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.auth-showcase-content {
    position: relative;
    z-index: 2;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 14px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary);
    border: 1px solid rgba(37, 99, 235, 0.16);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 24px;
}

.auth-showcase h1 {
    font-size: 46px;
    line-height: 1.08;
    letter-spacing: -1px;
    margin-bottom: 18px;
    max-width: 620px;
}

.auth-showcase p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 28px;
    max-width: 600px;
}

.auth-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.auth-mini-card {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.45);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
}

body.theme-dark .auth-mini-card {
    background: rgba(15, 23, 42, 0.45);
}

.auth-mini-label {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.auth-mini-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.auth-card {
    align-self: center;
    width: 100%;
    max-width: 520px;
    padding: 34px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.auth-card-header {
    margin-bottom: 26px;
}

.auth-card-header h1 {
    font-size: 34px;
    letter-spacing: -0.8px;
    margin-bottom: 10px;
}

.auth-card-header p {
    color: var(--muted);
    line-height: 1.6;
    font-size: 15px;
}

.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    outline: none;
    background: var(--surface);
    color: var(--text);
    font-size: 15px;
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}

.auth-actions {
    display: grid;
    gap: 12px;
    margin-top: 10px;
}

.auth-footer {
    margin-top: 20px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.auth-footer a {
    color: var(--primary);
    font-weight: 700;
}

.otp-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    border-radius: 18px;
    border: 1px dashed var(--border);
    background: var(--surface);
    color: var(--muted);
    margin-bottom: 18px;
    font-size: 14px;
    text-align: center;
    padding: 12px;
}

.otp-input {
    text-align: center;
    letter-spacing: 10px;
    font-size: 24px;
    font-weight: 800;
}

.auth-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.alert {
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.5;
}

.alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.alert-success {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

body.theme-dark .alert-danger {
    background: rgba(127, 29, 29, 0.22);
    color: #fecaca;
    border-color: #7f1d1d;
}

body.theme-dark .alert-success {
    background: rgba(20, 83, 45, 0.22);
    color: #bbf7d0;
    border-color: #14532d;
}

/* Responsive */

@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    body.sidebar-open {
        overflow: hidden;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        max-width: min(88vw, 340px);
        transform: translateX(calc(-100% - 18px));
        transition: transform .28s ease;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.32);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 45;
    }

    .sidebar-overlay.is-open {
        display: block;
    }

    .mobile-menu-btn {
        display: inline-flex;
    }

    .topbar-user-meta {
        display: none;
    }

    .app-main-content {
        padding: 20px 18px 26px;
    }

    .dashboard-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-actions {
        width: 100%;
    }

    .dashboard-actions .btn {
        flex: 1;
    }

    .auth-screen {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .topbar-app {
        padding: 10px 10px;
    }

    .topbar-right {
        gap: 8px;
    }

    .topbar-user {
        padding-left: 0;
        border-left: none;
        margin-left: 0;
    }

    .topbar-icon-btn {
        width: 38px;
        height: 38px;
    }

    .topbar-mini-text {
        display: none;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-title {
        font-size: 21px;
    }

    .panel-card,
    .kpi-card {
        padding: 18px;
        border-radius: 18px;
    }

    .panel-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-select {
        width: 100%;
        min-width: 0;
    }

    .auth-showcase-grid,
    .auth-link-grid {
        grid-template-columns: 1fr;
    }

    .auth-showcase,
    .auth-card {
        padding: 24px;
        border-radius: 22px;
    }

    .auth-showcase h1 {
        font-size: 32px;
    }

    .auth-card-header h1 {
        font-size: 28px;
    }

    .otp-input {
        letter-spacing: 6px;
        font-size: 20px;
    }
    
}
body {
    font-family: 'Inter', sans-serif;
    background: #f5f7fb;
}

/* AUTH PAGE */

.auth-container{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:40px;
}

.auth-card{
    width:420px;
    background:white;
    border-radius:16px;
    padding:40px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.auth-logo{
    font-size:22px;
    font-weight:700;
    margin-bottom:25px;
}

.auth-title{
    font-size:22px;
    font-weight:600;
    margin-bottom:10px;
}

.auth-subtitle{
    color:#6b7280;
    margin-bottom:25px;
}

.form-group{
    margin-bottom:18px;
}

.form-label{
    font-size:14px;
    font-weight:500;
    display:block;
    margin-bottom:6px;
}

.form-input{
    width:100%;
    padding:12px;
    border-radius:10px;
    border:1px solid #d1d5db;
    font-size:14px;
}

.form-input:focus{
    outline:none;
    border-color:#2563eb;
}

.btn-primary{
    width:100%;
    padding:12px;
    border-radius:10px;
    border:none;
    background:#2563eb;
    color:white;
    font-weight:600;
    cursor:pointer;
}

.btn-primary:hover{
    background:#1d4ed8;
}

.auth-footer{
    margin-top:20px;
    text-align:center;
    font-size:14px;
}
@media(max-width:600px){

.auth-card{
width:100%;
padding:30px;
}

.auth-container{
padding:20px;
}

}
.topbar-dropdown {
    position: relative;
}

.topbar-dropdown-toggle {
    cursor: pointer;
}

.topbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 240px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    padding: 12px;
    display: none;
    z-index: 90;
}

.topbar-dropdown-menu.is-open {
    display: block;
}

.topbar-dropdown-menu#languageDropdown .action-inline-form {
    display: block;
    width: 100%;
    margin: 0;
}

.topbar-dropdown-menu#languageDropdown .topbar-dropdown-item {
    width: 100%;
    justify-content: space-between;
    padding: 10px 8px;
}

.topbar-dropdown-menu-user {
    min-width: 290px;
}

.notification-page-shell {
    width: 100%;
}

.notification-page {
    display: grid;
    gap: 1.5rem;
}

.notification-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.notification-page-kicker {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.notification-page-header h1 {
    margin: 0 0 0.45rem;
}

.notification-page-header p {
    margin: 0;
    color: #64748b;
}

.notification-page-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notification-page-stat {
    min-width: 92px;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: rgba(37, 99, 235, 0.08);
    text-align: center;
}

.notification-page-stat strong,
.notification-page-stat span {
    display: block;
}

.notification-page-stat span {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #64748b;
}

.notification-page-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.notification-page-item {
    display: flex;
    gap: 1rem;
    padding: 1.2rem 1.25rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.notification-page-item.is-unread {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96));
}

.notification-page-item.is-read {
    opacity: 0.92;
}

.notification-page-item-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    flex-shrink: 0;
}

.notification-page-item-content {
    min-width: 0;
    flex: 1;
}

.notification-page-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.notification-page-item-content p {
    margin: 0 0 0.45rem;
    color: #475569;
}

.notification-page-item-content small {
    color: #94a3b8;
}

.notification-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.notification-page-badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}

.notification-page-badge.is-unread {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.notification-page-badge.is-read {
    background: rgba(148, 163, 184, 0.16);
    color: #64748b;
}

.notification-page-empty {
    padding: 2rem 1.25rem;
    border-radius: 1.25rem;
    border: 1px dashed rgba(148, 163, 184, 0.32);
    text-align: center;
    color: #64748b;
}

.notification-page-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

body.theme-dark .notification-page-header,
body.theme-dark .notification-page-item {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.14);
}

body.theme-dark .notification-page-item.is-unread {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.88));
    border-color: rgba(96, 165, 250, 0.42);
}

body.theme-dark .notification-page-header p,
body.theme-dark .notification-page-stat span,
body.theme-dark .notification-page-item-content p,
body.theme-dark .notification-page-empty {
    color: #cbd5e1;
}

body.theme-dark .notification-page-badge {
    background: rgba(148, 163, 184, 0.12);
}

body.theme-dark .notification-page-badge.is-unread {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.16);
}

body.theme-dark .notification-page-badge.is-read {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.14);
}

@media (max-width: 768px) {
    .notification-page-header,
    .notification-page-item,
    .notification-page-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .notification-page-item-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .notification-page-actions {
        justify-content: flex-start;
    }
}

.topbar-dropdown-menu-notifications {
    min-width: 360px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 10px;
}

.topbar-dropdown-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 6px 8px 10px;
}

.topbar-notification-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(20, 145, 229, 0.14);
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

.topbar-notification-list {
    display: grid;
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
    padding: 2px;
}

.topbar-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--surface);
}

.topbar-notification-item.is-unread {
    border-color: rgba(20, 145, 229, 0.22);
    background: rgba(20, 145, 229, 0.08);
}

.topbar-notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(20, 145, 229, 0.12);
    color: var(--primary);
    flex-shrink: 0;
}

.topbar-notification-icon svg {
    width: 18px;
    height: 18px;
}

.topbar-notification-content {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.topbar-notification-content strong,
.topbar-notification-content span,
.topbar-notification-content small {
    display: block;
}

.topbar-notification-content strong {
    font-size: 13px;
    color: var(--text);
}

.topbar-notification-content span {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    word-break: break-word;
}

.topbar-notification-content small {
    font-size: 11px;
    color: var(--muted);
}

.topbar-notification-empty {
    padding: 18px 14px;
    border-radius: 14px;
    background: var(--surface);
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

.topbar-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 12px;
    color: var(--text);
    transition: .2s ease;
}

.topbar-dropdown-item:hover {
    background: var(--surface);
}

.topbar-dropdown-item.logout {
    color: #dc2626;
}

.topbar-dropdown-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 12px;
}

.topbar-dropdown-subtext {
    font-size: 13px;
    color: var(--muted);
    margin-top: 3px;
    word-break: break-word;
}

.topbar-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 10px 0;
}

.dropdown-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.dropdown-item-icon svg {
    width: 18px;
    height: 18px;
}

.topbar-user-avatar.large {
    width: 46px;
    height: 46px;
    font-size: 16px;
}

@media (max-width: 640px) {
    .topbar-dropdown-menu,
    .topbar-dropdown-menu-user {
        right: 0;
        left: auto;
        min-width: 220px;
    }

    .topbar-dropdown-menu-notifications {
        min-width: min(320px, calc(100vw - 24px));
    }

    .topbar-user {
        gap: 8px;
    }
}
.banking-page {
    display: grid;
    gap: 28px;
}

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.page-heading h1 {
    margin: 0 0 6px;
    font-size: 38px;
    line-height: 1.1;
}

.page-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bank-hero-card {
    background: linear-gradient(135deg, #0b1736 0%, #0a2248 50%, #0c2d5d 100%);
    border-radius: 28px;
    padding: 32px;
    color: #fff;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.16);
}

.bank-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.bank-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .88;
    margin-bottom: 8px;
}

.bank-total {
    font-size: 58px;
    font-weight: 800;
    line-height: 1;
}

.bank-visibility-btn {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
}

.bank-currency-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.currency-card {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    padding: 22px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
}

.currency-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    margin-bottom: 14px;
}

.currency-balance {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
}

.currency-meta {
    font-size: 13px;
    color: rgba(255,255,255,0.72);
}

.currency-card-empty {
    grid-column: 1 / -1;
    text-align: center;
}

.bank-section {
    display: grid;
    gap: 16px;
}

.bank-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bank-section-header h2,
.bank-section h2 {
    margin: 0;
    font-size: 22px;
}

.bank-section-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bank-search-input {
    min-width: 260px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0 16px;
    background: var(--card);
    color: var(--text);
}

.bank-filter-btn {
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    cursor: pointer;
}

.transactions-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 28px;
    overflow: hidden;
}

.transaction-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
}

.transaction-row:last-child {
    border-bottom: none;
}

.transaction-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.transaction-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}

.transaction-icon.credit {
    background: #ecfdf3;
    color: #059669;
}

.transaction-icon.debit {
    background: #fff1f2;
    color: #e11d48;
}

.transaction-content strong {
    display: block;
    margin-bottom: 6px;
    font-size: 20px;
}

.transaction-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 14px;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}

.status-badge.is-success {
    background: #ecfdf3;
    color: #059669;
}

.status-badge.is-warning {
    background: #fffbeb;
    color: #d97706;
}

.status-badge.is-danger {
    background: #fff1f2;
    color: #dc2626;
}

.status-badge.is-neutral {
    background: #f1f5f9;
    color: #475569;
}

.transaction-right {
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}

.transaction-right.credit {
    color: #059669;
}

.transaction-right.debit {
    color: #0f172a;
}

.iban-empty-card {
    background: var(--card);
    border: 2px dashed var(--border);
    border-radius: 28px;
    padding: 56px 24px;
    text-align: center;
}

.iban-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--muted);
}

.iban-empty-card h3 {
    margin: 0 0 12px;
    font-size: 34px;
}

.iban-empty-card p {
    max-width: 560px;
    margin: 0 auto 24px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
}

.empty-box {
    padding: 24px;
    color: var(--muted);
}

.nova-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 120;
}

.nova-modal.is-open {
    display: flex;
}

.nova-modal-dialog {
    width: 100%;
    max-width: 520px;
    background: var(--card);
    border-radius: 24px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.18);
}

.nova-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.nova-modal-header h3 {
    margin: 0;
    font-size: 20px;
}

.nova-modal-close {
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    color: var(--muted);
}

.nova-modal-body {
    padding: 24px 22px;
    color: var(--muted);
}

@media (max-width: 992px) {
    .bank-currency-grid {
        grid-template-columns: 1fr;
    }

    .bank-total {
        font-size: 44px;
    }
}

@media (max-width: 640px) {
    .page-heading h1 {
        font-size: 30px;
    }

    .bank-hero-card {
        padding: 22px;
        border-radius: 22px;
    }

    .bank-total {
        font-size: 34px;
    }

    .transaction-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .transaction-content strong {
        font-size: 17px;
    }

    .bank-search-input {
        min-width: 100%;
    }

    .bank-section-tools {
        width: 100%;
    }

    .bank-section-tools > * {
        flex: 1;
    }

    .iban-empty-card h3 {
        font-size: 24px;
    }

    .iban-empty-card p {
        font-size: 15px;
    }
}
.add-money-modal-dialog {
    max-width: 460px;
    border-radius: 22px;
}

.add-money-form {
    display: grid;
    gap: 24px;
}

.form-block {
    display: grid;
    gap: 12px;
}

.form-block-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.segmented-grid {
    display: grid;
    gap: 10px;
}

.segmented-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.segmented-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.segmented-option,
.segmented-card {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 14px;
    transition: .2s ease;
    cursor: pointer;
}

.segmented-option {
    min-height: 46px;
    padding: 0 14px;
    font-weight: 700;
}

.segmented-card {
    min-height: 92px;
    padding: 16px 12px;
    display: grid;
    place-items: center;
    gap: 10px;
    text-align: center;
    font-weight: 600;
}

.segmented-option:hover,
.segmented-card:hover {
    border-color: #3b82f6;
}

.segmented-option.is-active,
.segmented-card.is-active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    color: #0f6db7;
}

/* =========================================
   MODALS — PREMIUM MOTION + BLUR
========================================= */

.nova-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(2, 6, 23, 0.28);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        background 0.28s ease;
}

.nova-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nova-modal-dialog {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 92%, transparent);
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.22),
        0 8px 24px rgba(15, 23, 42, 0.10);
    transform: translateY(22px) scale(0.98);
    opacity: 0;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.26s ease,
        box-shadow 0.26s ease;
    scrollbar-width: thin;
}

.nova-modal.is-open .nova-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.nova-modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 94%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nova-modal-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 650;
    color: var(--text);
}

.nova-modal-close {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        background 0.18s ease;
}

.nova-modal-close:hover {
    transform: scale(1.04);
    border-color: rgba(59, 130, 246, 0.32);
    color: var(--text);
}

.nova-modal-body {
    padding: 24px 22px 22px;
    color: var(--muted);
}

/* spécifiquement pour Add Money */
.add-money-modal-dialog {
    max-width: 470px;
    border-radius: 26px;
}

/* meilleure respiration des contenus */
.add-money-form {
    display: grid;
    gap: 24px;
}

.form-block {
    display: grid;
    gap: 12px;
}

.form-block + .form-block {
    margin-top: 2px;
}

.form-block-label {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--text);
}

.text-muted {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

/* meilleure séparation visuelle entre step 1 et step 2 */
#addMoneyStep1,
#addMoneyStep2 {
    display: grid;
    gap: 22px;
}

.deposit-details-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    padding: 16px;
    display: grid;
    gap: 14px;
}

.deposit-detail-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: start;
}

.deposit-detail-label {
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--muted);
}

.deposit-detail-value {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
    text-align: right;
    color: var(--text);
    word-break: break-word;
}

.deposit-detail-group--compact {
    grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
    align-items: center;
}

.deposit-detail-group--compact .deposit-detail-value {
    font-size: 11.5px;
    line-height: 1.45;
}

.deposit-detail-group--amount .deposit-detail-value {
    font-size: 12px;
}

.deposit-detail-value--copyable {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.deposit-detail-value--copyable span {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.deposit-detail-value--address span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

.deposit-detail-value--asset {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.deposit-asset-mini-logo {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.16);
}

.deposit-inline-copy {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
    cursor: pointer;
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.deposit-inline-copy:hover {
    color: #e2e8f0;
    border-color: rgba(59, 130, 246, 0.32);
    background: rgba(59, 130, 246, 0.14);
    transform: translateY(-1px);
}

.deposit-inline-copy svg {
    width: 13px;
    height: 13px;
}

.bankx-limit-stack {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.bankx-transfer-hint--standard,
.bankx-transfer-hint--personal {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 14px;
}

.bankx-transfer-hint--standard strong,
.bankx-transfer-hint--personal strong {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
}

.bankx-transfer-hint--standard span,
.bankx-transfer-hint--personal span,
.bankx-transfer-hint--personal small {
    color: #cbd5e1;
}

.bankx-transfer-hint--personal {
    background: rgba(30, 64, 175, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.24);
}

.bankx-transfer-hint--personal.is-alert {
    background: rgba(127, 29, 29, 0.18);
    border-color: rgba(239, 68, 68, 0.32);
}

.bankx-limit-cta,
.bankx-limit-alert-actions {
    margin-top: 14px;
}

.bankx-limit-cta {
    padding-top: 6px;
}

.bankx-limit-upgrade-btn {
    width: 100%;
    justify-content: center;
    border: 1px solid rgba(59, 130, 246, 0.28);
    background: rgba(30, 64, 175, 0.18);
    color: #e2e8f0;
}

.bankx-limit-upgrade-btn:hover,
.bankx-limit-upgrade-btn:focus-visible {
    background: rgba(37, 99, 235, 0.24);
    border-color: rgba(96, 165, 250, 0.38);
    color: #f8fafc;
}

.bankx-limit-upgrade-btn--danger {
    border-color: rgba(239, 68, 68, 0.42);
    background: rgba(127, 29, 29, 0.32);
    color: #fecaca;
}

.bankx-limit-upgrade-btn--danger:hover,
.bankx-limit-upgrade-btn--danger:focus-visible {
    background: rgba(153, 27, 27, 0.42);
    border-color: rgba(248, 113, 113, 0.56);
    color: #fee2e2;
}

.bankx-limit-inline-notice--hidden {
    display: none;
}

.bankx-limit-inline-notice {
    position: relative;
    padding-right: 48px;
}

.bankx-limit-inline-notice__title {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.25;
}

.bankx-limit-inline-notice__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.bankx-limit-inline-notice__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.72;
    z-index: 2;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.bankx-limit-inline-notice__close:hover,
.bankx-limit-inline-notice__close:focus-visible {
    background: rgba(239, 68, 68, 0.12);
    opacity: 1;
}

.bankx-limit-inline-notice__close-icon {
    width: 16px;
    height: 16px;
}

@media (min-width: 960px) {
    .bankx-limit-inline-notice {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title action"
            "text action";
        column-gap: 18px;
        row-gap: 4px;
        align-items: center;
    }

    .bankx-limit-inline-notice__title {
        grid-area: title;
        margin-bottom: 0;
    }

    .bankx-limit-inline-notice__text {
        grid-area: text;
        font-size: 12.5px;
        line-height: 1.3;
    }

    .bankx-limit-alert-actions {
        grid-area: action;
        margin-top: 0;
        align-self: center;
        margin-right: 28px;
    }

    .bankx-limit-upgrade-btn {
        width: auto;
        min-width: 220px;
        min-height: 38px;
        padding: 0 16px;
        white-space: nowrap;
    }
}

.js-copy-qr-payload {
    position: relative;
}

.deposit-inline-copy::after,
.deposit-inline-copy .nova-inline-copy-feedback,
.js-copy-qr-payload::after {
    content: attr(data-copy-feedback);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 6px) scale(0.96);
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.96);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 30;
}

.deposit-inline-copy .nova-inline-copy-feedback {
    content: none;
}

.deposit-inline-copy.is-copy-feedback::after,
.deposit-inline-copy.is-copy-feedback .nova-inline-copy-feedback,
.js-copy-qr-payload.is-copy-feedback::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.deposit-detail-reference {
    padding: 12px;
    border: 1px dashed rgba(59, 130, 246, 0.45);
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.06);
}

.deposit-warning-box {
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text);
}

.deposit-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.deposit-actions-row > * {
    flex: 1;
}

.deposit-receipt-modal-dialog {
    max-width: 500px;
}

#depositReceiptModal .nova-modal-body {
    display: grid;
    gap: 14px;
}

.deposit-receipt-card {
    margin-top: 2px;
    display: grid;
    gap: 14px;
}

.deposit-receipt-timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.08);
}

.deposit-receipt-timer span {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.deposit-receipt-timer strong {
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.deposit-receipt-timer strong.is-expired {
    color: #f59e0b;
}

.money-input-wrap {
    position: relative;
}

.deposit-amount-hint {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.deposit-amount-hint.is-error {
    color: #ef4444;
}

.money-input-symbol {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    font-weight: 700;
    color: var(--muted);
    pointer-events: none;
}

.money-input {
    width: 100%;
    height: 54px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0 18px 0 44px;
    font-size: 16px;
    line-height: 1;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.money-input:focus {
    border-color: rgba(59, 130, 246, 0.42);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
}

.segmented-grid {
    display: grid;
    gap: 10px;
}

.segmented-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.segmented-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented-option,
.segmented-card,
.crypto-chip {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
    cursor: pointer;
}

.segmented-option {
    min-height: 46px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
}

.segmented-card {
    min-height: 88px;
    border-radius: 16px;
    padding: 14px 12px;
    display: grid;
    place-items: center;
    gap: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.segmented-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f6db7;
}

.segmented-card-icon svg {
    width: 24px;
    height: 24px;
}

.segmented-card-icon--bank svg {
    color: #38bdf8;
}

.segmented-card-icon--crypto svg {
    width: 42px;
    height: 36px;
}

.segmented-option:hover,
.segmented-card:hover,
.crypto-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.38);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

.segmented-option.is-active,
.segmented-card.is-active,
.crypto-chip.is-active {
    border-color: rgba(59, 130, 246, 0.48);
    background: rgba(59, 130, 246, 0.08);
    color: #0f6db7;
}

.crypto-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.crypto-chip {
    min-height: 40px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.deposit-picker-shell {
    position: relative;
}

.deposit-picker {
    position: relative;
}

.deposit-picker__trigger {
    width: 100%;
    min-height: 50px;
    padding: 15px 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.deposit-picker__trigger:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.38);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.deposit-picker.is-open .deposit-picker__trigger {
    border-color: rgba(59, 130, 246, 0.44);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
}

.deposit-picker__trigger-main,
.deposit-picker__option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.deposit-picker__trigger-copy,
.deposit-picker__option-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
    text-align: left;
}

.deposit-picker__trigger-copy strong,
.deposit-picker__option-copy strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deposit-picker__trigger-copy small,
.deposit-picker__option-copy small {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.deposit-picker__trigger-icon,
.deposit-picker__option-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
}

.deposit-picker__trigger-icon img,
.deposit-picker__option-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.deposit-picker__trigger-icon svg,
.deposit-picker__option-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.deposit-picker__trigger-icon .currency-symbol-badge,
.deposit-picker__option-icon .currency-symbol-badge,
.crypto-settlement-card__icon .currency-symbol-badge,
.crypto-settlement-card__icon .currency-code-badge {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    font-size: 14px;
}

.deposit-picker__trigger-icon.is-placeholder {
    background: rgba(59, 130, 246, 0.08);
    color: #0f6db7;
    font-size: 18px;
}

.deposit-picker__trigger-icon.is-fallback,
.deposit-picker__option-icon.is-fallback {
    padding: 0 6px;
    text-align: center;
}

.deposit-picker__chevron {
    flex: 0 0 auto;
    color: var(--muted);
    transition: transform 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.deposit-picker__chevron svg {
    width: 18px;
    height: 18px;
    display: block;
}

.deposit-picker.is-open .deposit-picker__chevron {
    transform: rotate(180deg);
}

.deposit-picker__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 20;
    display: none;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(14px);
}

.deposit-picker.is-open .deposit-picker__menu {
    display: grid;
    gap: 8px;
}

.deposit-picker__option {
    width: 100%;
    min-height: 60px;
    padding: 11px 12px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.deposit-picker__option:hover {
    background: rgba(59, 130, 246, 0.06);
    transform: translateX(2px);
}

.deposit-picker__option.is-active {
    background: rgba(59, 130, 246, 0.1);
}

body.theme-dark .deposit-picker__trigger {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(12, 18, 31, 0.96));
    border-color: rgba(148, 163, 184, 0.2);
}

body.theme-dark .deposit-picker__menu {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(148, 163, 184, 0.18);
}

body.theme-dark .deposit-picker__trigger-copy strong,
body.theme-dark .deposit-picker__option-copy strong {
    color: #e2e8f0;
}

body.theme-dark .deposit-picker__trigger-copy small,
body.theme-dark .deposit-picker__option-copy small,
body.theme-dark .deposit-picker__chevron {
    color: #94a3b8;
}

.transfer-picker-shell {
    position: relative;
}

.transfer-picker {
    position: relative;
}

.transfer-picker__trigger {
    width: 100%;
    min-height: 50px;
    padding: 15px 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.transfer-picker__trigger:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.38);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.transfer-picker.is-open .transfer-picker__trigger {
    border-color: rgba(59, 130, 246, 0.44);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
}

.transfer-picker__trigger-main,
.transfer-picker__option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.transfer-picker__trigger-copy,
.transfer-picker__option-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
    text-align: left;
}

.transfer-picker__trigger-copy strong,
.transfer-picker__option-copy strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transfer-picker__trigger-copy small,
.transfer-picker__option-copy small {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.transfer-picker__trigger-icon,
.transfer-picker__option-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
}

.transfer-picker__trigger-icon img,
.transfer-picker__option-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.transfer-picker__trigger-icon svg,
.transfer-picker__option-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.transfer-picker__trigger-icon.is-placeholder {
    background: rgba(59, 130, 246, 0.08);
    color: #0f6db7;
    font-size: 18px;
}

.transfer-picker__trigger-icon.is-fallback,
.transfer-picker__option-icon.is-fallback {
    padding: 0 6px;
    text-align: center;
}

.transfer-picker__chevron {
    flex: 0 0 auto;
    color: var(--muted);
    transition: transform 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.transfer-picker__chevron svg {
    width: 18px;
    height: 18px;
    display: block;
}

.transfer-picker.is-open .transfer-picker__chevron {
    transform: rotate(180deg);
}

.transfer-picker__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 20;
    display: none;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(14px);
}

.transfer-picker.is-open .transfer-picker__menu {
    display: grid;
    gap: 8px;
}

.transfer-picker__option {
    width: 100%;
    min-height: 60px;
    padding: 11px 12px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.transfer-picker__option:hover {
    background: rgba(59, 130, 246, 0.06);
    transform: translateX(2px);
}

.transfer-picker__option.is-active {
    background: rgba(59, 130, 246, 0.1);
}

body.theme-dark .transfer-picker__trigger {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(12, 18, 31, 0.96));
    border-color: rgba(148, 163, 184, 0.2);
}

body.theme-dark .transfer-picker__menu {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(148, 163, 184, 0.18);
}

body.theme-dark .transfer-picker__trigger-copy strong,
body.theme-dark .transfer-picker__option-copy strong {
    color: #e2e8f0;
}

body.theme-dark .transfer-picker__trigger-copy small,
body.theme-dark .transfer-picker__option-copy small,
body.theme-dark .transfer-picker__chevron {
    color: #94a3b8;
}

.deposit-currency-helper {
    margin-top: 10px;
    padding: 13px 15px;
    border-radius: 16px;
    border: 1px solid rgba(56, 189, 248, 0.16);
    background: linear-gradient(180deg, rgba(8, 145, 178, 0.12), rgba(14, 116, 144, 0.08));
    color: #0f172a;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

#depositCryptoSelectionBlock {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

#depositCryptoSelectionBlock .form-block {
    min-width: 0;
    margin: 0;
    width: 100%;
}

#cryptoAssetGrid,
#cryptoNetworkGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

#depositCryptoSelectionBlock .deposit-picker-shell,
#depositCryptoSelectionBlock .deposit-picker,
#depositCryptoSelectionBlock .deposit-picker__trigger,
#depositCryptoSelectionBlock .deposit-picker__menu {
    width: 100%;
}

#depositCurrencyGrid {
    grid-template-columns: 1fr;
    width: 100%;
}

#depositCurrencyGrid .deposit-picker-shell,
#depositCurrencyGrid .deposit-picker,
#depositCurrencyGrid .deposit-picker__trigger,
#depositCurrencyGrid .deposit-picker__menu {
    width: 100%;
}

.deposit-method-choices {
    display: grid;
    gap: 12px;
}

.deposit-method-choice {
    width: 100%;
    padding: 18px 18px 17px;
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.deposit-method-choice:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.deposit-method-choice.is-active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.38), 0 18px 36px rgba(37, 99, 235, 0.10);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.92), rgba(248, 250, 252, 0.98));
}

.deposit-method-choice__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.14);
}

.deposit-method-choice__icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.deposit-method-choice__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.deposit-method-choice__copy strong {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}

.deposit-method-choice__copy span,
.deposit-method-choice__copy small {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    display: block;
}

.deposit-flow-stack {
    display: grid;
    gap: 18px;
}

.deposit-step-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.deposit-flow-stack > .deposit-step-hidden {
    display: none !important;
}

.deposit-actions-row--single .add-money-submit {
    width: 100%;
}

body.theme-dark .deposit-currency-helper {
    background: linear-gradient(180deg, rgba(8, 145, 178, 0.16), rgba(14, 116, 144, 0.12));
    border-color: rgba(34, 211, 238, 0.18);
    color: #dbeafe;
}

body.theme-dark .deposit-method-choice {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(12, 18, 31, 0.98));
    border-color: rgba(59, 130, 246, 0.18);
}

body.theme-dark .deposit-method-choice.is-active {
    background: linear-gradient(180deg, rgba(16, 33, 64, 0.98), rgba(12, 18, 31, 0.98));
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.34), 0 18px 36px rgba(2, 132, 199, 0.14);
}

body.theme-dark .deposit-method-choice__copy strong {
    color: #e2e8f0;
}

body.theme-dark .deposit-method-choice__copy span,
body.theme-dark .deposit-method-choice__copy small {
    color: #94a3b8;
}

body.theme-dark .deposit-method-choice__icon {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(96, 165, 250, 0.16);
    color: #60a5fa;
}

.add-money-modal-dialog {
    container-type: inline-size;
}

@container (max-width: 760px) {
    .deposit-step-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .deposit-method-choice {
        padding: 15px 14px;
        border-radius: 18px;
        gap: 12px;
    }

    .deposit-method-choice__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 14px;
    }

    .deposit-method-choice__icon svg {
        width: 24px;
        height: 24px;
    }

    .deposit-method-choice__copy strong {
        font-size: 15px;
    }

    .deposit-method-choice__copy span,
    .deposit-method-choice__copy small,
    .deposit-currency-helper {
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .deposit-step-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .deposit-method-choice {
        padding: 15px 14px;
        border-radius: 18px;
        gap: 12px;
    }

    .deposit-method-choice__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 14px;
    }

    .deposit-method-choice__icon svg {
        width: 24px;
        height: 24px;
    }

    .deposit-method-choice__copy strong {
        font-size: 15px;
    }

    .deposit-method-choice__copy span,
    .deposit-method-choice__copy small,
    .deposit-currency-helper {
        font-size: 12px;
    }
}

#cryptoDepositBlock {
    display: grid;
    gap: 16px;
}

#cryptoDepositBlock .deposit-details-card {
    margin-top: 6px;
}

#cryptoDepositBlock .deposit-qr-block {
    margin-top: 1rem;
}

input[type="file"] {
    width: 100%;
    padding: 11px 12px;
    border: 1px dashed rgba(96, 165, 250, 0.55);
    border-radius: 14px;
    background: rgba(96, 165, 250, 0.04);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    border: none;
    background: #e0f2fe;
    color: #0369a1;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.deposit-loading {
    padding: 8px 0;
    font-size: 13px;
    color: var(--muted);
}

/* mobile */
@media (max-width: 640px) {
    .nova-modal {
        padding: 14px;
        align-items: flex-end;
    }

    .nova-modal-dialog,
    .add-money-modal-dialog {
        max-width: 100%;
        border-radius: 22px 22px 18px 18px;
    }

    .nova-modal-header {
        padding: 18px 18px;
    }

    .nova-modal-body {
        padding: 20px 18px 18px;
    }

    .segmented-grid-3,
    .segmented-grid-2 {
        grid-template-columns: 1fr;
    }

    .crypto-chip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deposit-detail-group {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .deposit-detail-value {
        text-align: left;
    }

    .deposit-actions-row {
        flex-direction: column;
    }
}

/* =========================
   STEP 2
========================= */

.deposit-step-hidden {
    display: none !important
}

.deposit-details-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    padding: 16px;
    display: grid;
    gap: 12px;
}

.deposit-detail-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
}

.deposit-detail-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.deposit-detail-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    word-break: break-word;
}

.deposit-detail-reference {
    border: 1px dashed #3b82f6;
    border-radius: 14px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.06);
}

.deposit-warning-box {
    border: 1px solid #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border-radius: 14px;
    padding: 12px 14px;
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
}

.deposit-loading {
    color: var(--muted);
    font-size: 14px;
    padding: 6px 0;
}

.deposit-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.deposit-actions-row > * {
    flex: 1;
}

/* =========================
   CRYPTO BLOCK
========================= */

.crypto-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.crypto-chip {
    min-height: 42px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}

#cryptoDetailsContainer .deposit-detail-value {
    max-width: 100%;
}

#cryptoDetailsContainer .deposit-detail-group:last-child {
    margin-bottom: 0;
}

/* =========================
   FILE INPUT
========================= */

input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed #60a5fa;
    border-radius: 14px;
    background: rgba(96, 165, 250, 0.04);
    color: var(--text);
    font-size: 14px;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    border: none;
    background: #e0f2fe;
    color: #0369a1;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

/* =========================
   ALERTS
========================= */

.alert {
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
}

.alert-success {
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    color: #166534;
    margin-top: 16px;
}

.alert-danger {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
    margin-bottom: 18px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 640px) {
    .add-money-modal-dialog {
        max-width: 100%;
        border-radius: 18px;
    }

    .segmented-grid-3 {
        grid-template-columns: 1fr;
    }

    .segmented-grid-2 {
        grid-template-columns: 1fr;
    }

    .crypto-chip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deposit-detail-group {
        grid-template-columns: 1fr;
    }

    .deposit-detail-value {
        text-align: left;
    }

    .deposit-actions-row {
        flex-direction: column;
    }

    .money-input {
        font-size: 16px;
    }
}

.pending-deposit-row {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.pending-deposit-row:hover {
    background: rgba(59, 130, 246, 0.04);
}

.pending-deposit-row:focus {
    outline: none;
    background: rgba(59, 130, 246, 0.06);
}

/* =========================================
   BANKING PAGE — PREMIUM REDESIGN
========================================= */

.banking-shell {
    display: grid;
    gap: 24px;
}

.banking-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.banking-topbar-copy {
    max-width: 620px;
}

.banking-overline {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b82f6;
}

.banking-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.banking-subtitle {
    margin: 10px 0 0;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.banking-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.banking-action-btn {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
    white-space: nowrap;
}

.banking-action-btn svg {
    width: 16px;
    height: 16px;
}

.banking-action-btn.is-ghost {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.banking-action-btn.is-ghost:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.35);
}

.banking-action-btn.is-primary {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #0ea5e9 100%);
    color: #fff;
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.28);
}

.banking-action-btn.is-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

/* HERO */

.banking-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.9fr);
    gap: 16px;
}

.banking-hero-main {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 26px 26px 24px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.28), transparent 28%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.18), transparent 30%),
        linear-gradient(135deg, #06142f 0%, #0b1f45 42%, #0b2f67 100%);
    color: #fff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
}

.banking-hero-main::before {
    content: "";
    position: absolute;
    inset: auto -10% -38% auto;
    width: 260px;
    height: 260px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    filter: blur(12px);
}

.banking-balance-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.banking-balance-label {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.banking-balance-amount {
    font-size: clamp(32px, 5vw, 52px);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #fff;
}

.banking-visibility-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.banking-balance-meta {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.banking-mini-stat {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.banking-mini-stat-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.banking-mini-stat strong {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.banking-hero-side {
    display: grid;
    gap: 16px;
}

.banking-side-card {
    border-radius: 24px;
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 8px;
}

.banking-side-card.is-soft {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), rgba(59, 130, 246, 0.02));
}

.banking-side-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.banking-side-card strong {
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
}

.banking-side-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}

/* ACCOUNT GRID */

.banking-account-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.bank-account-card {
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 14px;
}

.bank-account-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bank-account-badge {
    min-width: 58px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
}

.bank-account-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--muted);
}

.bank-account-status.is-live {
    color: #059669;
}

.bank-account-balance {
    font-size: 25px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.bank-account-subline {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

.bank-account-subline strong {
    color: var(--text);
    font-weight: 700;
}

/* CONTENT GRID */

.banking-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 16px;
}

.banking-panel {
    border-radius: 26px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.banking-panel-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.banking-panel-kicker {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b82f6;
}

.banking-panel-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 750;
    color: var(--text);
}

.banking-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.banking-search {
    width: 210px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    outline: none;
}

.banking-search:focus {
    border-color: rgba(59, 130, 246, 0.4);
}

.banking-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
}

.banking-list {
    display: grid;
}

.banking-list-row {
    width: 100%;
    border: none;
    background: transparent;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    transition: .2s ease;
}

.banking-list-row:last-child {
    border-bottom: none;
}

.banking-list-row:hover {
    background: rgba(59, 130, 246, 0.035);
}

.banking-list-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.banking-list-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.banking-list-icon.credit {
    background: #ecfdf3;
    color: #059669;
}

.banking-list-icon.debit {
    background: #fff1f2;
    color: #e11d48;
}

.banking-list-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.banking-list-copy strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banking-list-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}

.banking-list-right {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.banking-list-right.credit {
    color: #059669;
}

.banking-list-right.debit {
    color: var(--text);
}

/* EMPTY */

.bank-empty-panel {
    padding: 28px 22px;
    font-size: 14px;
    color: var(--muted);
}

.bank-empty-hero {
    padding: 42px 20px;
    text-align: center;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.bank-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.bank-empty-hero h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.bank-empty-hero p {
    max-width: 560px;
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}

/* PENDING */

.pending-deposit-row {
    cursor: pointer;
}

.pending-deposit-row:focus {
    outline: none;
    background: rgba(59, 130, 246, 0.06);
}

/* BADGES */

.status-badge {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: capitalize;
}

.status-badge.is-success {
    background: #ecfdf3;
    color: #059669;
}

.status-badge.is-warning {
    background: #fffbeb;
    color: #b45309;
}

.status-badge.is-danger {
    background: #fff1f2;
    color: #dc2626;
}

.status-badge.is-neutral {
    background: #eef2f7;
    color: #475569;
}

.bankx-status-stack {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.bankx-status-stack .status-badge {
    padding: 3px 8px;
    font-size: 9px;
    line-height: 1;
}

/* ALERTS */

.alert {
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.55;
}

.alert-success {
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.alert-danger {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .banking-hero,
    .banking-content-grid {
        grid-template-columns: 1fr;
    }

    .banking-account-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .banking-title {
        font-size: 28px;
    }

    .banking-actions {
        width: 100%;
    }

    .banking-action-btn {
        flex: 1 1 calc(50% - 8px);
    }

    .banking-balance-meta {
        grid-template-columns: 1fr;
    }

    .banking-account-grid {
        grid-template-columns: 1fr;
    }

    .banking-toolbar {
        width: 100%;
    }

    .banking-search {
        width: 100%;
    }

    .banking-list-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .banking-list-right {
        padding-left: 56px;
    }

    .bank-empty-hero h3 {
        font-size: 20px;
    }
}

@media (max-width: 560px) {
    .banking-hero-main,
    .banking-panel {
        border-radius: 22px;
    }

    .banking-side-card {
        border-radius: 20px;
    }

    .bank-account-card {
        border-radius: 18px;
    }

    .banking-action-btn {
        flex: 1 1 100%;
    }

    .banking-balance-amount {
        font-size: 34px;
    }

    .banking-panel-head {
        padding: 16px;
    }

    .banking-list-row {
        padding: 14px 16px;
    }
}

/* =========================================
   BANKING V2 — PREMIUM / LIGHT + DARK
========================================= */

.banking-v2 {
    display: grid;
    gap: 24px;
}

.banking-v2__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.banking-v2__header-copy {
    max-width: 640px;
}

.banking-v2__eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b82f6;
}

.banking-v2__title {
    margin: 0;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
}

.banking-v2__subtitle {
    margin: 10px 0 0;
    max-width: 580px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}

.banking-v2__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.banking-v2__action {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
    white-space: nowrap;
}

.banking-v2__action svg {
    width: 16px;
    height: 16px;
}

.banking-v2__action--soft {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.banking-v2__action--soft:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.32);
}

.banking-v2__action--primary {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #0ea5e9 100%);
    color: #fff;
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.26);
}

.banking-v2__action--primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.banking-v2__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* HERO */

.banking-v2__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.85fr);
    gap: 16px;
}

.banking-v2__hero-main {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 26px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.24), transparent 26%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.18), transparent 28%),
        linear-gradient(135deg, #06142f 0%, #0b1f45 44%, #0b2f67 100%);
    color: #fff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
}

.banking-v2__hero-main::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -46px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    filter: blur(8px);
}

.banking-v2__hero-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.banking-v2__hero-label {
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.banking-v2__hero-amount {
    font-size: clamp(34px, 5vw, 54px);
    line-height: .98;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #fff;
}

.banking-v2__visibility {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.banking-v2__hero-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.banking-v2__stat {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.banking-v2__stat span {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.banking-v2__stat strong {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    color: #fff;
}

.banking-v2__hero-side {
    display: grid;
}

.banking-v2__glass-card {
    min-height: 100%;
    border-radius: 24px;
    padding: 20px;
    background: linear-gradient(180deg, var(--card), var(--surface));
    border: 1px solid var(--border);
    box-shadow: 0 22px 36px rgba(15, 23, 42, 0.05);
    display: grid;
    align-content: center;
    gap: 10px;
}

.banking-v2__glass-title {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--text);
}

.banking-v2__glass-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted);
}

/* ACCOUNTS */

.banking-v2__accounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.banking-v2__account-card {
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 14px;
}

html.dark .banking-v2__account-card,
[data-theme="dark"] .banking-v2__account-card,
.theme-dark .banking-v2__account-card {
    background: linear-gradient(180deg, rgba(15,23,42,0.88), rgba(15,23,42,0.72));
    border-color: rgba(148, 163, 184, 0.12);
}

.banking-v2__account-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.banking-v2__account-currency {
    min-width: 58px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
}

.banking-v2__account-status {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--muted);
}

.banking-v2__account-status.is-live {
    color: #059669;
}

.banking-v2__account-balance {
    font-size: 25px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
}

.banking-v2__account-balance--compact {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.banking-v2__account-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

.banking-v2__account-meta strong {
    font-weight: 600;
    color: var(--text);
}

/* MAIN GRID */

.banking-v2__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 16px;
}

.banking-v2__panel {
    border-radius: 26px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.banking-v2__panel-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.banking-v2__panel-kicker {
    margin: 0 0 6px;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b82f6;
}

.banking-v2__panel-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--text);
}

.banking-v2__panel-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.banking-v2__search {
    width: 210px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    outline: none;
}

.banking-v2__search:focus {
    border-color: rgba(59, 130, 246, 0.38);
}

.banking-v2__icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.banking-v2__list {
    display: grid;
}

.banking-v2__row {
    width: 100%;
    border: none;
    background: transparent;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    transition: .2s ease;
}

.banking-v2__row:last-child {
    border-bottom: none;
}

.banking-v2__row--button {
    cursor: pointer;
}

.banking-v2__row:hover {
    background: rgba(59, 130, 246, 0.035);
}

.banking-v2__row-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.banking-v2__row-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.banking-v2__row-icon.credit {
    background: #ecfdf3;
    color: #059669;
}

.banking-v2__row-icon.debit {
    background: #fff1f2;
    color: #e11d48;
}

.banking-v2__row-content {
    min-width: 0;
    display: grid;
    gap: 6px;
    flex: 1 1 auto;
    width: 100%;
}

.banking-v2__row-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.banking-v2__row-content strong {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banking-v2__row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.banking-v2__row-right {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.banking-v2__row-right.credit {
    color: #059669;
}

.banking-v2__row-right.debit {
    color: var(--text);
}

/* EMPTY / IBAN */

.banking-v2__empty {
    padding: 28px 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.banking-v2__iban-empty {
    padding: 42px 20px;
    text-align: center;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.banking-v2__iban-icon {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.banking-v2__iban-empty h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
}

.banking-v2__iban-empty p {
    max-width: 560px;
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}

/* EXISTING COMPONENT ALIGNMENT */

.status-badge {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: capitalize;
}

.status-badge.is-success {
    background: #ecfdf3;
    color: #059669;
}

.status-badge.is-warning {
    background: #fffbeb;
    color: #b45309;
}

.status-badge.is-danger {
    background: #fff1f2;
    color: #dc2626;
}

.status-badge.is-neutral {
    background: #eef2f7;
    color: #475569;
}

.alert {
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.55;
}

.alert-success {
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.alert-danger {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .banking-v2__hero,
    .banking-v2__grid {
        grid-template-columns: 1fr;
    }

    .banking-v2__accounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .banking-v2__title {
        font-size: 28px;
    }

    .banking-v2__actions {
        width: 100%;
    }

    .banking-v2__action {
        flex: 1 1 calc(50% - 8px);
    }

    .banking-v2__hero-stats {
        grid-template-columns: 1fr;
    }

    .banking-v2__accounts {
        grid-template-columns: 1fr;
    }

    .banking-v2__panel-tools {
        width: 100%;
    }

    .banking-v2__search {
        width: 100%;
    }

    .banking-v2__row {
        align-items: flex-start;
        flex-direction: column;
    }

    .banking-v2__row-right {
        padding-left: 56px;
    }

    .banking-v2__iban-empty h3 {
        font-size: 20px;
    }
}

@media (max-width: 560px) {
    .banking-v2__hero-main,
    .banking-v2__panel {
        border-radius: 22px;
    }

    .banking-v2__glass-card {
        border-radius: 20px;
    }

    .banking-v2__account-card {
        border-radius: 18px;
    }

    .banking-v2__action {
        flex: 1 1 100%;
    }

    .banking-v2__hero-amount {
        font-size: 34px;
    }

    .banking-v2__panel-head {
        padding: 16px;
    }

    .banking-v2__row {
        padding: 14px 16px;
    }
}
/* =========================================
   ADD MONEY MODAL — FINAL FIX
========================================= */

#addMoneyStep1 {
    display: grid;
    gap: 16px;
}

#addMoneyStep2 {
    display: grid;
    gap: 16px;
}

.deposit-step-hidden {
    display: none !important;
}

.add-money-modal-dialog {
    width: 100%;
    max-width: 430px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    border-radius: 22px;
}

.nova-modal-body {
    padding: 18px 18px 16px;
}

.add-money-form {
    display: grid;
    gap: 16px;
}

.form-block {
    display: grid;
    gap: 8px;
}

.form-block-label {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--text);
}

.text-muted {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.segmented-grid {
    display: grid;
    gap: 10px;
}

.segmented-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.segmented-option {
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.segmented-card {
    min-height: 76px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    padding: 10px;
    display: grid;
    place-items: center;
    gap: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.segmented-option:hover,
.segmented-card:hover,
.crypto-chip:hover {
    border-color: rgba(59, 130, 246, 0.45);
    transform: translateY(-1px);
}

.segmented-option.is-active,
.segmented-card.is-active,
.crypto-chip.is-active {
    border-color: rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.08);
    color: #0f6db7;
}

.segmented-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.segmented-card-icon svg {
    width: 18px;
    height: 18px;
}

.money-input-wrap {
    position: relative;
}

.money-input-symbol {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 16px;
    font-weight: 700;
    pointer-events: none;
}

.money-input {
    width: 100%;
    height: 50px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0 16px 0 42px;
    font-size: 15px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.money-input:focus {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
}

.add-money-submit {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
}

.deposit-details-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 14px;
    display: grid;
    gap: 10px;
}

.deposit-detail-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
}

.deposit-detail-label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--muted);
}

.deposit-detail-value {
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
    text-align: right;
    color: var(--text);
    word-break: break-word;
}

.deposit-detail-reference {
    border: 1px dashed rgba(59, 130, 246, 0.45);
    border-radius: 14px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.06);
}

.deposit-warning-box {
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
    border-radius: 14px;
    padding: 12px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.6;
}

.deposit-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.deposit-actions-row > * {
    flex: 1;
}

.crypto-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.crypto-chip {
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed rgba(96, 165, 250, 0.55);
    border-radius: 14px;
    background: rgba(96, 165, 250, 0.04);
    color: var(--text);
    font-size: 13px;
}

input[type="file"]::file-selector-button {
    margin-right: 10px;
    border: none;
    background: #e0f2fe;
    color: #0369a1;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 640px) {
    .add-money-modal-dialog {
        max-width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 20px;
    }

    .add-money-modal-dialog .nova-modal-body {
        padding: 14px;
    }

    .add-money-modal-dialog #addMoneyStep1 {
        gap: 14px;
    }

    .add-money-modal-dialog .segmented-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .add-money-modal-dialog .segmented-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .add-money-modal-dialog .segmented-option {
        min-height: 42px;
        font-size: 13px;
        border-radius: 13px;
    }

    .add-money-modal-dialog .segmented-card {
        min-height: 70px;
        padding: 10px 8px;
        gap: 6px;
        border-radius: 15px;
        font-size: 12.5px;
    }

.add-money-modal-dialog .segmented-card-icon svg {
    width: 22px;
    height: 22px;
}

.add-money-modal-dialog .deposit-method-choice .segmented-card-icon {
    width: 60px;
    height: 60px;
    min-height: 60px;
    margin-bottom: 8px;
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(3, 10, 24, 0.24);
}

.add-money-modal-dialog .deposit-method-choice .segmented-card-icon svg {
    width: 28px;
    height: 28px;
}

.add-money-modal-dialog .deposit-method-choice.segmented-card {
    gap: 10px;
}

.add-money-modal-dialog .deposit-method-choice.is-active .segmented-card-icon {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(72, 191, 255, 0.18), 0 14px 28px rgba(3, 10, 24, 0.32);
    filter: drop-shadow(0 0 14px rgba(46, 197, 255, 0.24));
}

.add-money-modal-dialog .deposit-method-choice .segmented-card-icon--bank svg {
    width: 27px;
    height: 27px;
}

.add-money-modal-dialog .deposit-method-choice .segmented-card-icon--bank {
    color: #38bdf8;
    background: rgba(8, 145, 178, 0.16);
    border: 1px solid rgba(56, 189, 248, 0.16);
}

.add-money-modal-dialog .segmented-card-icon--crypto svg {
    width: 36px;
    height: 30px;
}

.add-money-modal-dialog .deposit-method-choice .segmented-card-icon--crypto svg {
    width: 34px;
    height: 34px;
}

.add-money-modal-dialog .deposit-method-choice .segmented-card-icon--crypto {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.22);
}

.add-money-modal-dialog .deposit-method-badge__svg,
.add-money-modal-dialog .deposit-method-badge__svg svg {
    width: 100%;
    height: 100%;
}

    .add-money-modal-dialog .money-input {
        height: 46px;
        font-size: 14px;
        border-radius: 14px;
    }

    .add-money-modal-dialog .money-input-symbol {
        left: 14px;
        font-size: 15px;
    }

    .add-money-modal-dialog .exchange-preview-card {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        margin: 10px 0 0;
        padding: 12px;
        border-radius: 16px;
    }

    .add-money-modal-dialog .exchange-preview-card__icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 12px;
    }

    .add-money-modal-dialog .exchange-preview-card__svg,
    .add-money-modal-dialog .exchange-preview-card__svg svg {
        width: 18px;
        height: 18px;
    }

    .add-money-modal-dialog .exchange-preview-card span {
        margin-bottom: 4px;
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    .add-money-modal-dialog .exchange-preview-card strong {
        font-size: 12px;
        line-height: 1.35;
    }

    .add-money-modal-dialog .exchange-preview-card small {
        font-size: 11px;
    }

    .crypto-chip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deposit-detail-group {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .deposit-detail-value {
        text-align: left;
    }

    .deposit-actions-row {
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .add-money-modal-dialog .nova-modal-body {
        padding: 12px;
    }

    .add-money-modal-dialog .segmented-grid-3,
    .add-money-modal-dialog .segmented-grid-2 {
        gap: 8px;
    }

    .add-money-modal-dialog .segmented-option {
        min-height: 40px;
        font-size: 12px;
    }

    .add-money-modal-dialog .segmented-card {
        min-height: 66px;
        padding: 9px 6px;
        font-size: 11.5px;
    }

    .add-money-modal-dialog .segmented-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .add-money-modal-dialog .segmented-card-icon--crypto svg {
        width: 32px;
        height: 27px;
    }

    .add-money-modal-dialog .exchange-preview-card {
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 10px;
    }

    .add-money-modal-dialog .exchange-preview-card__icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

@media (min-width: 641px) {
    .add-money-modal-dialog .deposit-method-choice .segmented-card-icon {
        width: 60px;
        height: 60px;
        min-height: 60px;
    }

    .add-money-modal-dialog .deposit-method-choice .segmented-card-icon svg {
        width: 28px;
        height: 28px;
    }

    .add-money-modal-dialog .deposit-method-choice .segmented-card-icon--bank svg {
        width: 27px;
        height: 27px;
    }

    .add-money-modal-dialog .deposit-method-choice .segmented-card-icon--crypto svg {
        width: 34px;
        height: 34px;
    }
}

/* =========================================
   Admin deposit controller
========================================= */
.admin-page {
    display: grid;
    gap: 20px;
}

.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-page-header h1 {
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.1;
    color: var(--text);
}

.admin-page-header p {
    margin: 0;
    color: var(--muted);
}

.admin-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.admin-filter-form {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.admin-filter-group {
    display: grid;
    gap: 8px;
}

.admin-filter-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.admin-select {
    min-width: 220px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0 12px;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.admin-table th {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-table td {
    font-size: 14px;
    color: var(--text);
}

.admin-user-cell {
    display: grid;
    gap: 3px;
}

.admin-user-cell strong {
    font-weight: 600;
}

.admin-user-cell span {
    font-size: 12px;
    color: var(--muted);
}

.admin-table-link {
    color: var(--primary);
    font-weight: 600;
}

.admin-empty-state {
    padding: 16px 0;
    color: var(--muted);
}

.admin-details-grid {
    display: grid;
    gap: 16px;
}

.admin-detail-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.admin-detail-list strong {
    font-weight: 600;
}

@media (max-width: 640px) {
    .admin-panel {
        padding: 16px;
    }

    .admin-page-header h1 {
        font-size: 22px;
    }

    .admin-select {
        min-width: 100%;
    }
}

.admin-page {
    display: grid;
    gap: 20px;
}

.admin-page--animated {
    animation: adminPageFade .35s ease;
}

@keyframes adminPageFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-fade-in {
    animation: adminFade .28s ease;
}

@keyframes adminFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-page-header h1 {
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--text);
}

.admin-page-header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.admin-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.admin-panel--elevated {
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.admin-panel--elevated:hover {
    transform: translateY(-1px);
    box-shadow: 0 24px 42px rgba(15, 23, 42, 0.08);
}

.admin-filter-form {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.admin-filter-group {
    display: grid;
    gap: 8px;
}

.admin-filter-group label,
.admin-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.admin-select,
.admin-textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 12px;
    font: inherit;
}

.admin-select {
    min-width: 220px;
    height: 44px;
    padding: 0 12px;
}

.admin-textarea {
    min-height: 100px;
    resize: vertical;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.admin-table th {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-table td {
    font-size: 14px;
    color: var(--text);
}

.admin-row-animate {
    transition: background .2s ease, transform .2s ease;
}

.admin-row-animate:hover {
    background: rgba(59, 130, 246, 0.03);
}

.admin-user-cell {
    display: grid;
    gap: 3px;
}

.admin-user-cell strong {
    font-weight: 600;
}

.admin-user-cell span {
    font-size: 12px;
    color: var(--muted);
}

.admin-table-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.admin-empty-state {
    padding: 16px 0;
    color: var(--muted);
}

.admin-details-grid {
    display: grid;
    gap: 16px;
}

.admin-details-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-detail-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    line-height: 1.6;
}

.admin-detail-list strong {
    font-weight: 600;
    color: var(--text);
}

.admin-action-stack {
    display: grid;
    gap: 16px;
    margin-top: 12px;
}

.admin-review-form {
    display: grid;
    gap: 10px;
}

.admin-action-btn {
    min-height: 44px;
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.admin-action-btn:hover {
    transform: translateY(-1px);
}

.admin-action-btn--approve {
    box-shadow: 0 14px 26px rgba(34, 197, 94, 0.14);
}

.admin-action-btn--reject {
    box-shadow: 0 14px 26px rgba(239, 68, 68, 0.14);
}

@media (max-width: 900px) {
    .admin-details-grid--2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .admin-panel {
        padding: 16px;
    }

    .admin-page-header h1 {
        font-size: 22px;
    }

    .admin-select {
        min-width: 100%;
    }
}

/* =========================================
   Admin deposit Methods
========================================= */

.admin-network-list {
    display: grid;
    gap: 14px;
}

.admin-network-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--card), var(--surface));
    padding: 16px;
    display: grid;
    gap: 14px;
}

.admin-network-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-network-card strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.admin-network-address {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    word-break: break-word;
}

.admin-network-form {
    display: grid;
    gap: 14px;
}

.admin-network-create {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    display: grid;
    gap: 12px;
}

.admin-network-create h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.admin-method-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
}

.admin-method-sidebar-card {
    border-radius: 24px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 30%),
        linear-gradient(180deg, var(--card), var(--surface));
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
    padding: 22px;
    display: grid;
    align-content: start;
    gap: 12px;
}

.admin-method-sidebar-kicker {
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b82f6;
}

.admin-method-sidebar-card h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--text);
}

.admin-method-sidebar-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted);
}

.admin-method-legend {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.admin-method-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
}

.admin-method-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.admin-method-dot.is-bank {
    background: #2563eb;
}

.admin-method-dot.is-crypto {
    background: #7c3aed;
}

.admin-method-form {
    display: grid;
    gap: 20px;
}

.admin-method-section {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--card), var(--surface));
    padding: 18px;
    display: grid;
    gap: 16px;
}

.admin-method-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-method-section-kicker {
    margin-bottom: 6px;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b82f6;
}

.admin-method-section h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--text);
}

.admin-method-type-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-method-type-btn {
    min-height: 76px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    display: grid;
    place-items: center;
    gap: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.admin-method-type-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.05);
}

.admin-method-type-btn.is-active {
    border-color: rgba(59, 130, 246, 0.48);
    background: rgba(59, 130, 246, 0.08);
    color: #0f6db7;
}

.admin-method-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-method-type-icon svg {
    width: 18px;
    height: 18px;
}

.admin-method-block {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease;
}

.admin-method-hidden {
    display: none;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-form-grid-span-2 {
    grid-column: span 2;
}

.admin-input,
.admin-select,
.admin-textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 12px 14px;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.admin-input,
.admin-select {
    min-height: 46px;
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
}

.admin-textarea {
    min-height: 110px;
    resize: vertical;
}

@media (max-width: 980px) {
    .admin-method-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-form-grid,
    .admin-method-type-switch {
        grid-template-columns: 1fr;
    }

    .admin-form-grid-span-2 {
        grid-column: auto;
    }
}

.admin-method-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 4px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.admin-method-hero-icon.is-bank {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.06));
    color: #2563eb;
}

.admin-method-hero-icon.is-crypto {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.06));
    color: #7c3aed;
}

.admin-method-mini-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 12px 14px;
    display: grid;
    gap: 4px;
}

.admin-method-mini-label {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-network-card-title-wrap {
    display: grid;
    gap: 8px;
}

.admin-network-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.10);
    color: #7c3aed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    width: fit-content;
}

.admin-inline-actions--space-between {
    justify-content: space-between;
}

.admin-link-button--danger {
    color: #dc2626;
}

.btn-danger {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: #fff;
}

.btn-danger:hover {
    filter: brightness(1.03);
}

.admin-inline-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-inline-form {
    margin: 0;
}

.admin-link-button {
    border: none;
    background: none;
    padding: 0;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.admin-method-form {
    display: grid;
    gap: 20px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 760px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }
}

.admin-method-index-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-method-card {
    display: grid;
    gap: 18px;
    padding: 18px;
    overflow: hidden;
}

.admin-method-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-method-card-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.admin-method-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
}

.admin-method-card-icon.is-bank {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.06));
    color: #2563eb;
}

.admin-method-card-icon.is-crypto {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.06));
    color: #7c3aed;
}

.admin-method-card-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.admin-method-card-eyebrow {
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b82f6;
}

.admin-method-card-copy h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text);
}

.admin-method-card-subtitle {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.admin-method-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-method-meta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.admin-method-meta-pill.is-crypto-pill {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.12);
}

.admin-method-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-method-card-section {
    display: grid;
    gap: 12px;
}

.admin-method-card-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--muted);
}

.admin-method-card-section-head strong {
    color: var(--text);
    font-weight: 700;
}

.admin-method-network-grid {
    display: grid;
    gap: 10px;
}

.admin-method-network-chip {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--card), var(--surface));
    padding: 12px;
    display: grid;
    gap: 10px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.admin-method-network-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.05);
}

.admin-method-network-chip.is-active {
    border-color: rgba(124, 58, 237, 0.18);
}

.admin-method-network-chip-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.admin-method-network-chip-top strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.admin-method-network-chip-address {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    word-break: break-word;
}

.admin-method-card-empty {
    padding: 12px 0;
    font-size: 13px;
    color: var(--muted);
}

.admin-method-bank-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-method-bank-item {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 12px;
    display: grid;
    gap: 6px;
}

.admin-method-bank-item--full {
    grid-column: span 2;
}

.admin-method-bank-item span {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-method-bank-item strong {
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

.admin-method-card-footer {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 980px) {
    .admin-method-index-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .admin-method-card-top {
        flex-direction: column;
    }

    .admin-method-card-actions {
        justify-content: flex-start;
    }

    .admin-method-bank-grid {
        grid-template-columns: 1fr;
    }

    .admin-method-bank-item--full {
        grid-column: auto;
    }
}
.admin-method-content-stack {
    display: grid;
    gap: 18px;
}

/* ===== ADMIN COMPACT MODE ===== */

.admin-method-section {
    padding: 14px;
}

.admin-panel--elevated {
    padding: 16px;
}

.admin-method-section h2 {
    font-size: 16px;
}

.admin-method-section-kicker {
    font-size: 10px;
}

.admin-method-form {
    gap: 12px;
}

.admin-input,
.admin-select,
.admin-textarea {
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 10px;
}

.admin-textarea {
    min-height: 70px;
}
.admin-filter-group label {
    font-size: 11px;
    margin-bottom: 4px;
}
.admin-method-sidebar-card {
    padding: 16px;
}

.admin-method-sidebar-card h3 {
    font-size: 16px;
}

.admin-method-sidebar-card p {
    font-size: 12px;
}
.admin-method-hero-icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
}
.admin-network-card {
    padding: 12px;
    border-radius: 12px;
}

.admin-network-badge {
    font-size: 11px;
    padding: 4px 10px;
}

.admin-network-address {
    font-size: 12px;
}

.admin-network-card-top {
    gap: 6px;
}
.btn {
    padding: 8px 14px;
    font-size: 13px;
}

.admin-action-btn {
    padding: 8px 16px;
}

.admin-method-shell {
    gap: 16px;
}

.admin-form-grid {
    gap: 10px;
}

.admin-network-list {
    gap: 10px;
}

/* ===== TRANSFER MODAL UX IMPROVEMENTS ===== */

/* Modal plus compacte */
.transfer-modal-dialog {
    max-width: 460px;
    width: 92%;
    max-height: 88vh;
    overflow: hidden;
}

.transfer-modal-dialog--compact {
    max-width: 420px;
}

/* Corps de modal sans scrollbar visible */
.transfer-modal-dialog .nova-modal-body {
    position: relative;
    overflow-y: auto;
    max-height: calc(88vh - 72px);
    padding: 18px 18px 110px;
    scrollbar-width: none;
}

.transfer-modal-dialog .nova-modal-body::-webkit-scrollbar {
    display: none;
}

/* Typo plus fine */
.transfer-modal-dialog h3 {
    font-size: 18px;
}

.transfer-modal-dialog .form-block-label {
    font-size: 12px;
    margin-bottom: 6px;
}

.transfer-modal-dialog .money-input,
.transfer-modal-dialog select.money-input {
    font-size: 13px;
    padding: 10px 12px;
    min-height: 46px;
}

.transfer-modal-dialog .segmented-option {
    font-size: 12px;
    padding: 10px 12px;
    min-height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.transfer-review-card strong {
    font-size: 20px;
}

.transfer-review-meta {
    font-size: 12px;
}

/* Champs mieux espacés */
.transfer-modal-dialog .form-block {
    margin-bottom: 14px;
}

.transfer-step2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.transfer-segment-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.transfer-segment-icon svg {
    width: 18px;
    height: 18px;
}

.transfer-method-grid {
    gap: 12px;
}

.transfer-picker-card__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: #3b82f6;
    overflow: hidden;
}

.transfer-picker-card__icon svg {
    width: 20px;
    height: 20px;
}

.transfer-picker-card__icon img {
    width: 74%;
    height: 74%;
    object-fit: contain;
    display: block;
}

.transfer-crypto-stack {
    position: relative;
    width: 34px;
    height: 34px;
    display: block;
}

.transfer-crypto-stack img {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(13, 29, 56, 0.95);
}

.transfer-crypto-stack img:nth-child(1) {
    top: 0;
    left: 8px;
}

.transfer-crypto-stack img:nth-child(2) {
    bottom: 0;
    left: 0;
}

.transfer-crypto-stack img:nth-child(3) {
    bottom: 0;
    right: 0;
}

.transfer-picker-card__icon--crypto {
    border-color: rgba(45, 212, 191, 0.28);
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(220, 252, 231, 0.92));
}

.transfer-picker-card__icon--bank {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.92));
    color: #2563eb;
}

.transfer-picker-card__icon--swift {
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.98), rgba(224, 242, 254, 0.92));
    color: #0284c7;
}

.transfer-picker-card__icon--uk {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(220, 38, 38, 0.18));
    color: #ffffff;
}

.transfer-picker-card__badge {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.transfer-crypto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

.transfer-crypto-selection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.transfer-crypto-selection-grid .form-block {
    min-width: 0;
    width: 100%;
}

.transfer-crypto-selection-grid .transfer-picker-shell,
.transfer-crypto-selection-grid .transfer-picker,
.transfer-crypto-selection-grid .transfer-picker__trigger {
    width: 100%;
}

.transfer-crypto-selection-grid .transfer-field-crypto {
    width: 100%;
    max-width: 100%;
}

.transfer-crypto-selection-grid .transfer-crypto-grid {
    width: 100%;
}

.transfer-crypto-option {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(59, 130, 246, 0.03));
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.transfer-crypto-option:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.34);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.transfer-crypto-option.is-active {
    border-color: rgba(59, 130, 246, 0.56);
    background: rgba(59, 130, 246, 0.10);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18) inset;
}

.transfer-crypto-option__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.08);
    display: grid;
    place-items: center;
}

.transfer-crypto-option__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.transfer-crypto-option__copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.transfer-crypto-option__copy strong {
    font-size: 13px;
    color: var(--text, #12233d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transfer-crypto-option__copy small {
    font-size: 11px;
    color: var(--muted, #64748b);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transfer-crypto-empty {
    grid-column: 1 / -1;
    border: 1px dashed rgba(148, 163, 184, 0.26);
    border-radius: 14px;
    padding: 14px;
    font-size: 12px;
    color: #7f8da9;
    text-align: center;
}

.transfer-picker-card {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.transfer-picker-card:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.38);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
}

.transfer-picker-card.is-active {
    border-color: rgba(59, 130, 246, 0.62);
    background: linear-gradient(180deg, #eff6ff 0%, #e7f0ff 100%);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18) inset, 0 12px 26px rgba(59, 130, 246, 0.10);
}

.transfer-picker-card__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.transfer-picker-card__copy strong {
    font-size: 13px;
    color: #0f172a;
    line-height: 1.25;
}

.transfer-picker-card__copy small {
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
    display: block;
}

.transfer-empty-picker {
    border: 1px dashed rgba(148, 163, 184, 0.26);
    border-radius: 14px;
    padding: 14px;
    font-size: 12px;
    color: #7f8da9;
    text-align: center;
}

/* ===== ACTION BAR ===== */
.transfer-modal-dialog .deposit-actions-row {
    position: static;
    margin-top: 18px;
    padding: 4px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    background: transparent;
    border-top: 0;
    backdrop-filter: none;
}

html[data-theme="dark"] .transfer-modal-dialog .deposit-actions-row,
body.dark .transfer-modal-dialog .deposit-actions-row,
.dark .transfer-modal-dialog .deposit-actions-row {
    background: transparent;
    border-top-color: transparent;
}

/* Le formulaire garde de l'air sous le dernier champ */
.transfer-modal-dialog form {
    padding-bottom: 8px;
}

/* Bouton submit avec spinner */
.transfer-submit-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.transfer-submit-btn__spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    animation: transferSpin .8s linear infinite;
}

@keyframes transferSpin {
    to {
        transform: rotate(360deg);
    }
}

.bankx-subpanel--transfer-intro {
    padding-bottom: 16px;
}

.bankx-transfer-intro-copy {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.transfer-flow-screen {
    display: grid;
    gap: 16px;
    justify-items: center;
    text-align: center;
    padding: 18px 4px 8px;
}

#transferStep1,
#transferStep2,
.transfer-flow-screen {
    will-change: transform, opacity;
}

.is-animated-enter {
    animation: transferSlideIn .34s cubic-bezier(.22, 1, .36, 1);
}

@keyframes transferSlideIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.transfer-flow-screen h4 {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.transfer-flow-screen p {
    margin: 0;
    max-width: 320px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

.transfer-limit-result-copy {
    max-width: 420px;
}

.transfer-limit-result-accent {
    color: #f97316;
    font-weight: 700;
}

.transfer-flow-screen--loading {
    min-height: 340px;
    align-content: center;
}

.transfer-flow-icon {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.18), rgba(15, 23, 42, 0.08));
    color: #2563eb;
    box-shadow: 0 18px 50px rgba(37, 99, 235, 0.16);
}

.transfer-flow-icon-svg {
    width: 24px;
    height: 24px;
}

.transfer-flow-icon--loading {
    background: radial-gradient(circle at top, rgba(59, 130, 246, 0.26), rgba(37, 99, 235, 0.10));
}

.transfer-flow-spinner {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 3px solid rgba(37, 99, 235, 0.22);
    border-top-color: #2563eb;
    animation: transferSpin .9s linear infinite;
}

.transfer-flow-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.08);
    color: #0284c7;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.transfer-flow-primary-btn {
    width: 100%;
    margin-top: 4px;
}

.transfer-flow-link {
    border: 0;
    background: transparent;
    padding: 0;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
}

.transfer-flow-screen--upgrade {
    justify-items: stretch;
    text-align: left;
}

.transfer-flow-screen--upgrade h4,
.transfer-flow-screen--upgrade p {
    max-width: none;
    text-align: center;
}

.transfer-flow-panel {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92));
}

.transfer-flow-panel strong {
    font-size: 13px;
    color: #0f172a;
}

.transfer-flow-panel span {
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
}

.transfer-flow-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.transfer-flow-checks li {
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    color: #0f172a;
}

.transfer-flow-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #34d399, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.transfer-flow-amount-card {
    display: grid;
    gap: 6px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.98), rgba(226, 232, 240, 0.88));
    text-align: center;
}

.transfer-flow-amount-card span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #0284c7;
}

.transfer-flow-amount-card strong {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #0f172a;
}

.transfer-flow-footnote {
    max-width: none;
    text-align: center;
    font-size: 12px;
}

.transfer-upgrade-methods {
    display: grid;
    gap: 12px;
    width: 100%;
}

.transfer-upgrade-method {
    width: 100%;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92));
    text-align: left;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.transfer-upgrade-method:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.32);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.transfer-upgrade-method.is-active {
    border-color: rgba(37, 99, 235, 0.56);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.92));
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.14) inset;
}

.transfer-upgrade-method strong,
.transfer-upgrade-method span {
    display: block;
}

.transfer-upgrade-method strong {
    font-size: 14px;
    color: #0f172a;
}

.transfer-upgrade-method span {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

body.dark-mode .bankx-transfer-intro-copy,
body.theme-dark .bankx-transfer-intro-copy,
body.dark-mode .transfer-flow-screen p,
body.theme-dark .transfer-flow-screen p,
body.dark-mode .transfer-flow-panel span,
body.theme-dark .transfer-flow-panel span,
body.dark-mode .transfer-upgrade-method span,
body.theme-dark .transfer-upgrade-method span,
body.dark-mode .transfer-flow-link,
body.theme-dark .transfer-flow-link {
    color: #9ab0d1;
}

body.dark-mode .transfer-flow-screen h4,
body.theme-dark .transfer-flow-screen h4,
body.dark-mode .transfer-flow-panel strong,
body.theme-dark .transfer-flow-panel strong,
body.dark-mode .transfer-flow-checks li,
body.theme-dark .transfer-flow-checks li,
body.dark-mode .transfer-flow-amount-card strong,
body.theme-dark .transfer-flow-amount-card strong,
body.dark-mode .transfer-upgrade-method strong,
body.theme-dark .transfer-upgrade-method strong {
    color: #e6efff;
}

body.dark-mode .transfer-flow-note,
body.theme-dark .transfer-flow-note {
    background: rgba(59, 130, 246, 0.14);
    color: #7dd3fc;
}


body.dark-mode .transfer-flow-panel,
body.theme-dark .transfer-flow-panel,
body.dark-mode .transfer-flow-amount-card,
body.theme-dark .transfer-flow-amount-card,
body.dark-mode .transfer-upgrade-method,
body.theme-dark .transfer-upgrade-method {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 27, 51, 0.84));
    border-color: rgba(96, 165, 250, 0.16);
}

body.dark-mode .transfer-upgrade-method.is-active,
body.theme-dark .transfer-upgrade-method.is-active {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.22));
    border-color: rgba(59, 130, 246, 0.52);
}

body.dark-mode .transfer-flow-icon,
body.theme-dark .transfer-flow-icon {
    background: radial-gradient(circle at top, rgba(59, 130, 246, 0.22), rgba(15, 23, 42, 0.55));
    color: #93c5fd;
}

/* ===== TRANSFER MODAL REFRESH ===== */
.transfer-modal-dialog {
    --transfer-modal-bg: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(240, 246, 255, 0.98));
    --transfer-modal-surface: rgba(255, 255, 255, 0.7);
    --transfer-modal-surface-strong: rgba(255, 255, 255, 0.92);
    --transfer-modal-border: rgba(148, 163, 184, 0.22);
    --transfer-modal-border-strong: rgba(59, 130, 246, 0.28);
    --transfer-modal-text: #14213d;
    --transfer-modal-muted: #64748b;
    --transfer-modal-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
    --transfer-modal-glow: radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 42%);
    max-width: 540px;
    width: min(540px, calc(100vw - 28px));
    border: 1px solid var(--transfer-modal-border);
    border-radius: 30px;
    background: var(--transfer-modal-bg);
    color: var(--transfer-modal-text);
    box-shadow: var(--transfer-modal-shadow);
    backdrop-filter: blur(18px);
}

body.theme-dark .transfer-modal-dialog,
body.dark-mode .transfer-modal-dialog {
    --transfer-modal-bg: linear-gradient(180deg, rgba(8, 15, 30, 0.98), rgba(11, 20, 39, 0.98));
    --transfer-modal-surface: rgba(15, 23, 42, 0.68);
    --transfer-modal-surface-strong: rgba(15, 23, 42, 0.9);
    --transfer-modal-border: rgba(96, 165, 250, 0.18);
    --transfer-modal-border-strong: rgba(96, 165, 250, 0.3);
    --transfer-modal-text: #edf4ff;
    --transfer-modal-muted: #9fb2cf;
    --transfer-modal-shadow: 0 32px 80px rgba(2, 6, 23, 0.55);
    --transfer-modal-glow: radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 42%);
}

.transfer-modal-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--transfer-modal-glow);
    pointer-events: none;
}

.transfer-modal-dialog .nova-modal-header {
    position: relative;
    z-index: 1;
    padding: 20px 22px 16px;
    background: transparent;
    border-bottom: 1px solid var(--transfer-modal-border);
}

.transfer-modal-dialog .nova-modal-header h3 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--transfer-modal-text);
}

.transfer-modal-dialog .nova-modal-close {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid var(--transfer-modal-border);
    background: var(--transfer-modal-surface);
    color: var(--transfer-modal-muted);
    backdrop-filter: blur(12px);
    transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}

.transfer-modal-dialog .nova-modal-close:hover {
    transform: translateY(-1px);
    border-color: var(--transfer-modal-border-strong);
    color: var(--transfer-modal-text);
    background: var(--transfer-modal-surface-strong);
}

.transfer-modal-dialog .nova-modal-body {
    position: relative;
    z-index: 1;
    padding: 20px 20px 24px;
    background: transparent;
}

.transfer-modal-dialog .form-block-label {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--transfer-modal-muted);
}

.transfer-modal-dialog .money-input,
.transfer-modal-dialog select.money-input {
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid var(--transfer-modal-border);
    background: var(--transfer-modal-surface-strong);
    color: var(--transfer-modal-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.transfer-modal-dialog .money-input::placeholder {
    color: rgba(100, 116, 139, 0.88);
}

.transfer-modal-dialog .money-input:focus,
.transfer-modal-dialog select.money-input:focus {
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
    outline: none;
}

.transfer-method-grid {
    gap: 14px;
}

.transfer-picker-card {
    position: relative;
    min-height: 98px;
    padding: 16px;
    border: 1px solid var(--transfer-modal-border);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, var(--transfer-modal-surface) 100%);
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.transfer-picker-card:hover {
    transform: translateY(-2px);
    border-color: var(--transfer-modal-border-strong);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.12);
}

.transfer-picker-card.is-active {
    border-color: rgba(37, 99, 235, 0.52);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(231, 242, 255, 0.94) 100%);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12) inset, 0 20px 44px rgba(37, 99, 235, 0.14);
}

body.theme-dark .transfer-picker-card.is-active,
body.dark-mode .transfer-picker-card.is-active {
    background: linear-gradient(180deg, rgba(13, 23, 43, 0.98) 0%, rgba(18, 53, 102, 0.56) 100%);
}

body.theme-dark .transfer-modal-dialog .money-input::placeholder,
body.dark-mode .transfer-modal-dialog .money-input::placeholder {
    color: rgba(159, 178, 207, 0.88);
}

.transfer-picker-card__icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px rgba(15, 23, 42, 0.1);
}

.transfer-picker-card__icon svg {
    width: 24px;
    height: 24px;
}

.transfer-segment-icon--coin svg {
    width: 28px;
    height: 28px;
}

.transfer-picker-card__icon--bank {
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(239, 246, 255, 0.98));
    color: #2563eb;
}

.transfer-picker-card__icon--uk {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(190, 24, 93, 0.9));
    color: #fff;
}

.transfer-picker-card__icon--swift {
    background: linear-gradient(135deg, rgba(224, 242, 254, 0.96), rgba(186, 230, 253, 0.96));
    color: #0284c7;
}

.transfer-picker-card__icon--crypto {
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(220, 252, 231, 0.98));
    color: #f7931a;
}

body.theme-dark .transfer-picker-card__icon,
body.dark-mode .transfer-picker-card__icon {
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 26px rgba(2, 6, 23, 0.34);
}

body.theme-dark .transfer-picker-card__icon--bank,
body.dark-mode .transfer-picker-card__icon--bank {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.46), rgba(14, 116, 144, 0.28));
    color: #bfdbfe;
}

body.theme-dark .transfer-picker-card__icon--uk,
body.dark-mode .transfer-picker-card__icon--uk {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.58), rgba(190, 24, 93, 0.44));
}

body.theme-dark .transfer-picker-card__icon--swift,
body.dark-mode .transfer-picker-card__icon--swift {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.42), rgba(30, 64, 175, 0.32));
    color: #bae6fd;
}

body.theme-dark .transfer-picker-card__icon--crypto,
body.dark-mode .transfer-picker-card__icon--crypto {
    background: linear-gradient(135deg, rgba(146, 64, 14, 0.42), rgba(21, 128, 61, 0.28));
    color: #fdba74;
}

.transfer-picker-card__copy {
    gap: 5px;
}

.transfer-picker-card__copy strong {
    font-size: 1.02rem;
    line-height: 1.2;
    color: var(--transfer-modal-text);
}

.transfer-picker-card__copy small {
    font-size: 12px;
    line-height: 1.45;
    color: var(--transfer-modal-muted);
}

.bankx-subpanel--transfer-intro {
    padding: 18px 18px 16px;
    border: 1px solid var(--transfer-modal-border);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.28));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

body.theme-dark .bankx-subpanel--transfer-intro,
body.dark-mode .bankx-subpanel--transfer-intro {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.48));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.bankx-subpanel--transfer-intro h3 {
    margin: 0 0 6px;
    font-size: 1.5rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--transfer-modal-text);
}

.bankx-transfer-intro-copy,
.bankx-transfer-hint {
    color: var(--transfer-modal-muted);
}

.transfer-review-card,
.transfer-fee-preview {
    border: 1px solid var(--transfer-modal-border);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.38));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

body.theme-dark .transfer-review-card,
body.theme-dark .transfer-fee-preview,
body.dark-mode .transfer-review-card,
body.dark-mode .transfer-fee-preview {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.62));
}

.transfer-review-card strong {
    font-size: 1.8rem;
    line-height: 1.06;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
    color: var(--transfer-modal-text);
}

.transfer-review-meta {
    color: var(--transfer-modal-muted);
}

.transfer-fee-preview {
    gap: 0;
    overflow: hidden;
}

.transfer-fee-preview > div {
    padding: 14px 16px;
}

.transfer-fee-preview > div + div {
    border-left: 1px solid var(--transfer-modal-border);
}

.transfer-fee-preview span {
    color: var(--transfer-modal-muted);
}

.transfer-fee-preview strong {
    color: var(--transfer-modal-text);
}

.transfer-modal-dialog .deposit-actions-row {
    gap: 14px;
}

.transfer-modal-dialog .btn.btn-outline,
.transfer-modal-dialog .btn.btn-primary {
    min-height: 52px;
    border-radius: 16px;
}

.transfer-modal-dialog .btn.btn-outline {
    border-color: var(--transfer-modal-border);
    background: var(--transfer-modal-surface);
    color: var(--transfer-modal-text);
}

.transfer-modal-dialog .btn.btn-primary {
    border: 0;
    background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
    box-shadow: 0 18px 34px rgba(29, 78, 216, 0.24);
}

.transfer-modal-dialog .btn.btn-primary:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.transfer-flow-screen {
    padding: 24px 6px 10px;
}

.transfer-flow-icon {
    border: 1px solid var(--transfer-modal-border);
}

.transfer-flow-panel,
.transfer-flow-amount-card,
.transfer-upgrade-method {
    border-radius: 20px;
}

@media (max-width: 640px) {
    .transfer-modal-dialog {
        width: calc(100vw - 18px);
        border-radius: 24px;
        max-height: calc(100vh - 18px);
    }

    .transfer-modal-dialog .nova-modal-header {
        padding: 18px 16px 14px;
    }

    .transfer-modal-dialog .nova-modal-header h3 {
        font-size: 1.15rem;
    }

    .transfer-modal-dialog .nova-modal-body {
        max-height: calc(100vh - 84px);
        padding: 14px 14px 22px;
    }

    .transfer-step2-grid,
    .transfer-crypto-grid,
    .transfer-modal-dialog .deposit-actions-row {
        grid-template-columns: 1fr;
    }

    .transfer-method-grid {
        gap: 10px;
    }

    .transfer-picker-card {
        min-height: 82px;
        padding: 12px;
        gap: 10px;
        border-radius: 18px;
    }

    .transfer-picker-card__icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
    }

    .transfer-picker-card__icon svg {
        width: 20px;
        height: 20px;
    }

    .transfer-segment-icon--coin svg {
        width: 24px;
        height: 24px;
    }

    .transfer-picker-card__copy {
        gap: 4px;
    }

    .transfer-picker-card__copy strong {
        font-size: 0.9rem;
        line-height: 1.15;
    }

    .transfer-picker-card__copy small {
        font-size: 11px;
        line-height: 1.35;
    }

    #transferStep1 {
        display: grid;
        gap: 14px;
    }

    #transferStep1 > .form-block:last-of-type {
        margin-bottom: 0;
    }

    #transferStep1 > #transferNextBtn {
        width: 100%;
        min-height: 48px;
        margin-top: 2px;
        border-radius: 15px;
    }
}

@media (max-width: 420px) {
    .transfer-modal-dialog {
        width: calc(100vw - 12px);
        border-radius: 20px;
    }

    .transfer-modal-dialog .nova-modal-header {
        padding: 16px 14px 12px;
    }

    .transfer-modal-dialog .nova-modal-body {
        padding: 12px 12px 20px;
    }

    .transfer-method-grid {
        gap: 8px;
    }

    .transfer-picker-card {
        min-height: 74px;
        padding: 10px;
        gap: 9px;
        border-radius: 16px;
    }

    .transfer-picker-card__icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 13px;
    }

    .transfer-picker-card__copy strong {
        font-size: 0.82rem;
    }

    .transfer-picker-card__copy small {
        font-size: 10px;
        line-height: 1.3;
    }

    #transferStep1 > #transferNextBtn {
        min-height: 46px;
    }
}

/* ===== MONEY INPUT FIX ===== */
.money-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.transfer-modal-dialog .money-input-wrap .money-input-symbol,
.add-money-modal-dialog .money-input-wrap .money-input-symbol {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    color: #64748b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

.transfer-modal-dialog .money-input-wrap .money-input,
.add-money-modal-dialog .money-input-wrap .money-input {
    padding-left: 38px !important;
}

/* Review card */
.transfer-review-card {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.03), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(148, 163, 184, 0.18);
    text-align: center;
    margin-bottom: 18px;
}

.transfer-review-label {
    font-size: 12px;
    color: var(--text-soft, #64748b);
    margin-bottom: 4px;
}

.transfer-code-state {
    text-align: center;
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
}

.transfer-code-state__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 28px;
    background: rgba(59, 130, 246, 0.08);
}

.transfer-code-state h4 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
}

.transfer-code-state p {
    margin: 0;
    color: var(--text-soft, #64748b);
    line-height: 1.7;
    font-size: 13px;
}

.transfer-code-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.transfer-code-progress span {
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
}

.transfer-code-progress span.is-active {
    background: #0ea5e9;
}

.transfer-support-btn {
    width: 100%;
}

.transfer-code-input {
    text-align: center;
    letter-spacing: 8px;
    font-size: 22px;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 640px) {
    .transfer-modal-dialog {
        width: calc(100% - 20px);
        max-width: none;
    }

    .transfer-modal-dialog .nova-modal-body {
        padding: 16px 14px 104px;
    }

    .transfer-review-card strong,
    .transfer-code-state h4 {
        font-size: 20px;
    }

    .transfer-code-input {
        font-size: 20px;
        letter-spacing: 6px;
    }
}

.admin-static-field {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 12px 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    word-break: break-word;
}

.admin-muted {
    font-size: 12px;
    color: var(--muted);
}

.banking-v2__mini-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    outline: none;
    background: rgba(20, 145, 229, 0.10);
    color: #1491e5;
    border-radius: 999px;
    padding: 8px 12px;
    min-height: 34px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
    white-space: nowrap;
}

.banking-v2__mini-action:hover {
    background: rgba(20, 145, 229, 0.16);
    transform: translateY(-1px);
}

.banking-v2__mini-action:focus-visible {
    box-shadow: 0 0 0 3px rgba(20, 145, 229, 0.18);
}

.banking-v2__mini-action:active {
    transform: translateY(0);
}

.banking-v2__row-meta .banking-v2__mini-action {
    margin-right: 8px;
    margin-top: 4px;
}

.banking-v2__row-meta .banking-v2__mini-action:last-child {
    margin-right: 0;
}

.transfer-code-reference {
    margin: -6px 0 0;
    font-size: 12px;
    color: var(--text-soft, #64748b);
    word-break: break-word;
}

.banking-v2__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.banking-v2__panel {
    width: 100%;
}

.banking-v2__list {
    width: 100%;
}

.banking-v2__transfer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 18px 20px;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.banking-v2__transfer-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.banking-v2__transfer-content {
    min-width: 0;
    flex: 1 1 auto;
}

.banking-v2__transfer-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.banking-v2__transfer-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.banking-v2__transfer-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-soft, #64748b);
}

.banking-v2__transfer-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 150px;
    min-width: 150px;
}

.banking-v2__transfer-amount {
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: flex-end;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
    color: var(--text);
    text-align: right;
    min-width: 110px;
    margin-left: auto;
}

.banking-v2__transfer-actions.is-empty {
    flex-basis: auto;
    min-width: 0;
}

@media (min-width: 641px) {
    .banking-v2__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 20px;
    }

    .banking-v2__row-content strong {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.3;
    }

    .banking-v2__row-meta {
        gap: 10px;
    }
}

.banking-v2__transfer-amount.credit {
    color: #22c55e;
}

.banking-v2__transfer-amount.debit {
    color: var(--text);
}

.banking-v2__mini-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    outline: none;
    background: rgba(20, 145, 229, 0.10);
    color: #1491e5;
    border-radius: 999px;
    padding: 8px 12px;
    min-height: 34px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
    white-space: nowrap;
}

.banking-v2__mini-action:hover {
    background: rgba(20, 145, 229, 0.16);
    transform: translateY(-1px);
}

.banking-v2__mini-action:focus-visible {
    box-shadow: 0 0 0 3px rgba(20, 145, 229, 0.18);
}

.transfer-code-reference {
    margin: -6px 0 0;
    font-size: 12px;
    color: var(--text-soft, #64748b);
    word-break: break-word;
}

@media (max-width: 992px) {
    .banking-v2__transfer-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .banking-v2__transfer-main {
        width: 100%;
    }

    .banking-v2__transfer-actions {
        width: 100%;
        order: 3;
    }

    .banking-v2__transfer-amount {
        margin-left: auto;
        order: 2;
        min-width: auto;
    }
}

@media (max-width: 640px) {
    .banking-v2__transfer-row {
        padding: 16px;
        gap: 12px;
    }

    .banking-v2__transfer-topline {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .banking-v2__transfer-meta {
        gap: 6px;
    }

    .banking-v2__transfer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .banking-v2__mini-action {
        width: 100%;
        white-space: normal;
    }

    .banking-v2__transfer-amount {
        width: 100%;
        text-align: left;
    }
}

.banking-v2 {
    width: 100%;
    max-width: 100%;
}

.banking-v2__grid,
.banking-v2__panel,
.banking-v2__list {
    width: 100%;
    max-width: 100%;
}

.banking-v2__panel {
    overflow: hidden;
}

.transfer-code-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 140px;
}

.transfer-code-submit-btn__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: transferSpin .8s linear infinite;
}

@keyframes transferSpin {
    to {
        transform: rotate(360deg);
    }
}

.transfer-code-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 12px;
}

.transfer-code-progress span {
    width: 42px;
    height: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    transition: all .25s ease;
}

.transfer-code-progress span.is-active {
    background: #3b82f6;
}

.transfer-code-progress span.is-active.is-danger {
    background: #dc2626;
}

.transfer-code-progress span.is-completed {
    background: #16a34a;
}

/* =========================================
   CREDIT PAGE
========================================= */

/* =========================================
   CREDIT PAGE
========================================= */

.credit-page {
    display: grid;
    gap: 22px;
}

.credit-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.credit-page__title {
    margin: 0 0 6px;
    font-size: 32px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
}

.credit-page__subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

/* HERO */

.credit-hero-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(620px, 1.5fr);
    gap: 18px;
    align-items: start;
}

.credit-score-card,
.credit-calculator-card,
.credit-documents-panel {
    border-radius: 22px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

body.theme-dark .credit-score-card,
body.theme-dark .credit-calculator-card,
body.theme-dark .credit-documents-panel,
body.theme-dark .credit-product-card {
    background: linear-gradient(180deg, rgba(10, 22, 52, 0.98), rgba(8, 20, 46, 0.98));
    border: 1px solid rgba(59, 130, 246, 0.14);
}

body:not(.theme-dark) .credit-score-card,
body:not(.theme-dark) .credit-calculator-card,
body:not(.theme-dark) .credit-documents-panel,
body:not(.theme-dark) .credit-product-card {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.credit-score-card {
    padding: 22px 18px 20px;
    position: relative;
}

.credit-score-card__topline {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 26%, #22c55e 70%, #14b8a6 100%);
}

.credit-score-card__title,
.credit-calculator-card__title,
.credit-section-head h2,
.credit-documents-panel__head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

body.theme-dark .credit-score-card__title,
body.theme-dark .credit-calculator-card__title,
body.theme-dark .credit-documents-panel__head h2 {
    color: #f8fafc;
}

body:not(.theme-dark) .credit-score-card__title,
body:not(.theme-dark) .credit-calculator-card__title,
body:not(.theme-dark) .credit-documents-panel__head h2,
body:not(.theme-dark) .credit-section-head h2 {
    color: #0f172a;
}

/* GAUGE */

.credit-gauge {
    display: flex;
    justify-content: center;
    margin: 16px 0 14px;
}

.credit-gauge__meter {
    position: relative;
    width: 190px;
    height: 110px;
}

.credit-gauge__svg {
    width: 100%;
    height: 100%;
}

.credit-gauge__track,
.credit-gauge__progress {
    fill: none;
    stroke-linecap: round;
    stroke-width: 16;
}

body.theme-dark .credit-gauge__track {
    stroke: rgba(255, 255, 255, 0.16);
}

body:not(.theme-dark) .credit-gauge__track {
    stroke: rgba(15, 23, 42, 0.12);
}

.credit-gauge__progress {
    stroke: #10b981;
    transition: stroke-dashoffset .45s ease;
}

.credit-gauge__center {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100px;
}

.credit-gauge__value {
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

body.theme-dark .credit-gauge__value {
    color: #f8fafc;
}

body:not(.theme-dark) .credit-gauge__value {
    color: #0f172a;
}

.credit-gauge__label {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #10b981;
}

.credit-score-stats {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.credit-score-stats__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
}

body.theme-dark .credit-score-stats__row span {
    color: #8fa5c7;
}

body:not(.theme-dark) .credit-score-stats__row span {
    color: #64748b;
}

.credit-score-stats__row strong {
    color: #10b981;
    font-weight: 800;
    white-space: nowrap;
}

.credit-link-btn {
    margin-top: 16px;
    border: none;
    background: transparent;
    color: #1d9bf0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* CALCULATOR */

.credit-calculator-card {
    padding: 16px;
    overflow: hidden;
}

.credit-calculator-card__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 18px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.credit-calculator-main {
    min-width: 0;
    width: 100%;
    display: grid;
    gap: 16px;
    padding-top: 2px;
    overflow: hidden;
}

.credit-calculator-topbar {
    display: block;
    min-width: 0;
}

.credit-calculator-selects {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 10px;
    align-items: end;
    width: 100%;
    min-width: 0;
}

.credit-select-block {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.credit-select-block label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

body.theme-dark .credit-select-block label {
    color: #9fb3d1;
}

body:not(.theme-dark) .credit-select-block label {
    color: #64748b;
}

.credit-select {
    width: 100%;
    min-width: 0;
    height: 38px;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

body.theme-dark .credit-select {
    background: rgba(255,255,255,0.05);
    color: #f8fafc;
    border: 1px solid rgba(148,163,184,0.14);
}

body:not(.theme-dark) .credit-select {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(148,163,184,0.24);
}

.credit-slider-block {
    display: grid;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.credit-slider-block__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.credit-slider-block__head label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

body.theme-dark .credit-slider-block__head label {
    color: #d7e3f4;
}

body:not(.theme-dark) .credit-slider-block__head label {
    color: #334155;
}

.credit-slider-block__head strong {
    font-size: clamp(14px, 1.4vw, 15px);
    font-weight: 800;
    color: #18a8ff;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.1;
}

.credit-range {
    width: 100%;
    min-width: 0;
    appearance: none;
    height: 5px;
    border-radius: 999px;
    outline: none;
}

body.theme-dark .credit-range {
    background: rgba(148, 163, 184, 0.28);
}

body:not(.theme-dark) .credit-range {
    background: rgba(148, 163, 184, 0.22);
}

.credit-range::-webkit-slider-thumb {
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #18a8ff;
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(24, 168, 255, 0.14);
}

.credit-range-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    font-size: 11px;
    line-height: 1.2;
}

.credit-range-meta span {
    min-width: 0;
    white-space: nowrap;
}

.credit-range-meta span:first-child {
    text-align: left;
}

.credit-range-meta span:last-child {
    text-align: right;
}

body.theme-dark .credit-range-meta {
    color: #94a3b8;
}

body:not(.theme-dark) .credit-range-meta {
    color: #64748b;
}

.credit-quick-entry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.credit-quick-entry__field {
    display: grid;
    gap: 8px;
}

.credit-quick-entry__field label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

body.theme-dark .credit-quick-entry__field label {
    color: #d7e3f4;
}

body:not(.theme-dark) .credit-quick-entry__field label {
    color: #334155;
}

.credit-quick-entry__input-wrap {
    position: relative;
}

.credit-quick-entry__input {
    width: 100%;
    min-height: 42px;
    padding: 0 62px 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
}

.credit-quick-entry__input:focus {
    border-color: #18a8ff;
    box-shadow: 0 0 0 4px rgba(24, 168, 255, 0.10);
}

body.theme-dark .credit-quick-entry__input {
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
}

body:not(.theme-dark) .credit-quick-entry__input {
    background: #f8fbff;
    color: #0f172a;
}

.credit-quick-entry__suffix {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
}

body.theme-dark .credit-quick-entry__suffix {
    color: #94a3b8;
}

body:not(.theme-dark) .credit-quick-entry__suffix {
    color: #64748b;
}

.credit-summary-box {
    min-width: 0;
    width: 100%;
    max-width: 250px;
    justify-self: end;
    align-self: start;
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 12px;
}

body.theme-dark .credit-summary-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

body:not(.theme-dark) .credit-summary-box {
    background: #f8fbff;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.credit-summary-box__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.credit-summary-box__row span {
    font-size: 13px;
    line-height: 1.25;
}

body.theme-dark .credit-summary-box__row span {
    color: #94a3b8;
}

body:not(.theme-dark) .credit-summary-box__row span {
    color: #64748b;
}

.credit-summary-box__row strong {
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    line-height: 1.1;
}

body.theme-dark .credit-summary-box__row strong {
    color: #f8fafc;
}

body:not(.theme-dark) .credit-summary-box__row strong {
    color: #0f172a;
}

.credit-summary-box__row--main strong {
    font-size: clamp(20px, 2vw, 24px);
    letter-spacing: -0.03em;
}

.credit-summary-box__divider {
    height: 1px;
}

body.theme-dark .credit-summary-box__divider {
    background: rgba(148, 163, 184, 0.16);
}

body:not(.theme-dark) .credit-summary-box__divider {
    background: rgba(148, 163, 184, 0.18);
}

.credit-summary-box__note {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
}

body.theme-dark .credit-summary-box__note {
    color: #a6b7d1;
}

body:not(.theme-dark) .credit-summary-box__note {
    color: #64748b;
}

.credit-apply-btn {
    min-height: 42px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #1698d8 0%, #1daaf2 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(29, 170, 242, 0.22);
}

.credit-apply-btn:disabled,
.js-pack-submit:disabled,
.bankx-btn.btn-is-disabled,
.btn.btn-primary.btn-is-disabled {
    cursor: not-allowed;
    opacity: 0.62;
    box-shadow: none;
}

#loanAmountDisplay,
#loanDurationDisplay,
#loanMonthlyPaymentDisplay,
#loanRateDisplay,
#loanTotalCostDisplay {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* garde 2 colonnes sur desktop, passe en 1 colonne seulement plus tard */
@media (max-width: 1180px) {
    .credit-calculator-card__inner {
        grid-template-columns: 1fr;
    }

    .credit-summary-box {
        max-width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 640px) {
    .credit-calculator-selects {
        grid-template-columns: 1fr;
    }

    .credit-quick-entry {
        grid-template-columns: 1fr;
    }

    .credit-summary-box__row--main strong {
        font-size: 22px;
    }
}

/* PRODUCTS */

.credit-products-section,
.credit-documents-section,
.credit-form-section {
    display: grid;
    gap: 12px;
}

.credit-products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.credit-product-card {
    border-radius: 18px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: .2s ease;
}

.credit-product-card:hover {
    transform: translateY(-2px);
}

body.theme-dark .credit-product-card:hover {
    border-color: rgba(24, 168, 255, 0.4);
}

body:not(.theme-dark) .credit-product-card:hover {
    border-color: rgba(24, 168, 255, 0.36);
}

.credit-product-card.is-active {
    border-color: #16a8ff !important;
    box-shadow: 0 0 0 2px rgba(22, 168, 255, 0.14);
}

.credit-product-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.credit-product-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

body.theme-dark .credit-product-card__icon {
    background: rgba(255,255,255,0.06);
    color: #90a4c3;
}

body:not(.theme-dark) .credit-product-card__icon {
    background: #eff6ff;
    color: #1d4ed8;
}

.credit-product-card__badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.16);
    color: #16a34a;
    font-size: 10px;
    font-weight: 800;
}

.credit-product-card__title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 12px;
}

body.theme-dark .credit-product-card__title {
    color: #f8fafc;
}

body:not(.theme-dark) .credit-product-card__title {
    color: #0f172a;
}

.credit-product-card__meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.credit-product-card__meta span {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}

body.theme-dark .credit-product-card__meta span {
    color: #6f86ab;
}

body:not(.theme-dark) .credit-product-card__meta span {
    color: #64748b;
}

.credit-product-card__meta strong {
    font-size: 14px;
    font-weight: 800;
}

body.theme-dark .credit-product-card__meta strong {
    color: #f8fafc;
}

body:not(.theme-dark) .credit-product-card__meta strong {
    color: #0f172a;
}

.credit-product-card__meta-right {
    text-align: right;
}

/* DOCUMENTS */

.credit-documents-panel {
    padding: 24px 20px 20px;
}

.credit-documents-panel__head {
    text-align: center;
    margin-bottom: 22px;
}

.credit-documents-panel__head p {
    max-width: 760px;
    margin: 10px auto 0;
    font-size: 14px;
    line-height: 1.65;
}

body.theme-dark .credit-documents-panel__head p {
    color: #9ab0d0;
}

body:not(.theme-dark) .credit-documents-panel__head p {
    color: #64748b;
}

.credit-documents-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.credit-doc-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
}

body.theme-dark .credit-doc-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148, 163, 184, 0.10);
}

body:not(.theme-dark) .credit-doc-card {
    background: #f8fbff;
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.credit-doc-card--wide {
    grid-column: 1 / -1;
}

.credit-doc-card__number {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(24, 168, 255, 0.14);
    color: #18a8ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
}

.credit-doc-card__content h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
}

body.theme-dark .credit-doc-card__content h3 {
    color: #f8fafc;
}

body:not(.theme-dark) .credit-doc-card__content h3 {
    color: #0f172a;
}

.credit-doc-card__kicker {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}

body.theme-dark .credit-doc-card__kicker {
    color: #6f86ab;
}

body:not(.theme-dark) .credit-doc-card__kicker {
    color: #64748b;
}

.credit-doc-card__content ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.7;
}

body.theme-dark .credit-doc-card__content ul {
    color: #afc1da;
}

body:not(.theme-dark) .credit-doc-card__content ul {
    color: #475569;
}

.credit-income-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.credit-income-box {
    border-radius: 14px;
    padding: 14px;
}

body.theme-dark .credit-income-box {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148, 163, 184, 0.10);
}

body:not(.theme-dark) .credit-income-box {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.credit-income-box strong {
    display: block;
    margin-bottom: 10px;
    color: #18a8ff;
    font-size: 14px;
}

.credit-income-box ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
}

body.theme-dark .credit-income-box ul {
    color: #afc1da;
}

body:not(.theme-dark) .credit-income-box ul {
    color: #475569;
}

.credit-documents-note {
    margin-top: 16px;
    border-radius: 14px;
    padding: 14px 16px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
}

body.theme-dark .credit-documents-note {
    background: rgba(24, 168, 255, 0.06);
    border: 1px solid rgba(24, 168, 255, 0.12);
    color: #dbeafe;
}

body:not(.theme-dark) .credit-documents-note {
    background: #eff6ff;
    border: 1px solid rgba(59, 130, 246, 0.14);
    color: #1e3a8a;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .credit-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .credit-hero-grid {
        grid-template-columns: 1fr;
    }

    .credit-documents-grid {
        grid-template-columns: 1fr;
    }

    .credit-doc-card--wide {
        grid-column: auto;
    }

    .credit-income-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .credit-page__title {
        font-size: 28px;
    }

    .credit-products-grid {
        grid-template-columns: 1fr;
    }

    .credit-score-card,
    .credit-calculator-card,
    .credit-documents-panel {
        border-radius: 18px;
    }

    .credit-doc-card__content h3 {
        font-size: 15px;
    }
}

/* =========================================
   LOAN MODAL MULTI STEP
========================================= */

body.modal-open {
    overflow: hidden;
}

.loan-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.44);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 200;
}

.loan-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.loan-modal-panel {
    width: min(1120px, 100%);
    height: 100vh;
    transform: translateX(100%);
    transition: transform .3s ease;
    display: grid;
    grid-template-rows: auto 1fr;
    box-shadow: -20px 0 60px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.loan-modal-overlay.is-open .loan-modal-panel {
    transform: translateX(0);
}

body.theme-dark .loan-modal-panel {
    background: #08142e;
    color: #f8fafc;
}

body:not(.theme-dark) .loan-modal-panel {
    background: #f8fbff;
    color: #0f172a;
}

.loan-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.loan-modal-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1d9bf0;
    margin-bottom: 6px;
}

.loan-modal-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.loan-modal-close {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.theme-dark .loan-modal-close {
    background: rgba(255,255,255,0.06);
    color: #f8fafc;
}

body:not(.theme-dark) .loan-modal-close {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(148,163,184,0.18);
}

.loan-modal-body {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
    overflow: auto;
}

.loan-modal-summary {
    border-radius: 22px;
    padding: 20px;
    align-self: start;
    position: sticky;
    top: 0;
}

body.theme-dark .loan-modal-summary {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(148,163,184,0.12);
}

body:not(.theme-dark) .loan-modal-summary {
    background: #ffffff;
    border: 1px solid rgba(148,163,184,0.16);
}

.loan-modal-summary h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 800;
}

.loan-modal-summary__list {
    display: grid;
    gap: 12px;
}

.loan-modal-summary__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.loan-modal-summary__row span {
    font-size: 13px;
}

body.theme-dark .loan-modal-summary__row span {
    color: #9fb3d1;
}

body:not(.theme-dark) .loan-modal-summary__row span {
    color: #64748b;
}

.loan-modal-summary__row strong {
    text-align: right;
    font-size: 14px;
    font-weight: 800;
}

.loan-modal-form-wrap {
    min-width: 0;
    display: grid;
    gap: 20px;
}

.loan-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.loan-step {
    border-radius: 16px;
    padding: 14px 12px;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

body.theme-dark .loan-step {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148,163,184,0.10);
}

body:not(.theme-dark) .loan-step {
    background: #ffffff;
    border: 1px solid rgba(148,163,184,0.16);
}

.loan-step span {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.loan-step span svg {
    width: 16px;
    height: 16px;
    display: block;
}

body.theme-dark .loan-step span {
    background: rgba(255,255,255,0.08);
    color: #cbd5e1;
}

body:not(.theme-dark) .loan-step span {
    background: #eff6ff;
    color: #1d4ed8;
}

.loan-step small {
    font-size: 12px;
    font-weight: 700;
}

body.theme-dark .loan-step small {
    color: #9fb3d1;
}

body:not(.theme-dark) .loan-step small {
    color: #64748b;
}

.loan-step.is-active {
    border-color: #1d9bf0 !important;
    box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.12);
}

.loan-step.is-active span,
.loan-step.is-done span {
    background: linear-gradient(135deg, #1698d8 0%, #1daaf2 100%);
    color: #fff;
}

.loan-form-step {
    display: none;
}

.loan-form-step.is-active {
    display: block;
}

.loan-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.loan-form-grid__full {
    grid-column: 1 / -1;
}

.loan-file-input {
    display: block;
    width: 100%;
}

.loan-file-input__hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
}

body.theme-dark .loan-file-input__hint {
    color: #8da2c0;
}

body:not(.theme-dark) .loan-file-input__hint {
    color: #64748b;
}

.loan-file-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.loan-file-list__empty,
.loan-file-list__item {
    border-radius: 14px;
    padding: 12px 14px;
}

body.theme-dark .loan-file-list__empty,
body.theme-dark .loan-file-list__item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148,163,184,0.14);
}

body:not(.theme-dark) .loan-file-list__empty,
body:not(.theme-dark) .loan-file-list__item {
    background: #f8fafc;
    border: 1px solid rgba(148,163,184,0.18);
}

.loan-file-list__empty {
    font-size: 13px;
}

body.theme-dark .loan-file-list__empty {
    color: #8da2c0;
}

body:not(.theme-dark) .loan-file-list__empty {
    color: #64748b;
}

.loan-file-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.loan-file-list__meta {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.loan-file-list__name {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

.loan-file-list__details {
    font-size: 12px;
}

body.theme-dark .loan-file-list__details {
    color: #8da2c0;
}

body:not(.theme-dark) .loan-file-list__details {
    color: #64748b;
}

.loan-file-list__remove {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}

.loan-file-list__remove:hover {
    transform: translateY(-1px);
}

.loan-file-list__remove:focus-visible {
    outline: 2px solid #1d9bf0;
    outline-offset: 2px;
}

body.theme-dark .loan-file-list__remove {
    background: rgba(239,68,68,0.16);
    color: #fecaca;
}

body:not(.theme-dark) .loan-file-list__remove {
    background: rgba(239,68,68,0.10);
    color: #b91c1c;
}

.loan-textarea {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    border-radius: 16px;
    padding: 14px 16px;
    font: inherit;
    outline: none;
}

body.theme-dark .loan-textarea {
    background: rgba(255,255,255,0.04);
    color: #f8fafc;
    border: 1px solid rgba(148,163,184,0.14);
}

body:not(.theme-dark) .loan-textarea {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(148,163,184,0.20);
}

.loan-final-review {
    border-radius: 18px;
    padding: 18px;
}

body.theme-dark .loan-final-review {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148,163,184,0.10);
}

body:not(.theme-dark) .loan-final-review {
    background: #ffffff;
    border: 1px solid rgba(148,163,184,0.16);
}

.loan-final-review h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
}

.loan-final-review p {
    margin: 0 0 18px;
    line-height: 1.6;
}

body.theme-dark .loan-final-review p {
    color: #9fb3d1;
}

body:not(.theme-dark) .loan-final-review p {
    color: #64748b;
}

.loan-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    line-height: 1.6;
}

.loan-check input {
    margin-top: 4px;
}

.loan-modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.loan-step-btn {
    min-width: 140px;
}

.loan-submit-btn,
.loan-documents-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.loan-submit-btn__spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 999px;
    animation: transferSpin .8s linear infinite;
}

.loan-submit-btn.is-loading .loan-submit-btn__spinner,
.loan-documents-submit-btn.is-loading .loan-submit-btn__spinner {
    display: inline-block;
}

.loan-modal-form.is-submitting,
.admin-form-stack.is-submitting {
    pointer-events: none;
}

.loan-modal-form.is-submitting .loan-form-step.is-active,
.admin-form-stack.is-submitting .loan-form-grid,
.admin-form-stack.is-submitting .deposit-actions-row {
    opacity: 0.68;
}

@media (max-width: 1100px) {
    .loan-modal-body {
        grid-template-columns: 1fr;
    }

    .loan-modal-summary {
        position: static;
    }
}

@media (max-width: 760px) {
    .loan-modal-panel {
        width: 100%;
    }

    .loan-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loan-form-grid {
        grid-template-columns: 1fr;
    }

    .loan-modal-actions {
        flex-direction: column;
    }

    .loan-step-btn {
        width: 100%;
    }
}

/* =========================================
   ADMIN LOANS
========================================= */

.admin-page {
    display: grid;
    gap: 22px;
}

.admin-page--animated {
    animation: adminFadeIn .28s ease;
}

@keyframes adminFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-page__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1d9bf0;
    margin-bottom: 6px;
}

.admin-page__title {
    margin: 0;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.04em;
}

body.theme-dark .admin-page__title {
    color: #f8fafc;
}

body:not(.theme-dark) .admin-page__title {
    color: #0f172a;
}

/* CARDS */

.admin-card {
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

body.theme-dark .admin-card {
    background: linear-gradient(180deg, rgba(10, 22, 52, 0.98), rgba(8, 20, 46, 0.98));
    border: 1px solid rgba(59, 130, 246, 0.14);
}

body:not(.theme-dark) .admin-card {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.admin-card h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 800;
}

body.theme-dark .admin-card h3 {
    color: #f8fafc;
}

body:not(.theme-dark) .admin-card h3 {
    color: #0f172a;
}

/* GRID */

.admin-grid {
    display: grid;
    gap: 18px;
}

.admin-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* FILTERS */

.admin-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.admin-select {
    min-width: 220px;
    height: 42px;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
    outline: none;
}

body.theme-dark .admin-select {
    background: rgba(255,255,255,0.05);
    color: #f8fafc;
    border: 1px solid rgba(148,163,184,0.14);
}

body:not(.theme-dark) .admin-select {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(148,163,184,0.22);
}

/* TABLE */

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px;
}

.admin-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.admin-table thead th {
    text-align: left;
    padding: 14px 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.theme-dark .admin-table thead th {
    background: rgba(255,255,255,0.04);
    color: #8fa5c7;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

body:not(.theme-dark) .admin-table thead th {
    background: #f8fafc;
    color: #64748b;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.admin-table tbody td {
    padding: 15px 14px;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.5;
}

body.theme-dark .admin-table tbody td {
    color: #dbe7f5;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

body:not(.theme-dark) .admin-table tbody td {
    color: #334155;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody strong {
    font-weight: 800;
}

body.theme-dark .admin-table small {
    color: #8fa5c7;
}

body:not(.theme-dark) .admin-table small {
    color: #64748b;
}

/* KV LIST */

.admin-kv-list {
    display: grid;
    gap: 12px;
}

.admin-kv-list > div {
    padding: 12px 14px;
    border-radius: 14px;
    line-height: 1.6;
    word-break: break-word;
}

body.theme-dark .admin-kv-list > div {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148,163,184,0.08);
    color: #dbe7f5;
}

body:not(.theme-dark) .admin-kv-list > div {
    background: #f8fbff;
    border: 1px solid rgba(148,163,184,0.14);
    color: #334155;
}

.admin-kv-list strong {
    font-weight: 800;
}

/* FORMS */

.admin-form-stack {
    display: grid;
    gap: 14px;
}

.admin-form-stack + .admin-form-stack {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed rgba(148, 163, 184, 0.18);
}

.admin-form-stack .form-block {
    margin: 0;
}

.admin-form-stack .form-block-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

body.theme-dark .admin-form-stack .form-block-label {
    color: #c9d9ee;
}

body:not(.theme-dark) .admin-form-stack .form-block-label {
    color: #334155;
}

/* INPUTS / TEXTAREAS */

body.theme-dark .money-input,
body.theme-dark .loan-textarea {
    background: rgba(255,255,255,0.04);
    color: #f8fafc;
    border: 1px solid rgba(148,163,184,0.14);
}

body:not(.theme-dark) .money-input,
body:not(.theme-dark) .loan-textarea {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(148,163,184,0.20);
}

.money-input {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    padding: 0 14px;
    outline: none;
    font-size: 14px;
    font-weight: 600;
}

.loan-textarea {
    width: 100%;
    min-height: 120px;
    border-radius: 14px;
    padding: 12px 14px;
    outline: none;
    resize: vertical;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.55;
}

/* BUTTONS */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: .2s ease;
    border: none;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, #1698d8 0%, #1daaf2 100%);
    color: #fff;
    box-shadow: 0 12px 22px rgba(29, 170, 242, 0.18);
}

.btn-outline {
    background: transparent;
}

body.theme-dark .btn-outline {
    color: #e2ecf9;
    border: 1px solid rgba(148,163,184,0.18);
}

body:not(.theme-dark) .btn-outline {
    color: #0f172a;
    border: 1px solid rgba(148,163,184,0.22);
    background: #ffffff;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 12px 22px rgba(220, 38, 38, 0.18);
}

.btn-sm {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

/* ALERTS */

.alert {
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.55;
}

.alert-success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.18);
    color: #059669;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.16);
    color: #dc2626;
}

/* BADGES */

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.is-success {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.status-badge.is-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.status-badge.is-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.status-badge.is-neutral {
    background: rgba(148, 163, 184, 0.14);
    color: #64748b;
}

/* LINKS IN DOCUMENTS */

.admin-kv-list a {
    font-weight: 700;
    color: #1d9bf0;
    text-decoration: none;
}

.admin-kv-list a:hover {
    text-decoration: underline;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .admin-grid--2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .admin-page__title {
        font-size: 26px;
    }

    .admin-card {
        border-radius: 18px;
        padding: 16px;
    }

    .admin-select {
        min-width: 100%;
        width: 100%;
    }

    .admin-table {
        min-width: 760px;
    }

    .btn {
        width: 100%;
    }

    .admin-page__header {
        align-items: stretch;
    }
}

.admin-documents-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.admin-document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.admin-document-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-document-meta strong {
    font-size: 14px;
    color: var(--text);
}

.admin-document-meta span {
    font-size: 13px;
    color: var(--muted);
}

.admin-document-empty {
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}

.btn-outline:hover {
    background: rgba(20, 145, 229, 0.08);
}

@media (max-width: 640px) {
    .admin-document-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-document-item .btn {
        width: 100%;
    }
}

.credit-user-loans-section {
    display: grid;
    gap: 14px;
}

.credit-user-loans-list {
    display: grid;
    gap: 14px;
}

.credit-user-loan-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
}

body.theme-dark .credit-user-loan-card {
    background: linear-gradient(180deg, rgba(10, 22, 52, 0.98), rgba(8, 20, 46, 0.98));
    border: 1px solid rgba(59, 130, 246, 0.14);
}

body:not(.theme-dark) .credit-user-loan-card {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.credit-user-loan-card__main {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.credit-user-loan-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.credit-user-loan-card__top strong {
    font-size: 16px;
    font-weight: 800;
}

body.theme-dark .credit-user-loan-card__top strong {
    color: #f8fafc;
}

body:not(.theme-dark) .credit-user-loan-card__top strong {
    color: #0f172a;
}

.credit-user-loan-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}

body.theme-dark .credit-user-loan-card__meta {
    color: #9fb3d1;
}

body:not(.theme-dark) .credit-user-loan-card__meta {
    color: #64748b;
}

.credit-user-loan-card__actions {
    flex-shrink: 0;
}

.credit-user-loan-card__hint {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.loan-schedule-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.44);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 210;
    padding: 24px;
}

.loan-schedule-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.loan-schedule-modal-panel {
    width: min(1100px, 100%);
    max-height: 88vh;
    overflow: hidden;
    border-radius: 24px;
    display: grid;
    grid-template-rows: auto 1fr;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
}

body.theme-dark .loan-schedule-modal-panel {
    background: #08142e;
}

body:not(.theme-dark) .loan-schedule-modal-panel {
    background: #ffffff;
}

.loan-schedule-modal-body {
    padding: 20px 24px 24px;
    overflow: auto;
    display: grid;
    gap: 18px;
}

.loan-schedule-summary__card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.loan-schedule-summary__card > div {
    padding: 14px 16px;
    border-radius: 16px;
}

body.theme-dark .loan-schedule-summary__card > div {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148,163,184,0.10);
}

body:not(.theme-dark) .loan-schedule-summary__card > div {
    background: #f8fbff;
    border: 1px solid rgba(148,163,184,0.16);
}

.loan-schedule-summary__card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: #1d9bf0;
}

.loan-schedule-summary__card span {
    font-size: 14px;
    font-weight: 700;
}

body.theme-dark .loan-schedule-summary__card span {
    color: #f8fafc;
}

body:not(.theme-dark) .loan-schedule-summary__card span {
    color: #0f172a;
}

.loan-schedule-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.loan-schedule-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.loan-schedule-table th,
.loan-schedule-table td {
    padding: 14px 12px;
    text-align: left;
    font-size: 14px;
}

body.theme-dark .loan-schedule-table th {
    color: #9fb3d1;
    border-bottom: 1px solid rgba(148,163,184,0.14);
}

body:not(.theme-dark) .loan-schedule-table th {
    color: #64748b;
    border-bottom: 1px solid rgba(148,163,184,0.16);
}

body.theme-dark .loan-schedule-table td {
    color: #e2ecf9;
    border-bottom: 1px solid rgba(148,163,184,0.08);
}

body:not(.theme-dark) .loan-schedule-table td {
    color: #334155;
    border-bottom: 1px solid rgba(148,163,184,0.12);
}

@media (max-width: 900px) {
    .credit-user-loan-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .loan-schedule-summary__card {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .loan-schedule-summary__card {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   USER CARDS PAGE ONLY
   (ne touche pas l'admin)
========================================= */

.cards-page,
.cards-page--v2 {
    display: grid;
    gap: 22px;
}

.cards-page--v2 {
    padding: 6px 0 0;
}

.cards-shell {
    display: grid;
    gap: 24px;
}

/* =========================
   HEADER
========================= */

.cards-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cards-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1d9bf0;
}

.cards-page__title {
    margin: 0 0 6px;
    font-size: 32px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
}

.cards-page__subtitle {
    margin: 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
}

.cards-page__actions,
.cards-showcase__actions,
.cards-hero-side__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* =========================
   LEGACY HERO
========================= */

.cards-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    gap: 18px;
}

.cards-account-hero,
.cards-hero-side__card,
.cards-panel {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

body.theme-dark .cards-account-hero,
body.theme-dark .cards-hero-side__card,
body.theme-dark .cards-panel {
    background: linear-gradient(180deg, rgba(10, 22, 52, 0.98), rgba(8, 20, 46, 0.98));
    border: 1px solid rgba(59, 130, 246, 0.14);
}

body:not(.theme-dark) .cards-account-hero,
body:not(.theme-dark) .cards-hero-side__card,
body:not(.theme-dark) .cards-panel {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.cards-account-hero {
    padding: 24px;
    position: relative;
}

.cards-account-hero::before {
    content: "";
    position: absolute;
    inset: auto -10% -40% auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(29, 155, 240, 0.18) 0%, rgba(29, 155, 240, 0) 72%);
    pointer-events: none;
}

.cards-account-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.cards-account-hero__label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #7c93b7;
}

.cards-account-hero__amount {
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
}

body.theme-dark .cards-account-hero__amount {
    color: #f8fafc;
}

body:not(.theme-dark) .cards-account-hero__amount {
    color: #0f172a;
}

.cards-account-hero__meta {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #8ca2c5;
}

.cards-account-hero__chip {
    flex-shrink: 0;
    min-width: 72px;
    height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .06em;
    background: linear-gradient(135deg, rgba(29, 155, 240, 0.18), rgba(255, 255, 255, 0.08));
    color: #eaf5ff;
    border: 1px solid rgba(125, 211, 252, 0.22);
}

body:not(.theme-dark) .cards-account-hero__chip {
    background: linear-gradient(135deg, #e0f2fe, #eff6ff);
    color: #0f172a;
    border: 1px solid rgba(59, 130, 246, 0.16);
}

.cards-account-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    position: relative;
    z-index: 1;
}

.cards-account-hero__stat {
    border-radius: 18px;
    padding: 16px;
}

body.theme-dark .cards-account-hero__stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

body:not(.theme-dark) .cards-account-hero__stat {
    background: #f8fbff;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.cards-account-hero__stat span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.5;
}

body.theme-dark .cards-account-hero__stat span {
    color: #9fb3d1;
}

body:not(.theme-dark) .cards-account-hero__stat span {
    color: #64748b;
}

.cards-account-hero__stat strong {
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
}

body.theme-dark .cards-account-hero__stat strong {
    color: #f8fafc;
}

body:not(.theme-dark) .cards-account-hero__stat strong {
    color: #0f172a;
}

.cards-hero-side__card {
    padding: 24px;
    display: grid;
    gap: 16px;
    height: 100%;
}

.cards-hero-side__kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1d9bf0;
}

.cards-hero-side__card h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.03em;
}

body.theme-dark .cards-hero-side__card h3 {
    color: #f8fafc;
}

body:not(.theme-dark) .cards-hero-side__card h3 {
    color: #0f172a;
}

.cards-hero-side__card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
}

body.theme-dark .cards-hero-side__card p {
    color: #9db2d3;
}

body:not(.theme-dark) .cards-hero-side__card p {
    color: #64748b;
}

/* =========================
   V2 SHOWCASE
========================= */

.cards-showcase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 24px;
    padding: 30px;
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(59,130,246,0.25), transparent 28%),
        radial-gradient(circle at bottom left, rgba(15,23,42,0.22), transparent 34%),
        linear-gradient(135deg, #07162d 0%, #0a2342 46%, #0f315e 100%);
    color: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.cards-showcase__content,
.cards-showcase__visual {
    position: relative;
    z-index: 2;
}

.cards-showcase__eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    opacity: .78;
    margin-bottom: 12px;
}

.cards-showcase__title {
    font-size: 42px;
    line-height: 1.04;
    letter-spacing: -1.2px;
    margin: 0 0 14px;
    max-width: 620px;
}

.cards-showcase__subtitle {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.78);
    margin: 0 0 24px;
}

.cards-showcase__balance-card {
    max-width: 560px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    border-radius: 24px;
    padding: 22px;
    margin-bottom: 22px;
}

.cards-showcase__balance-label {
    font-size: 13px;
    color: rgba(255,255,255,0.68);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

.cards-showcase__balance-amount {
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.cards-showcase__balance-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255,255,255,0.82);
    font-size: 14px;
}

.cards-showcase__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
}

.cards-showcase__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.cards-showcase__empty-visual {
    width: 100%;
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 28px;
    padding: 38px 24px;
    text-align: center;
    background: rgba(255,255,255,0.05);
}

.cards-showcase__empty-icon {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.08);
    font-size: 30px;
}

/* =========================
   METRICS / SECTIONS
========================= */

.cards-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cards-metric-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}

.cards-metric-card span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 10px;
}

.cards-metric-card strong {
    font-size: 28px;
    line-height: 1;
    color: var(--text);
}

.cards-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.cards-section-head__kicker {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: 6px;
}

.cards-section-head h2 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -.4px;
    color: var(--text);
}

.cards-library {
    background: transparent;
}

.cards-library__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cards-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

/* =========================
   LEGACY GRID
========================= */

.cards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.85fr) minmax(320px, 0.85fr);
    gap: 18px;
    align-items: start;
}

.cards-panel {
    padding: 20px;
}

.cards-panel--cards {
    min-width: 0;
    overflow: hidden;
}

.cards-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.cards-panel__kicker {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1d9bf0;
}

.cards-panel__head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

body.theme-dark .cards-panel__head h2 {
    color: #f8fafc;
}

body:not(.theme-dark) .cards-panel__head h2 {
    color: #0f172a;
}

/* =========================
   CARD LIST / SLIDER
========================= */

.cards-list {
    display: grid;
    gap: 16px;
}

.cards-slider-wrap {
    position: relative;
    overflow: hidden;
}

.cards-slider {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

.cards-slider::-webkit-scrollbar {
    height: 8px;
}

.cards-slider::-webkit-scrollbar-track {
    background: transparent;
}

.cards-slider::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
}

/* =========================
   CARD UI BASE
========================= */

.card-ui {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 220px;
    border-radius: 22px;
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    isolation: isolate;
}

.card-ui--compact {
    flex: 0 0 340px;
    max-width: 340px;
    min-height: 230px;
    scroll-snap-align: start;
}

.card-ui--xl {
    min-height: 290px;
    width: 100%;
    max-width: 460px;
    padding: 26px;
    border-radius: 28px;
}

.card-ui__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.16), transparent 26%),
        radial-gradient(circle at bottom left, rgba(255,255,255,0.10), transparent 28%);
}

.card-ui > * {
    position: relative;
    z-index: 1;
}

.card-ui__top,
.card-ui__brand-row,
.card-ui__number-row,
.card-ui__mini-grid,
.card-ui__footer,
.card-ui__actions {
    position: relative;
    z-index: 1;
}

.card-ui__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.card-ui__top-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.card-ui__bank {
    font-size: 16px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.card-ui__brand {
    font-size: 11px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0.92;
}

.card-ui__brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-ui__number-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 0 8px;
}

.card-ui__number {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.compact-number {
    font-size: 20px;
    letter-spacing: .10em;
    word-spacing: 2px;
    font-variant-numeric: tabular-nums;
}

.card-ui__mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.card-ui__mini-item {
    min-width: 0;
}

.card-ui__mini-item small {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.card-ui__mini-item strong {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-ui__cvv-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-ui__footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.card-ui__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.card-ui__type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* =========================
   CARD COLOR THEMES
========================= */

.card-ui--midnight {
    background: linear-gradient(135deg, #081226 0%, #10295a 100%);
    color: #ffffff;
}

.card-ui--black {
    background: linear-gradient(135deg, #0b0b0b 0%, #232323 100%);
    color: #ffffff;
}

.card-ui--silver {
    background: linear-gradient(135deg, #9aa6b2 0%, #d9e2ec 100%);
    color: #0f172a;
}

.card-ui--gold {
    background: linear-gradient(135deg, #b88915 0%, #f1d37a 100%);
    color: #1f2937;
}

.card-ui--rose {
    background: linear-gradient(135deg, #b76e79 0%, #edb4be 100%);
    color: #1f2937;
}

/* force lisibilité sur cartes claires */
.card-ui--silver .card-ui__bank,
.card-ui--silver .card-ui__brand,
.card-ui--silver .card-ui__number,
.card-ui--silver .card-ui__mini-item strong,
.card-ui--silver .card-ui__type-pill,
.card-ui--gold .card-ui__bank,
.card-ui--gold .card-ui__brand,
.card-ui--gold .card-ui__number,
.card-ui--gold .card-ui__mini-item strong,
.card-ui--gold .card-ui__type-pill,
.card-ui--rose .card-ui__bank,
.card-ui--rose .card-ui__brand,
.card-ui--rose .card-ui__number,
.card-ui--rose .card-ui__mini-item strong,
.card-ui--rose .card-ui__type-pill {
    color: #0f172a;
}

.card-ui--silver .card-ui__mini-item small,
.card-ui--gold .card-ui__mini-item small,
.card-ui--rose .card-ui__mini-item small {
    color: rgba(15, 23, 42, 0.68);
}

.card-ui--silver .card-ui__type-pill,
.card-ui--gold .card-ui__type-pill,
.card-ui--rose .card-ui__type-pill {
    background: rgba(255,255,255,0.34);
}

.card-ui--silver .card-ui__eye-btn,
.card-ui--gold .card-ui__eye-btn,
.card-ui--rose .card-ui__eye-btn {
    background: rgba(255,255,255,0.34);
    color: #0f172a;
}

/* =========================
   EYE BUTTON / SENSITIVE DATA
========================= */

.card-ui__eye-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: .2s ease;
}

.card-ui__eye-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
}

.card-ui__eye-btn--small {
    width: 28px;
    height: 28px;
    min-width: 28px;
}

.card-ui__eye-btn--small svg {
    width: 14px;
    height: 14px;
}

.card-ui__eye-btn:hover {
    transform: translateY(-1px);
}

.hidden-eye {
    display: none !important;
}

.card-ui__sensitive-text {
    display: inline-block;
    transition: filter .22s ease, opacity .22s ease, transform .22s ease;
    will-change: filter, opacity, transform;
}

.js-sensitive-value.is-masked .card-ui__sensitive-text {
    filter: blur(1.8px);
    opacity: .92;
}

.js-sensitive-value.is-revealing .card-ui__sensitive-text {
    filter: blur(6px);
    opacity: .55;
    transform: translateY(1px);
}

.js-sensitive-value.is-visible .card-ui__sensitive-text {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   ROWS / EMPTY
========================= */

.cards-rows {
    display: grid;
    gap: 12px;
}

.cards-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: 18px;
    padding: 16px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cards-row--v2 {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

body.theme-dark .cards-row {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148, 163, 184, 0.10);
}

body:not(.theme-dark) .cards-row {
    background: #f8fbff;
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.cards-row:hover {
    transform: translateY(-1px);
}

body.theme-dark .cards-row:hover,
body:not(.theme-dark) .cards-row:hover {
    border-color: rgba(29, 155, 240, 0.22);
}

.cards-row__main {
    min-width: 0;
}

.cards-row strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 6px;
}

body.theme-dark .cards-row strong {
    color: #f8fafc;
}

body:not(.theme-dark) .cards-row strong {
    color: #0f172a;
}

.cards-row__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.5;
}

body.theme-dark .cards-row__meta {
    color: #93a8c8;
}

body:not(.theme-dark) .cards-row__meta {
    color: #64748b;
}

.cards-empty {
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
}

body.theme-dark .cards-empty {
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(148, 163, 184, 0.16);
    color: #9eb2d1;
}

body:not(.theme-dark) .cards-empty {
    background: #f8fbff;
    border: 1px dashed rgba(148, 163, 184, 0.18);
    color: #64748b;
}

/* =========================
   CARD COLOR SELECTOR
========================= */

.card-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.card-color-option {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #fff;
    min-height: 52px;
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 700;
    transition: .2s ease;
}

.card-color-option:hover {
    border-color: rgba(29, 155, 240, 0.4);
    transform: translateY(-1px);
}

.card-color-option.is-active {
    border-color: #1d9bf0;
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.12);
}

.card-color-option__swatch {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.18);
}

.card-color-option__swatch--midnight {
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
}

.card-color-option__swatch--black {
    background: linear-gradient(135deg, #111827, #000000);
}

.card-color-option__swatch--silver {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
}

.card-color-option__swatch--gold {
    background: linear-gradient(135deg, #d4af37, #f5d36a);
}

.card-color-option__swatch--rose {
    background: linear-gradient(135deg, #d48b8b, #f2b2b2);
}

/* =========================
   REQUEST SUMMARY
========================= */

.card-request-summary {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
}

.card-request-summary__visual {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
}

.card-request-summary__details {
    width: 100%;
    min-width: 0;
}

.card-request-summary__details .deposit-details-card {
    width: 100%;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-sizing: border-box;
}

.card-request-summary__details .deposit-details-card__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.card-request-summary__details .deposit-details-card__row:last-child {
    border-bottom: none;
}

.card-request-summary__details .deposit-details-card__row span {
    flex: 0 0 42%;
    min-width: 120px;
    font-size: 13px;
    line-height: 1.45;
    color: #64748b;
    word-break: break-word;
}

.card-request-summary__details .deposit-details-card__row strong {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 800;
    color: #0f172a;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#cardRequestModal .nova-modal-dialog {
    width: min(620px, calc(100vw - 32px));
}

/* =========================
   CARD REQUEST PREVIEW
========================= */

.card-request-preview {
    position: relative;
    width: 100%;
    max-width: 360px;
    min-height: 210px;
    border-radius: 22px;
    padding: 22px 24px;
    box-sizing: border-box;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
}

.card-request-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.16), transparent 30%),
        radial-gradient(circle at bottom left, rgba(255,255,255,0.08), transparent 28%);
    pointer-events: none;
}

.card-request-preview--midnight {
    background: linear-gradient(135deg, #081226 0%, #10295a 100%);
    color: #ffffff;
}

.card-request-preview--black {
    background: linear-gradient(135deg, #0b0b0b 0%, #232323 100%);
    color: #ffffff;
}

.card-request-preview--silver {
    background: linear-gradient(135deg, #9aa6b2 0%, #d9e2ec 100%);
    color: #0f172a;
}

.card-request-preview--gold {
    background: linear-gradient(135deg, #b88915 0%, #f1d37a 100%);
    color: #1f2937;
}

.card-request-preview--rose {
    background: linear-gradient(135deg, #b76e79 0%, #edb4be 100%);
    color: #1f2937;
}

.card-request-preview__bank,
.card-request-preview__brand,
.card-request-preview__number,
.card-request-preview__footer {
    position: relative;
    z-index: 1;
}

.card-request-preview__bank {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.card-request-preview__brand {
    position: absolute;
    top: 26px;
    right: 24px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: right;
}

.card-request-preview__number {
    align-self: center;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.16em;
    word-spacing: 4px;
    white-space: nowrap;
}

.card-request-preview__footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 18px;
}

.card-request-preview__footer > div {
    min-width: 0;
}

.card-request-preview__footer > div:last-child {
    text-align: right;
}

.card-request-preview__footer small {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.78;
}

.card-request-preview__footer strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    word-break: break-word;
}

.card-request-preview--silver .card-request-preview__footer small,
.card-request-preview--gold .card-request-preview__footer small,
.card-request-preview--rose .card-request-preview__footer small {
    opacity: 0.62;
}

/* =========================
   MODAL POLISH
========================= */

#cardFundingModal .deposit-details-card,
#cardRequestModal .deposit-details-card {
    border-radius: 18px;
}

#cardFundingModal .crypto-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#cardFundingModal .crypto-chip {
    border: none;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

body.theme-dark #cardFundingModal .crypto-chip {
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
    border: 1px solid rgba(148,163,184,0.14);
}

body:not(.theme-dark) #cardFundingModal .crypto-chip {
    background: #f8fbff;
    color: #0f172a;
    border: 1px solid rgba(148,163,184,0.18);
}

#cardFundingModal .crypto-chip.is-active {
    background: linear-gradient(135deg, #1698d8 0%, #1daaf2 100%);
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 20px rgba(29, 170, 242, 0.22);
}

/* =========================
   BUTTON HELPERS
========================= */

.card-ui__footer .btn,
.btn-sm {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1240px) {
    .cards-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cards-panel--cards {
        grid-column: 1 / -1;
    }

    .cards-account-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .cards-showcase {
        grid-template-columns: 1fr;
    }

    .cards-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards-library__grid,
    .cards-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .cards-page__header {
        flex-direction: column;
        align-items: stretch;
    }

    .cards-hero-grid {
        grid-template-columns: 1fr;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .cards-account-hero__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-ui--compact {
        flex: 0 0 300px;
        max-width: 300px;
        min-height: 205px;
    }

    .compact-number {
        font-size: 18px;
    }

    .card-ui__mini-grid {
        grid-template-columns: 1fr;
    }

    .card-ui__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .card-ui__footer form,
    .card-ui__footer .btn {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .card-request-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cards-slider {
        gap: 14px;
    }

    .card-ui {
        min-height: 210px;
        border-radius: 20px;
        padding: 18px 16px 16px;
    }

    .card-ui__number {
        font-size: 16px;
        letter-spacing: 0.05em;
    }
}

@media (max-width: 640px) {
    .cards-page__title {
        font-size: 28px;
    }

    .cards-account-hero,
    .cards-hero-side__card,
    .cards-panel,
    .card-ui {
        border-radius: 20px;
    }

    .cards-account-hero {
        padding: 18px;
    }

    .cards-panel {
        padding: 16px;
    }

    .card-ui {
        padding: 16px 14px 14px;
        min-height: 198px;
    }

    .cards-account-hero__stats,
    .cards-metrics {
        grid-template-columns: 1fr;
    }

    .cards-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .cards-page__actions,
    .cards-showcase__actions,
    .cards-hero-side__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cards-page__actions .btn,
    .cards-showcase__actions .btn,
    .cards-hero-side__actions .btn,
    .card-ui__actions .btn {
        width: 100%;
    }

    .card-ui__actions {
        justify-content: stretch;
    }

    .cards-showcase {
        padding: 22px;
        border-radius: 24px;
    }

    .cards-showcase__title {
        font-size: 31px;
    }

    .cards-showcase__balance-amount {
        font-size: 32px;
    }

    .card-request-summary__details .deposit-details-card__row {
        flex-direction: column;
        gap: 6px;
    }

    .card-request-summary__details .deposit-details-card__row span,
    .card-request-summary__details .deposit-details-card__row strong {
        width: 100%;
        text-align: left;
    }

    .card-request-preview {
        max-width: 100%;
        min-height: 190px;
        padding: 18px 18px 20px;
        gap: 14px;
    }

    .card-request-preview__bank {
        font-size: 16px;
    }

    .card-request-preview__brand {
        top: 20px;
        right: 18px;
        font-size: 11px;
    }

    .card-request-preview__number {
        font-size: 18px;
        letter-spacing: 0.12em;
        word-spacing: 2px;
    }

    .card-request-preview__footer strong {
        font-size: 12px;
    }

    .card-ui__number {
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    .compact-number {
        font-size: 17px;
        letter-spacing: .08em;
    }

    .card-ui__bank {
        font-size: 15px;
    }

    .card-ui__brand {
        font-size: 10px;
    }

    .card-ui__eye-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .card-ui__eye-btn svg {
        width: 15px;
        height: 15px;
    }

    .card-ui__mini-item small {
        font-size: 8px;
    }

    .card-ui__mini-item strong {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .cards-slider-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .cards-slider {
        display: flex;
        gap: 12px;
        min-width: max-content;
    }

    .cards-slider > .card-ui {
        width: min(86vw, 320px);
        min-width: min(86vw, 320px);
        scroll-snap-align: start;
    }

    .card-ui--compact {
        width: min(86vw, 320px);
        min-width: min(86vw, 320px);
        max-width: min(86vw, 320px);
    }
}

/* =========================================
   FIX OVERFLOW / SCROLL GLOBAL - USER CARDS
========================================= */

/* Empêche la page cards de provoquer un scroll horizontal global */
.cards-page,
.cards-page--v2,
.cards-shell,
.cards-showcase,
.cards-library,
.cards-bottom-grid,
.cards-grid,
.cards-panel,
.cards-panel--cards,
.cards-rows,
.cards-row,
.cards-row__main,
.cards-showcase__content,
.cards-showcase__visual,
.cards-account-hero,
.cards-hero-side__card {
    min-width: 0;
}

/* Le conteneur principal ne doit jamais élargir la page */
.app-main,
.app-main-content {
    min-width: 0;
    overflow-x: hidden;
}

/* La page cards ne doit pas pousser tout l'écran */
.cards-page,
.cards-page--v2 {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Hero premium */
.cards-showcase {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Carte de balance */
.cards-showcase__balance-card {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
}

.cards-showcase__balance-meta {
    row-gap: 8px;
}

/* Grilles */
.cards-metrics,
.cards-library__grid,
.cards-bottom-grid,
.cards-grid,
.cards-account-hero__stats,
.card-ui__mini-grid {
    min-width: 0;
}

.cards-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Le slider doit scroller à l'intérieur uniquement */
.cards-slider-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.cards-slider {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    box-sizing: border-box;
}

/* Important : ne jamais forcer une largeur qui casse la page */
.cards-slider > .card-ui,
.card-ui--compact {
    flex: 0 0 min(340px, 100%);
    width: min(340px, 100%);
    min-width: min(340px, 100%);
    max-width: min(340px, 100%);
    box-sizing: border-box;
}

/* Carte vedette */
.card-ui--xl {
    width: 100%;
    max-width: 460px;
    min-width: 0;
    box-sizing: border-box;
}

/* Les textes longs ne doivent pas élargir les blocs */
.card-ui__number,
.compact-number,
.cards-row__meta,
.cards-row strong,
.card-ui__mini-item strong,
.card-ui__bank,
.card-ui__brand,
.cards-showcase__title,
.cards-showcase__subtitle {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Le numéro carte ne doit pas déborder */
.card-ui__number,
.compact-number {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lignes requests/fundings */
.cards-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Preview modal */
.card-request-summary,
.card-request-summary__visual,
.card-request-summary__details {
    min-width: 0;
}

.card-request-preview {
    width: 100%;
    max-width: 360px;
    min-width: 0;
    box-sizing: border-box;
}

/* Modales */
#cardRequestModal .nova-modal-dialog,
#cardFundingModal .nova-modal-dialog {
    max-width: min(620px, calc(100vw - 32px));
    width: 100%;
    box-sizing: border-box;
}

/* Responsive */
@media (max-width: 1100px) {
    .cards-showcase {
        grid-template-columns: 1fr;
    }

    .card-ui--xl {
        max-width: 100%;
    }
}

@media (max-width: 980px) {
    .cards-grid,
    .cards-bottom-grid,
    .cards-library__grid,
    .cards-hero-grid {
        grid-template-columns: 1fr;
    }

    .cards-account-hero__stats,
    .cards-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cards-showcase,
    .cards-account-hero,
    .cards-hero-side__card,
    .cards-panel {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cards-metrics,
    .cards-account-hero__stats {
        grid-template-columns: 1fr;
    }

    .cards-slider {
        gap: 12px;
    }

    .cards-slider > .card-ui,
    .card-ui--compact {
        flex: 0 0 min(82vw, 300px);
        width: min(82vw, 300px);
        min-width: min(82vw, 300px);
        max-width: min(82vw, 300px);
    }

    .card-ui__number,
    .compact-number {
        font-size: 15px;
        letter-spacing: 0.03em;
    }
}
/* =========================================
   REAL CARD LOOK - MOBILE
========================================= */

.card-ui {
    aspect-ratio: 1.58 / 1;
    min-height: unset;
}

.card-ui--compact,
.card-ui--xl {
    aspect-ratio: 1.58 / 1;
}

.card-ui__top {
    align-items: flex-start;
}

.card-ui__bank {
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
}

.card-ui__brand-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 72px;
}

.card-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.card-brand-logo--visa .visa-word {
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
    font-style: italic;
}

.card-brand-logo--mastercard {
    width: 42px;
    height: 24px;
}

.card-brand-logo--mastercard .mc-circle {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    top: 2px;
}

.card-brand-logo--mastercard .mc-circle--left {
    left: 4px;
    background: #ea001b;
}

.card-brand-logo--mastercard .mc-circle--right {
    right: 4px;
    background: #f79e1b;
    mix-blend-mode: screen;
}

.card-ui__number-row {
    margin: 8px 0 2px;
}

.card-ui__number,
.compact-number {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.14em;
    word-spacing: 2px;
}

.card-ui__mini-grid {
    align-items: end;
}

.card-ui__mini-item small {
    margin-bottom: 4px;
    opacity: 0.72;
}

.card-ui__footer {
    margin-top: 10px;
}

.card-ui__type-pill {
    min-height: 30px;
    padding: 0 12px;
    font-size: 10px;
    border-radius: 999px;
}

/* badge statut plus propre */
.card-ui .status-badge {
    min-height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

/* desktop/tablette */
.card-ui--compact {
    width: min(340px, 100%);
    min-width: min(340px, 100%);
    max-width: min(340px, 100%);
    padding: 18px;
}

.card-ui--xl {
    max-width: 470px;
    padding: 24px;
}

/* mobile */
@media (max-width: 640px) {
    .cards-slider > .card-ui,
    .card-ui--compact {
        flex: 0 0 min(88vw, 330px);
        width: min(88vw, 330px);
        min-width: min(88vw, 330px);
        max-width: min(88vw, 330px);
    }

    .card-ui {
        padding: 16px;
        border-radius: 22px;
        aspect-ratio: 1.585 / 1;
    }

    .card-ui__bank {
        font-size: 16px;
    }

    .card-brand-logo--visa .visa-word {
        font-size: 14px;
    }

    .card-brand-logo--mastercard {
        width: 38px;
        height: 22px;
    }

    .card-brand-logo--mastercard .mc-circle {
        width: 18px;
        height: 18px;
        top: 2px;
    }

    .card-ui__number,
    .compact-number {
        font-size: 15px;
        letter-spacing: 0.11em;
        word-spacing: 1px;
    }

    .card-ui__mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .card-ui__mini-item small {
        font-size: 8px;
    }

    .card-ui__mini-item strong {
        font-size: 11px;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .card-ui__eye-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .card-ui__eye-btn--small {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .card-ui__footer {
        gap: 8px;
        align-items: center;
    }

    .card-ui__footer .btn,
    .btn-sm {
        min-height: 34px;
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 12px;
    }
}

/* très petit mobile */
@media (max-width: 420px) {
    .cards-slider > .card-ui,
    .card-ui--compact {
        flex: 0 0 min(90vw, 310px);
        width: min(90vw, 310px);
        min-width: min(90vw, 310px);
        max-width: min(90vw, 310px);
    }

    .card-ui {
        padding: 14px;
    }

    .card-ui__number,
    .compact-number {
        font-size: 14px;
        letter-spacing: 0.08em;
    }

    .card-ui__mini-item strong {
        font-size: 10px;
    }
}
/* =========================================
   FIX HERO CARD + CVV ALIGNMENT
========================================= */

/* 1) La carte du hero doit garder un vrai grand format */
.cards-showcase .card-ui--xl {
    width: 100%;
    max-width: 410px;
    min-width: 0;
    min-height: 250px;
    aspect-ratio: auto;
    padding: 22px 22px 18px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.cards-showcase .card-ui--xl .card-ui__top {
    align-items: flex-start;
}

.cards-showcase .card-ui--xl .card-ui__bank {
    font-size: 18px;
}

.cards-showcase .card-ui--xl .card-ui__brand-wrap {
    margin-top: 8px;
}

.cards-showcase .card-ui--xl .card-ui__number-row {
    margin: 14px 0 8px;
}

.cards-showcase .card-ui--xl .card-ui__number,
.cards-showcase .card-ui--xl .compact-number {
    font-size: 22px;
    letter-spacing: 0.12em;
    word-spacing: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cards-showcase .card-ui--xl .card-ui__mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.cards-showcase .card-ui--xl .card-ui__mini-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

.cards-showcase .card-ui--xl .card-ui__mini-item small {
    font-size: 10px;
    margin-bottom: 6px;
}

.cards-showcase .card-ui--xl .card-ui__mini-item strong {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cards-showcase .card-ui--xl .card-ui__cvv-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cards-showcase .card-ui--xl .card-ui__footer {
    margin-top: 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* 2) Les cartes du slider : alignement parfait holder / expiry / cvv */
.cards-slider .card-ui--compact .card-ui__mini-grid,
.cards-library .card-ui--compact .card-ui__mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.cards-slider .card-ui--compact .card-ui__mini-item,
.cards-library .card-ui--compact .card-ui__mini-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

.cards-slider .card-ui--compact .card-ui__mini-item small,
.cards-library .card-ui--compact .card-ui__mini-item small {
    min-height: 22px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 4px;
}

.cards-slider .card-ui--compact .card-ui__mini-item strong,
.cards-library .card-ui--compact .card-ui__mini-item strong {
    min-height: 20px;
    display: flex;
    align-items: center;
}

.cards-slider .card-ui--compact .card-ui__mini-item--cvv,
.cards-library .card-ui--compact .card-ui__mini-item--cvv {
    align-items: flex-start;
}

.cards-slider .card-ui--compact .card-ui__cvv-row,
.cards-library .card-ui--compact .card-ui__cvv-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
}

.cards-slider .card-ui--compact .card-ui__cvv-row strong,
.cards-library .card-ui--compact .card-ui__cvv-row strong {
    min-height: auto;
    display: inline-flex;
    align-items: center;
}

/* 3) Le footer des cartes slider doit rester bien propre */
.cards-slider .card-ui--compact .card-ui__footer,
.cards-library .card-ui--compact .card-ui__footer {
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* 4) Responsive ciblé hero uniquement */
@media (max-width: 1100px) {
    .cards-showcase .card-ui--xl {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .cards-showcase .card-ui--xl {
        min-height: 220px;
        padding: 18px 18px 16px;
        border-radius: 22px;
    }

    .cards-showcase .card-ui--xl .card-ui__number,
    .cards-showcase .card-ui--xl .compact-number {
        font-size: 17px;
        letter-spacing: 0.08em;
    }

    .cards-showcase .card-ui--xl .card-ui__mini-grid {
        gap: 8px;
    }

    .cards-showcase .card-ui--xl .card-ui__mini-item small {
        font-size: 8px;
    }

    .cards-showcase .card-ui--xl .card-ui__mini-item strong {
        font-size: 11px;
    }
}
/* =========================================
   HERO ACTIONS INLINE
========================================= */

.cards-showcase__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cards-showcase__actions .btn {
    width: auto;
    min-width: 220px;
    justify-content: center;
}

.cards-showcase__actions .btn-primary,
.cards-showcase__actions .btn-outline {
    flex: 0 0 auto;
}

/* tablet */
@media (max-width: 900px) {
    .cards-showcase__actions .btn {
        min-width: 200px;
    }
}

/* mobile */
@media (max-width: 640px) {
    .cards-showcase__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cards-showcase__actions .btn {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================
   FINTECH SCROLLBAR (DISCRETE & PREMIUM)
========================================= */
/* ==============================
   ADMIN TABLE UX FIX
============================== */

.admin-table-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    max-height: calc(100vh - 260px);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 18px;
    background: #fff;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
}

.admin-table {
    width: 100%;
    min-width: 1100px; /* ajuste selon ton tableau */
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f8fafc;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 #e2e8f0;
}

.admin-table th,
.admin-table td {
    padding: 18px 16px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.admin-table td {
    background: #fff;
}

.admin-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #eef2f7;
}

/* Colonne actions sticky à droite */
.admin-table th:last-child,
.admin-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    box-shadow: -1px 0 0 #e2e8f0;
}

.admin-table thead th:last-child {
    z-index: 4;
    background: #f8fafc;
}

/* Références longues : retour à la ligne propre */
.admin-table td:first-child {
    white-space: normal;
    min-width: 150px;
    word-break: break-word;
}

/* Actions alignées */
.admin-table td:last-child {
    white-space: nowrap;
}

.admin-table td:last-child .btn,
.admin-table td:last-child form {
    display: inline-flex;
    vertical-align: middle;
}

.admin-table td:last-child form {
    margin: 0 6px 6px 0;
}

/* Mobile / petits écrans */
@media (max-width: 992px) {
    .admin-table-wrap {
        max-height: calc(100vh - 220px);
        border-radius: 16px;
    }

    .admin-table {
        min-width: 980px;
    }

    .admin-table th,
    .admin-table td {
        padding: 14px 12px;
        font-size: 14px;
    }
}

/* Firefox */
.admin-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Chrome / Edge / Safari */
.admin-table-wrap::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

/* Track (fond invisible) */
.admin-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

/* Thumb (barre) invisible par défaut */
.admin-table-wrap::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 20px;
    transition: all 0.25s ease;
}

/* Hover → apparaît doucement */
.admin-table-wrap:hover::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
}

/* Hover + scroll actif (effet plus visible) */
.admin-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.35);
}

/* Option : léger effet glass */
.admin-table-wrap::-webkit-scrollbar-thumb {
    backdrop-filter: blur(4px);
}

/* =========================================
   PREMIUM TABLE SCROLL UX
========================================= */

.admin-table-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    max-height: calc(100vh - 260px);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 18px;
    background: #fff;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Scrollbars Chrome / Edge / Safari */
.admin-table-wrap::-webkit-scrollbar {
    height: 7px;
    width: 7px;
}

.admin-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.admin-table-wrap::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    transition: background 0.25s ease;
}

.admin-table-wrap:hover::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.14);
}

.admin-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.28);
}

/* Ombres latérales discrètes */
.admin-table-wrap::before,
.admin-table-wrap::after {
    content: "";
    position: sticky;
    top: 0;
    bottom: 0;
    width: 26px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.22s ease;
}

/* Ombre gauche */
.admin-table-wrap::before {
    left: 0;
    float: left;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0));
}

/* Ombre droite */
.admin-table-wrap::after {
    right: 0;
    float: right;
    background: linear-gradient(to left, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0));
}

/* Par défaut, on montre au moins un léger indice à droite */
.admin-table-wrap.is-scrollable-right::after {
    opacity: 1;
}

.admin-table-wrap.is-scrollable-left::before {
    opacity: 1;
}

/* Header sticky */
.admin-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f8fafc;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 #e2e8f0;
}

.admin-table th,
.admin-table td {
    padding: 18px 16px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.admin-table td {
    background: #fff;
}

.admin-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #eef2f7;
}

/* Colonne action sticky */
.admin-table th:last-child,
.admin-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    box-shadow: -1px 0 0 #e2e8f0;
}

.admin-table thead th:last-child {
    z-index: 4;
    background: #f8fafc;
}

.admin-table td:first-child {
    white-space: normal;
    min-width: 150px;
    word-break: break-word;
}

.admin-table td:last-child {
    white-space: nowrap;
}

.admin-table td:last-child .btn,
.admin-table td:last-child form {
    display: inline-flex;
    vertical-align: middle;
}

.admin-table td:last-child form {
    margin: 0 6px 6px 0;
}

@media (max-width: 992px) {
    .admin-table-wrap {
        max-height: calc(100vh - 220px);
        border-radius: 16px;
    }

    .admin-table {
        min-width: 980px;
    }

    .admin-table th,
    .admin-table td {
        padding: 14px 12px;
        font-size: 14px;
    }
}
/* ===== CARD ACTIONS MENU (PRO VERSION) ===== */

.card-actions {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
}

/* bouton ⋯ */
.card-actions-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-actions-btn:hover {
    background: rgba(255,255,255,0.18);
}

/* menu */
.card-actions-menu {
    position: absolute;
    top: 42px;
    left: 0;
    min-width: 180px;

    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);

    padding: 8px;
    display: none;

    animation: fadeIn 0.2s ease;
}

/* affichage */
.card-actions-menu.is-open {
    display: block;
}

/* boutons du menu */
.card-actions-menu form {
    margin: 0;
}

.card-actions-menu button {
    width: 100%;
    text-align: left;

    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;

    font-size: 14px;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* hover */
.card-actions-menu button:hover {
    background: #f1f5f9;
}

/* bouton danger */
.card-actions-menu button.danger {
    color: #ef4444;
}

.card-actions-menu button.danger:hover {
    background: #fee2e2;
}
.card-actions-menu {
    border: 1px solid #e2e8f0;
}
.card-actions-btn {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cards-bottom-grid {
    margin-bottom: 22px;
}

.cards-panel--transactions {
    margin-top: 24px;
}

/* =========================================
   ADMIN USERS
========================================= */

.admin-input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0 14px;
    font: inherit;
    outline: none;
}

.admin-users-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.admin-users-page .admin-page-header > div {
    min-width: 0;
}

.admin-users-page .admin-page-header p {
    max-width: 680px;
}

.admin-users-page .admin-panel {
    min-width: 0;
    overflow: visible;
}

.admin-users-results {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.admin-users-results strong {
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
}

.admin-input:focus,
.admin-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(20, 145, 229, 0.10);
}

.admin-users-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 16px;
}

.admin-users-stat {
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.admin-users-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #16c47f);
    opacity: .75;
}

.admin-users-filter {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 210px) minmax(150px, 210px) minmax(120px, auto);
    gap: 12px;
    align-items: end;
    margin-bottom: 0;
}

.admin-users-filter .admin-filter-group,
.admin-users-filter .admin-select {
    min-width: 0;
}

.admin-users-actions-cell {
    min-width: 220px;
}

.admin-users-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-table td:last-child .admin-users-actions form,
.admin-users-actions form {
    margin: 0;
    display: inline-flex;
}

.admin-users-actions .btn {
    width: auto;
    white-space: nowrap;
}

.admin-users-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-users-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.14), rgba(22, 196, 127, 0.14));
    color: var(--primary);
    font-weight: 800;
}

.admin-users-mobile-list {
    display: none;
}

.admin-users-table-desktop {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
}

.admin-users-table-desktop .admin-table {
    min-width: 1280px;
}

.admin-users-page .admin-table-wrap,
.admin-users-page .admin-users-table-desktop {
    max-height: none;
    height: auto;
}

.admin-users-list-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

.admin-users-table-desktop::-webkit-scrollbar,
.admin-horizontal-scroll::-webkit-scrollbar {
    height: 9px;
}

.admin-users-table-desktop::-webkit-scrollbar-track,
.admin-horizontal-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.admin-users-table-desktop::-webkit-scrollbar-thumb,
.admin-horizontal-scroll::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.22);
    border-radius: 999px;
}

.admin-users-table-desktop::-webkit-scrollbar-thumb:hover,
.admin-horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.36);
}

.admin-users-card {
    display: grid;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    background: var(--card);
}

.admin-users-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-users-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-users-card-meta > div {
    min-width: 0;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 12px;
}

.admin-users-card-meta span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.admin-users-card-meta strong {
    display: block;
    min-width: 0;
    color: var(--text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.admin-users-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-users-card-actions form,
.admin-users-card-actions .btn {
    width: 100%;
}

.admin-users-hub {
    display: grid;
    gap: 18px;
}

.admin-users-hub__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top right, rgba(20, 145, 229, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.admin-users-hub__eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-users-hub__hero-copy h1 {
    margin: 0;
    color: var(--text);
    font-size: 28px;
    line-height: 1.05;
}

.admin-users-hub__hero-copy p {
    margin: 10px 0 0;
    max-width: 620px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.admin-users-hub__hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-users-hub__stat {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.76);
}

.admin-users-hub__stat span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-users-hub__stat strong {
    color: var(--text);
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
}

.admin-users-hub__filters,
.admin-users-hub__results {
    overflow: visible;
}

.admin-users-hub__filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px) minmax(160px, 220px) minmax(120px, 160px);
    gap: 12px;
    align-items: end;
}

.admin-users-hub__filter-btn {
    min-height: 44px;
}

.admin-users-hub__results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-users-hub__results-bar div {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.admin-users-hub__results-bar strong {
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.admin-users-hub__results-bar span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.admin-users-hub__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-users-hub__card {
    display: grid;
    gap: 16px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.admin-users-hub__card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-users-hub__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-users-hub__avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.14), rgba(22, 196, 127, 0.14));
    color: var(--primary);
    font-size: 15px;
    font-weight: 800;
}

.admin-users-hub__identity-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-users-hub__identity-copy strong {
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.admin-users-hub__identity-copy span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.admin-users-hub__chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-users-hub__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-users-hub__meta-item {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(248, 250, 252, 0.88);
    min-width: 0;
}

.admin-users-hub__meta-item span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-users-hub__meta-item strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.admin-users-hub__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-users-hub__actions form,
.admin-users-hub__actions .btn {
    width: 100%;
}

.admin-users-hub__actions form {
    margin: 0;
}

body.theme-dark .admin-users-hub__hero,
body.dark-mode .admin-users-hub__hero {
    border-color: rgba(59, 130, 246, 0.18);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.32);
}

body.theme-dark .admin-users-hub__stat,
body.dark-mode .admin-users-hub__stat,
body.theme-dark .admin-users-hub__card,
body.dark-mode .admin-users-hub__card,
body.theme-dark .admin-users-hub__meta-item,
body.dark-mode .admin-users-hub__meta-item {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.88);
}

body.theme-dark .admin-users-hub__identity-copy strong,
body.dark-mode .admin-users-hub__identity-copy strong,
body.theme-dark .admin-users-hub__meta-item strong,
body.dark-mode .admin-users-hub__meta-item strong,
body.theme-dark .admin-users-hub__results-bar strong,
body.dark-mode .admin-users-hub__results-bar strong,
body.theme-dark .admin-users-hub__hero-copy h1,
body.dark-mode .admin-users-hub__hero-copy h1,
body.theme-dark .admin-users-hub__stat strong,
body.dark-mode .admin-users-hub__stat strong {
    color: #f8fafc;
}

body.theme-dark .admin-users-hub__identity-copy span,
body.dark-mode .admin-users-hub__identity-copy span,
body.theme-dark .admin-users-hub__meta-item span,
body.dark-mode .admin-users-hub__meta-item span,
body.theme-dark .admin-users-hub__results-bar span,
body.dark-mode .admin-users-hub__results-bar span,
body.theme-dark .admin-users-hub__hero-copy p,
body.dark-mode .admin-users-hub__hero-copy p,
body.theme-dark .admin-users-hub__stat span,
body.dark-mode .admin-users-hub__stat span {
    color: rgba(226, 232, 240, 0.72);
}

@media (max-width: 1180px) {
    .admin-users-hub__hero,
    .admin-users-hub__grid {
        grid-template-columns: 1fr;
    }

    .admin-users-hub__filter-form {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 860px) {
    .admin-users-hub__hero-stats,
    .admin-users-hub__meta,
    .admin-users-hub__actions,
    .admin-users-hub__filter-form {
        grid-template-columns: 1fr;
    }

    .admin-users-hub__hero {
        padding: 18px;
        border-radius: 20px;
    }

    .admin-users-hub__hero-copy h1 {
        font-size: 24px;
    }

    .admin-users-hub__card-top {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-users-hub__chips {
        justify-content: flex-start;
    }
}

.admin-user-show-page {
    min-width: 0;
    overflow: hidden;
    display: grid;
    gap: 16px;
}

.admin-user-settings-shell {
    display: grid;
    gap: 18px;
}

.admin-user-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-user-settings-card {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.admin-user-settings-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.admin-user-settings-card__head h4 {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 1.2;
}

.admin-user-settings-card__head p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.admin-user-settings-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-user-settings-summary__item,
.admin-user-settings-note {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.88);
}

.admin-user-settings-summary__item--wide {
    grid-column: 1 / -1;
}

.admin-user-settings-summary__item span,
.admin-user-settings-note span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-user-settings-summary__item strong,
.admin-user-settings-note strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 800;
    word-break: break-word;
}

.admin-user-profile-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 14px;
    align-items: stretch;
    background:
        radial-gradient(circle at top right, rgba(20, 145, 229, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.admin-user-profile-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.admin-user-profile-avatar {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.18), rgba(22, 196, 127, 0.16));
    color: var(--primary);
    font-size: 22px;
    font-weight: 900;
}

.admin-user-profile-main h2 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 19px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.admin-user-profile-main p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.admin-user-profile-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-user-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.admin-user-profile-stats > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
}

.admin-user-profile-stats span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-user-profile-stats strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
}

.admin-user-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-user-profile-grid > div {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    padding: 11px 12px;
}

.admin-user-profile-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-user-profile-grid strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.admin-user-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-user-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-user-detail-grid > .is-hidden {
    display: none;
}

.admin-span-2 {
    grid-column: 1 / -1;
}

.admin-fintech-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.admin-fintech-metric {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        linear-gradient(135deg, rgba(20, 145, 229, 0.08), rgba(22, 196, 127, 0.05)),
        rgba(255,255,255,0.92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    padding: 14px;
}

.admin-fintech-metric::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -44px;
    width: 130px;
    height: 130px;
    border-radius: 999px;
    border: 24px solid rgba(20, 145, 229, 0.06);
}

.admin-fintech-metric-icon,
.admin-quick-link-icon,
.admin-confirm-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-fintech-metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(20, 145, 229, 0.12);
    color: var(--primary);
    margin-bottom: 12px;
}

.admin-fintech-metric-icon svg,
.admin-quick-link-icon svg,
.admin-confirm-svg svg {
    width: 20px;
    height: 20px;
}

.admin-fintech-metric span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.admin-fintech-metric strong {
    display: block;
    color: var(--text);
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.admin-user-quick-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.admin-user-scope-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-user-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding: 5px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    scrollbar-width: thin;
}

.admin-user-tabs button {
    min-height: 36px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    padding: 0 14px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.admin-user-tabs button.is-active {
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.14), rgba(22, 196, 127, 0.12));
    color: var(--primary);
}

.admin-user-quick-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    color: var(--text);
    padding: 12px 14px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.admin-user-quick-link:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 145, 229, 0.35);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.admin-user-quick-link span {
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
}

.admin-user-quick-link strong {
    font-size: 13px;
    line-height: 1;
    color: var(--muted);
}

.admin-quick-link-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 12px;
    background: rgba(20, 145, 229, 0.10);
    color: var(--primary);
}

.admin-card-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.admin-mini-card {
    min-height: 178px;
    border-radius: 24px;
    padding: 18px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02)),
        linear-gradient(135deg, #0f172a, #0f8ce9 55%, #14b8a6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    position: relative;
}

.admin-mini-card::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -58px;
    top: -58px;
    border-radius: 999px;
    border: 28px solid rgba(255,255,255,0.10);
}

.admin-mini-card-top,
.admin-mini-card-bottom,
.admin-mini-card-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.admin-mini-card-pan {
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .08em;
}

.admin-mini-card a {
    color: #fff;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.admin-detail-table-wide {
    min-width: 980px;
}

.admin-user-show-page .admin-panel {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.admin-user-show-page .admin-section-title {
    margin-bottom: 12px;
}

.admin-user-show-page .admin-section-title h3 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.admin-user-show-page .admin-section-title span {
    min-width: auto;
    height: auto;
    padding: 0 10px;
    min-height: 26px;
    font-size: 11px;
    font-weight: 800;
}

.admin-user-show-page .admin-table th,
.admin-user-show-page .admin-table td {
    font-size: 12px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.admin-user-show-page .admin-table th {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10px;
}

.admin-user-show-page .status-badge {
    min-height: 24px;
    padding: 0 8px;
    font-size: 10px;
}

.admin-confirm-dialog {
    max-width: 440px;
    text-align: center;
}

.admin-confirm-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 145, 229, 0.12);
    color: var(--primary);
}

.admin-confirm-dialog h3 {
    margin: 0 0 8px;
    color: var(--text);
}

.admin-confirm-dialog p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.admin-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.admin-activity-timeline {
    display: grid;
    gap: 12px;
}

.admin-activity-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.admin-activity-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 145, 229, 0.12);
    color: var(--primary);
}

.admin-activity-svg,
.admin-drawer-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-activity-svg svg,
.admin-drawer-action-icon svg {
    width: 20px;
    height: 20px;
}

.admin-activity-top,
.admin-activity-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-activity-top strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.admin-activity-top span,
.admin-activity-meta {
    color: var(--muted);
    font-size: 13px;
}

.admin-activity-meta {
    justify-content: flex-start;
    margin-top: 8px;
}

.admin-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 110;
}

.admin-drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.admin-action-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 100vw);
    height: 100vh;
    transform: translateX(100%);
    transition: transform .24s ease;
    z-index: 120;
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: -22px 0 60px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
}

.admin-action-drawer.is-open {
    transform: translateX(0);
}

.admin-action-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px;
    border-bottom: 1px solid var(--border);
}

.admin-action-drawer-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-action-drawer-head h3 {
    margin: 5px 0 0;
    color: var(--text);
}

.admin-action-drawer-head button {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 22px;
}

.admin-action-drawer-body {
    display: grid;
    gap: 10px;
    padding: 18px;
    overflow-y: auto;
}

.admin-drawer-action {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    padding: 12px;
    font-weight: 900;
    cursor: pointer;
    text-align: left;
}

.admin-drawer-action-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
    background: rgba(20, 145, 229, 0.12);
    color: var(--primary);
}

.admin-action-drawer-body form {
    margin: 0;
}

/* =========================================
   ADMIN SHELL LAYOUT
========================================= */

.admin-shell {
    background:
        linear-gradient(180deg, rgba(20, 145, 229, 0.045), transparent 320px),
        var(--bg);
}

.admin-sidebar {
    width: 292px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96)),
        var(--card);
    border-right: 1px solid rgba(148, 163, 184, 0.20);
    box-shadow: 10px 0 34px rgba(15, 23, 42, 0.035);
}

body.theme-dark .admin-sidebar {
    background:
        linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.98)),
        var(--card);
}

.admin-sidebar-inner {
    min-height: 0;
}

.admin-sidebar-head {
    padding: 24px 20px 18px;
}

.admin-brand {
    width: 100%;
}

.admin-brand.sidebar-logo--custom {
    display: flex;
    align-items: center;
}

.admin-brand.sidebar-logo--custom .sidebar-logo-media {
    max-width: 210px;
    height: 62px;
}

.admin-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1491e5, #16c47f);
    box-shadow: 0 14px 30px rgba(20, 145, 229, 0.22);
}

.admin-brand-text {
    display: grid;
    gap: 2px;
}

.admin-brand-text strong {
    font-size: 18px;
    line-height: 1.1;
}

.admin-brand-text small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-sidebar-body {
    padding: 8px 14px 18px;
    overflow-y: auto;
}

.admin-nav-section {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.admin-nav-label {
    padding: 0 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-nav-group {
    gap: 6px;
}

.admin-nav-link {
    min-height: 46px;
    border-radius: 14px;
    color: #334155;
    font-weight: 800;
    position: relative;
    overflow: hidden;
}

body.theme-dark .admin-nav-link {
    color: #dbeafe;
}

.admin-nav-link:hover {
    background: rgba(20, 145, 229, 0.08);
    color: var(--primary);
}

.admin-nav-link.active {
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.14), rgba(22, 196, 127, 0.10));
    color: var(--primary);
    box-shadow: inset 3px 0 0 var(--primary);
}

.admin-nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.12);
    color: inherit;
}

.admin-nav-link.active .admin-nav-icon,
.admin-nav-link:hover .admin-nav-icon {
    background: rgba(20, 145, 229, 0.14);
}

.admin-nav-link--danger {
    color: #dc2626;
}

.admin-sidebar-card {
    margin: 18px 6px 4px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(20, 145, 229, 0.16);
    background:
        linear-gradient(135deg, rgba(20, 145, 229, 0.10), rgba(22, 196, 127, 0.08)),
        var(--card);
}

.admin-sidebar-card span {
    display: block;
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.admin-sidebar-card strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 6px;
}

.admin-sidebar-card small {
    display: block;
    color: var(--muted);
    line-height: 1.45;
}

.admin-sidebar-foot {
    display: grid;
    gap: 6px;
    padding: 14px;
    background: rgba(248, 250, 252, 0.70);
}

body.theme-dark .admin-sidebar-foot {
    background: rgba(15, 23, 42, 0.72);
}

.admin-main {
    min-width: 0;
}

.admin-topbar {
    min-height: 82px;
    padding: 16px 28px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.20);
}

body.theme-dark .admin-topbar {
    background: rgba(17,24,39,0.86);
}

.admin-topbar-left,
.admin-topbar-right {
    min-width: 0;
}

.admin-topbar-title {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.admin-topbar-title > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-topbar-title .topbar-page-title {
    font-size: 20px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-mobile-menu-btn {
    border-radius: 14px;
}

.admin-sidebar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.admin-mobile-menu-icon,
.admin-topbar-search-icon,
.admin-topbar-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-mobile-menu-icon svg,
.admin-topbar-search-icon svg,
.admin-topbar-chip-icon svg {
    width: 19px;
    height: 19px;
}

.admin-topbar-search {
    width: min(360px, 34vw);
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--muted);
}

.admin-topbar-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
}

.admin-topbar-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(20, 145, 229, 0.18);
    background: rgba(20, 145, 229, 0.08);
    color: var(--primary);
    font-weight: 900;
}

.admin-topbar-chip strong {
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.admin-user-button {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    padding: 8px 12px 8px 8px;
    cursor: pointer;
}

.admin-user-button:hover {
    border-color: rgba(20, 145, 229, 0.35);
}

.admin-main-content {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px;
}

@media (max-width: 1200px) {
    .admin-topbar-search {
        width: min(280px, 30vw);
    }
}

@media (max-width: 980px) {
    .admin-sidebar {
        width: 292px;
        left: -310px;
    }

    .admin-topbar {
        padding: 14px 18px;
    }

    .admin-topbar-search,
    .admin-topbar-chip {
        display: none;
    }

    .admin-main-content {
        max-width: none;
        padding: 22px 18px 28px;
    }
}

@media (max-width: 640px) {
    .admin-topbar-title .topbar-page-title {
        font-size: 17px;
        max-width: 52vw;
    }

    .admin-user-button {
        padding: 6px;
        border-radius: 14px;
    }

    .admin-main-content {
        padding: 18px 14px 24px;
    }
}

/* Compact professional admin shell pass */
.admin-sidebar {
    width: 264px;
    overflow: hidden;
}

.admin-sidebar-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admin-sidebar-head {
    flex: 0 0 auto;
    padding: 20px 18px 14px;
}

.admin-brand-mark {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
}

.admin-brand-text strong {
    font-size: 16px;
}

.admin-brand-text small {
    font-size: 10px;
}

.admin-sidebar-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.16) transparent;
}

.admin-sidebar-body::-webkit-scrollbar {
    width: 6px;
}

.admin-sidebar-body::-webkit-scrollbar-track {
    background: transparent;
}

.admin-sidebar-body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.16);
    border-radius: 999px;
}

.admin-nav-section {
    gap: 7px;
    margin-bottom: 14px;
}

.admin-nav-label {
    font-size: 10px;
    padding: 0 8px;
}

.admin-nav-link {
    min-height: 40px;
    border-radius: 12px;
    padding: 7px 10px;
    gap: 10px;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.2;
}

.admin-nav-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 10px;
}

.admin-nav-icon svg {
    width: 17px;
    height: 17px;
}

.admin-nav-link > span:not(.admin-nav-icon):not(.admin-nav-badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-nav-badge {
    min-width: 24px;
    height: 22px;
    margin-left: auto;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(20, 145, 229, 0.14);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
}

.admin-sidebar-card {
    margin: 12px 4px 2px;
    padding: 13px;
    border-radius: 14px;
}

.admin-sidebar-card span {
    font-size: 10px;
    margin-bottom: 6px;
}

.admin-sidebar-card strong {
    font-size: 13px;
}

.admin-sidebar-card small {
    font-size: 12px;
}

.admin-sidebar-foot {
    flex: 0 0 auto;
    padding: 10px 12px;
}

.admin-topbar {
    min-height: 68px;
    padding: 12px 28px;
}

.admin-topbar-title > span {
    font-size: 10px;
}

.admin-topbar-title .topbar-page-title {
    font-size: 18px;
}

.admin-topbar-search {
    height: 40px;
    border-radius: 12px;
}

.admin-topbar-chip {
    min-height: 40px;
    border-radius: 12px;
    font-size: 14px;
}

.admin-user-button {
    min-height: 44px;
    border-radius: 15px;
}

.admin-user-button .topbar-user-avatar {
    width: 36px;
    height: 36px;
}

.admin-user-button .topbar-user-meta strong {
    font-size: 13px;
}

.admin-user-button .topbar-user-meta span {
    font-size: 11px;
}

.admin-main-content {
    padding: 24px 28px 32px;
}

.admin-shell--collapsed .admin-sidebar {
    width: 84px;
}

.admin-shell--collapsed .admin-brand {
    justify-content: center;
}

.admin-shell--collapsed .admin-brand-text,
.admin-shell--collapsed .admin-nav-label,
.admin-shell--collapsed .admin-nav-link > span:not(.admin-nav-icon):not(.admin-nav-badge),
.admin-shell--collapsed .admin-sidebar-card,
.admin-shell--collapsed .admin-sidebar-foot .admin-nav-link > span:not(.admin-nav-icon):not(.admin-nav-badge) {
    display: none;
}

.admin-shell--collapsed .admin-sidebar-head {
    padding-left: 12px;
    padding-right: 12px;
}

.admin-shell--collapsed .admin-sidebar-body,
.admin-shell--collapsed .admin-sidebar-foot {
    padding-left: 10px;
    padding-right: 10px;
}

.admin-shell--collapsed .admin-nav-link {
    justify-content: center;
    padding: 7px;
}

.admin-shell--collapsed .admin-nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
}

.admin-page > .admin-page-header {
    gap: 12px;
}

.admin-page-header h1 {
    font-size: 26px;
    letter-spacing: 0;
}

.admin-page-header p {
    font-size: 14px;
}

.admin-panel {
    border-radius: 18px;
}

.admin-filter-form {
    gap: 12px;
    margin-bottom: 0;
}

.admin-table th {
    font-size: 11px;
    letter-spacing: .055em;
}

.admin-table td {
    font-size: 13px;
}

.admin-dashboard-page {
    gap: 22px;
}

.admin-dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 26px;
    border-radius: 24px;
    border: 1px solid rgba(20, 145, 229, 0.14);
    background:
        linear-gradient(135deg, rgba(20, 145, 229, 0.14), rgba(22, 196, 127, 0.09)),
        var(--card);
    box-shadow: var(--shadow-sm);
}

.admin-dashboard-hero span {
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-dashboard-hero h1 {
    margin: 8px 0 8px;
    color: var(--text);
    font-size: 30px;
    line-height: 1.1;
}

.admin-dashboard-hero p {
    margin: 0;
    color: var(--muted);
}

.admin-dashboard-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.admin-dashboard-kpi {
    min-width: 0;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 10px;
}

.admin-dashboard-kpi-icon,
.admin-dashboard-link-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(20, 145, 229, 0.10);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-dashboard-kpi-icon svg,
.admin-dashboard-link-icon svg {
    width: 18px;
    height: 18px;
}

.admin-dashboard-kpi small {
    color: var(--muted);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-dashboard-kpi strong {
    color: var(--text);
    font-size: 24px;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 16px;
}

.admin-dashboard-panel {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.admin-dashboard-panel h2 {
    margin: 0 0 16px;
    color: var(--text);
    font-size: 18px;
}

.admin-dashboard-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-dashboard-links a {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    font-weight: 850;
}

.admin-dashboard-panel-accent {
    background:
        linear-gradient(135deg, rgba(20, 145, 229, 0.12), rgba(22, 196, 127, 0.10)),
        var(--card);
}

.admin-dashboard-panel-accent span {
    display: block;
    margin-bottom: 9px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-dashboard-panel-accent p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

@media (max-width: 1280px) {
    .admin-dashboard-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .admin-sidebar {
        width: 272px;
        left: -292px;
    }

    .admin-sidebar-toggle {
        display: none;
    }

    .admin-shell--collapsed .admin-sidebar {
        width: 272px;
    }

    .admin-shell--collapsed .admin-brand-text,
    .admin-shell--collapsed .admin-nav-label,
    .admin-shell--collapsed .admin-nav-link > span:not(.admin-nav-icon):not(.admin-nav-badge),
    .admin-shell--collapsed .admin-sidebar-card,
    .admin-shell--collapsed .admin-sidebar-foot .admin-nav-link > span:not(.admin-nav-icon):not(.admin-nav-badge) {
        display: initial;
    }

    .admin-dashboard-hero,
    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-hero {
        display: grid;
        padding: 22px;
    }

    .admin-dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .admin-dashboard-hero h1 {
        font-size: 24px;
    }

    .admin-dashboard-kpis,
    .admin-dashboard-links {
        grid-template-columns: 1fr;
    }
}

.admin-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-section-title h3 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
}

.admin-section-title span {
    min-width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--muted);
    font-weight: 800;
}

.admin-horizontal-scroll {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
}

.admin-detail-table {
    min-width: 760px;
}

.admin-detail-table th:last-child,
.admin-detail-table td:last-child {
    position: static;
    right: auto;
    box-shadow: none;
}

@media (max-width: 1180px) {
    .admin-users-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-users-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-users-filter .admin-action-btn {
        width: 100%;
    }

    .admin-user-profile-panel,
    .admin-user-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-profile-stats,
    .admin-user-settings-grid,
    .admin-user-settings-summary {
        grid-template-columns: 1fr;
    }

    .admin-fintech-metrics,
    .admin-user-quick-links,
    .admin-user-scope-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-users-page {
        gap: 16px;
    }

    .admin-users-page .admin-page-header h1 {
        font-size: 24px;
    }

    .admin-users-page .admin-page-header p {
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .admin-users-stats,
    .admin-users-filter {
        grid-template-columns: 1fr;
    }

    .admin-users-stat {
        padding: 17px 18px;
    }

    .admin-users-filter .admin-action-btn {
        width: 100%;
    }

    .admin-users-table-desktop {
        display: none;
    }

    .admin-users-mobile-list {
        display: grid;
        gap: 12px;
    }

    .admin-user-profile-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .admin-user-profile-main {
        align-items: flex-start;
    }

    .admin-user-profile-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-header-actions,
    .admin-user-header-actions .btn {
        width: 100%;
    }

    .admin-fintech-metrics {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .admin-user-quick-links {
        grid-template-columns: 1fr;
    }

    .admin-confirm-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .admin-users-card {
        padding: 14px;
        border-radius: 16px;
    }

    .admin-users-card-head {
        display: grid;
    }

    .admin-users-card-meta,
    .admin-users-card-actions {
        grid-template-columns: 1fr;
    }

    .admin-users-avatar {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
    }
}

/* =========================================
   Admin Professional Application Polish
========================================= */

.admin-shell .admin-page,
.admin-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: 20px;
}

.admin-page-header,
.admin-page__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 0 0 6px;
}

.admin-page-header h1,
.admin-page__title {
    margin: 0;
    color: var(--text);
    font-size: 28px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0;
}

.admin-page-header p,
.admin-page__header p {
    max-width: 780px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.admin-page__eyebrow {
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-page-title-group {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-page-title-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: 1px solid rgba(20, 145, 229, 0.20);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.12), rgba(22, 196, 127, 0.10));
    color: var(--primary);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.admin-page-title-icon svg {
    width: 21px;
    height: 21px;
}

.btn-icon,
.admin-table-link-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon svg,
.admin-table-link-icon svg {
    width: 16px;
    height: 16px;
}

.admin-shell .btn,
.admin-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
}

.admin-shell .btn-sm,
.admin-page .btn-sm {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
}

.admin-card,
.admin-panel {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.admin-card,
.admin-panel--elevated {
    padding: 20px;
}

.admin-card h3,
.admin-panel h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0;
}

.admin-card h3::before,
.admin-panel h3::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), #16c47f);
    box-shadow: 0 0 0 5px rgba(20, 145, 229, 0.10);
}

.admin-grid,
.admin-details-grid,
.admin-form-grid {
    min-width: 0;
    gap: 18px;
}

.admin-grid--2,
.admin-details-grid--2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.admin-filter-form,
.admin-filters {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: end;
    gap: 12px;
}

.admin-filter-form .admin-action-btn,
.admin-filters .admin-action-btn {
    width: 100%;
}

.admin-filter-group label,
.form-block-label,
.admin-form-label {
    display: block;
    margin: 0 0 7px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: .02em;
}

.admin-select,
.admin-input,
.admin-textarea,
.money-input,
select.money-input,
textarea.money-input,
.loan-textarea,
.admin-static-field {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
    box-shadow: none;
}

.admin-select,
.admin-input,
.money-input,
select.money-input,
.admin-static-field {
    padding: 0 14px;
}

.admin-textarea,
textarea.money-input,
.loan-textarea {
    min-height: 112px;
    padding: 12px 14px;
    resize: vertical;
}

.admin-static-field {
    display: flex;
    align-items: center;
    overflow-wrap: anywhere;
}

.admin-select:focus,
.admin-input:focus,
.admin-textarea:focus,
.money-input:focus,
.loan-textarea:focus {
    border-color: rgba(20, 145, 229, 0.72);
    outline: none;
    box-shadow: 0 0 0 4px rgba(20, 145, 229, 0.12);
}

.admin-form-stack,
.admin-action-stack {
    display: grid;
    gap: 14px;
}

.admin-inline-actions,
.admin-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-review-form,
.admin-method-form {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.admin-table-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    background: var(--card);
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

.admin-table-wrap::-webkit-scrollbar {
    height: 10px;
}

.admin-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.admin-table-wrap::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.45);
    background-clip: padding-box;
}

.admin-table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

.admin-card .admin-table-wrap,
.admin-panel .admin-table-wrap {
    margin-top: 8px;
}

.admin-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-table td {
    padding: 15px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr {
    transition: background .18s ease, transform .18s ease;
}

.admin-table tbody tr:hover {
    background: rgba(20, 145, 229, 0.045);
}

.admin-table td:last-child,
.admin-table th:last-child {
    min-width: 132px;
}

.admin-table-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(20, 145, 229, 0.22);
    border-radius: 999px;
    background: rgba(20, 145, 229, 0.08);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.admin-user-cell {
    min-width: 190px;
}

.admin-user-cell strong,
.admin-table strong {
    color: var(--text);
    font-weight: 900;
}

.admin-user-cell span,
.admin-muted,
.admin-table small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.status-badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.status-badge.is-success {
    background: rgba(22, 163, 74, 0.12);
    color: #047857;
}

.status-badge.is-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.status-badge.is-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.status-badge.is-neutral {
    background: rgba(100, 116, 139, 0.12);
    color: var(--muted);
}

.admin-empty-state {
    min-height: 170px;
    display: grid;
    place-items: center;
    padding: 24px;
    border: 1px dashed rgba(148, 163, 184, 0.42);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.04), rgba(22, 196, 127, 0.04));
    color: var(--muted);
    font-size: 14px;
    font-weight: 750;
    text-align: center;
}

.admin-kv-list,
.admin-detail-list {
    display: grid;
    gap: 10px;
}

.admin-kv-list > div,
.admin-detail-list > div,
.admin-document-item {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.admin-kv-list strong,
.admin-detail-list strong,
.admin-document-meta strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.admin-document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-loan-document-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-document-meta {
    min-width: 0;
}

.admin-document-meta span,
.admin-document-empty {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.admin-method-shell {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.admin-method-sidebar-card {
    position: sticky;
    top: 92px;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(20, 145, 229, 0.20);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.10), rgba(22, 196, 127, 0.08)), var(--card);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}

.admin-method-sidebar-card h3 {
    margin: 4px 0 4px;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.admin-method-sidebar-card p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.admin-method-sidebar-kicker,
.admin-method-mini-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-method-mini-card {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.60);
}

body.theme-dark .admin-method-mini-card {
    background: rgba(15, 23, 42, 0.35);
}

.admin-method-mini-card + .admin-method-mini-card {
    margin-top: 10px;
}

.admin-method-mini-card strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.admin-method-inline-hint {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .admin-grid--2,
    .admin-details-grid--2,
    .admin-method-shell {
        grid-template-columns: 1fr;
    }

    .admin-method-sidebar-card {
        position: static;
    }
}

@media (max-width: 760px) {
    .admin-shell .admin-page,
    .admin-page {
        gap: 16px;
    }

    .admin-page-header,
    .admin-page__header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .admin-page-header h1,
    .admin-page__title {
        font-size: 23px;
    }

    .admin-page-title-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 12px;
    }

    .admin-card,
    .admin-panel--elevated {
        padding: 16px;
        border-radius: 16px;
    }

    .admin-filter-form,
    .admin-filters,
    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-inline-actions,
    .admin-inline-form,
    .admin-inline-actions .btn,
    .admin-inline-form .btn,
    .admin-page-header > .btn,
    .admin-page__header > .btn {
        width: 100%;
    }

    .admin-table {
        min-width: 820px;
    }

    .admin-table th,
    .admin-table td {
        padding: 12px;
        font-size: 13px;
    }

    .admin-document-item {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-document-item .btn {
        width: 100%;
    }
}

/* =========================================
   Admin Dark Mode Corrections + Subnav
========================================= */

.admin-nav-item {
    display: grid;
    gap: 4px;
}

.admin-nav-parent {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 4px;
}

.admin-nav-parent > .admin-nav-link {
    min-width: 0;
}

.admin-subnav-toggle {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.admin-subnav-toggle span {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .2s ease;
}

.admin-subnav-toggle:hover {
    border-color: rgba(20, 145, 229, 0.20);
    background: rgba(20, 145, 229, 0.10);
    color: var(--primary);
}

.admin-nav-item.is-open .admin-subnav-toggle span {
    transform: rotate(-135deg) translate(-1px, -1px);
}

.admin-subnav {
    display: grid;
    gap: 2px;
    margin: 0 0 3px 42px;
    padding: 2px 0 2px 12px;
    border-left: 1px solid rgba(148, 163, 184, 0.24);
    animation: adminSubnavIn .18s ease;
}

.admin-subnav[hidden] {
    display: none;
}

@keyframes adminSubnavIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-subnav-link {
    min-width: 0;
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-subnav-link span {
    width: 5px;
    height: 5px;
    min-width: 5px;
    border-radius: 999px;
    background: currentColor;
    opacity: .55;
}

.admin-subnav-link:hover,
.admin-subnav-link.active {
    background: rgba(20, 145, 229, 0.10);
    color: var(--primary);
}

.admin-shell--collapsed .admin-subnav {
    display: none;
}

.admin-shell--collapsed .admin-nav-parent {
    grid-template-columns: 1fr;
}

.admin-shell--collapsed .admin-subnav-toggle {
    display: none;
}

body.theme-dark .admin-table-wrap,
body.theme-dark .admin-users-table-desktop,
body.theme-dark .admin-horizontal-scroll {
    border-color: rgba(148, 163, 184, 0.20);
    background: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    scrollbar-color: rgba(125, 211, 252, 0.42) rgba(15, 23, 42, 0.40);
}

body.theme-dark .admin-table-wrap::-webkit-scrollbar-track,
body.theme-dark .admin-users-table-desktop::-webkit-scrollbar-track,
body.theme-dark .admin-horizontal-scroll::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.72);
}

body.theme-dark .admin-table-wrap::-webkit-scrollbar-thumb,
body.theme-dark .admin-users-table-desktop::-webkit-scrollbar-thumb,
body.theme-dark .admin-horizontal-scroll::-webkit-scrollbar-thumb {
    background: rgba(125, 211, 252, 0.34);
}

body.theme-dark .admin-table,
body.theme-dark .admin-users-table-desktop .admin-table,
body.theme-dark .admin-detail-table {
    background: #0f172a;
    color: #e5edf7;
}

body.theme-dark .admin-table thead,
body.theme-dark .admin-table tbody,
body.theme-dark .admin-table tr {
    background: transparent;
}

body.theme-dark .admin-table th,
body.theme-dark .admin-table thead th,
body.theme-dark .admin-table th:last-child,
body.theme-dark .admin-table thead th:last-child {
    border-bottom-color: rgba(148, 163, 184, 0.22);
    background: #172033;
    color: #9fb0c7;
    box-shadow: none;
}

body.theme-dark .admin-table td,
body.theme-dark .admin-table tbody td,
body.theme-dark .admin-table td:first-child,
body.theme-dark .admin-table td:last-child {
    border-bottom-color: rgba(148, 163, 184, 0.13);
    background: #0f172a;
    color: #d7e2f0;
    box-shadow: none;
}

body.theme-dark .admin-table tbody tr:nth-child(even) td {
    background: #111c2e;
}

body.theme-dark .admin-table tbody tr:hover td,
body.theme-dark .admin-table tbody tr:hover td:first-child,
body.theme-dark .admin-table tbody tr:hover td:last-child {
    background: rgba(20, 145, 229, 0.12);
}

body.theme-dark .admin-table strong,
body.theme-dark .admin-user-cell strong,
body.theme-dark .admin-table td strong {
    color: #f8fafc;
}

body.theme-dark .admin-user-cell span,
body.theme-dark .admin-muted,
body.theme-dark .admin-table small {
    color: #8ea3bd;
}

body.theme-dark .admin-table-link {
    border-color: rgba(56, 189, 248, 0.28);
    background: rgba(14, 165, 233, 0.14);
    color: #7dd3fc;
}

body.theme-dark .admin-page-title-icon {
    border-color: rgba(56, 189, 248, 0.20);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(34, 197, 94, 0.11));
    color: #7dd3fc;
}

body.theme-dark .admin-card,
body.theme-dark .admin-panel,
body.theme-dark .admin-panel--elevated,
body.theme-dark .admin-users-card,
body.theme-dark .admin-user-profile-panel,
body.theme-dark .admin-method-sidebar-card {
    border-color: rgba(148, 163, 184, 0.18);
    background: #101827;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}

body.theme-dark .admin-user-profile-grid > div,
body.theme-dark .admin-user-profile-stats > div,
body.theme-dark .admin-fintech-metric,
body.theme-dark .admin-user-quick-link,
body.theme-dark .admin-user-tabs,
body.theme-dark .admin-user-show-page .admin-panel,
body.dark-mode .admin-user-profile-grid > div,
body.dark-mode .admin-user-profile-stats > div,
body.dark-mode .admin-fintech-metric,
body.dark-mode .admin-user-quick-link,
body.dark-mode .admin-user-tabs,
body.dark-mode .admin-user-show-page .admin-panel {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.94);
}

body.theme-dark .admin-user-settings-summary__item,
body.theme-dark .admin-user-settings-note,
body.dark-mode .admin-user-settings-summary__item,
body.dark-mode .admin-user-settings-note {
    border-color: rgba(148, 163, 184, 0.16);
    background: #0f172a;
}

body.theme-dark .admin-user-settings-card__head h4,
body.theme-dark .admin-user-settings-summary__item strong,
body.theme-dark .admin-user-settings-note strong,
body.theme-dark .admin-user-profile-stats strong,
body.theme-dark .admin-user-profile-grid strong,
body.theme-dark .admin-fintech-metric strong,
body.theme-dark .admin-user-quick-link strong,
body.theme-dark .admin-user-show-page .admin-section-title h3,
body.dark-mode .admin-user-settings-card__head h4,
body.dark-mode .admin-user-settings-summary__item strong,
body.dark-mode .admin-user-settings-note strong,
body.dark-mode .admin-user-profile-stats strong,
body.dark-mode .admin-user-profile-grid strong,
body.dark-mode .admin-fintech-metric strong,
body.dark-mode .admin-user-quick-link strong,
body.dark-mode .admin-user-show-page .admin-section-title h3 {
    color: #f8fafc;
}

body.theme-dark .admin-user-settings-card__head p,
body.theme-dark .admin-user-settings-summary__item span,
body.theme-dark .admin-user-settings-note span,
body.theme-dark .admin-user-profile-stats span,
body.theme-dark .admin-user-profile-grid span,
body.theme-dark .admin-fintech-metric span,
body.theme-dark .admin-user-quick-link span,
body.dark-mode .admin-user-settings-card__head p,
body.dark-mode .admin-user-settings-summary__item span,
body.dark-mode .admin-user-settings-note span,
body.dark-mode .admin-user-profile-stats span,
body.dark-mode .admin-user-profile-grid span,
body.dark-mode .admin-fintech-metric span,
body.dark-mode .admin-user-quick-link span {
    color: #93a4bd;
}

body.theme-dark .admin-user-profile-panel,
body.dark-mode .admin-user-profile-panel {
    background:
        radial-gradient(circle at top right, rgba(20, 145, 229, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(16, 24, 39, 0.98), rgba(10, 17, 30, 0.96));
}

body.theme-dark .admin-kv-list > div,
body.theme-dark .admin-detail-list > div,
body.theme-dark .admin-document-item,
body.theme-dark .admin-static-field,
body.theme-dark .admin-users-card-meta > div {
    border-color: rgba(148, 163, 184, 0.16);
    background: #0f172a;
    color: #d7e2f0;
}

body.theme-dark .admin-select,
body.theme-dark .admin-input,
body.theme-dark .admin-textarea,
body.theme-dark .money-input,
body.theme-dark select.money-input,
body.theme-dark textarea.money-input,
body.theme-dark .loan-textarea {
    border-color: rgba(148, 163, 184, 0.24);
    background: #111827;
    color: #f8fafc;
}

body.theme-dark .admin-select option {
    background: #111827;
    color: #f8fafc;
}

body.theme-dark .status-badge.is-success {
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
}

body.theme-dark .status-badge.is-warning {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

body.theme-dark .status-badge.is-danger {
    background: rgba(248, 113, 113, 0.16);
    color: #fca5a5;
}

body.theme-dark .status-badge.is-neutral {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

body.theme-dark .admin-empty-state {
    border-color: rgba(148, 163, 184, 0.24);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(34, 197, 94, 0.06));
    color: #9fb0c7;
}

body.theme-dark .admin-subnav {
    border-left-color: rgba(148, 163, 184, 0.18);
}

body.theme-dark .admin-subnav-link {
    color: #93a4ba;
}

body.theme-dark .admin-subnav-link:hover,
body.theme-dark .admin-subnav-link.active {
    background: rgba(14, 165, 233, 0.12);
    color: #7dd3fc;
}

body.theme-dark .admin-subnav-toggle {
    color: #93a4ba;
}

body.theme-dark .admin-subnav-toggle:hover {
    border-color: rgba(56, 189, 248, 0.20);
    background: rgba(14, 165, 233, 0.12);
    color: #7dd3fc;
}

@media (max-width: 980px) {
    .admin-subnav {
        margin-left: 42px;
    }
}

/* =========================================
   Admin Deposit Methods Index
========================================= */

.admin-methods-page {
    gap: 22px;
}

.admin-methods-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.admin-methods-metric {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.05);
}

.admin-methods-metric-icon {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.12), rgba(22, 196, 127, 0.10));
    color: var(--primary);
}

.admin-methods-metric-icon svg {
    width: 20px;
    height: 20px;
}

.admin-methods-metric-icon--bank,
.admin-methods-metric-icon--crypto {
    padding: 0;
    overflow: hidden;
}

.admin-methods-metric-icon--bank {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.16), rgba(14, 165, 233, 0.12));
}

.admin-methods-metric-icon--crypto {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(45, 212, 191, 0.12));
}

.admin-method-brand-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.admin-methods-metric span {
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-methods-metric strong {
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
}

.admin-methods-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: var(--card);
}

.admin-methods-toolbar > div:first-child {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-methods-toolbar strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
}

.admin-methods-toolbar span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.admin-methods-filter-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: var(--surface);
}

.admin-methods-filter-tabs a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.admin-methods-filter-tabs a:hover,
.admin-methods-filter-tabs a.active {
    background: var(--card);
    color: var(--primary);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.admin-methods-page .admin-method-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-methods-page .admin-method-card {
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.admin-method-card--crypto {
    border-top: 3px solid rgba(124, 58, 237, 0.60);
}

.admin-method-card--bank {
    border-top: 3px solid rgba(20, 145, 229, 0.70);
}

.admin-method-card-svg {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-method-card-svg svg {
    width: 26px;
    height: 26px;
}

.admin-method-card-svg--bank {
    width: 30px;
    height: 30px;
}

.admin-method-card-svg--crypto {
    width: 38px;
    height: 26px;
}

.admin-method-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-method-summary > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 14px;
    background: var(--surface);
}

.admin-method-summary span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.admin-method-summary strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.admin-methods-page .admin-method-card-actions .btn {
    min-height: 36px;
}

body.theme-dark .admin-methods-metric,
body.theme-dark .admin-methods-toolbar,
body.theme-dark .admin-methods-page .admin-method-card {
    border-color: rgba(148, 163, 184, 0.18);
    background: #101827;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}

body.theme-dark .admin-methods-metric-icon {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(34, 197, 94, 0.11));
    color: #7dd3fc;
}

body.theme-dark .admin-methods-filter-tabs,
body.theme-dark .admin-method-summary > div,
body.theme-dark .admin-method-bank-item,
body.theme-dark .admin-method-network-chip {
    border-color: rgba(148, 163, 184, 0.16);
    background: #0f172a;
}

body.theme-dark .admin-methods-filter-tabs a:hover,
body.theme-dark .admin-methods-filter-tabs a.active {
    background: rgba(14, 165, 233, 0.12);
    color: #7dd3fc;
    box-shadow: none;
}

body.theme-dark .admin-method-card-icon.is-bank {
    background: rgba(14, 165, 233, 0.14);
    color: #7dd3fc;
}

body.theme-dark .admin-method-card-icon.is-crypto {
    background: rgba(168, 85, 247, 0.14);
    color: #c4b5fd;
}

body.theme-dark .admin-method-meta-pill {
    border-color: rgba(148, 163, 184, 0.18);
    background: #0f172a;
    color: #d7e2f0;
}

body.theme-dark .admin-method-meta-pill.is-crypto-pill {
    border-color: rgba(168, 85, 247, 0.22);
    background: rgba(168, 85, 247, 0.12);
    color: #c4b5fd;
}

@media (max-width: 1180px) {
    .admin-methods-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-methods-page .admin-method-index-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-methods-overview,
    .admin-method-summary {
        grid-template-columns: 1fr;
    }

    .admin-methods-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-methods-filter-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .admin-methods-filter-tabs a {
        flex: 1 0 auto;
    }
}

/* =========================================
   Admin Deposit Method Form
========================================= */

.admin-method-form-page .admin-method-shell {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
}

.admin-method-form-page .admin-method-sidebar-card {
    display: grid;
    gap: 14px;
}

.admin-method-form-page .admin-method-hero-icon {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.14), rgba(22, 196, 127, 0.10));
    color: var(--primary);
    font-size: 28px;
    font-weight: 950;
}

.admin-method-form-page .admin-method-hero-icon svg {
    width: 32px;
    height: 32px;
}

.admin-method-form-page .admin-method-brand-svg--hero {
    width: 100%;
    height: 100%;
}

.admin-method-form-page .admin-method-hero-icon.is-crypto {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(20, 145, 229, 0.08));
    color: #7c3aed;
}

.admin-method-form-page .admin-method-legend {
    display: grid;
    gap: 8px;
    padding-top: 4px;
}

.admin-method-form-page .admin-method-legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.admin-method-form-page .admin-method-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 0 5px rgba(20, 145, 229, 0.10);
}

.admin-method-form-page .admin-method-dot.is-crypto {
    background: #7c3aed;
    box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.10);
}

.admin-method-form-page .admin-method-content-stack {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.admin-method-form-page .admin-method-section {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 18px;
    background: var(--surface);
}

.admin-method-form-page .admin-method-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-method-form-page .admin-method-section-kicker {
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-method-form-page .admin-method-section h2 {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
}

.admin-method-form-page .admin-method-type-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-method-form-page .admin-method-type-btn {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.admin-method-form-page .admin-method-type-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 145, 229, 0.34);
}

.admin-method-form-page .admin-method-type-btn.is-active {
    border-color: rgba(20, 145, 229, 0.42);
    background: rgba(20, 145, 229, 0.09);
    color: var(--primary);
}

.admin-method-form-page .admin-method-type-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 145, 229, 0.10);
}

.admin-method-form-page .admin-method-type-icon svg {
    width: 18px;
    height: 18px;
}

.admin-method-form-page .admin-method-type-icon .admin-method-brand-svg {
    width: 26px;
    height: 18px;
}

.admin-method-form-page .admin-form-grid-span-2 {
    grid-column: span 2;
}

.admin-method-form-page .admin-method-hidden {
    display: none;
}

.admin-network-list {
    display: grid;
    gap: 14px;
}

.admin-network-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 18px;
    background: var(--surface);
}

.admin-network-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-network-card-title-wrap {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.admin-network-badge {
    width: fit-content;
    max-width: 100%;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.10);
    color: #7c3aed;
    font-size: 12px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.admin-network-address {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-network-form {
    display: grid;
    gap: 14px;
}

.admin-network-create {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.20);
}

.admin-network-create h3 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 950;
}

.admin-inline-actions--space-between {
    justify-content: space-between;
}

.admin-link-button {
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.admin-link-button--danger {
    color: #dc2626;
}

body.theme-dark .admin-method-form-page .admin-method-section,
body.theme-dark .admin-network-card {
    border-color: rgba(148, 163, 184, 0.16);
    background: #0f172a;
}

body.theme-dark .admin-method-form-page .admin-method-hero-icon {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(34, 197, 94, 0.10));
    color: #7dd3fc;
}

body.theme-dark .admin-method-form-page .admin-method-hero-icon.is-crypto {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(14, 165, 233, 0.08));
    color: #c4b5fd;
}

body.theme-dark .admin-method-form-page .admin-method-type-btn {
    border-color: rgba(148, 163, 184, 0.18);
    background: #101827;
    color: #e5edf7;
}

body.theme-dark .admin-method-form-page .admin-method-type-btn.is-active {
    border-color: rgba(56, 189, 248, 0.28);
    background: rgba(14, 165, 233, 0.12);
    color: #7dd3fc;
}

body.theme-dark .admin-method-form-page .admin-method-type-icon {
    background: rgba(14, 165, 233, 0.12);
}

body.theme-dark .admin-network-badge {
    background: rgba(168, 85, 247, 0.14);
    color: #c4b5fd;
}

body.theme-dark .admin-link-button {
    color: #7dd3fc;
}

body.theme-dark .admin-link-button--danger {
    color: #fca5a5;
}

@media (max-width: 1180px) {
    .admin-method-form-page .admin-method-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-method-form-page .admin-method-type-switch,
    .admin-method-form-page .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-method-form-page .admin-form-grid-span-2 {
        grid-column: auto;
    }

    .admin-network-card-top,
    .admin-inline-actions--space-between {
        align-items: stretch;
        flex-direction: column;
    }
}

/* =========================================
   Admin Review Detail Insights
========================================= */

.admin-review-page {
    gap: 22px;
}

.admin-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-insight-card,
.admin-circular-stat {
    min-width: 0;
}

.admin-insight-card {
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.05);
}

.admin-circular-stat {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-circular-stat-ring {
    width: 74px;
    height: 74px;
    min-width: 74px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, var(--card) 0 55%, transparent 56%),
        conic-gradient(var(--primary) var(--value), rgba(148, 163, 184, 0.18) 0);
    color: var(--text);
}

.admin-circular-stat-ring strong {
    font-size: 16px;
    line-height: 1;
    font-weight: 950;
}

.admin-circular-stat span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-circular-stat small {
    display: block;
    margin-top: 5px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.admin-method-sidebar-card .admin-circular-stat {
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 16px;
    background: var(--surface);
}

.admin-method-sidebar-card .admin-circular-stat-ring {
    width: 68px;
    height: 68px;
    min-width: 68px;
}

body.theme-dark .admin-insight-card,
body.theme-dark .admin-method-sidebar-card .admin-circular-stat {
    border-color: rgba(148, 163, 184, 0.16);
    background: #101827;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24);
}

body.theme-dark .admin-circular-stat-ring {
    background:
        radial-gradient(circle at center, #101827 0 55%, transparent 56%),
        conic-gradient(#7dd3fc var(--value), rgba(148, 163, 184, 0.18) 0);
    color: #f8fafc;
}

body.theme-dark .admin-method-sidebar-card .admin-circular-stat-ring {
    background:
        radial-gradient(circle at center, #0f172a 0 55%, transparent 56%),
        conic-gradient(#7dd3fc var(--value), rgba(148, 163, 184, 0.18) 0);
}

@media (max-width: 1180px) {
    .admin-insight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .admin-circular-stat {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================
   User Professional Shell
========================================= */

.user-sidebar {
    width: 276px;
    overflow: hidden;
    border-right: 1px solid rgba(148, 163, 184, 0.20);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(248, 250, 252, 0.985));
}

.user-sidebar-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.user-sidebar-head {
    flex: 0 0 auto;
    padding: 18px 22px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.92);
}

.user-brand {
    min-width: 0;
}

.user-brand.sidebar-logo--custom {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

.user-brand.sidebar-logo--custom .sidebar-logo-media {
    max-width: 188px;
    height: 42px;
}

.user-brand-mark {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #16c47f);
    color: #fff;
}

.user-brand-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.user-brand-text strong {
    color: var(--text);
    font-size: 17px;
    line-height: 1;
    font-weight: 950;
}

.user-brand-text small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.user-sidebar-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.28) transparent;
}

.user-sidebar-body::-webkit-scrollbar {
    width: 6px;
}

.user-sidebar-body::-webkit-scrollbar-track {
    background: transparent;
}

.user-sidebar-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.28);
}

.user-nav-section {
    display: grid;
    gap: 8px;
    margin-bottom: 17px;
}

.user-nav-label {
    padding: 0 10px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.user-nav-group,
.user-nav-item {
    display: grid;
    gap: 5px;
}

.user-nav-parent {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 4px;
    align-items: center;
}

.user-nav-link {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
}

.user-nav-link:hover,
.user-nav-link.active {
    border-color: rgba(20, 145, 229, 0.16);
    background: rgba(20, 145, 229, 0.10);
    color: var(--primary);
}

.user-nav-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 11px;
    background: var(--surface);
    color: currentColor;
}

.user-nav-icon svg {
    width: 17px;
    height: 17px;
}

.user-nav-link.active .user-nav-icon,
.user-nav-link:hover .user-nav-icon {
    background: rgba(20, 145, 229, 0.14);
}

.user-subnav-toggle {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.user-subnav-toggle span {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .2s ease;
}

.user-subnav-toggle:hover {
    border-color: rgba(20, 145, 229, 0.18);
    background: rgba(20, 145, 229, 0.08);
    color: var(--primary);
}

.user-nav-item.is-open .user-subnav-toggle span {
    transform: rotate(-135deg) translate(-1px, -1px);
}

.user-subnav {
    display: grid;
    gap: 2px;
    margin: 0 0 2px 43px;
    padding: 3px 0 3px 12px;
    border-left: 1px solid rgba(148, 163, 184, 0.24);
    animation: adminSubnavIn .18s ease;
}

.user-subnav[hidden] {
    display: none;
}

.user-subnav-link {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-subnav-link span {
    width: 5px;
    height: 5px;
    min-width: 5px;
    border-radius: 999px;
    background: currentColor;
    opacity: .55;
}

.user-subnav-link:hover {
    background: rgba(20, 145, 229, 0.08);
    color: var(--primary);
}

.user-sidebar-card {
    display: grid;
    gap: 7px;
    margin: 14px 4px 2px;
    padding: 14px;
    border: 1px solid rgba(20, 145, 229, 0.18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(20, 145, 229, 0.10), rgba(22, 196, 127, 0.08));
}

.user-sidebar-card span {
    color: var(--primary);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.user-sidebar-card strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 950;
}

.user-sidebar-card small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.user-sidebar-card__meta {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.52);
    transition: background-color .18s ease, transform .18s ease;
}

.user-sidebar-card__meta:hover {
    background: rgba(255, 255, 255, 0.82);
    transform: translateY(-1px);
}

.user-sidebar-card__meta b {
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.user-sidebar-card__meta small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    word-break: break-word;
}

.user-sidebar-card__meta-icon,
.user-sidebar-card__meta-icon-svg {
    width: 14px;
    height: 14px;
    display: inline-flex;
    color: var(--primary);
    flex: 0 0 auto;
}

.user-sidebar-foot {
    flex: 0 0 auto;
    display: grid;
    gap: 6px;
    padding: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.user-nav-link--danger {
    color: #dc2626;
}

.user-topbar {
    min-height: 72px;
    padding: 12px 28px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: blur(18px);
}

.user-topbar-mobile {
    display: none;
}

.user-topbar-left,
.user-topbar-right {
    min-width: 0;
}

.user-topbar-theme-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
}

.user-topbar-title {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.user-topbar-title > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.user-topbar-title .topbar-page-title {
    color: var(--text);
    font-size: 19px;
    font-weight: 950;
}

.user-topbar-search {
    width: min(330px, 28vw);
    height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 14px;
    background: var(--surface);
}

.user-topbar-search-icon {
    width: 17px;
    height: 17px;
    color: var(--muted);
}

.user-topbar-search-icon svg {
    width: 17px;
    height: 17px;
}

.user-topbar-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
}

.user-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-topbar-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(20, 145, 229, 0.18);
    border-radius: 13px;
    background: rgba(20, 145, 229, 0.08);
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.user-topbar-action-icon {
    width: 16px;
    height: 16px;
}

.user-topbar-action-icon svg {
    width: 16px;
    height: 16px;
}

.user-topbar-icon-btn,
.user-profile-button {
    border-radius: 14px;
}

.user-topbar-theme-btn {
    margin: 0;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
}

.user-profile-button {
    min-height: 46px;
    padding: 6px 10px 6px 8px;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    margin-left: 0;
    padding-left: 8px;
    border-left: 0;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.user-profile-button:hover {
    border-color: rgba(20, 145, 229, 0.28);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.user-profile-button .topbar-user-meta strong,
.user-profile-button .topbar-user-meta span {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-avatar {
    overflow: hidden;
    flex-shrink: 0;
}

.topbar-user-avatar.has-image {
    background: var(--card);
    color: transparent;
}

.topbar-user-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

body.theme-dark .user-sidebar,
body.theme-dark .user-topbar {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, #0f172a, #0b1220);
}

body.theme-dark .user-sidebar-head {
    background: rgba(15, 23, 42, 0.92);
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

body.theme-dark .user-sidebar-card,
body.theme-dark .user-nav-link:hover,
body.theme-dark .user-nav-link.active,
body.theme-dark .user-topbar-action {
    border-color: rgba(56, 189, 248, 0.20);
    background: rgba(14, 165, 233, 0.12);
    color: #7dd3fc;
}

body.theme-dark .user-sidebar-card__meta {
    background: rgba(15, 23, 42, 0.58);
}

body.theme-dark .user-sidebar-card__meta:hover {
    background: rgba(30, 41, 59, 0.82);
}

body.theme-dark .user-sidebar-card__meta b,
body.theme-dark .user-sidebar-card__meta small {
    color: #dbe7f5;
}

body.theme-dark .user-sidebar-card__meta-icon,
body.theme-dark .user-sidebar-card__meta-icon-svg {
    color: #7dd3fc;
}

body.theme-dark .sidebar-badge--warning {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

body.theme-dark .user-nav-icon,
body.theme-dark .user-topbar-search {
    border-color: rgba(148, 163, 184, 0.18);
    background: #111827;
}

body.theme-dark .user-profile-button {
    border-color: rgba(148, 163, 184, 0.18);
    background: #111827;
    box-shadow: none;
}

body.theme-dark .user-profile-button:hover {
    border-color: rgba(56, 189, 248, 0.28);
    background: #0b1220;
}

body.theme-dark .user-subnav,
body.theme-dark .user-sidebar-foot {
    border-color: rgba(148, 163, 184, 0.16);
}

body.theme-dark .user-sidebar-foot {
    background: rgba(10, 17, 30, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.theme-dark .user-subnav-link:hover,
body.theme-dark .user-subnav-toggle:hover {
    background: rgba(14, 165, 233, 0.12);
    color: #7dd3fc;
}

@media (max-width: 1180px) {
    .user-topbar-search {
        display: none;
    }

    .user-topbar-actions {
        display: none;
    }
}

@media (max-width: 980px) {
    .user-sidebar {
        display: block;
        width: min(88vw, 340px);
        padding-top: max(10px, env(safe-area-inset-top, 0px));
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
        border-right-color: rgba(148, 163, 184, 0.16);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .user-sidebar-inner {
        display: block;
        min-height: auto;
        flex: none;
    }

    .user-sidebar-head {
        padding: 20px 22px 18px;
    }

    .user-brand.sidebar-logo--custom .sidebar-logo-media {
        max-width: 176px;
        height: 38px;
    }

    .user-sidebar-body {
        flex: none;
        overflow: visible;
        padding: 18px 14px 20px;
        scrollbar-width: auto;
    }

    .user-sidebar-foot {
        flex: 0 0 auto;
        padding-bottom: 14px;
    }

    .user-sidebar::-webkit-scrollbar {
        width: 0;
    }

    .user-sidebar.is-scrolling {
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
    }

    .user-sidebar.is-scrolling::-webkit-scrollbar {
        width: 4px;
    }

    .user-sidebar.is-scrolling::-webkit-scrollbar-track {
        background: transparent;
    }

    .user-sidebar.is-scrolling::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(100, 116, 139, 0.42);
    }

    .user-topbar {
        padding: 10px 14px;
    }
}

@media (max-width: 640px) {
    .user-sidebar-head {
        padding: 18px 18px 16px;
    }

    .user-brand.sidebar-logo--custom .sidebar-logo-media {
        max-width: 164px;
        height: 34px;
    }

    .user-topbar--desktop {
        display: none;
    }

    .user-topbar-mobile {
        display: grid;
        grid-template-columns: 42px 1fr;
        align-items: center;
        min-height: 68px;
        padding: 10px 12px;
        column-gap: 12px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        background: color-mix(in srgb, var(--card) 88%, transparent);
        backdrop-filter: blur(18px);
    }

    .user-topbar-mobile__actions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        justify-content: end;
        align-items: center;
        gap: 8px;
    }

    .user-topbar-mobile__theme-form,
    .user-topbar-mobile .topbar-dropdown {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }

    .user-topbar-mobile .user-profile-button,
    .user-topbar-mobile .user-topbar-icon-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .user-topbar-mobile .user-profile-button {
        padding: 6px;
    }

    .app-main-content {
        padding: 18px 16px 24px;
    }

    .user-topbar {
        display: none;
    }

    .user-profile-button .topbar-user-meta {
        display: none;
    }
}

.home-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(20, 145, 229, 0.16), transparent 24%),
        radial-gradient(circle at 15% 15%, rgba(22, 196, 127, 0.08), transparent 24%),
        var(--bg);
    overflow: clip;
}

.guest-topbar {
    gap: 18px;
}

.guest-topbar__brand,
.guest-topbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guest-topbar__logo {
    flex-shrink: 0;
}

.guest-topbar__logo.sidebar-logo--custom .sidebar-logo-media,
.guest-sidebar__logo.sidebar-logo--custom .sidebar-logo-media {
    max-width: 200px;
    height: 50px;
}

.guest-topbar__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.guest-topbar__link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.guest-topbar__link:hover,
.guest-topbar__link.is-active {
    color: var(--text);
    background: rgba(20, 145, 229, 0.08);
}

.guest-topbar__btn {
    min-height: 40px;
    border-radius: 12px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}

.guest-topbar__btn-icon,
.guest-topbar__btn-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.guest-topbar__btn--ghost {
    border-color: var(--border);
}

.guest-mobile-menu-btn {
    display: none;
}

.guest-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(320px, calc(100vw - 44px));
    height: 100vh;
    z-index: 75;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: var(--card);
    border-right: 1px solid var(--border);
    transform: translateX(-104%);
    transition: transform .24s ease;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
}

.guest-sidebar.is-open {
    transform: translateX(0);
}

.guest-sidebar__head,
.guest-sidebar__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.guest-sidebar__logo {
    min-width: 0;
}

.guest-sidebar__close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guest-sidebar__body {
    display: grid;
    gap: 8px;
    padding-top: 8px;
}

.guest-sidebar__link,
.guest-sidebar__theme {
    min-height: 48px;
    padding: 0 16px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(20, 145, 229, 0.04);
}

.guest-sidebar__link-icon,
.guest-sidebar__link-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.auth-page--user .auth-showcase {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.02)),
        var(--card);
}

.auth-page--admin .auth-showcase {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02)),
        var(--card);
}

.auth-badge--admin {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.18);
    color: #c97700;
}

body.theme-dark .auth-badge--admin {
    color: #ffd27d;
}

.auth-card--refined {
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

.auth-page--centered {
    position: relative;
    overflow: hidden;
}

.auth-screen--centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px 48px;
}

.auth-card--centered {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

body.theme-dark .auth-card--centered {
    background: rgba(15, 23, 42, 0.74);
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow:
        0 20px 60px rgba(2, 6, 23, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.auth-card-header--centered {
    text-align: center;
}

.auth-mobile-topbar {
    display: none;
}

.auth-floating-bar {
    position: absolute;
    top: 24px;
    left: 50%;
    right: auto;
    width: min(1320px, calc(100% - 48px));
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
}

.auth-floating-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.auth-floating-actions > * {
    align-self: center;
}

.auth-floating-actions > .topbar-dropdown,
.auth-floating-actions > .action-inline-form {
    display: flex;
    align-items: center;
    margin: 0;
}

.auth-floating-brand {
    min-width: 0;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05);
}

.auth-floating-brand.sidebar-logo--custom {
    width: auto;
    max-width: min(100%, 240px);
}

.auth-floating-brand.sidebar-logo--custom .sidebar-logo-media {
    max-width: 210px;
    height: 52px;
}

body.theme-dark .auth-floating-brand {
    background: rgba(15, 23, 42, 0.62);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 12px 36px rgba(2, 6, 23, 0.20);
}

.auth-lang-btn,
.auth-theme-btn {
    min-width: 72px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    gap: 6px;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

body.theme-dark .auth-lang-btn,
body.theme-dark .auth-theme-btn {
    background: rgba(15, 23, 42, 0.64);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.18);
}

.auth-theme-btn {
    min-width: 42px;
    width: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.auth-theme-btn .icon,
.auth-theme-btn svg {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
    line-height: 1;
}

.auth-link-grid--single {
    grid-template-columns: 1fr;
}

.otp-input-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.otp-digit-input {
    width: 100%;
    min-height: 58px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.54);
    color: var(--text);
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}

.otp-digit-input:focus {
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
    transform: translateY(-1px);
}

body.theme-dark .otp-digit-input {
    background: rgba(15, 23, 42, 0.58);
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.auth-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-particle {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.34) 0%, rgba(37, 99, 235, 0.08) 58%, rgba(37, 99, 235, 0) 100%);
    animation: authFloat 16s linear infinite;
}

.auth-particles--admin .auth-particle {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.34) 0%, rgba(245, 158, 11, 0.08) 58%, rgba(245, 158, 11, 0) 100%);
}

.auth-particle--1 { width: 180px; height: 180px; left: 6%; top: 14%; animation-duration: 18s; }
.auth-particle--2 { width: 22px; height: 22px; left: 18%; top: 78%; animation-duration: 11s; animation-delay: -2s; }
.auth-particle--3 { width: 120px; height: 120px; left: 82%; top: 18%; animation-duration: 20s; animation-delay: -4s; }
.auth-particle--4 { width: 30px; height: 30px; left: 72%; top: 72%; animation-duration: 12s; animation-delay: -1s; }
.auth-particle--5 { width: 14px; height: 14px; left: 28%; top: 30%; animation-duration: 10s; animation-delay: -6s; }
.auth-particle--6 { width: 240px; height: 240px; left: 64%; top: 58%; animation-duration: 24s; animation-delay: -3s; }
.auth-particle--7 { width: 18px; height: 18px; left: 48%; top: 86%; animation-duration: 14s; animation-delay: -7s; }
.auth-particle--8 { width: 90px; height: 90px; left: 42%; top: 8%; animation-duration: 17s; animation-delay: -5s; }

@keyframes authFloat {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.28; }
    25% { transform: translate3d(18px, -26px, 0) scale(1.06); opacity: 0.4; }
    50% { transform: translate3d(-16px, -44px, 0) scale(0.94); opacity: 0.22; }
    75% { transform: translate3d(14px, -18px, 0) scale(1.02); opacity: 0.36; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.28; }
}

.auth-card-kicker {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.auth-submit-btn,
.auth-secondary-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.auth-submit-btn__icon,
.auth-submit-btn__icon svg,
.auth-secondary-btn__icon,
.auth-secondary-btn__icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.auth-header-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 14px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.auth-header-link__icon,
.auth-header-link__icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.auth-screen--register {
    position: relative;
    z-index: 2;
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    grid-template-columns: minmax(0, 680px) minmax(460px, 520px);
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 56px;
    align-items: center;
}

.auth-showcase--register {
    min-height: 100%;
}

.auth-showcase-grid--register {
    margin-bottom: 24px;
}

.auth-mini-card--stat p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.auth-mini-card--stat .auth-mini-value {
    font-size: 22px;
    line-height: 1.2;
}

.auth-benefits {
    display: grid;
    gap: 14px;
}

.auth-benefit {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(8px);
}

.auth-benefit__icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: rgba(37, 99, 235, 0.10);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.auth-benefit__icon .icon,
.auth-benefit__icon svg {
    width: 18px;
    height: 18px;
}

.auth-benefit strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 14px;
}

.auth-benefit span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.auth-card--register {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow:
        0 26px 70px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

.auth-card-header--register h2 {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -0.8px;
}

.auth-form--register {
    display: grid;
    gap: 4px;
}

.auth-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    align-items: start;
}

.auth-form-group--wide {
    grid-column: 1 / -1;
}

.auth-form-group {
    display: grid;
    align-content: start;
}

.auth-form-group .form-label {
    min-height: 40px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end;
    color: var(--text);
    line-height: 1.35;
}

.auth-card--register .form-input {
    min-height: 56px;
    border-color: rgba(148, 163, 184, 0.24);
    background: #f7fafc;
    color: #0f172a;
}

.auth-card--register .form-input::placeholder {
    color: #64748b;
}

.auth-card--register select.form-input {
    appearance: auto;
}

.auth-input-shell {
    position: relative;
}

.auth-input-shell__field {
    padding-right: 86px;
}

.auth-input-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 40px;
    height: 36px;
    border: 0;
    border-radius: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 145, 229, 0.10);
    color: var(--primary);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.auth-input-toggle:hover {
    background: rgba(20, 145, 229, 0.16);
}

.auth-input-toggle.is-active {
    background: rgba(20, 145, 229, 0.18);
}

.auth-input-toggle__icon,
.auth-input-toggle__icon .icon,
.auth-input-toggle__icon svg {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-input-toggle__icon--hide {
    display: none;
}

.auth-input-toggle.is-active .auth-input-toggle__icon--show {
    display: none;
}

.auth-input-toggle.is-active .auth-input-toggle__icon--hide {
    display: inline-flex;
}

.auth-actions--register {
    margin-top: 12px;
}

.auth-submit-btn--wide {
    width: 100%;
    justify-content: center;
}

.auth-footer--register {
    margin-top: 24px;
}

body.theme-dark .auth-header-link {
    background: rgba(15, 23, 42, 0.64);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.18);
}

body.theme-dark .auth-card--register {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow:
        0 26px 70px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.theme-dark .auth-form-group .form-label,
body.theme-dark .auth-card-header--register h2,
body.theme-dark .auth-card-header--register p,
body.theme-dark .auth-footer--register {
    color: #dbe7f5;
}

body.theme-dark .auth-card--register .form-input {
    background: #162033;
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.16);
}

body.theme-dark .auth-card--register .form-input::placeholder {
    color: #8ea0b7;
}

body.theme-dark .auth-input-toggle {
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
}

body.theme-dark .auth-input-toggle:hover {
    background: rgba(59, 130, 246, 0.22);
}

body.theme-dark .auth-input-toggle.is-active {
    background: rgba(59, 130, 246, 0.28);
}

body.theme-dark .auth-benefit {
    background: rgba(15, 23, 42, 0.48);
    border-color: rgba(148, 163, 184, 0.12);
}

body.theme-dark .auth-benefit__icon {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.16);
}

@media (max-width: 640px) {
    .auth-mobile-topbar {
        position: relative;
        z-index: 4;
        width: calc(100% - 20px);
        margin: 8px auto 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .auth-mobile-topbar__brand,
    .auth-mobile-topbar__actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .auth-mobile-topbar__brand {
        min-width: 0;
        flex: 1 1 auto;
        min-height: 46px;
        padding: 8px 12px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 100%);
        backdrop-filter: blur(16px);
        box-shadow:
            0 14px 34px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.48);
        overflow: hidden;
    }

    body.theme-dark .auth-mobile-topbar__brand {
        background:
            linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.62) 100%);
        border-color: rgba(148, 163, 184, 0.12);
        box-shadow:
            0 14px 34px rgba(2, 6, 23, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .auth-mobile-topbar__brand.sidebar-logo--custom {
        width: auto;
    }

    .auth-mobile-topbar__brand.sidebar-logo--custom .sidebar-logo-media {
        width: auto;
        max-width: min(100%, 134px);
        height: 30px;
    }

    .auth-mobile-topbar__brand .sidebar-logo-mark {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        flex-shrink: 0;
        box-shadow: 0 8px 18px rgba(20, 145, 229, 0.18);
    }

    .auth-mobile-topbar__brand .sidebar-logo-text {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
        font-size: 14px;
        line-height: 1.05;
    }

    .auth-mobile-topbar__brand .sidebar-logo-text strong,
    .auth-mobile-topbar__brand .sidebar-logo-text small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .auth-mobile-topbar__actions {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 4px;
        border-radius: 18px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: rgba(255, 255, 255, 0.68);
        backdrop-filter: blur(16px);
        box-shadow:
            0 14px 34px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.48);
    }

    body.theme-dark .auth-mobile-topbar__actions {
        border-color: rgba(148, 163, 184, 0.12);
        background: rgba(15, 23, 42, 0.7);
        box-shadow:
            0 14px 34px rgba(2, 6, 23, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .auth-mobile-topbar__actions > .topbar-dropdown {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
    }

    .auth-mobile-topbar__icon-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: 14px;
        align-self: center;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        color: var(--text, #0f172a);
    }

    body.theme-dark .auth-mobile-topbar__icon-btn {
        color: #dbe7f5;
    }

    .auth-mobile-topbar__icon-btn:hover,
    .auth-mobile-topbar__icon-btn:focus-visible {
        background: rgba(15, 23, 42, 0.06);
        border-color: transparent;
    }

    body.theme-dark .auth-mobile-topbar__icon-btn:hover,
    body.theme-dark .auth-mobile-topbar__icon-btn:focus-visible {
        background: rgba(148, 163, 184, 0.12);
    }

    .auth-mobile-topbar__actions .topbar-dropdown-toggle {
        width: auto;
        min-width: 64px;
        padding: 0 10px;
        gap: 6px;
    }

    .auth-mobile-topbar__actions .topbar-mini-text {
        display: inline-block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
        color: var(--text-soft, #64748b);
    }

    body.theme-dark .auth-mobile-topbar__actions .topbar-mini-text {
        color: #9fb0c7;
    }

    .auth-mobile-topbar .topbar-dropdown-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: auto;
        right: 0;
        width: min(240px, calc(100vw - 28px));
        min-width: 0;
        max-width: calc(100vw - 28px);
        max-height: min(60vh, 420px);
        overflow-y: auto;
        border-radius: 18px;
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
        transform: none;
        z-index: 120;
    }

    .auth-mobile-topbar #authLanguageDropdownMobile {
        padding: 14px;
    }

    .auth-mobile-topbar #authLanguageDropdownMobile .action-inline-form {
        display: block;
        width: 100%;
        margin: 0;
    }

    .auth-mobile-topbar #authLanguageDropdownMobile .topbar-dropdown-item {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 8px;
        border-radius: 12px;
    }

    .auth-screen--centered {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 10px 16px 28px;
    }

    .auth-card--centered {
        align-self: stretch;
        margin-top: 12px;
    }

    .auth-screen--register {
        grid-template-columns: 1fr;
        padding-top: 14px;
        padding-left: 16px;
        padding-right: 16px;
        gap: 18px;
        width: 100%;
        box-sizing: border-box;
    }

    .auth-showcase--register,
    .auth-card--register {
        max-width: 100%;
        justify-self: stretch;
    }

    .auth-card--register {
        order: 1;
    }

    .auth-showcase--register {
        order: 2;
    }

    .auth-floating-bar {
        display: none;
    }

    .auth-lang-btn,
    .auth-theme-btn {
        min-width: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 12px;
    }

    .auth-theme-btn {
        min-width: 38px;
        width: 38px;
        padding: 0;
    }

    .auth-lang-btn .topbar-mini-text {
        display: none;
    }

    .auth-header-link {
        display: none;
    }

    .auth-card-kicker {
        font-size: 11px;
    }

    .auth-submit-btn,
    .auth-secondary-btn {
        min-height: 44px;
        gap: 6px;
    }

    .otp-input-grid {
        gap: 8px;
    }

    .otp-digit-input {
        min-height: 50px;
        border-radius: 14px;
        font-size: 20px;
    }

    .auth-submit-btn__icon,
    .auth-submit-btn__icon svg,
    .auth-secondary-btn__icon,
    .auth-secondary-btn__icon svg {
        width: 14px;
        height: 14px;
    }

    .auth-form-grid,
    .auth-showcase-grid--register {
        grid-template-columns: 1fr;
    }

    .auth-showcase,
    .auth-card {
        padding: 22px 18px;
    }

    .auth-showcase h1 {
        font-size: clamp(30px, 8.2vw, 36px);
        line-height: 1.1;
    }

    .auth-card-header--register h2 {
        font-size: clamp(28px, 8vw, 34px);
        line-height: 1.08;
    }

    .auth-form-group .form-label {
        min-height: 0;
    }

    .auth-benefit {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 14px;
    }

    .auth-benefit__icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }
}

.guest-sidebar__theme {
    width: 100%;
    justify-content: center;
}

.guest-sidebar__theme-icon,
.guest-sidebar__theme-icon svg {
    width: 18px;
    height: 18px;
}

.guest-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.guest-sidebar-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.home-page {
    --guest-home-bg: linear-gradient(180deg, rgba(241, 247, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 24%, rgba(244, 248, 252, 0.98) 100%);
    --guest-home-surface: rgba(255, 255, 255, 0.82);
    --guest-home-surface-strong: rgba(255, 255, 255, 0.9);
    --guest-home-border: rgba(148, 163, 184, 0.18);
    --guest-home-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    --guest-home-muted-surface: rgba(20, 145, 229, 0.08);
    --guest-home-hero-bg:
        radial-gradient(circle at 14% 18%, rgba(88, 170, 255, 0.18), transparent 30%),
        radial-gradient(circle at 82% 14%, rgba(20, 145, 229, 0.18), transparent 24%),
        linear-gradient(135deg, #0a2248 0%, #0d3b7a 42%, var(--primary) 100%);
    --guest-home-hero-panel:
        radial-gradient(circle at 20% 18%, rgba(147, 197, 253, 0.22), transparent 28%),
        linear-gradient(180deg, rgba(7, 22, 45, 0.18), rgba(7, 22, 45, 0.06));
    background: var(--guest-home-bg);
}

body.theme-dark .home-page {
    --guest-home-bg: linear-gradient(180deg, #07111f 0%, #0b1527 28%, #0b1220 100%);
    --guest-home-surface: rgba(12, 23, 42, 0.82);
    --guest-home-surface-strong: rgba(10, 19, 35, 0.92);
    --guest-home-border: rgba(148, 163, 184, 0.14);
    --guest-home-shadow: 0 18px 40px rgba(2, 6, 23, 0.34);
    --guest-home-muted-surface: rgba(20, 145, 229, 0.16);
    --guest-home-hero-bg:
        radial-gradient(circle at 14% 18%, rgba(88, 170, 255, 0.12), transparent 30%),
        radial-gradient(circle at 82% 14%, rgba(20, 145, 229, 0.16), transparent 24%),
        linear-gradient(135deg, #07111f 0%, #0a1c37 42%, #103b72 100%);
    --guest-home-hero-panel:
        radial-gradient(circle at 18% 18%, rgba(96, 165, 250, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(7, 15, 29, 0.42), rgba(7, 15, 29, 0.16));
}

.guest-hero {
    width: 100%;
    margin: 0 0 36px;
    min-height: calc(100vh - 92px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: center;
    gap: 42px;
    padding: 58px clamp(20px, 4vw, 56px) 72px;
    background: var(--guest-home-hero-bg);
    border-radius: 0 0 34px 34px;
    overflow: hidden;
    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.12);
}

.guest-hero__copy {
    position: relative;
    display: grid;
    align-content: start;
}

.guest-hero__copy h1 {
    max-width: 13ch;
    margin: 14px 0 20px;
    font-size: clamp(40px, 5vw, 62px);
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: #f8fbff;
}

.guest-hero__copy p {
    max-width: 62ch;
    color: rgba(235, 243, 255, 0.88);
    font-size: 18px;
    line-height: 1.82;
}

.guest-hero__eyebrow {
    color: rgba(191, 219, 254, 0.95);
}

.guest-hero__eyebrow,
.guest-preview-card span,
.guest-preview-tile span {
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.guest-hero__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.guest-hero .btn-primary {
    box-shadow: 0 18px 34px rgba(12, 74, 160, 0.24);
}

.guest-hero .btn-outline {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f8fbff;
}

.guest-hero .btn-outline:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
}

.guest-hero__signal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.guest-hero__signal-row span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f8fbff;
    font-size: 12px;
    font-weight: 700;
}

.guest-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.guest-stat-card {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(7, 21, 40, 0.42);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

.guest-stat-card strong {
    display: block;
    color: #f8fbff;
    font-size: 28px;
    line-height: 1.1;
}

.guest-stat-card span {
    display: block;
    margin-top: 6px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 13px;
}

.add-money-modal-dialog {
    width: min(100%, 560px);
    max-width: min(100%, 560px);
    max-height: min(calc(100vh - 24px), 840px);
}

.add-money-modal-dialog .nova-modal-body {
    padding: 18px 20px 20px;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.42) transparent;
}

.add-money-modal-dialog .nova-modal-body::-webkit-scrollbar {
    width: 6px;
}

.add-money-modal-dialog .nova-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.add-money-modal-dialog .nova-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.42), rgba(14, 165, 233, 0.26));
    border-radius: 999px;
}

.add-money-modal-dialog .nova-modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.58), rgba(14, 165, 233, 0.34));
}

.add-money-modal-dialog .form-block {
    display: grid;
    gap: 10px;
}

.add-money-modal-dialog .money-input,
.add-money-modal-dialog select.money-input {
    min-height: 54px;
}

.add-money-modal-dialog .money-input-wrap .money-input-symbol {
    left: 14px;
}

.add-money-modal-dialog .money-input-wrap .money-input {
    padding-left: 38px;
}

.guest-hero__panel {
    display: grid;
    gap: 18px;
}

.guest-hero-visual {
    position: relative;
    min-height: 640px;
    display: grid;
    align-items: start;
    padding: 6px 0 0;
}

.guest-hero-visual__backdrop {
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.guest-hero-stage {
    position: absolute;
    inset: 0;
    transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.guest-hero-stage--cards {
    z-index: 2;
}

.guest-hero-stage--gallery {
    z-index: 1;
    display: grid;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px) scale(.965);
}

.guest-hero-visual.is-gallery-active .guest-hero-stage--cards {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(.96);
}

.guest-hero-visual.is-gallery-active .guest-hero-stage--gallery {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.guest-hero-stack {
    position: relative;
    z-index: 2;
    margin-left: auto;
    width: min(100%, 520px);
    min-height: 540px;
}

.guest-hero-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 640px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 36%),
        linear-gradient(155deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.02));
}

.guest-hero-visual-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 34px;
    background:
        radial-gradient(circle at top left, rgba(20, 145, 229, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    opacity: 0;
    transform: translateY(28px) scale(.955);
    transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.guest-hero-visual-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 18%, rgba(148, 197, 255, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(7, 18, 40, 0.02), rgba(7, 18, 40, 0.18) 78%, rgba(7, 18, 40, 0.3));
    opacity: .72;
    transition: opacity 1.1s ease;
    pointer-events: none;
}

.guest-hero-visual-slide.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.guest-hero-visual-slide.is-active::before {
    opacity: 1;
}

.guest-hero-visual-slide__image {
    position: absolute;
    inset: 24px 24px 132px;
    display: block;
    width: calc(100% - 48px);
    height: calc(100% - 156px);
    object-fit: contain;
    object-position: center center;
    opacity: 0;
    transform: translateY(18px) scale(.94);
    transition: opacity 1.25s ease, transform 1.45s cubic-bezier(.22, 1, .36, 1);
}

.guest-hero-visual-slide.is-active .guest-hero-visual-slide__image {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.guest-hero-visual-slide__overlay {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    padding: 18px 20px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(7, 18, 40, 0.5), rgba(7, 18, 40, 0.72));
    backdrop-filter: blur(18px);
    display: grid;
    gap: 8px;
    color: #f8fafc;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .9s ease .16s, transform .9s cubic-bezier(.22, 1, .36, 1) .16s;
}

.guest-hero-visual-slide.is-active .guest-hero-visual-slide__overlay {
    opacity: 1;
    transform: translateY(0);
}

.guest-hero-visual-slide__overlay span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.92);
}

.guest-hero-visual-slide__overlay strong {
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.guest-hero-visual-slide__overlay small {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.92);
}

.guest-hero-visual-dots {
    position: absolute;
    right: 18px;
    bottom: -26px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(14px);
}

.guest-hero-visual-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(148, 163, 184, 0.56);
    cursor: pointer;
    transition: width .28s ease, transform .28s ease, background .28s ease, box-shadow .28s ease;
}

.guest-hero-visual-dot.is-active {
    background: #1491e5;
    width: 28px;
    transform: scale(1.02);
    box-shadow: 0 0 0 4px rgba(20, 145, 229, 0.12);
}

.guest-hero-card {
    position: absolute;
    width: min(100%, 390px);
    aspect-ratio: 82 / 52;
    filter: drop-shadow(0 28px 50px rgba(7, 18, 40, 0.28));
    z-index: 4;
    will-change: transform, opacity;
}

.guest-hero-card--primary {
    top: 12px;
    right: 8px;
    transform: rotate(-5deg);
    animation: guestHeroCardPrimaryIn 1.28s cubic-bezier(.22, 1, .36, 1) .12s both;
}

.guest-hero-card--secondary {
    right: 128px;
    bottom: 112px;
    transform: rotate(7deg);
    z-index: 3;
    animation: guestHeroCardSecondaryIn 1.34s cubic-bezier(.22, 1, .36, 1) .28s both;
}

.guest-hero-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.guest-hero-card__brand {
    position: absolute;
    left: 18%;
    z-index: 2;
    max-width: 36%;
    overflow: hidden;
    color: rgba(241, 245, 249, 0.96);
    font-size: clamp(16px, 1.28vw, 19px);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

.guest-hero-card__brand--bottom {
    left: 22.5%;
    bottom: 18.9%;
    max-width: 38%;
}

.guest-hero-card__brand--bottom.guest-hero-card__brand--light {
    color: rgba(244, 251, 255, 0.98);
    text-shadow: 0 1px 2px rgba(8, 60, 116, 0.16);
}

.guest-hero-coins {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.guest-hero-coin {
    position: absolute;
    min-width: 74px;
    min-height: 74px;
    padding: 9px 12px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(10px);
    transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
    opacity: 0.72;
    animation: guestHeroCoinFloat 5.8s ease-in-out infinite;
}

.guest-hero-coin.is-active,
.guest-hero-coin:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 24px 42px rgba(15, 23, 42, 0.18);
    opacity: 1;
}

.guest-hero-coin__logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.guest-hero-coin--btc {
    top: -6px;
    right: 2px;
    background: rgba(255, 184, 77, 0.92);
    color: #5b3300;
    animation-delay: 0s;
}

.guest-hero-coin--eth {
    top: 88px;
    left: 18px;
    background: rgba(129, 140, 248, 0.9);
    color: #eef2ff;
    animation-delay: .9s;
}

.guest-hero-coin--xrp {
    top: -2px;
    left: 52px;
    min-width: 58px;
    min-height: 58px;
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    animation-delay: 1.4s;
}

.guest-hero-coin--usdt {
    left: 74px;
    bottom: 18px;
    background: rgba(16, 185, 129, 0.92);
    color: #032c1f;
    animation-delay: 1.8s;
}

.guest-hero-coin--sol {
    right: -14px;
    bottom: 152px;
    background: rgba(39, 39, 42, 0.9);
    color: #f8fafc;
    animation-delay: 2.4s;
}

.guest-hero-market-panel {
    position: absolute;
    left: 30px;
    right: 18px;
    bottom: -34px;
    z-index: 2;
    padding: 18px;
    border-radius: 24px;
    background: rgba(7, 20, 38, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    display: grid;
    gap: 14px;
    will-change: transform, opacity;
    animation: guestHeroMarketPanelIn 1.42s cubic-bezier(.22, 1, .36, 1) .46s both;
}

@keyframes guestHeroCoinFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes guestHeroCardPrimaryIn {
    0% {
        opacity: 0;
        transform: translate3d(40px, -18px, 0) rotate(-9deg) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
    }
}

@keyframes guestHeroCardSecondaryIn {
    0% {
        opacity: 0;
        transform: translate3d(-42px, 40px, 0) rotate(11deg) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(7deg) scale(1);
    }
}

@keyframes guestHeroMarketPanelIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 52px, 0) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .guest-hero-stage,
    .guest-hero-visual-slide,
    .guest-hero-card--primary,
    .guest-hero-card--secondary,
    .guest-hero-market-panel {
        transition: none;
        animation: none;
    }
}

.guest-hero-market-panel__head,
.guest-hero-market-slide,
.guest-hero-market-slide__asset,
.guest-hero-market-slide__meta {
    display: flex;
    align-items: center;
}

.guest-hero-market-panel__head,
.guest-hero-market-slide {
    justify-content: space-between;
    gap: 16px;
}

.guest-hero-market-panel__head span,
.guest-hero-market-slide__asset small {
    color: rgba(233, 247, 240, 0.68);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guest-hero-market-panel__head strong,
.guest-hero-market-slide__asset strong,
.guest-hero-market-slide__meta strong {
    color: #f8fff8;
}

.guest-hero-market-panel__head strong {
    display: block;
    margin-top: 6px;
    font-size: 18px;
}

.guest-hero-market-slide__asset {
    gap: 12px;
    min-width: 0;
}

.guest-hero-market-slide__logo {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px;
}

.guest-hero-market-slide__asset strong {
    display: block;
    margin-top: 5px;
    font-size: 20px;
    line-height: 1.1;
}

.guest-hero-market-slide__meta {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.guest-hero-market-slide__meta strong {
    font-size: 26px;
    line-height: 1;
}

.guest-hero-market-slide__meta span {
    font-size: 14px;
    font-weight: 800;
}

.guest-hero-market-slide__meta span.is-up {
    color: #86efac;
}

.guest-hero-market-slide__meta span.is-down {
    color: #fca5a5;
}

.guest-hero-market-chart {
    padding-top: 4px;
}

.guest-hero-market-chart canvas {
    width: 100%;
    height: auto;
    display: block;
}

.guest-hero-visual__photo-shell {
    position: absolute;
    right: 28px;
    top: 0;
    z-index: 1;
    width: min(280px, 42%);
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.14);
}

.guest-hero-visual__photo {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: cover;
}

.guest-hero-screen {
    position: relative;
    z-index: 2;
    margin-left: auto;
    width: min(100%, 540px);
    padding: 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.14);
    display: grid;
    gap: 20px;
}

.guest-hero-screen__top,
.guest-hero-screen__metrics,
.guest-hero-screen__bottom {
    display: grid;
}

.guest-hero-screen__top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.guest-hero-screen__top span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
}

.guest-hero-screen__top strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.guest-hero-screen__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.guest-hero-screen__metric {
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(243, 248, 255, 0.98), rgba(255, 255, 255, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.guest-hero-screen__metric small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
}

.guest-hero-screen__metric strong {
    display: block;
    margin-top: 8px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.08;
}

.guest-hero-screen__chart {
    padding: 8px 6px 0;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(236, 245, 255, 0.84));
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.guest-hero-screen__chart canvas {
    width: 100%;
    height: auto;
    display: block;
}

.guest-hero-screen__preview-image {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 18px;
}

.guest-hero-screen__bottom {
    grid-template-columns: 1fr;
}

.guest-hero-screen__bottom {
    grid-template-columns: minmax(0, 1.15fr) minmax(190px, 0.85fr);
    gap: 16px;
    align-items: stretch;
}

.guest-hero-mini-panels {
    display: grid;
    gap: 16px;
}

.guest-hero-mini-panel {
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(238, 246, 255, 0.86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    display: grid;
    gap: 12px;
}

.guest-hero-mini-panel span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guest-hero-mini-panel strong {
    color: var(--text);
    font-size: 16px;
    line-height: 1.25;
}

.guest-hero-bars {
    height: 74px;
    display: flex;
    align-items: end;
    gap: 8px;
}

.guest-hero-bars i {
    display: block;
    flex: 1;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, rgba(20, 145, 229, 0.24), rgba(20, 145, 229, 0.88));
    transform-origin: bottom;
    animation: guestHeroBars 2.6s ease-in-out infinite;
}

.guest-hero-bars i:nth-child(1) { height: 34%; animation-delay: 0s; }
.guest-hero-bars i:nth-child(2) { height: 56%; animation-delay: .12s; }
.guest-hero-bars i:nth-child(3) { height: 46%; animation-delay: .24s; }
.guest-hero-bars i:nth-child(4) { height: 78%; animation-delay: .36s; }
.guest-hero-bars i:nth-child(5) { height: 64%; animation-delay: .48s; }
.guest-hero-bars i:nth-child(6) { height: 92%; animation-delay: .6s; }

.guest-crypto-float {
    position: absolute;
    z-index: 3;
    min-width: 72px;
    min-height: 72px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.06em;
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.14);
    animation: guestFloatCoin 6s ease-in-out infinite;
    backdrop-filter: blur(10px);
}

.guest-crypto-float--btc {
    top: 10px;
    right: 62px;
    background: rgba(255, 247, 237, 0.94);
    color: #ea580c;
}

.guest-crypto-float--eth {
    left: 10px;
    top: 180px;
    background: rgba(239, 246, 255, 0.94);
    color: #2563eb;
    animation-delay: .9s;
}

.guest-crypto-float--sol {
    left: 48px;
    bottom: 150px;
    background: rgba(236, 253, 245, 0.94);
    color: #059669;
    animation-delay: 1.8s;
}

.guest-hero-marquee {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    padding: 14px 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.guest-hero-marquee__track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    animation: guestPartnerMarquee 28s linear infinite;
}

.guest-hero-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.guest-hero-logo--image {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.92);
}

.guest-hero-logo--image img {
    display: block;
    width: auto;
    max-width: 132px;
    height: 28px;
    object-fit: contain;
}

.guest-hero-logo--bank {
    color: #0f3d91;
}

.guest-hero-logo--wallet {
    color: #047857;
}

.guest-hero-logo--card {
    color: #c2410c;
}

.guest-command-card,
.guest-product-card,
.guest-market__main,
.guest-market__side,
.guest-finance-card,
.guest-info-card {
    border: 1px solid var(--guest-home-border);
    border-radius: 24px;
    background: var(--guest-home-surface);
    backdrop-filter: blur(14px);
    box-shadow: var(--guest-home-shadow);
}

.guest-command-card {
    padding: 28px;
    display: grid;
    gap: 20px;
}

.guest-command-card--showcase {
    position: relative;
    overflow: hidden;
}

.guest-command-card--showcase::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -110px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0));
    pointer-events: none;
}

.guest-command-card__head,
.guest-command-card__footer,
.guest-command-card__pulse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.guest-command-card__head span,
.guest-command-card__metrics small,
.guest-section-head span,
.guest-market-row__asset span,
.guest-card-stack__legend span,
.guest-invest-pack small,
.guest-command-card__pulse small {
    color: var(--muted);
}

.guest-command-card__head strong {
    display: block;
    color: var(--text);
    font-size: 26px;
    margin-top: 4px;
}

.guest-command-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(20, 145, 229, 0.10);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

.guest-command-card__badge-icon,
.guest-command-card__link-icon {
    width: 16px;
    height: 16px;
}

.guest-command-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.guest-command-card__metrics strong {
    display: block;
    margin-top: 4px;
    font-size: 22px;
    color: var(--text);
}

.guest-command-card__chart {
    padding-top: 8px;
}

.guest-command-card__chart canvas {
    width: 100%;
    height: auto;
    display: block;
}

.guest-card-cluster {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
    gap: 20px;
    align-items: stretch;
}

.guest-card-design {
    min-height: 220px;
    padding: 20px;
    border-radius: 24px;
    color: #fff;
    display: grid;
    align-content: space-between;
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.16);
}

.guest-card-design--midnight {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 26%),
        linear-gradient(135deg, #031026 0%, #0b2f67 46%, #1491e5 100%);
}

.guest-card-design__top,
.guest-card-design__bottom,
.guest-card-design__brands {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.guest-card-design__top > span,
.guest-card-design__bottom small {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.guest-card-design strong {
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1;
    letter-spacing: 0.18em;
}

.guest-card-design__brand {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 11px;
    font-weight: 800;
}

.guest-card-design__brand--visa {
    color: #dbeafe;
}

.guest-card-design__brand--mastercard {
    background: linear-gradient(90deg, rgba(234, 88, 12, 0.94), rgba(249, 115, 22, 0.94));
}

.guest-card-design__brand--virtual {
    background: rgba(22, 196, 127, 0.18);
    color: #dcfce7;
}

.guest-wallet-orbit {
    position: relative;
    min-height: 162px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(239, 246, 255, 0.92));
    overflow: hidden;
}

.guest-wallet-orbit__core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b2f67, #1491e5);
    color: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: 0 18px 40px rgba(20, 145, 229, 0.26);
}

.guest-wallet-orbit__core strong {
    display: block;
    font-size: 14px;
    line-height: 1.2;
}

.guest-wallet-orbit__core-icon,
.guest-wallet-orbit__core-icon svg {
    width: 20px;
    height: 20px;
}

.guest-wallet-orbit__node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #0f172a;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.guest-wallet-orbit__node:nth-child(2) { top: 14px; left: 14px; }
.guest-wallet-orbit__node:nth-child(3) { top: 18px; right: 14px; }
.guest-wallet-orbit__node:nth-child(4) { left: 12px; bottom: 42px; }
.guest-wallet-orbit__node:nth-child(5) { right: 12px; bottom: 46px; }
.guest-wallet-orbit__node:nth-child(6) { left: 50%; bottom: 12px; transform: translateX(-50%); }

.guest-command-card__pulse {
    justify-content: flex-start;
}

.guest-command-card__pulse span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
    animation: guestPulse 1.8s infinite;
}

.guest-command-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 800;
}

.guest-ticker {
    width: min(1200px, calc(100% - 48px));
    margin: 18px auto 52px;
    overflow: hidden;
    border: 1px solid var(--guest-home-border);
    border-radius: 999px;
    background: var(--guest-home-surface);
    backdrop-filter: blur(14px);
    box-shadow: var(--guest-home-shadow);
    position: relative;
    z-index: 2;
}

.guest-ticker__track {
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    padding: 14px 16px;
    animation: guestTicker 30s linear infinite;
}

.guest-ticker:hover .guest-ticker__track {
    animation-play-state: paused;
}

.guest-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(235, 243, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.14);
    white-space: nowrap;
    min-height: 42px;
}

.guest-ticker__logo {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
}

.guest-ticker__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guest-ticker__item strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.guest-ticker__item span {
    color: var(--muted);
    font-size: 12px;
}

.guest-ticker__item small {
    font-size: 12px;
    font-weight: 800;
}

.guest-ticker__item.is-up small {
    color: #10b981;
}

.guest-ticker__item.is-down small {
    color: #ef4444;
}

.guest-partners,
.guest-showcase-band,
.guest-service-moments {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.guest-partners {
    padding: 0 0 30px;
}

.guest-section-head--wide h2 {
    max-width: 28ch;
}

.guest-partners__panel {
    padding: 22px;
    border: 1px solid var(--guest-home-border);
    border-radius: 24px;
    background: var(--guest-home-surface);
    box-shadow: var(--guest-home-shadow);
    backdrop-filter: blur(14px);
    display: grid;
    gap: 16px;
}

.guest-partners__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.guest-partners__head strong {
    color: var(--text);
    font-size: 18px;
}

.guest-partners__head small {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.guest-partners__panel--marquee {
    overflow: hidden;
    gap: 18px;
}

.guest-partners-marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.guest-partners-marquee__track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    animation: guestPartnerMarquee 34s linear infinite;
}

.guest-partners-marquee:hover .guest-partners-marquee__track {
    animation-play-state: paused;
}

.guest-partners-marquee__item {
    flex: 0 0 auto;
    min-width: 172px;
    height: 82px;
    padding: 16px 22px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.guest-partners-marquee__item--image img {
    display: block;
    width: auto;
    max-width: 152px;
    max-height: 36px;
    object-fit: contain;
}

.guest-partners-marquee__item--fallback {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.guest-partners-marquee__item--fallback.is-bank {
    color: #0f2f6b;
}

.guest-partners-marquee__item--fallback.is-wallet {
    color: #047857;
}

.guest-products,
.guest-market,
.guest-finance-grid,
.guest-info-grid {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.guest-products {
    padding-bottom: 52px;
}

.guest-section-head {
    display: grid;
    gap: 10px;
    margin-bottom: 28px;
}

.guest-section-head h2 {
    max-width: 22ch;
    color: var(--text);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.03em;
}

.guest-hero__eyebrow,
.guest-section-head span,
.guest-info-card span {
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.guest-products__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.guest-product-card {
    padding: 22px;
    display: grid;
    gap: 14px;
}

.guest-product-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 145, 229, 0.10);
    color: var(--primary);
}

.guest-product-card__icon-svg,
.guest-product-card__icon-svg svg {
    width: 20px;
    height: 20px;
}

.guest-product-card h3,
.guest-info-card h2,
.guest-finance-card h2 {
    color: var(--text);
    font-size: 24px;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.guest-product-card p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.guest-showcase-band {
    padding: 0 0 52px;
}

.guest-showcase-band__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.guest-showcase-band__card {
    padding: 20px;
    border-radius: 22px;
    background: var(--guest-home-surface-strong);
    border: 1px solid var(--guest-home-border);
    box-shadow: var(--guest-home-shadow);
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.guest-showcase-band__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 145, 229, 0.1);
    color: var(--primary);
}

.guest-showcase-band__icon-svg,
.guest-showcase-band__icon-svg svg {
    width: 22px;
    height: 22px;
}

.guest-showcase-band__card strong {
    color: var(--text);
    font-size: 18px;
}

.guest-showcase-band__card p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

.guest-market {
    padding-bottom: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 20px;
}

.guest-market__main,
.guest-market__side {
    padding: 24px;
}

.guest-home-feature-media {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border-radius: 28px;
    border: 1px solid var(--guest-home-border);
    box-shadow: var(--guest-home-shadow);
}

.guest-home-feature-media__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
}

.guest-home-feature-media__overlay {
    position: absolute;
    inset: auto 18px 18px 18px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(12px);
    color: #fff;
    display: grid;
    gap: 8px;
}

.guest-home-feature-media__overlay span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.guest-home-feature-media__overlay strong {
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.guest-home-feature-media__overlay small {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.76);
}

.guest-market-table {
    display: grid;
    gap: 14px;
}

.guest-market-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) auto auto minmax(110px, 1fr);
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.guest-market-row:last-child {
    border-bottom: 0;
}

.guest-market-row__asset,
.guest-loan-item,
.guest-loan-item__meta {
    display: grid;
    gap: 3px;
}

.guest-market-row__asset {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.guest-market-row__asset-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.guest-market-row__asset-media {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(226, 232, 240, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 20px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.guest-market-row__asset-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.guest-market-row__asset-fallback {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

.guest-market-row__asset strong,
.guest-market-row__price,
.guest-card-stack__legend strong,
.guest-loan-item strong,
.guest-invest-pack strong {
    color: var(--text);
}

.guest-market-row__change {
    font-weight: 800;
}

.guest-market-row__change.is-up {
    color: #16a34a;
}

.guest-market-row__change.is-down {
    color: #dc2626;
}

.guest-market-row__spark {
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    overflow: hidden;
}

.guest-market-row__spark span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(20, 145, 229, 0.92), rgba(34, 197, 94, 0.88));
}

.guest-card-stack {
    position: relative;
    min-height: 448px;
    display: grid;
    align-content: start;
    gap: 18px;
}

.guest-card-stack__card {
    position: absolute;
    width: min(100%, 300px);
    aspect-ratio: 1.62;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
}

.guest-card-stack__card--front {
    z-index: 2;
    top: 10px;
    left: 8px;
    background: linear-gradient(135deg, #081c44, #1491e5);
    color: #fff;
    display: grid;
    align-content: space-between;
}

.guest-card-stack__card--front strong {
    font-size: 26px;
    line-height: 1.05;
}

.guest-card-stack__card--front small {
    font-size: 15px;
    letter-spacing: .22em;
    opacity: 0.82;
}

.guest-card-stack__card--back {
    top: 66px;
    left: 46px;
    background: linear-gradient(135deg, rgba(22, 196, 127, 0.84), rgba(20, 145, 229, 0.54));
    transform: rotate(-5deg);
}

.guest-card-stack__card--accent {
    z-index: 1;
    top: 124px;
    left: 22px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(71, 85, 105, 0.72));
    color: #fff;
    transform: rotate(8deg);
    display: grid;
    align-content: space-between;
}

.guest-card-stack__card--accent strong {
    font-size: 22px;
}

.guest-card-stack__card--accent small,
.guest-card-stack__card--accent span {
    opacity: 0.82;
}

.guest-card-stack__legend {
    margin-top: 366px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.guest-card-stack__legend > div {
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.52);
}

.guest-finance-grid {
    padding-bottom: 52px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.guest-finance-card {
    padding: 24px;
}

.guest-loan-list,
.guest-invest-grid,
.guest-faq-list,
.guest-contact-list {
    display: grid;
    gap: 16px;
}

.guest-loan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(20, 145, 229, 0.06);
}

.guest-loan-item small,
.guest-loan-item span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.guest-loan-item__meta {
    text-align: right;
}

.guest-invest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guest-invest-pack {
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.52);
}

.guest-invest-pack__roi {
    margin: 12px 0 6px;
    color: var(--primary);
    font-size: 34px;
    font-weight: 900;
}

.guest-service-moments {
    padding: 0 0 52px;
}

.guest-service-moments__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.guest-service-moment {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 14px;
}

.guest-service-moment > span {
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.guest-service-moment h3 {
    color: var(--text);
    font-size: 30px;
    line-height: 1.18;
    letter-spacing: -0.025em;
}

.guest-service-moment p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.guest-service-moment__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.guest-service-moment__metrics > div {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.guest-service-moment__metrics strong {
    display: block;
    color: var(--text);
    font-size: 28px;
    line-height: 1;
}

.guest-service-moment__metrics small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.guest-info-grid {
    padding: 0 0 52px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.guest-info-card {
    padding: 24px;
    display: grid;
    gap: 14px;
    scroll-margin-top: 96px;
}

.guest-info-card span {
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.guest-info-card h2 {
    color: var(--text);
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.home-page {
    background: var(--guest-home-bg);
}

.guest-hero {
    min-height: auto;
    margin-top: 0;
    background: var(--guest-home-hero-bg);
    box-shadow: 0 32px 72px rgba(8, 24, 56, 0.2);
}

.guest-hero__copy h1,
.guest-hero__copy p,
.guest-hero__signal-row span,
.guest-stat-card strong {
    color: #f8fff8;
}

.guest-hero__copy p,
.guest-stat-card span {
    color: rgba(233, 247, 240, 0.8);
}

.guest-stat-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.guest-hero__signal-row span {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.guest-proof-band,
.guest-story,
.guest-products,
.guest-partners,
.guest-showcase-band,
.guest-market,
.guest-finance-grid,
.guest-journey,
.guest-service-moments,
.guest-cta-banner,
.guest-info-grid {
    width: min(1200px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

.guest-proof-band {
    margin-top: 28px;
}

.guest-proof-band__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.guest-proof-band__card,
.guest-story,
.guest-journey__card,
.guest-cta-banner {
    border-radius: 28px;
    border: 1px solid var(--guest-home-border);
    background: var(--guest-home-surface-strong);
    box-shadow: var(--guest-home-shadow);
}

.guest-proof-band__card {
    padding: 24px;
    display: grid;
    gap: 14px;
}

.guest-proof-band__icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20, 145, 229, 0.18), rgba(13, 124, 199, 0.08));
    color: var(--primary);
}

.guest-proof-band__icon-svg,
.guest-proof-band__icon-svg svg {
    width: 22px;
    height: 22px;
}

.guest-proof-band__card strong,
.guest-story__copy h2,
.guest-journey__card strong,
.guest-cta-banner__copy h2 {
    color: var(--text);
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.guest-proof-band__card p,
.guest-story__lead,
.guest-story__list-item p,
.guest-journey__card p,
.guest-cta-banner__copy p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.guest-story {
    margin-top: 34px;
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 26px;
    align-items: center;
}

.guest-story__media {
    min-width: 0;
}

.guest-story__image,
.guest-story__placeholder {
    width: 100%;
    min-height: 420px;
    border-radius: 28px;
    display: block;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.guest-story__placeholder {
    padding: 28px;
    display: grid;
    align-content: end;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 18%),
        linear-gradient(160deg, rgba(223, 236, 255, 0.92), rgba(234, 245, 255, 0.98));
}

.guest-story__placeholder span {
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guest-story__placeholder strong {
    margin-top: 10px;
    color: #0f172a;
    font-size: 32px;
    line-height: 1.12;
}

.guest-story__copy {
    display: grid;
    gap: 18px;
}

.guest-story__list {
    display: grid;
    gap: 12px;
}

.guest-story__list-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.guest-story__list-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 145, 229, 0.12);
    color: var(--primary);
}

.guest-story__list-icon-svg,
.guest-story__list-icon-svg svg {
    width: 14px;
    height: 14px;
}

.guest-story__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.guest-story__stats article {
    padding: 16px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.guest-story__stats strong {
    display: block;
    color: var(--primary);
    font-size: 30px;
    line-height: 1;
}

.guest-story__stats span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.guest-journey {
    padding: 8px 0 0;
}

.guest-journey__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.guest-journey__card {
    padding: 24px;
    display: grid;
    gap: 14px;
}

.guest-journey__step,
.guest-service-moment__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(20, 145, 229, 0.14);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.guest-service-moments {
    padding-top: 8px;
}

.guest-service-moment__index {
    margin-bottom: -2px;
}

.guest-cta-banner {
    margin-top: 10px;
    margin-bottom: 18px;
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: 20px;
    align-items: center;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 18%),
        linear-gradient(135deg, rgba(10, 34, 72, 0.98), rgba(13, 59, 122, 0.96), rgba(20, 145, 229, 0.96));
    border-color: rgba(96, 165, 250, 0.18);
}

.guest-cta-banner__copy span {
    color: rgba(191, 219, 254, 0.96);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guest-cta-banner__copy h2,
.guest-cta-banner__copy p {
    color: #f8fff8;
}

.guest-cta-banner__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.guest-faq-list,
.guest-contact-list {
    display: grid;
    gap: 16px;
}

.guest-faq-list strong,
.guest-contact-list strong {
    color: var(--text);
    font-size: 15px;
}

.guest-faq-list p,
.guest-contact-list p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.guest-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .55s ease, transform .55s ease;
}

.guest-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.theme-dark .home-page {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 24%),
        radial-gradient(circle at 15% 15%, rgba(22, 196, 127, 0.08), transparent 22%),
        var(--bg);
}

body.theme-dark .guest-topbar__link:hover,
body.theme-dark .guest-topbar__link.is-active {
    background: rgba(14, 165, 233, 0.12);
    color: #e5eefb;
}

body.theme-dark .guest-sidebar {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.16);
}

body.theme-dark .guest-sidebar__close,
body.theme-dark .guest-sidebar__link,
body.theme-dark .guest-sidebar__theme {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(148, 163, 184, 0.16);
    color: #e5eefb;
}

body.theme-dark .guest-command-card,
body.theme-dark .guest-product-card,
body.theme-dark .guest-market__main,
body.theme-dark .guest-market__side,
body.theme-dark .guest-finance-card,
body.theme-dark .guest-info-card,
body.theme-dark .guest-partners__panel,
body.theme-dark .guest-showcase-band__card,
body.theme-dark .guest-service-moment {
    background: rgba(15, 23, 42, 0.84);
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: none;
}

body.theme-dark .guest-stat-card,
body.theme-dark .guest-card-stack__legend > div,
body.theme-dark .guest-loan-item,
body.theme-dark .guest-invest-pack,
body.theme-dark .guest-ticker,
body.theme-dark .guest-wallet-orbit,
body.theme-dark .guest-hero-screen,
body.theme-dark .guest-hero-screen__metric,
body.theme-dark .guest-hero-screen__chart,
body.theme-dark .guest-service-moment__metrics > div {
    background: rgba(15, 23, 42, 0.74);
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: none;
}

body.theme-dark .guest-hero-visual__backdrop {
    background:
        radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.12), transparent 26%),
        radial-gradient(circle at 78% 8%, rgba(59, 130, 246, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(8, 15, 30, 0.28), rgba(11, 27, 48, 0.14));
    border-color: rgba(96, 165, 250, 0.18);
    box-shadow: none;
}

body.theme-dark .guest-home-feature-media {
    border-color: rgba(96, 165, 250, 0.16);
    box-shadow: none;
}

body.theme-dark .guest-hero-logo {
    color: #e5eefb;
}

body.theme-dark .guest-hero-logo {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.16);
}

body.theme-dark .guest-ticker__item,
body.theme-dark .guest-product-card__icon,
body.theme-dark .guest-command-card__badge,
body.theme-dark .guest-showcase-band__icon,
body.theme-dark .guest-hero__signal-row span {
    background: rgba(14, 165, 233, 0.12);
}

body.theme-dark .guest-ticker__item {
    border-color: rgba(148, 163, 184, 0.14);
}

body.theme-dark .guest-ticker__logo {
    background: rgba(15, 23, 42, 0.92);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
}

body.theme-dark .guest-wallet-orbit__node,
body.theme-dark .guest-card-design__brand {
    border-color: rgba(148, 163, 184, 0.16);
}

body.theme-dark .guest-wallet-orbit__node {
    background: rgba(15, 23, 42, 0.9);
    color: #e2e8f0;
}

body.theme-dark .guest-partners-marquee__item {
    border-color: rgba(96, 165, 250, 0.16);
    box-shadow: none;
}

body.theme-dark .guest-partners-marquee__item--fallback.is-bank {
    color: #1d4ed8;
}

body.theme-dark .guest-partners-marquee__item--fallback.is-wallet {
    color: #059669;
}

@media (max-width: 980px) {
    .guest-topbar {
        padding: 10px 12px;
    }

    .guest-topbar__nav {
        display: none;
    }

    .guest-hero {
        width: 100%;
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 28px;
        padding: 32px 18px 40px;
    }

    .guest-products,
    .guest-market,
    .guest-finance-grid,
    .guest-info-grid,
    .guest-partners,
    .guest-showcase-band,
    .guest-service-moments,
    .guest-proof-band,
    .guest-story,
    .guest-journey,
    .guest-cta-banner {
        width: min(100%, calc(100% - 28px));
    }

    .guest-products__grid,
    .guest-market,
    .guest-finance-grid,
    .guest-info-grid,
    .guest-invest-grid,
    .guest-command-card__metrics,
    .guest-hero-stats,
    .guest-hero-screen__metrics,
    .guest-hero-screen__bottom,
    .guest-showcase-band__grid,
    .guest-service-moments__grid,
    .guest-card-cluster,
    .guest-proof-band__grid,
    .guest-story,
    .guest-story__stats,
    .guest-journey__grid,
    .guest-cta-banner {
        grid-template-columns: 1fr;
    }

    .guest-hero {
        padding: 24px 20px 34px;
        border-radius: 0 0 28px 28px;
    }

    .guest-hero__copy h1 {
        max-width: 12ch;
        font-size: clamp(34px, 5.8vw, 48px);
        line-height: 1.08;
    }

    .guest-hero__copy p {
        font-size: 17px;
        line-height: 1.7;
    }

    .guest-ticker {
        width: min(100%, calc(100% - 28px));
        margin: 14px auto 42px;
    }

    .guest-ticker__track {
        padding: 12px 14px;
    }

    .guest-ticker__item {
        padding: 9px 12px;
        gap: 8px;
    }

    .guest-ticker__item strong {
        font-size: 13px;
    }

    .guest-ticker__item span,
    .guest-ticker__item small {
        font-size: 11px;
    }

    .guest-section-head h2 {
        font-size: clamp(23px, 3.8vw, 30px);
        line-height: 1.18;
    }

    .guest-product-card,
    .guest-market__main,
    .guest-market__side,
    .guest-finance-card,
    .guest-info-card,
    .guest-partners__panel,
    .guest-showcase-band__card,
    .guest-service-moment,
    .guest-proof-band__card,
    .guest-story,
    .guest-journey__card,
    .guest-cta-banner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .guest-hero-visual {
        min-height: auto;
        padding: 14px 0 0;
    }

    .guest-partners-marquee__item {
        min-width: 144px;
        height: 72px;
        padding: 14px 18px;
        border-radius: 20px;
    }

    .guest-partners-marquee__item--image img {
        max-width: 124px;
        max-height: 30px;
    }

    .guest-partners-marquee__item--fallback {
        font-size: 18px;
    }

    .guest-hero-visual__backdrop {
        inset: 0;
    }

    .guest-hero-stack {
        width: 100%;
        min-height: 470px;
    }

    .guest-hero-gallery {
        width: 100%;
        min-height: 470px;
    }

    .guest-hero-card,
    .guest-hero-card-image {
        width: min(100%, 340px);
    }

    .guest-hero-card--primary {
        top: 10px;
        right: 10px;
    }

    .guest-hero-card--secondary {
        right: auto;
        left: 12px;
        bottom: 54px;
    }

    .guest-hero-market-panel {
        left: 0;
        right: 0;
        bottom: -12px;
    }

    .guest-hero-visual-slide__overlay {
        left: 18px;
        right: 18px;
        bottom: 18px;
        padding: 16px 18px;
    }

    .guest-hero-visual-slide__image {
        inset: 18px 18px 122px;
        width: calc(100% - 36px);
        height: calc(100% - 140px);
    }

    .guest-hero-coin--btc {
        right: 2px;
    }

    .guest-hero-coin--eth {
        left: 18px;
        top: 96px;
    }

    .guest-hero-coin--xrp {
        left: 48px;
    }

    .guest-hero-coin--usdt {
        left: 62px;
        bottom: 38px;
    }

    .guest-hero-coin--sol {
        right: -4px;
        bottom: 128px;
    }

    .guest-hero-visual__photo-shell {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        margin: 0 0 18px;
    }

    .guest-hero-visual__photo {
        height: 280px;
    }

    .guest-hero-screen {
        width: 100%;
    }

    .guest-info-grid {
        padding-bottom: 36px;
    }

    .guest-card-stack {
        min-height: 430px;
    }

    .guest-card-stack__legend {
        margin-top: 340px;
        grid-template-columns: 1fr;
    }

    .guest-cta-banner__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .guest-topbar {
        gap: 10px;
        padding: 10px 10px;
    }

    .guest-topbar__brand {
        display: none;
    }

    .guest-mobile-menu-btn {
        display: inline-flex;
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        border-radius: 12px;
    }

    .guest-topbar__logo .sidebar-logo-text small {
        display: none;
    }

    .guest-topbar__actions {
        gap: 6px;
        width: 100%;
        justify-content: flex-end;
    }

    .guest-products,
    .guest-market,
    .guest-finance-grid,
    .guest-info-grid,
    .guest-partners,
    .guest-showcase-band,
    .guest-service-moments,
    .guest-proof-band,
    .guest-story,
    .guest-journey,
    .guest-cta-banner {
        width: min(100%, calc(100% - 24px));
    }

    .guest-hero {
        width: 100%;
        padding: 20px 16px 26px;
    }

    .guest-topbar__btn--ghost {
        display: inline-flex;
    }

    .guest-topbar__lang-btn {
        display: inline-flex;
    }

    .guest-topbar__theme-btn {
        display: none;
    }

    .guest-topbar__btn {
        min-height: 36px;
        padding: 0 10px;
        font-size: 12px;
        border-radius: 11px;
        gap: 6px;
    }

    .guest-topbar__btn-icon,
    .guest-topbar__btn-icon svg {
        width: 14px;
        height: 14px;
    }

    .guest-topbar__lang-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        padding: 0 8px;
        gap: 4px;
        border-radius: 12px;
    }

    .guest-topbar__lang-btn .topbar-mini-text {
        font-size: 11px;
    }

    .guest-topbar__lang-btn .icon,
    .guest-topbar__lang-btn svg {
        width: 15px;
        height: 15px;
    }

    .guest-topbar .topbar-dropdown-menu {
        position: fixed;
        top: 78px;
        left: 12px;
        right: 12px;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: min(60vh, 420px);
        overflow-y: auto;
        border-radius: 16px;
        z-index: 120;
    }

    .guest-topbar #guestLanguageDropdown {
        left: 16px;
        right: 16px;
        padding: 14px;
    }

    .guest-topbar #guestLanguageDropdown .action-inline-form {
        display: block;
        width: 100%;
        margin: 0;
    }

    .guest-topbar #guestLanguageDropdown .topbar-dropdown-item {
        width: 100%;
        justify-content: space-between;
        padding: 10px 8px;
        gap: 12px;
        border-radius: 12px;
    }

    .guest-hero__copy h1 {
        max-width: 14ch;
        margin: 10px 0 14px;
        font-size: clamp(28px, 8.4vw, 36px);
        line-height: 1.08;
    }

    .guest-hero__copy p {
        font-size: 15px;
        line-height: 1.65;
    }

    .guest-hero-visual {
        padding: 0;
    }

    .guest-hero-stack {
        min-height: 520px;
    }

    .guest-hero-gallery {
        min-height: 520px;
    }

    .guest-hero-visual-slide__image {
        inset: 16px 16px 116px;
        width: calc(100% - 32px);
        height: calc(100% - 132px);
    }

    .guest-hero-card,
    .guest-hero-card-image {
        width: min(100%, 280px);
    }

    .guest-hero-card--primary {
        top: 18px;
        right: 4px;
    }

    .guest-hero-card--secondary {
        top: 110px;
        left: 4px;
        right: auto;
        bottom: auto;
    }

    .guest-hero-coin {
        min-width: 50px;
        min-height: 50px;
        padding: 0 8px;
        font-size: 10px;
    }

    .guest-hero-coin__logo {
        width: 18px;
        height: 18px;
    }

    .guest-hero-coin--btc {
        top: 4px;
        right: 0;
    }

    .guest-hero-coin--eth {
        top: 154px;
        left: 10px;
    }

    .guest-hero-coin--xrp {
        top: 20px;
        left: 26px;
        min-width: 42px;
        min-height: 42px;
    }

    .guest-hero-coin--usdt {
        left: 28px;
        bottom: 92px;
    }

    .guest-hero-coin--sol {
        right: -2px;
        bottom: 156px;
    }

    .guest-hero-market-panel__head,
    .guest-hero-market-slide {
        align-items: flex-start;
        flex-direction: column;
    }

    .guest-hero-market-slide__meta {
        justify-content: flex-start;
    }

    .guest-hero-market-panel {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 14px;
    }

    .guest-hero-visual-dots {
        right: 14px;
        bottom: -18px;
    }

    .guest-hero-visual-slide__overlay strong {
        font-size: 20px;
    }

    .guest-hero-visual-slide__overlay small {
        font-size: 12px;
    }

    .guest-hero-screen {
        padding: 16px;
        border-radius: 24px;
        gap: 16px;
    }

    .guest-hero-screen__top {
        grid-template-columns: 1fr;
    }

    .guest-hero-screen__top strong {
        font-size: 28px;
    }

    .guest-hero-screen__preview-image {
        height: 190px;
    }

    .guest-hero__actions {
        flex-wrap: wrap;
    }

    .guest-proof-band__card,
    .guest-story,
    .guest-journey__card,
    .guest-cta-banner {
        padding: 18px;
        border-radius: 22px;
    }

    .guest-proof-band__card strong,
    .guest-story__copy h2,
    .guest-journey__card strong,
    .guest-cta-banner__copy h2 {
        font-size: 20px;
        line-height: 1.18;
    }

    .guest-market-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .guest-market-row__spark {
        width: 100%;
    }

    .guest-card-stack__card {
        width: calc(100% - 8px);
    }

    .guest-card-stack__card--back {
        left: 18px;
    }

    .guest-card-stack {
        min-height: 470px;
    }

    .guest-card-stack__legend {
        margin-top: 386px;
        gap: 12px;
    }

    .guest-command-card__head,
    .guest-command-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .guest-section-head {
        margin-bottom: 18px;
    }

    .guest-section-head h2 {
        max-width: none;
        font-size: 20px;
        line-height: 1.18;
    }

    .guest-service-moment h3,
    .guest-info-card h2 {
        font-size: 20px;
        line-height: 1.2;
    }

    .guest-product-card,
    .guest-market__main,
    .guest-market__side,
    .guest-finance-card,
    .guest-info-card,
    .guest-partners__panel,
    .guest-showcase-band__card,
    .guest-service-moment {
        padding-left: 16px;
        padding-right: 16px;
    }

    .guest-partners__panel,
    .guest-product-card,
    .guest-finance-card,
    .guest-info-card,
    .guest-market__main,
    .guest-market__side {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .guest-story__copy,
    .guest-cta-banner__copy {
        gap: 14px;
    }

    .guest-story__stats article,
    .guest-loan-item,
    .guest-invest-pack,
    .guest-service-moment__metrics > div,
    .guest-stat-card {
        padding-left: 14px;
        padding-right: 14px;
    }

    .guest-card-design strong {
        font-size: 24px;
        letter-spacing: 0.12em;
    }

    .guest-home-feature-media,
    .guest-home-feature-media__image {
        min-height: 360px;
    }
}

.guest-mobile-dropdown {
    min-width: 220px;
}

@keyframes guestTicker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes guestPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.42);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* =========================================
   User Dashboard Professional
========================================= */

.user-dashboard-page {
    display: grid;
    gap: 22px;
    --dashboard-motion-duration: 0.55s;
    --dashboard-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.user-dashboard-page,
.user-dashboard-page *,
.user-dashboard-page *::before,
.user-dashboard-page *::after {
    transition:
        background-color .28s ease,
        border-color .28s ease,
        color .28s ease,
        box-shadow .28s ease,
        opacity .28s ease;
}

.user-dashboard-skeleton {
    position: relative;
}

.user-dashboard-skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(148, 163, 184, 0.05) 8%, rgba(255, 255, 255, 0.24) 18%, rgba(148, 163, 184, 0.05) 33%);
    background-size: 200% 100%;
    animation: userDashboardSkeletonShimmer 1.35s linear infinite;
    pointer-events: none;
    opacity: .88;
}

.user-dashboard-page.is-ready .user-dashboard-skeleton::before {
    opacity: 0;
}

.user-dashboard-tilt-card {
    transform-style: preserve-3d;
    will-change: transform;
}

.user-dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    align-items: stretch;
    gap: 18px;
    padding: 26px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(20, 145, 229, 0.14), rgba(22, 196, 127, 0.10)),
        var(--card);
    box-shadow: 0 20px 46px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.user-dashboard-hero::after {
    content: "";
    position: absolute;
    inset: auto -80px -120px auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0));
    pointer-events: none;
    animation: userDashboardGlowFloat 10s ease-in-out infinite;
}

.user-dashboard-hero__copy {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.user-dashboard-hero span,
.user-section-head span,
.user-balance-card span,
.user-market-watch-card span {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.user-dashboard-hero h1 {
    margin: 8px 0 8px;
    color: var(--text);
    font-size: 28px;
    line-height: 1.12;
    font-weight: 800;
}

.user-dashboard-hero p {
    max-width: 660px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.user-dashboard-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-dashboard-shimmer-btn {
    position: relative;
    overflow: hidden;
}

.user-dashboard-shimmer-btn::after {
    content: "";
    position: absolute;
    inset: -120% auto -120% -34%;
    width: 42%;
    transform: rotate(18deg) translateX(-220%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
    animation: userDashboardButtonShimmer 5.4s ease-in-out infinite;
    pointer-events: none;
}

.user-dashboard-shimmer-btn--soft::after {
    background: linear-gradient(90deg, rgba(20, 145, 229, 0), rgba(20, 145, 229, 0.18), rgba(20, 145, 229, 0));
}

.user-dashboard-pulse-card {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(20, 145, 229, 0.08), rgba(255, 255, 255, 0)),
        var(--card);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.user-dashboard-pulse-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.user-dashboard-pulse-card__head strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
}

.user-dashboard-live-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.user-dashboard-live-dot span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.56);
    animation: userDashboardPulseDot 1.8s ease infinite;
}

.user-dashboard-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.user-dashboard-signal {
    min-width: 0;
    display: grid;
    gap: 7px;
    padding: 13px 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: var(--surface);
}

.user-dashboard-signal.is-flashing,
.user-market-watch-card.is-flashing {
    animation: userDashboardValueFlash 0.7s ease;
}

.user-dashboard-signal small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.user-dashboard-signal strong {
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.user-dashboard-signal__value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.user-dashboard-signal__coin {
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
}

.user-dashboard-signal__coin-icon,
.user-dashboard-signal__coin-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.user-dashboard-signal:hover .user-dashboard-signal__coin,
.user-dashboard-signal:focus-within .user-dashboard-signal__coin {
    transform: rotate(12deg) scale(1.08);
}

.user-dashboard-signal--up {
    border-color: rgba(34, 197, 94, 0.24);
}

.user-dashboard-signal--neutral {
    border-color: rgba(96, 165, 250, 0.18);
}

.user-market-tape {
    position: relative;
    overflow: hidden;
    padding: 14px 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(20, 145, 229, 0.06), rgba(255, 255, 255, 0)),
        var(--card);
}

.user-market-tape::before,
.user-market-tape::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 72px;
    z-index: 1;
    pointer-events: none;
}

.user-market-tape::before {
    left: 0;
    background: linear-gradient(90deg, var(--card), rgba(255, 255, 255, 0));
}

.user-market-tape::after {
    right: 0;
    background: linear-gradient(270deg, var(--card), rgba(255, 255, 255, 0));
}

.user-market-tape__track {
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    animation: userMarketTapeScroll 34s linear infinite;
}

.user-market-tape:hover .user-market-tape__track,
.user-market-tape:focus-within .user-market-tape__track,
.user-market-tape.is-paused .user-market-tape__track {
    animation-play-state: paused;
}

.user-market-tape__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    background: var(--surface);
    white-space: nowrap;
}

.user-market-tape__item:focus-visible {
    outline: 2px solid rgba(20, 145, 229, 0.4);
    outline-offset: 2px;
}

.user-market-tape__logo {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.16);
    color: var(--text);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.user-market-tape__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-market-tape__logo.is-fallback {
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.user-market-tape__item strong,
.user-market-tape__item em,
.user-market-tape__item b {
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.user-market-tape__item strong {
    color: var(--text);
}

.user-market-tape__item span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.user-market-tape__item em {
    color: var(--text);
}

.user-market-tape__item .is-up {
    color: #4ade80;
}

.user-market-tape__item .is-down {
    color: #fda4af;
}

.user-dashboard-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 251, 235, 0.94));
}

.user-dashboard-warning--top {
    padding: 18px 20px;
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, rgba(33, 18, 7, 0.98), rgba(69, 26, 3, 0.96));
}

.user-dashboard-warning__main,
.user-dashboard-warning__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-dashboard-warning__main {
    flex: 1;
    min-width: 0;
}

.user-dashboard-warning__actions {
    flex: 0 0 auto;
}

.user-dashboard-warning__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.user-dashboard-warning__icon svg {
    width: 20px;
    height: 20px;
}

.user-dashboard-warning__content {
    flex: 1;
    display: grid;
    gap: 4px;
}

.user-dashboard-warning__content strong {
    color: #fff7ed;
    font-size: 14px;
    font-weight: 800;
}

.user-dashboard-warning__content span {
    color: rgba(255, 237, 213, 0.92);
    font-size: 13px;
    line-height: 1.55;
}

.user-dashboard-warning__toggle {
    min-width: 104px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(251, 191, 36, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
    color: #fde68a;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.user-dashboard-warning__toggle:hover {
    border-color: rgba(251, 191, 36, 0.6);
    background: rgba(251, 191, 36, 0.08);
}

.user-dashboard-warning__toggle-label--expand,
.user-dashboard-warning.is-collapsed .user-dashboard-warning__toggle-label--collapse {
    display: none;
}

.user-dashboard-warning.is-collapsed .user-dashboard-warning__toggle-label--expand {
    display: inline;
}

.user-dashboard-warning.is-collapsed {
    padding-top: 12px;
    padding-bottom: 12px;
}

.user-dashboard-warning.is-collapsed .user-dashboard-warning__content span,
.user-dashboard-warning.is-collapsed .btn.btn-primary {
    display: none;
}

.user-dashboard-warning.is-collapsed .user-dashboard-warning__main {
    gap: 12px;
}

.user-dashboard-warning.is-collapsed .user-dashboard-warning__actions {
    gap: 10px;
}

.user-dashboard-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.user-balance-card,
.user-insight-card,
.user-dashboard-panel {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 20px;
    background: var(--card);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.05);
}

.user-balance-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.user-balance-card--compact {
    gap: 14px;
}

.user-balance-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.user-balance-card-top strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.08;
    font-weight: 800;
}

.user-balance-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 145, 229, 0.12);
    color: var(--primary);
}

.user-balance-icon svg {
    width: 22px;
    height: 22px;
}

.user-balance-card .user-balance-split strong {
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

.user-balance-icon svg {
    width: 24px;
    height: 24px;
}

.user-balance-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.user-balance-split--single {
    grid-template-columns: minmax(0, 1fr);
}

.user-balance-split > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: var(--surface);
}

.user-balance-split strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 14px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.user-insight-card {
    padding: 16px;
    display: flex;
    align-items: center;
}

.user-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    gap: 18px;
}

.user-dashboard-panel {
    padding: 18px;
}

.user-dashboard-panel--wide {
    grid-column: 1 / -1;
}

.user-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.user-section-head h2 {
    margin: 6px 0 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
}

.user-section-head a {
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
}

.user-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.user-quick-action {
    min-width: 0;
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.user-quick-action:hover {
    border-color: rgba(20, 145, 229, 0.28);
    background: rgba(20, 145, 229, 0.07);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.user-quick-action.is-disabled,
.btn-is-disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.62;
}

.user-quick-action.is-disabled {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.9));
}

.user-quick-action.is-disabled:hover {
    border-color: rgba(148, 163, 184, 0.20);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.9));
}

.user-quick-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 145, 229, 0.12);
    color: var(--primary);
}

.user-quick-action-icon svg {
    width: 20px;
    height: 20px;
}

.user-quick-action strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 750;
}

.user-quick-action span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.user-market-watch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.user-market-watch-card {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(20, 145, 229, 0.06), rgba(255, 255, 255, 0)),
        var(--surface);
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.user-market-watch-card:hover,
.user-market-watch-card.is-pulsed {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.10);
}

.user-market-watch-card.is-pulsed .user-market-watch-card__spark {
    transform: translateZ(8px);
}

.user-market-watch-card--up:hover,
.user-market-watch-card--up.is-pulsed {
    border-color: rgba(34, 197, 94, 0.30);
}

.user-market-watch-card--down:hover,
.user-market-watch-card--down.is-pulsed {
    border-color: rgba(244, 63, 94, 0.28);
}

.user-market-watch-card h3 {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
}

.user-dashboard-micro-icon {
    transform-origin: center;
}

.user-balance-card:hover .user-dashboard-micro-icon,
.user-quick-action:hover .user-dashboard-micro-icon,
.user-transaction-item:hover .user-dashboard-micro-icon,
.user-notification-item:hover .user-dashboard-micro-icon {
    transform: translateY(-1px) scale(1.06);
}

.user-notification-item:hover .user-dashboard-bell-icon,
.user-notification-item:focus-within .user-dashboard-bell-icon {
    animation: userDashboardBellRing .85s ease;
}

.user-market-watch-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.user-market-watch-card__row strong {
    color: var(--text);
    font-size: 25px;
    line-height: 1;
    font-weight: 900;
}

.user-market-watch-card__row mark {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.user-market-watch-card--up .user-market-watch-card__row mark {
    background: rgba(34, 197, 94, 0.12);
    color: #059669;
}

.user-market-watch-card--down .user-market-watch-card__row mark {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
}

.user-market-watch-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.user-market-watch-card__spark {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
    min-height: 52px;
}

.user-market-watch-card__spark span {
    display: block;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.96), rgba(14, 165, 233, 0.22));
    animation: userDashboardSpark 1.8s ease-in-out infinite;
}

.user-market-watch-card--down .user-market-watch-card__spark span {
    background: linear-gradient(180deg, rgba(251, 113, 133, 0.92), rgba(225, 29, 72, 0.16));
}

.user-market-watch-card__spark span:nth-child(1) { height: 16px; animation-delay: .05s; }
.user-market-watch-card__spark span:nth-child(2) { height: 28px; animation-delay: .12s; }
.user-market-watch-card__spark span:nth-child(3) { height: 20px; animation-delay: .18s; }
.user-market-watch-card__spark span:nth-child(4) { height: 38px; animation-delay: .24s; }
.user-market-watch-card__spark span:nth-child(5) { height: 24px; animation-delay: .30s; }
.user-market-watch-card__spark span:nth-child(6) { height: 46px; animation-delay: .36s; }
.user-market-watch-card__spark span:nth-child(7) { height: 32px; animation-delay: .42s; }
.user-market-watch-card__spark span:nth-child(8) { height: 40px; animation-delay: .48s; }

.user-dashboard-fade-in {
    opacity: 0;
    transform: translateY(12px);
    animation: userDashboardFadeIn var(--dashboard-motion-duration) var(--dashboard-motion-ease) forwards;
}

.user-dashboard-slide-in {
    opacity: 0;
    transform: translateX(-14px);
    animation: userDashboardSlideIn .6s var(--dashboard-motion-ease) forwards;
}

.user-dashboard-overview .user-dashboard-fade-in:nth-child(1) { animation-delay: .04s; }
.user-dashboard-overview .user-dashboard-fade-in:nth-child(2) { animation-delay: .10s; }
.user-dashboard-overview .user-dashboard-fade-in:nth-child(3) { animation-delay: .16s; }
.user-dashboard-overview .user-dashboard-fade-in:nth-child(4) { animation-delay: .22s; }
.user-dashboard-grid .user-dashboard-fade-in:nth-child(1) { animation-delay: .24s; }
.user-dashboard-grid .user-dashboard-fade-in:nth-child(2) { animation-delay: .30s; }
.user-dashboard-grid .user-dashboard-fade-in:nth-child(3) { animation-delay: .36s; }

@keyframes userDashboardFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes userDashboardSlideIn {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes userDashboardPulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.52);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes guestPartnerMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes guestFloatCoin {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes guestHeroBars {
    0%,
    100% {
        transform: scaleY(0.92);
        opacity: 0.82;
    }
    50% {
        transform: scaleY(1.08);
        opacity: 1;
    }
}

@keyframes userDashboardValueFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.36);
    }
    40% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0.10);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes userMarketTapeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes userDashboardSpark {
    0%, 100% {
        transform: scaleY(0.82);
        opacity: 0.68;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes userDashboardGlowFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-10px, -12px, 0) scale(1.04);
    }
}

@keyframes userDashboardButtonShimmer {
    0%, 14% {
        transform: rotate(18deg) translateX(-220%);
    }
    22%, 100% {
        transform: rotate(18deg) translateX(430%);
    }
}

@keyframes userDashboardSkeletonShimmer {
    0% {
        background-position: 160% 0;
    }
    100% {
        background-position: -60% 0;
    }
}

@keyframes userDashboardBellRing {
    0%, 100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(14deg);
    }
    40% {
        transform: rotate(-12deg);
    }
    60% {
        transform: rotate(9deg);
    }
    80% {
        transform: rotate(-5deg);
    }
}

.user-transaction-list,
.user-notification-list {
    display: grid;
    gap: 10px;
}

.user-transaction-item,
.user-notification-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: var(--surface);
}

.user-transaction-main,
.user-notification-item {
    min-width: 0;
}

.user-transaction-main {
    display: flex;
    align-items: center;
    gap: 11px;
}

.user-transaction-icon,
.user-notification-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 145, 229, 0.10);
    color: var(--primary);
}

.user-transaction-icon svg,
.user-notification-icon svg {
    width: 17px;
    height: 17px;
}

.user-transaction-item strong,
.user-notification-item strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.user-transaction-item span,
.user-notification-item span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.user-transaction-item .is-credit,
.user-transaction-item .is-debit {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 950;
}

.user-transaction-item .is-credit {
    color: #059669;
}

.user-transaction-item .is-debit {
    color: #dc2626;
}

.user-notification-item {
    justify-content: flex-start;
}

body.theme-dark .user-dashboard-hero,
body.theme-dark .user-balance-card,
body.theme-dark .user-insight-card,
body.theme-dark .user-dashboard-panel {
    border-color: rgba(148, 163, 184, 0.16);
    background: #101827;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24);
}

body.theme-dark .user-balance-split > div,
body.theme-dark .user-quick-action,
body.theme-dark .user-transaction-item,
body.theme-dark .user-notification-item {
    border-color: rgba(148, 163, 184, 0.14);
    background: #0f172a;
}

body.theme-dark .user-dashboard-pulse-card {
    border-color: rgba(96, 165, 250, 0.18);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.theme-dark .user-dashboard-skeleton::before {
    background: linear-gradient(110deg, rgba(30, 41, 59, 0.16) 8%, rgba(148, 163, 184, 0.12) 18%, rgba(30, 41, 59, 0.16) 33%);
}

body.theme-dark .user-dashboard-pulse-card__head strong,
body.theme-dark .user-dashboard-signal strong,
body.theme-dark .user-market-tape__item strong,
body.theme-dark .user-market-tape__item em {
    color: #f8fafc;
}

body.theme-dark .user-dashboard-live-dot {
    background: rgba(30, 41, 59, 0.92);
    color: #cbd5e1;
}

body.theme-dark .user-dashboard-signal {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.74);
}

body.theme-dark .user-dashboard-signal small,
body.theme-dark .user-market-tape__item span {
    color: #94a3b8;
}

body.theme-dark .user-market-tape {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.90));
}

body.theme-dark .user-market-tape::before {
    background: linear-gradient(90deg, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0));
}

body.theme-dark .user-market-tape::after {
    background: linear-gradient(270deg, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0));
}

body.theme-dark .user-market-tape__item {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(30, 41, 59, 0.58);
}

body.theme-dark .user-market-tape__logo {
    background: rgba(148, 163, 184, 0.14);
    color: #f8fafc;
}

body.theme-dark .user-market-watch-card {
    border-color: rgba(148, 163, 184, 0.14);
    background:
        linear-gradient(180deg, rgba(30, 64, 175, 0.10), rgba(255, 255, 255, 0)),
        #0f172a;
}

body.theme-dark .user-quick-action:hover {
    border-color: rgba(56, 189, 248, 0.22);
    background: rgba(14, 165, 233, 0.10);
}

body.theme-dark .user-dashboard-warning {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.35), rgba(69, 26, 3, 0.26));
}

body.theme-dark .user-dashboard-warning__content strong {
    color: #f8fafc;
}

body.theme-dark .user-dashboard-warning__content span {
    color: #cbd5e1;
}

body.theme-dark .user-dashboard-warning__icon {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

body.theme-dark .user-dashboard-warning__toggle {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(255, 255, 255, 0.02);
    color: #fde68a;
}

body.theme-dark .user-quick-action.is-disabled {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88));
}

body.theme-dark .user-transaction-item .is-credit {
    color: #86efac;
}

body.theme-dark .user-transaction-item .is-debit {
    color: #fca5a5;
}

@media (max-width: 1180px) {
    .user-dashboard-hero,
    .user-market-watch-grid {
        grid-template-columns: 1fr;
    }

    .user-dashboard-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-balance-card {
        grid-column: 1 / -1;
    }

    .user-quick-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .user-dashboard-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .user-dashboard-hero h1 {
        font-size: 22px;
    }

    .user-dashboard-hero-actions,
    .user-dashboard-hero-actions .btn {
        width: 100%;
    }

    .user-dashboard-hero-actions {
        flex-direction: column;
    }

    .user-dashboard-signal-grid,
    .user-market-watch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-dashboard-warning {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-dashboard-warning__main,
    .user-dashboard-warning__actions {
        width: 100%;
    }

    .user-dashboard-warning__actions {
        justify-content: space-between;
    }

    .user-dashboard-overview,
    .user-balance-split,
    .user-quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .user-market-tape {
        padding: 12px 0;
    }

    .user-market-tape__item {
        padding: 9px 12px;
    }

    .user-dashboard-tilt-card {
        transform: none !important;
    }

    .user-transaction-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 460px) {
    .user-dashboard-signal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .user-dashboard-signal {
        padding: 12px;
    }

    .user-dashboard-signal strong {
        font-size: 14px;
    }

    .user-dashboard-signal__value {
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-dashboard-fade-in,
    .user-dashboard-slide-in,
    .user-market-tape__track,
    .user-market-watch-card__spark span,
    .user-dashboard-live-dot span,
    .user-dashboard-shimmer-btn::after,
    .user-dashboard-hero::after,
    .user-dashboard-skeleton::before {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .user-dashboard-page,
    .user-dashboard-page *,
    .user-dashboard-page *::before,
    .user-dashboard-page *::after {
        transition: none !important;
    }
}

/* User Cards / Credit Professional Polish */

.cards-metric-card,
.credit-metric-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.cards-metric-card > div:last-child,
.credit-metric-card > div:last-child {
    min-width: 0;
}

.cards-metric-card strong,
.credit-metric-card strong {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.cards-metric-card .admin-circular-stat,
.credit-metric-card .admin-circular-stat {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
}

.cards-metric-card .admin-circular-stat span,
.credit-metric-card .admin-circular-stat span {
    margin: 0;
    font-size: 12px;
    color: var(--text);
}

.cards-metric-card__icon,
.credit-metric-card__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #1297d8;
    background: rgba(18, 151, 216, 0.12);
    border: 1px solid rgba(18, 151, 216, 0.18);
}

.cards-metric-icon,
.credit-metric-icon {
    width: 21px;
    height: 21px;
    display: inline-flex;
}

.cards-metric-icon svg,
.credit-metric-icon svg {
    width: 100%;
    height: 100%;
}

.cards-row__sep {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: .42;
}

.cards-showcase__empty-icon,
.credit-product-card__icon {
    color: #38bdf8;
    font-size: 0;
}

.cards-showcase__empty-icon::before,
.credit-product-card__icon::before {
    content: "";
    width: 28px;
    height: 20px;
    border-radius: 7px;
    border: 2px solid currentColor;
    display: block;
    box-shadow: inset 0 7px 0 rgba(56, 189, 248, 0.18);
}

.credit-metrics-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.credit-detail-page {
    display: grid;
    gap: 22px;
}

.credit-detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 26px;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.28), transparent 32%),
        linear-gradient(135deg, #07162d 0%, #0b274b 54%, #0f766e 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.credit-detail-hero__eyebrow {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.credit-detail-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.credit-detail-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .76);
}

.credit-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.credit-detail-grid {
    display: grid;
    gap: 22px;
}

.credit-detail-panel {
    min-width: 0;
    padding: 22px;
    border-radius: 24px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.credit-detail-kv {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.credit-detail-kv div {
    min-width: 0;
    padding: 16px;
    border-radius: 18px;
    background: rgba(18, 151, 216, 0.08);
    border: 1px solid rgba(18, 151, 216, 0.12);
}

.credit-detail-kv span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--muted);
}

.credit-detail-kv strong {
    display: block;
    font-size: 15px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.credit-detail-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--border);
}

.credit-metric-card {
    min-height: 96px;
    padding: 18px 20px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.credit-metric-card span {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--muted);
}

.cards-metric-card strong,
.credit-metric-card strong {
    font-size: 24px;
    line-height: 1;
    color: var(--text);
}

body.theme-dark .cards-metric-card,
body.theme-dark .credit-metric-card,
body.theme-dark .credit-detail-panel,
body.theme-dark .cards-panel,
body.theme-dark .credit-score-card,
body.theme-dark .credit-calculator-card,
body.theme-dark .credit-documents-panel,
body.theme-dark .credit-product-card,
body.theme-dark .credit-user-loan-card,
body.theme-dark .loan-modal-panel,
body.theme-dark .loan-schedule-modal-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 12, 27, 0.98));
    border-color: rgba(125, 211, 252, 0.16);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

body.theme-dark .credit-select,
body.theme-dark .loan-modal-panel input,
body.theme-dark .loan-modal-panel select,
body.theme-dark .loan-modal-panel textarea {
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.24);
}

body.theme-dark .credit-user-loan-card__hint,
body.theme-dark .credit-doc-card__kicker,
body.theme-dark .credit-doc-card li,
body.theme-dark .credit-summary-box__note,
body.theme-dark .cards-row__meta {
    color: #9fb3d1;
}

@media (max-width: 1180px) {
    .credit-metrics-strip,
    .cards-metrics,
    .credit-detail-metrics,
    .credit-detail-kv {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .credit-metrics-strip,
    .credit-detail-metrics,
    .credit-detail-kv {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards-metrics {
        grid-template-columns: 1fr;
    }

    .cards-metric-card,
    .credit-metric-card {
        align-items: flex-start;
    }

    .credit-detail-hero {
        flex-direction: column;
        padding: 20px;
    }
}

/* User Banking / Market Pages */

.banking-v2__metrics-strip,
.market-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.banking-v2__metric-card,
.market-metric-card {
    min-width: 0;
    min-height: 96px;
    padding: 18px 20px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.banking-v2__metric-card > div:last-child,
.market-metric-card > div:last-child {
    min-width: 0;
}

.banking-v2__metric-card span,
.market-metric-card span {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--muted);
}

.banking-v2__metric-card strong,
.market-metric-card strong {
    display: block;
    max-width: 100%;
    font-size: 24px;
    line-height: 1;
    color: var(--text);
    overflow-wrap: anywhere;
}

.banking-v2__metric-card .admin-circular-stat,
.market-metric-card .admin-circular-stat {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
}

.banking-v2__metric-card .admin-circular-stat span,
.market-metric-card .admin-circular-stat span {
    margin: 0;
    font-size: 12px;
    color: var(--text);
}

.banking-v2__metric-icon,
.market-metric-card__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #1297d8;
    background: rgba(18, 151, 216, 0.12);
    border: 1px solid rgba(18, 151, 216, 0.18);
}

.banking-v2__metric-svg,
.market-metric-icon,
.btn-icon,
.market-action-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 20px;
}

.banking-v2__metric-svg svg,
.market-metric-icon svg,
.btn-icon svg,
.market-action-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.banking-v2__metric-icon > .banking-v2__metric-svg,
.banking-v2__action-icon > .banking-v2__metric-svg,
.banking-v2__row-icon > .banking-v2__metric-svg,
.banking-v2__visibility > .banking-v2__metric-svg {
    margin: auto;
}

.market-page {
    display: grid;
    gap: 22px;
}

.market-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 28px;
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.28), transparent 31%),
        linear-gradient(135deg, #061525 0%, #0a2a4a 52%, #0f766e 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.market-hero--invest {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.28), transparent 31%),
        linear-gradient(135deg, #07162d 0%, #12345f 52%, #14532d 100%);
}

.investor-page {
    display: grid;
    gap: 22px;
}

.investor-hero,
.investor-panel,
.investor-kpi,
.investor-pack-card,
.investor-balance-card,
.investor-funding-option {
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.investor-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    padding: 26px 28px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(20,145,229,0.08), rgba(15,28,63,0.03)),
        var(--card);
}

.investor-hero__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 800;
    margin-bottom: 8px;
}

.investor-hero h1 {
    font-size: 34px;
    line-height: 1.05;
    color: var(--text);
}

.investor-hero p {
    margin-top: 10px;
    max-width: 780px;
    color: var(--muted);
    line-height: 1.7;
}

.investor-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.investor-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.investor-kpi {
    border-radius: 20px;
    padding: 18px 20px;
    display: grid;
    gap: 8px;
}

.investor-kpi--primary {
    background:
        linear-gradient(135deg, rgba(20,145,229,0.12), rgba(15,28,63,0.03)),
        var(--card);
}

.investor-kpi span,
.investor-balance-card__row span,
.investor-pack-card__top span,
.investor-pack-card__metrics span,
.investor-funding-option span {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
}

.investor-kpi strong {
    font-size: 28px;
    line-height: 1.1;
    color: var(--text);
}

.investor-kpi small {
    color: var(--muted);
    font-size: 13px;
}

.investor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: 20px;
}

.investor-grid--lower {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
}

.investor-panel {
    border-radius: 24px;
    padding: 22px;
    display: grid;
    gap: 18px;
}

.investor-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.investor-section-head span {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 800;
    letter-spacing: .08em;
}

.investor-section-head h2 {
    margin-top: 6px;
    color: var(--text);
    font-size: 24px;
}

.investor-balance-card {
    border-radius: 20px;
    padding: 16px 18px;
    display: grid;
    gap: 14px;
    background: linear-gradient(180deg, rgba(20,145,229,0.05), rgba(20,145,229,0.01));
}

.investor-balance-card__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.investor-balance-card__row strong {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

.investor-funding-options {
    display: grid;
    gap: 12px;
}

.investor-funding-option {
    border-radius: 18px;
    padding: 16px 18px;
    display: grid;
    gap: 8px;
}

.investor-funding-option strong {
    color: var(--text);
    font-size: 16px;
}

.investor-pack-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 380px);
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    align-items: stretch;
}

.investor-pack-grid::-webkit-scrollbar {
    height: 8px;
}

.investor-pack-grid::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.16);
    border-radius: 999px;
}

.investor-pack-grid::-webkit-scrollbar-thumb {
    background: rgba(20, 145, 229, 0.45);
    border-radius: 999px;
}

.investor-pack-card {
    border-radius: 22px;
    padding: 18px;
    display: grid;
    gap: 14px;
    min-width: 0;
    scroll-snap-align: start;
}

.investor-pack-card--low {
    background: linear-gradient(180deg, rgba(34,197,94,0.07), rgba(34,197,94,0.01));
}

.investor-pack-card--moderate {
    background: linear-gradient(180deg, rgba(20,145,229,0.07), rgba(20,145,229,0.01));
}

.investor-pack-card--high {
    background: linear-gradient(180deg, rgba(239,68,68,0.07), rgba(239,68,68,0.01));
}

.investor-pack-card__top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.investor-pack-card__top h3 {
    margin-top: 4px;
    color: var(--text);
    font-size: 20px;
}

.investor-pack-card__top strong {
    color: var(--text);
    font-size: 28px;
    font-weight: 800;
}

.investor-pack-card p {
    color: var(--muted);
    line-height: 1.7;
}

.investor-pack-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.investor-pack-card__metrics div {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--border);
}

.investor-pack-card__metrics strong {
    color: var(--text);
    font-size: 16px;
}

.investor-pack-card__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.investor-table-wrap {
    overflow-x: auto;
}

.investor-progress {
    width: 140px;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.investor-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1491e5, #16c47f);
}

.investor-activity-list {
    display: grid;
    gap: 12px;
}

.investor-activity-item {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.investor-activity-item strong {
    display: block;
    color: var(--text);
}

.investor-activity-item span {
    color: var(--muted);
    font-size: 13px;
}

.investor-activity-amount {
    font-weight: 800;
    text-align: right;
    line-height: 1.35;
}

.investor-activity-item .amount-negative {
    color: #dc2626;
}

body.theme-dark .investor-activity-item .amount-negative {
    color: #f87171;
}

.investor-empty {
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed var(--border);
    color: var(--muted);
    text-align: center;
}

.invest-admin-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.2fr);
    gap: 20px;
}

.invest-admin-form-card,
.invest-admin-list-card {
    padding: 22px;
}

.invest-admin-pack-list {
    display: grid;
    gap: 14px;
}

.invest-admin-pack-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.invest-admin-pack-item strong {
    color: var(--text);
    display: block;
}

.invest-admin-pack-item span {
    color: var(--muted);
    font-size: 13px;
}

.invest-admin-pack-item__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 1120px) {
    .investor-grid,
    .investor-grid--lower,
    .invest-admin-grid {
        grid-template-columns: 1fr;
    }

    .investor-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .investor-hero,
    .investor-pack-card__form,
    .invest-admin-pack-item,
    .investor-hero__actions {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .investor-pack-card__metrics {
        grid-template-columns: 1fr;
    }

    .investor-pack-grid {
        grid-auto-columns: minmax(280px, 88vw);
    }

    .investor-hero h1 {
        font-size: 28px;
    }
}

.market-hero__eyebrow {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.market-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.market-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    line-height: 1.65;
}

.market-hero__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.market-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 22px;
}

.market-panel {
    min-width: 0;
    padding: 22px;
    border-radius: 24px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.market-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.market-section-head span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.market-section-head h2 {
    margin: 0;
    font-size: 22px;
    color: var(--text);
}

.market-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
}

.market-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.market-table th,
.market-table td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.market-table th {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.market-table tr:last-child td {
    border-bottom: 0;
}

.market-asset {
    display: flex;
    align-items: center;
    gap: 12px;
}

.market-asset > span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin: 0;
    font-size: 12px;
    font-weight: 900;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.12);
}

.market-asset strong {
    color: var(--text);
}

.market-asset--stacked {
    align-items: center;
}

.market-asset__category {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

.market-asset__copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.market-asset__copy strong {
    display: block;
    line-height: 1.25;
    word-break: break-word;
}

.market-allocation {
    width: 160px;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .18);
    overflow: hidden;
}

.market-allocation span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #38bdf8);
}

.market-action-list,
.market-opportunity-list {
    display: grid;
    gap: 12px;
}

.market-action-list a,
.market-opportunity-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    color: var(--text);
    text-decoration: none;
    background: rgba(18, 151, 216, 0.08);
    border: 1px solid rgba(18, 151, 216, 0.12);
}

.market-action-list a {
    justify-content: flex-start;
}

.market-opportunity-list span {
    margin: 0;
    color: var(--muted);
}

body.theme-dark .banking-v2__metric-card,
body.theme-dark .market-metric-card,
body.theme-dark .market-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 12, 27, 0.98));
    border-color: rgba(125, 211, 252, 0.16);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

body.theme-dark .market-table th,
body.theme-dark .market-table td {
    border-color: rgba(148, 163, 184, .14);
}

@media (max-width: 1180px) {
    .banking-v2__metrics-strip,
    .market-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .banking-v2__metrics-strip,
    .market-metrics {
        grid-template-columns: 1fr;
    }

    .market-hero {
        flex-direction: column;
        padding: 20px;
    }

    .market-hero__actions,
    .market-hero__actions .btn {
        width: 100%;
    }

    .market-hero__actions {
        flex-direction: column;
    }
}

/* Live Crypto Workspace */

.crypto-live-page {
    display: grid;
    gap: 22px;
}

.crypto-live-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 28px;
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.30), transparent 31%),
        linear-gradient(135deg, #061525 0%, #0a2a4a 52%, #0f766e 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.crypto-live-hero__eyebrow {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.crypto-live-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.crypto-live-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    line-height: 1.65;
}

.crypto-live-hero__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.crypto-live-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(140px, .35fr) minmax(220px, .75fr) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    border-radius: 24px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.crypto-live-field {
    position: relative;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.crypto-search-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    max-height: 310px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
}

.crypto-search-results.is-open {
    display: grid;
    gap: 6px;
}

.crypto-search-results button,
.crypto-search-results__empty {
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 28px auto 1fr;
    gap: 10px;
    align-items: center;
    text-align: left;
    color: var(--text);
    background: transparent;
}

.crypto-search-results button:hover {
    background: rgba(20, 184, 166, .10);
}

.crypto-search-results img,
.crypto-search-results button > span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(20, 184, 166, .12);
}

.crypto-search-results strong {
    font-size: 13px;
}

.crypto-search-results small,
.crypto-search-results__empty {
    color: var(--muted);
}

.crypto-search-results__empty {
    display: block;
}

.crypto-live-field label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--muted);
}

.crypto-live-field select,
.crypto-live-field input {
    width: 100%;
    min-width: 0;
    height: 46px;
    border-radius: 14px;
    padding: 0 14px;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    outline: none;
}

.crypto-live-sync {
    height: 46px;
    padding: 0 16px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text);
    background: rgba(20, 184, 166, .09);
    border: 1px solid rgba(20, 184, 166, .18);
}

.crypto-live-sync span {
    width: 10px;
    height: 10px;
    margin: 0;
    border-radius: 999px;
    background: #f59e0b;
}

.crypto-live-sync span.is-ok {
    background: #10b981;
}

.crypto-live-sync span.is-error {
    background: #ef4444;
}

.crypto-live-sync span.is-loading {
    background: #38bdf8;
    box-shadow: 0 0 0 6px rgba(56, 189, 248, .14);
}

.crypto-live-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.crypto-live-metric {
    min-width: 0;
    min-height: 98px;
    padding: 18px 20px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.crypto-live-metric__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #0f766e;
    background: rgba(20, 184, 166, .12);
    border: 1px solid rgba(20, 184, 166, .18);
}

.crypto-live-icon,
.crypto-live-icon svg {
    width: 20px;
    height: 20px;
}

.crypto-live-metric span {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--muted);
}

.crypto-live-metric strong {
    display: block;
    max-width: 100%;
    font-size: 23px;
    line-height: 1;
    color: var(--text);
    overflow-wrap: anywhere;
}

.crypto-live-metric strong.is-negative {
    color: #ef4444;
}

.crypto-live-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
    gap: 22px;
}

.crypto-live-panel {
    min-width: 0;
    padding: 22px;
    border-radius: 24px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.crypto-live-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.crypto-live-panel__head span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.crypto-live-panel__head h2 {
    margin: 0;
    font-size: 22px;
    color: var(--text);
}

.crypto-range-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(148, 163, 184, .12);
}

.crypto-range-tabs button {
    min-width: 48px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.crypto-range-tabs button.is-active {
    color: #fff;
    background: #0f766e;
}

.crypto-chart-shell {
    position: relative;
    width: 100%;
    min-height: 320px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--card);
}

.crypto-chart-shell canvas {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: block;
}

.crypto-chart-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: rgba(255, 255, 255, .72);
}

.crypto-chart-empty.is-hidden {
    display: none;
}

.crypto-converter {
    display: grid;
    gap: 16px;
}

.crypto-converter-result {
    padding: 16px;
    border-radius: 18px;
    background: rgba(20, 184, 166, .10);
    border: 1px solid rgba(20, 184, 166, .16);
}

.crypto-converter-result span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
}

.crypto-converter-result strong {
    color: var(--text);
    font-size: 22px;
    overflow-wrap: anywhere;
}

.crypto-market-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
}

.crypto-market-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.crypto-market-table th,
.crypto-market-table td {
    padding: 15px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.crypto-market-table th {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.crypto-market-table tr:last-child td {
    border-bottom: 0;
}

.crypto-market-table tr.is-active td {
    background: rgba(20, 184, 166, .08);
}

.crypto-market-asset {
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.crypto-market-asset img {
    width: 34px;
    height: 34px;
    border-radius: 999px;
}

.crypto-market-asset span,
.crypto-market-asset small,
.crypto-market-asset strong {
    display: block;
}

.crypto-market-asset strong {
    color: var(--text);
}

.crypto-market-asset small {
    color: var(--muted);
}

body.theme-dark .crypto-live-toolbar,
body.theme-dark .crypto-live-metric,
body.theme-dark .crypto-live-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 12, 27, 0.98));
    border-color: rgba(125, 211, 252, 0.16);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

body.theme-dark .crypto-live-field select,
body.theme-dark .crypto-live-field input {
    background: rgba(15, 23, 42, .94);
    color: #f8fafc;
    border-color: rgba(148, 163, 184, .22);
}

body.theme-dark .crypto-chart-empty {
    background: rgba(2, 12, 27, .78);
}

.exchange-preview-card,
.admin-exchange-preview {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 16px;
    color: var(--text);
    background: rgba(20, 184, 166, .10);
    border: 1px solid rgba(20, 184, 166, .18);
}

.exchange-preview-card {
    margin: 14px 0;
}

.exchange-preview-card__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #0f766e;
    background: rgba(20, 184, 166, .14);
}

.exchange-preview-card__svg,
.exchange-preview-card__svg svg {
    width: 20px;
    height: 20px;
}

.exchange-preview-card span,
.admin-exchange-preview strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.exchange-preview-card strong {
    display: block;
    color: var(--text);
    line-height: 1.35;
}

.exchange-preview-card small,
.admin-exchange-preview small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45;
}

.admin-exchange-preview {
    display: block;
}

.crypto-banking-panel {
    padding: 22px;
    border-radius: 26px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.crypto-banking-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.crypto-only-method {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line-color, #d7e0f0);
    border-radius: 12px;
    background: var(--surface-soft, #f7faff);
}

.crypto-only-method strong {
    font-size: 0.95rem;
    color: var(--text-strong, #0f172a);
}

.crypto-only-method small {
    margin-left: auto;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
}

.crypto-wallet-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.crypto-wallet-summary__value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-strong, #0f172a);
}

.crypto-wallet-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.crypto-wallet-card {
    border: 1px solid var(--line-color, #d7e0f0);
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
    background: var(--surface-soft, #f8fbff);
}

.crypto-wallet-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.crypto-wallet-card__head span {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
}

.crypto-wallet-card__balance {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-strong, #0f172a);
}

.crypto-wallet-card__value {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    margin-top: 0.2rem;
}

.crypto-wallet-card__address {
    margin-top: 0.45rem;
    font-size: 0.73rem;
    color: var(--text-muted, #64748b);
    word-break: break-all;
}

body.theme-dark .crypto-only-method,
body.theme-dark .crypto-wallet-card {
    background: rgba(13, 23, 46, 0.9);
    border-color: rgba(90, 113, 157, 0.42);
}

body.theme-dark .crypto-wallet-summary__value,
body.theme-dark .crypto-only-method strong,
body.theme-dark .crypto-wallet-card__balance {
    color: #e7f1ff;
}

body.theme-dark .crypto-wallet-card__value,
body.theme-dark .crypto-wallet-card__address,
body.theme-dark .crypto-wallet-card__head span,
body.theme-dark .crypto-only-method small {
    color: #9fb5db;
}

/* Banking page professional redesign */
.banking-v2 {
    display: grid;
    gap: 1rem;
}

.banking-v2__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dbe7fb;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f2f8ff 100%);
}

.banking-v2__title {
    font-size: 1.75rem;
    line-height: 1.15;
    margin: 0.15rem 0 0.35rem;
}

.banking-v2__subtitle {
    margin: 0;
    font-size: 0.92rem;
}

.banking-v2__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.banking-v2__action {
    min-height: 40px;
    padding: 0.45rem 0.85rem;
}

.banking-v2__metrics-strip {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.banking-v2__metric-card {
    border: 1px solid #dbe7fb;
    border-radius: 12px;
    background: #fff;
}

.banking-v2__hero {
    border: 1px solid #dbe7fb;
    border-radius: 12px;
    background: #fff;
}

.banking-v2__hero-amount {
    font-size: clamp(1.4rem, 2.8vw, 2rem);
}

.banking-v2__accounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.banking-v2__account-card {
    border: 1px solid #dbe7fb;
    border-radius: 12px;
    background: #fff;
    min-height: 132px;
}

.banking-v2__grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 0.9rem;
}

.banking-v2__panel {
    border: 1px solid #dbe7fb;
    border-radius: 12px;
    background: #fff;
}

.banking-v2__panel-head {
    padding-bottom: 0.55rem;
    border-bottom: 1px solid #edf2fd;
}

.banking-v2__row {
    border-bottom: 1px solid #eef3fc;
}

.banking-v2__row:last-child {
    border-bottom: 0;
}

.deposit-qr-block {
    margin-top: 0.85rem;
    padding: 0.9rem;
    border: 1px solid #dbe7fb;
    border-radius: 12px;
    background: #f8fbff;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    justify-items: center;
    text-align: center;
}

.deposit-qr-visual {
    width: 100%;
    display: grid;
    justify-items: center;
}

.deposit-qr-image {
    width: 156px;
    height: 156px;
    border-radius: 8px;
    border: 1px solid #dbe7fb;
    background: #fff;
}

.deposit-qr-meta {
    display: grid;
    gap: 0.55rem;
    justify-items: center;
    width: 100%;
    max-width: 320px;
}

.deposit-qr-block--receipt {
    margin-top: 0.35rem;
}

.deposit-warning-box--receipt {
    margin-top: 0.2rem;
    font-size: 12px;
    line-height: 1.6;
}

.form-block-hint {
    display: block;
    margin-top: 0.45rem;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
}

body.theme-dark .banking-v2__header,
body.theme-dark .banking-v2__metric-card,
body.theme-dark .banking-v2__hero,
body.theme-dark .banking-v2__account-card,
body.theme-dark .banking-v2__panel {
    background: rgba(10, 21, 42, 0.88);
    border-color: rgba(75, 102, 150, 0.45);
}

body.theme-dark .banking-v2__panel-head,
body.theme-dark .banking-v2__row {
    border-color: rgba(75, 102, 150, 0.3);
}

body.theme-dark .deposit-qr-block {
    background: rgba(15, 31, 59, 0.88);
    border-color: rgba(75, 102, 150, 0.45);
}

@media (max-width: 1200px) {
    .banking-v2__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 880px) {
    .banking-v2__header {
        flex-direction: column;
    }

    .deposit-qr-block {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .deposit-qr-image {
        width: 150px;
        height: 150px;
    }
}

.segmented-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.segmented-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.segmented-grid-1 {
    grid-template-columns: minmax(0, 1fr);
}

.transfer-fee-preview {
    margin-top: 0.35rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.transfer-fee-preview > div {
    border: 1px solid #dbe7fb;
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(145deg, #f8fbff, #eef6ff);
    display: grid;
    gap: 0.2rem;
}

.transfer-fee-preview span {
    font-size: 0.75rem;
    color: #64748b;
}

.transfer-fee-preview strong {
    color: #0f172a;
    font-size: 0.95rem;
}

.transfer-fee-preview.is-danger > div {
    border-color: rgba(220, 38, 38, 0.35);
    background: linear-gradient(145deg, #fff1f2, #ffe4e6);
}

.transfer-fee-note {
    margin: 0.55rem 0 0;
    font-size: 0.84rem;
    color: #64748b;
}

.transfer-modal-dialog .btn.btn-outline,
.transfer-modal-dialog .btn.btn-primary {
    width: 100%;
    min-height: 44px;
}

body.theme-dark .transfer-fee-preview > div {
    background: rgba(13, 29, 56, 0.88);
    border-color: rgba(80, 109, 160, 0.45);
}

body.theme-dark .transfer-fee-preview span {
    color: #98add0;
}

body.theme-dark .transfer-fee-preview strong {
    color: #e7f1ff;
}

body.theme-dark .transfer-picker-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(12, 18, 31, 0.96));
}

body.theme-dark .transfer-crypto-option,
body.dark-mode .transfer-crypto-option {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(12, 18, 31, 0.96));
    border-color: rgba(148, 163, 184, 0.18);
}

body.theme-dark .transfer-crypto-option__copy strong,
body.dark-mode .transfer-crypto-option__copy strong {
    color: #e5eefc;
}

body.theme-dark .transfer-crypto-option__copy small,
body.dark-mode .transfer-crypto-option__copy small {
    color: #8ea2c9;
}

body.theme-dark .transfer-picker-card__icon,
body.dark-mode .transfer-picker-card__icon {
    border-color: rgba(96, 165, 250, 0.16);
    background: rgba(15, 23, 42, 0.88);
}

body.theme-dark .transfer-picker-card__icon--crypto,
body.dark-mode .transfer-picker-card__icon--crypto {
    background: rgba(13, 148, 136, 0.18);
    border-color: rgba(45, 212, 191, 0.24);
}

body.theme-dark .transfer-picker-card__icon--uk,
body.dark-mode .transfer-picker-card__icon--uk {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.28), rgba(185, 28, 28, 0.24));
}


.withdrawal-tracker-page {
    display: grid;
    gap: 20px;
    --withdrawal-tracker-surface: #ffffff;
    --withdrawal-tracker-surface-strong: #fbfdff;
    --withdrawal-tracker-border: rgba(15, 23, 42, 0.08);
    --withdrawal-tracker-border-strong: rgba(148, 163, 184, 0.18);
    --withdrawal-tracker-text: #0f172a;
    --withdrawal-tracker-text-soft: #64748b;
    --withdrawal-tracker-ring-track: #e8eef6;
    --withdrawal-tracker-ring-fill: #1f7ae0;
    --withdrawal-tracker-ring-fill-danger: #ef4444;
    --withdrawal-tracker-alert-bg: #f8fbff;
    --withdrawal-tracker-alert-border: rgba(59, 130, 246, 0.12);
    --withdrawal-tracker-tax-bg: #fff7f7;
    --withdrawal-tracker-tax-border: rgba(239, 68, 68, 0.22);
    --withdrawal-tracker-tax-soft: #b91c1c;
    --withdrawal-tracker-tax-text: #7f1d1d;
    --withdrawal-tracker-shadow: 0 22px 48px rgba(15, 23, 42, 0.10);
}

.withdrawal-tracker-modal-dialog {
    --withdrawal-tracker-surface: #ffffff;
    --withdrawal-tracker-surface-strong: #fbfdff;
    --withdrawal-tracker-border: rgba(15, 23, 42, 0.08);
    --withdrawal-tracker-border-strong: rgba(148, 163, 184, 0.18);
    --withdrawal-tracker-text: #0f172a;
    --withdrawal-tracker-text-soft: #64748b;
    --withdrawal-tracker-ring-track: #e8eef6;
    --withdrawal-tracker-ring-fill: #1f7ae0;
    --withdrawal-tracker-ring-fill-danger: #ef4444;
    --withdrawal-tracker-alert-bg: #f8fbff;
    --withdrawal-tracker-alert-border: rgba(59, 130, 246, 0.12);
    --withdrawal-tracker-tax-bg: #fff7f7;
    --withdrawal-tracker-tax-border: rgba(239, 68, 68, 0.22);
    --withdrawal-tracker-tax-soft: #b91c1c;
    --withdrawal-tracker-tax-text: #7f1d1d;
    --withdrawal-tracker-shadow: 0 22px 48px rgba(15, 23, 42, 0.10);
}

body.theme-dark .withdrawal-tracker-page,
body.dark-mode .withdrawal-tracker-page {
    --withdrawal-tracker-surface: linear-gradient(180deg, rgba(9, 18, 41, 0.98), rgba(15, 23, 42, 0.98));
    --withdrawal-tracker-surface-strong: rgba(15, 23, 42, 0.68);
    --withdrawal-tracker-border: rgba(148, 163, 184, 0.18);
    --withdrawal-tracker-border-strong: rgba(59, 130, 246, 0.20);
    --withdrawal-tracker-text: #e5eefc;
    --withdrawal-tracker-text-soft: #8ea2c9;
    --withdrawal-tracker-ring-track: rgba(255, 255, 255, 0.08);
    --withdrawal-tracker-ring-fill: #38bdf8;
    --withdrawal-tracker-ring-fill-danger: #ef4444;
    --withdrawal-tracker-alert-bg: rgba(37, 99, 235, 0.12);
    --withdrawal-tracker-alert-border: rgba(59, 130, 246, 0.24);
    --withdrawal-tracker-tax-bg: rgba(127, 29, 29, 0.22);
    --withdrawal-tracker-tax-border: rgba(239, 68, 68, 0.28);
    --withdrawal-tracker-tax-soft: #fecaca;
    --withdrawal-tracker-tax-text: #fff1f2;
    --withdrawal-tracker-shadow: 0 28px 60px rgba(2, 6, 23, 0.32);
}

body.theme-dark .withdrawal-tracker-modal-dialog,
body.dark-mode .withdrawal-tracker-modal-dialog {
    --withdrawal-tracker-surface: linear-gradient(180deg, rgba(9, 18, 41, 0.98), rgba(15, 23, 42, 0.98));
    --withdrawal-tracker-surface-strong: rgba(15, 23, 42, 0.68);
    --withdrawal-tracker-border: rgba(148, 163, 184, 0.18);
    --withdrawal-tracker-border-strong: rgba(59, 130, 246, 0.20);
    --withdrawal-tracker-text: #e5eefc;
    --withdrawal-tracker-text-soft: #8ea2c9;
    --withdrawal-tracker-ring-track: rgba(255, 255, 255, 0.08);
    --withdrawal-tracker-ring-fill: #38bdf8;
    --withdrawal-tracker-ring-fill-danger: #ef4444;
    --withdrawal-tracker-alert-bg: rgba(37, 99, 235, 0.12);
    --withdrawal-tracker-alert-border: rgba(59, 130, 246, 0.24);
    --withdrawal-tracker-tax-bg: rgba(127, 29, 29, 0.22);
    --withdrawal-tracker-tax-border: rgba(239, 68, 68, 0.28);
    --withdrawal-tracker-tax-soft: #fecaca;
    --withdrawal-tracker-tax-text: #fff1f2;
    --withdrawal-tracker-shadow: 0 28px 60px rgba(2, 6, 23, 0.32);
}

body.theme-dark .withdrawal-tracker-loading,
body.dark-mode .withdrawal-tracker-loading {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(59, 130, 246, 0.22);
    color: #c8d7ef;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
}

body.theme-dark .withdrawal-tracker-card.is-loading .withdrawal-tracker-panel::after,
body.theme-dark .withdrawal-tracker-card.is-loading .withdrawal-tracker-alert::after,
body.theme-dark .withdrawal-tracker-card.is-loading .withdrawal-tracker-tax::after,
body.dark-mode .withdrawal-tracker-card.is-loading .withdrawal-tracker-panel::after,
body.dark-mode .withdrawal-tracker-card.is-loading .withdrawal-tracker-alert::after,
body.dark-mode .withdrawal-tracker-card.is-loading .withdrawal-tracker-tax::after {
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.14), transparent);
}

.withdrawal-tracker-card {
    position: relative;
    border: 1px solid var(--withdrawal-tracker-border);
    border-radius: 24px;
    padding: 18px;
    background: var(--withdrawal-tracker-surface);
    color: var(--withdrawal-tracker-text);
    box-shadow: var(--withdrawal-tracker-shadow);
}

.withdrawal-tracker-card.is-loading .withdrawal-tracker-grid,
.withdrawal-tracker-card.is-loading .withdrawal-tracker-alert,
.withdrawal-tracker-card.is-loading .withdrawal-tracker-tax {
    opacity: 0.52;
}

.withdrawal-tracker-card.is-loading .withdrawal-tracker-panel,
.withdrawal-tracker-card.is-loading .withdrawal-tracker-alert,
.withdrawal-tracker-card.is-loading .withdrawal-tracker-tax {
    position: relative;
    overflow: hidden;
}

.withdrawal-tracker-card.is-loading .withdrawal-tracker-panel::after,
.withdrawal-tracker-card.is-loading .withdrawal-tracker-alert::after,
.withdrawal-tracker-card.is-loading .withdrawal-tracker-tax::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: withdrawalTrackerShimmer 1.2s linear infinite;
}

.withdrawal-tracker-modal-dialog {
    width: min(700px, 100%);
    background: var(--withdrawal-tracker-surface);
    border-color: var(--withdrawal-tracker-border);
    color: var(--withdrawal-tracker-text);
    box-shadow: var(--withdrawal-tracker-shadow);
}

.withdrawal-tracker-modal-dialog .nova-modal-header {
    background: var(--withdrawal-tracker-surface);
    border-bottom-color: var(--withdrawal-tracker-border);
}

.withdrawal-tracker-modal-dialog .nova-modal-header h3 {
    color: var(--withdrawal-tracker-text);
}

.withdrawal-tracker-modal-dialog .nova-modal-close {
    background: var(--withdrawal-tracker-surface-strong);
    border-color: var(--withdrawal-tracker-border-strong);
    color: var(--withdrawal-tracker-text-soft);
}

.withdrawal-tracker-modal-dialog .nova-modal-close:hover {
    color: var(--withdrawal-tracker-text);
}

.withdrawal-tracker-card--modal {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.withdrawal-tracker-modal-dialog .nova-modal-body {
    padding: 14px 14px 16px;
    background: var(--withdrawal-tracker-surface-strong);
    color: var(--withdrawal-tracker-text-soft);
}

.withdrawal-tracker-loading {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(59, 130, 246, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--withdrawal-tracker-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.withdrawal-tracker-loading.is-visible {
    display: inline-flex;
}

.withdrawal-tracker-loading__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--withdrawal-tracker-ring-fill);
    box-shadow: 0 0 0 0 rgba(31, 122, 224, 0.35);
    animation: withdrawalTrackerPulse 1.3s ease-out infinite;
}

@keyframes withdrawalTrackerPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(31, 122, 224, 0.35);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(31, 122, 224, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(31, 122, 224, 0);
    }
}

@keyframes withdrawalTrackerShimmer {
    100% {
        transform: translateX(100%);
    }
}

.withdrawal-tracker-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.withdrawal-tracker-card__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.withdrawal-tracker-card__eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7b8faa;
}

.withdrawal-tracker-card h1,
.withdrawal-tracker-card strong {
    color: var(--withdrawal-tracker-text);
}

.withdrawal-tracker-card h1 {
    margin: 0;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
}

.withdrawal-tracker-card p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--withdrawal-tracker-text-soft);
}

.withdrawal-tracker-grid {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.withdrawal-tracker-panel {
    border: 1px solid var(--withdrawal-tracker-border-strong);
    border-radius: 16px;
    padding: 14px;
    background: var(--withdrawal-tracker-surface-strong);
}

.withdrawal-tracker-ring {
    --progress: 0;
    width: 142px;
    height: 142px;
    margin: 0 auto;
    border-radius: 999px;
    background: conic-gradient(var(--withdrawal-tracker-ring-fill) calc(var(--progress) * 1%), var(--withdrawal-tracker-ring-track) 0);
    padding: 11px;
}

.withdrawal-tracker-ring.is-danger {
    background: conic-gradient(var(--withdrawal-tracker-ring-fill-danger) calc(var(--progress) * 1%), var(--withdrawal-tracker-ring-track) 0);
}

.withdrawal-tracker-ring.is-success {
    background: conic-gradient(#22c55e calc(var(--progress) * 1%), var(--withdrawal-tracker-ring-track) 0);
}

.withdrawal-tracker-ring__inner {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--withdrawal-tracker-surface);
    display: grid;
    place-items: center;
    text-align: center;
}

.withdrawal-tracker-ring__inner strong {
    font-size: 20px;
    line-height: 1;
}

.withdrawal-tracker-ring__inner span {
    font-size: 10px;
    color: var(--withdrawal-tracker-text-soft);
}

.withdrawal-tracker-panel:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    align-content: start;
}

.withdrawal-tracker-metric {
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    padding: 9px 0;
    display: grid;
    gap: 3px;
}

.withdrawal-tracker-metric span {
    font-size: 10px;
    color: var(--withdrawal-tracker-text-soft);
}

.withdrawal-tracker-metric strong {
    font-size: 13px;
    line-height: 1.25;
    color: var(--withdrawal-tracker-text);
}

.withdrawal-tracker-alert,
.withdrawal-tracker-tax {
    margin-top: 12px;
    border-radius: 14px;
    padding: 12px 14px;
}

.withdrawal-tracker-alert {
    background: var(--withdrawal-tracker-alert-bg);
    border: 1px solid var(--withdrawal-tracker-alert-border);
    font-size: 12px;
    line-height: 1.5;
    color: var(--withdrawal-tracker-text);
}

.withdrawal-tracker-tax {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--withdrawal-tracker-tax-bg);
    border: 1px solid var(--withdrawal-tracker-tax-border);
}

.withdrawal-tracker-tax span {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    color: var(--withdrawal-tracker-tax-soft);
}

.withdrawal-tracker-tax strong {
    font-size: 20px;
    color: var(--withdrawal-tracker-tax-text);
}

.withdrawal-tracker-tax p {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--withdrawal-tracker-tax-soft);
}

.withdrawal-tracker-tax--hidden {
    display: none;
}

.withdrawal-tracker-tax.withdrawal-tracker-tax--hidden {
    display: none !important;
}

.withdrawal-tracker-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.14);
    background: rgba(255, 255, 255, 0.92);
    color: var(--withdrawal-tracker-text-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.withdrawal-tracker-live-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
}

.withdrawal-tracker-live-pill.is-loading {
    border-color: rgba(59, 130, 246, 0.14);
    background: rgba(255, 255, 255, 0.92);
    color: #2563eb;
}

.withdrawal-tracker-live-pill.is-waiting,
.withdrawal-tracker-live-pill.is-danger {
    border-color: rgba(239, 68, 68, 0.24);
    background: #fff1f2;
    color: #dc2626;
}

.withdrawal-tracker-live-pill.is-success {
    border-color: rgba(34, 197, 94, 0.24);
    background: #f0fdf4;
    color: #16a34a;
}

.withdrawal-tracker-card--modal > .withdrawal-tracker-live-pill {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
}

.withdrawal-tracker-live-pill.is-blinking,
.withdrawal-tracker-live-pill.is-blinking .withdrawal-tracker-live-pill__dot {
    animation: withdrawalTrackerBlink 1s ease-in-out infinite;
}

@keyframes withdrawalTrackerBlink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

@media (max-width: 880px) {
    .segmented-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .segmented-grid-3,
    .segmented-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transfer-step2-grid,
    .transfer-modal-dialog .deposit-actions-row {
        grid-template-columns: 1fr;
    }

    .withdrawal-tracker-card__head,
    .withdrawal-tracker-grid,
    .withdrawal-tracker-tax {
        grid-template-columns: 1fr;
        display: grid;
    }

    .withdrawal-tracker-card__actions {
        align-items: stretch;
    }

    .withdrawal-tracker-ring {
        width: 170px;
        height: 170px;
    }

    .withdrawal-tracker-panel:last-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.crypto-banking-panel__head span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.crypto-banking-panel__head h2 {
    margin: 0;
    font-size: 22px;
    color: var(--text);
}

.crypto-banking-widgets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.crypto-banking-widget,
.crypto-settlement-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(20, 184, 166, .10);
    border: 1px solid rgba(20, 184, 166, .16);
}

.crypto-banking-widget__coin,
.crypto-settlement-card__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #0f766e;
    background: rgba(20, 184, 166, .15);
    font-size: 12px;
    font-weight: 900;
}

.crypto-settlement-card__svg,
.crypto-settlement-card__svg svg {
    width: 21px;
    height: 21px;
}

.currency-symbol-badge {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.currency-symbol-badge--usd {
    background: #f4c430;
    color: #111827;
}

.currency-symbol-badge--eur {
    background: #2563eb;
    color: #ffffff;
}

.currency-symbol-badge--gbp {
    background: #dc2626;
    color: #ffffff;
}

.currency-code-badge {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    margin: 0;
    text-indent: 0;
    white-space: nowrap;
}

.currency-code-badge--usd {
    background: #f4c430;
    color: #111827;
}

.currency-code-badge--eur {
    background: #2563eb;
    color: #ffffff;
}

.currency-code-badge--gbp {
    background: #dc2626;
    color: #ffffff;
}

.crypto-banking-widget span,
.crypto-settlement-card span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
}

.crypto-banking-widget strong,
.crypto-settlement-card strong {
    display: block;
    color: var(--text);
    font-size: 18px;
    overflow-wrap: anywhere;
}

.crypto-banking-widget small,
.crypto-settlement-card small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
}

.crypto-banking-widget small.is-negative {
    color: #ef4444;
}

body.theme-dark .crypto-banking-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 12, 27, 0.98));
    border-color: rgba(125, 211, 252, 0.16);
}

@media (max-width: 1180px) {
    .crypto-banking-widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .crypto-banking-panel__head {
        align-items: stretch;
        flex-direction: column;
    }

    .crypto-banking-widgets {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .crypto-live-metrics,
    .crypto-live-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crypto-live-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .crypto-live-hero,
    .crypto-live-panel__head {
        flex-direction: column;
    }

    .crypto-live-hero {
        padding: 20px;
    }

    .crypto-live-hero__actions,
    .crypto-live-hero__actions .btn,
    .crypto-range-tabs {
        width: 100%;
    }

    .crypto-live-hero__actions,
    .crypto-live-metrics,
    .crypto-live-toolbar {
        grid-template-columns: 1fr;
    }

    .crypto-live-hero__actions {
        flex-direction: column;
    }

    .crypto-range-tabs button {
        flex: 1;
    }
}


/* =========================================
   CRYPTO PAGE
========================================= */

.crypto-page {
    display: grid;
    gap: 24px;
}

.crypto-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.crypto-page__title {
    margin: 0 0 8px;
    font-size: 40px;
    line-height: 1.06;
    font-weight: 800;
    color: var(--text);
}

.crypto-page__subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.crypto-page__tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.crypto-tab-btn {
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.crypto-tab-btn.is-active {
    background: var(--card);
    color: var(--text);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.crypto-tab-panel {
    display: none;
}

.crypto-tab-panel.is-active {
    display: block;
}

.crypto-grid {
    display: grid;
    gap: 18px;
}

.crypto-grid--market {
    grid-template-columns: 340px minmax(0, 1fr);
}

.crypto-grid--portfolio {
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
}

.crypto-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 22px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
}

.crypto-card__head {
    margin-bottom: 18px;
}

.crypto-card__head--spread {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.crypto-card__eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b82f6;
}

.crypto-card h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.08;
    color: var(--text);
}

.crypto-card p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.crypto-asset-list {
    display: grid;
    gap: 16px;
}

.crypto-asset-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
}

.crypto-asset-item.is-active {
    background: linear-gradient(135deg, #071632 0%, #0b1f45 44%, #0e2b63 100%);
    border-color: transparent;
    color: #fff;
}

.crypto-asset-item.is-active strong,
.crypto-asset-item.is-active span {
    color: #fff;
}

.crypto-asset-item__left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.crypto-asset-item__left strong,
.crypto-asset-item__right strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    color: var(--text);
}

.crypto-asset-item__left span,
.crypto-asset-item__right span {
    display: block;
    font-size: 14px;
    color: var(--muted);
}

.crypto-asset-item__right {
    text-align: right;
}

.crypto-asset-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    background: #e2e8f0;
    color: #0f172a;
}

.crypto-asset-icon--btc {
    background: rgba(245, 158, 11, 0.16);
    color: #f59e0b;
}

.crypto-asset-icon--eth {
    background: rgba(99, 102, 241, 0.16);
    color: #6366f1;
}

.crypto-asset-icon--sol {
    background: rgba(34, 197, 94, 0.16);
    color: #22c55e;
}

.crypto-asset-icon--usdt {
    background: rgba(16, 185, 129, 0.16);
    color: #10b981;
}

.crypto-trend {
    font-weight: 700;
}

.crypto-trend.is-up {
    color: #10b981;
}

.crypto-trend.is-down {
    color: #ef4444;
}

.crypto-chart-card__asset {
    display: flex;
    align-items: center;
    gap: 14px;
}

.crypto-chart-card__value {
    text-align: right;
}

.crypto-chart-card__value strong {
    display: block;
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.crypto-chart-mock {
    position: relative;
    height: 360px;
    border-radius: 22px;
    overflow: hidden;
    background:
        linear-gradient(to bottom, transparent 19%, rgba(148, 163, 184, 0.14) 20%, transparent 21%),
        linear-gradient(to bottom, transparent 39%, rgba(148, 163, 184, 0.14) 40%, transparent 41%),
        linear-gradient(to bottom, transparent 59%, rgba(148, 163, 184, 0.14) 60%, transparent 61%),
        linear-gradient(to bottom, transparent 79%, rgba(148, 163, 184, 0.14) 80%, transparent 81%);
}

.crypto-chart-grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #94a3b8;
    font-size: 14px;
    z-index: 2;
}

.crypto-chart-svg {
    position: absolute;
    inset: 0 0 0 88px;
    width: calc(100% - 88px);
    height: 100%;
}

.crypto-wallet-summary-card {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 24%),
        linear-gradient(135deg, #071632 0%, #0b1f45 44%, #0e2b63 100%);
    color: #fff;
    border-color: transparent;
}

.crypto-wallet-summary-card h2,
.crypto-wallet-summary-card .crypto-card__eyebrow {
    color: #fff;
}

.crypto-wallet-total strong {
    display: block;
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    margin-bottom: 10px;
}

.crypto-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.crypto-mini-stat {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
}

.crypto-mini-stat span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.76);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.crypto-mini-stat strong {
    font-size: 16px;
    color: #fff;
}

.crypto-holdings-list,
.crypto-history-list {
    display: grid;
    gap: 14px;
}

.crypto-holding-row,
.crypto-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.crypto-holding-row:last-child,
.crypto-history-row:last-child {
    border-bottom: none;
}

.crypto-holding-row__left,
.crypto-history-row__left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.crypto-holding-row__left strong,
.crypto-history-row__left strong,
.crypto-holding-row__right strong,
.crypto-history-row__right strong {
    display: block;
    color: var(--text);
    font-size: 16px;
}

.crypto-holding-row__left span,
.crypto-history-row__left span,
.crypto-holding-row__right span {
    color: var(--muted);
    font-size: 14px;
}

.crypto-holding-row__right,
.crypto-history-row__right {
    text-align: right;
}

.crypto-exchange-card {
    max-width: 920px;
}

.crypto-exchange-grid {
    display: grid;
    grid-template-columns: 1fr 70px 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
}

.crypto-exchange-box label {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.crypto-exchange-input {
    height: 66px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 0 18px;
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}

.crypto-exchange-arrow {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    margin: 0 auto;
}

.crypto-exchange-summary {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

.crypto-exchange-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--surface);
}

.crypto-exchange-summary span {
    color: var(--muted);
}

.crypto-exchange-summary strong {
    color: var(--text);
}

.crypto-action-row {
    display: flex;
    justify-content: flex-end;
}

.crypto-staking-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.crypto-staking-card {
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    display: grid;
    gap: 16px;
}

.crypto-staking-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.crypto-staking-card__value {
    font-size: 34px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.crypto-staking-card__meta {
    display: grid;
    gap: 10px;
}

.crypto-staking-card__meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.crypto-staking-card__meta span {
    color: var(--muted);
    font-size: 14px;
}

.crypto-staking-card__meta strong {
    color: var(--text);
    font-size: 14px;
}

@media (max-width: 1200px) {
    .crypto-grid--market,
    .crypto-grid--portfolio {
        grid-template-columns: 1fr;
    }

    .crypto-staking-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .crypto-page__tabs {
        width: 100%;
    }

    .crypto-tab-btn {
        flex: 1 1 calc(50% - 10px);
    }

    .crypto-exchange-grid {
        grid-template-columns: 1fr;
    }

    .crypto-action-row {
        justify-content: stretch;
    }

    .crypto-action-row .btn {
        width: 100%;
    }

    .crypto-staking-grid {
        grid-template-columns: 1fr;
    }

    .crypto-mini-stats {
        grid-template-columns: 1fr;
    }

    .crypto-holding-row,
    .crypto-history-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .crypto-holding-row__right,
    .crypto-history-row__right {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .crypto-page__title {
        font-size: 32px;
    }

    .crypto-card {
        padding: 18px;
        border-radius: 22px;
    }

    .crypto-card h2 {
        font-size: 24px;
    }

    .crypto-wallet-total strong {
        font-size: 32px;
    }

    .crypto-chart-grid-lines {
        width: 72px;
        font-size: 12px;
    }

    .crypto-chart-svg {
        inset: 0 0 0 70px;
        width: calc(100% - 70px);
    }
}

/* =========================================
   CRYPTO MARKET V1
========================================= */

.crypto-market-page,
.crypto-asset-page {
    display: grid;
    gap: 24px;
}

.crypto-market-page__header,
.crypto-asset-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.crypto-market-page__eyebrow,
.crypto-asset-page__eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b82f6;
}

.crypto-market-page__title,
.crypto-asset-page__title {
    margin: 0;
    font-size: 36px;
    line-height: 1.05;
    font-weight: 800;
    color: var(--text);
}

.crypto-market-page__title small,
.crypto-asset-page__title small {
    margin-left: 10px;
    font-size: 18px;
    color: var(--muted);
}

.crypto-market-page__subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
    max-width: 720px;
}

.crypto-market-panel,
.crypto-asset-hero {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 22px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
}

.crypto-market-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
    overscroll-behavior-x: contain;
}

.crypto-market-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 880px;
}

.crypto-market-table th,
.crypto-market-table td {
    padding: 16px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.crypto-market-table th {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.crypto-market-table td {
    font-size: 15px;
    color: var(--text);
}

.crypto-market-table tbody tr:last-child td {
    border-bottom: none;
}

.crypto-market-asset {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
}

.crypto-market-asset__icon,
.crypto-asset-page__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f5f9;
}

.crypto-market-asset__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crypto-market-asset__copy strong {
    font-size: 15px;
    color: var(--text);
}

.crypto-market-asset__copy small {
    font-size: 13px;
    color: var(--muted);
}

.crypto-market-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.crypto-market-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.crypto-market-pagination__label {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.crypto-market-page,
.crypto-market-panel,
.cryptopulse-panel,
.cryptopulse-table-wrap {
    min-width: 0;
}

.cryptopulse-table-wrap,
.crypto-market-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.34) transparent;
}

.cryptopulse-table-wrap::-webkit-scrollbar,
.crypto-market-table-wrap::-webkit-scrollbar {
    height: 6px;
}

.cryptopulse-table-wrap::-webkit-scrollbar-track,
.crypto-market-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.cryptopulse-table-wrap::-webkit-scrollbar-thumb,
.crypto-market-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.34);
    border-radius: 999px;
}

.cryptopulse-table-wrap:hover::-webkit-scrollbar-thumb,
.crypto-market-table-wrap:hover::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.5);
}

.is-positive {
    color: #10b981 !important;
    font-weight: 800;
}

.is-negative {
    color: #ef4444 !important;
    font-weight: 800;
}

.crypto-asset-page__title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.crypto-asset-page__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.crypto-asset-hero__main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.crypto-asset-hero__price {
    font-size: 48px;
    line-height: 1;
    font-weight: 800;
    color: var(--text);
}

.crypto-asset-hero__change {
    font-size: 22px;
    font-weight: 800;
}

.crypto-asset-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.crypto-asset-stat {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    background: var(--surface);
}

.crypto-asset-stat span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--muted);
}

.crypto-asset-stat strong {
    font-size: 18px;
    color: var(--text);
}

@media (max-width: 900px) {
    .crypto-asset-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .crypto-market-page__title,
    .crypto-asset-page__title {
        font-size: 28px;
    }

    .crypto-market-panel,
    .crypto-asset-hero {
        padding: 18px;
        border-radius: 22px;
    }

    .crypto-asset-hero__price {
        font-size: 34px;
    }

    .crypto-asset-stats {
        grid-template-columns: 1fr;
    }

    .crypto-market-pagination {
        align-items: stretch;
    }

    .crypto-market-pagination .btn {
        width: 100%;
    }

    .crypto-market-table {
        min-width: 760px;
    }
}

.crypto-page__welcome-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 18px;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
}

.crypto-page__welcome-copy h2 {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.06;
    color: var(--text);
}

.crypto-page__welcome-copy p {
    margin: 0;
    max-width: 620px;
    color: var(--muted);
    line-height: 1.7;
    font-size: 15px;
}

.crypto-page__welcome-actions {
    margin-top: 18px;
}

.crypto-page__welcome-stats {
    display: grid;
    gap: 12px;
}

.crypto-page__welcome-stat {
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.crypto-page__welcome-stat span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.crypto-page__welcome-stat strong {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--text);
}

.crypto-page__tabs a.crypto-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

@media (max-width: 900px) {
    .crypto-page__welcome-card {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   CRYPTO HOME HERO
========================================= */

.crypto-home-hero {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 18px;
}

.crypto-home-hero__assets,
.crypto-home-hero__chart {
    min-height: 100%;
}

.crypto-home-hero__chart {
    display: grid;
    gap: 20px;
}

.crypto-home-hero__chart-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.crypto-home-chart {
    position: relative;
    height: 390px;
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(to bottom, transparent 15%, rgba(148, 163, 184, 0.14) 16%, transparent 17%),
        linear-gradient(to bottom, transparent 33%, rgba(148, 163, 184, 0.14) 34%, transparent 35%),
        linear-gradient(to bottom, transparent 51%, rgba(148, 163, 184, 0.14) 52%, transparent 53%),
        linear-gradient(to bottom, transparent 69%, rgba(148, 163, 184, 0.14) 70%, transparent 71%),
        linear-gradient(to bottom, transparent 87%, rgba(148, 163, 184, 0.14) 88%, transparent 89%);
}

.crypto-home-chart__labels {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 34px;
    width: 92px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #94a3b8;
    font-size: 14px;
    z-index: 2;
}

.crypto-home-chart__svg {
    position: absolute;
    inset: 0 0 34px 90px;
    width: calc(100% - 90px);
    height: calc(100% - 34px);
}

.crypto-home-chart__xaxis {
    position: absolute;
    left: 90px;
    right: 0;
    bottom: 0;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #94a3b8;
    font-size: 13px;
}

#cryptoHeroLinePath {
    transition: d .55s ease;
}

#cryptoHeroAreaPath {
    transition: d .55s ease;
}

#cryptoHeroLinePath.is-animating {
    animation: cryptoHeroLinePulse .55s ease;
}

#cryptoHeroAreaPath.is-animating {
    animation: cryptoHeroAreaFade .55s ease;
}

@keyframes cryptoHeroLinePulse {
    0% {
        opacity: .45;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cryptoHeroAreaFade {
    0% {
        opacity: .18;
    }
    100% {
        opacity: 1;
    }
}

.crypto-home-hero__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.crypto-home-hero__mini-stats {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}

.crypto-home-hero__mini-stats > div {
    min-width: 160px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.crypto-home-hero__mini-stats span {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.crypto-home-hero__mini-stats strong {
    font-size: 18px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--text);
}

.crypto-asset-item[data-home-asset-card] {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.crypto-asset-item[data-home-asset-card]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

@media (max-width: 1200px) {
    .crypto-home-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .crypto-home-chart {
        height: 320px;
    }

    .crypto-home-hero__footer {
        flex-direction: column;
    }

    .crypto-home-hero__mini-stats {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .crypto-home-chart__labels {
        width: 72px;
        font-size: 12px;
    }

    .crypto-home-chart__svg {
        inset: 0 0 34px 70px;
        width: calc(100% - 70px);
    }

    .crypto-home-chart__xaxis {
        left: 70px;
        font-size: 11px;
    }
}

/* =========================================
   CRYPTO HERO REFINEMENT
========================================= */

.crypto-card {
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.045);
}

.crypto-card__eyebrow {
    font-size: 12px;
    letter-spacing: .12em;
    margin-bottom: 10px;
}

.crypto-card h2 {
    font-size: 24px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.crypto-page__title {
    font-size: 34px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.crypto-page__subtitle {
    font-size: 15px;
    line-height: 1.65;
    max-width: 760px;
    color: #64748b;
}

.crypto-home-hero {
    gap: 20px;
    align-items: stretch;
}

.crypto-home-hero__assets {
    padding: 18px;
}

.crypto-home-hero__chart {
    padding: 18px 20px 20px;
}

.crypto-asset-list {
    gap: 14px;
}

.crypto-asset-item {
    padding: 14px 16px;
    border-radius: 18px;
    box-shadow: none;
}

.crypto-asset-item__left {
    gap: 12px;
}

.crypto-asset-item__left strong,
.crypto-asset-item__right strong {
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.crypto-asset-item__left span,
.crypto-asset-item__right span {
    font-size: 13px;
    line-height: 1.25;
}

.crypto-asset-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
    font-weight: 800;
}

.crypto-home-hero__chart-brand {
    gap: 12px;
}

.crypto-home-hero__chart-brand .crypto-asset-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
}

.crypto-chart-card__value strong {
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.crypto-trend {
    font-size: 14px;
    font-weight: 800;
}

.crypto-home-chart {
    height: 345px;
    border-radius: 20px;
}

.crypto-home-chart__labels {
    width: 82px;
    font-size: 13px;
}

.crypto-home-chart__svg {
    inset: 0 0 34px 82px;
    width: calc(100% - 82px);
}

.crypto-home-chart__xaxis {
    left: 82px;
    font-size: 12px;
    color: #94a3b8;
}

.crypto-home-hero__footer {
    gap: 16px;
    align-items: center;
}

.crypto-home-hero__footer .btn {
    min-width: 220px;
    height: 46px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
}

.crypto-home-hero__mini-stats {
    gap: 10px;
}

.crypto-home-hero__mini-stats > div {
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 16px;
}

.crypto-home-hero__mini-stats span {
    font-size: 10px;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.crypto-home-hero__mini-stats strong {
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.crypto-tab-btn {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .crypto-home-chart {
        height: 320px;
    }
}

@media (max-width: 768px) {
    .crypto-page__title {
        font-size: 30px;
    }

    .crypto-card h2 {
        font-size: 22px;
    }

    .crypto-home-hero__chart,
    .crypto-home-hero__assets {
        padding: 16px;
    }

    .crypto-home-chart {
        height: 300px;
    }

    .crypto-home-hero__footer .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .crypto-asset-item {
        padding: 13px 14px;
    }

    .crypto-asset-item__left strong,
    .crypto-asset-item__right strong {
        font-size: 15px;
    }

    .crypto-home-chart__labels {
        width: 68px;
        font-size: 11px;
    }

    .crypto-home-chart__svg {
        inset: 0 0 30px 68px;
        width: calc(100% - 68px);
    }

    .crypto-home-chart__xaxis {
        left: 68px;
        font-size: 10px;
    }
}
/* =========================================
   CRYPTO TRADE ACTIONS + MODAL
========================================= */

.crypto-market-row {
    transition: background .18s ease, transform .18s ease;
}

.crypto-market-row:hover {
    background: rgba(20, 145, 229, 0.03);
}

.crypto-market-price {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.crypto-market-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-trade-ghost {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03);
}

.btn-trade-ghost:hover {
    background: #f8fbff;
    border-color: #b9d9f6;
    transform: translateY(-1px);
}

body.theme-dark .btn-trade-ghost,
body.dark-mode .btn-trade-ghost {
    background: #172b4d;
    border-color: #2e4673;
    color: #d9e9ff;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.35);
}

body.theme-dark .btn-trade-ghost:hover,
body.dark-mode .btn-trade-ghost:hover {
    background: #1d365f;
    border-color: #3b63a5;
    color: #eef5ff;
}

.btn-trade-live {
    background: linear-gradient(135deg, #1491e5 0%, #0d7cc7 100%);
    color: #fff;
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(20, 145, 229, 0.22);
}

.btn-trade-live::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.20) 45%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .55s ease;
}

.btn-trade-live:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(20, 145, 229, 0.32);
}

.btn-trade-live:hover::before {
    transform: translateX(120%);
}

.btn-trade-live__price {
    margin-left: 8px;
    font-weight: 800;
    opacity: .98;
}

.trade-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    padding: 20px;
}

.trade-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trade-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(5px);
}

.trade-modal__dialog {
    position: relative;
    width: min(680px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.24);
    overflow: hidden;
    animation: tradeModalIn .22s ease;
    display: flex;
    flex-direction: column;
}

@keyframes tradeModalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.trade-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.trade-modal__asset {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trade-modal__asset-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f5f9;
}

.trade-modal__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 6px;
}

.trade-modal__asset h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.06;
    color: var(--text);
    font-weight: 800;
}

.trade-modal__close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    color: var(--muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.trade-modal__body {
    padding: 22px;
    display: grid;
    gap: 18px;
    overflow-y: auto;
    flex: 1;
}

.trade-mode-switch {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 4px;
    gap: 4px;
}

.trade-mode-switch__btn {
    min-width: 110px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    cursor: pointer;
}

.trade-mode-switch__btn.is-active {
    background: var(--card);
    color: var(--text);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.trade-price-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(20,145,229,0.10), transparent 28%),
        linear-gradient(135deg, #071632 0%, #0b1f45 52%, #0e2b63 100%);
    color: #fff;
}

.trade-price-card span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,0.72);
}

.trade-price-card strong {
    font-size: 32px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.trade-price-card__change {
    font-size: 18px;
    font-weight: 800;
}

.trade-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.trade-form-group {
    display: grid;
    gap: 8px;
}

.trade-form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.trade-input {
    height: 52px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0 16px;
    font-size: 16px;
    font-weight: 700;
}

.trade-input:focus {
    outline: none;
    border-color: #1491e5;
    box-shadow: 0 0 0 4px rgba(20, 145, 229, 0.10);
}

.trade-quick-amounts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.trade-chip {
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

.trade-chip:hover {
    background: #f8fbff;
    border-color: #b9d9f6;
    color: #1491e5;
}

.trade-summary {
    display: grid;
    gap: 10px;
    border-radius: 20px;
    background: var(--surface);
    padding: 16px;
    border: 1px solid var(--border);
}

.trade-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.trade-summary__row span {
    color: var(--muted);
    font-size: 14px;
}

.trade-summary__row strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.trade-summary__row--total {
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.trade-summary__row--total strong {
    font-size: 18px;
}

.trade-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-trade-confirm {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.24);
}

.btn-trade-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(16, 185, 129, 0.30);
}

body.trade-modal-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .trade-modal {
        padding: 10px;
    }

    .trade-modal.is-open {
        align-items: flex-start;
    }

    .trade-modal__dialog {
        width: min(100vw - 20px, 680px);
        max-height: calc(100vh - 20px);
        margin: 0;
        border-radius: 22px;
    }

    .trade-form-grid {
        grid-template-columns: 1fr;
    }

    .trade-price-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .trade-modal__footer {
        flex-direction: column;
    }

    .trade-modal__footer .btn {
        width: 100%;
    }
}

.trade-wallet-section {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.trade-wallet-section__head h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

.trade-wallet-section__head p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.trade-form-group--memo {
    align-self: end;
}

.trade-select {
    appearance: none;
}

.trade-textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    resize: vertical;
    min-height: 96px;
}

.trade-textarea:focus {
    outline: none;
    border-color: #1491e5;
    box-shadow: 0 0 0 4px rgba(20, 145, 229, 0.10);
}

.trade-admin-wallet-card {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--border);
}

.trade-admin-wallet-card__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.trade-admin-wallet-card__row span {
    color: var(--muted);
    font-size: 14px;
}

.trade-admin-wallet-card__row strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    text-align: right;
    word-break: break-word;
    max-width: 68%;
}

.trade-admin-wallet-card__note {
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

@media (max-width: 768px) {
    .trade-admin-wallet-card__row {
        flex-direction: column;
    }

    .trade-admin-wallet-card__row strong {
        max-width: 100%;
        text-align: left;
    }
}

/* =========================================
   PAYMENT METHOD MODAL
========================================= */

.payment-modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: none;
    padding: 20px;
}

.payment-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(5px);
}

.payment-modal__dialog {
    position: relative;
    width: min(640px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.24);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: tradeModalIn .22s ease;
}

.payment-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--border);
}

.payment-modal__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 6px;
}

.payment-modal__title {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.06;
    color: var(--text);
    font-weight: 800;
}

.payment-modal__subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    max-width: 520px;
}

.payment-modal__close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    color: var(--muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.payment-modal__body {
    padding: 22px;
    display: grid;
    gap: 18px;
    overflow-y: auto;
}

.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.payment-method-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 20px;
    padding: 18px 16px;
    display: grid;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: .2s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03);
}

.payment-method-card:hover {
    transform: translateY(-2px);
    border-color: #b9d9f6;
    box-shadow: 0 14px 28px rgba(20, 145, 229, 0.10);
}

.payment-method-card__icon {
    font-size: 24px;
    line-height: 1;
}

.payment-method-card strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

.payment-method-card span:last-child {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.payment-modal__summary {
    display: grid;
    gap: 10px;
    border-radius: 20px;
    background: var(--surface);
    padding: 16px;
    border: 1px solid var(--border);
}

.payment-modal__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.payment-modal__summary-row span {
    color: var(--muted);
    font-size: 14px;
}

.payment-modal__summary-row strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    text-align: right;
}

.payment-modal__footer {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .payment-modal {
        padding: 10px;
    }

    .payment-modal.is-open {
        align-items: flex-start;
    }

    .payment-modal__dialog {
        width: min(100vw - 20px, 640px);
        max-height: calc(100vh - 20px);
        border-radius: 22px;
    }

    .payment-method-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   ADMIN CRYPTO PAYMENT METHODS
========================================= */

.admin-page__subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.admin-card--table {
    padding: 0;
    overflow: visible;
}

.admin-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

.admin-table thead th {
    padding: 18px 20px;
    text-align: left;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: rgba(248, 250, 252, 0.75);
}

.admin-table tbody td {
    padding: 18px 20px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 15px;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table__primary {
    font-weight: 800;
    color: var(--text);
}

.admin-table__secondary {
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted);
}

.admin-table__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-table__actions form {
    margin: 0;
}

/* Final override: avoid internal vertical scroll on admin listing tables. */
.admin-page .admin-table-wrap,
.admin-panel .admin-table-wrap,
.admin-card .admin-table-wrap,
.admin-card--table .admin-table-wrap {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.admin-table__empty {
    padding: 20px 0;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
}

@media (max-width: 768px) {
    .admin-table thead th,
    .admin-table tbody td {
        padding: 14px 16px;
    }
}

.payment-method-empty {
    grid-column: 1 / -1;
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed var(--border);
    background: var(--surface);
    color: var(--muted);
    text-align: center;
    font-size: 14px;
}
/* =========================================
   ADMIN PAYMENT METHOD EDIT
========================================= */

.admin-form-section {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    margin-bottom: 18px;
}

.admin-form-section__title {
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

.admin-form-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-form-actions {
    margin-top: 20px;
}

.form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .admin-form-grid--2 {
        grid-template-columns: 1fr;
    }

    .admin-form-section {
        padding: 18px;
    }
}

/* =========================
   PAYMENT MODAL (USER)
========================= */

.payment-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
}

.payment-modal.is-open {
    display: block;
}

.payment-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
}

.payment-modal__dialog {
    position: relative;
    max-width: 720px;
    margin: 60px auto;
    background: #fff;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.payment-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.payment-modal__title {
    font-size: 22px;
    font-weight: 800;
    margin: 6px 0;
}

.payment-modal__subtitle {
    font-size: 14px;
    color: var(--text-soft);
}

.payment-modal__close {
    border: none;
    background: #f1f5f9;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

/* =========================
   PAYMENT METHODS GRID
========================= */

.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.payment-method-card {
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 16px;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all .25s ease;
}

.payment-method-card:hover {
    border-color: #1491e5;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(20,145,229,0.12);
}

.payment-method-card.is-selected {
    border-color: #1491e5;
    background: #f5faff;
    box-shadow: 0 0 0 3px rgba(20,145,229,0.15);
}

.payment-method-card__icon {
    font-size: 22px;
}

.payment-method-card strong {
    font-size: 14px;
}

.payment-method-card span {
    font-size: 12px;
    color: var(--text-soft);
}

/* =========================
   PAYMENT DETAILS BLOCK
========================= */

.payment-method-details {
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 18px;
    background: #f9fbfd;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.payment-method-details__head h4 {
    font-size: 16px;
    font-weight: 800;
}

.payment-method-details__head p {
    font-size: 13px;
    color: var(--text-soft);
}

.payment-method-details__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.payment-details-row {
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    border: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payment-details-row span {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-soft);
}

.payment-details-row strong {
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
}

.payment-details-row--full {
    grid-column: 1 / -1;
}

/* =========================
   PAYMENT SUMMARY
========================= */

.payment-modal__summary {
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-modal__summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.payment-modal__summary-row strong {
    font-weight: 700;
}

/* =========================
   FOOTER
========================= */

.payment-modal__footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.payment-modal__footer .btn {
    flex: 1;
}

/* =========================
   EMPTY STATE
========================= */

.payment-method-empty {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--text-soft);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
    .payment-modal__dialog {
        margin: 20px;
        padding: 20px;
    }

    .payment-method-grid {
        grid-template-columns: 1fr;
    }

    .payment-method-details__grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   USER CRYPTO ORDERS
========================================= */

.crypto-orders-page {
    display: grid;
    gap: 20px;
}

.crypto-orders-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 0 4px;
}

.crypto-orders-hero__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 8px;
}

.crypto-orders-hero__title {
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 800;
    color: var(--text);
}

.crypto-orders-hero__subtitle {
    margin: 10px 0 0;
    max-width: 760px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.crypto-orders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.crypto-order-card {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--card);
    padding: 22px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
    display: grid;
    gap: 18px;
}

.crypto-order-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.crypto-order-card__reference {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .02em;
    word-break: break-word;
}

.crypto-order-card__asset {
    margin: 8px 0 0;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--text);
}

.crypto-order-card__asset span {
    color: var(--muted);
    font-size: 18px;
    font-weight: 700;
}

.crypto-order-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.crypto-order-card__meta-item,
.crypto-order-card__footer-item {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.crypto-order-card__meta-item span,
.crypto-order-card__footer-item span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
}

.crypto-order-card__meta-item strong,
.crypto-order-card__footer-item strong {
    font-size: 15px;
    color: var(--text);
    font-weight: 800;
    word-break: break-word;
}

.crypto-order-card__footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.crypto-orders-empty {
    border: 1px dashed var(--border);
    background: var(--card);
    border-radius: 28px;
    padding: 42px 26px;
    text-align: center;
}

.crypto-orders-empty__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 30px;
    font-weight: 800;
    background: linear-gradient(135deg, #071632 0%, #0d2c6c 100%);
    color: #fff;
}

.crypto-orders-empty h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
}

.crypto-orders-empty p {
    margin: 12px auto 0;
    max-width: 620px;
    color: var(--muted);
    line-height: 1.7;
}

.crypto-orders-empty .btn {
    margin-top: 20px;
}

@media (max-width: 900px) {
    .crypto-orders-grid {
        grid-template-columns: 1fr;
    }

    .crypto-order-card__footer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .crypto-orders-hero {
        flex-direction: column;
    }

    .crypto-order-card__meta {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   CRYPTO ASSET DETAIL PAGE
========================================= */

.crypto-asset-page {
    display: grid;
    gap: 22px;
}

.crypto-asset-hero {
    display: grid;
    gap: 20px;
    padding: 24px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(20,145,229,0.10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.crypto-asset-back-btn {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.crypto-asset-back-btn:hover {
    transform: translateX(-2px);
    border-color: rgba(20, 145, 229, .36);
    background: #fff;
}

.crypto-asset-back-btn svg {
    width: 18px;
    height: 18px;
}

.crypto-asset-hero__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.crypto-asset-hero__identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.crypto-asset-hero__icon-wrap {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.crypto-asset-hero__icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.crypto-asset-hero__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 8px;
}

.crypto-asset-hero__title {
    margin: 0;
    font-size: 34px;
    line-height: 1.04;
    font-weight: 800;
    color: var(--text);
}

.crypto-asset-hero__title span {
    margin-left: 8px;
    color: var(--muted);
    font-size: 24px;
    font-weight: 700;
}

.crypto-asset-hero__price-block {
    display: grid;
    gap: 6px;
    min-width: 220px;
    justify-items: end;
}

.crypto-asset-hero__price-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 700;
}

.crypto-asset-hero__price {
    font-size: 40px;
    line-height: 1;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.04em;
}

.crypto-asset-hero__change {
    font-size: 18px;
    font-weight: 800;
}

.crypto-asset-chart-card {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #fff;
    padding: 20px;
    display: grid;
    gap: 16px;
}

.crypto-asset-chart-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.crypto-asset-chart-card__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 800;
    margin-bottom: 6px;
}

.crypto-asset-chart-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
}

.crypto-asset-chart-card__updated {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

.crypto-asset-chart {
    width: 100%;
    height: 260px;
    border-radius: 22px;
    background:
        linear-gradient(to bottom, rgba(20,145,229,0.06), rgba(20,145,229,0.00)),
        #f9fbff;
    overflow: hidden;
}

.crypto-asset-chart__svg {
    width: 100%;
    height: 100%;
    display: block;
}

.crypto-asset-chart__area {
    fill: url(#assetChartFill);
}

.crypto-asset-chart__line {
    fill: none;
    stroke: #1491e5;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 8px 18px rgba(20,145,229,0.20));
}

.crypto-asset-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.crypto-asset-stat {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    padding: 18px 20px;
    display: grid;
    gap: 8px;
}

.crypto-asset-stat span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 700;
}

.crypto-asset-stat strong {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--text);
}

.crypto-asset-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-asset-buy,
.btn-asset-sell {
    min-width: 160px;
}

.crypto-asset-secondary-grid {
    display: grid;
    grid-template-columns: 1.25fr .9fr;
    gap: 20px;
}

.crypto-asset-info-card {
    border: 1px solid var(--border);
    border-radius: 26px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.crypto-asset-info-card--highlight {
    background:
        radial-gradient(circle at top right, rgba(20,145,229,0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.crypto-asset-info-card__head h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}

.crypto-asset-info-card__text {
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.crypto-asset-info-card__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.crypto-asset-info-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.crypto-asset-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.crypto-asset-info-row span {
    color: var(--muted);
    font-size: 14px;
}

.crypto-asset-info-row strong {
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    text-align: right;
}

@media (max-width: 980px) {
    .crypto-asset-stats-grid,
    .crypto-asset-secondary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .crypto-asset-hero {
        padding: 18px;
        border-radius: 24px;
    }

    .crypto-asset-hero__top {
        flex-direction: column;
        align-items: stretch;
    }

    .crypto-asset-hero__price-block {
        justify-items: start;
    }

    .crypto-asset-hero__title {
        font-size: 28px;
    }

    .crypto-asset-hero__title span {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        font-size: 20px;
    }

    .crypto-asset-hero__price {
        font-size: 32px;
    }

    .crypto-asset-chart-card,
    .crypto-asset-info-card {
        padding: 18px;
        border-radius: 22px;
    }

    .crypto-asset-actions,
    .crypto-asset-info-card__actions {
        flex-direction: column;
    }

    .crypto-asset-actions .btn,
    .crypto-asset-info-card__actions .btn {
        width: 100%;
    }

.crypto-asset-stat strong {
    font-size: 20px;
}
}

.crypto-asset-page--pro {
    gap: 24px;
}

.crypto-asset-pro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.95fr);
    gap: 20px;
    align-items: start;
}

.crypto-asset-chart-card--pro,
.crypto-asset-trade-card {
    border: 1px solid var(--border);
    border-radius: 26px;
    background: #fff;
    padding: 22px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.crypto-asset-chart-card__head--stack {
    align-items: stretch;
}

.crypto-asset-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
}

.crypto-asset-toolbar-group {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.crypto-asset-toolbar-group button,
.crypto-asset-trade-switch button {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #f8fafc;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .18s ease;
}

.crypto-asset-toolbar-group button.is-active,
.crypto-asset-trade-switch button.is-active {
    background: rgba(20,145,229,0.12);
    border-color: rgba(20,145,229,0.34);
    color: #0b6db0;
}

.crypto-asset-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    color: var(--muted);
    font-size: 13px;
}

.crypto-asset-chart-legend strong {
    color: var(--text);
    font-weight: 800;
}

.crypto-asset-chart--pro {
    height: 420px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0)),
        #fbfdff;
}

.crypto-asset-chart__svg--pro {
    overflow: visible;
}

.crypto-asset-chart-grid-line {
    stroke: rgba(148, 163, 184, 0.22);
    stroke-width: 1;
}

.crypto-asset-chart-grid-line--vertical {
    stroke-dasharray: 6 6;
}

.crypto-asset-candle-wick {
    stroke-width: 2;
    stroke-linecap: round;
}

.crypto-asset-candle-body.is-up,
.crypto-asset-candle-wick.is-up {
    fill: #10b981;
    stroke: #10b981;
}

.crypto-asset-candle-body.is-down,
.crypto-asset-candle-wick.is-down {
    fill: #ef4444;
    stroke: #ef4444;
}

.crypto-asset-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.crypto-asset-mini-stat {
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid var(--border);
    display: grid;
    gap: 6px;
}

.crypto-asset-mini-stat span {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 700;
}

.crypto-asset-mini-stat strong {
    font-size: 18px;
    color: var(--text);
    font-weight: 800;
}

.is-live-flash {
    animation: cryptoLiveFlash .45s ease;
}

@keyframes cryptoLiveFlash {
    0% {
        color: #0b6db0;
        opacity: .55;
        transform: translateY(1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.crypto-asset-trade-card {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 24px;
}

.crypto-asset-trade-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.crypto-asset-trade-card__head p {
    margin: 0 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 800;
}

.crypto-asset-trade-card__head h3 {
    margin: 0;
    font-size: 24px;
    color: var(--text);
    font-weight: 800;
}

.crypto-asset-trade-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.crypto-asset-order-form {
    display: grid;
    gap: 16px;
}

.crypto-asset-order-form label {
    display: grid;
    gap: 8px;
}

.crypto-asset-order-form label span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.crypto-asset-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.crypto-asset-order-summary,
.crypto-asset-payment-details {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #f8fafc;
    padding: 16px;
    display: grid;
    gap: 12px;
}

.crypto-asset-order-summary__row,
.crypto-asset-payment-details__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.crypto-asset-order-summary__row span,
.crypto-asset-payment-details__row span {
    color: var(--muted);
    font-size: 13px;
}

.crypto-asset-order-summary__row strong,
.crypto-asset-payment-details__row strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    text-align: right;
    overflow-wrap: anywhere;
}

.crypto-asset-payment-details__title {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.crypto-asset-order-submit {
    width: 100%;
}

.crypto-asset-secondary-grid--pro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.theme-dark .crypto-asset-hero,
body.dark-mode .crypto-asset-hero {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 30%),
        linear-gradient(180deg, #142543 0%, #0f1b33 100%);
    border-color: #253454;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.36);
}

body.theme-dark .crypto-asset-chart-card,
body.theme-dark .crypto-asset-chart-card--pro,
body.theme-dark .crypto-asset-trade-card,
body.theme-dark .crypto-asset-stat,
body.theme-dark .crypto-asset-info-card,
body.theme-dark .crypto-asset-mini-stat,
body.theme-dark .crypto-asset-order-summary,
body.theme-dark .crypto-asset-payment-details,
body.theme-dark .crypto-asset-info-row,
body.dark-mode .crypto-asset-chart-card,
body.dark-mode .crypto-asset-chart-card--pro,
body.dark-mode .crypto-asset-trade-card,
body.dark-mode .crypto-asset-stat,
body.dark-mode .crypto-asset-info-card,
body.dark-mode .crypto-asset-mini-stat,
body.dark-mode .crypto-asset-order-summary,
body.dark-mode .crypto-asset-payment-details,
body.dark-mode .crypto-asset-info-row {
    background: #0f1b33;
    border-color: #253454;
    color: #e8f2ff;
    box-shadow: 0 14px 32px rgba(2, 6, 23, 0.24);
}

body.theme-dark .crypto-asset-info-card--highlight,
body.dark-mode .crypto-asset-info-card--highlight {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 30%),
        linear-gradient(180deg, #142543 0%, #0f1b33 100%);
}

body.theme-dark .crypto-asset-chart,
body.theme-dark .crypto-asset-chart--pro,
body.dark-mode .crypto-asset-chart,
body.dark-mode .crypto-asset-chart--pro {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(15, 27, 51, 0)),
        #0b162b;
    border-color: #253454;
}

body.theme-dark .crypto-asset-hero__icon-wrap,
body.dark-mode .crypto-asset-hero__icon-wrap {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.42);
}

body.theme-dark .crypto-asset-toolbar-group button,
body.theme-dark .crypto-asset-trade-switch button,
body.theme-dark .crypto-asset-order-form .form-input,
body.theme-dark .crypto-asset-order-form .cryptopulse-range-select,
body.dark-mode .crypto-asset-toolbar-group button,
body.dark-mode .crypto-asset-trade-switch button,
body.dark-mode .crypto-asset-order-form .form-input,
body.dark-mode .crypto-asset-order-form .cryptopulse-range-select {
    background: #142543;
    border-color: #2e4673;
    color: #cfe2ff;
}

body.theme-dark .crypto-asset-toolbar-group button.is-active,
body.theme-dark .crypto-asset-trade-switch button.is-active,
body.dark-mode .crypto-asset-toolbar-group button.is-active,
body.dark-mode .crypto-asset-trade-switch button.is-active {
    background: rgba(20, 145, 229, 0.2);
    border-color: rgba(96, 165, 250, 0.46);
    color: #8ec5ff;
}

body.theme-dark .crypto-asset-hero__title,
body.theme-dark .crypto-asset-hero__price,
body.theme-dark .crypto-asset-stat strong,
body.theme-dark .crypto-asset-chart-card__title,
body.theme-dark .crypto-asset-chart-legend strong,
body.theme-dark .crypto-asset-mini-stat strong,
body.theme-dark .crypto-asset-trade-card__head h3,
body.theme-dark .crypto-asset-order-summary__row strong,
body.theme-dark .crypto-asset-payment-details__row strong,
body.theme-dark .crypto-asset-payment-details__title,
body.theme-dark .crypto-asset-info-card__head h3,
body.theme-dark .crypto-asset-info-row strong,
body.dark-mode .crypto-asset-hero__title,
body.dark-mode .crypto-asset-hero__price,
body.dark-mode .crypto-asset-stat strong,
body.dark-mode .crypto-asset-chart-card__title,
body.dark-mode .crypto-asset-chart-legend strong,
body.dark-mode .crypto-asset-mini-stat strong,
body.dark-mode .crypto-asset-trade-card__head h3,
body.dark-mode .crypto-asset-order-summary__row strong,
body.dark-mode .crypto-asset-payment-details__row strong,
body.dark-mode .crypto-asset-payment-details__title,
body.dark-mode .crypto-asset-info-card__head h3,
body.dark-mode .crypto-asset-info-row strong {
    color: #e8f2ff;
}

body.theme-dark .crypto-asset-hero__title span,
body.theme-dark .crypto-asset-hero__price-label,
body.theme-dark .crypto-asset-stat span,
body.theme-dark .crypto-asset-chart-card__eyebrow,
body.theme-dark .crypto-asset-chart-card__updated,
body.theme-dark .crypto-asset-chart-legend,
body.theme-dark .crypto-asset-mini-stat span,
body.theme-dark .crypto-asset-trade-card__head p,
body.theme-dark .crypto-asset-order-form label span,
body.theme-dark .crypto-asset-order-summary__row span,
body.theme-dark .crypto-asset-payment-details__row span,
body.theme-dark .crypto-asset-info-card__text,
body.theme-dark .crypto-asset-info-row span,
body.dark-mode .crypto-asset-hero__title span,
body.dark-mode .crypto-asset-hero__price-label,
body.dark-mode .crypto-asset-stat span,
body.dark-mode .crypto-asset-chart-card__eyebrow,
body.dark-mode .crypto-asset-chart-card__updated,
body.dark-mode .crypto-asset-chart-legend,
body.dark-mode .crypto-asset-mini-stat span,
body.dark-mode .crypto-asset-trade-card__head p,
body.dark-mode .crypto-asset-order-form label span,
body.dark-mode .crypto-asset-order-summary__row span,
body.dark-mode .crypto-asset-payment-details__row span,
body.dark-mode .crypto-asset-info-card__text,
body.dark-mode .crypto-asset-info-row span {
    color: #96accf;
}

@media (max-width: 1120px) {
    .crypto-asset-pro-grid {
        grid-template-columns: 1fr;
    }

    .crypto-asset-trade-card {
        position: static;
    }
}

@media (max-width: 768px) {
    .crypto-asset-chart-card--pro,
    .crypto-asset-trade-card {
        padding: 18px;
        border-radius: 22px;
    }

    .crypto-asset-chart-toolbar,
    .crypto-asset-trade-card__head {
        flex-direction: column;
        align-items: stretch;
    }

    .crypto-asset-order-grid,
    .crypto-asset-mini-stats,
    .crypto-asset-secondary-grid--pro {
        grid-template-columns: 1fr;
    }

    .crypto-asset-chart--pro {
        height: 340px;
    }
}

/* =========================================
   BANKING V2 - TABS + HERO DETAILS
========================================= */

.banking-v2__hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.banking-v2__stat strong {
    overflow-wrap: anywhere;
}

.banking-v2__tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.banking-v2__tab-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .18s ease;
}

.banking-v2__tab-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.35);
}

.banking-v2__tab-btn.is-active {
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.42);
    color: #1d4ed8;
}

.banking-v2__tab-panel {
    display: none;
}

.banking-v2__tab-panel.is-active {
    display: block;
}

@media (max-width: 980px) {
    .banking-v2__hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .banking-v2__hero {
        display: flex;
        flex-direction: column;
    }

    .banking-v2__hero-main {
        order: 1;
    }

    .banking-v2__hero-side {
        order: 2;
    }

    .banking-v2__tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .banking-v2__tab-btn {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
}

/* =========================================
   BANKING V2 - COMPACT REDESIGN
========================================= */

.banking-v2 {
    gap: 14px;
}

.banking-v2__header {
    padding: 16px 18px;
    border-radius: 12px;
}

.banking-v2__eyebrow {
    font-size: 10px;
    letter-spacing: .12em;
}

.banking-v2__title {
    font-size: 32px;
    font-weight: 650;
    line-height: 1.05;
}

.banking-v2__subtitle {
    font-size: 14px;
    line-height: 1.45;
}

.banking-v2__action {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.banking-v2__metrics-strip {
    gap: 10px;
}

.banking-v2__metric-card {
    min-height: 92px;
    border-radius: 12px;
    padding: 12px 14px;
}

.banking-v2__metric-card span {
    font-size: 11px;
}

.banking-v2__metric-card strong {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
}

.banking-v2__hero {
    gap: 12px;
}

.banking-v2__hero-main {
    border-radius: 14px;
    padding: 16px;
}

.banking-v2__hero-label {
    font-size: 10px;
    margin-bottom: 8px;
}

.banking-v2__hero-amount {
    font-size: clamp(30px, 4.1vw, 42px);
    font-weight: 700;
}

.banking-v2__btc-line {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
}

.banking-v2__btc-line #bankingBtcEquivalent {
    color: rgba(255, 255, 255, 0.86);
    font-weight: 600;
}

.banking-v2__btc-line #bankingBtcChange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
}

.banking-v2__btc-line #bankingBtcChange.is-positive {
    background: rgba(22, 196, 127, 0.20);
    color: #8ff0c7;
}

.banking-v2__btc-line #bankingBtcChange.is-negative {
    background: rgba(239, 68, 68, 0.20);
    color: #fecaca;
}

.banking-v2__btc-line #bankingBtcChange.is-neutral {
    background: rgba(148, 163, 184, 0.22);
    color: #e2e8f0;
}

.banking-v2__sparkline-wrap {
    margin-top: 6px;
}

.banking-v2__sparkline {
    width: 128px;
    height: 34px;
    color: rgba(148, 211, 255, 0.95);
}

.banking-v2__hero-stats {
    margin-top: 14px;
    gap: 8px;
}

.banking-v2__stat {
    padding: 10px 12px;
    border-radius: 12px;
}

.banking-v2__stat span {
    font-size: 10px;
    margin-bottom: 4px;
}

.banking-v2__stat strong {
    font-size: 13px;
    font-weight: 600;
}

.banking-v2__glass-card {
    border-radius: 14px;
    padding: 16px;
}

.banking-v2__glass-title {
    font-size: 16px;
    font-weight: 650;
}

.banking-v2__glass-card p {
    font-size: 13px;
}

.banking-v2__panel {
    border-radius: 12px;
}

.banking-v2__panel-head {
    padding: 12px 14px;
}

.banking-v2__panel-kicker {
    font-size: 9px;
}

.banking-v2__panel-head h2 {
    font-size: 16px;
    font-weight: 650;
}

.banking-v2__search {
    height: 36px;
    font-size: 12px;
}

.banking-v2__icon-btn {
    width: 36px;
    height: 36px;
}

.banking-v2__row {
    padding: 12px 14px;
}

.banking-v2__row-content strong {
    font-size: 13px;
    font-weight: 600;
}

.banking-v2__row-meta {
    font-size: 11px;
}

.banking-v2__meta-datetime {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.banking-v2__meta-datetime small {
    font-size: 10px;
    color: var(--text-soft, #7b8aa8);
}

@media (max-width: 640px) {
    .banking-v2__list {
        padding: 12px;
        display: grid;
        gap: 12px;
    }

    .banking-v2__row {
        padding: 14px;
        border: 1px solid rgba(219, 231, 251, 0.96);
        border-bottom: 0;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .banking-v2__row-left {
        align-items: flex-start;
        gap: 12px;
    }

    .banking-v2__row-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 16px;
    }

    .banking-v2__row-content {
        gap: 8px;
    }

    .banking-v2__row-topline {
        align-items: center;
        gap: 10px;
    }

    .banking-v2__row-content strong {
        min-width: 0;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        line-height: 1.25;
    }

    .banking-v2__row-meta {
        gap: 6px;
        font-size: 11px;
        line-height: 1.35;
    }

    .banking-v2__transfer-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: stretch;
    }

    .banking-v2__transfer-actions.is-empty {
        display: none;
    }

    .banking-v2__mini-action {
        width: 100%;
        min-height: 40px;
        border-radius: 999px;
        white-space: normal;
        font-size: 13px;
    }

    .banking-v2__transfer-amount {
        width: auto;
        flex: 0 0 auto;
        text-align: right;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 800;
        white-space: nowrap;
    }

    body.theme-dark .banking-v2__row,
    body.dark-mode .banking-v2__row {
        background: linear-gradient(180deg, rgba(10, 21, 42, 0.96), rgba(6, 16, 32, 0.96));
        border-color: rgba(75, 102, 150, 0.42);
        box-shadow: 0 12px 28px rgba(2, 8, 23, 0.22);
    }
}

.banking-v2__subpanel {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border, rgba(123, 138, 168, 0.2));
}

.banking-v2__subpanel-head {
    margin-bottom: 12px;
}

.banking-v2__subpanel-head h3 {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 650;
    color: var(--text);
}

.banking-v2__row-right {
    font-size: 13px;
    font-weight: 650;
}

@media (max-width: 760px) {
    .banking-v2__header {
        padding: 14px;
    }

    .banking-v2__title {
        font-size: 26px;
    }

    .banking-v2__hero-main {
        padding: 14px;
    }

    .banking-v2__hero-stats {
        grid-template-columns: 1fr;
    }

    .banking-v2__metrics-strip {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .banking-v2__metrics-strip {
        grid-template-columns: 1fr 1fr;
    }
}
/* BANKX - REBUILD BANKING PAGE */
.bankx {
    display: grid;
    gap: 18px;
    max-width: 100%;
    position: relative;
}

.bankx > * {
    min-width: 0;
}

.bankx-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(15, 118, 110, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.06);
}

.bankx-header-copy {
    max-width: 720px;
}

.bankx-eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #4f6b96;
}

.bankx-title {
    margin: 0;
    font-size: clamp(36px, 4vw, 58px);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -.04em;
    color: #0f172a;
}

.bankx-subtitle {
    margin: 12px 0 0;
    font-size: 15px;
    color: #64748b;
    overflow-wrap: anywhere;
    max-width: 660px;
    line-height: 1.7;
}

.bankx-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.bankx-btn {
    border: 1px solid rgba(59, 130, 246, 0.16);
    background: rgba(255, 255, 255, 0.84);
    color: #12233d;
    border-radius: 16px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.bankx-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
    border-color: rgba(59, 130, 246, 0.28);
}

.bankx-btn svg {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -2px;
}

.bankx-btn--primary {
    background: linear-gradient(135deg, #0f5fe8 0%, #1ea3ff 100%);
    color: #fff;
    border-color: transparent;
}

.bankx-btn--ghost {
    background: rgba(255, 255, 255, 0.95);
}

.bankx-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.bankx-page {
    display: grid;
    gap: 14px;
}

.bankx-exchange-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, .98fr);
    gap: 18px;
    align-items: start;
}

.bankx-terminal-card {
    position: relative;
    align-self: start;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 24px;
    border-radius: 28px;
    min-height: 374px;
    background:
        radial-gradient(circle at 100% 0%, rgba(180, 223, 255, 0.24), transparent 28%),
        radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.10), transparent 24%),
        linear-gradient(135deg, #4f7cff 0%, #2b6df1 38%, #3ea0f4 100%);
    border: 1px solid rgba(164, 214, 255, 0.24);
    box-shadow: 0 28px 60px rgba(26, 70, 149, 0.18);
    color: #f8fbff;
}

.bankx-terminal-card__top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.bankx-terminal-card__eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(226, 238, 255, 0.82);
}

.bankx-terminal-card__value {
    margin: 0;
    font-size: clamp(42px, 5vw, 58px);
    line-height: .98;
    letter-spacing: -.04em;
    font-weight: 800;
    color: #ffffff;
}

.bankx-terminal-card__subvalue {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: rgba(233, 242, 255, 0.82);
}

.bankx-terminal-card__status {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bankx-terminal-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffffff;
}

.bankx-terminal-pill--success {
    background: rgba(74, 222, 128, 0.14);
    border-color: rgba(74, 222, 128, 0.18);
    color: #5be38b;
}

.bankx-terminal-card__sparkline {
    position: relative;
    flex: 1;
    min-height: 150px;
    margin: 18px -8px 12px;
}

.bankx-terminal-card__sparkline svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bankx-terminal-card__meta {
    margin-top: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.bankx-terminal-card__meta > div {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: transparent;
    border: 0;
    backdrop-filter: none;
}

.bankx-terminal-card__meta > div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.bankx-terminal-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.06);
}

.bankx-terminal-meta-icon svg {
    width: 20px;
    height: 20px;
}

.bankx-terminal-card__meta div > div > span {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(226, 238, 255, 0.78);
}

.bankx-terminal-card__meta div > div > strong {
    display: block;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.bankx-terminal-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-self: start;
}

.bankx-terminal-stat {
    min-height: 178px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 24px 22px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.06);
}

.bankx-terminal-stat--accent {
    background:
        radial-gradient(circle at top right, rgba(15, 95, 232, 0.10), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    border-color: rgba(15, 95, 232, 0.18);
}

.bankx-terminal-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.bankx-terminal-stat__icon svg {
    width: 28px;
    height: 28px;
}

.bankx-terminal-stat__icon--blue {
    color: #386ef3;
    background: linear-gradient(180deg, rgba(56, 110, 243, 0.14), rgba(56, 110, 243, 0.05));
}

.bankx-terminal-stat__icon--amber {
    color: #ff7a00;
    background: linear-gradient(180deg, rgba(255, 122, 0, 0.14), rgba(255, 122, 0, 0.05));
}

.bankx-terminal-stat__icon--mint {
    color: #0fa968;
    background: linear-gradient(180deg, rgba(15, 169, 104, 0.14), rgba(15, 169, 104, 0.05));
}

.bankx-terminal-stat__icon--violet {
    color: #6d36ff;
    background: linear-gradient(180deg, rgba(109, 54, 255, 0.14), rgba(109, 54, 255, 0.05));
}

.bankx-terminal-stat__body {
    min-width: 0;
}

.bankx-terminal-stat__body span {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #4f6692;
}

.bankx-terminal-stat__body strong {
    display: block;
    font-size: 22px;
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 800;
    color: #14284a;
    overflow-wrap: anywhere;
}

.bankx-terminal-stat__body small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #7a8aa6;
}

.bankx-terminal-stat__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #16315c;
    opacity: .9;
}

.bankx-terminal-stat__chevron svg {
    width: 18px;
    height: 18px;
}

.bankx-kpis--terminal {
    margin-top: 2px;
    margin-bottom: 2px;
}

.bankx-kpi {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94));
    padding: 22px 24px;
    min-height: 154px;
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.05);
}

.bankx-kpi--metric {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}

.bankx-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
}

.bankx-kpi-icon svg {
    width: 34px;
    height: 34px;
}

.bankx-kpi-icon--blue {
    color: #4b43ff;
    background: linear-gradient(180deg, rgba(75, 67, 255, 0.12), rgba(75, 67, 255, 0.04));
}

.bankx-kpi-icon--mint {
    color: #0fa968;
    background: linear-gradient(180deg, rgba(15, 169, 104, 0.12), rgba(15, 169, 104, 0.04));
}

.bankx-kpi-icon--amber {
    color: #ff7a00;
    background: linear-gradient(180deg, rgba(255, 122, 0, 0.12), rgba(255, 122, 0, 0.04));
}

.bankx-kpi-copy {
    min-width: 0;
}

.bankx-kpi--performance {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.bankx-kpi--performance .bankx-ring {
    width: 108px;
}

.bankx-kpi--performance .bankx-ring::before {
    width: 80px;
    height: 80px;
}

.bankx-kpi--performance .bankx-ring span {
    top: 33px;
    font-size: 18px;
}

.bankx-kpi--performance .bankx-ring small {
    top: 58px;
    font-size: 10px;
}

.bankx-kpi--performance .bankx-performance-copy {
    text-align: left;
    justify-items: start;
}

.bankx-kpi--performance .bankx-performance-copy strong {
    font-size: 16px;
    line-height: 1.25;
    color: #14284a;
}

.bankx-kpi--performance .bankx-performance-copy span {
    font-size: 12px;
    line-height: 1.55;
    color: #627497;
}

.bankx-kpi small {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: #627497;
}

.bankx-kpi-label {
    display: block;
    font-size: 12px;
    color: #53698f;
    margin-bottom: 8px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.bankx-kpi strong {
    font-size: 26px;
    line-height: 1.04;
    font-weight: 800;
    display: block;
    overflow-wrap: anywhere;
    color: #14284a;
}

.bankx-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 18px;
}

.bankx-activity-card,
.bankx-security-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    border-radius: 26px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
}

.bankx-activity-card {
    display: block;
}

.bankx-activity-card__head {
    margin-bottom: 16px;
}

.bankx-activity-card__row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 18px;
}

.bankx-activity-card__icon,
.bankx-security-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
}

.bankx-activity-card__icon svg,
.bankx-security-card__icon svg {
    width: 24px;
    height: 24px;
}

.bankx-activity-card__icon.is-mint {
    color: #0fa968;
    background: linear-gradient(180deg, rgba(15, 169, 104, 0.12), rgba(15, 169, 104, 0.04));
}

.bankx-activity-card__icon.is-violet {
    color: #6d36ff;
    background: linear-gradient(180deg, rgba(109, 54, 255, 0.12), rgba(109, 54, 255, 0.04));
}

.bankx-activity-card__copy strong,
.bankx-security-card__copy strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #14284a;
}

.bankx-activity-card__copy span,
.bankx-security-card__copy span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: #627497;
}

.bankx-activity-card__amount {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.bankx-activity-card__amount.is-plus {
    color: #0fa968;
}

.bankx-activity-card__amount.is-minus {
    color: #6d36ff;
}

.bankx-security-card__icon {
    color: #386ef3;
    background: linear-gradient(180deg, rgba(56, 110, 243, 0.12), rgba(56, 110, 243, 0.04));
}

.bankx-security-card__copy {
    flex: 1;
}


.bankx-balance-card,
.bankx-insight-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 28px;
    background: var(--surface, #fff);
    padding: 22px;
    min-height: 100%;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.08);
}

.bankx-balance-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 20%, rgba(125, 211, 252, 0.28), transparent 20%),
        radial-gradient(circle at 20% 100%, rgba(52, 211, 153, 0.18), transparent 28%),
        linear-gradient(135deg, #071d44 0%, #0d4290 42%, #1782dd 100%);
    border: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bankx-balance-card__glow {
    position: absolute;
    inset: 24px 24px auto auto;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
    pointer-events: none;
}

.bankx-balance-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.bankx-balance-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bankx-chip,
.bankx-status {
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bankx-chip {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.bankx-status {
    background: rgba(16, 185, 129, .18);
    border: 1px solid rgba(134, 239, 172, 0.2);
}

.bankx-balance-trend {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 16px;
    text-align: right;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.bankx-balance-trend span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    opacity: .78;
}

.bankx-balance-trend strong {
    font-size: 18px;
    line-height: 1.1;
}

.bankx-balance-trend.is-positive strong {
    color: #dcfce7;
}

.bankx-balance-trend.is-negative strong {
    color: #fee2e2;
}

.bankx-balance-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 24px;
    align-items: center;
    margin-top: 22px;
}

.bankx-balance-title {
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .9;
}

.bankx-balance-card h2 {
    margin: 0;
    font-size: clamp(40px, 5vw, 60px);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -.05em;
}

.bankx-balance-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.bankx-balance-fiat {
    font: inherit;
}

.bankx-balance-btc {
    font-size: 15px;
    font-weight: 600;
    opacity: .92;
}

.bankx-balance-orbit {
    position: relative;
    width: 160px;
    height: 160px;
    display: grid;
    place-items: center;
}

.bankx-balance-orbit__ring {
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.bankx-balance-orbit__ring--outer {
    inset: 0;
    animation: bankxSpin 22s linear infinite;
}

.bankx-balance-orbit__ring--inner {
    inset: 18px;
    animation: bankxSpinReverse 14s linear infinite;
}

.bankx-balance-orbit__core {
    width: 92px;
    height: 92px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bankx-balance-orbit::before,
.bankx-balance-orbit::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
}

.bankx-balance-orbit::before {
    top: 12px;
    right: 20px;
}

.bankx-balance-orbit::after {
    bottom: 16px;
    left: 24px;
    background: #7dd3fc;
}

.bankx-balance-meta {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bankx-balance-meta div {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    padding: 12px 14px;
    backdrop-filter: blur(10px);
}

.bankx-balance-meta span {
    display: block;
    font-size: 11px;
    opacity: .86;
    margin-bottom: 4px;
}

.bankx-balance-meta strong {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bankx-insight-card {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96));
}

.bankx-insight-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bankx-insight-card h3 {
    margin: 0;
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
}

.bankx-insight-card h3 svg {
    width: 18px;
    height: 18px;
    color: #0c7fe8;
}

.bankx-insight-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(12, 127, 232, 0.10);
    color: #0c7fe8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bankx-rings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    margin-top: 18px;
}

.bankx-performance-item {
    border: 1px solid rgba(12, 127, 232, .12);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(12, 127, 232, .07), rgba(12, 127, 232, .02));
    padding: 18px 16px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 12px;
    min-height: 100%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bankx-performance-copy {
    display: grid;
    gap: 4px;
    text-align: center;
}

.bankx-performance-copy strong {
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text, #12233d);
}

.bankx-performance-copy span {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted, #5f738f);
}

.bankx-ring {
    position: relative;
    width: min(150px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(#0c7fe8 var(--pct, 0%), #e7eef9 0);
    display: grid;
    place-items: center;
}

.bankx-ring::before {
    content: "";
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.bankx-ring span,
.bankx-ring small {
    position: absolute;
    z-index: 1;
}

.bankx-ring span {
    top: 44px;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
}

.bankx-ring small {
    top: 82px;
    font-size: 11px;
    color: #64748b;
}

.bankx-flow-board {
    margin-top: 18px;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
    color: #e2e8f0;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.bankx-flow-board__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.bankx-flow-board__head strong {
    font-size: 14px;
    font-weight: 800;
    color: #f8fafc;
}

.bankx-flow-board__head span {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.bankx-flow-chart {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.bankx-flow-bar {
    display: grid;
    gap: 10px;
}

.bankx-flow-bar__track {
    position: relative;
    height: 132px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.bankx-flow-bar__track span {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 14px 14px 8px 8px;
    background: linear-gradient(180deg, #38bdf8, #1d4ed8);
    box-shadow: 0 14px 30px rgba(30, 64, 175, 0.34);
}

.bankx-flow-bar--available .bankx-flow-bar__track span {
    background: linear-gradient(180deg, #7dd3fc, #2563eb);
}

.bankx-flow-bar--deposits .bankx-flow-bar__track span {
    background: linear-gradient(180deg, #34d399, #0f766e);
}

.bankx-flow-bar--withdrawals .bankx-flow-bar__track span {
    background: linear-gradient(180deg, #fb7185, #e11d48);
}

.bankx-flow-bar--pending .bankx-flow-bar__track span {
    background: linear-gradient(180deg, #fbbf24, #d97706);
}

.bankx-flow-bar strong {
    font-size: 13px;
    line-height: 1.4;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

.bankx-flow-bar small {
    font-size: 11px;
    line-height: 1.45;
    color: #94a3b8;
}

@keyframes bankxSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bankxSpinReverse {
    to {
        transform: rotate(-360deg);
    }
}

.bankx-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.bankx-tab {
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: var(--text, #12233d);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: relative;
}

.bankx-tab svg {
    display: none;
}

.bankx-tab::before {
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.bankx-tab[data-bankx-tab="transactions"]::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 7h10M7 12h10M7 17h10M4 7h.01M4 12h.01M4 17h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 7h10M7 12h10M7 17h10M4 7h.01M4 12h.01M4 17h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}

.bankx-tab[data-bankx-tab="deposits"]::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v9m0 0-4-4m4 4 4-4M5 15v3a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v9m0 0-4-4m4 4 4-4M5 15v3a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.bankx-tab[data-bankx-tab="transfers"]::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h13m0 0-3-3m3 3-3 3M20 17H7m0 0 3-3m-3 3 3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h13m0 0-3-3m3 3-3 3M20 17H7m0 0 3-3m-3 3 3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.bankx-tab[data-bankx-tab="loans"]::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 19V8l7-3 7 3v11M5 10h14M9 14h.01M12 14h.01M15 14h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 19V8l7-3 7 3v11M5 10h14M9 14h.01M12 14h.01M15 14h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.bankx-tab.is-active {
    border-color: #0c7fe8;
    color: #0c7fe8;
    background: rgba(12, 127, 232, .08);
}

.bankx-panel {
    display: none;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 12px;
    background: var(--surface, #fff);
    padding: 10px;
}

.bankx-panel.is-active {
    display: block;
}

.bankx-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.bankx-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.bankx-table th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--text-muted, #5f738f);
    padding: 9px 10px;
    border-bottom: 1px solid var(--border, #d7e2f2);
    text-transform: uppercase;
}

.bankx-table td {
    font-size: 11px;
    line-height: 1.3;
    color: var(--text, #12233d);
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #d7e2f2);
    vertical-align: middle;
}

.bankx-table td small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-muted, #6d7e99);
}

.bankx-table td strong {
    font-size: 11.5px;
    line-height: 1.3;
}

.bankx-date-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.bankx-date-stack small {
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.bankx-subpanel {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(215, 226, 242, 0.95);
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    border-radius: 14px;
}

.bankx-subpanel-head {
    margin-bottom: 12px;
}

.bankx-subpanel-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text, #12233d);
}

.bankx-transfer-hint {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(231, 240, 255, 0.94));
    border: 1px solid rgba(96, 165, 250, 0.22);
    color: #4f6483;
    font-size: 13px;
    line-height: 1.45;
}

.bankx-header .bankx-subtitle {
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bankx-header h1 {
    margin: 4px 0 0;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 0.98;
}

.bankx-header-actions .bankx-btn {
    min-width: 180px;
    justify-content: center;
}

.nova-modal-body .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #12233d);
}

.nova-modal-body .form-control {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: var(--text, #12233d);
    padding: 12px 14px;
}

.nova-modal-body .form-control:focus {
    outline: none;
    border-color: #2896f6;
    box-shadow: 0 0 0 4px rgba(40, 150, 246, 0.12);
}

.nova-modal-body .deposit-method-choices {
    margin-bottom: 4px;
}

body.dark-mode .bankx-subpanel,
body.theme-dark .bankx-subpanel {
    background: linear-gradient(180deg, rgba(52, 162, 255, 0.08), rgba(15, 27, 51, 0));
}

body.dark-mode .bankx-table td small,
body.theme-dark .bankx-table td small,
body.dark-mode .bankx-transfer-hint,
body.theme-dark .bankx-transfer-hint {
    color: #9ab0d1;
}

body.dark-mode .bankx-transfer-hint,
body.theme-dark .bankx-transfer-hint {
    background: rgba(52, 162, 255, 0.08);
    border-color: rgba(61, 143, 219, 0.18);
}

body.dark-mode .nova-modal-body .form-group label,
body.theme-dark .nova-modal-body .form-group label,
body.dark-mode .bankx-subpanel-head h3,
body.theme-dark .bankx-subpanel-head h3 {
    color: #e6efff;
}

body.dark-mode .nova-modal-body .form-control,
body.theme-dark .nova-modal-body .form-control {
    background: #0f1b33;
    border-color: #253454;
    color: #e6efff;
}

.bankx-table tr:last-child td {
    border-bottom: 0;
}

.bankx-inline-btn {
    border: 1px solid #c9d9f2;
    background: #fff;
    color: #12345c;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    min-height: 28px;
    padding: 5px 9px;
    cursor: pointer;
    white-space: nowrap;
}

.bankx-actions-cell {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    min-width: 138px;
}

.bankx-empty {
    text-align: center;
    color: var(--text-muted, #5f738f);
}

.bankx-table .is-plus {
    color: #0b8d58;
    font-weight: 700;
}

.bankx-table .is-minus {
    color: #c23f4a;
    font-weight: 700;
}

body.dark-mode .bankx-header,
body.dark-mode .bankx-kpi,
body.dark-mode .bankx-insight-card,
body.dark-mode .bankx-panel,
body.dark-mode .bankx-tab,
body.dark-mode .bankx-inline-btn,
body.dark-mode .bankx-btn {
    background: #0f1b33;
    border-color: #253454;
    color: #e6efff;
}

body.dark-mode .bankx-subtitle,
body.dark-mode .bankx-eyebrow,
body.dark-mode .bankx-kpi-label,
body.dark-mode .bankx-table th,
body.dark-mode .bankx-empty,
body.dark-mode .bankx-ring small {
    color: #96accf;
}

body.dark-mode .bankx-balance-btc {
    color: #d6e7ff;
}

body.dark-mode .bankx-table td {
    color: #d8e6ff;
    border-color: #223352;
}

body.dark-mode .bankx-tab.is-active {
    background: rgba(12, 127, 232, .2);
    border-color: #3d8fdb;
    color: #8ec5ff;
}

body.dark-mode .bankx-ring {
    background: conic-gradient(#34a2ff var(--pct, 0%), #223352 0);
}

body.dark-mode .bankx-ring::before {
    background: #0f1b33;
}

body.dark-mode .bankx-inline-btn {
    background: #142543;
    border-color: #2e4673;
    color: #cfe2ff;
}

body.dark-mode .bankx-performance-item {
    background: linear-gradient(180deg, rgba(52, 162, 255, .10), rgba(52, 162, 255, .03));
    border-color: #253454;
}

body.dark-mode .bankx-performance-copy strong {
    color: #e6efff;
}

body.dark-mode .bankx-performance-copy span {
    color: #96accf;
}

body.dark-mode .bankx-header,
body.theme-dark .bankx-header,
body.dark-mode .bankx-kpi,
body.theme-dark .bankx-kpi,
body.dark-mode .bankx-insight-card,
body.theme-dark .bankx-insight-card {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 27, 51, 0.94));
    border-color: rgba(96, 165, 250, 0.12);
}

body.dark-mode .bankx-terminal-card,
body.theme-dark .bankx-terminal-card {
    background:
        radial-gradient(circle at top right, rgba(103, 187, 255, 0.18), transparent 30%),
        linear-gradient(135deg, #0b3d91 0%, #0d57c6 54%, #1176e6 100%);
    border-color: rgba(110, 195, 255, 0.18);
    box-shadow: 0 22px 50px rgba(2, 6, 23, 0.26);
}

body.dark-mode .bankx-terminal-card__eyebrow,
body.theme-dark .bankx-terminal-card__eyebrow,
body.dark-mode .bankx-terminal-card__subvalue,
body.theme-dark .bankx-terminal-card__subvalue,
body.dark-mode .bankx-terminal-card__meta div > div > span,
body.theme-dark .bankx-terminal-card__meta div > div > span {
    color: rgba(226, 238, 255, 0.76);
}

body.dark-mode .bankx-terminal-card__value,
body.theme-dark .bankx-terminal-card__value,
body.dark-mode .bankx-terminal-card__meta div > div > strong,
body.theme-dark .bankx-terminal-card__meta div > div > strong {
    color: #ffffff;
}

body.dark-mode .bankx-terminal-card__meta > div,
body.theme-dark .bankx-terminal-card__meta > div {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .bankx-kpi-icon--blue,
body.theme-dark .bankx-kpi-icon--blue,
body.dark-mode .bankx-terminal-stat__icon--blue,
body.theme-dark .bankx-terminal-stat__icon--blue,
body.dark-mode .bankx-security-card__icon,
body.theme-dark .bankx-security-card__icon {
    background: linear-gradient(180deg, rgba(89, 146, 255, 0.18), rgba(89, 146, 255, 0.06));
}

body.dark-mode .bankx-kpi-icon--mint,
body.theme-dark .bankx-kpi-icon--mint,
body.dark-mode .bankx-terminal-stat__icon--mint,
body.theme-dark .bankx-terminal-stat__icon--mint,
body.dark-mode .bankx-activity-card__icon.is-mint,
body.theme-dark .bankx-activity-card__icon.is-mint {
    background: linear-gradient(180deg, rgba(32, 211, 145, 0.18), rgba(32, 211, 145, 0.06));
}

body.dark-mode .bankx-kpi-icon--amber,
body.theme-dark .bankx-kpi-icon--amber,
body.dark-mode .bankx-terminal-stat__icon--amber,
body.theme-dark .bankx-terminal-stat__icon--amber {
    background: linear-gradient(180deg, rgba(255, 146, 56, 0.18), rgba(255, 146, 56, 0.06));
}

body.dark-mode .bankx-terminal-stat__icon--violet,
body.theme-dark .bankx-terminal-stat__icon--violet,
body.dark-mode .bankx-activity-card__icon.is-violet,
body.theme-dark .bankx-activity-card__icon.is-violet {
    background: linear-gradient(180deg, rgba(141, 104, 255, 0.18), rgba(141, 104, 255, 0.06));
}

body.dark-mode .bankx-title,
body.theme-dark .bankx-title,
body.dark-mode .bankx-kpi strong,
body.theme-dark .bankx-kpi strong,
body.dark-mode .bankx-insight-card h3,
body.theme-dark .bankx-insight-card h3,
body.dark-mode .bankx-ring span,
body.theme-dark .bankx-ring span {
    color: #e6efff;
}

body.dark-mode .bankx-subtitle,
body.theme-dark .bankx-subtitle,
body.dark-mode .bankx-kpi-label,
body.theme-dark .bankx-kpi-label,
body.dark-mode .bankx-kpi small,
body.theme-dark .bankx-kpi small {
    color: #96accf;
}

body.dark-mode .bankx-btn,
body.theme-dark .bankx-btn {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(96, 165, 250, 0.18);
    color: #e6efff;
}

body.dark-mode .bankx-btn--ghost,
body.theme-dark .bankx-btn--ghost {
    background: rgba(15, 23, 42, 0.92);
}

body.dark-mode .bankx-terminal-stat,
body.theme-dark .bankx-terminal-stat,
body.dark-mode .bankx-kpi,
body.theme-dark .bankx-kpi,
body.dark-mode .bankx-activity-card,
body.theme-dark .bankx-activity-card,
body.dark-mode .bankx-security-card,
body.theme-dark .bankx-security-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 27, 51, 0.94));
    border-color: rgba(96, 165, 250, 0.12);
}

body.dark-mode .bankx-terminal-stat strong,
body.theme-dark .bankx-terminal-stat strong,
body.dark-mode .bankx-kpi strong,
body.theme-dark .bankx-kpi strong,
body.dark-mode .bankx-activity-card__copy strong,
body.theme-dark .bankx-activity-card__copy strong,
body.dark-mode .bankx-security-card__copy strong,
body.theme-dark .bankx-security-card__copy strong,
body.dark-mode .bankx-kpi--performance .bankx-performance-copy strong,
body.theme-dark .bankx-kpi--performance .bankx-performance-copy strong {
    color: #e6efff;
}

body.dark-mode .bankx-terminal-stat__body span,
body.theme-dark .bankx-terminal-stat__body span,
body.dark-mode .bankx-terminal-stat__body small,
body.theme-dark .bankx-terminal-stat__body small,
body.dark-mode .bankx-kpi-label,
body.theme-dark .bankx-kpi-label,
body.dark-mode .bankx-kpi small,
body.theme-dark .bankx-kpi small,
body.dark-mode .bankx-activity-card__copy span,
body.theme-dark .bankx-activity-card__copy span,
body.dark-mode .bankx-security-card__copy span,
body.theme-dark .bankx-security-card__copy span,
body.dark-mode .bankx-kpi--performance .bankx-performance-copy span,
body.theme-dark .bankx-kpi--performance .bankx-performance-copy span {
    color: #96accf;
}

body.dark-mode .bankx-terminal-stat__chevron,
body.theme-dark .bankx-terminal-stat__chevron {
    color: #cfe2ff;
}

body.dark-mode .bankx-flow-board,
body.theme-dark .bankx-flow-board {
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.98));
}

@media (max-width: 1080px) {
    .bankx-exchange-hero {
        grid-template-columns: 1fr;
    }

    .bankx-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bankx-terminal-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bankx-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .bankx-header {
        padding: 20px 18px;
    }

    .bankx-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bankx-terminal-card__top {
        flex-direction: column;
    }

    .bankx-terminal-card__sparkline {
        min-height: 120px;
    }

    .bankx-terminal-card__meta {
        grid-template-columns: 1fr;
    }

    .bankx-terminal-card__meta > div + div {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }

    .bankx-terminal-side {
        grid-template-columns: 1fr;
    }

    .bankx-kpi--performance {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .bankx-kpi--performance .bankx-performance-copy {
        text-align: center;
        justify-items: center;
    }

    .bankx-kpis {
        grid-template-columns: 1fr;
    }

    .bankx-terminal-card {
        min-height: 0;
        padding: 22px 20px;
    }

    .bankx-kpi--metric {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }

    .bankx-kpi-icon {
        width: 72px;
        height: 72px;
    }

    .bankx-kpi-icon svg {
        width: 28px;
        height: 28px;
    }

    .bankx-activity-card__row {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .bankx-security-card {
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    .bankx-header {
        flex-direction: column;
    }

    .bankx-header-actions {
        width: 100%;
    }

    .bankx-btn {
        flex: 1 1 0;
        text-align: center;
    }

    .bankx-title {
        font-size: 28px;
    }

    .bankx-kpis {
        grid-template-columns: 1fr;
    }

    .bankx-terminal-card,
    .bankx-terminal-stat,
    .bankx-kpi {
        border-radius: 20px;
    }

    .bankx-terminal-card {
        padding: 20px 18px;
    }

    .bankx-terminal-card__value {
        font-size: 38px;
    }

    .bankx-terminal-stat__body strong,
    .bankx-kpi strong {
        font-size: 22px;
    }

    .bankx-panel[data-bankx-panel="transfers"] .bankx-table {
        min-width: 0;
    }

    .bankx-panel[data-bankx-panel="transfers"] .bankx-table thead {
        display: none;
    }

    .bankx-panel[data-bankx-panel="transfers"] .bankx-table,
    .bankx-panel[data-bankx-panel="transfers"] .bankx-table tbody,
    .bankx-panel[data-bankx-panel="transfers"] .bankx-table tr,
    .bankx-panel[data-bankx-panel="transfers"] .bankx-table td {
        display: block;
        width: 100%;
    }

    .bankx-panel[data-bankx-panel="transfers"] .bankx-table tr {
        border: 1px solid var(--border, #d7e2f2);
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 10px;
        background: var(--surface, #fff);
    }

    .bankx-panel[data-bankx-panel="transfers"] .bankx-table tr:last-child {
        margin-bottom: 0;
    }

    .bankx-panel[data-bankx-panel="transfers"] .bankx-table td {
        border: 0;
        padding: 5px 0;
    }

    .bankx-panel[data-bankx-panel="transfers"] .bankx-table td::before {
        display: block;
        font-size: 11px;
        color: var(--text-muted, #5f738f);
        margin-bottom: 3px;
    }

    .bankx-panel[data-bankx-panel="transfers"] .bankx-table td:nth-child(1)::before { content: "Date"; }
    .bankx-panel[data-bankx-panel="transfers"] .bankx-table td:nth-child(2)::before { content: "Bénéficiaire"; }
    .bankx-panel[data-bankx-panel="transfers"] .bankx-table td:nth-child(3)::before { content: "Canal"; }
    .bankx-panel[data-bankx-panel="transfers"] .bankx-table td:nth-child(4)::before { content: "Statut"; }
    .bankx-panel[data-bankx-panel="transfers"] .bankx-table td:nth-child(5)::before { content: "Montant"; }
    .bankx-panel[data-bankx-panel="transfers"] .bankx-table td:nth-child(6)::before { content: "Actions"; }

    .bankx-panel[data-bankx-panel="transfers"] .bankx-actions-cell {
        min-width: 0;
        width: 100%;
    }

    .bankx-panel[data-bankx-panel="transfers"] .bankx-inline-btn {
        width: 100%;
        text-align: center;
    }

    body.dark-mode .bankx-panel[data-bankx-panel="transfers"] .bankx-table tr {
        background: #0f1b33;
        border-color: #253454;
    }

    .bankx-insight-card h3 {
        justify-content: center;
        text-align: center;
        font-size: 17px;
    }
}

/* BANKX compatibility refinements */
.bankx-header .bankx-subtitle {
    letter-spacing: 0;
    text-transform: none;
}

.bankx-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
}

.bankx-header-actions .bankx-btn {
    min-width: 0;
    justify-content: initial;
}

.form-help-text {
    display: block;
    margin-top: 8px;
    color: var(--text-muted, #5f738f);
    font-size: 12px;
    line-height: 1.5;
}

.form-feedback-text {
    margin-top: 8px;
    color: var(--text-muted, #5f738f);
    font-size: 12px;
    line-height: 1.5;
}

.form-feedback-text.is-error {
    color: #c23f4a;
    font-weight: 600;
}

body.theme-dark .bankx-header,
body.theme-dark .bankx-kpi,
body.theme-dark .bankx-insight-card,
body.theme-dark .bankx-panel,
body.theme-dark .bankx-tab,
body.theme-dark .bankx-inline-btn,
body.theme-dark .bankx-btn {
    background: #0f1b33;
    border-color: #253454;
    color: #e6efff;
}

body.theme-dark .bankx-subtitle,
body.theme-dark .bankx-eyebrow,
body.theme-dark .bankx-kpi-label,
body.theme-dark .bankx-table th,
body.theme-dark .bankx-empty,
body.theme-dark .bankx-ring small {
    color: #96accf;
}

body.theme-dark .bankx-balance-btc {
    color: #d6e7ff;
}

body.theme-dark .bankx-table td {
    color: #d8e6ff;
    border-color: #223352;
}

body.theme-dark .bankx-tab.is-active {
    background: rgba(12, 127, 232, .2);
    border-color: #3d8fdb;
    color: #8ec5ff;
}

body.theme-dark .bankx-ring {
    background: conic-gradient(#34a2ff var(--pct, 0%), #223352 0);
}

body.theme-dark .bankx-ring::before {
    background: #0f1b33;
}

body.theme-dark .bankx-inline-btn {
    background: #142543;
    border-color: #2e4673;
    color: #cfe2ff;
}

body.theme-dark .bankx-performance-item {
    background: linear-gradient(180deg, rgba(52, 162, 255, .10), rgba(52, 162, 255, .03));
    border-color: #253454;
}

body.theme-dark .bankx-performance-copy strong {
    color: #e6efff;
}

body.theme-dark .bankx-performance-copy span {
    color: #96accf;
}

body.theme-dark .form-help-text,
body.theme-dark .form-feedback-text,
body.dark-mode .form-help-text,
body.dark-mode .form-feedback-text {
    color: #96accf;
}

body.theme-dark .form-feedback-text.is-error,
body.dark-mode .form-feedback-text.is-error {
    color: #fda4af;
}

@media (max-width: 700px) {
    .bankx-panel[data-bankx-panel="transfers"] .bankx-table td:nth-child(2)::before {
        content: "Bénéficiaire";
    }

    body.theme-dark .bankx-panel[data-bankx-panel="transfers"] .bankx-table tr {
        background: #0f1b33;
        border-color: #253454;
    }
}

/* CRYPTOX - USER CRYPTO INDEX UPGRADE */
.cryptox-page {
    max-width: 100%;
}

.cryptox-page > * {
    min-width: 0;
}

.cryptox-header-copy {
    display: grid;
    gap: 8px;
}

.cryptox-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cryptox-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #1491e5;
    background: #1491e5;
    color: #fff;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
}

.cryptox-action-btn--soft {
    background: #fff;
    color: #10467f;
    border-color: #c9d9f2;
}

.cryptox-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.cryptox-metric-card {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    padding: 12px;
    background: var(--surface, #fff);
}

.cryptox-metric-card span {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #5f738f);
    margin-bottom: 6px;
}

.cryptox-metric-card strong {
    font-size: 20px;
    line-height: 1.15;
    color: var(--text, #12233d);
}

.cryptox-metric-card strong.is-up {
    color: #0c9f62;
}

.cryptox-metric-card strong.is-down {
    color: #dc5a63;
}

.cryptox-page .crypto-page__tabs {
    gap: 8px;
    flex-wrap: wrap;
}

.cryptox-page .crypto-tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cryptox-page .crypto-tab-btn::before {
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.cryptox-page .crypto-tab-btn[href*="market"]::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 18V6m0 12h16M8 14l3-3 3 2 4-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 18V6m0 12h16M8 14l3-3 3 2 4-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.cryptox-page .crypto-tab-btn[data-crypto-tab="portfolio"]::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 7h18v12H3zM3 11h18M8 7V4h8v3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 7h18v12H3zM3 11h18M8 7V4h8v3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.cryptox-page .crypto-tab-btn[data-crypto-tab="exchange"]::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h13m0 0-3-3m3 3-3 3M20 17H7m0 0 3-3m-3 3 3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h13m0 0-3-3m3 3-3 3M20 17H7m0 0 3-3m-3 3 3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.cryptox-page .crypto-tab-btn[data-crypto-tab="staking"]::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 6v6c0 5.2 3.4 8.9 8 10 4.6-1.1 8-4.8 8-10V6l-8-4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 6v6c0 5.2 3.4 8.9 8 10 4.6-1.1 8-4.8 8-10V6l-8-4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
}

.cryptox-page .crypto-tab-btn[data-crypto-tab="history"]::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8v5l3 2M21 12a9 9 0 1 1-2.64-6.36' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8v5l3 2M21 12a9 9 0 1 1-2.64-6.36' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.cryptox-page .crypto-home-hero {
    margin-top: 4px;
}

@media (max-width: 1024px) {
    .cryptox-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .cryptox-metrics {
        grid-template-columns: 1fr;
    }

    .cryptox-page .crypto-page__header {
        gap: 10px;
    }

    .cryptox-header-actions {
        width: 100%;
    }

    .cryptox-action-btn {
        flex: 1 1 0;
        padding: 9px 10px;
    }

    .cryptox-page .crypto-page__tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
        width: 100%;
    }

    .cryptox-page .crypto-tab-btn {
        white-space: nowrap;
    }
}

body.dark-mode .cryptox-metric-card,
body.theme-dark .cryptox-metric-card {
    background: #0f1b33;
    border-color: #253454;
}

body.dark-mode .cryptox-metric-card span,
body.theme-dark .cryptox-metric-card span {
    color: #96accf;
}

body.dark-mode .cryptox-metric-card strong,
body.theme-dark .cryptox-metric-card strong {
    color: #e6efff;
}

body.dark-mode .cryptox-action-btn--soft,
body.theme-dark .cryptox-action-btn--soft {
    background: #142543;
    border-color: #2e4673;
    color: #cfe2ff;
}

.crypto-inline-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(20, 145, 229, .45);
}

.crypto-inline-link:hover {
    color: #1491e5;
    border-bottom-color: #1491e5;
}

.crypto-empty-state {
    border: 1px dashed var(--border, #d7e2f2);
    border-radius: 10px;
    padding: 14px;
    color: var(--text-muted, #5f738f);
    text-align: center;
    font-size: 13px;
}

.crypto-asset-item__open {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: #1491e5;
    text-decoration: none;
    font-weight: 600;
}

.crypto-orders-hero__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.crypto-order-card__actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* CRYPTOPULSE PAGE */
.cryptopulse-page {
    display: grid;
    gap: 14px;
    min-width: 0;
}

@keyframes cryptopulseSkeletonShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.cryptopulse-skeleton-value,
.cryptopulse-skeleton-cell {
    position: relative;
    overflow: hidden;
}

.cryptopulse-page.is-market-loading .cryptopulse-skeleton-value,
.cryptopulse-page.is-market-loading .cryptopulse-skeleton-cell {
    color: transparent !important;
}

.cryptopulse-page.is-market-loading .cryptopulse-skeleton-value::after,
.cryptopulse-page.is-market-loading .cryptopulse-skeleton-cell::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 1.05em;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(110deg, rgba(148, 163, 184, 0.16) 8%, rgba(255, 255, 255, 0.72) 18%, rgba(148, 163, 184, 0.16) 33%);
    background-size: 200% 100%;
    animation: cryptopulseSkeletonShimmer 1.2s linear infinite;
    pointer-events: none;
}

.cryptopulse-page.is-market-loading .cryptopulse-skeleton-value--hero::after {
    height: 1.2em;
}

.cryptopulse-page.is-market-loading .cryptopulse-skeleton-cell::after {
    left: 12px;
    right: 12px;
}

body.theme-dark .cryptopulse-page.is-market-loading .cryptopulse-skeleton-value::after,
body.theme-dark .cryptopulse-page.is-market-loading .cryptopulse-skeleton-cell::after,
body.dark-mode .cryptopulse-page.is-market-loading .cryptopulse-skeleton-value::after,
body.dark-mode .cryptopulse-page.is-market-loading .cryptopulse-skeleton-cell::after {
    background: linear-gradient(110deg, rgba(51, 65, 85, 0.36) 8%, rgba(96, 165, 250, 0.18) 18%, rgba(51, 65, 85, 0.36) 33%);
    background-size: 200% 100%;
}

.cryptopulse-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 12px;
    background: var(--surface, #fff);
    padding: 16px;
}

.cryptopulse-eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
}

.cryptopulse-header p {
    margin: 6px 0 0;
    color: var(--text-muted, #5f738f);
    font-size: 14px;
}

.cryptopulse-menu {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cryptopulse-menu a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    text-decoration: none;
    color: var(--text, #12233d);
    font-weight: 600;
}

.cryptopulse-menu a.is-active {
    border-color: #1491e5;
    color: #1491e5;
    background: rgba(20, 145, 229, .08);
}

.cryptopulse-menu-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cryptopulse-menu-icon svg {
    width: 14px;
    height: 14px;
}

.cryptopulse-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cryptopulse-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #c9d9f2;
    background: #fff;
    color: #12345c;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.cryptopulse-btn--primary {
    background: #1491e5;
    border-color: #1491e5;
    color: #fff;
}

.cryptopulse-btn-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cryptopulse-btn-icon svg {
    width: 14px;
    height: 14px;
}

.cryptopulse-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 12px;
}

.cryptopulse-filter {
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: var(--text, #12233d);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cryptopulse-filter.is-active {
    border-color: #1491e5;
    color: #1491e5;
    background: rgba(20, 145, 229, .08);
}

.cryptopulse-ticker {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(100px, auto));
    grid-auto-columns: minmax(210px, 1fr);
    gap: 10px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.cryptopulse-ticker-item {
    text-align: left;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    background: var(--surface, #fff);
    padding: 10px;
    cursor: pointer;
    min-width: 0;
    scroll-snap-align: start;
}

.cryptopulse-ticker-item-body,
.cryptopulse-ticker-item-head,
.cryptopulse-live-asset,
.cryptopulse-asset-inline,
.cryptopulse-asset-choice-head,
.cryptopulse-metric-asset {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cryptopulse-ticker-item-head img,
.cryptopulse-live-asset img,
.cryptopulse-asset-inline img,
.cryptopulse-asset-choice-head img,
.cryptopulse-metric-asset img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cryptopulse-ticker-item-body {
    width: 100%;
    justify-content: space-between;
    align-items: stretch;
}

.cryptopulse-ticker-item-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    align-self: center;
}

.cryptopulse-live-asset img {
    width: 38px;
    height: 38px;
}

.cryptopulse-ticker-item-head {
    margin-bottom: 0;
}

.cryptopulse-ticker-item-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.cryptopulse-ticker-item-head > span {
    display: grid;
    gap: 1px;
}

.cryptopulse-ticker-item-head small {
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-ticker-item strong {
    display: block;
    font-size: 13px;
}

.cryptopulse-ticker-item-price {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.cryptopulse-ticker-item em {
    display: block;
    font-style: normal;
    font-size: 12px;
}

.cryptopulse-ticker-item.is-active {
    border-color: #1491e5;
    box-shadow: inset 0 0 0 1px rgba(20, 145, 229, .25);
}

.cryptopulse-ticker-item.is-flash-up {
    background: rgba(12, 159, 98, .1);
}

.cryptopulse-ticker-item.is-flash-down {
    background: rgba(220, 90, 99, .1);
}

.cryptopulse-account-shell {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
}

.cryptopulse-account-card,
.cryptopulse-discovery-card {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 12px;
    background: var(--surface, #fff);
    padding: 16px;
    min-width: 0;
    overflow: hidden;
}

.cryptopulse-account-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.cryptopulse-account-top h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.cryptopulse-account-subtitle {
    margin: 8px 0 0;
    color: var(--text-muted, #5f738f);
    max-width: 520px;
}

.cryptopulse-account-change {
    min-width: 92px;
    text-align: right;
    font-size: 18px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.cryptopulse-action-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.cryptopulse-action-strip .cryptopulse-btn {
    min-width: 150px;
    justify-content: center;
}

.cryptopulse-account-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.cryptopulse-account-metrics div {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    padding: 12px;
}

.cryptopulse-account-metrics span {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cryptopulse-account-metrics strong {
    display: block;
    margin-top: 6px;
    font-size: 18px;
}

.cryptopulse-metric-asset {
    margin-top: 6px;
}

.cryptopulse-metric-asset span {
    color: inherit;
    font-size: inherit;
    text-transform: none;
    letter-spacing: 0;
}

.cryptopulse-metric-split {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.cryptopulse-metric-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.cryptopulse-metric-copy small {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-metric-split img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cryptopulse-deposit-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cryptopulse-deposit-step {
    display: grid;
    gap: 12px;
}

.cryptopulse-modal-heading {
    display: grid;
    gap: 4px;
}

.cryptopulse-modal-heading span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-modal-heading strong {
    font-size: 15px;
    color: var(--text, #12233d);
}

.cryptopulse-asset-picker,
.cryptopulse-network-picker {
    display: grid;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.cryptopulse-asset-choice,
.cryptopulse-network-choice {
    width: 100%;
    text-align: left;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    background: var(--surface, #fff);
    padding: 9px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cryptopulse-asset-choice strong,
.cryptopulse-network-choice strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
}

.cryptopulse-asset-choice span,
.cryptopulse-network-choice span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-asset-choice-head,
.cryptopulse-network-choice-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.cryptopulse-asset-choice-head img,
.cryptopulse-network-choice-head img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cryptopulse-asset-choice > span:last-child,
.cryptopulse-network-choice > span:last-child {
    margin-top: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.cryptopulse-asset-choice.is-active,
.cryptopulse-network-choice.is-active {
    border-color: #1491e5;
    background: rgba(20, 145, 229, .08);
    box-shadow: inset 0 0 0 1px rgba(20, 145, 229, .16);
}

.cryptopulse-hidden-select {
    display: none;
}

.cryptopulse-empty--compact {
    padding: 18px 14px;
}

.cryptopulse-deposit-receipt {
    margin-top: 18px;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20, 145, 229, .05), rgba(20, 145, 229, 0));
    padding: 18px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: start;
}

.cryptopulse-deposit-qr-wrap {
    display: grid;
    place-items: center;
    min-height: 180px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border, #d7e2f2);
    padding: 12px;
}

.cryptopulse-deposit-qr-wrap img {
    width: 100%;
    max-width: 156px;
    height: auto;
    display: block;
}

.cryptopulse-deposit-receipt-body {
    display: grid;
    gap: 16px;
}

.cryptopulse-receipt-hero {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(20, 145, 229, 0.14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20, 145, 229, 0.08), rgba(20, 145, 229, 0.02));
}

.cryptopulse-receipt-qr {
    display: grid;
    place-items: center;
    min-height: 132px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border, #d7e2f2);
    padding: 10px;
}

.cryptopulse-receipt-summary {
    display: grid;
    gap: 6px;
}

.cryptopulse-receipt-summary strong {
    font-size: 20px;
    line-height: 1.2;
    color: var(--text, #12233d);
}

.cryptopulse-receipt-summary p {
    margin: 0;
    color: var(--text-muted, #5f738f);
    font-size: 13px;
}

body.theme-dark .cryptopulse-receipt-hero,
body.dark-mode .cryptopulse-receipt-hero {
    border-color: rgba(59, 130, 246, 0.22);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.18), rgba(15, 23, 42, 0.16));
}

body.theme-dark .cryptopulse-receipt-qr,
body.dark-mode .cryptopulse-receipt-qr {
    background: #fff;
}

body.theme-dark .cryptopulse-receipt-summary strong,
body.dark-mode .cryptopulse-receipt-summary strong {
    color: #f8fafc;
}

body.theme-dark .cryptopulse-receipt-summary p,
body.dark-mode .cryptopulse-receipt-summary p {
    color: #96accf;
}

.cryptopulse-deposit-network span,
.cryptopulse-deposit-address span {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-deposit-network strong,
.cryptopulse-deposit-address strong {
    display: block;
    margin-top: 6px;
    font-size: 18px;
    color: var(--text, #12233d);
    word-break: break-word;
}

.cryptopulse-copy-btn {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: var(--text, #12233d);
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 700;
}

.cryptopulse-copy-btn.is-copied {
    border-color: #0c9f62;
    color: #0c9f62;
}

.cryptopulse-deposit-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cryptopulse-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
}

.cryptopulse-grid--bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cryptopulse-panel {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 12px;
    background: var(--surface, #fff);
    padding: 12px;
    min-width: 0;
    overflow: hidden;
}

.cryptopulse-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    min-width: 0;
}

.cryptopulse-live-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cryptopulse-live-label {
    font-size: 11px;
    color: var(--text-muted, #5f738f);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cryptopulse-range-select {
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: var(--text, #12233d);
    font-size: 12px;
    font-weight: 600;
    padding: 0 9px;
    min-width: 110px;
}

.cryptopulse-panel-head p {
    margin: 0 0 2px;
    font-size: 12px;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-panel-head h2,
.cryptopulse-panel-head h3 {
    margin: 0;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.cryptopulse-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #1491e5;
    text-decoration: none;
    font-weight: 700;
}

.cryptopulse-link-icon {
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cryptopulse-link-icon svg {
    width: 13px;
    height: 13px;
}

.cryptopulse-live-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.cryptopulse-live-metrics div {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 9px;
    padding: 8px;
}

.cryptopulse-live-metrics span {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-live-metrics strong {
    display: block;
    margin-top: 3px;
    font-size: 15px;
}

.cryptopulse-chart-wrap {
    position: relative;
    margin-top: 10px;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    height: 230px;
    overflow: hidden;
}

.cryptopulse-chart-svg {
    width: 100%;
    height: 100%;
}

.cryptopulse-line {
    fill: none;
    stroke: #1491e5;
    stroke-width: 3;
    stroke-linecap: round;
}

.cryptopulse-crosshair {
    stroke: rgba(20, 145, 229, .4);
    stroke-width: 1.2;
    stroke-dasharray: 4 4;
}

.cryptopulse-crosshair-dot {
    fill: #1491e5;
    stroke: #fff;
    stroke-width: 1.5;
}

.cryptopulse-chart-tooltip {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: var(--text, #12233d);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 10px 18px rgba(15, 23, 42, .12);
}

.cryptopulse-chart-axis {
    position: absolute;
    inset: auto 8px 6px 8px;
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--text-muted, #5f738f);
    pointer-events: none;
}

.cryptopulse-chart-axis span:nth-child(2),
.cryptopulse-chart-axis span:nth-child(3) {
    font-weight: 700;
}

.cryptopulse-chart-axis span:last-child {
    text-align: right;
}

.cryptopulse-wallet-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cryptopulse-wallet-meta div {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 9px;
    padding: 8px;
}

.cryptopulse-wallet-meta span {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-wallet-meta strong {
    display: block;
    margin-top: 3px;
    font-size: 14px;
}

.cryptopulse-donut {
    width: 210px;
    aspect-ratio: 1/1;
    margin: 12px auto 0;
    border-radius: 50%;
    background:
        conic-gradient(
            #1491e5 0 calc((var(--s1, 0) * 1%)),
            #3bc88f calc((var(--s1, 0) * 1%)) calc((var(--s1, 0) + var(--s2, 0)) * 1%),
            #f59e0b calc((var(--s1, 0) + var(--s2, 0)) * 1%) calc((var(--s1, 0) + var(--s2, 0) + var(--s3, 0)) * 1%),
            #8b5cf6 calc((var(--s1, 0) + var(--s2, 0) + var(--s3, 0)) * 1%) 100%
        );
    position: relative;
}

.cryptopulse-donut::before {
    content: "";
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    background: var(--surface, #fff);
}

.cryptopulse-donut-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    z-index: 1;
}

.cryptopulse-donut-center span {
    font-size: 11px;
    color: var(--text-muted, #5f738f);
    text-align: center;
}

.cryptopulse-donut-center strong {
    font-size: 28px;
    text-align: center;
}

.cryptopulse-legend {
    margin-top: 10px;
    display: grid;
    gap: 6px;
}

.cryptopulse-legend div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.cryptopulse-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.cryptopulse-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
}

.cryptopulse-table th,
.cryptopulse-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border, #d7e2f2);
    font-size: 12px;
    text-align: left;
}

.cryptopulse-table__row.is-deposit td {
    background: rgba(12, 159, 98, 0.10);
    color: #0b7a4e;
}

.cryptopulse-table__row.is-withdrawal td {
    background: rgba(220, 90, 99, 0.10);
    color: #b4232d;
}

.cryptopulse-table__row.is-rejected td {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.cryptopulse-table__row.is-deposit td a,
.cryptopulse-table__row.is-withdrawal td a,
.cryptopulse-table__row.is-rejected td a {
    color: inherit;
}

.cryptopulse-table__row--interactive {
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.cryptopulse-table__row--interactive:hover td {
    background: rgba(59, 130, 246, 0.08);
}

.cryptopulse-table__row--interactive:focus {
    outline: none;
}

.cryptopulse-table__row--interactive:focus td {
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28);
}

.cryptopulse-table__row-label {
    display: inline-block;
}

.cryptopulse-table tr:last-child td {
    border-bottom: 0;
}

.cryptopulse-activity-modal-dialog {
    max-width: 460px;
}

.cryptopulse-activity-modal {
    display: grid;
    gap: 16px;
}

.cryptopulse-activity-modal__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cryptopulse-activity-modal__eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

.cryptopulse-activity-modal__hero strong {
    display: block;
    font-size: 20px;
    line-height: 1.25;
    color: var(--text, #0f172a);
}

.cryptopulse-activity-modal__amount {
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text, #0f172a);
}

.cryptopulse-activity-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cryptopulse-activity-modal__item {
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.76);
    display: grid;
    gap: 6px;
}

.cryptopulse-activity-modal__item--full {
    grid-column: 1 / -1;
}

.cryptopulse-activity-modal__item span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

.cryptopulse-activity-modal__item strong {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text, #0f172a);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .cryptopulse-activity-modal__hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .cryptopulse-activity-modal__grid {
        grid-template-columns: 1fr;
    }

    .cryptopulse-activity-modal__item--full {
        grid-column: auto;
    }
}

.cryptopulse-convert {
    display: grid;
    gap: 8px;
}

.cryptopulse-convert div {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 9px;
    padding: 8px;
}

.cryptopulse-convert span {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-convert strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
}

.is-up {
    color: #0c9f62;
}

.is-down {
    color: #dc5a63;
}

.cryptopulse-empty {
    border: 1px dashed var(--border, #d7e2f2);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    color: var(--text-muted, #5f738f);
    font-size: 13px;
}

.cryptoconvert-page {
    display: grid;
    gap: 14px;
}

.cryptoconvert-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cryptoconvert-kpi p {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--text-muted, #5f738f);
}

.cryptoconvert-kpi h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
}

.cryptoconvert-kpi span {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted, #5f738f);
}

.cryptoconvert-card {
    max-width: 920px;
}

.cryptoconvert-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cryptoconvert-field {
    display: grid;
    gap: 6px;
}

.cryptoconvert-field label {
    font-size: 12px;
    color: var(--text-muted, #5f738f);
    font-weight: 600;
}

.cryptoconvert-result {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cryptoconvert-result div {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    padding: 10px;
    background: var(--surface, #fff);
}

.cryptoconvert-result span {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptoconvert-result strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
}

.cryptoconvert-assets {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cryptoconvert-asset-card {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    background: var(--surface, #fff);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cryptoconvert-asset-card img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.cryptoconvert-asset-card strong {
    display: block;
    font-size: 14px;
}

.cryptoconvert-asset-card small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptoconvert-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cryptoconvert-feedback {
    font-size: 12px;
    color: var(--text-muted, #5f738f);
    font-weight: 600;
}

.cryptoconvert-feedback.is-success {
    color: #0c9f62;
}

.cryptoconvert-feedback.is-error {
    color: #dc5a63;
}

.cc-submit-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ccSubmitSpin .75s linear infinite;
}

.cryptopulse-btn.is-loading .cryptopulse-btn-icon {
    display: none;
}

.cryptopulse-btn.is-loading .cc-submit-spinner {
    display: inline-block;
}

@keyframes ccSubmitSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1100px) {
    .cryptopulse-ticker {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, minmax(100px, auto));
        grid-auto-columns: minmax(210px, 1fr);
    }

    .cryptopulse-account-shell {
        grid-template-columns: 1fr;
    }

    .cryptopulse-grid,
    .cryptopulse-grid--bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .cryptopulse-header {
        flex-direction: column;
        padding: 14px;
    }

    .cryptopulse-actions {
        width: 100%;
    }

    .cryptopulse-header h1 {
        font-size: 20px;
    }

    .cryptopulse-header p {
        font-size: 13px;
    }

    .cryptopulse-btn {
        flex: 1 1 0;
        text-align: center;
        justify-content: center;
        min-width: 0;
    }

    .cryptopulse-menu {
        width: 100%;
        gap: 6px;
    }

    .cryptopulse-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
    }

    .cryptopulse-filter {
        white-space: nowrap;
    }

    .cryptopulse-live-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cryptopulse-donut {
        width: 170px;
    }

    .cryptopulse-account-top,
    .cryptopulse-deposit-receipt {
        grid-template-columns: 1fr;
        display: grid;
    }

    .cryptopulse-account-change {
        text-align: left;
        min-width: 0;
        font-size: 16px;
    }

    .cryptopulse-deposit-meta-grid,
    .cryptopulse-deposit-layout {
        grid-template-columns: 1fr;
    }

    .cryptopulse-account-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cryptopulse-account-metrics > :last-child {
        grid-column: 1 / -1;
    }

    .cryptopulse-action-strip {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cryptopulse-action-strip .cryptopulse-btn {
        width: 100%;
        min-width: 0;
    }

    .cryptopulse-account-card,
    .cryptopulse-discovery-card,
    .cryptopulse-panel {
        padding: 14px;
    }

    .cryptopulse-account-top h2 {
        font-size: 28px;
    }

    .cryptopulse-account-subtitle {
        font-size: 13px;
        max-width: none;
    }

    .cryptopulse-account-metrics strong {
        font-size: 16px;
    }

    .cryptopulse-ticker {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, minmax(96px, auto));
        grid-auto-columns: minmax(190px, 82vw);
    }

    .cryptopulse-ticker-item {
        min-width: 0;
    }

    .cryptopulse-ticker-item-head {
        gap: 8px;
    }

    .cryptopulse-ticker-item-head img,
    .cryptopulse-asset-inline img,
    .cryptopulse-asset-choice-head img,
    .cryptopulse-metric-asset img {
        width: 24px;
        height: 24px;
    }

    .cryptopulse-ticker-item-logo {
        width: 46px;
        height: 46px;
    }

    .cryptopulse-metric-split img {
        width: 42px;
        height: 42px;
    }

    .cryptopulse-live-asset {
        align-items: flex-start;
        gap: 8px;
    }

    .cryptopulse-live-asset img {
        width: 30px;
        height: 30px;
    }

    .cryptopulse-live-controls {
        width: 100%;
        justify-content: space-between;
        min-width: 0;
    }

    .cryptoconvert-grid,
    .cryptoconvert-result {
        grid-template-columns: 1fr;
    }

    .cryptoconvert-top,
    .cryptoconvert-assets {
        grid-template-columns: 1fr;
    }

    .cryptopulse-live-controls {
        width: 100%;
        justify-content: space-between;
    }

    .cryptopulse-range-select {
        min-width: 96px;
    }
}

body.theme-dark .cryptopulse-header,
body.theme-dark .cryptopulse-panel,
body.theme-dark .cryptopulse-filter,
body.theme-dark .cryptopulse-ticker-item,
body.theme-dark .cryptopulse-btn,
body.theme-dark .cryptopulse-account-card,
body.theme-dark .cryptopulse-discovery-card,
body.theme-dark .cryptopulse-account-metrics div,
body.theme-dark .cryptopulse-asset-choice,
body.theme-dark .cryptopulse-network-choice,
body.theme-dark .cryptopulse-deposit-receipt,
body.theme-dark .cryptopulse-deposit-qr-wrap,
body.theme-dark .cryptopulse-copy-btn,
body.theme-dark .cryptopulse-live-metrics div,
body.theme-dark .cryptopulse-wallet-meta div,
body.theme-dark .cryptopulse-chart-wrap,
body.theme-dark .cryptopulse-convert div,
body.theme-dark .cryptopulse-table th,
body.theme-dark .cryptopulse-table td,
body.theme-dark .cryptopulse-empty,
body.dark-mode .cryptopulse-header,
body.dark-mode .cryptopulse-panel,
body.dark-mode .cryptopulse-filter,
body.dark-mode .cryptopulse-ticker-item,
body.dark-mode .cryptopulse-btn,
body.dark-mode .cryptopulse-account-card,
body.dark-mode .cryptopulse-discovery-card,
body.dark-mode .cryptopulse-account-metrics div,
body.dark-mode .cryptopulse-asset-choice,
body.dark-mode .cryptopulse-network-choice,
body.dark-mode .cryptopulse-deposit-receipt,
body.dark-mode .cryptopulse-deposit-qr-wrap,
body.dark-mode .cryptopulse-copy-btn,
body.dark-mode .cryptopulse-live-metrics div,
body.dark-mode .cryptopulse-wallet-meta div,
body.dark-mode .cryptopulse-chart-wrap,
body.dark-mode .cryptopulse-convert div,
body.dark-mode .cryptopulse-table th,
body.dark-mode .cryptopulse-table td,
body.dark-mode .cryptopulse-empty {
    background: #0f1b33;
    border-color: #253454;
    color: #e5efff;
}

body.theme-dark .cryptopulse-eyebrow,
body.theme-dark .cryptopulse-header p,
body.theme-dark .cryptopulse-panel-head p,
body.theme-dark .cryptopulse-live-metrics span,
body.theme-dark .cryptopulse-wallet-meta span,
body.theme-dark .cryptopulse-account-subtitle,
body.theme-dark .cryptopulse-account-metrics span,
body.theme-dark .cryptopulse-modal-heading span,
body.theme-dark .cryptopulse-asset-choice span,
body.theme-dark .cryptopulse-network-choice span,
body.theme-dark .cryptopulse-deposit-network span,
body.theme-dark .cryptopulse-deposit-address span,
body.theme-dark .cryptopulse-convert span,
body.theme-dark .cryptopulse-empty,
body.dark-mode .cryptopulse-eyebrow,
body.dark-mode .cryptopulse-header p,
body.dark-mode .cryptopulse-panel-head p,
body.dark-mode .cryptopulse-live-metrics span,
body.dark-mode .cryptopulse-wallet-meta span,
body.dark-mode .cryptopulse-account-subtitle,
body.dark-mode .cryptopulse-account-metrics span,
body.dark-mode .cryptopulse-modal-heading span,
body.dark-mode .cryptopulse-asset-choice span,
body.dark-mode .cryptopulse-network-choice span,
body.dark-mode .cryptopulse-deposit-network span,
body.dark-mode .cryptopulse-deposit-address span,
body.dark-mode .cryptopulse-convert span,
body.dark-mode .cryptopulse-empty {
    color: #96accf;
}

body.theme-dark .cryptopulse-menu a,
body.theme-dark .cryptopulse-filter,
body.dark-mode .cryptopulse-menu a,
body.dark-mode .cryptopulse-filter {
    background: #142543;
    border-color: #2e4673;
    color: #cfe2ff;
}

body.theme-dark .cryptopulse-btn--primary,
body.dark-mode .cryptopulse-btn--primary {
    background: #1491e5;
    border-color: #1491e5;
    color: #fff;
}

body.theme-dark .cryptopulse-menu a.is-active,
body.theme-dark .cryptopulse-filter.is-active,
body.dark-mode .cryptopulse-menu a.is-active,
body.dark-mode .cryptopulse-filter.is-active {
    background: rgba(20, 145, 229, .18);
    border-color: #3d8fdb;
    color: #8ec5ff;
}

body.theme-dark .cryptopulse-table__row.is-deposit td,
body.dark-mode .cryptopulse-table__row.is-deposit td {
    background: rgba(12, 159, 98, 0.18);
    color: #7ef0b8;
    border-color: rgba(50, 120, 90, 0.55);
}

body.theme-dark .cryptopulse-table__row.is-withdrawal td,
body.dark-mode .cryptopulse-table__row.is-withdrawal td {
    background: rgba(220, 90, 99, 0.18);
    color: #ffb4bb;
    border-color: rgba(132, 54, 61, 0.55);
}

body.theme-dark .cryptopulse-table__row.is-rejected td,
body.dark-mode .cryptopulse-table__row.is-rejected td {
    background: rgba(245, 158, 11, 0.18);
    color: #ffd089;
    border-color: rgba(166, 109, 33, 0.55);
}

body.theme-dark .cryptopulse-table__row--interactive:hover td,
body.dark-mode .cryptopulse-table__row--interactive:hover td {
    background: rgba(59, 130, 246, 0.14);
}

body.theme-dark .cryptopulse-table__row--interactive:focus td,
body.dark-mode .cryptopulse-table__row--interactive:focus td {
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.34);
}

body.theme-dark .cryptopulse-activity-modal__hero strong,
body.theme-dark .cryptopulse-activity-modal__amount,
body.theme-dark .cryptopulse-activity-modal__item strong,
body.dark-mode .cryptopulse-activity-modal__hero strong,
body.dark-mode .cryptopulse-activity-modal__amount,
body.dark-mode .cryptopulse-activity-modal__item strong {
    color: #f8fafc;
}

body.theme-dark .cryptopulse-activity-modal__eyebrow,
body.theme-dark .cryptopulse-activity-modal__item span,
body.dark-mode .cryptopulse-activity-modal__eyebrow,
body.dark-mode .cryptopulse-activity-modal__item span {
    color: #8fa5c7;
}

body.theme-dark .cryptopulse-activity-modal__item,
body.dark-mode .cryptopulse-activity-modal__item {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.12);
}

body.theme-dark .cryptopulse-donut::before,
body.dark-mode .cryptopulse-donut::before {
    background: #0f1b33;
}

body.theme-dark .cryptoconvert-result div,
body.theme-dark .cryptoconvert-asset-card,
body.dark-mode .cryptoconvert-result div,
body.dark-mode .cryptoconvert-asset-card {
    background: #0f1b33;
    border-color: #253454;
}

body.theme-dark .cryptoconvert-field label,
body.theme-dark .cryptoconvert-result span,
body.theme-dark .cryptoconvert-kpi p,
body.theme-dark .cryptoconvert-kpi span,
body.theme-dark .cryptoconvert-asset-card small,
body.dark-mode .cryptoconvert-field label,
body.dark-mode .cryptoconvert-result span,
body.dark-mode .cryptoconvert-kpi p,
body.dark-mode .cryptoconvert-kpi span,
body.dark-mode .cryptoconvert-asset-card small {
    color: #96accf;
}

/* CRYPTO CONVERTER PRO */
.cryptoconvert-pro {
    display: grid;
    gap: 14px;
}

.cryptoconvert-pro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr);
    gap: 12px;
}

.cryptoconvert-widget-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.cryptoconvert-widget-head h3 {
    margin: 0;
    font-size: 18px;
}

.cryptoconvert-widget-head strong {
    font-size: 20px;
}

.cryptoconvert-box {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 12px;
    padding: 10px;
    background: var(--surface, #fff);
}

.cryptoconvert-box + .cryptoconvert-box {
    margin-top: 10px;
}

.cryptoconvert-box label {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
    margin-bottom: 6px;
}

.cryptoconvert-box small {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptoconvert-row {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 8px;
}

.cc-amount-wrap {
    position: relative;
}

.cc-amount-wrap .form-input {
    padding-right: 64px;
}

.cc-max-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: #1491e5;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 7px 10px;
    cursor: pointer;
}

.cryptoconvert-select-wrap {
    position: relative;
}

.cryptoconvert-select-wrap .cryptopulse-range-select {
    width: 100%;
    padding-left: 34px;
}

.cryptoconvert-select-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
}

.cc-picker {
    position: relative;
}

.cc-picker-btn {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: var(--text, #12233d);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    font-weight: 700;
    cursor: pointer;
}

.cc-picker-btn .cryptoconvert-select-icon {
    position: static;
    transform: none;
}

.cc-picker-btn > span:first-of-type {
    flex: 1;
    text-align: left;
    font-size: 13px;
}

.cc-picker-chevron {
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cc-picker-panel {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
    padding: 8px;
}

.cc-picker-search {
    width: 100%;
    height: 34px;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text, #12233d);
    padding: 0 10px;
    margin-bottom: 6px;
    font-size: 12px;
}

.cc-picker-list {
    max-height: 240px;
    overflow: auto;
    display: grid;
    gap: 4px;
}

.cc-picker-item {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: left;
}

.cc-picker-item img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.cc-picker-item span {
    display: grid;
    line-height: 1.1;
}

.cc-picker-item strong {
    font-size: 12px;
}

.cc-picker-item small {
    font-size: 10px;
    color: var(--text-muted, #5f738f);
}

.cc-picker-item:hover,
.cc-picker-item.is-active {
    background: rgba(20, 145, 229, .08);
    border-color: rgba(20, 145, 229, .2);
}

.cryptoconvert-swap {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: #1491e5;
    margin: 10px auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.cryptoconvert-swap:hover {
    transform: translateY(-1px);
    background: rgba(20, 145, 229, 0.08);
    border-color: rgba(20, 145, 229, 0.24);
}

.cryptoconvert-swap-icon,
.cryptoconvert-swap-icon svg {
    width: 18px;
    height: 18px;
}

.cryptoconvert-meta {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.cryptoconvert-meta div {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    padding: 8px;
    background: var(--surface, #fff);
}

.cryptoconvert-meta span {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptoconvert-meta strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
}

.cryptoconvert-market-list {
    display: grid;
    gap: 8px;
}

.cryptoconvert-market-item {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    background: var(--surface, #fff);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cryptoconvert-market-item img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.cryptoconvert-market-item strong {
    display: block;
    font-size: 13px;
}

.cryptoconvert-market-item small {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

@media (max-width: 900px) {
    .cryptoconvert-pro-grid,
    .cryptoconvert-meta,
    .cryptoconvert-row {
        grid-template-columns: 1fr;
    }
}

body.theme-dark .cryptoconvert-box,
body.theme-dark .cryptoconvert-meta div,
body.theme-dark .cryptoconvert-market-item,
body.theme-dark .cryptoconvert-swap,
body.theme-dark .cc-max-btn,
body.theme-dark .cc-picker-btn,
body.theme-dark .cc-picker-panel,
body.theme-dark .cc-picker-search,
body.dark-mode .cryptoconvert-box,
body.dark-mode .cryptoconvert-meta div,
body.dark-mode .cryptoconvert-market-item,
body.dark-mode .cryptoconvert-swap,
body.dark-mode .cc-max-btn,
body.dark-mode .cc-picker-btn,
body.dark-mode .cc-picker-panel,
body.dark-mode .cc-picker-search {
    background: #0f1b33;
    border-color: #253454;
}

body.theme-dark .crypto-asset-back-btn,
body.dark-mode .crypto-asset-back-btn {
    background: rgba(15, 27, 51, .9);
    border-color: #253454;
    color: #e5efff;
}

body.theme-dark .crypto-asset-back-btn:hover,
body.dark-mode .crypto-asset-back-btn:hover {
    background: #142543;
    border-color: rgba(59, 130, 246, .48);
}

body.theme-dark .cryptoconvert-box label,
body.theme-dark .cryptoconvert-box small,
body.theme-dark .cryptoconvert-meta span,
body.theme-dark .cryptoconvert-market-item small,
body.theme-dark .cc-max-btn,
body.theme-dark .cc-picker-chevron,
body.theme-dark .cc-picker-item small,
body.dark-mode .cryptoconvert-box label,
body.dark-mode .cryptoconvert-box small,
body.dark-mode .cryptoconvert-meta span,
body.dark-mode .cryptoconvert-market-item small,
body.dark-mode .cc-max-btn,
body.dark-mode .cc-picker-chevron,
body.dark-mode .cc-picker-item small {
    color: #96accf;
}

body.theme-dark .cryptopulse-table-wrap,
body.theme-dark .crypto-market-table-wrap,
body.dark-mode .cryptopulse-table-wrap,
body.dark-mode .crypto-market-table-wrap {
    scrollbar-color: rgba(59, 130, 246, 0.38) transparent;
}

body.theme-dark .cryptopulse-table-wrap::-webkit-scrollbar-thumb,
body.theme-dark .crypto-market-table-wrap::-webkit-scrollbar-thumb,
body.dark-mode .cryptopulse-table-wrap::-webkit-scrollbar-thumb,
body.dark-mode .crypto-market-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.35);
}

body.theme-dark .cryptopulse-range-select,
body.dark-mode .cryptopulse-range-select {
    background: #142543;
    border-color: #2e4673;
    color: #cfe2ff;
}

body.theme-dark .cryptopulse-chart-tooltip,
body.dark-mode .cryptopulse-chart-tooltip {
    background: #142543;
    border-color: #2e4673;
    color: #e8f2ff;
}

body.theme-dark .cryptopulse-chart-axis,
body.dark-mode .cryptopulse-chart-axis,
body.theme-dark .cryptopulse-live-label,
body.dark-mode .cryptopulse-live-label {
    color: #96accf;
}

/* CRYPTO ORDERS PRO */
.cryptoorders-pro {
    display: grid;
    gap: 14px;
}

.cryptoorders-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.cryptoorders-kpi {
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    border-radius: 12px;
    padding: 12px;
    min-width: 0;
}

.cryptoorders-kpi span {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptoorders-kpi strong {
    display: block;
    margin-top: 6px;
    font-size: 22px;
    line-height: 1.1;
    color: var(--text, #12233d);
}

.cryptoorders-panel {
    display: grid;
    gap: 12px;
}

.cryptoorders-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 180px 220px 180px;
    gap: 10px;
    align-items: end;
}

.cryptoorders-filter-grow {
    min-width: 0;
}

.cryptoorders-filters label {
    display: grid;
    gap: 6px;
}

.cryptoorders-filters span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #5f738f);
}

.cryptoorders-table-wrap {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 12px;
    overflow: auto;
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.34) transparent;
}

.cryptoorders-table-wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.cryptoorders-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.cryptoorders-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.34);
    border-radius: 999px;
}

.cryptoorders-table-wrap:hover::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.5);
}

.cryptoorders-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
}

.cryptoorders-table th,
.cryptoorders-table td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--border, #d7e2f2);
    text-align: left;
    vertical-align: middle;
    font-size: 12px;
}

.cryptoorders-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted, #5f738f);
    font-weight: 800;
}

.cryptoorders-table tr:last-child td {
    border-bottom: 0;
}

.cryptoorders-ref {
    font-weight: 800;
    color: var(--text, #12233d);
}

.cryptoorders-asset strong {
    display: block;
    font-size: 13px;
    color: var(--text, #12233d);
}

.cryptoorders-asset small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptoorders-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cryptoorders-cards {
    display: none;
}

.cryptoorders-card {
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    gap: 10px;
}

.cryptoorders-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.cryptoorders-card-asset h3 {
    margin: 0;
    font-size: 17px;
    color: var(--text, #12233d);
}

.cryptoorders-card-asset small {
    font-size: 12px;
    color: var(--text-muted, #5f738f);
}

.cryptoorders-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cryptoorders-card-grid span {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptoorders-card-grid strong {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--text, #12233d);
}

.cryptoorders-empty {
    border: 1px dashed var(--border, #d7e2f2);
    border-radius: 12px;
    padding: 22px 14px;
    text-align: center;
    display: grid;
    place-items: center;
    gap: 10px;
}

.cryptoorders-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: #1491e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cryptoorders-empty h3 {
    margin: 0;
    font-size: 20px;
}

.cryptoorders-empty p {
    margin: 0;
    max-width: 520px;
    color: var(--text-muted, #5f738f);
    font-size: 13px;
}

@media (max-width: 1100px) {
    .cryptoorders-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .cryptoorders-filters {
        grid-template-columns: 1fr 1fr;
    }

    .cryptoorders-table-wrap {
        display: none;
    }

    .cryptoorders-cards {
        display: grid;
        gap: 10px;
    }
}

@media (max-width: 560px) {
    .cryptoorders-kpis {
        grid-template-columns: 1fr;
    }

    .cryptoorders-filters {
        grid-template-columns: 1fr;
    }

    .cryptoorders-card-grid {
        grid-template-columns: 1fr;
    }
}

body.theme-dark .cryptoorders-kpi,
body.theme-dark .cryptoorders-table-wrap,
body.theme-dark .cryptoorders-card,
body.theme-dark .cryptoorders-empty,
body.theme-dark .cryptoorders-empty-icon,
body.dark-mode .cryptoorders-kpi,
body.dark-mode .cryptoorders-table-wrap,
body.dark-mode .cryptoorders-card,
body.dark-mode .cryptoorders-empty,
body.dark-mode .cryptoorders-empty-icon {
    background: #0f1b33;
    border-color: #253454;
}

body.theme-dark .cryptoorders-kpi span,
body.theme-dark .cryptoorders-filters span,
body.theme-dark .cryptoorders-asset small,
body.theme-dark .cryptoorders-card-grid span,
body.theme-dark .cryptoorders-card-asset small,
body.theme-dark .cryptoorders-empty p,
body.theme-dark .cryptoorders-table th,
body.dark-mode .cryptoorders-kpi span,
body.dark-mode .cryptoorders-filters span,
body.dark-mode .cryptoorders-asset small,
body.dark-mode .cryptoorders-card-grid span,
body.dark-mode .cryptoorders-card-asset small,
body.dark-mode .cryptoorders-empty p,
body.dark-mode .cryptoorders-table th {
    color: #96accf;
}

body.theme-dark .cryptoorders-kpi strong,
body.theme-dark .cryptoorders-ref,
body.theme-dark .cryptoorders-asset strong,
body.theme-dark .cryptoorders-card-asset h3,
body.theme-dark .cryptoorders-card-grid strong,
body.theme-dark .cryptoorders-table td,
body.dark-mode .cryptoorders-kpi strong,
body.dark-mode .cryptoorders-ref,
body.dark-mode .cryptoorders-asset strong,
body.dark-mode .cryptoorders-card-asset h3,
body.dark-mode .cryptoorders-card-grid strong,
body.dark-mode .cryptoorders-table td {
    color: #e8f2ff;
}

body.theme-dark .cryptoorders-table-wrap,
body.dark-mode .cryptoorders-table-wrap {
    scrollbar-color: rgba(59, 130, 246, 0.38) transparent;
}

body.theme-dark .cryptoorders-table-wrap::-webkit-scrollbar-thumb,
body.dark-mode .cryptoorders-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.35);
}

/* CRYPTO MARKET PRO */
.cryptomarket-pro {
    display: grid;
    gap: 14px;
}

.cryptomarket-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.cryptomarket-kpi {
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    border-radius: 12px;
    padding: 12px;
}

.cryptomarket-kpi span {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-kpi strong {
    display: block;
    margin-top: 6px;
    font-size: 22px;
    line-height: 1.1;
}

.cryptomarket-panel {
    display: grid;
    gap: 12px;
}

.cryptomarket-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 180px 180px 180px;
    gap: 10px;
    align-items: end;
}

.cryptomarket-filter-grow {
    min-width: 0;
}

.cryptomarket-filters label {
    display: grid;
    gap: 6px;
}

.cryptomarket-filters span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-pro .crypto-market-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.34) transparent;
}

.cryptomarket-pro .crypto-market-table-wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.cryptomarket-pro .crypto-market-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.cryptomarket-pro .crypto-market-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.34);
    border-radius: 999px;
}

.cryptomarket-pro .crypto-market-table-wrap:hover::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.5);
}

.cryptomarket-cards {
    display: none;
}

.cryptomarket-card {
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    gap: 10px;
}

.cryptomarket-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.cryptomarket-rank {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cryptomarket-card-grid span {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-card-grid strong {
    display: block;
    margin-top: 2px;
    font-size: 13px;
}

.cryptomarket-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: none;
    padding: 12px;
    overflow: hidden;
}

.cryptomarket-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cryptomarket-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.6);
    backdrop-filter: blur(2px);
}

.cryptomarket-modal-dialog {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 24px);
    margin: 0;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    background: var(--surface, #fff);
    box-shadow: 0 20px 56px rgba(15, 23, 42, 0.35);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cryptomarket-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--border, #d7e2f2);
    flex: 0 0 auto;
}

.cryptomarket-modal-asset {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cryptomarket-modal-asset img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.cryptomarket-modal-asset p {
    margin: 0;
    font-size: 10px;
    color: var(--text-muted, #5f738f);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cryptomarket-modal-asset h3 {
    margin: 2px 0 0;
    font-size: 16px;
    line-height: 1.2;
}

.cryptomarket-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: var(--text, #12233d);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cryptomarket-order-form {
    margin-top: 0;
    display: grid;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.cryptomarket-order-form::-webkit-scrollbar {
    width: 6px;
}

.cryptomarket-order-form::-webkit-scrollbar-track {
    background: transparent;
}

.cryptomarket-order-form::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
}

.cryptomarket-order-form [hidden] {
    display: none !important;
}

.cryptomarket-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.cryptomarket-stepper button {
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    background: var(--soft, #f6f9fd);
    color: var(--text-muted, #5f738f);
    display: grid;
    justify-items: start;
    gap: 2px;
    cursor: pointer;
}

.cryptomarket-stepper button span {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(22, 136, 232, 0.12);
    color: var(--primary, #1688e8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.cryptomarket-stepper button small {
    font-size: 11px;
    font-weight: 700;
}

.cryptomarket-stepper button.is-active,
.cryptomarket-stepper button.is-complete {
    border-color: rgba(22, 136, 232, 0.35);
}

.cryptomarket-stepper button.is-active {
    background: rgba(22, 136, 232, 0.08);
    color: var(--text, #12233d);
}

.cryptomarket-stepper button.is-complete span,
.cryptomarket-stepper button.is-active span {
    background: var(--primary, #1688e8);
    color: #fff;
}

.cryptomarket-step-panel {
    display: none;
    gap: 10px;
}

.cryptomarket-step-panel.is-active {
    display: grid;
}

.cryptomarket-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cryptomarket-panel-head p {
    margin: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-panel-head h4 {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.2;
    color: var(--text, #12233d);
}

.cryptomarket-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    background: var(--soft, #f6f9fd);
}

.cryptomarket-mode-switch button {
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #5f738f);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.cryptomarket-mode-switch button.is-active {
    background: var(--primary, #1688e8);
    color: #fff;
    box-shadow: 0 8px 18px rgba(22, 136, 232, 0.22);
}

.cryptomarket-mode-switch button[data-order-type="sell"].is-active {
    background: #0f766e;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.22);
}

.cryptomarket-mode-icon {
    width: 14px;
    height: 14px;
}

.cryptomarket-native-type {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.cryptomarket-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cryptomarket-form-grid label,
.cryptomarket-order-form > label {
    display: grid;
    gap: 5px;
}

.cryptomarket-form-grid span,
.cryptomarket-order-form > label span {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-modal .form-input,
.cryptomarket-modal .cryptopulse-range-select {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
}

.cryptomarket-modal textarea.form-input {
    min-height: 64px;
}

.cryptomarket-payment-entry {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 8px;
    background: var(--soft, #f6f9fd);
    padding: 8px;
    display: grid;
    gap: 12px;
}

.cryptomarket-payment-block {
    display: grid;
    gap: 8px;
}

.cryptomarket-payment-entry-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text, #12233d);
}

.cryptomarket-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cryptomarket-payment-grid label,
.cryptomarket-payment-block label {
    display: grid;
    gap: 5px;
}

.cryptomarket-payment-grid span,
.cryptomarket-payment-block label span {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-inline-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cryptomarket-card-brand {
    min-width: 92px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(22, 136, 232, 0.2);
    background: rgba(22, 136, 232, 0.08);
    color: var(--primary, #1688e8);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.cryptomarket-card-brand.is-hidden {
    display: none;
}

.cryptomarket-card-brand.is-visa {
    border-color: rgba(37, 99, 235, 0.28);
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.cryptomarket-card-brand.is-mastercard {
    border-color: rgba(234, 88, 12, 0.28);
    background: rgba(234, 88, 12, 0.12);
    color: #ea580c;
}

.cryptomarket-paypal-destination {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    color: var(--text, #12233d);
    font-size: 12px;
    font-weight: 700;
}

.cryptomarket-gateway-notice {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border, #d7e2f2);
    background: var(--surface, #fff);
    display: grid;
    gap: 8px;
}

.cryptomarket-gateway-notice p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text, #12233d);
}

.cryptomarket-payment-details-card {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    background: var(--surface, #fff);
    padding: 12px;
    display: grid;
    gap: 10px;
}

.cryptomarket-payment-details-list {
    display: grid;
    gap: 8px;
}

.cryptomarket-payment-detail-item {
    padding: 10px 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(246, 249, 253, 0.98) 0%, rgba(238, 244, 252, 0.98) 100%);
    border: 1px solid rgba(215, 226, 242, 0.9);
    color: var(--text, #12233d);
    line-height: 1.45;
    font-size: 12px;
    word-break: break-word;
    display: grid;
    gap: 4px;
}

.cryptomarket-payment-detail-item span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-payment-detail-item strong {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text, #12233d);
}

.cryptomarket-review-card {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 10px;
    background: var(--soft, #f6f9fd);
    padding: 12px;
    display: grid;
    gap: 10px;
}

.cryptomarket-review-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, #d7e2f2);
}

.cryptomarket-review-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cryptomarket-review-row span {
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-review-row strong {
    font-size: 12px;
    color: var(--text, #12233d);
    text-align: right;
    word-break: break-word;
}

.cryptomarket-order-summary {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 8px;
    background: var(--surface, #fff);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    position: sticky;
    bottom: 48px;
    z-index: 2;
    box-shadow: 0 -8px 16px rgba(15, 23, 42, 0.04);
}

.cryptomarket-order-summary span {
    display: block;
    font-size: 10px;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-order-summary strong {
    display: block;
    margin-top: 2px;
    font-size: 12px;
}

.cryptomarket-order-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, #d7e2f2);
    margin: 0 -12px -12px;
    padding: 8px 12px;
}

.cryptomarket-order-steps {
    border: 1px solid var(--border, #d7e2f2);
    border-radius: 8px;
    background: var(--surface, #fff);
    padding: 8px;
    display: grid;
    gap: 5px;
}

.cryptomarket-order-steps p {
    margin: 0;
    font-size: 10px;
    color: var(--text-muted, #5f738f);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 800;
}

.cryptomarket-order-steps ol {
    margin: 0;
    padding-left: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    font-size: 11px;
    color: var(--text, #12233d);
}

#marketPaymentMethodDetails {
    max-height: 132px;
    overflow: auto;
}

.cryptomarket-confirm {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted, #5f738f);
}

.cryptomarket-confirm input[type="checkbox"] {
    margin-top: 2px;
}

@media (max-width: 1100px) {
    .cryptomarket-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cryptomarket-filters {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .cryptomarket-filters {
        grid-template-columns: 1fr;
    }

    .cryptomarket-cards {
        display: grid;
        gap: 10px;
    }

    .cryptomarket-card-grid {
        grid-template-columns: 1fr;
    }

    .cryptomarket-form-grid,
    .cryptomarket-payment-grid,
    .cryptomarket-order-summary {
        grid-template-columns: 1fr;
    }

    .cryptomarket-stepper {
        grid-template-columns: 1fr;
    }

    .cryptomarket-review-row {
        flex-direction: column;
        gap: 6px;
    }

    .cryptomarket-review-row strong {
        text-align: left;
    }

    .cryptomarket-order-steps ol {
        grid-template-columns: 1fr;
    }

    .cryptomarket-order-summary {
        bottom: 52px;
    }
}

@media (max-width: 560px) {
    .cryptomarket-kpis {
        grid-template-columns: 1fr;
    }

    .cryptomarket-modal-dialog {
        width: 100%;
        max-height: calc(100vh - 16px);
    }

    .cryptomarket-modal {
        padding: 8px;
        align-items: flex-start;
    }

    .cryptomarket-order-form {
        padding: 10px;
    }

    .cryptomarket-order-actions {
        margin: 0 -10px -10px;
        padding: 8px 10px;
    }

    .cryptomarket-order-actions .btn,
    .cryptomarket-order-actions .cryptopulse-btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
    }
}

body.theme-dark .cryptomarket-kpi,
body.theme-dark .cryptomarket-card,
body.theme-dark .cryptomarket-modal-dialog,
body.theme-dark .cryptomarket-modal-close,
body.theme-dark .cryptomarket-mode-switch,
body.theme-dark .cryptomarket-stepper button,
body.theme-dark .cryptomarket-payment-entry,
body.theme-dark .cryptomarket-payment-details-card,
body.theme-dark .cryptomarket-review-card,
body.theme-dark .cryptomarket-order-summary,
body.theme-dark .cryptomarket-order-steps,
body.theme-dark .cryptomarket-pro .crypto-market-table-wrap,
body.theme-dark .cryptomarket-pro .crypto-market-table th,
body.theme-dark .cryptomarket-pro .crypto-market-table td,
body.theme-dark .cryptomarket-pro .form-input,
body.theme-dark .cryptomarket-pro .cryptopulse-range-select,
body.dark-mode .cryptomarket-kpi,
body.dark-mode .cryptomarket-card,
body.dark-mode .cryptomarket-modal-dialog,
body.dark-mode .cryptomarket-modal-close,
body.dark-mode .cryptomarket-mode-switch,
body.dark-mode .cryptomarket-stepper button,
body.dark-mode .cryptomarket-payment-entry,
body.dark-mode .cryptomarket-payment-details-card,
body.dark-mode .cryptomarket-review-card,
body.dark-mode .cryptomarket-order-summary,
body.dark-mode .cryptomarket-order-steps,
body.dark-mode .cryptomarket-pro .crypto-market-table-wrap,
body.dark-mode .cryptomarket-pro .crypto-market-table th,
body.dark-mode .cryptomarket-pro .crypto-market-table td,
body.dark-mode .cryptomarket-pro .form-input,
body.dark-mode .cryptomarket-pro .cryptopulse-range-select {
    background: #0f1b33;
    border-color: #253454;
    color: #e8f2ff;
}

body.theme-dark .cryptomarket-modal-head,
body.theme-dark .cryptomarket-order-actions,
body.dark-mode .cryptomarket-modal-head,
body.dark-mode .cryptomarket-order-actions {
    background: #0f1b33;
    border-color: #253454;
}

body.theme-dark .cryptomarket-order-form,
body.dark-mode .cryptomarket-order-form {
    scrollbar-color: rgba(59, 130, 246, 0.38) transparent;
}

body.theme-dark .cryptomarket-order-form::-webkit-scrollbar-thumb,
body.dark-mode .cryptomarket-order-form::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.35);
}

body.theme-dark .cryptomarket-kpi span,
body.theme-dark .cryptomarket-filters span,
body.theme-dark .cryptomarket-rank,
body.theme-dark .cryptomarket-card-grid span,
body.theme-dark .cryptomarket-stepper button small,
body.theme-dark .cryptomarket-modal-asset p,
body.theme-dark .cryptomarket-order-summary span,
body.theme-dark .cryptomarket-order-steps p,
body.theme-dark .cryptomarket-confirm,
body.theme-dark .cryptomarket-pro .crypto-market-table th,
body.theme-dark .cryptomarket-pro .crypto-market-asset__copy small,
body.dark-mode .cryptomarket-kpi span,
body.dark-mode .cryptomarket-filters span,
body.dark-mode .cryptomarket-rank,
body.dark-mode .cryptomarket-card-grid span,
body.dark-mode .cryptomarket-stepper button small,
body.dark-mode .cryptomarket-modal-asset p,
body.dark-mode .cryptomarket-order-summary span,
body.dark-mode .cryptomarket-order-steps p,
body.dark-mode .cryptomarket-confirm,
body.dark-mode .cryptomarket-pro .crypto-market-table th,
body.dark-mode .cryptomarket-pro .crypto-market-asset__copy small {
    color: #96accf;
}

body.theme-dark .cryptomarket-order-steps ol,
body.theme-dark .cryptomarket-payment-entry-head,
body.theme-dark .cryptomarket-panel-head h4,
body.theme-dark .cryptomarket-review-row strong,
body.theme-dark .cryptomarket-payment-detail-item,
body.theme-dark .cryptomarket-paypal-destination,
body.dark-mode .cryptomarket-order-steps ol {
    color: #e8f2ff;
}

body.dark-mode .cryptomarket-panel-head h4,
body.dark-mode .cryptomarket-review-row strong,
body.dark-mode .cryptomarket-payment-detail-item,
body.dark-mode .cryptomarket-paypal-destination,
body.dark-mode .cryptomarket-payment-entry-head {
    color: #e8f2ff;
}

body.theme-dark .cryptomarket-payment-detail-item,
body.theme-dark .cryptomarket-paypal-destination,
body.theme-dark .cryptomarket-gateway-notice,
body.dark-mode .cryptomarket-payment-detail-item,
body.dark-mode .cryptomarket-paypal-destination,
body.dark-mode .cryptomarket-gateway-notice {
    background: linear-gradient(180deg, rgba(18, 31, 56, 0.98) 0%, rgba(15, 27, 51, 0.98) 100%);
    border-color: #2d436a;
}

body.theme-dark .cryptomarket-payment-detail-item span,
body.dark-mode .cryptomarket-payment-detail-item span {
    color: #8ea6cb;
}

body.theme-dark .cryptomarket-payment-detail-item strong,
body.theme-dark .cryptomarket-gateway-notice p,
body.dark-mode .cryptomarket-payment-detail-item strong,
body.dark-mode .cryptomarket-gateway-notice p {
    color: #f3f8ff;
}

body.theme-dark .cryptomarket-mode-switch button,
body.dark-mode .cryptomarket-mode-switch button {
    color: #96accf;
}

body.theme-dark .cryptomarket-mode-switch button.is-active,
body.dark-mode .cryptomarket-mode-switch button.is-active {
    color: #fff;
}

body.theme-dark .cryptomarket-pro .crypto-market-table-wrap,
body.dark-mode .cryptomarket-pro .crypto-market-table-wrap {
    scrollbar-color: rgba(59, 130, 246, 0.38) transparent;
}

body.theme-dark .cryptomarket-pro .crypto-market-table-wrap::-webkit-scrollbar-thumb,
body.dark-mode .cryptomarket-pro .crypto-market-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.35);
}

.investor-pack-preview {
    display: grid;
    gap: 10px;
    margin-top: 0;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.28);
}

.investor-pack-preview__row,
.investor-funding-preview__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.investor-pack-preview__row strong,
.investor-funding-preview__row strong {
    color: #f8fafc;
}

.investor-pack-feedback {
    min-height: 20px;
    margin-top: 10px;
    font-size: 12px;
    color: #94a3b8;
}

.investor-pack-feedback.is-ok {
    color: #34d399;
}

.investor-pack-card__form .money-input,
.investor-pack-card__form .btn {
    width: 100%;
}

.investor-pack-feedback.is-error {
    color: #f87171;
}

.investor-pack-card .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.investor-funding-preview {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.32);
}

.investor-funding-preview__note {
    font-size: 12px;
    color: #94a3b8;
}

/* Investment page refinement */
.investor-page {
    gap: 18px;
}

.investor-hero,
.investor-panel,
.investor-kpi,
.investor-pack-card,
.investor-balance-card,
.investor-funding-option {
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.investor-hero {
    padding: 20px 22px;
    border-radius: 16px;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(20,145,229,0.05), rgba(15,28,63,0.015)),
        var(--card);
}

.investor-hero__eyebrow,
.investor-section-head span,
.investor-kpi span,
.investor-balance-card__row span,
.investor-pack-card__top span,
.investor-pack-card__metrics span,
.investor-funding-option span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}

.investor-hero h1 {
    font-size: 28px;
    line-height: 1.12;
    font-weight: 700;
    margin: 0;
}

.investor-hero p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
    max-width: 700px;
}

.investor-kpis {
    gap: 14px;
}

.investor-kpi {
    border-radius: 14px;
    padding: 14px 16px;
    gap: 6px;
}

.investor-kpi strong {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
}

.investor-kpi small {
    font-size: 12px;
    line-height: 1.45;
}

.investor-panel {
    border-radius: 16px;
    padding: 18px;
    gap: 16px;
}

.investor-section-head h2 {
    margin-top: 4px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.investor-balance-card {
    border-radius: 14px;
    padding: 14px 16px;
    gap: 12px;
}

.investor-balance-card__row strong {
    font-size: 16px;
    font-weight: 700;
}

.investor-funding-option {
    border-radius: 14px;
    padding: 14px 16px;
}

.investor-funding-option strong {
    font-size: 14px;
    font-weight: 700;
}

.investor-pack-grid {
    gap: 14px;
}

.investor-pack-card {
    border-radius: 16px;
    padding: 16px;
    gap: 12px;
}

.investor-pack-card__top h3 {
    margin-top: 2px;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
}

.investor-pack-card__top strong {
    font-size: 22px;
    font-weight: 700;
}

.investor-pack-card p {
    font-size: 13px;
    line-height: 1.55;
}

.investor-pack-card__metrics {
    gap: 10px;
}

.investor-pack-card__metrics div {
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.52);
}

.investor-pack-card__metrics strong {
    font-size: 14px;
    font-weight: 700;
}

.investor-pack-card__form {
    align-items: start;
}

.investor-pack-preview,
.investor-funding-preview {
    border-radius: 12px;
    padding: 12px 14px;
}

.investor-pack-preview__row,
.investor-funding-preview__row {
    font-size: 12px;
}

.investor-activity-item strong {
    font-size: 14px;
    font-weight: 700;
}

.investor-activity-item span,
.investor-empty,
.investor-funding-preview__note,
.investor-pack-feedback {
    font-size: 12px;
}

.settings-page .settings-hero {
    align-items: center;
}

.settings-hero__badge {
    display: flex;
    align-items: center;
}

.settings-form {
    display: grid;
    gap: 16px;
}

.settings-note {
    padding: 12px 14px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.06);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.settings-grid-lower {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

/* Settings page refinement */
.settings-page {
    padding: 28px 28px 42px;
}

.settings-shell {
    display: grid;
    gap: 20px;
}

.settings-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 20px;
    padding: 24px 26px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}

.settings-hero-card__eyebrow,
.settings-card__kicker {
    margin-bottom: 8px;
    color: #5f7ca8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-hero-card__copy h1,
.settings-card__head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.settings-hero-card__copy p {
    max-width: 720px;
    margin: 10px 0 0;
    color: #5f6f86;
    font-size: 14px;
    line-height: 1.65;
}

.settings-hero-card__status,
.settings-metrics,
.settings-grid,
.settings-form-grid {
    display: grid;
    gap: 16px;
}

.settings-hero-card__status {
    grid-template-columns: 1fr;
}

.settings-status-tile,
.settings-metric-card,
.settings-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.settings-status-tile,
.settings-metric-card {
    border-radius: 16px;
    padding: 16px 18px;
}

.settings-status-tile span,
.settings-metric-card span,
.settings-field span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-status-tile strong,
.settings-metric-card strong {
    display: block;
    margin-top: 8px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.settings-status-tile small,
.settings-metric-card small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.settings-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
}

.settings-grid--bottom {
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
}

.settings-card {
    border-radius: 20px;
    padding: 22px;
}

.settings-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.settings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-form-grid--preferences {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-field {
    display: grid;
    gap: 8px;
}

.settings-field--wide,
.settings-note--wide,
.settings-form-actions {
    grid-column: 1 / -1;
}

.settings-field .money-input {
    min-height: 46px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}

.settings-note {
    padding: 13px 14px;
    border: 1px solid rgba(59, 130, 246, 0.14);
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.05);
    color: #5f6f86;
    font-size: 13px;
    line-height: 1.65;
}

.settings-form-actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 4px;
}

.settings-card--insights {
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.92), #ffffff);
}

.settings-insight-list {
    display: grid;
    gap: 14px;
}

.settings-insight-item {
    display: grid;
    gap: 6px;
    padding: 14px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.settings-insight-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.settings-insight-item strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.settings-insight-item span {
    color: #5f6f86;
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 1160px) {
    .settings-hero-card,
    .settings-grid,
    .settings-grid--bottom {
        grid-template-columns: 1fr;
    }

    .settings-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-form-grid--preferences {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .settings-page {
        padding: 18px 16px 32px;
    }

    .settings-metrics,
    .settings-form-grid,
    .settings-form-grid--preferences {
        grid-template-columns: 1fr;
    }

    .settings-card,
    .settings-hero-card {
        padding: 18px;
        border-radius: 16px;
    }
}

/* Settings workspace redesign */
.settings-page--workspace {
    padding: 28px 28px 40px;
}

.settings-workspace {
    display: grid;
    gap: 18px;
}

.settings-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.96));
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

.settings-topbar__eyebrow {
    margin-bottom: 6px;
    color: #5f7ca8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-topbar h1 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.settings-topbar__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.settings-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.settings-chip.is-success {
    border-color: rgba(34, 197, 94, 0.18);
    color: #15803d;
    background: rgba(34, 197, 94, 0.08);
}

.settings-chip.is-warning {
    border-color: rgba(245, 158, 11, 0.18);
    color: #b45309;
    background: rgba(245, 158, 11, 0.08);
}

.settings-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.settings-nav-card {
    position: -webkit-sticky;
    position: sticky;
    top: 18px;
    z-index: 30;
    align-self: start;
    height: max-content;
    max-height: calc(100vh - 36px);
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}

.settings-nav-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.settings-nav-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-nav-toggle__icon svg {
    width: 18px;
    height: 18px;
}

.settings-nav-list {
    display: grid;
    gap: 8px;
}

.settings-nav-link {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

.settings-nav-link.is-active {
    border-color: rgba(59, 130, 246, 0.18);
    background: rgba(59, 130, 246, 0.08);
    color: #0f172a;
}

.settings-nav-link:hover,
.settings-nav-link:focus-visible {
    border-color: rgba(59, 130, 246, 0.16);
    background: rgba(59, 130, 246, 0.06);
    color: #0f172a;
}

.settings-sections {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.settings-section-card {
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.settings-section-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.settings-section-card__eyebrow {
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-section-card__head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
}

.settings-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.settings-security-flow {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.settings-security-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.7fr);
    gap: 14px;
    align-items: stretch;
}

.settings-security-hero__copy,
.settings-security-hero__status,
.settings-security-stage,
.settings-security-meta__item {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.98));
}

.settings-security-hero__copy {
    display: grid;
    gap: 8px;
    padding: 18px 20px;
}

.settings-security-hero__copy strong,
.settings-security-stage__header strong,
.settings-security-meta__item strong {
    color: #0f172a;
}

.settings-security-hero__copy span,
.settings-security-stage__header span {
    color: #5f6f86;
    line-height: 1.65;
}

.settings-security-hero__status {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px 20px;
}

.settings-security-hero__status span,
.settings-security-meta__item span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-security-hero__status strong {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}

.settings-security-hero__status.is-active {
    border-color: rgba(34, 197, 94, 0.22);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.96), rgba(255, 255, 255, 0.98));
}

.settings-security-stage {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.settings-security-stage__header {
    display: grid;
    gap: 6px;
}

.settings-security-stage__body {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.settings-security-stage__qr {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
}

.settings-security-stage__qr img {
    width: 220px;
    max-width: 100%;
    border-radius: 16px;
    display: block;
}

.settings-security-stage__details {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.settings-security-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.settings-security-meta__item {
    display: grid;
    gap: 8px;
    padding: 16px;
    min-width: 0;
}

.settings-security-meta__item--wide {
    grid-column: 1 / -1;
}

.settings-security-meta__item strong {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    word-break: break-word;
}

.settings-security-form {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    align-items: end;
}

.settings-security-form .settings-form-actions {
    padding-top: 0;
}

.settings-info-tile {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.96));
}

.settings-info-tile span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-info-tile strong {
    color: #0f172a;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
}

body.theme-dark .settings-topbar,
body.theme-dark .settings-nav-card,
body.theme-dark .settings-section-card {
    border-color: rgba(148, 163, 184, 0.16);
    background: #101827;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24);
}

body.theme-dark .settings-topbar h1,
body.theme-dark .settings-section-card__head h2,
body.theme-dark .settings-info-tile strong {
    color: #f8fafc;
}

body.theme-dark .settings-security-hero__copy,
body.theme-dark .settings-security-hero__status,
body.theme-dark .settings-security-stage,
body.theme-dark .settings-security-meta__item,
body.theme-dark .settings-security-stage__qr {
    border-color: rgba(148, 163, 184, 0.16);
    background: #0f172a;
}

body.theme-dark .settings-security-hero__status.is-active {
    border-color: rgba(34, 197, 94, 0.22);
    background: linear-gradient(180deg, rgba(20, 83, 45, 0.42), rgba(15, 23, 42, 0.96));
}

body.theme-dark .settings-security-hero__copy strong,
body.theme-dark .settings-security-hero__status strong,
body.theme-dark .settings-security-stage__header strong,
body.theme-dark .settings-security-meta__item strong {
    color: #f8fafc;
}

body.theme-dark .settings-security-hero__copy span,
body.theme-dark .settings-security-stage__header span,
body.theme-dark .settings-security-hero__status span,
body.theme-dark .settings-security-meta__item span {
    color: #8fa6c6;
}

body.theme-dark .settings-chip,
body.theme-dark .settings-info-tile {
    border-color: rgba(148, 163, 184, 0.16);
    background: #0f172a;
    color: #cbd5e1;
}

body.theme-dark .settings-topbar__eyebrow,
body.theme-dark .settings-section-card__eyebrow,
body.theme-dark .settings-info-tile span {
    color: #8fa6c6;
}

body.theme-dark .settings-nav-link {
    color: #dbe7f5;
}

body.theme-dark .settings-nav-toggle {
    border-color: rgba(148, 163, 184, 0.16);
    background: #0f172a;
    color: #f8fafc;
}

body.theme-dark .settings-nav-link.is-active {
    border-color: rgba(56, 189, 248, 0.20);
    background: rgba(14, 165, 233, 0.12);
    color: #f8fafc;
}

body.theme-dark .settings-nav-link:hover,
body.theme-dark .settings-nav-link:focus-visible {
    border-color: rgba(56, 189, 248, 0.18);
    background: rgba(14, 165, 233, 0.10);
    color: #f8fafc;
}

@media (max-width: 1120px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-nav-card {
        top: 14px;
        max-height: none;
        gap: 10px;
        padding: 12px;
    }

    .settings-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-security-hero,
    .settings-security-stage__body,
    .settings-security-form {
        grid-template-columns: 1fr;
    }

    .settings-security-stage__qr {
        justify-content: flex-start;
    }

    .settings-nav-toggle {
        display: flex;
    }

    .settings-nav-list {
        display: none;
    }

    .settings-nav-list.is-open {
        display: grid;
    }

    .settings-nav-link {
        min-height: 44px;
    }
}

@media (max-width: 760px) {
    .settings-page--workspace {
        padding: 18px 16px 30px;
    }

    .settings-topbar {
        flex-direction: column;
    }

    .settings-topbar__chips,
    .settings-info-grid {
        grid-template-columns: 1fr;
    }

    .settings-security-meta {
        grid-template-columns: 1fr;
    }

    .settings-topbar__chips {
        justify-content: flex-start;
    }

    .settings-nav-card {
        top: 10px;
        border-radius: 16px;
    }
}

.settings-profile-photo-card {
    gap: 14px;
}

.settings-profile-photo-card__body {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.settings-profile-photo-preview {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    font-size: 26px;
    font-weight: 800;
}

.settings-profile-photo-card__meta {
    display: grid;
    gap: 4px;
}

.settings-profile-photo-card__meta strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
}

.settings-profile-photo-card__meta span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .settings-profile-photo-card__body {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Admin settings */
.admin-settings-page {
    gap: 18px;
}

.admin-settings-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
    gap: 16px;
    align-items: stretch;
}

.admin-settings-hero__copy,
.admin-settings-hero__stats {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}

.admin-settings-hero__copy {
    padding: 24px;
}

.admin-settings-hero__eyebrow,
.admin-settings-section__eyebrow {
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-settings-hero__copy h2,
.admin-settings-section__head h2 {
    margin: 0;
    color: var(--text);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

.admin-settings-hero__copy p {
    margin: 10px 0 0;
    max-width: 680px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.admin-settings-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.admin-settings-stat {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
}

.admin-settings-stat span,
.admin-settings-info-tile span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-settings-stat strong,
.admin-settings-info-tile strong {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
}

.admin-settings-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.admin-settings-nav-card {
    position: -webkit-sticky;
    position: sticky;
    top: 18px;
    z-index: 20;
    align-self: start;
    height: max-content;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}

.admin-settings-nav-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.admin-settings-nav-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-settings-nav-toggle__icon svg {
    width: 18px;
    height: 18px;
}

.admin-settings-nav-list {
    display: grid;
    gap: 8px;
}

.admin-settings-nav-link {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.admin-settings-nav-link.is-active,
.admin-settings-nav-link:hover,
.admin-settings-nav-link:focus-visible {
    border-color: rgba(20, 145, 229, 0.18);
    background: rgba(20, 145, 229, 0.08);
    color: var(--text);
}

.admin-settings-sections {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.admin-settings-section {
    padding: 22px;
}

.admin-settings-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.admin-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-home-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-home-media-grid--logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-settings-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.admin-settings-field--wide,
.admin-settings-form-actions {
    grid-column: 1 / -1;
}

.admin-settings-field span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.admin-input:focus {
    outline: none;
    border-color: rgba(20, 145, 229, 0.42);
    box-shadow: 0 0 0 4px rgba(20, 145, 229, 0.12);
}

.admin-input:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.admin-textarea {
    min-height: 140px;
    padding-top: 14px;
    padding-bottom: 14px;
    resize: vertical;
}

.admin-settings-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.72);
}

.admin-settings-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.admin-settings-checkbox span {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.admin-settings-checkbox--maintenance {
    align-items: flex-start;
}

.admin-settings-checkbox--maintenance span {
    display: grid;
    gap: 4px;
}

.admin-settings-checkbox--maintenance small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.admin-settings-form-actions {
    display: flex;
    justify-content: flex-start;
}

.admin-settings-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.admin-settings-info-tile {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
}

.admin-settings-kyc-list {
    display: grid;
    gap: 12px;
}

.admin-settings-kyc-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.82);
}

.admin-settings-kyc-item__main {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.admin-settings-kyc-item__title {
    display: grid;
    gap: 4px;
}

.admin-settings-kyc-item__title strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.admin-settings-kyc-item__title span {
    color: var(--muted);
    font-size: 13px;
}

.admin-settings-kyc-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-settings-kyc-item__meta a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.admin-settings-kyc-item__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.theme-dark .admin-settings-hero__copy,
body.theme-dark .admin-settings-hero__stats,
body.theme-dark .admin-settings-nav-card {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(16, 24, 39, 0.98), rgba(10, 17, 30, 0.96));
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24);
}

body.theme-dark .admin-settings-stat,
body.theme-dark .admin-settings-info-tile,
body.theme-dark .admin-settings-nav-toggle,
body.theme-dark .admin-input,
body.theme-dark .admin-settings-checkbox,
body.theme-dark .admin-settings-kyc-item {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.96);
    color: #e2e8f0;
}

body.theme-dark .admin-settings-hero__copy h2,
body.theme-dark .admin-settings-section__head h2,
body.theme-dark .admin-settings-stat strong,
body.theme-dark .admin-settings-info-tile strong,
body.theme-dark .admin-settings-nav-link {
    color: #f8fafc;
}

body.theme-dark .admin-settings-hero__copy p,
body.theme-dark .admin-settings-stat span,
body.theme-dark .admin-settings-info-tile span,
body.theme-dark .admin-settings-field span,
body.theme-dark .admin-settings-kyc-item__title span {
    color: #93a4bd;
}

body.theme-dark .admin-settings-checkbox span,
body.theme-dark .admin-settings-kyc-item__title strong,
body.theme-dark .admin-settings-kyc-item__meta a {
    color: #f8fafc;
}

body.theme-dark .admin-settings-nav-link.is-active,
body.theme-dark .admin-settings-nav-link:hover,
body.theme-dark .admin-settings-nav-link:focus-visible {
    border-color: rgba(56, 189, 248, 0.2);
    background: rgba(14, 165, 233, 0.12);
}

body.theme-dark .admin-input:focus {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
}

@media (max-width: 1120px) {
    .admin-settings-hero,
    .admin-settings-layout {
        grid-template-columns: 1fr;
    }

    .admin-settings-nav-card {
        top: 14px;
        padding: 12px;
    }

    .admin-settings-nav-toggle {
        display: flex;
    }

    .admin-settings-nav-list {
        display: none;
    }

    .admin-settings-nav-list.is-open {
        display: grid;
    }

    .admin-settings-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-settings-kyc-item {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-settings-hero__stats,
    .admin-settings-form-grid,
    .admin-home-media-grid,
    .admin-home-media-grid--logos,
    .admin-settings-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-settings-section {
        padding: 18px;
    }

    .admin-settings-hero__copy h2,
    .admin-settings-section__head h2 {
        font-size: 22px;
    }

    .admin-settings-nav-card {
        top: 10px;
        border-radius: 16px;
    }

    .admin-settings-kyc-item__actions {
        flex-wrap: wrap;
    }
}

/* Admin KYC */
.admin-kyc-filters {
    display: grid;
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.admin-kyc-filters label {
    display: grid;
    gap: 8px;
}

.admin-kyc-filters label span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-kyc-filters__actions {
    display: flex;
    gap: 10px;
}

.admin-kyc-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.admin-kyc-queue-list {
    display: grid;
    gap: 10px;
}

.admin-kyc-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.72);
}

.admin-kyc-queue-item.is-active {
    border-color: rgba(20, 145, 229, 0.24);
    background: rgba(20, 145, 229, 0.08);
}

.admin-kyc-queue-item strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.admin-kyc-queue-item span {
    color: var(--muted);
    font-size: 12px;
}

.admin-kyc-preview__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.admin-kyc-preview__head strong {
    display: block;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
}

.admin-kyc-preview__head p {
    margin: 6px 0 0;
    color: var(--muted);
}

.admin-kyc-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.admin-kyc-doc-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.82);
}

.admin-kyc-doc-card > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-kyc-doc-card__frame {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    overflow: hidden;
    min-height: 360px;
    background: #fff;
}

.admin-kyc-doc-card__frame iframe {
    width: 100%;
    height: 360px;
    border: 0;
    display: block;
    background: #fff;
}

.admin-kyc-preview__actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

body.theme-dark .admin-kyc-filters label span,
body.theme-dark .admin-kyc-queue-item span,
body.theme-dark .admin-kyc-preview__head p,
body.theme-dark .admin-kyc-doc-card > span {
    color: #93a4bd;
}

body.theme-dark .admin-kyc-queue-item,
body.theme-dark .admin-kyc-doc-card,
body.theme-dark .admin-kyc-doc-card__frame {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.96);
}

body.theme-dark .admin-kyc-queue-item strong,
body.theme-dark .admin-kyc-preview__head strong {
    color: #f8fafc;
}

body.theme-dark .admin-kyc-queue-item.is-active {
    border-color: rgba(56, 189, 248, 0.2);
    background: rgba(14, 165, 233, 0.12);
}

@media (max-width: 1120px) {
    .admin-kyc-layout,
    .admin-kyc-filters {
        grid-template-columns: 1fr;
    }

    .admin-kyc-doc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-kyc-preview__head,
    .admin-kyc-preview__actions,
    .admin-kyc-filters__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .nova-modal {
        padding: 14px 12px;
        align-items: center;
    }

    .add-money-modal-dialog,
    .deposit-receipt-modal-dialog {
        width: min(100%, 420px);
        max-width: min(100%, 420px);
        max-height: min(calc(100vh - 28px), 760px);
        margin: 0 auto;
        border-radius: 22px;
    }

    .add-money-modal-dialog .nova-modal-header,
    .deposit-receipt-modal-dialog .nova-modal-header {
        padding: 16px 16px 14px;
    }

    .add-money-modal-dialog .nova-modal-header h3,
    .deposit-receipt-modal-dialog .nova-modal-header h3 {
        font-size: 1.05rem;
    }

    .add-money-modal-dialog .nova-modal-body,
    .deposit-receipt-modal-dialog .nova-modal-body {
        padding: 14px 16px 16px;
        gap: 12px;
    }

    .deposit-receipt-timer {
        margin-bottom: 10px;
        padding: 11px 14px;
        border-radius: 14px;
    }

    .deposit-receipt-timer span {
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    .deposit-receipt-timer strong {
        font-size: 1.55rem;
    }

    .deposit-details-card {
        padding: 12px;
        gap: 9px;
        border-radius: 14px;
    }

    .deposit-detail-group {
        gap: 8px;
    }

    .deposit-receipt-card .deposit-detail-group,
    .deposit-receipt-card .deposit-detail-group--compact {
        grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
        align-items: center;
    }

    .deposit-detail-label {
        font-size: 11px;
    }

    .deposit-detail-value {
        font-size: 12px;
        line-height: 1.45;
        text-align: right;
    }

    .deposit-detail-value--asset {
        gap: 6px;
        justify-content: flex-end;
    }

    .deposit-asset-mini-logo {
        width: 16px;
        height: 16px;
    }

    .deposit-detail-value--copyable {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        min-width: 0;
        flex-wrap: nowrap;
        width: 100%;
    }

    .deposit-detail-value--copyable span {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .deposit-detail-value--address span {
        max-width: 100%;
    }

    .deposit-inline-copy {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    .deposit-inline-copy svg {
        width: 13px;
        height: 13px;
    }

    .deposit-qr-block {
        margin-top: 0.5rem;
        padding: 0.75rem;
        border-radius: 14px;
        gap: 12px;
    }

    .deposit-qr-image {
        width: 132px;
        height: 132px;
        border-radius: 10px;
    }

    .deposit-qr-meta {
        gap: 10px;
    }

    .deposit-qr-meta .btn {
        min-height: 38px;
        padding: 0 12px;
        font-size: 12px;
        width: auto;
    }

    .nova-copy-toast {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99999;
        padding: 7px 10px;
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.92);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.24);
        opacity: 0;
        pointer-events: none;
        white-space: nowrap;
        transform: translate(-50%, -100%) scale(0.96);
        transform-origin: center bottom;
        transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .nova-copy-toast.is-visible {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1);
    }

    .nova-copy-toast.is-below {
        transform: translate(-50%, 0) scale(0.96);
        transform-origin: center top;
    }

    .nova-copy-toast.is-below.is-visible {
        transform: translate(-50%, 0) scale(1);
    }

    .deposit-warning-box {
        padding: 11px 12px;
        font-size: 12px;
        line-height: 1.55;
        border-radius: 12px;
    }

    .deposit-picker__trigger {
        min-height: 62px;
        padding: 12px 13px;
    }

    .deposit-picker__trigger-copy strong,
    .deposit-picker__option-copy strong {
        font-size: 13px;
    }

    .deposit-picker__trigger-copy small,
    .deposit-picker__option-copy small {
        font-size: 9px;
    }

    .deposit-picker__trigger-icon,
    .deposit-picker__option-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
}

@media (max-width: 420px) {
    .nova-modal {
        padding: 10px;
    }

    .add-money-modal-dialog,
    .deposit-receipt-modal-dialog {
        width: min(100%, 372px);
        max-width: min(100%, 372px);
        max-height: calc(100vh - 20px);
        border-radius: 20px;
    }

    .add-money-modal-dialog .nova-modal-header,
    .deposit-receipt-modal-dialog .nova-modal-header,
    .add-money-modal-dialog .nova-modal-body,
    .deposit-receipt-modal-dialog .nova-modal-body {
        padding-left: 13px;
        padding-right: 13px;
    }

    .add-money-modal-dialog .nova-modal-body,
    .deposit-receipt-modal-dialog .nova-modal-body {
        padding-top: 14px;
        padding-bottom: 16px;
    }

    .deposit-receipt-timer strong {
        font-size: 1.35rem;
    }

    .deposit-detail-group,
    .deposit-receipt-card .deposit-detail-group,
    .deposit-receipt-card .deposit-detail-group--compact {
        grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
    }

    .deposit-detail-value {
        font-size: 11.5px;
    }

    .deposit-qr-image {
        width: 116px;
        height: 116px;
    }

    .cryptopulse-receipt-hero {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cryptopulse-receipt-qr {
        min-height: 116px;
    }

    .deposit-qr-meta .btn {
        width: 100%;
        max-width: 260px;
    }
}

@media (max-width: 640px) {
    form,
    .add-money-form,
    .admin-review-form,
    .admin-method-form,
    .admin-network-form,
    .loan-modal-form-wrap,
    .loan-form-step,
    .settings-form,
    .crypto-asset-order-form,
    .cryptomarket-order-form {
        padding-bottom: 22px;
    }

    .nova-modal-body,
    .transfer-modal-dialog .nova-modal-body,
    .add-money-modal-dialog .nova-modal-body,
    .deposit-receipt-modal-dialog .nova-modal-body {
        padding-bottom: max(22px, env(safe-area-inset-bottom));
    }

    .deposit-actions-row,
    .settings-form-actions,
    .admin-settings-form-actions,
    .admin-form-actions {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    .deposit-actions-row,
    .settings-form-actions,
    .admin-settings-form-actions,
    .admin-form-actions,
    .loan-modal-actions {
        gap: 10px;
    }

    .deposit-actions-row > .btn,
    .deposit-actions-row > button,
    .deposit-actions-row > a,
    .deposit-actions-row > form > .btn,
    .settings-form-actions > .btn,
    .settings-form-actions > button,
    .settings-form-actions > a,
    .admin-settings-form-actions > .btn,
    .admin-settings-form-actions > button,
    .admin-settings-form-actions > a,
    .admin-form-actions > .btn,
    .admin-form-actions > button,
    .admin-form-actions > a,
    .admin-form-actions > form > .btn,
    .loan-modal-actions > .btn,
    .loan-modal-actions > button,
    .loan-modal-actions > a {
        width: 100%;
        min-height: 46px;
        justify-content: center;
        border-radius: 14px;
    }
}

@media (max-width: 420px) {
    form,
    .add-money-form,
    .admin-review-form,
    .admin-method-form,
    .admin-network-form,
    .loan-modal-form-wrap,
    .loan-form-step,
    .settings-form,
    .crypto-asset-order-form,
    .cryptomarket-order-form {
        padding-bottom: 26px;
    }

    .nova-modal-body,
    .transfer-modal-dialog .nova-modal-body,
    .add-money-modal-dialog .nova-modal-body,
    .deposit-receipt-modal-dialog .nova-modal-body {
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .deposit-actions-row > .btn,
    .deposit-actions-row > button,
    .deposit-actions-row > a,
    .deposit-actions-row > form > .btn,
    .settings-form-actions > .btn,
    .settings-form-actions > button,
    .settings-form-actions > a,
    .admin-settings-form-actions > .btn,
    .admin-settings-form-actions > button,
    .admin-settings-form-actions > a,
    .admin-form-actions > .btn,
    .admin-form-actions > button,
    .admin-form-actions > a,
    .admin-form-actions > form > .btn,
    .loan-modal-actions > .btn,
    .loan-modal-actions > button,
    .loan-modal-actions > a {
        min-height: 44px;
        border-radius: 13px;
    }
}
.cryptopulse-deposit-layout--stacked {
    grid-template-columns: 1fr;
    gap: 14px;
}

.cryptopulse-deposit-meta-grid--single {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cryptopulse-page .add-money-modal-dialog {
    width: min(100%, 468px);
    max-width: min(100%, 468px);
}

.cryptopulse-page .add-money-modal-dialog .nova-modal-header {
    padding: 18px 20px 14px;
}

.cryptopulse-page .add-money-modal-dialog .nova-modal-body {
    padding: 14px 20px 18px;
    gap: 14px;
}

.cryptopulse-page .cryptopulse-modal-heading {
    margin-bottom: 8px;
}

.cryptopulse-deposit-step--compact {
    margin-top: 8px;
}

.cryptopulse-deposit-step--compact .form-block {
    gap: 6px;
    margin-bottom: 0;
}

.cryptopulse-deposit-step--compact .form-block-label {
    margin-bottom: 0;
}

.cryptopulse-deposit-step--compact .cryptopulse-deposit-meta-grid--single {
    padding-top: 8px;
}

.cryptopulse-page #cryptoDepositForm .deposit-actions-row {
    margin-top: 12px;
    padding-top: 6px;
}

.cryptopulse-picker-shell {
    position: relative;
}

.cryptopulse-picker-trigger {
    width: 100%;
    min-height: 70px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: var(--surface, #ffffff);
    color: var(--text, #12233d);
    text-align: left;
    cursor: pointer;
}

.cryptopulse-picker-trigger__media,
.cryptopulse-picker-option__media {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-weight: 800;
    font-size: 18px;
    overflow: hidden;
}

.cryptopulse-picker-trigger__media img,
.cryptopulse-picker-option__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cryptopulse-picker-trigger__media--network,
.cryptopulse-picker-option__media--network {
    background: rgba(37, 99, 235, 0.12);
}

.cryptopulse-network-badge {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cryptopulse-network-badge--svg {
    background: transparent;
    box-shadow: none;
}

.cryptopulse-network-badge svg,
.cryptopulse-network-svg svg,
.cryptopulse-network-badge--svg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cryptopulse-network-badge span {
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
}

.cryptopulse-picker-trigger__copy,
.cryptopulse-picker-option__copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cryptopulse-picker-trigger__copy strong,
.cryptopulse-picker-option__copy strong {
    font-size: 14px;
    font-weight: 800;
    color: inherit;
    line-height: 1.2;
}

.cryptopulse-picker-trigger__copy small,
.cryptopulse-picker-option__copy small {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #6b7a90);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cryptopulse-picker-trigger__chevron {
    font-size: 20px;
    color: var(--text-muted, #6b7a90);
    line-height: 1;
}

.cryptopulse-picker-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 12;
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: var(--surface, #ffffff);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
    max-height: 220px;
    overflow-y: auto;
}

.cryptopulse-picker-menu[hidden] {
    display: none !important;
}

.cryptopulse-picker-option {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--text, #12233d);
    text-align: left;
    cursor: pointer;
    min-height: 58px;
}

.cryptopulse-picker-option:hover,
.cryptopulse-picker-option.is-active {
    border-color: rgba(37, 99, 235, 0.18);
    background: rgba(37, 99, 235, 0.06);
}

.cryptopulse-picker-empty {
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--text-muted, #6b7a90);
    font-size: 12px;
    font-weight: 700;
}

.cryptopulse-picker-shell.is-open .cryptopulse-picker-trigger {
    border-color: rgba(37, 99, 235, 0.32);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.cryptopulse-loading-modal-dialog {
    max-width: 380px;
    border-radius: 24px;
}

.deposit-receipt-modal-dialog .nova-modal-body {
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
}

.deposit-receipt-modal-dialog .deposit-receipt-card {
    width: 100%;
    max-width: 420px;
    display: grid;
    gap: 14px;
    justify-items: center;
}

.deposit-receipt-modal-dialog .deposit-details-card {
    width: 100%;
}

.deposit-receipt-modal-dialog .cryptopulse-receipt-hero {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
}

.deposit-receipt-modal-dialog .cryptopulse-receipt-summary {
    justify-items: center;
}

.deposit-receipt-modal-dialog .deposit-detail-group,
.deposit-receipt-modal-dialog .deposit-receipt-card .deposit-detail-group,
.deposit-receipt-modal-dialog .deposit-receipt-card .deposit-detail-group--compact {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 6px;
}

.deposit-receipt-modal-dialog .deposit-detail-value--copyable {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.deposit-receipt-modal-dialog .deposit-detail-value--address span {
    display: block;
    max-width: 100%;
    word-break: break-word;
}

.deposit-receipt-modal-dialog .deposit-inline-copy {
    justify-self: center;
}

.cryptopulse-loading-state {
    min-height: 220px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 14px;
    padding: 18px 8px;
}

.cryptopulse-loading-state strong {
    font-size: 1.15rem;
    color: var(--text, #12233d);
}

.cryptopulse-loading-state p {
    margin: 0;
    max-width: 280px;
    color: var(--text-muted, #5f738f);
}

.cryptopulse-loading-spinner {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 4px solid rgba(59, 130, 246, 0.16);
    border-top-color: #2563eb;
    animation: cryptopulseDepositSpin 0.8s linear infinite;
}

@keyframes cryptopulseDepositSpin {
    to {
        transform: rotate(360deg);
    }
}

body.theme-dark .cryptopulse-loading-state strong,
body.dark-mode .cryptopulse-loading-state strong {
    color: #f8fafc;
}

body.theme-dark .cryptopulse-loading-state p,
body.dark-mode .cryptopulse-loading-state p {
    color: #96accf;
}

body.theme-dark .cryptopulse-loading-spinner,
body.dark-mode .cryptopulse-loading-spinner {
    border-color: rgba(96, 165, 250, 0.16);
    border-top-color: #60a5fa;
}

body.theme-dark .cryptopulse-picker-trigger,
body.theme-dark .cryptopulse-picker-menu,
body.dark-mode .cryptopulse-picker-trigger,
body.dark-mode .cryptopulse-picker-menu {
    background: #111827;
    border-color: rgba(96, 165, 250, 0.16);
    color: #f8fafc;
}

body.theme-dark .cryptopulse-picker-trigger__copy small,
body.theme-dark .cryptopulse-picker-option__copy small,
body.theme-dark .cryptopulse-picker-trigger__chevron,
body.theme-dark .cryptopulse-picker-empty,
body.dark-mode .cryptopulse-picker-trigger__copy small,
body.dark-mode .cryptopulse-picker-option__copy small,
body.dark-mode .cryptopulse-picker-trigger__chevron,
body.dark-mode .cryptopulse-picker-empty {
    color: #96accf;
}

body.theme-dark .cryptopulse-picker-option,
body.dark-mode .cryptopulse-picker-option {
    color: #f8fafc;
}

body.theme-dark .cryptopulse-picker-option:hover,
body.theme-dark .cryptopulse-picker-option.is-active,
body.dark-mode .cryptopulse-picker-option:hover,
body.dark-mode .cryptopulse-picker-option.is-active {
    border-color: rgba(96, 165, 250, 0.22);
    background: rgba(59, 130, 246, 0.12);
}

@media (max-width: 640px) {
    .cryptopulse-page .add-money-modal-dialog {
        width: min(100%, 392px);
        max-width: min(100%, 392px);
    }

    .cryptopulse-page .add-money-modal-dialog .nova-modal-header {
        padding: 16px 16px 12px;
    }

    .cryptopulse-page .add-money-modal-dialog .nova-modal-body {
        padding: 12px 16px 16px;
    }

    .cryptopulse-deposit-meta-grid--single {
        grid-template-columns: 1fr;
    }

    .cryptopulse-picker-trigger {
        min-height: 66px;
        padding: 11px 12px;
        border-radius: 16px;
    }

    .cryptopulse-loading-state {
        min-height: 200px;
    }
}

/* Final compact styling for crypto deposit receipt modal */
.deposit-receipt-modal-dialog {
    width: min(100%, 408px);
    max-width: min(100%, 408px);
    max-height: min(calc(100vh - 24px), 720px);
    border-radius: 22px;
}

.deposit-receipt-modal-dialog .nova-modal-header {
    padding: 14px 16px 12px;
}

.deposit-receipt-modal-dialog .nova-modal-header h3 {
    font-size: 1.02rem;
}

.deposit-receipt-modal-dialog .nova-modal-body {
    padding: 12px 16px 16px;
    display: grid;
    gap: 12px;
    justify-items: stretch;
    text-align: initial;
}

.deposit-receipt-modal-dialog .deposit-receipt-card {
    width: 100%;
    max-width: none;
    gap: 12px;
    justify-items: stretch;
}

.deposit-receipt-modal-dialog .deposit-receipt-timer {
    padding: 10px 12px;
    border-radius: 14px;
}

.deposit-receipt-modal-dialog .deposit-receipt-timer span {
    font-size: 10px;
    letter-spacing: 0.08em;
}

.deposit-receipt-modal-dialog .deposit-receipt-timer strong {
    font-size: 1.2rem;
}

.deposit-receipt-modal-dialog .cryptopulse-receipt-hero {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    justify-items: center;
    text-align: center;
}

.deposit-receipt-modal-dialog .cryptopulse-receipt-qr {
    min-height: 112px;
    width: 112px;
    padding: 8px;
    border-radius: 16px;
}

.deposit-receipt-modal-dialog .deposit-qr-image {
    width: 96px;
    height: 96px;
    border-radius: 10px;
}

.deposit-receipt-modal-dialog .cryptopulse-receipt-summary {
    justify-items: center;
    gap: 4px;
}

.deposit-receipt-modal-dialog .cryptopulse-receipt-summary .cryptopulse-eyebrow {
    font-size: 10px;
    letter-spacing: 0.12em;
}

.deposit-receipt-modal-dialog .cryptopulse-receipt-summary strong {
    font-size: 1.05rem;
    line-height: 1.2;
}

.deposit-receipt-modal-dialog .cryptopulse-receipt-summary p {
    font-size: 0.86rem;
    margin: 0;
}

.deposit-receipt-modal-dialog .deposit-details-card {
    padding: 12px;
    border-radius: 18px;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.deposit-receipt-modal-dialog .deposit-detail-group,
.deposit-receipt-modal-dialog .deposit-receipt-card .deposit-detail-group,
.deposit-receipt-modal-dialog .deposit-receipt-card .deposit-detail-group--compact,
.deposit-receipt-modal-dialog .deposit-detail-group--amount {
    grid-template-columns: 1fr;
    gap: 4px;
    justify-items: center;
    text-align: center;
    padding: 6px 0;
}

.deposit-receipt-modal-dialog .deposit-detail-group + .deposit-detail-group {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.deposit-receipt-modal-dialog .deposit-detail-label {
    font-size: 11px;
    line-height: 1.35;
}

.deposit-receipt-modal-dialog .deposit-detail-value {
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    max-width: 100%;
}

.deposit-receipt-modal-dialog .deposit-detail-value--copyable {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.deposit-receipt-modal-dialog .deposit-detail-value--address span {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.deposit-receipt-modal-dialog .deposit-detail-group--address {
    justify-items: center;
}

.deposit-receipt-modal-dialog .deposit-detail-group--address .deposit-detail-value--copyable {
    width: min(100%, 300px);
    margin: 0 auto;
    justify-self: center;
}

.deposit-receipt-modal-dialog .deposit-detail-group--address .deposit-detail-value--address span {
    width: 100%;
    text-align: center;
}

.deposit-receipt-modal-dialog .deposit-inline-copy {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
}

.deposit-receipt-proof-cta {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.deposit-receipt-proof-cta p {
    margin: 0;
    max-width: 320px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.deposit-receipt-proof-cta .btn {
    width: 100%;
}

@media (max-width: 640px) {
    .deposit-receipt-modal-dialog {
        width: min(100%, 360px);
        max-width: min(100%, 360px);
    }

    .deposit-receipt-modal-dialog .nova-modal-body {
        padding: 12px 12px 14px;
    }

    .deposit-receipt-modal-dialog .cryptopulse-receipt-qr {
        width: 104px;
        min-height: 104px;
    }

    .deposit-receipt-modal-dialog .deposit-qr-image {
        width: 88px;
        height: 88px;
    }
}
.transfer-flow-screen--upgrade {
    justify-items: stretch;
    text-align: initial;
    padding: 0;
}

.transfer-modal-dialog {
    --transfer-sheet-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
    --transfer-sheet-card-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.94));
    --transfer-sheet-card-border: rgba(226, 232, 240, 0.96);
    --transfer-sheet-title: #0f172a;
    --transfer-sheet-text: #475569;
    --transfer-sheet-muted: #64748b;
    --transfer-sheet-strong: #0f172a;
    --transfer-sheet-accent: #1d74f5;
    --transfer-sheet-check-bg: #ffffff;
    --transfer-sheet-check-border: rgba(226, 232, 240, 0.95);
    --transfer-sheet-warning-bg: linear-gradient(180deg, rgba(255, 249, 235, 0.98), rgba(255, 244, 214, 0.95));
    --transfer-sheet-warning-border: rgba(251, 191, 36, 0.28);
    --transfer-sheet-warning-title: #8a4b00;
    --transfer-sheet-warning-text: #7c5b1c;
}

.transfer-modal--flow {
    backdrop-filter: blur(16px);
    align-items: center;
    padding-top: 14px;
    padding-bottom: 14px;
}

.transfer-modal--flow .nova-modal-dialog {
    position: relative;
    width: min(100%, 500px);
    max-width: 500px;
    max-height: none;
    overflow: hidden;
    border-radius: 30px;
    border-color: rgba(226, 232, 240, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.985));
    box-shadow: 0 36px 90px rgba(15, 23, 42, 0.18);
}

.transfer-modal--flow .nova-modal-dialog::before {
    display: none;
}

.transfer-modal--flow .nova-modal-header {
    display: none;
}

.transfer-modal--flow .nova-modal-body {
    padding: 20px 20px 16px;
    overflow: hidden;
    max-height: none;
    background: transparent;
}

.transfer-modal--flow #transferForm {
    display: block !important;
    margin: 0;
    padding: 0;
}

.transfer-modal--flow #transferPostSubmitFlow {
    display: block;
    margin: 0;
    padding: 0;
}

.transfer-modal--flow .transfer-flow-screen {
    width: 100%;
    display: block;
    padding: 0;
    text-align: center;
}

.transfer-modal--flow .transfer-flow-screen--upgrade {
    padding: 0;
}

.transfer-modal--flow .transfer-flow-screen:not(.transfer-flow-screen--upgrade) {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 14px;
    min-height: 360px;
}

.transfer-modal--flow .transfer-flow-screen:not(.transfer-flow-screen--upgrade) h4 {
    margin: 0;
    max-width: 420px;
    color: #0f2757;
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.transfer-modal--flow .transfer-flow-screen:not(.transfer-flow-screen--upgrade) p,
.transfer-modal--flow .transfer-limit-result-copy {
    margin: 0;
    max-width: 420px;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.transfer-modal--flow .transfer-flow-link {
    color: #94a3b8;
    font-size: 0.92rem;
}

.transfer-modal--flow .transfer-flow-icon {
    width: 74px;
    height: 74px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: radial-gradient(circle at top, rgba(59, 130, 246, 0.20), rgba(148, 163, 184, 0.22));
    color: #93c5fd;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

.transfer-modal--flow .transfer-upgrade-methods {
    width: 100%;
    gap: 12px;
}

.transfer-modal--flow .transfer-upgrade-method {
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 1);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.transfer-modal--flow .transfer-upgrade-method strong {
    color: #0f2757;
    font-size: 1rem;
}

.transfer-modal--flow .transfer-upgrade-method span {
    color: #64748b;
    font-size: 0.84rem;
}

.transfer-modal--flow .transfer-upgrade-method.is-active {
    border-color: rgba(37, 99, 235, 0.48);
    background: linear-gradient(180deg, rgba(239, 246, 255, 1), rgba(219, 234, 254, 0.96));
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.14) inset, 0 14px 30px rgba(37, 99, 235, 0.10);
}

.transfer-limit-sheet {
    display: grid;
    gap: 11px;
    width: 100%;
    justify-items: stretch;
    text-align: center;
    padding: 0;
}

.transfer-limit-sheet__head {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    padding-right: 44px;
}

.transfer-limit-sheet__head-copy {
    display: grid;
    gap: 5px;
}

.transfer-limit-sheet h4 {
    margin: 0;
    font-size: 1.86rem;
    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 800;
    color: #0f2757;
}

.transfer-limit-sheet__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 14px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}

.transfer-limit-sheet__close:hover,
.transfer-limit-sheet__close:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(191, 219, 254, 1);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
    color: #1e40af;
}

.transfer-limit-sheet__close-icon,
.transfer-limit-sheet__close-icon svg {
    width: 14px;
    height: 14px;
}

.transfer-limit-sheet__intro {
    margin: 0 auto;
    max-width: 360px;
    font-size: 0.68rem;
    line-height: 1.24;
    font-weight: 600;
    color: #475569;
}

.transfer-limit-compare-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 1);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 30px rgba(15, 23, 42, 0.05);
}

.transfer-limit-compare-metric {
    display: grid;
    gap: 4px;
    justify-items: center;
}

.transfer-limit-compare-metric span {
    font-size: 0.72rem;
    line-height: 1.35;
    color: #64748b;
    font-weight: 700;
}

.transfer-limit-compare-metric strong {
    font-size: 0.78rem;
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: #0f2757;
}

.transfer-limit-compare-metric--highlight strong {
    color: #2280f2;
}

.transfer-limit-compare-arrow {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid rgba(219, 234, 254, 0.98);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
    color: #2280f2;
}

.transfer-limit-compare-arrow__icon,
.transfer-limit-compare-arrow__icon svg {
    width: 14px;
    height: 14px;
}

.transfer-limit-reasons {
    display: grid;
    gap: 10px;
}

.transfer-limit-reasons h5 {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.3;
    color: #0f2757;
    font-weight: 800;
}

.transfer-limit-reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.transfer-limit-reason-item {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

.transfer-limit-reason-item__icon {
    width: 27px;
    height: 27px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: transparent;
    color: #2280f2;
}

.transfer-limit-reason-item__icon-svg,
.transfer-limit-reason-item__icon-svg svg {
    width: 16px;
    height: 16px;
}

.transfer-limit-reason-item strong {
    font-size: 0.66rem;
    line-height: 1.3;
    color: #334155;
    font-weight: 600;
}

.transfer-limit-checklist {
    display: grid;
    border-radius: 15px;
    border: 1px solid rgba(226, 232, 240, 1);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
}

.transfer-limit-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    text-align: left;
    color: #334155;
    font-size: 0.7rem;
    line-height: 1.26;
    font-weight: 600;
}

.transfer-limit-check + .transfer-limit-check {
    border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.transfer-limit-check__icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.transfer-limit-check__icon-svg,
.transfer-limit-check__icon-svg svg {
    width: 9px;
    height: 9px;
}

.transfer-limit-warning-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    padding: 11px 12px 10px;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 249, 235, 1), rgba(255, 244, 214, 0.92));
    border: 1px solid rgba(252, 211, 77, 0.4);
    text-align: left;
}

.transfer-limit-warning-box__icon {
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    color: #f59e0b;
}

.transfer-limit-warning-box__icon-svg,
.transfer-limit-warning-box__icon-svg svg {
    width: 14px;
    height: 14px;
}

.transfer-limit-warning-box__body {
    display: grid;
    gap: 5px;
}

.transfer-limit-warning-box strong {
    color: #8a4b00;
    font-size: 0.76rem;
    line-height: 1.22;
    font-weight: 800;
}

.transfer-limit-warning-box p {
    margin: 0;
    max-width: none;
    color: #7c5b1c;
    font-size: 0.66rem;
    line-height: 1.28;
}

.transfer-limit-warning-box p + p {
    margin-top: 2px;
    color: #2563eb;
    font-weight: 700;
    font-size: 0.68rem;
    line-height: 1.32;
}

.transfer-flow-primary-btn {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    margin-top: 0;
    border-radius: 14px;
    font-size: 0.84rem;
    font-weight: 700;
    background: linear-gradient(180deg, #2483f6, #186ae8);
    border: 1px solid rgba(37, 99, 235, 0.3);
    box-shadow: 0 16px 28px rgba(37, 99, 235, 0.22);
}

.transfer-limit-secure-note {
    margin: 0;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #64748b;
    font-size: 0.68rem;
    line-height: 1.28;
    font-weight: 500;
}

.transfer-limit-secure-note__icon {
    color: #94a3b8;
}

.transfer-limit-secure-note__icon-svg,
.transfer-limit-secure-note__icon-svg svg {
    width: 13px;
    height: 13px;
}

.deposit-receipt-modal-dialog--bank-transfer {
    width: min(100%, 408px);
    max-width: min(100%, 408px);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(9, 16, 32, 0.98)),
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 48%);
    border: 1px solid rgba(59, 130, 246, 0.14);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.48);
}

.deposit-receipt-modal-dialog--bank-transfer .nova-modal-header {
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.deposit-receipt-modal-dialog--bank-transfer .nova-modal-header h3 {
    font-size: 1.7rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

.deposit-receipt-modal-dialog--bank-transfer .nova-modal-close {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(30, 41, 59, 0.9);
    color: #cbd5e1;
}

.deposit-receipt-modal-dialog--bank-transfer .nova-modal-body {
    padding: 16px 18px 18px;
}

.deposit-receipt-card--bank-transfer {
    gap: 0;
}

.deposit-receipt-card--bank-transfer .deposit-details-card--bank-transfer {
    padding: 18px 18px 12px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.55);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(22, 30, 46, 0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    gap: 0;
}

.deposit-receipt-card--bank-transfer .deposit-detail-group {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    padding: 16px 0 14px;
    text-align: center;
}

.deposit-receipt-card--bank-transfer .deposit-detail-group + .deposit-detail-group {
    border-top: 1px solid rgba(71, 85, 105, 0.52);
}

.deposit-receipt-card--bank-transfer .deposit-detail-label {
    font-size: 0.84rem;
    font-weight: 700;
    color: #94a3b8;
}

.deposit-receipt-card--bank-transfer .deposit-detail-value {
    font-size: 1.08rem;
    line-height: 1.45;
    font-weight: 700;
    color: #f8fafc;
    text-align: center;
}

.deposit-receipt-card--bank-transfer .deposit-detail-value--copyable {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.deposit-receipt-card--bank-transfer .deposit-detail-value--copyable span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.deposit-receipt-card--bank-transfer .deposit-inline-copy {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(51, 65, 85, 0.78);
    color: #cbd5e1;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.deposit-receipt-card--bank-transfer .deposit-inline-copy:hover {
    transform: translateY(-1px);
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(96, 165, 250, 0.32);
}

.deposit-receipt-card--bank-transfer .deposit-inline-copy svg {
    width: 18px;
    height: 18px;
}

.deposit-receipt-card .deposit-detail-group--receipt-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    text-align: left;
}

.deposit-receipt-card .deposit-detail-group--receipt-row .deposit-detail-label {
    margin: 0;
    text-align: left;
}

.deposit-detail-main {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.deposit-receipt-card .deposit-detail-group--receipt-row .deposit-detail-value {
    text-align: left;
}

.deposit-receipt-card .deposit-detail-group--receipt-row .deposit-detail-value--asset {
    justify-content: flex-start;
}

.deposit-receipt-card .deposit-detail-group--receipt-row .deposit-detail-value span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.deposit-detail-action {
    flex: 0 0 auto;
}

.deposit-receipt-card .deposit-detail-group--receipt-row-static {
    grid-template-columns: 132px minmax(0, 1fr);
}

.deposit-receipt-card .deposit-detail-group--address .deposit-detail-value,
.deposit-receipt-card .deposit-detail-group--amount .deposit-detail-value {
    font-size: 1rem;
    line-height: 1.55;
}

.deposit-receipt-card--bank-transfer .deposit-detail-group--receipt-row {
    grid-template-columns: 148px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 18px 0;
}

.deposit-receipt-card--bank-transfer .deposit-detail-group--receipt-row-static {
    grid-template-columns: 148px minmax(0, 1fr);
}

.deposit-receipt-card--bank-transfer .deposit-detail-label {
    text-align: left;
}

.deposit-receipt-card--bank-transfer .deposit-detail-main {
    justify-content: flex-end;
}

.deposit-receipt-card--bank-transfer .deposit-detail-value {
    text-align: right;
}

.deposit-receipt-card--bank-transfer .deposit-detail-group--address .deposit-detail-value,
.deposit-receipt-card--bank-transfer .deposit-detail-group--amount .deposit-detail-value {
    max-width: 100%;
}

body.theme-dark .transfer-limit-sheet h4,
body.dark-mode .transfer-limit-sheet h4,
body.theme-dark .transfer-limit-reasons h5,
body.dark-mode .transfer-limit-reasons h5 {
    color: #f8fafc;
}

body.theme-dark .transfer-limit-sheet__intro,
body.dark-mode .transfer-limit-sheet__intro,
body.theme-dark .transfer-limit-reason-item strong,
body.dark-mode .transfer-limit-reason-item strong,
body.theme-dark .transfer-limit-check,
body.dark-mode .transfer-limit-check {
    color: #cbd5e1;
}

body.theme-dark .transfer-modal-dialog,
body.dark-mode .transfer-modal-dialog {
    --transfer-sheet-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.98));
    --transfer-sheet-card-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.72));
    --transfer-sheet-card-border: rgba(71, 85, 105, 0.72);
    --transfer-sheet-title: #f8fafc;
    --transfer-sheet-text: #cbd5e1;
    --transfer-sheet-muted: #94a3b8;
    --transfer-sheet-strong: #f8fafc;
    --transfer-sheet-accent: #60a5fa;
    --transfer-sheet-check-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.70));
    --transfer-sheet-check-border: rgba(71, 85, 105, 0.72);
    --transfer-sheet-warning-bg: linear-gradient(180deg, rgba(69, 39, 8, 0.42), rgba(94, 53, 12, 0.34));
    --transfer-sheet-warning-border: rgba(245, 158, 11, 0.26);
    --transfer-sheet-warning-title: #fbbf24;
    --transfer-sheet-warning-text: #fde68a;
}

body.theme-dark .transfer-limit-compare-card,
body.dark-mode .transfer-limit-compare-card,
body.theme-dark .transfer-limit-checklist,
body.dark-mode .transfer-limit-checklist {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.7));
    border-color: rgba(71, 85, 105, 0.72);
}

body.theme-dark .transfer-limit-compare-metric span,
body.dark-mode .transfer-limit-compare-metric span {
    color: #94a3b8;
}

body.theme-dark .transfer-limit-compare-metric strong,
body.dark-mode .transfer-limit-compare-metric strong {
    color: #f8fafc;
}

body.theme-dark .transfer-limit-compare-metric--highlight strong,
body.dark-mode .transfer-limit-compare-metric--highlight strong {
    color: #60a5fa;
}

body.theme-dark .transfer-limit-check + .transfer-limit-check,
body.dark-mode .transfer-limit-check + .transfer-limit-check {
    border-top-color: rgba(71, 85, 105, 0.72);
}

body.theme-dark .transfer-limit-compare-arrow,
body.dark-mode .transfer-limit-compare-arrow {
    background: rgba(255, 255, 255, 0.96);
}

body.theme-dark .transfer-modal--flow .nova-modal-dialog,
body.dark-mode .transfer-modal--flow .nova-modal-dialog {
    border-color: rgba(226, 232, 240, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.985));
}

body.theme-dark .transfer-limit-sheet__close,
body.dark-mode .transfer-limit-sheet__close {
    background: #fff;
    border-color: rgba(226, 232, 240, 1);
    color: #64748b;
}

body.theme-dark .transfer-modal--flow .transfer-limit-sheet h4,
body.dark-mode .transfer-modal--flow .transfer-limit-sheet h4,
body.theme-dark .transfer-modal--flow .transfer-limit-reasons h5,
body.dark-mode .transfer-modal--flow .transfer-limit-reasons h5,
body.theme-dark .transfer-modal--flow .transfer-limit-compare-metric strong,
body.dark-mode .transfer-modal--flow .transfer-limit-compare-metric strong {
    color: #0f2757;
}

body.theme-dark .transfer-modal--flow .transfer-limit-compare-metric--highlight strong,
body.dark-mode .transfer-modal--flow .transfer-limit-compare-metric--highlight strong {
    color: #2280f2;
}

body.theme-dark .transfer-modal--flow .transfer-limit-sheet__intro,
body.dark-mode .transfer-modal--flow .transfer-limit-sheet__intro,
body.theme-dark .transfer-modal--flow .transfer-limit-reason-item strong,
body.dark-mode .transfer-modal--flow .transfer-limit-reason-item strong,
body.theme-dark .transfer-modal--flow .transfer-limit-check,
body.dark-mode .transfer-modal--flow .transfer-limit-check,
body.theme-dark .transfer-modal--flow .transfer-limit-compare-metric span,
body.dark-mode .transfer-modal--flow .transfer-limit-compare-metric span,
body.theme-dark .transfer-modal--flow .transfer-limit-secure-note,
body.dark-mode .transfer-modal--flow .transfer-limit-secure-note {
    color: #475569;
}

body.theme-dark .transfer-modal--flow .transfer-limit-compare-card,
body.dark-mode .transfer-modal--flow .transfer-limit-compare-card,
body.theme-dark .transfer-modal--flow .transfer-limit-checklist,
body.dark-mode .transfer-modal--flow .transfer-limit-checklist {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-color: rgba(226, 232, 240, 1);
}

body.theme-dark .transfer-modal--flow .transfer-limit-check + .transfer-limit-check,
body.dark-mode .transfer-modal--flow .transfer-limit-check + .transfer-limit-check {
    border-top-color: rgba(226, 232, 240, 0.95);
}

body.theme-dark .transfer-modal--flow.theme-follow .nova-modal-dialog,
body.dark-mode .transfer-modal--flow.theme-follow .nova-modal-dialog {
    border-color: rgba(71, 85, 105, 0.72);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.98));
}

body.theme-dark .transfer-modal--flow.theme-follow .transfer-flow-screen:not(.transfer-flow-screen--upgrade) h4,
body.dark-mode .transfer-modal--flow.theme-follow .transfer-flow-screen:not(.transfer-flow-screen--upgrade) h4,
body.theme-dark .transfer-modal--flow.theme-follow .transfer-upgrade-method strong,
body.dark-mode .transfer-modal--flow.theme-follow .transfer-upgrade-method strong {
    color: #e6efff;
}

body.theme-dark .transfer-modal--flow.theme-follow .transfer-flow-screen:not(.transfer-flow-screen--upgrade) p,
body.dark-mode .transfer-modal--flow.theme-follow .transfer-flow-screen:not(.transfer-flow-screen--upgrade) p,
body.theme-dark .transfer-modal--flow.theme-follow .transfer-limit-result-copy,
body.dark-mode .transfer-modal--flow.theme-follow .transfer-limit-result-copy,
body.theme-dark .transfer-modal--flow.theme-follow .transfer-upgrade-method span,
body.dark-mode .transfer-modal--flow.theme-follow .transfer-upgrade-method span,
body.theme-dark .transfer-modal--flow.theme-follow .transfer-flow-link,
body.dark-mode .transfer-modal--flow.theme-follow .transfer-flow-link {
    color: #9ab0d1;
}

body.theme-dark .transfer-modal--flow.theme-follow .transfer-upgrade-method,
body.dark-mode .transfer-modal--flow.theme-follow .transfer-upgrade-method {
    border-color: rgba(96, 165, 250, 0.16);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 27, 51, 0.84));
    box-shadow: none;
}

body.theme-dark .transfer-modal--flow.theme-follow .transfer-upgrade-method.is-active,
body.dark-mode .transfer-modal--flow.theme-follow .transfer-upgrade-method.is-active {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.22));
    border-color: rgba(59, 130, 246, 0.52);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18) inset;
}

body.theme-dark .transfer-modal--flow.theme-follow .transfer-flow-icon,
body.dark-mode .transfer-modal--flow.theme-follow .transfer-flow-icon {
    border-color: rgba(96, 165, 250, 0.18);
    background: radial-gradient(circle at top, rgba(59, 130, 246, 0.22), rgba(15, 23, 42, 0.55));
    color: #93c5fd;
}

@media (max-width: 640px) {
    .transfer-limit-sheet {
        gap: 14px;
    }

    .transfer-modal--flow {
        align-items: center;
        padding: 8px;
    }

    .transfer-modal--flow .nova-modal-dialog {
        width: min(100%, 420px);
        max-width: min(100%, 420px);
        max-height: calc(100vh - 16px);
        overflow: hidden;
    }

    .transfer-modal--flow .nova-modal-body {
        padding: 16px 14px 14px;
        overflow-y: auto;
        max-height: calc(100vh - 32px);
        scrollbar-width: thin;
    }

    .transfer-modal--flow .transfer-flow-screen:not(.transfer-flow-screen--upgrade) {
        min-height: 0;
        gap: 12px;
    }

    .transfer-limit-sheet__head {
        padding-right: 42px;
    }

    .transfer-limit-sheet h4 {
        font-size: 1.5rem;
    }

    .transfer-limit-sheet__intro {
        font-size: 0.7rem;
        white-space: normal;
    }

    .transfer-limit-compare-card {
        grid-template-columns: 1fr;
        padding: 12px 10px;
    }

    .transfer-limit-compare-arrow {
        width: 36px;
        height: 36px;
        margin: -2px auto;
        transform: rotate(90deg);
    }

    .transfer-limit-reasons-grid {
        grid-template-columns: 1fr;
    }

    .deposit-receipt-modal-dialog--bank-transfer {
        width: min(100%, 360px);
        max-width: min(100%, 360px);
    }

    .deposit-receipt-modal-dialog--bank-transfer .nova-modal-header {
        padding: 16px 16px 12px;
    }

    .deposit-receipt-modal-dialog--bank-transfer .nova-modal-header h3 {
        font-size: 1.45rem;
    }

    .deposit-receipt-modal-dialog--bank-transfer .nova-modal-body {
        padding: 14px 14px 16px;
    }

    .deposit-receipt-card--bank-transfer .deposit-details-card--bank-transfer {
        padding: 16px 14px 10px;
    }

    .deposit-receipt-card .deposit-detail-group--receipt-row,
    .deposit-receipt-card .deposit-detail-group--receipt-row-static,
    .deposit-receipt-card--bank-transfer .deposit-detail-group--receipt-row,
    .deposit-receipt-card--bank-transfer .deposit-detail-group--receipt-row-static {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .deposit-receipt-card .deposit-detail-group--receipt-row .deposit-detail-label,
    .deposit-receipt-card .deposit-detail-group--receipt-row .deposit-detail-value,
    .deposit-receipt-card--bank-transfer .deposit-detail-label,
    .deposit-receipt-card--bank-transfer .deposit-detail-value {
        text-align: center;
    }

    .deposit-detail-main,
    .deposit-receipt-card--bank-transfer .deposit-detail-main,
    .deposit-receipt-card .deposit-detail-group--receipt-row .deposit-detail-value--asset {
        justify-content: center;
    }

    .deposit-detail-action {
        margin-inline: auto;
    }
}
.action-inline-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.action-inline-form .topbar-dropdown-item,
.action-inline-form .sidebar-link,
.action-inline-form .guest-sidebar__theme,
.action-inline-form .btn {
    font: inherit;
}

.action-inline-form .topbar-dropdown-item,
.action-inline-form .sidebar-link,
.action-inline-form .guest-sidebar__theme {
    border: 0;
    background: none;
    cursor: pointer;
}

.crypto-withdrawal-amount-wrap {
    position: relative;
}

.crypto-withdrawal-amount-wrap .money-input {
    padding-right: 68px;
}

.crypto-withdrawal-max-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    border: 1px solid rgba(20, 145, 229, 0.18);
    border-radius: 999px;
    background: rgba(20, 145, 229, 0.08);
    color: #1491e5;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.crypto-withdrawal-max-btn:hover {
    border-color: rgba(20, 145, 229, 0.34);
    background: rgba(20, 145, 229, 0.14);
}

.action-inline-form .sidebar-link,
.action-inline-form .topbar-dropdown-item {
    width: 100%;
    text-align: left;
}

@media (max-width: 640px) {
    .user-topbar--desktop {
        display: none !important;
    }

    .user-topbar-mobile {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        min-height: 68px;
        padding: 10px 12px;
    }

    .user-topbar-mobile__actions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 42px;
        justify-content: end;
        align-items: center;
        gap: 8px;
    }

    .user-topbar-mobile .topbar-dropdown,
    .user-topbar-mobile__theme-form {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 0 !important;
    }

    .user-topbar-mobile .topbar-icon-btn,
    .user-topbar-mobile .user-profile-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .user-topbar-mobile .topbar-user-avatar {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    .user-topbar-mobile .topbar-dropdown-menu {
        position: fixed;
        top: 70px;
        left: 16px;
        right: 16px;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: min(72vh, 520px);
        overflow-y: auto;
        border-radius: 16px;
        z-index: 120;
    }

    .user-topbar-mobile .topbar-dropdown-menu-user,
    .user-topbar-mobile .topbar-dropdown-menu-notifications {
        min-width: 0;
    }

    .user-topbar-mobile #languageDropdownMobile {
        left: 42px;
        right: 42px;
        max-height: none;
        padding: 14px;
    }

    .user-topbar-mobile #languageDropdownMobile .action-inline-form {
        display: block;
        width: 100%;
        margin: 0;
    }

    .user-topbar-mobile #languageDropdownMobile .topbar-dropdown-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10px 8px;
        gap: 12px;
        border-radius: 12px;
    }

    .user-topbar-mobile #profileDropdownMobile {
        left: 42px;
        right: 42px;
        padding: 14px;
    }

    .user-topbar-mobile #profileDropdownMobile .topbar-dropdown-profile {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 4px 4px 14px;
    }

    .user-topbar-mobile #profileDropdownMobile .topbar-user-avatar.large {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .user-topbar-mobile #profileDropdownMobile .topbar-dropdown-profile > div:last-child {
        display: block;
        min-width: 0;
    }

    .user-topbar-mobile #profileDropdownMobile .topbar-dropdown-profile strong,
    .user-topbar-mobile #profileDropdownMobile .topbar-dropdown-subtext {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.35;
    }

    .user-topbar-mobile #profileDropdownMobile .topbar-dropdown-profile strong {
        color: var(--text);
        font-size: 15px;
        font-weight: 900;
        margin-bottom: 2px;
    }

    .user-topbar-mobile #profileDropdownMobile .topbar-dropdown-subtext {
        color: var(--muted);
        font-size: 12px;
        margin-top: 0;
    }

    .user-topbar-mobile #profileDropdownMobile .topbar-dropdown-item {
        display: grid;
        grid-template-columns: 28px 1fr;
        justify-content: start;
        gap: 12px;
        padding: 12px 8px;
    }

    .user-topbar-mobile #notificationsDropdownMobile {
        left: 42px;
        right: 42px;
        padding: 10px;
    }

    .user-topbar-mobile #notificationsDropdownMobile .topbar-notification-list {
        max-height: 340px;
    }
}