:root {
    --bg: #0D1017;
    --surface: #151A23;
    --surface-2: #1C2330;
    --header: #11151D;
    --border: #242C3A;
    --header-line: #1F2633;
    --input-bg: #0D1017;
    --input-border: #2A3242;
    --text: #E8EBF0;
    --label: #C9D0DB;
    --text-dim: #9AA3B2;
    --text-faint: #7D8698;
    --accent: #F5B544;
    --link: #F5B544;
    --link-hover: #FFD08A;
    --primary-bg: #F5B544;
    --primary-hover: #FFC766;
    --primary-text: #1A1206;
    --backdrop-line: #171C26;
    --danger-bg: #2A1618;
    --danger-border: #5C2A2C;
    --danger-text: #F7B4AF;
    --danger-line: #F7A39C;
    --danger-solid: #D9534F;
    --ok-bg: #12301F;
    --ok-text: #5FD39E;
    --warn-bg: #2E2610;
    --warn-text: #F5C76A;
    --info-bg: #0D1017;
    --info-text: #9AA3B2;
    --card-shadow: none;
    --toast-success-bg: #163324;
    --toast-error-bg: #361C1F;
    --toast-warning-bg: #352A12;
    --toast-info-bg: #242C3A;
    --scroll-thumb: #2A3242;
    --scroll-thumb-hover: #3A4356;
    --avatar-bg: #2A3242;
    --dot-border: #3A4356;
    --seg-bg: #0D1017;
    --seg-on: #2A3242;
    --seg-on-text: #E8EBF0;
    --seg-shadow: none;
    --captcha-filter: invert(.88) hue-rotate(180deg);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239AA3B2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme: dark;
}

/* Light tokens appear twice: an explicit choice (cookie → data-theme) and "System" when the OS is light. */
:root[data-theme="light"] {
    --bg: #F5F6F8;
    --surface: #FFFFFF;
    --surface-2: #F1F3F6;
    --header: #FFFFFF;
    --border: #E4E7EC;
    --header-line: #E4E7EC;
    --input-bg: #FFFFFF;
    --input-border: #CDD3DC;
    --text: #131722;
    --label: #3B4351;
    --text-dim: #5A6373;
    --text-faint: #667085;
    --accent: #C98A1B;
    --link: #9A6300;
    --link-hover: #7A4E00;
    --primary-bg: #F5B544;
    --primary-hover: #F0A928;
    --primary-text: #1A1206;
    --backdrop-line: #E6E9EE;
    --danger-bg: #FDECEA;
    --danger-border: #F5C2BD;
    --danger-text: #9C2F28;
    --danger-line: #D9534F;
    --danger-solid: #C8433C;
    --ok-bg: #E6F4EC;
    --ok-text: #16603F;
    --warn-bg: #FFF3D6;
    --warn-text: #7A4F00;
    --info-bg: #F1F3F6;
    --info-text: #5A6373;
    --card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
    --toast-success-bg: #F0FDF4;
    --toast-error-bg: #FEF2F2;
    --toast-warning-bg: #FFFBEB;
    --toast-info-bg: #F8FAFC;
    --scroll-thumb: #CDD3DC;
    --scroll-thumb-hover: #AEB6C2;
    --avatar-bg: #E9ECF1;
    --dot-border: #C3C9D3;
    --seg-bg: #F1F3F6;
    --seg-on: #FFFFFF;
    --seg-on-text: #131722;
    --seg-shadow: 0 1px 2px rgba(16, 24, 40, .12); --captcha-filter: none;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235A6373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --bg: #F5F6F8;
        --surface: #FFFFFF;
        --surface-2: #F1F3F6;
        --header: #FFFFFF;
        --border: #E4E7EC;
        --header-line: #E4E7EC;
        --input-bg: #FFFFFF;
        --input-border: #CDD3DC;
        --text: #131722;
        --label: #3B4351;
        --text-dim: #5A6373;
        --text-faint: #667085;
        --accent: #C98A1B;
        --link: #9A6300;
        --link-hover: #7A4E00;
        --primary-bg: #F5B544;
        --primary-hover: #F0A928;
        --primary-text: #1A1206;
        --backdrop-line: #E6E9EE;
        --danger-bg: #FDECEA;
        --danger-border: #F5C2BD;
        --danger-text: #9C2F28;
        --danger-line: #D9534F;
        --danger-solid: #C8433C;
        --ok-bg: #E6F4EC;
        --ok-text: #16603F;
        --warn-bg: #FFF3D6;
        --warn-text: #7A4F00;
        --info-bg: #F1F3F6;
        --info-text: #5A6373;
        --card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
        --toast-success-bg: #F0FDF4;
        --toast-error-bg: #FEF2F2;
        --toast-warning-bg: #FFFBEB;
        --toast-info-bg: #F8FAFC;
        --scroll-thumb: #CDD3DC;
        --scroll-thumb-hover: #AEB6C2;
        --avatar-bg: #E9ECF1;
        --dot-border: #C3C9D3;
        --seg-bg: #F1F3F6;
        --seg-on: #FFFFFF;
        --seg-on-text: #131722;
        --seg-shadow: 0 1px 2px rgba(16, 24, 40, .12); --captcha-filter: none;
        --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235A6373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        color-scheme: light;
    }
}

.theme-switch { height: 36px; padding: 3px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--seg-bg); display: flex; gap: 2px; }
.theme-switch button { width: 34px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-faint); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-checked="true"] { background: var(--seg-on); color: var(--seg-on-text); box-shadow: var(--seg-shadow); }

/* Header */
.topbar { height: 72px; padding: 0 48px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--header-line); background: var(--header); }
.topbar .brand { font-size: 19px; gap: 12px; margin-right: auto; }
.who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--label); order: 2; }
.avatar { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 18px; background: var(--avatar-bg); display: flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; font-size: 13px; color: var(--text); cursor: default; }
/* Desktop: the menu's children sit inline in the top bar; on phones the same markup becomes the avatar's dropdown. */
.account-menu { display: contents; }
.account-menu .theme-switch { order: 1; }
.account-menu form { order: 3; }
.account-name { display: none; }
.topbar form { margin: 0; }
.topbar.has-nav .brand { margin-right: 24px; }
.member-nav { margin-right: auto; padding: 4px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--seg-bg); display: flex; gap: 4px; }
.member-nav a { height: 38px; padding: 0 16px; border-radius: 8px; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-dim); }
.member-nav a:hover { color: var(--text); }
.member-nav a.is-active { background: var(--seg-on); color: var(--seg-on-text); box-shadow: var(--seg-shadow); font-weight: 600; }
/* The bar stays opaque while locked; only its controls fade (the account menu is display: contents, so its children fade). */
.topbar.is-locked { opacity: 1; }
.topbar.is-locked > :not(.account-menu), .topbar.is-locked .account-menu > * { opacity: .45; }
.topbar .btn--sm { padding: 0 14px; border-radius: 8px; color: var(--label); }

.scrim { position: fixed; inset: 0; background: rgba(5, 7, 11, .6); z-index: 10; }
.modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 11; width: 420px; max-width: calc(100% - 32px); padding: 28px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(0, 0, 0, .4); color: var(--text); font-size: 14px; display: flex; flex-direction: column; gap: 18px; }
.modal-head h2 { font-size: 20px; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }

.page { padding: 36px 48px; display: flex; flex-direction: column; gap: 28px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 30px; }

.steps { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-faint); }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps .dot { width: 24px; height: 24px; border-radius: 12px; border: 1px solid var(--dot-border); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.steps .is-current { color: var(--text); }
.steps .is-current .dot { border: 0; background: var(--primary-bg); color: var(--primary-text); font-weight: 600; }
.steps .line { width: 40px; height: 1px; background: var(--input-border); }

/* Deposit */
.deposit-grid { display: flex; gap: 28px; align-items: flex-start; }
.panel { padding: 32px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.deposit-form { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.deposit-form .field > label { font-size: 14px; }
.deposit-form .field input, .deposit-form .field select { height: 48px; padding: 0 14px; border-radius: 10px; font-size: 15px; }
.deposit-form .hint { font-size: 13px; }
.deposit-form .dd-button { height: 48px; padding-left: 14px; border-radius: 10px; font-size: 15px; }
.pair-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.pair-fields:empty, .pair-fields[disabled] { gap: 0; }
.pair-fields .field { flex: 1 1 200px; }
.pair-fields .field--bank { flex: 0 1 220px; }
.amount-box { display: flex; align-items: center; height: 60px; padding: 0 18px; border-radius: 12px; border: 2px solid var(--accent); background: var(--input-bg); }
.amount-box input { flex-grow: 1; min-width: 0; height: auto !important; border: 0 !important; padding: 0 !important; background: transparent !important; color: var(--text); font-family: "Sora", "Segoe UI", system-ui, sans-serif !important; font-weight: 600; font-size: 26px !important; outline: none; }
.amount-box input:focus { box-shadow: none; }
.amount-box .cur { font-size: 16px; color: var(--text-dim); }
.field--invalid .amount-box { border-color: var(--danger-line); }

.summary { width: 400px; flex-shrink: 0; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.summary h2 { font-size: 18px; }
.sum-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.sum-row > span:first-child { color: var(--text-dim); }
.sum-row > span:last-child { text-align: right; word-break: break-all; }
.sum-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.sum-total > span:first-child { color: var(--text-dim); font-size: 14px; white-space: nowrap; }
.sum-total strong { margin-left: auto; min-width: 0; text-align: right; overflow-wrap: anywhere; font-family: "Sora", "Segoe UI", system-ui, sans-serif; font-weight: 600; font-size: 28px; }
.sum-total strong.is-long { font-size: 20px; }
.sum-total strong.is-very-long { flex-basis: 100%; margin-left: 0; text-align: left; font-size: 16px; line-height: 1.4; word-break: break-all; }
.sum-total small { font-size: 15px; color: var(--text-dim); font-weight: 400; }
.divider { height: 1px; background: var(--border); }
.summary .btn--primary { height: 52px; font-size: 16px; font-family: "Sora", "Segoe UI", system-ui, sans-serif; }
.note { display: flex; gap: 10px; padding: 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.note svg { flex-shrink: 0; margin-top: 1px; color: var(--link); }
.empty { color: var(--text-dim); }

/* Pay by QR + results */
.result-grid { display: flex; gap: 28px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.page--result { padding: 48px; }
.result-col { display: flex; flex-direction: column; gap: 10px; }
.card--result { gap: 18px; }
.no-access { align-items: center; text-align: center; margin-top: 12vh; }
.no-access .outcome-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); color: var(--text-dim); }
.no-access h1 { font-size: 22px; }
.no-access p { font-size: 15px; line-height: 1.6; color: var(--text-dim); max-width: 400px; }
.card { width: 520px; max-width: 100%; padding: 28px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 20px; }
.card--side { width: 480px; padding: 22px 24px; gap: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card h1 { font-size: 22px; }
.card h2 { font-size: 16px; }
.pay { display: flex; gap: 24px; align-items: center; }
.qr-box { padding: 12px; border-radius: 12px; background: #FFFFFF; display: flex; flex-shrink: 0; }
.qr-box img { display: block; width: 168px; height: 168px; image-rendering: pixelated; }
.facts { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 10px; font-size: 14px; min-width: 0; }
.facts dt { color: var(--text-dim); }
.facts dd { min-width: 0; overflow-wrap: anywhere; }
.facts .copy-line { display: flex; align-items: center; gap: 8px; }
.facts .big { font-family: "Sora", "Segoe UI", system-ui, sans-serif; font-weight: 600; font-size: 18px; }
.copy { display: inline-flex; align-items: center; gap: 6px; }
.mini-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--input-border); background: var(--surface-2); color: var(--label); cursor: pointer; }
.caption { font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.json-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); }
.json { padding: 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: 12px; line-height: 1.55; color: var(--label); white-space: pre-wrap; word-break: break-word; }
.json-block { display: flex; flex-direction: column; gap: 8px; }
.json-wrap { position: relative; }
.card .json-wrap .json { padding-right: 48px; }
.json-copy { position: absolute; top: 8px; right: 8px; background: var(--surface); }
.card .json { font-size: 13px; line-height: 1.6; padding: 16px; max-height: 360px; overflow: auto; }
.card--side .json { font-size: 12px; line-height: 1.55; padding: 14px; }
.response summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.response summary::-webkit-details-marker { display: none; }
.response summary .btn--sm { height: 32px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: var(--label); pointer-events: none; }
.response[open] .when-closed, .response:not([open]) .when-open { display: none; }
.response-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.outcome { display: flex; align-items: center; gap: 14px; }
.outcome-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.outcome-icon--warn { background: var(--warn-bg); color: var(--warn-text); }
.outcome-icon--bad { background: var(--danger-bg); color: var(--danger-line); }
.outcome-icon--ok { background: var(--ok-bg); color: var(--ok-text); }
.outcome h1 { font-size: 20px; }
.outcome p { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

@media (max-width: 1100px) {
    .deposit-grid { flex-direction: column; }
    .summary { width: 100%; }
}
@media (max-width: 640px) {
    .topbar { position: relative; height: 60px; padding: 0 16px; gap: 12px; }
    .topbar .brand { font-size: 16px; gap: 10px; }
    .topbar.has-nav .brand { margin-right: 0; }
    .topbar.has-nav .brand span { display: none; }
    .member-nav a { height: 34px; padding: 0 12px; font-size: 14px; }
    .who-name { display: none; }
    .avatar { width: 40px; height: 40px; border-radius: 20px; cursor: pointer; }
    .account-menu { display: none; position: absolute; top: 56px; right: 16px; z-index: 15; width: 220px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); flex-direction: column; gap: 12px; }
    .topbar.is-menu-open .account-menu { display: flex; }
    .account-name { display: block; font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
    .account-menu .theme-switch { align-self: flex-start; }
    .account-menu .btn--sm { width: 100%; justify-content: center; }
    .result-grid { gap: 16px; }
    .pair-fields .field, .pair-fields .field--bank { flex: 1 1 100%; }
    .card.card--pay { padding: 0; background: transparent; border: 0; }
    .card--pay .facts { padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
    .who span:last-child { display: none; }
    .page, .page--result { padding: 20px 16px; gap: 16px; }
    .page-head h1 { font-size: 22px; }
    .steps { display: none; }
    .panel, .summary { padding: 20px; }
    .pay { flex-direction: column; align-items: stretch; }
    .qr-box { align-self: center; }
    .qr-box img { width: min(72vw, 260px); height: auto; }
    .card, .card--side { padding: 20px 16px; }
}