/* Web cabinet additions on top of the UI Kit. Only tokens from tokens.css. */

/* Skeleton placeholders for text that waits for data or a language switch */
.nx-skel-line { display: block; height: 0.9em; margin: var(--spacing-2) 0; border-radius: var(--radius-sm); }
.nx-skel-word { display: inline-block; width: 8em; height: 1em; border-radius: var(--radius-sm); vertical-align: middle; }
.nx-skel-amount { display: inline-block; width: 7em; height: 1.1em; border-radius: var(--radius-sm); }

/* Until the session is known, protected content is hidden behind skeletons */
body.is-loading [data-nx-protected] { visibility: hidden; }
body.is-loading .nx-page-skeleton { display: block; }
.nx-page-skeleton { display: none; }

/* Language switch: page-scoped pack reload, cover texts with a skeleton */
.nx-lang-switch { position: fixed; inset: 0; z-index: 2000; display: none; padding: var(--spacing-8); background: var(--color-surface); }
.nx-lang-switch .g-skeleton { width: 100%; height: 100%; border-radius: var(--radius-lg); }
body.is-switching .nx-lang-switch { display: block; }

/* The cabinet header has no .app-header__team block (its margin-left:auto
   pushes the user group right in the UI Kit), so push the user group itself. */
.nx-app .app-header__user { margin-left: auto; }

/* Blocked account / no permission: one screen instead of the page */
.nx-lock { max-width: 640px; margin: var(--spacing-8) auto; padding: var(--spacing-8); text-align: center; }
.nx-lock__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    background: var(--color-danger-bg); color: var(--color-danger); font-size: 28px; margin: 0 auto var(--spacing-4); }
.nx-lock__title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-2); }
.nx-lock__text { color: var(--color-text-secondary); font-size: var(--font-size-md); }
.nx-lock__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); justify-content: center; margin-top: var(--spacing-2); }
/* A blocked user has no sections to navigate to except the allowed ones on the lock screen */
body.nx-is-blocked .app-rail, body.nx-is-blocked .app-tabbar, body.nx-is-blocked .app-header__nav { visibility: hidden; }

/* Accent (blue) card: the kit's dark secondary text is unreadable on blue */
.g-card--accent .g-card__label,
.g-card--accent .g-card__subtitle,
.g-card--accent .text-caption { color: var(--color-on-accent); opacity: .8; }
.g-card--accent .g-link { color: var(--color-on-accent); }

.nx-footer { display: flex; gap: var(--spacing-4); justify-content: center; align-items: center; padding: var(--spacing-6) 0 var(--spacing-2); }

/* Public pages (legal, 404) */
.nx-public { background: var(--color-background); }
.nx-public__wrap { max-width: 860px; margin: 0 auto; padding: var(--spacing-6) var(--spacing-4); }
.nx-public__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-6); }
.nx-public__card { padding: var(--spacing-8); }
.nx-public__card h1 { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-2); }
.nx-public__card h2 { font-size: var(--font-size-xl); margin-top: var(--spacing-6); }
.nx-public__card p, .nx-public__card li { color: var(--color-text-secondary); line-height: 1.6; }

/* Mobile stub */
.nx-stub { min-height: 100vh; display: grid; place-items: center; padding: var(--spacing-8) var(--spacing-4); background: var(--color-background); text-align: center; }
.nx-stub__logo { display: block; height: 48px; margin: 0 auto var(--spacing-6); }
:root[data-theme="dark"] .nx-stub__logo { filter: invert(1); } /* logo.svg is dark, like .app-logo */
.nx-stub__actions { display: flex; flex-direction: column; gap: var(--spacing-3); max-width: 320px; margin: var(--spacing-6) auto 0; }

/* "Continue with Telegram" (core/session.js): Kit secondary button, Telegram-blue icon */
.nx-tg-btn .bi-telegram { color: #2AABEE; font-size: 1.15em; }

/* Forms with fee breakdown */
.nx-form { max-width: 560px; }
.nx-form .g-kv { margin-top: var(--spacing-2); }
.nx-amount-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 220px); gap: var(--spacing-3); }
.nx-amount-row > :last-child { white-space: nowrap; text-overflow: ellipsis; }
.nx-amount-row > select:last-child { overflow: hidden; }
/* Kit comboboxes in toolbars keep a readable width */
.g-table-toolbar .g-combo { min-width: 170px; }
.g-table-toolbar .g-combo__control { min-height: var(--control-height-sm, 36px); }
.nx-asset-select { height: var(--control-height-md); }
.nx-mono { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace); word-break: break-all; }

/* ---------- Bank card face (cards, dashboard) ---------- */
.nx-vcard { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1.586; border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-6); color: #fff; text-decoration: none;
    background: linear-gradient(135deg, var(--color-accent-strong) 0%, var(--color-accent) 100%);
    display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base); }
.nx-vcard--dark { background: linear-gradient(135deg, #1b1c20 0%, #2c2d33 60%, #3a3b42 100%); }
/* Product design (sanitized SVG from the admin) as the card face */
.nx-vcard--design { background-color: #1b1c20; background-size: cover; background-position: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.nx-vcard--design::before, .nx-vcard--design::after { display: none; }
.nx-vcard::before, .nx-vcard::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.nx-vcard::before { width: 70%; aspect-ratio: 1; right: -22%; top: -38%; }
.nx-vcard::after { width: 55%; aspect-ratio: 1; right: -8%; bottom: -48%; background: rgba(255, 255, 255, .05); }
a.nx-vcard:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg, var(--shadow-md)); }
.nx-vcard.is-frozen { filter: grayscale(.9); }
.nx-vcard.is-frozen > * { opacity: .75; }
.nx-vcard__top, .nx-vcard__mid, .nx-vcard__row { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-3); }
.nx-vcard__name { font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-vcard__brand { font-weight: 800; font-style: italic; letter-spacing: .04em; font-size: var(--font-size-lg); }
.nx-vcard__chip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #f4d58d, #c9a24b);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.nx-vcard__nfc { transform: rotate(90deg); font-size: 20px; opacity: .85; margin-right: auto; }
.nx-vcard__state { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: 2px var(--spacing-2);
    border-radius: var(--radius-pill); background: rgba(255, 255, 255, .2); font-size: var(--font-size-xs); }
.nx-vcard__pan { font-size: var(--font-size-xl); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.nx-vcard__row { align-items: flex-end; }
.nx-vcard__k { display: block; font-size: var(--font-size-2xs, 10px); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.nx-vcard__v { display: block; font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); }
.nx-vcard--mini { padding: var(--spacing-4); border-radius: var(--radius-lg); }
.nx-vcard--mini .nx-vcard__pan { font-size: var(--font-size-md); }
.nx-vcard--mini .nx-vcard__chip { width: 30px; height: 22px; }
#visual .nx-vcard { max-width: 460px; }
/* P2P: page tabs, deal layout, offer form */
.nx-tabs { margin-bottom: var(--spacing-4); overflow-x: auto; scrollbar-width: none; }
.nx-tabs .g-tabs__item { display: inline-flex; align-items: center; gap: var(--spacing-2); white-space: nowrap; }
.nx-panes > .g-tab-pane:not(.is-active) { display: none !important; }
.nx-deal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--spacing-4); align-items: start; }
.nx-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3) var(--spacing-4); }
.nx-chat__system { text-align: center; margin: 0; }
.text-wrap { white-space: normal; }
@media (max-width: 991.98px) { .nx-deal { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) { .nx-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Support page: tickets list + chat thread */
.nx-support { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--spacing-4); align-items: start; }
.nx-tickets { display: flex; flex-direction: column; gap: var(--spacing-2); }
.nx-tickets > .g-empty { padding-block: var(--spacing-6); }
.nx-ticket { display: flex; flex-direction: column; gap: 2px; padding: var(--spacing-3); border: 1px solid transparent; border-radius: var(--radius-lg);
    background: var(--color-surface-muted); color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.nx-ticket:hover { border-color: var(--color-divider); }
.nx-ticket.is-active { border-color: var(--color-primary); }
.nx-ticket__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); min-width: 0; }
.nx-chat { display: flex; flex-direction: column; gap: var(--spacing-3); max-height: 55vh; overflow-y: auto; padding-right: var(--spacing-1); }
.nx-chat__msg { max-width: 85%; align-self: flex-start; }
.nx-chat__msg--me { align-self: flex-end; }
.nx-chat__msg--me .nx-chat__meta { text-align: right; }
.nx-chat__meta { margin-bottom: 2px; }
.nx-chat__body { padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-lg); background: var(--color-surface-muted); white-space: pre-wrap; word-break: break-word; }
.nx-chat__msg--me .nx-chat__body { background: var(--color-primary); color: var(--color-on-primary, #fff); }
.nx-chat__reply { display: flex; flex-direction: column; gap: var(--spacing-2); margin-top: var(--spacing-4); padding-top: var(--spacing-4); border-top: 1px solid var(--color-divider); }
@media (max-width: 991.98px) { .nx-support { grid-template-columns: minmax(0, 1fr); } }

/* Notifications page: day headers between groups */
.nx-notif-day { padding: var(--spacing-3) var(--spacing-1) var(--spacing-1); text-transform: uppercase; letter-spacing: .06em; font-size: var(--font-size-xs); }
.nx-notif-day:first-child { padding-top: 0; }
/* Issue modal: product picker (card faces as radio tiles) */
.nx-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-3); }
.nx-product { display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-2); border: 2px solid transparent;
    border-radius: var(--radius-lg); background: none; text-align: left; color: inherit; cursor: pointer; }
.nx-product:hover { background: var(--color-surface-muted); }
.nx-product.is-active { border-color: var(--color-primary); }
.nx-product .nx-vcard { pointer-events: none; }
.nx-product__meta { display: flex; flex-direction: column; }
.nx-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-4); }
.nx-mini-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-3); }

.nx-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-4); }
.nx-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-4); }
.nx-stack { display: flex; flex-direction: column; gap: var(--spacing-4); }
.nx-copy-field { display: flex; gap: var(--spacing-2); align-items: center; }
.nx-copy-field .g-input { flex: 1; }
[hidden] { display: none !important; }

/* ---------- Dashboard ---------- */
.nx-dash-extra { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 2fr); gap: var(--layout-gutter); margin-top: var(--layout-gutter); }
@media (max-width: 1279.98px) { .nx-dash-extra { grid-template-columns: minmax(0, 1fr); } }
.dash-grid__customers, .nx-status-card { display: flex; flex-direction: column; gap: var(--spacing-3); }
.nx-status-card--warn { box-shadow: inset 0 0 0 1px var(--color-warning); }
.nx-status-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md);
    background: var(--color-warning-bg); color: var(--color-warning); font-size: 22px; }
.nx-status-card .g-btn--block, .dash-grid__customers .g-btn--block { margin-top: auto; }
.nx-locked-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-2); }
.nx-locked-line .g-badge .bi { margin-right: 4px; }
.g-card--accent .nx-on-accent-btn { --g-btn-bg: rgba(255, 255, 255, .18); --g-btn-color: var(--color-on-accent); color: var(--color-on-accent); background: rgba(255, 255, 255, .18); }
.g-card--accent .nx-on-accent-btn:hover { background: rgba(255, 255, 255, .28); }
.g-card--accent .g-input { background: rgba(255, 255, 255, .14); border-color: transparent; color: var(--color-on-accent); }

/* ---------- Wallet ---------- */
.nx-wallet-top { display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--layout-gutter); }
@media (max-width: 1279.98px) { .nx-wallet-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-wallet-top > :first-child { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .nx-wallet-top { grid-template-columns: minmax(0, 1fr); } }
.nx-wallet-top .g-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3); }
.nx-split__item { padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.nx-split__item .amount { margin-top: var(--spacing-1); }
.nx-alloc { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--spacing-4); align-items: center; }
.nx-alloc .g-chart { height: 140px; }
/* Empty / error state instead of the chart: spans both columns, centered. */
.nx-alloc > .g-empty, .nx-alloc > .g-alert, .nx-alloc > :only-child { grid-column: 1 / -1; justify-self: stretch; }
.nx-alloc__legend { display: flex; flex-direction: column; gap: var(--spacing-2); }
.nx-alloc__row { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-sm); }
.nx-alloc__row b { margin-left: auto; font-weight: var(--font-weight-semibold); }
.nx-alloc__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nx-table-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-3); margin-top: var(--spacing-3); }

/* ---------- 2FA setup ---------- */
/* 2FA setup stays in its own column (the password card keeps its place): QR beside the steps when the card is wide enough, above them otherwise. */
.nx-security { align-items: start; }
.nx-security > .g-card { container-type: inline-size; }
.nx-2fa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-5); align-items: start; }
.nx-2fa .nx-qr-box { max-width: 220px; margin-inline: auto; }
.nx-2fa #secret { font-size: var(--font-size-xs); letter-spacing: 0; padding-inline: var(--spacing-3); text-overflow: ellipsis; }
@container (min-width: 540px) { .nx-2fa { grid-template-columns: 180px minmax(0, 1fr); } .nx-2fa .nx-qr-box { margin-inline: 0; } }

.nx-qr-box { position: relative; padding: var(--spacing-3); border-radius: var(--radius-lg); background: #fff;
    box-shadow: inset 0 0 0 1px var(--color-border); aspect-ratio: 1; display: grid; place-items: center; }
.nx-qr-box img { width: 100%; height: 100%; display: block; }
.nx-qr-box .g-skeleton { width: 100%; height: 100%; border-radius: var(--radius-md); }
.nx-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: var(--spacing-2); }
.nx-otp input { height: 56px; padding: 0; text-align: center; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums; border-radius: var(--radius-md); }
/* Step content (key field, code cells) goes under the step title, aligned with its text */
.nx-2fa .g-steps--vertical .g-steps__item { flex-direction: column; align-items: stretch; }
.nx-2fa .g-steps__body { margin-left: calc(24px + var(--spacing-3)); margin-top: var(--spacing-2); max-width: 420px; }
.nx-2fa .g-steps__body .g-form-actions { justify-content: flex-start; }
.nx-code-input { letter-spacing: .4em; font-size: var(--font-size-xl); text-align: center; font-variant-numeric: tabular-nums; }
.nx-security > .nx-wide { grid-column: 1 / -1; }
.nx-info-flat { padding: var(--spacing-4); background: var(--color-surface-muted); box-shadow: none; }
.nx-icon-warn { background: var(--color-warning-bg) !important; color: var(--color-warning) !important; }

/* Auth screens: footer below the card */
.nx-auth .auth-screen { flex-direction: column; gap: var(--spacing-2); }
.nx-auth .nx-footer { padding-top: var(--spacing-2); }

/* ---------- in-place navigation (core/nav.js) ---------- */
.nx-content { display: contents; }
.nx-nav-skel { display: flex; flex-direction: column; gap: var(--spacing-4, 16px); }
.nx-nav-skel__title { display: block; width: 220px; height: 28px; border-radius: var(--radius-md, 8px); }
.nx-nav-skel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-4, 16px); }
.nx-nav-skel__block { display: block; height: 96px; margin-top: 12px; }
.nx-nav-skel__tall { display: block; height: 320px; }

/* Language list in the profile menu */
.app-profile-menu__select { width: auto; min-width: 150px; }

/* ---------- public status page (/status) ---------- */
.nx-public__wrap--wide { max-width: 1040px; }
.nx-public__main { display: flex; flex-direction: column; gap: var(--spacing-4); }
.nx-status { display: flex; flex-direction: column; gap: var(--spacing-4); }
.nx-status__head { padding: var(--spacing-2) 0; }
.nx-status__title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-1); }
.nx-status__banner { display: flex; align-items: center; gap: var(--spacing-4); }
.nx-status__icon { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.nx-status__banner--success .nx-status__icon { background: var(--color-success-bg); color: var(--color-success); }
.nx-status__banner--warning .nx-status__icon { background: var(--color-warning-bg); color: var(--color-warning); }
.nx-status__banner--danger .nx-status__icon { background: var(--color-danger-bg); color: var(--color-danger); }
.nx-status__state { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.nx-status__group { border-bottom: 1px solid var(--color-divider); padding-bottom: var(--spacing-2); }
.nx-status__group:last-child { border-bottom: 0; }
.nx-status__service { border-bottom: 0; }
.nx-status__comps { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-4); padding-left: var(--spacing-5); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.nx-status__comp { display: inline-flex; align-items: center; gap: 6px; }
.g-uptime.nx-uptime-90 { grid-template-columns: repeat(90, 1fr); gap: 1px; height: 28px; }
.g-uptime > span.is-none, .nx-status__sw.is-none { background: var(--color-gray-200, #d9d9d9); }
.nx-status__axis { display: flex; justify-content: space-between; margin-top: var(--spacing-3); }
.nx-status__legend { display: flex; flex-wrap: wrap; gap: var(--spacing-4); margin-top: var(--spacing-3); }
.nx-status__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.nx-status__sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--color-accent-strong); }
.nx-status__sw.is-warn { background: var(--color-warning); }
.nx-status__sw.is-down { background: var(--color-danger); }
/* ---------- dashboard referral card (accent) ---------- */
.nx-ref-card { display: flex; flex-direction: column; gap: var(--spacing-4); }
.nx-ref-card__head { display: flex; align-items: center; gap: var(--spacing-3); }
.nx-ref-card__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 20px; color: var(--color-on-accent); }
.nx-ref-card__sub { font-size: var(--font-size-xs); opacity: .8; }
.nx-ref-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2); }
.nx-ref-card__stat { display: flex; flex-direction: column; gap: 2px; padding: var(--spacing-3); border-radius: var(--radius-md, 12px); background: rgba(255, 255, 255, .12); }
.nx-ref-card__stat-label { font-size: var(--font-size-xs); opacity: .8; }
.nx-ref-card__stat-value { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.g-card--accent .nx-ref-card__label { color: inherit; opacity: .8; }
.g-card--accent .nx-ref-card__link { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: var(--color-on-accent); }
.g-card--accent .nx-ref-card__link .g-affix__input { color: var(--color-on-accent); text-overflow: ellipsis; }
.g-card--accent .nx-ref-card__link .g-affix__addon, .g-card--accent .nx-ref-card__link .g-affix__btn { color: var(--color-on-accent); }
.g-card--accent .nx-ref-card__link .g-affix__btn:hover { background: rgba(255, 255, 255, .18); }