/* Mini-app styles; this file is the design reference for the app.
   Dark by default, light theme via :root[data-theme="light"] (toggle in the header).
   Base #080B0E, surfaces #101418 / #171C21 / #20262C. The accent colours
   (--accent-*) come from the brand's theme.css, loaded after this file.
   Elevation = surface step + 1px inset hairline. No glows, no gradient buttons,
   no scale() press effects. The bank card face is the only element with a shadow. */

/* ===========================================================================
   TOKENS — originally generated from the designer's Figma variables. This
   block is now the source of truth: reuse these values, do not invent new
   ones.
   =========================================================================== */
:root {
  /* Screen insets. Outside fullscreen the WebView reports them through env();
     in Telegram fullscreen (Bot API 8.0) app.js overrides both from
     safeAreaInset + contentSafeAreaInset, which also cover the floating
     Close / menu controls Telegram draws over the top-right corner. */
  --inset-top: env(safe-area-inset-top, 0px);
  --inset-bottom: env(safe-area-inset-bottom, 0px);
  /* Viewport size in px. index.html sets both from innerWidth / innerHeight
     before first paint; these fallbacks only apply to pages without it.
     --app-h is a snapshot that iOS can leave stale (see body), so it only
     sets cosmetic offsets. Heights come from html's 100% instead. */
  --app-w: 100vw;
  --app-h: 100dvh;
  /* --- primitives ------------------------------------------------------- */
  --amber-500: rgb(255, 184, 77);
  --black-a64: rgba(0, 0, 0, 0.6392);
  --blue-400: rgb(110, 183, 255);
  --blue-500: rgb(78, 150, 244);
  --neutral-0: rgb(255, 255, 255);
  --neutral-25: rgb(250, 250, 250);
  --neutral-50: rgb(245, 247, 248);
  --neutral-150: rgb(218, 218, 218);
  --neutral-200: rgb(213, 219, 224);
  --neutral-400: rgb(152, 161, 171);
  --neutral-500: rgb(116, 125, 136);
  --neutral-600: rgb(82, 90, 101);
  --neutral-700: rgb(48, 55, 64);
  --neutral-800: rgb(32, 38, 44);
  --neutral-850: rgb(23, 28, 33);
  --neutral-900: rgb(16, 20, 24);
  --neutral-950: rgb(8, 11, 14);
  --red-500: rgb(255, 100, 119);
  --white-a08: rgba(255, 255, 255, 0.0784);

  /* --- semantic (dark mode = default) ----------------------------------- */
  --color-accent-travel: var(--blue-400);
  --color-action-disabled: var(--neutral-700);
  --color-action-primary: var(--accent);
  --color-action-primary-pressed: var(--accent);
  --color-bg-base: var(--neutral-950);
  --color-bg-subtle: var(--neutral-900);
  --color-border-brand: var(--accent);
  --color-border-default: var(--neutral-700);
  --color-border-strong: var(--neutral-600);
  --color-icon-brand: var(--accent);
  --color-icon-nav-active: var(--accent);
  --color-icon-primary: var(--neutral-0);
  --color-icon-secondary: var(--neutral-500);
  --color-overlay: var(--black-a64);
  --color-state-error: var(--red-500);
  --color-state-success: var(--accent);
  --color-state-warning: var(--amber-500);
  --color-surface-default: var(--neutral-850);
  --color-surface-elevated: var(--neutral-800);
  --color-surface-nav-active: var(--accent-a12);
  --color-surface-selected: var(--accent-a12);
  --color-text-brand: var(--accent-500);
  --color-text-inverse: var(--neutral-950);
  --color-text-on-brand: var(--accent-contrast);
  --color-text-primary: var(--neutral-0);
  --color-text-secondary: var(--neutral-400);
  --color-text-tertiary: var(--neutral-500);

  /* --- typography -------------------------------------------------------- */
  --font-display: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-data: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --tracking-tight: -0.05em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  --type-display-size: 27px; --type-display-weight: 500; --type-display-lh: 1;
  --type-title-size: 22px;   --type-title-weight: 600;   --type-title-lh: 31px;
  --type-amount-size: 18px;  --type-amount-weight: 700;  --type-amount-lh: 100%;
  --type-row-size: 16px;     --type-row-weight: 600;     --type-row-lh: 20px;
  --type-body-size: 14px;    --type-body-weight: 500;    --type-body-lh: 20px;
  --type-subhead-size: 13px; --type-subhead-weight: 400; --type-subhead-lh: 1.2;
  --type-caption-size: 12px; --type-caption-weight: 500; --type-caption-lh: 14px;
  --type-micro-size: 10px;   --type-micro-weight: 500;   --type-micro-lh: 12px;
  --type-label-size: 12px;   --type-label-weight: 600;   --type-label-lh: 100%;

  /* --- layout ------------------------------------------------------------ */
  --space-4: 4px;   --space-8: 8px;   --space-10: 10px; --space-12: 12px;
  --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px;
  --space-32: 32px; --space-40: 40px;

  --radius-sm: 12px;   /* choice card, tile inside a panel */
  --radius-md: 16px;   /* input, row, panel */
  --radius-lg: 20px;
  --radius-xl: 24px;   /* bottom sheet, bank card face */
  --radius-pill: 999px; /* every button, chip and the tab bar (2026-09-29) */

  --control-h: 52px;    /* button / input */
  --control-h-lg: 56px; /* primary CTA inside a sheet */
  --row-h: 64px;        /* payment option, nav bar */
  --row-h-tariff: 72px;
  --nav-item-h: 48px;
  --touch-min: 44px;

  /* --- effects ----------------------------------------------------------- */
  --hairline: inset 0 0 0 1px var(--color-border-default);
  --hairline-strong: inset 0 0 0 1px var(--color-border-strong);
  --ring-brand: inset 0 0 0 1.5px var(--color-border-brand);
  --ring-brand-2: inset 0 0 0 2px var(--color-border-brand);
  --ring-error: inset 0 0 0 1px var(--color-state-error);

  --shadow-card: 0 18px 34px 0 rgba(0, 0, 0, 0.4);

  --glass-wash: linear-gradient(90deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .008) 100%);
  --glass-wash-faint: linear-gradient(90deg, rgba(255, 255, 255, .009) 0%, rgba(255, 255, 255, .002) 100%);
  --glass-blur: blur(14.1px);

  --accent-tint: var(--accent-a12);
  --divider: rgba(255, 255, 255, .08);

  /* One-off literals the .fig uses inside components, kept as named tokens so
     nothing bypasses the token layer. Values are verbatim from the JSX. */
  --toggle-icon-idle: rgb(122, 132, 145);          /* PrefHeader.jsx, inactive slot */
  --choice-badge-icon: rgba(229, 235, 237, 0.88);  /* .fig tariff card, cardLine icon */
  --choice-badge-icon-travel: rgba(204, 214, 219, 0.78); /* .fig tariff card, plane icon */
  --radio-ring-idle: rgba(133, 143, 153, .48);     /* Choice Card #286:412: idle indicator is an empty 1px inside ring */
  --radio-ring-brand: var(--accent-ring);    /* .fig tariff card, active indicator */

  /* Card-selection screen. Values read straight out of the designer's Figma
     file (the .fig, frame "Main / Subscriptions", 2026-09-08), which is
     the authority here — the JSX mirror had the wrong sizes and weights. */
  /* 2026-09-09: re-read from the "Choice Card" component the final screens are
     built from (page "03 – Screens", #286:383 selected / #286:415 default).
     Surface neutral-850 under a faint white wash; the ring is border/default
     idle and border/strong selected; the icon disc is neutral-900 ringed
     border/default. The idle indicator has neither fill nor stroke. */
  --choicex-fill: var(--neutral-850);
  --choicex-wash: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .01) 100%);
  --choicex-wash-active: linear-gradient(90deg, rgba(255, 255, 255, .01) 0%, rgba(255, 255, 255, .002) 100%);
  --choicex-ring: inset 0 0 0 1px var(--color-border-default);
  --choicex-ring-active: inset 0 0 0 1px var(--color-border-strong);
  --choicex-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  --choicex-badge-fill: var(--neutral-900);
  --choicex-badge-ring: inset 0 0 0 1px var(--color-border-default);
  --benefits-fill: rgba(14, 17, 19, .78);
  --benefits-wash: linear-gradient(90deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .01) 100%);
  --benefits-ring: inset 0 0 0 1px rgba(255, 255, 255, .09);
  --benefits-divider: rgba(255, 255, 255, .08);
  --benefit-icon: rgba(229, 235, 237, .82);

  /* Bottom sheets. The .fig "Bottom Sheet / Payment" #231:1877 and
     "Bottom Sheet / KYC" #231:1743; light twins #272:2722 / #272:2532.
     The four --payopt surface tokens alias the tariff-card ones because the
     .fig draws both with the same fill, hairline and shadow. */
  --sheet-fill: rgb(14, 17, 19);
  --sheet-grip: var(--neutral-600);
  --payopt-fill: var(--choicex-fill);
  --payopt-ring: var(--choicex-ring);
  --payopt-ring-active: var(--choicex-ring-active);
  --payopt-shadow: var(--choicex-shadow);
  --payopt-tile-fill: rgba(255, 255, 255, .06);
  --payopt-tile-ring: inset 0 0 0 1px rgba(255, 255, 255, .12);
  --payopt-radio-ring: var(--neutral-600);
  --kyc-icon-tile: var(--accent-a12);
  --kyc-facts-fill: var(--neutral-850);
  --kyc-facts-ring: inset 0 0 0 1px var(--neutral-700);
  --kyc-facts-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  --kyc-fact-surface: var(--neutral-800);
  --kyc-fact-icon: var(--accent);
  --kyc-fact-icon-inv: var(--neutral-950);
  --kyc-nextstep-fg: var(--color-text-secondary);
  --kyc-later-fill: rgb(32, 32, 32);

  --t-state: 120ms ease;
}

/* Light mode. The 27 semantic overrides are verbatim from tokens/fig-tokens.css;
   the four below the rule are the app-local tokens that have to flip with it.
   The accent never changes — only the neutrals and --color-text-brand do. */
:root[data-theme="light"], .light {
  --color-accent-travel: var(--blue-500);
  --color-action-disabled: var(--neutral-200);
  --color-bg-base: var(--neutral-50);
  --color-bg-subtle: var(--neutral-25);
  --color-border-default: var(--neutral-200);
  --color-border-strong: var(--neutral-400);
  --color-icon-nav-active: var(--neutral-950);
  --color-icon-primary: var(--neutral-950);
  --color-surface-default: var(--neutral-25);
  --color-surface-elevated: var(--neutral-50);
  --color-surface-nav-active: var(--neutral-150);
  --color-text-brand: var(--accent-700);
  --color-text-inverse: var(--neutral-0);
  --color-text-primary: var(--neutral-950);
  --color-text-secondary: var(--neutral-600);
  --color-text-tertiary: var(--neutral-500);
  --color-action-primary-pressed: var(--accent);
  --color-border-brand: var(--accent);
  --color-icon-brand: var(--accent);
  --color-icon-secondary: var(--neutral-500);
  --color-overlay: var(--black-a64);
  --color-state-error: var(--red-500);
  --color-state-success: var(--accent);
  --color-state-warning: var(--amber-500);
  --color-surface-selected: var(--accent-a12);
  --color-text-on-brand: var(--accent-contrast);

  /* The .fig gives the card face its 0 18 34 black drop shadow only in the
     dark frames (#231:1515). The light frames (#261:41) carry no drop shadow
     at all, so the face sits flat on the near-white base. */
  --shadow-card: none;

  /* App-local: the white washes and dividers have to invert on a light base. */
  --divider: rgba(0, 0, 0, .08);
  --glass-wash: linear-gradient(90deg, rgba(0, 0, 0, .022) 0%, rgba(0, 0, 0, .005) 100%);
  --glass-wash-faint: linear-gradient(90deg, rgba(0, 0, 0, .006) 0%, rgba(0, 0, 0, .0015) 100%);
  --choice-badge-icon: rgba(23, 28, 33, 0.88);
  --choice-badge-icon-travel: rgba(40, 48, 56, 0.78);

  /* Card-selection screen, light values from the same .fig frame. */
  --choicex-fill: var(--neutral-25);
  --choicex-wash: none;
  --choicex-wash-active: none;
  --choicex-ring: inset 0 0 0 1px var(--color-border-default);
  --choicex-ring-active: inset 0 0 0 1px var(--color-border-strong);
  --choicex-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  --choicex-badge-fill: rgb(245, 247, 248);
  --choicex-badge-ring: inset 0 0 0 1px rgb(224, 224, 224);
  --benefits-fill: rgb(250, 250, 250);
  --benefits-wash: none;
  --benefits-ring: inset 0 0 0 1px rgb(213, 219, 224);
  --benefits-divider: rgb(213, 219, 224);
  --benefit-icon: rgb(8, 11, 14);

  /* Bottom sheets, light values from #272:2722 / #272:2532. The grip keeps its
     rgb(82,90,101) in both themes, and the light facts box trades its ring for
     a drop shadow. The KYC shield tile inverts: a near-black tile on white. */
  --sheet-fill: var(--neutral-25);
  --payopt-tile-fill: var(--neutral-25);
  --payopt-tile-ring: inset 0 0 0 1px var(--neutral-200);
  --payopt-radio-ring: var(--neutral-400);
  --kyc-icon-tile: var(--neutral-950);
  --kyc-facts-fill: rgb(254, 255, 255);
  --kyc-facts-ring: 0 0 0 0 rgba(0, 0, 0, 0);
  --kyc-facts-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  --kyc-fact-surface: var(--neutral-25);
  --kyc-fact-icon: var(--neutral-950);
  --kyc-fact-icon-inv: var(--neutral-25);
  --kyc-nextstep-fg: var(--color-text-primary);
  --kyc-later-fill: var(--neutral-50);
}

/* ===========================================================================
   BASE
   =========================================================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; background: var(--color-bg-base); }
/* The viewport's live height, the same box the fixed tab bar sits in. Body
   percentages resolve against it on every layout, with no script involved. */
html { height: 100%; }

body {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: var(--type-body-weight);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  /* A percentage is not multiplied by zoom, so 100% is the screen height in
     every engine. --app-h was used here until 2026-10-22: on an iPhone 17 it
     kept Telegram's pre-fullscreen 742px of an 874px screen, and the support
     composer floated 132px above the tab bar. */
  min-height: 100%;
  /* Column so <main> can grow to the bottom padding and a screen that wants
     the whole height (support chat) can take it without viewport arithmetic. */
  display: flex;
  flex-direction: column;
  overscroll-behavior-y: none;
  /* Magnify the 360-frame layout to the screen width (index.html sets the
     factor). zoom multiplies every px length, so a size that must come out in
     screen px is divided back by the factor wherever it appears below. Viewport
     units are not used under zoom: Chromium multiplies them too, iOS WebKit
     does not, so 100dvh / zoom left about 90px empty above the tab bar on an
     iPhone 17 (2026-10-13). Widths come in px as --app-w, heights from html. */
  zoom: var(--ui-scale, 1);
}
body.has-tabbar { padding-bottom: calc(88px + var(--inset-bottom) / var(--ui-scale, 1)); }
body.admin-screen { padding-bottom: calc(var(--inset-bottom) / var(--ui-scale, 1)); }

.hidden, [hidden] { display: none !important; }

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}
input, textarea {
  font-family: var(--font-data);
  letter-spacing: normal;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--color-text-tertiary); }

a { color: var(--color-text-brand); text-decoration: none; }

/* Card numbers, addresses, requisites: Inter with tabular figures. */
.mono {
  font-family: var(--font-data);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar { width: 0; height: 0; }

/* ---- Section reveal ------------------------------------------------------ */
.reveal { animation: rise .3s ease both; animation-delay: calc(var(--d, 0) * 50ms); }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; } to { opacity: 1; } }

/* ===========================================================================
   TOP BAR
   =========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--space-12) + var(--inset-top) / var(--ui-scale, 1)) var(--space-20) var(--space-8);
}
/* Telegram fullscreen: its content safe area already leaves about 8px under
   the Close / menu buttons, so the header adds only 4 (admin, 2026-10-06). */
html.tg-fullscreen .topbar { padding-top: calc(var(--space-4) + var(--inset-top) / var(--ui-scale, 1)); }
.brand { display: flex; align-items: center; gap: var(--space-8); }
/* logo-on-dark.png is a 60x40 source; the designer asked (2026-09-09) for the
   lockup to stand as tall as the 44px header pills, so it scales to 66x44. */
.brand-logo { width: auto; height: var(--touch-min); display: block; object-fit: contain; }

.hd-cluster { display: flex; align-items: center; gap: var(--space-8); }

/* Every pill in the cluster is 44 high, radius 999, surface + hairline —
   PrefHeader.jsx. Language 69, theme 76. */
.hd-lang, .hd-theme {
  height: var(--touch-min);
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  transition: background-color var(--t-state), box-shadow var(--t-state);
}
.hd-theme {
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
}
/* Language pill (69x44): globe 16 + gap 4 + RU/EN + gap 4 + chevron 12, with the
   globe frame starting at x=8. The .fig, frame "Main / Subscriptions". */
.hd-lang { width: 69px; padding: 0 var(--space-8); }
:root[data-language-count="1"] #lang-pill { display: none !important; }
.hd-lang:not(:empty) { background: var(--color-surface-default); box-shadow: var(--hairline); }
.hd-lang { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hd-lang:active { background: var(--accent-tint); }
.hd-lang .hl-globe,
.hd-lang .hl-chev { display: block; flex: 0 0 auto; }
.hd-lang .hl-globe { width: 16px; height: 16px; color: var(--color-text-primary); opacity: .88; }
.hd-lang .hl-chev { width: 12px; height: 12px; color: var(--toggle-icon-idle); }
.hd-lang .hl-code {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--color-text-primary);
}

.hd-theme { width: 76px; padding: 0 var(--space-4); }
.hd-theme-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--toggle-icon-idle);
  background: transparent;
  transition: background-color var(--t-state), color var(--t-state);
}
.hd-theme-btn.active {
  background: var(--accent);
  color: var(--neutral-950);
}
/* The ray caps and the moon's outer curve sit outside their viewBoxes. */
.hd-theme-btn svg { overflow: visible; }
.hd-sun { position: relative; display: block; width: 18px; height: 18px; }
.hd-sun .sun-rays { position: absolute; left: 1.75px; top: 1.75px; width: 14.5px; height: 14.5px; display: block; }
.hd-sun .sun-core { position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; display: block; }


/* Pay dashboard notices sit above the card on both home screens. The level
   tints the surface and colours the icon, hairline, bullets and link
   underlines; text keeps the normal text colours, which stay readable in the
   light theme where amber or red type would not. */
.dashboard-banners {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.dashboard-banner {
  --banner-tone: var(--blue-400);
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius-md);
  background: var(--color-surface-default);
  background: color-mix(in srgb, var(--banner-tone) 9%, var(--color-surface-default));
  box-shadow: var(--hairline);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--banner-tone) 36%, transparent);
  color: var(--color-text-primary);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
}
.dashboard-banner.is-new { animation: rise .3s ease both; }
.dashboard-banner[data-level="warning"] { --banner-tone: var(--color-state-warning); }
.dashboard-banner[data-level="error"] { --banner-tone: var(--color-state-error); }
:root[data-theme="light"] .dashboard-banner[data-level="info"] { --banner-tone: var(--blue-500); }
/* Amber and red icons on their own pale tint fall under 3:1 in the light
   theme; the marks take a darker shade of the level colour there. */
.dashboard-banner { --banner-ink: var(--banner-tone); }
:root[data-theme="light"] .dashboard-banner { --banner-ink: color-mix(in srgb, var(--banner-tone) 72%, var(--neutral-950)); }
.dashboard-banner-icon, .dashboard-banner-close, .dashboard-banner-chevron {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-banner-icon { width: 20px; height: 20px; color: var(--banner-ink); }
.dashboard-banner-body { flex: 1; min-width: 0; }
.dashboard-banner-title {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
  margin-bottom: var(--space-4);
}
.dashboard-banner-message { overflow-wrap: anywhere; }
.dashboard-banner-title + .dashboard-banner-message { color: var(--color-text-secondary); }
.dashboard-banner-message > * { margin: 0; }
.dashboard-banner-message > * + * { margin-top: var(--space-8); }
.dashboard-banner-message ul { padding-left: 18px; list-style: disc; }
.dashboard-banner-message li + li { margin-top: 2px; }
.dashboard-banner-message li::marker { color: var(--banner-ink); }
.dashboard-banner-message strong { font-weight: 700; color: var(--color-text-primary); }
.dashboard-banner-message em { font-style: italic; }
.dashboard-banner-message del { text-decoration: line-through; }
.dashboard-banner-message a {
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--banner-ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
/* Long notices: four lines, the fourth fading out, until "Show more". */
.dashboard-banner.is-long:not(.is-open) .dashboard-banner-message {
  max-height: calc(var(--type-body-lh) * 4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--type-body-lh)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--type-body-lh)), transparent);
}
.dashboard-banner-more {
  display: none;
  align-items: center;
  gap: var(--space-4);
  min-height: 36px;
  margin: -2px 0 -12px;
  font-size: var(--type-caption-size);
  font-weight: 600;
  line-height: var(--type-caption-lh);
  color: var(--color-text-primary);
}
.dashboard-banner.is-long .dashboard-banner-more { display: inline-flex; }
.dashboard-banner-chevron { width: 12px; height: 12px; stroke-width: 1.4; transition: transform var(--t-state); }
.dashboard-banner.is-open .dashboard-banner-chevron { transform: rotate(180deg); }
.dashboard-banner-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--touch-min);
  height: var(--touch-min);
  margin: -12px -14px -12px -8px;
  border-radius: var(--radius-pill);
  color: var(--color-icon-secondary);
}
.dashboard-banner-close { width: 18px; height: 18px; stroke-width: 1.7; }
.dashboard-banner-dismiss:active { color: var(--color-text-primary); }
.dashboard-banner-more:focus-visible, .dashboard-banner-message a:focus-visible {
  outline: 2px solid var(--banner-tone);
  outline-offset: 2px;
  border-radius: 6px;
}
.dashboard-banner-dismiss:focus-visible { outline: 2px solid var(--banner-tone); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) {
  .dashboard-banner.is-new { animation: none; }
  .dashboard-banner-chevron { transition: none; }
}

/* ---- Maintenance banner --------------------------------------------------- */
.mnt-banner {
  margin: 0 var(--space-20) var(--space-12);
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius-md);
  background: var(--color-surface-default);
  box-shadow: inset 0 0 0 1px var(--color-state-warning);
  color: var(--color-state-warning);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
}

/* ===========================================================================
   SECTIONS AND HEADINGS
   =========================================================================== */
/* The refraction glow bleeds past the right edge of the content column, the way
   it does inside the 360-wide frame; clip it rather than growing the page. */
/* min-height 0: a flex item otherwise refuses to shrink below its content, and
   a long support thread would push the composer under the tab bar instead of
   scrolling inside the list. */
main { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-x: clip; }
/* 20px screen margins, per the design system's layout rules. */
main > section { padding: 2px var(--space-20) var(--space-16); }
/* Body already reserves the fixed navigation and an 8px gap above it. */
body.has-tabbar main > section { padding-bottom: 0; }

/* Screen headline — Onest Medium 27/1, -5%. */
.h-page {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh);
  letter-spacing: var(--tracking-tight);
  padding: var(--space-4) 2px var(--space-12);
}
.h-flow {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh);
  letter-spacing: var(--tracking-tight);
  padding: var(--space-4) 2px var(--space-8);
}
.sub-flow {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
  padding: 0 2px var(--space-12);
}

/* Back header on overlay screens (referrals, history, KYC). */
.flow-head { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-4) 0 var(--space-8); }
.flow-back {
  width: var(--touch-min); height: var(--touch-min);
  border-radius: var(--radius-pill);
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--t-state), box-shadow var(--t-state);
}
.flow-back:active { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.flow-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  text-align: center;
  padding-right: var(--touch-min);
}

.sec-label {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-secondary);
  margin: var(--space-16) 2px var(--space-8);
}

.note {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
}
.note.center { text-align: center; }

/* ===========================================================================
   SURFACES
   =========================================================================== */
.panel {
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-14) var(--space-16);
}
.panel2 {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-sm);
}

/* ===========================================================================
   BUTTONS
   Every button is round: text buttons are pills, icon-only buttons are
   circles (owner, 2026-09-29). Primary: flat accent, near-black label, 52px,
   Manrope SemiBold. Press is a state change, never a transform.
   =========================================================================== */
.primary {
  width: 100%;
  height: var(--control-h);
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
  color: var(--color-text-on-brand);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 0 var(--space-20);
  transition: background-color var(--t-state), box-shadow var(--t-state), color var(--t-state);
}
.primary:active { background: var(--color-action-primary-pressed); }
.primary:disabled {
  background: var(--color-action-disabled);
  color: var(--color-text-secondary);
  cursor: default;
}

/* Secondary — surface fill + strong hairline; pressed goes to the 12% accent tint. */
.primary.ghosted {
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  box-shadow: var(--hairline-strong);
}
.primary.ghosted:active {
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--color-border-brand);
  color: var(--color-text-brand);
}
.primary.ghosted:disabled {
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  color: var(--color-text-tertiary);
}

.primary.danger {
  background: var(--color-surface-default);
  box-shadow: inset 0 0 0 1px var(--color-state-error);
  color: var(--color-state-error);
}
.primary.danger:active { background: rgba(255, 100, 119, .12); }

/* The 320x50 variant with the display face, Onest SemiBold 16/20 at -5%
   tracking: issuance, payment-method and KYC sheets. */
.primary.btn-rounded {
  height: 50px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: var(--tracking-tight);
}

/* Button.jsx variant="ghost" — flat on the page background, no hairline. */
.primary.ghost-plain {
  background: var(--color-bg-base);
  color: var(--color-text-secondary);
  box-shadow: none;
}
.primary.ghost-plain:active { background: var(--accent-tint); color: var(--color-text-brand); }

/* Icons that used to carry a hard-coded hex now inherit a token colour. */
.reqs-toggle .rt-ico, .info-row .ir-ico, .doc-item .di-ico, .kyc-slot .ks-ico,
.kyc-slot .ks-chip, .pay-note > svg { color: var(--color-text-brand); }
.balance-head svg, .reqs-chev, .txrow-t svg, .pf-id-chip svg, .doc-item > svg,
.info-row > svg, .hist-empty .he-ico, .asset-pick > svg, #pf-verify-chev,
.tx-list-chev { color: var(--color-icon-secondary); }
.flow-back { color: var(--color-text-secondary); }
.swap-flip, .chat-send, .primary, .is-plus, .done-ico, .kyc-slot .ks-done-ico,
.tx-ico.plus { color: var(--color-text-on-brand); }

/* ===========================================================================
   CARD FACE
   Designer export "Card Product / Type=Universal" (2026-09-17), 320x202,
   radius 16. One face for every tariff. The gradient is the designer's own
   pixels: card-face.webp is the card cut out of the 2x screen export with
   the VISA mark, wordmark, caption and wallet marks painted out (the
   recipe: vertical interpolation across each text box, then a 3px blur on
   the patches only). Earlier CSS radial-gradient approximations drifted
   to olive on phones, so the raster stays. Overlays are the app's own:
   VISA mark 63x20 at (237,20); wordmark 87x9 and the caption bottom-left
   at 20/20; Apple and Google marks bottom-right; issued cards add the last
   four digits and the status top-left. The card face is the only element
   in the app allowed a drop shadow.
   =========================================================================== */
.hero-card {
  position: relative;
  aspect-ratio: 320 / 202;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  /* --card-face-image: the content-hash URL from brand.js (index.html). */
  background: var(--card-face-base) var(--card-face-image, url("/brand/card-face.webp")) center / 100% 100% no-repeat;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, .25), var(--shadow-card);
  color: rgb(246, 247, 248);
}
/* A card that is not usable yet: the face darkens under a scrim, and only
   the last four digits and the status pill stay bright above it. */
.hero-card.dimmed::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background: rgba(8, 11, 14, .5);
  pointer-events: none;
}
.cf-visa { position: absolute; right: 20px; top: 20px; width: 63px; height: 20px; z-index: 2; display: block; color: rgb(16, 16, 16); }
/* Bottom-left: wordmark over the caption, 6 between them. */
.cf-foot {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  max-width: 200px;
}
.cf-brand { display: block; width: 87px; height: 9px; overflow: visible; flex-shrink: 0; }
.cf-type {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  line-height: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(246, 247, 248);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Wallet marks bottom-right, centred on the wordmark + caption block. */
.cf-wallets {
  position: absolute; right: 24px; bottom: 22px; height: 24px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
}
.cf-wallets[hidden] { display: none; }
.cf-wallets svg { display: block; }
.cf-apple { width: 16px; height: 19px; color: rgb(8, 11, 14); }
.cf-google { width: 18px; height: 18px; }
/* Issued cards: last four digits and the status pill, top-left. */
.cf-top {
  position: absolute; left: 20px; top: 20px; right: 96px; z-index: 4;
  display: flex; align-items: center; gap: var(--space-8);
  min-width: 0;
}
.cf-pan {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: .05em;
  color: rgba(246, 247, 248, .8);
  white-space: nowrap;
}
.cf-state {
  min-width: 0;
  height: 24px;
  padding: 0 var(--space-10);
  border-radius: var(--radius-pill);
  background: rgba(8, 11, 14, .8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-caption-size);
  line-height: 24px;
  letter-spacing: 0;
  color: rgb(246, 247, 248);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Card flip (brand feature "card_flip") ---------------------------------
   An active card turns over on a tap: the front is the usual face with a
   "details" hint, the back a darkened face with a stripe, the number, expiry
   and CVV (each copies on a tap) and the card menu button. */
.card-flip { position: relative; perspective: 1400px; cursor: pointer; outline: none; }
.card-flip:focus-visible .cf-inner { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 16px; }
.card-flip .cf-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .75, .25, 1);
}
.card-flip.flipped .cf-inner { transform: rotateY(180deg); }
.card-flip .hero-card { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.card-flip .cf-back { position: absolute; inset: 0; transform: rotateY(180deg); }
/* WebKit can paint the faces flat, back over front, ignoring the hidden
   backfaces. Visibility switches when the card is edge-on (90° comes at
   87 ms on this easing curve), so in every engine only the face in front
   paints or takes taps. */
.card-flip .hero-card { transition: visibility 0s .087s; }
.card-flip .cf-back, .card-flip.flipped .cf-front { visibility: hidden; }
.card-flip.flipped .cf-back { visibility: visible; }
.card-flip.loading .cf-front { animation: cf-wait .8s ease-in-out infinite alternate; }
@keyframes cf-wait { to { filter: brightness(.8); } }
@media (prefers-reduced-motion: reduce) {
  .card-flip .cf-inner, .card-flip .hero-card { transition: none; }
  .card-flip.loading .cf-front { animation: none; }
}
.cf-flip-hint {
  position: absolute; left: 20px; top: 48px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff;
  font: 700 10px/1 var(--font-ui); letter-spacing: .02em;
}
.cf-back::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(8, 11, 14, .35), rgba(8, 11, 14, .6));
}
.cb-stripe { position: absolute; left: 0; right: 0; top: 20px; height: 34px; z-index: 1; background: rgba(8, 11, 14, .82); }
.cb-body {
  position: absolute; left: 20px; right: 70px; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  color: #fff;
}
.cb-pan, .cb-field { color: inherit; cursor: copy; border-radius: 8px; }
.cb-pan { display: inline-flex; align-items: center; gap: 8px; }
.cb-pan .cb-v { font-size: 19px; line-height: 24px; letter-spacing: .06em; font-weight: 600; white-space: nowrap; }
.cb-pan svg { opacity: .7; flex-shrink: 0; }
.cb-row { display: flex; gap: 26px; }
.cb-field { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cb-k { font: 600 9px/10px var(--font-display); letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.cb-field .cb-v { font-size: 16px; line-height: 20px; letter-spacing: .06em; font-weight: 600; }
.cb-pan:active, .cb-field:active { background: rgba(255, 255, 255, .14); }
.cb-menu {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); color: #fff;
}
.cb-menu:active { background: rgba(255, 255, 255, .3); }

/* ===========================================================================
   CARD CAROUSEL
   =========================================================================== */
.card-stage { position: relative; }
.card-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--space-12);
  scrollbar-width: none;
}
.card-slide { flex: 0 0 100%; scroll-snap-align: center; }
.dots { display: flex; justify-content: center; gap: 6px; padding: var(--space-12) 0 0; }
.dot {
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  transition: background-color var(--t-state), width var(--t-state);
  cursor: pointer;
}
.dot.on { background: var(--accent); width: 18px; }

/* ===========================================================================
   BALANCE
   =========================================================================== */
.balance-panel { margin-top: var(--space-14); padding: var(--space-16); }
.balance-head { display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.balance-head .bh-k {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
}
.balance-head .bh-pan {
  font-family: var(--font-data);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-caption-size);
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.balance-value {
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
  margin-top: var(--space-8);
}
.balance-value .cents { font-size: 20px; color: var(--color-text-secondary); }
.balance-note {
  font-size: var(--type-caption-size);
  line-height: 16px;
  color: var(--color-text-tertiary);
  margin-top: 6px;
}
.balance-note.warn { color: var(--color-state-warning); }
.balance-panel > .primary { margin-top: var(--space-16); }

/* ---- Card notice ----------------------------------------------------------
   Leads the balance panel while the card is not usable: waiting for its
   activation top-up (.attn: solid accent icon, accent ring on the panel, the
   top-up button right under it), being issued or being activated (clock,
   no button). Also the "card is being issued" panel on the issue screen. */
.balance-panel.attn { box-shadow: var(--ring-brand); }
.card-notice { display: flex; align-items: flex-start; gap: var(--space-12); }
.card-notice.restricted { margin-bottom: var(--space-16); }
.card-notice .cn-ico {
  width: 40px; height: 40px; border-radius: var(--radius-pill); flex-shrink: 0;
  background: var(--accent-tint);
  color: var(--color-text-brand);
  display: flex; align-items: center; justify-content: center;
}
.card-notice.attn .cn-ico { background: var(--color-action-primary); color: var(--color-text-on-brand); }
.card-notice .cn-text { flex: 1; min-width: 0; padding-top: 1px; }
.card-notice .cn-t {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.card-notice .cn-s {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
  margin-top: 6px;
}
.issuing-panel { margin-top: var(--space-14); }

/* ---- Payment being confirmed ----------------------------------------------
   Above the home screens while Pay confirms a payment the customer has
   already made: the card notice, as a button that opens the payment. Placed
   like the maintenance banner, between the header and the screen. */
.pay-strip {
  margin: 0 var(--space-20) var(--space-12);
  width: calc(100% - 2 * var(--space-20));
  align-items: center;
}
.pay-strip .cn-t, .pay-strip .cn-s { display: block; }
.pay-strip .ps-chev { flex-shrink: 0; color: var(--color-icon-secondary); }

/* ---- Card requisites (accordion) ------------------------------------------ */
.reqs {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-14);
  margin-top: var(--space-14);
}
.reqs-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-14) 0;
  min-height: var(--row-h);
  cursor: pointer; width: 100%;
}
.reqs-toggle .rt-l { display: flex; align-items: center; gap: var(--space-12); }
.reqs-toggle .rt-ico {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.reqs-toggle .rt-t {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.reqs-chev { transition: transform var(--t-state); }
.reqs.open .reqs-chev { transform: rotate(180deg); }
.reqs-body { padding: 0 0 var(--space-14); }
.otp-panel { border-top: 1px solid var(--color-border-default); padding-top: var(--space-16); margin-top: var(--space-8); }
.otp-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.otp-heading h3 { margin: 0; font: 600 var(--type-row-size)/1.4 var(--font-display); color: var(--color-text-primary); }
.otp-refresh, .otp-copy { min-height: 44px; padding: var(--space-8) var(--space-12); color: var(--color-text-brand); cursor: pointer; border-radius: var(--radius-pill); }
.otp-refresh:disabled { opacity: .45; cursor: default; }
.otp-note, .otp-status, .otp-row time { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--color-text-secondary); }
.otp-note { margin: 0 0 var(--space-12); }
.otp-status { margin: var(--space-8) 0 0; }
.otp-status:empty { display: none; }
.otp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12); margin-top: var(--space-8); background: var(--color-surface-default); border-radius: var(--radius-sm); box-shadow: var(--hairline); }
.otp-row > div { min-width: 0; }
.otp-value { display: block; font: 600 22px/1.3 var(--font-data); letter-spacing: .08em; overflow-wrap: anywhere; }
.otp-row time { display: block; margin-top: 4px; }
.otp-copy { flex-shrink: 0; }
.req-field {
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-14);
}
.req-field .rf-k {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.req-field .rf-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); margin-top: 6px; }
.req-field .rf-v {
  font-family: var(--font-data);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-row-size);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}
/* Icon-only: the word "Копировать" next to a 19-digit PAN does not fit the
   field on a 320 column (designer's screenshot, 2026-09-09). */
.req-field .rf-copy {
  flex-shrink: 0;
  width: 32px; height: 32px;
  margin: -6px -6px -6px 0;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-brand);
  cursor: pointer;
  transition: background-color var(--t-state);
}
.req-field .rf-copy:active { background: var(--accent-tint); }
.req-field .rf-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.req-cols { display: flex; gap: var(--space-10); margin-top: var(--space-10); }
.req-cols .req-field { flex: 1; }
.reqs-billing { display: grid; gap: var(--space-10); margin-top: var(--space-14); }
.reqs-billing-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-body-size);
  font-weight: 600;
  line-height: var(--type-body-lh);
  color: var(--color-text-primary);
}
.reqs-billing .rf-v {
  font-family: var(--font-display);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
.reqs-note {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-tertiary);
  margin-top: var(--space-10);
}
.reqs-spin { padding: var(--space-16) 0; display: flex; justify-content: center; }

/* ---- Transaction summary row ---------------------------------------------- */
.home-sheet { margin-top: var(--space-14); padding: var(--space-16); }
.txrow {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-sm);
  padding: var(--space-16);
  cursor: pointer; width: 100%; display: block;
  transition: background-color var(--t-state);
}
.txrow:active { background: var(--accent-tint); }
/* Title and the month's spend share one line only when both fit; on the 320
   column they never do, so the caption drops to its own line under the title. */
.txrow-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.txrow-t {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.txrow-spent {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.txrow-spent b { color: var(--color-text-primary); font-weight: 600; }
.txrow-bar { height: 4px; border-radius: 2px; background: var(--color-border-default); margin-top: var(--space-14); overflow: hidden; }
.txrow-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width .3s ease; }

/* ===========================================================================
   TRANSACTION LIST
   =========================================================================== */
.tx {
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--row-h);
  animation: rise .3s ease both;
}
.tx-ico {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-row-size);
  font-weight: 700;
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
}
.tx-ico.plus { background: var(--color-action-primary); color: var(--color-text-on-brand); }
.tx-ico.declined { background: rgba(255, 100, 119, .12); color: var(--color-state-error); }
.tx-declined { color: var(--color-state-error); }
.tx-pending { color: var(--color-state-warning); }
.tx-main { flex: 1; min-width: 0; }
.tx-title {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tx-date {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-tertiary);
  margin-top: var(--space-4);
}
.tx-amt {
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-amount-size);
  font-weight: var(--type-amount-weight);
  line-height: var(--type-amount-lh);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.tx-amt.plus { color: var(--color-text-brand); }
.tx-empty {
  text-align: center;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
  padding: var(--space-24) var(--space-16);
}
.ex-cancel { color: var(--color-state-error); cursor: pointer; font-weight: 600; }

.hist-empty { display: flex; flex-direction: column; align-items: center; padding: 64px var(--space-32); }
.hist-empty .hist-retry { margin-top: var(--space-16); align-self: stretch; }
.hist-empty .he-ico {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  display: flex; align-items: center; justify-content: center;
}
.hist-empty .he-t {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-top: var(--space-16);
}
.hist-empty .he-s {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
  margin-top: 6px; text-align: center;
}

/* ===========================================================================
   CARD ISSUANCE — designer export "Screen / Subscriptions / Dark" (2026-09-17)
   Content column 320 wide: card face 320x202 -> use-case panel 320x234 with
   the CTA inside, 12 below the card.
   With several tariffs the 2026-09-08 chooser block (20 above, 12 under the
   heading, 10 between tariffs) follows the panel and the CTA follows it.
   =========================================================================== */
.issue-stage { position: relative; }
/* Soft refraction glow behind the card face — 180x110 at 236/155 on the 360
   frame, i.e. 67.5%/71px against the 320-wide column. One glow per screen. */
.issue-glow {
  position: absolute;
  left: 67.5%; top: 71px;
  width: 56.25%; height: 110px;
  border-radius: 50%;
  background: radial-gradient(180px 110px at 50% 50%, rgba(224, 235, 229, .15) 0%, rgba(51, 61, 59, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.issue-stage .hero-card { position: relative; z-index: 1; }

.choice-block {
  display: flex; flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20) 0 0;
}
/* "Выберите карту" — Onest SemiBold 18/22 at -5%. The 16/20 row token that used
   to sit here came from the JSX mirror and is wrong. */
.choice-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.plan-pick { display: flex; flex-direction: column; gap: var(--space-10); }

/* ---- Use-case panel — designer export (2026-09-17) -------------------------
   Panel: 12 under the card, radius 12, the choice-card surface and ring,
   padding 16.
   Row: the 36px choice-card badge, the text column 24 to its right, name
   Onest SemiBold 16/20 at -5%, description Onest Medium 13/16 at -5% in the
   secondary ink, 4 between them. A 1px divider from the text column to the
   panel's right edge, 10 above and 12 below. CTA 288x50, 16 above. The two
   rows move in from the left as one block, badges in one column, by a
   quarter of the free width: midway between flush left, which looked off to
   the left, and the geometric centre, which looked off to the right on a
   phone (owner, 2026-10-06). The middle grid column is as wide as the wider
   row. */
.usecase-block {
  display: flex; flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12) 0 0;
}
/* With several tariffs the CTA follows the chooser: 20 above it (12 block gap
   + 8), as in the 2026-09-08 frame. */
.choice-block > .primary { margin-top: var(--space-8); height: 50px; }
.usecase-panel {
  border-radius: var(--radius-sm);
  background: var(--choicex-wash), linear-gradient(var(--choicex-fill), var(--choicex-fill));
  box-shadow: var(--choicex-ring), var(--choicex-shadow);
  padding: var(--space-16) var(--space-16) var(--space-16);
  display: grid; grid-template-columns: 1fr auto 3fr;
  overflow: hidden;
}
.usecase-panel > * { grid-column: 1 / -1; }
.usecase { display: flex; align-items: flex-start; gap: var(--space-24); }
.usecase-panel > .usecase { grid-column: 2; }
.usecase-panel > .usecase-div { grid-column: 2 / -1; }
.usecase-text {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-top: 0;
}
.usecase-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-row-size);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.usecase-desc {
  white-space: pre-line;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-secondary);
}
.usecase-div {
  height: 1px;
  margin: var(--space-10) calc(-1 * var(--space-16)) var(--space-12) 60px;
  background: var(--color-border-default);
}
.usecase-panel .primary { margin-top: var(--space-16); height: 50px; }

/* ---- Choice card — the .fig, frame "Main / Subscriptions" (2026-09-08) --
   320x104, radius 12, padding 10/16, a 36px header row and the description 20
   below it. Both tariffs share one base: no accent glow, no per-tariff surface. */
.choicex {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* No fixed height: 10 + 36 + 20 + description + 10. Two caption lines make
     the .fig's 104; a one-line description keeps the same 10px below it. */
  border-radius: var(--radius-sm);
  background: var(--choicex-wash), linear-gradient(var(--choicex-fill), var(--choicex-fill));
  box-shadow: var(--choicex-ring), var(--choicex-shadow);
  display: flex; flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-10) var(--space-16);
  align-items: flex-start;
  transition: box-shadow var(--t-state);
}
/* Selection is a hairline swap only — no accent tint, no accent ring. The single
   accent element on a selected card is the indicator. */
.choicex.active {
  background: var(--choicex-wash-active), linear-gradient(var(--choicex-fill), var(--choicex-fill));
  box-shadow: var(--choicex-ring-active), var(--choicex-shadow);
}
/* The ring-and-medallion decoration that used to sit behind the subscriptions
   tariff is a hidden layer in the .fig (#286:365 / #286:369 visible=false) and
   is not rendered. */

.choicex-row { height: 36px; align-self: stretch; display: flex; gap: var(--space-10); align-items: center; }
.choicex-badge {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--choicex-badge-fill);
  box-shadow: var(--choicex-badge-ring);
  color: var(--choice-badge-icon);
  display: flex; align-items: center; justify-content: center;
}
.choicex.travel .choicex-badge { color: var(--choice-badge-icon-travel); }
.choicex-name {
  flex-grow: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-row-size);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.choicex-right { display: flex; gap: var(--space-16); align-items: center; align-self: stretch; flex-shrink: 0; }
/* The price is set exactly like the title: Onest SemiBold 16/20 at -5%. */
.choicex-price {
  white-space: nowrap;
  font-family: var(--font-display);
  /* Proportional figures: tabular "1" opened a visible gap in "$10". */
  font-size: var(--type-row-size);
  font-weight: 600;
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.choicex-radio {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: transparent;
  box-shadow: inset 0 0 0 1px var(--radio-ring-idle);
  transition: background-color var(--t-state), box-shadow var(--t-state), color var(--t-state);
}
.choicex.active .choicex-radio {
  background: var(--color-action-primary);
  box-shadow: inset 0 0 0 1px var(--radio-ring-brand);
  color: var(--color-text-on-brand);
}
/* In Russian the description width is fixed per tariff so the copy breaks
   onto two lines exactly where the .fig breaks it: 242 for subscriptions, 215
   for travel. The English copy is shorter and wraps naturally in the 288px
   row ("Spending abroad with Apple Pay / Google Pay" fits on one line). */
.choicex-desc {
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--type-caption-weight);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-secondary);
}
html[lang="ru"] .choicex-desc { max-width: 242px; }
html[lang="ru"] .choicex.travel .choicex-desc { max-width: 215px; }
/* "KYC" chip on the header row of a tariff that needs verification. Sits
   inside the 36px row, so the card keeps its 104px height. */
.choicex-kyc {
  flex-shrink: 0;
  height: 20px;
  padding: 0 var(--space-8);
  margin-right: var(--space-8);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-weight: var(--type-micro-weight);
  font-size: var(--type-micro-size);
  line-height: var(--type-micro-lh);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
}

/* ===========================================================================
   HOME VIEWPORT
   Tighten the home panels while keeping the card's original size. Expanded
   details, codes, notices and multiple tariffs still grow the wallet page
   naturally; the no-card screen fits the viewport and does not move.
   =========================================================================== */
/* Seven vertical spaces give up to 6px each as fitScreen() in app.js raises
   --squeeze from 0 to 1, just far enough to end the screen 8px above the tab
   bar; it scales away whatever is still left. */
#empty { --home-trim: calc(6px * var(--squeeze, 0)); }
#empty .h-flow { padding-bottom: calc(var(--space-8) - var(--home-trim)); }
#empty .usecase-panel {
  padding-top: calc(var(--space-14) - var(--home-trim));
  padding-bottom: calc(var(--space-14) - var(--home-trim));
}
#empty .usecase-div {
  margin-top: calc(var(--space-8) - var(--home-trim));
  margin-bottom: calc(var(--space-10) - var(--home-trim));
}
#empty .usecase-panel .primary {
  margin-top: calc(var(--space-12) - var(--home-trim));
  height: calc(var(--control-h) - var(--home-trim));
  min-height: var(--touch-min);
}
#wallet .balance-panel { margin-top: var(--space-12); padding: var(--space-14); }
#wallet .reqs { margin-top: var(--space-12); }
#wallet .reqs-toggle { min-height: 56px; padding: var(--space-10) 0; }
#wallet .home-sheet { margin-top: var(--space-12); padding: var(--space-12); }
#wallet .txrow { padding: var(--space-12) var(--space-16); }
#wallet .txrow-bar { margin-top: var(--space-10); }

/* ===========================================================================
   FIXED SCREENS
   The no-card home and the profile fit the viewport and do not move (owner,
   2026-10-06). What their own spacing cannot absorb, fitScreen() in app.js
   takes off by scaling the screen about its top centre and pulling the
   following space up by the height the scale removed. Layout stays exactly
   as unscaled, so no line can wrap differently.
   =========================================================================== */
.screen-fit {
  transform: scale(var(--fit));
  transform-origin: 50% 0;
  margin-bottom: var(--fit-pull);
}
/* Fitted: nothing to scroll, and no rubber band on iOS or overscroll stretch
   on Android. overscroll-behavior on body does not reach the viewport. */
html.screen-fixed { overflow: hidden; overscroll-behavior: none; }

/* ===========================================================================
   PAYMENT SCREEN
   =========================================================================== */
.pay-center { display: flex; flex-direction: column; align-items: center; }
.pay-method { display: flex; align-items: center; gap: var(--space-10); }
.pay-method .pm-ico {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-row-size); font-weight: 700;
  color: var(--neutral-0);
  flex-shrink: 0;
}
/* The staging tile has no rail colour behind it, so it stays on the surface. */
.pay-method .pm-ico.test { background: var(--color-surface-elevated); color: var(--color-text-primary); }
.pay-method .pm-t {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.pay-amount {
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-display-size);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
  margin-top: var(--space-12);
}
.pay-amount-sub {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-tertiary);
  margin-top: 6px;
}
.pay-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-pill);
  margin-top: var(--space-14);
}
.pay-status.wait { background: var(--color-surface-default); box-shadow: inset 0 0 0 1px var(--color-state-warning); color: var(--color-state-warning); }
.pay-status.ok { background: var(--accent-tint); color: var(--color-text-brand); }
.pay-status.bad { background: var(--color-surface-default); box-shadow: inset 0 0 0 1px var(--color-state-error); color: var(--color-state-error); }

.qr-box { background: var(--neutral-0); border-radius: var(--radius-md); padding: var(--space-14); margin-top: var(--space-16); }
.qr-box svg { display: block; width: 190px; height: 190px; }

.pay-field {
  width: 100%;
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-14) var(--space-16);
  margin-top: var(--space-16);
}
.pay-field .pf-k {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.pay-field .pf-row { display: flex; align-items: center; gap: var(--space-10); margin-top: var(--space-8); }
.pay-field .pf-v {
  flex: 1; min-width: 0;
  font-family: var(--font-data);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-body-size);
  font-weight: 600;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}
.pay-field .pf-v.big { font-size: var(--type-title-size); }
.pay-field .pf-copy {
  background: var(--accent-tint);
  color: var(--color-text-brand);
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-pill);
  cursor: pointer; flex-shrink: 0;
  transition: background-color var(--t-state);
}
.pay-field .pf-copy:active { background: var(--accent-a22); }

.pay-note {
  display: flex; align-items: flex-start; gap: var(--space-10);
  width: 100%;
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-14);
  margin-top: var(--space-14);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.pay-note svg { flex-shrink: 0; margin-top: 1px; }
.pay-note b { color: var(--color-text-primary); font-weight: 600; }
.pay-count {
  text-align: center;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-tertiary);
  margin-top: var(--space-14); width: 100%;
}
.pay-actions { width: 100%; display: flex; flex-direction: column; gap: var(--space-10); margin-top: var(--space-16); }
.pay-amount .cents { font-size: 20px; color: var(--color-text-secondary); }

/* ---- Automated SBP: the bank-app link and the QR ---------------------------
   Two ways to pay the same invoice, split by an "or" rule. The link button
   comes first on phones, the QR panel first on desktop Telegram. */
.pay-method .pm-ico.sbp { background: var(--color-action-primary); color: var(--color-text-on-brand); }
.pay-status + .pay-count { margin-top: var(--space-8); }
.sbp-block { width: 100%; margin-top: var(--space-16); }
.sbp-hint {
  text-align: center;
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-tertiary);
  margin-top: var(--space-8);
}
.sbp-qr {
  display: flex; flex-direction: column; align-items: center;
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-16);
}
.sbp-qr-t {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.sbp-qr .sbp-hint { margin-top: var(--space-4); }
.sbp-qr .qr-box { margin-top: var(--space-14); padding: var(--space-10); }
.sbp-qr .qr-box svg { width: 200px; height: 200px; }
.sbp-qr .primary { margin-top: var(--space-14); height: var(--nav-item-h); }
.sbp-or {
  width: 100%;
  display: flex; align-items: center; gap: var(--space-12);
  margin-top: var(--space-16);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-tertiary);
}
.sbp-or::before, .sbp-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border-default); }
.sbp-or + .sbp-block { margin-top: var(--space-16); }

/* ---- Result screen -------------------------------------------------------- */
.done-screen { display: flex; flex-direction: column; align-items: center; padding: 56px var(--space-16) var(--space-12); }
.done-ico {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-action-primary);
  color: var(--color-text-on-brand);
  display: flex; align-items: center; justify-content: center;
  animation: pop .2s ease both;
}
.done-ico.bad { background: var(--color-surface-default); box-shadow: inset 0 0 0 1px var(--color-state-error); color: var(--color-state-error); }
.done-t {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-top: var(--space-24); text-align: center;
}
.done-s {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
  margin-top: var(--space-10); text-align: center; max-width: 300px;
}
.done-screen .primary { margin-top: var(--space-24); }

/* ===========================================================================
   EXCHANGE
   =========================================================================== */
.swap-wrap { position: relative; }
.swap-box {
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-14) var(--space-16);
}
.swap-box + .swap-box { margin-top: var(--space-8); }
.swap-box .sb-k {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.swap-box .sb-row { display: flex; align-items: center; gap: var(--space-10); margin-top: 6px; }
.sb-amt {
  flex: 1; min-width: 0;
  font-family: var(--font-data);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-display-size);
  font-weight: 600;
  color: var(--color-text-primary);
  padding: 0;
}
.sb-amt::placeholder { color: var(--color-text-tertiary); }
.sb-amt[readonly] { color: var(--color-text-tertiary); }
.sb-amt::-webkit-outer-spin-button, .sb-amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb-amt[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.sb-amt.has-val[readonly] { color: var(--color-text-primary); }
.asset-pick {
  display: flex; align-items: center; gap: var(--space-8);
  background: var(--color-surface-elevated);
  box-shadow: var(--hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8);
  flex-shrink: 0;
  transition: background-color var(--t-state), box-shadow var(--t-state);
}
.asset-pick:active { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.asset-pick .ap-coin {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-caption-size); font-weight: 700;
  color: var(--neutral-0); flex-shrink: 0;
}
.asset-pick .ap-code {
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-body-size);
  font-weight: 600;
  color: var(--color-text-primary);
}

.swap-flip {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--touch-min); height: var(--touch-min);
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
  box-shadow: 0 0 0 4px var(--color-bg-base);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.ex-info {
  text-align: center;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-tertiary);
  margin-top: var(--space-14);
}
.exchange .primary { margin-top: var(--space-12); }

.info-row {
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-14) var(--space-16);
  margin-top: var(--space-10);
  display: flex; align-items: center; gap: var(--space-12);
  cursor: pointer; width: 100%;
  min-height: var(--row-h);
  transition: background-color var(--t-state), box-shadow var(--t-state);
}
.info-row:active { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.info-row .ir-ico {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-row .ir-txt { flex: 1; min-width: 0; }
.info-row .ir-t {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.info-row .ir-s {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
}
.ex-hist-block { margin-top: var(--space-16); }

/* ===========================================================================
   SUPPORT CHAT
   The section takes all of <main> (body and main are flex columns), so the
   composer's bottom edge lands on body's bottom padding: 88px plus the
   safe-area inset. Navigation starts at 80px plus the same inset, leaving
   the shared 8px gap above the bar.
   =========================================================================== */
/* A definite height keeps a long thread from growing the page: the list
   scrolls inside it and the composer stays put. */
body:has(#support:not(.hidden)) {
  height: 100%;
}
.support {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.support-head { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-4) 2px var(--space-12); }
.support-head .sh-ava {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  display: flex; align-items: center; justify-content: center;
}
.support-head .sh-ava img { width: 26px; height: auto; display: block; }
.support-head .sh-t {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.support-head .sh-s {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-brand);
  margin-top: 2px;
}

.chat-list {
  display: flex; flex-direction: column; gap: var(--space-10);
  /* Basis 0, not auto: the thread must not count towards the page height,
     or a long one grows the page past the viewport instead of scrolling here. */
  flex: 1 1 0px;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--space-8);
}
/* margin-top:auto on the first message pins the thread to the bottom without
   breaking scrolling the way justify-content:flex-end does. */
.chat-list .chat-msg:first-child { margin-top: auto; }
.chat-msg { display: flex; flex-direction: column; }
.chat-msg.customer { align-items: flex-end; }
.chat-msg.admin { align-items: flex-start; }
.chat-bubble {
  max-width: 78%;
  padding: var(--space-10) var(--space-14);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  overflow-wrap: anywhere;
}
.chat-msg.customer .chat-bubble {
  border-radius: var(--radius-md) var(--radius-md) var(--space-4) var(--radius-md);
  background: var(--color-action-primary);
  color: var(--color-text-on-brand);
}
.chat-msg.admin .chat-bubble {
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--space-4);
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  color: var(--color-text-primary);
}
.chat-time {
  font-size: var(--type-micro-size);
  font-weight: var(--type-micro-weight);
  line-height: var(--type-micro-lh);
  color: var(--color-text-tertiary);
  margin-top: var(--space-4);
  padding: 0 var(--space-4);
}
.chat-edited { margin-right: var(--space-4); }

.chat-draft {
  display: flex; align-items: center; gap: var(--space-12); flex-shrink: 0;
  padding: var(--space-10); margin-top: var(--space-8);
  background: var(--color-surface-default); box-shadow: var(--hairline);
  border-radius: var(--radius-lg);
}
.chat-draft-preview {
  display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0;
  overflow: hidden; border-radius: var(--radius-md);
  background: var(--color-bg-base); color: var(--color-icon-secondary);
}
.chat-draft-preview > * { grid-area: 1 / 1; }
.chat-draft-preview img { width: 64px; height: 64px; object-fit: cover; }
.chat-draft-info { flex: 1; min-width: 0; font-size: var(--type-label-size); }
.chat-draft-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: var(--space-4); color: var(--color-text-secondary);
  font-size: var(--type-caption-size);
}
.chat-draft-remove {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-pill);
  color: var(--color-icon-secondary);
}
.chat-draft-remove:active { background: var(--accent-tint); color: var(--color-text-brand); }
.chat-send.busy { opacity: 0.45; }

.chat-input-row { display: flex; align-items: center; gap: var(--space-10); padding-top: var(--space-8); }
/* A pill like the round buttons on either side of it. */
.chat-input-row textarea {
  flex: 1; height: var(--control-h); min-height: var(--control-h); max-height: 104px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  padding: var(--space-16) var(--space-20);
  font-family: var(--font-data);
  letter-spacing: normal;
  font-size: var(--type-body-size);
  resize: none;
  transition: box-shadow var(--t-state);
}
.chat-input-row textarea:focus { box-shadow: var(--ring-brand); }
.chat-send {
  width: var(--control-h); height: var(--control-h);
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Paperclip: same circle as send, surface fill instead of accent. */
.chat-attach {
  width: var(--control-h); height: var(--control-h);
  border-radius: var(--radius-pill);
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  color: var(--color-icon-secondary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--t-state), color var(--t-state), opacity var(--t-state);
}
.chat-attach:active { background: var(--accent-tint); color: var(--color-text-brand); }
.chat-attach.busy { opacity: 0.45; pointer-events: none; }
.chat-attach.busy svg { animation: chat-attach-spin 1s linear infinite; }
@keyframes chat-attach-spin { to { transform: rotate(360deg); } }

/* Photo message: the picture is the bubble. A min box keeps the thread from
   jumping while the bytes arrive; the image then sets its own size. */
.chat-bubble.chat-photo {
  padding: 0;
  overflow: hidden;
  min-width: 120px; min-height: 120px;
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
}
/* Outranks the accent customer bubble (three classes deep). */
.chat-msg.customer .chat-bubble.chat-photo { background: var(--color-surface-default); }
.chat-bubble.chat-photo img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  object-fit: cover;
  cursor: zoom-in;
}
.chat-bubble.chat-photo + .chat-bubble { margin-top: var(--space-4); }
.chat-bubble.chat-photo-broken::after {
  content: "✕";
  display: flex; align-items: center; justify-content: center;
  height: 120px;
  color: var(--color-text-tertiary);
}

.chat-lightbox {
  position: fixed; inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-16);
}
.chat-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* ===========================================================================
   PROFILE
   The profile fits the viewport without scrolling (owner, 2026-10-06). As
   fitScreen() in app.js raises --squeeze from 0 to 1, the spacing runs from
   the design values to compact ones (avatar 72 -> 56, rows 12 -> 8 apart),
   just far enough to end the screen 8px above the tab bar.
   =========================================================================== */
.pf-hero {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--space-4) * (1 - var(--squeeze, 0))) 0 var(--space-8);
}
.pf-avatar {
  width: calc(72px - 16px * var(--squeeze, 0)); height: calc(72px - 16px * var(--squeeze, 0));
  border-radius: 50%;
  background: var(--color-action-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: calc(30px - 6px * var(--squeeze, 0)); font-weight: 700;
  color: var(--color-text-on-brand);
}
.pf-name {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-top: calc(var(--space-12) - 4px * var(--squeeze, 0));
}
.pf-id-chip {
  display: flex; align-items: center; gap: var(--space-8);
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  padding: 6px var(--space-12) 6px 6px;
  border-radius: var(--radius-pill);
  margin-top: calc(var(--space-8) - 2px * var(--squeeze, 0));
  cursor: pointer;
  transition: background-color var(--t-state);
}
.pf-id-chip:active { background: var(--accent-tint); }
.pf-id-chip .pfc-tag {
  background: var(--color-action-primary);
  color: var(--color-text-on-brand);
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  padding: 6px var(--space-10);
  border-radius: var(--radius-pill);
}
.pf-id-chip .pfc-v {
  font-family: var(--font-data);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-body-size);
  font-weight: 600;
  color: var(--color-text-primary);
}

.pf-tile {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-sm);
  padding: calc(var(--space-12) - 2px * var(--squeeze, 0)) var(--space-16);
  cursor: pointer; width: 100%; display: block;
  transition: background-color var(--t-state);
}
.pf-tile:active { background: var(--accent-tint); }
.pf-tile .pt-k {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
}
.pf-tile .pt-row {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: calc(var(--space-12) - 8px * var(--squeeze, 0));
}
.pf-tile .pt-v {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.pf-tile .pt-v.ok { color: var(--color-text-brand); }
.profile > .panel {
  padding-top: calc(var(--space-14) - 2px * var(--squeeze, 0));
  padding-bottom: calc(var(--space-14) - 2px * var(--squeeze, 0));
}
.profile .panel .primary { margin-top: var(--space-12); height: calc(var(--control-h) - 4px * var(--squeeze, 0)); }

.analytics-setting {
  display: flex; align-items: center; gap: var(--space-12);
  padding: calc(var(--space-10) - 4px * var(--squeeze, 0)) 0;
  cursor: pointer;
}
.analytics-copy { display: grid; gap: 2px; flex: 1; }
.analytics-title { color: var(--color-text-primary); font-size: var(--type-body-size); }
.analytics-note { color: var(--color-text-secondary); font-size: 11px; line-height: 14px; }
.analytics-setting input { width: 18px; height: 18px; accent-color: var(--color-text-brand); flex-shrink: 0; }
.analytics-setting input:disabled { opacity: .5; }

/* Keep the new preference visible within the existing fixed profile on short phones. */
@media (max-height: 720px) {
  .profile .pf-hero { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-12); align-items: center; }
  .profile .pf-avatar { grid-row: span 2; width: 56px; height: 56px; }
  .profile .pf-name { margin-top: 0; font-size: 22px; line-height: 26px; }
  .profile .pf-id-chip { justify-self: start; margin-top: 4px; }
}

.docs {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-sm);
  padding: calc(var(--space-12) - 2px * var(--squeeze, 0)) var(--space-16)
    calc(var(--space-12) - 8px * var(--squeeze, 0));
  margin-top: var(--space-12);
}
.docs .docs-t {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.doc-item {
  display: flex; align-items: center; gap: var(--space-12);
  padding: calc(var(--space-12) - 4px * var(--squeeze, 0)) 0;
  cursor: pointer; width: 100%; color: inherit;
  min-height: var(--nav-item-h);
}
.doc-item .di-ico {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 36px;
}
.doc-item > span:not(.di-ico) {
  flex: 1;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-primary);
}
.doc-sep { height: 1px; background: var(--divider); }

/* ===========================================================================
   REFERRALS
   =========================================================================== */
.ref-banner {
  position: relative;
  border-radius: var(--radius-xl); overflow: hidden;
  padding: var(--space-16) var(--space-20);
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
}
.ref-banner .rb-bg { position: absolute; inset: 0; background: var(--glass-wash); }
.ref-banner .rb-glow {
  position: absolute; top: -20px; right: -20px;
  width: 180px; height: 110px;
  background: radial-gradient(180px 110px at 50% 50%, rgba(224, 235, 229, .15) 0%, rgba(51, 61, 59, 0) 100%);
  pointer-events: none;
}
.ref-banner .rb-body { position: relative; }
.ref-banner .rb-t {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.ref-banner .rb-t b { color: var(--color-text-brand); font-weight: var(--type-display-weight); }
.ref-banner .rb-s {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
  margin-top: var(--space-10);
}

.ref-code-panel { margin-top: var(--space-12); padding: var(--space-14) var(--space-16); }
.ref-code-panel .rc-k {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.ref-code-panel .rc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); margin-top: var(--space-8); }
.ref-code-panel .rc-code {
  font-family: var(--font-data);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-title-size);
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis;
}
.ref-code-panel .rc-copy {
  background: var(--accent-tint);
  color: var(--color-text-brand);
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  transition: background-color var(--t-state);
}
.ref-code-panel .rc-copy:active { background: var(--accent-a22); }
.referral .primary { margin-top: var(--space-12); }
.ref-stats { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-12); }
.ref-stat {
  flex: 1 1 140px;
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-14) var(--space-16);
}
.ref-stat .rs-k {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.ref-stat .rs-v {
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-title-size);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
  margin-top: var(--space-8);
}
.ref-stat .rs-v.accent { color: var(--color-text-brand); }

.steps-panel { padding: var(--space-4) var(--space-16); }
.step-row { display: flex; align-items: center; gap: var(--space-14); padding: var(--space-12) 0; }
.step-row .st-n {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-tint); color: var(--color-text-brand);
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-body-size); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-row span:last-child {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-primary);
}

.ref-reward-panel { margin-top: var(--space-12); padding: var(--space-14) var(--space-16); }
.ref-reward-panel .rc-k {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.ref-reward-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); margin-top: var(--space-8); }
.ref-reward-row > span {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.ref-pick {
  background: var(--accent-tint);
  color: var(--color-text-brand);
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* ===========================================================================
   AUTH
   =========================================================================== */
.app-loading { padding-top: calc(var(--app-h) * 0.2 / var(--ui-scale, 1)); text-align: center; color: var(--color-text-secondary); }
.auth { display: flex; flex-direction: column; padding-top: calc(var(--app-h) * 0.08 / var(--ui-scale, 1)) !important; }
.auth-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.auth-logo { width: 180px; max-width: 60%; height: auto; }
.auth-hero p {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
  margin: var(--space-20) var(--space-8) 0;
}
.auth-panel { margin-top: var(--space-24); }
.auth-note {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-tertiary);
  text-align: center;
  margin-top: var(--space-14);
}

/* ===========================================================================
   ADMIN
   =========================================================================== */
.admin-pin-panel { margin-top: var(--space-8); padding: var(--space-20) var(--space-16); }
.admin-pin-panel .ap-k {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-10);
}
.admin-pin-input {
  width: 100%;
  height: var(--control-h);
  background: var(--color-surface-elevated);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: 0 var(--space-16);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-title-size);
  font-weight: 600;
  letter-spacing: 6px;
  text-align: center;
  margin-bottom: var(--space-14);
  transition: box-shadow var(--t-state);
}
.admin-pin-input:focus { box-shadow: var(--ring-brand); }
.admin-msg { text-align: center; margin-top: var(--space-12); }
/* Admin uses the space below the header, reserving only the device safe area.
   The native Telegram Close control exits the Mini App. */
.adminx { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: 0; }
.admin-holder { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0 calc(var(--space-20) * -1); }
#admin-frame {
  /* The admin has its own responsive layout. Inherited shell zoom makes
     WebKit size its viewport wider than the visible frame and pan on focus. */
  zoom: calc(1 / var(--ui-scale, 1));
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  border: none;
  display: block;
  background: var(--color-bg-base);
}

/* ===========================================================================
   TAB BAR — floating pill, surface fill, hairline, 48px icon-only pill slots,
   active = accent tint + accent icon.
   =========================================================================== */
.tabbar {
  position: fixed;
  left: var(--space-20); right: var(--space-20);
  bottom: calc(var(--space-16) + var(--inset-bottom) / var(--ui-scale, 1));
  height: var(--row-h);
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8);
  z-index: 50;
}
.tab {
  flex: 1;
  align-self: stretch;
  height: var(--nav-item-h);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-secondary);
  background: transparent;
  transition: background-color var(--t-state), color var(--t-state);
}
.tab.active { color: var(--color-icon-nav-active); background: var(--color-surface-nav-active); }
/* The WebView draws its own focus ring around the whole bar after a tap; the
   design expresses state with the accent pill, so the UA ring is suppressed. */
.tabbar, .tab { outline: none; -webkit-tap-highlight-color: transparent; border: none; }
.tabbar:focus, .tabbar:focus-visible, .tab:focus, .tab:focus-visible { outline: none; box-shadow: none; }
.tabbar:focus, .tabbar:focus-visible { box-shadow: var(--hairline); }

/* ===========================================================================
   BOTTOM SHEET — the .fig "Bottom Sheet / Payment" #231:1877 and
   "Bottom Sheet / KYC" #231:1743 (2026-09-08). Radius 24 on the top corners,
   padding 10 top / 20 sides / 24 bottom, a 44x4 grab handle in its own 4px row
   with the content starting 12 below it, overlay black 64%.
   =========================================================================== */
.sheet-bg {
  position: fixed; inset: 0;
  background: var(--color-overlay);
  z-index: 90;
}
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--sheet-fill);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-10) var(--space-20) calc(var(--space-24) + var(--inset-bottom) / var(--ui-scale, 1));
  z-index: 91;
  /* Of the viewport: the sheet is fixed, and percentages ignore zoom. */
  max-height: 82%;
  overflow-y: auto;
  animation: sheet-up .2s ease both;
}
@keyframes sheet-up { from { transform: translateY(24px); } to { transform: none; } }
.sheet-grip { width: 44px; height: 4px; border-radius: 2px; background: var(--sheet-grip); margin: 0 auto var(--space-12); }
.sheet h2 {
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-lh);
  margin: 0 0 var(--space-12);
}
.sheet .note { margin: 0 0 var(--space-12); }
.sheet .primary { margin-top: var(--space-12); height: var(--control-h-lg); }
.sheet .primary.ghosted { height: var(--nav-item-h); }
.sheet .primary + .primary { margin-top: var(--space-10); }
/* The payment and KYC sheets use the 320x50 pill, not the 56px sheet CTA. */
.sheet .primary.btn-rounded {
  height: 50px;
  margin-top: var(--space-12);
}

/* ---- Sheet intro text ----------------------------------------------------
   Title Onest SemiBold 18/22 at -5%, 8 above the subtitle; subtitle Onest
   Medium 14/20 at -5%, 25 above the first method row. */
.sheet-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-8);
}
.sheet-sub {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-secondary);
  margin: 0 0 25px;
}

/* ---- Payment method row — 320x64, radius 16 -------------------------------
   Selection swaps the hairline to a solid white one; there is no accent ring and
   no accent tint. The accent lives in the tile and the indicator. */
.payopt {
  width: 100%;
  min-height: var(--row-h);
  border-radius: var(--radius-md);
  background: linear-gradient(var(--payopt-fill), var(--payopt-fill));
  box-shadow: var(--payopt-ring), var(--payopt-shadow);
  display: flex; align-items: center;
  gap: var(--space-12);
  padding: var(--space-14) var(--space-16);
  transition: box-shadow var(--t-state);
}
.payopt + .payopt { margin-top: var(--space-12); }
.payopt.active { box-shadow: var(--payopt-ring-active), var(--payopt-shadow); }
.payopt-tile {
  width: 36px; height: 36px;
  border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0;
  background: var(--payopt-tile-fill);
  box-shadow: var(--payopt-tile-ring);
  color: var(--color-text-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-row-size); font-weight: 700; line-height: 100%;
}
/* The USDT glyph is set in Inter in the .fig, the fiat rails in Manrope. */
.payopt-tile.m-usdt, .payopt-tile.m-usdt_bep20 { font-family: var(--font-data); }
/* The selected rail's tile goes solid accent along with its check (designer,
   2026-09-09); idle tiles stay on the surface whatever the rail. */
.payopt.active .payopt-tile {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--color-text-on-brand);
}
.payopt-t {
  flex-grow: 1; min-width: 0;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; line-height: 18px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.payopt-rate {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}
.payopt-radio {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: transparent;
  box-shadow: inset 0 0 0 2px var(--payopt-radio-ring);
  transition: background-color var(--t-state), box-shadow var(--t-state), color var(--t-state);
}
.payopt.active .payopt-radio {
  background: var(--color-action-primary);
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--color-text-on-brand);
}

/* ---- KYC sheet — the .fig #231:1743 ----------------------------------
   Shield tile 56x56 (6 below the shared handle offset, so 18 under the handle
   row), 16 to the title, 8 to the subtitle, 17 to the facts box, 19 to the
   next-step line and 27 to the CTA. */
.kyc-sheet { text-align: center; }
.kyc-sheet .ks-shield {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--kyc-icon-tile);
  display: flex; align-items: center; justify-content: center;
  margin: 6px auto var(--space-16);
}
/* The sheet glyph stays accent with a near-black check in both themes; the three
   fact glyphs invert with the theme. */
.ks-shield .ks-fl { fill: var(--accent); }
.ks-shield .ks-ln-inv { stroke: var(--color-text-on-brand); fill: none; }
.ks-fact-ico .ks-fl { fill: var(--kyc-fact-icon); }
.ks-fact-ico .ks-ln { stroke: var(--kyc-fact-icon); fill: none; }
.ks-fact-ico .ks-ln-inv { stroke: var(--kyc-fact-icon-inv); fill: none; }

.kyc-sheet .sheet-title { text-align: center; }
.kyc-sheet .sheet-sub {
  text-align: center;
  max-width: 280px;
  line-height: 14px;
  margin: 0 auto 17px;
}

.ks-facts {
  border-radius: var(--radius-md);
  background: var(--kyc-facts-fill);
  box-shadow: var(--kyc-facts-ring), var(--kyc-facts-shadow);
  padding: var(--space-12);
  display: flex; flex-direction: column;
  gap: var(--space-8);
  text-align: left;
}
.ks-fact { min-height: 44px; display: flex; align-items: center; gap: var(--space-10); }
.ks-fact-ico {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--kyc-fact-surface);
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.ks-fact-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ks-fact-t {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500; line-height: 18px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
/* The two-line fact wraps at the 250px measure the .fig sets, tighter leading. */
.ks-fact-wrap { display: block; line-height: 14px; max-width: 250px; }
.ks-fact-d {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 500; line-height: 12px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-secondary);
  max-width: 212px;
}
.ks-next {
  margin: 19px 0 0;
  font-family: var(--font-display);
  font-size: var(--type-caption-size); font-weight: 500; line-height: 16px;
  letter-spacing: var(--tracking-tight);
  color: var(--kyc-nextstep-fg);
  text-align: center;
}
.kyc-sheet .primary.btn-rounded { margin-top: 27px; }
.kyc-sheet .primary + .primary { margin-top: var(--space-12); }
/* The dismissal is a 320x48 soft pill, not the flat page-coloured ghost. */
.sheet .primary.btn-soft {
  height: 48px;
  background: var(--kyc-later-fill);
  box-shadow: none;
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500; line-height: 20px;
  letter-spacing: var(--tracking-tight);
}
.sheet .primary.btn-soft:active { background: var(--accent-tint); color: var(--color-text-brand); }
.sheet .primary.ghost-plain { height: var(--nav-item-h); }

/* Menu rows inside a sheet — PaymentOption geometry. */
.cm-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  min-height: var(--row-h);
  background: var(--color-surface-elevated);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-14) var(--space-16);
  margin-bottom: var(--space-10);
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  transition: background-color var(--t-state), box-shadow var(--t-state);
}
.cm-item:active { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.cm-item .cm-ico {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--color-icon-brand);
}
.cm-item .cm-ico svg { width: 20px; height: 20px; }
.cm-item .cm-chev {
  margin-left: auto;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  font-weight: 500; color: var(--color-text-tertiary);
  font-size: var(--type-caption-size); text-align: right;
}
.cm-item.danger { color: var(--color-state-error); }
.cm-item.danger .cm-ico { background: rgba(255, 100, 119, .12); color: var(--color-state-error); }
.cm-item.disabled { opacity: .55; }

/* Amount input inside a sheet — Input.jsx geometry. */
.topup-row {
  display: flex; align-items: center; gap: var(--space-10);
  background: var(--color-surface-elevated);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: 0 var(--space-16);
  height: var(--row-h);
  margin: var(--space-12) 0 var(--space-4);
  transition: box-shadow var(--t-state);
}
.topup-row:focus-within { box-shadow: var(--ring-brand); }
.topup-row .sheet-amt {
  flex: 1; min-width: 0;
  font-family: var(--font-data);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-title-size);
  font-weight: 600;
}
.topup-row .sheet-amt::placeholder { color: var(--color-text-tertiary); }
.topup-cur {
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-row-size);
  font-weight: 600;
  color: var(--color-text-tertiary);
}

/* Promo validation in purchase and top-up sheets. */
.promo-box { margin-top: var(--space-16); }
.promo-label {
  display: block; margin-bottom: var(--space-8);
  font-size: var(--type-caption-size); color: var(--color-text-secondary);
}
.promo-entry {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: var(--color-surface-elevated);
  border-radius: var(--radius-md); box-shadow: var(--hairline);
}
.promo-entry:focus-within { box-shadow: var(--ring-brand); }
.promo-entry input {
  flex: 1; min-width: 0; width: 100%; height: 40px;
  font-family: var(--font-data); font-size: 16px;
}
.promo-entry input::placeholder { color: var(--color-text-tertiary); }
.promo-apply {
  flex-shrink: 0; min-height: 40px; padding: 0 var(--space-12);
  border-radius: var(--radius-sm); background: var(--accent-tint);
  color: var(--color-text-brand); font-weight: 600;
}
.promo-apply:disabled { opacity: .5; }
.promo-message { margin: var(--space-8) 0 0; font-size: var(--type-caption-size); line-height: 1.5; }
.promo-message:empty { display: none; }
.promo-message[data-tone="ok"] { color: var(--color-text-brand); }
.promo-message[data-tone="error"] { color: var(--color-state-error); }

/* Personalized VIP status, without a percentage shared across methods. */
.vip-badge {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-sm);
  padding: var(--space-16);
  margin: var(--space-14) 0 0;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-brand);
  text-align: center;
  overflow-wrap: anywhere;
}

/* Wallet instructions. */
.wd-step {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}
.wd-card {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-16);
  margin: var(--space-12) 0;
}
.wd-field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12) 0; }
.wd-field + .wd-field { border-top: 1px solid var(--divider); }
.wd-k {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.wd-v {
  font-family: var(--font-data);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-row-size);
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
}
/* Step 3: the wallet sends its verification code to our service e-mail; the
   callout says so before the customer meets an address they do not know. */
.wd-otp {
  display: flex; align-items: flex-start; gap: var(--space-12);
  background: var(--color-surface-elevated);
  box-shadow: var(--ring-brand);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-14);
  margin: 0 0 var(--space-12);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-primary);
}
.wd-otp-ico {
  width: 36px; height: 36px; border-radius: var(--radius-pill); flex-shrink: 0;
  background: var(--accent-tint);
  color: var(--color-text-brand);
  display: flex; align-items: center; justify-content: center;
}
.sheet .pay-note.sheet-eta { margin: 0 0 var(--space-4); }

/* ===========================================================================
   SPINNER AND TOAST
   =========================================================================== */
.spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border-default);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
  margin: var(--space-24) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  left: 50%; bottom: calc(96px + var(--inset-bottom) / var(--ui-scale, 1));
  transform: translateX(-50%);
  background: var(--color-surface-elevated);
  box-shadow: var(--hairline);
  color: var(--color-text-primary);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md);
  z-index: 95;
  max-width: calc(var(--app-w) / var(--ui-scale, 1) - 48px);
  text-align: center;
  animation: rise .2s ease both;
}

/* ===========================================================================
   KYC (internal identity check)
   =========================================================================== */
.kyc-slot {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-12);
  padding: var(--space-16);
  background: var(--color-surface-default);
  box-shadow: var(--hairline-strong);
  border-radius: var(--radius-md);
}
.kyc-slot.done { padding: var(--space-16); box-shadow: var(--hairline); }
.kyc-slot .ks-ico {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
}
.kyc-slot .ks-t {
  font-family: var(--font-display);
  font-size: var(--type-row-size);
  font-weight: var(--type-row-weight);
  line-height: var(--type-row-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-top: var(--space-12);
}
.kyc-slot .ks-s {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
  margin-top: var(--space-4); text-align: center;
}
.kyc-slot .ks-chip {
  display: flex; align-items: center; gap: var(--space-8);
  background: var(--accent-tint);
  border-radius: var(--radius-pill);
  padding: var(--space-10) var(--space-16);
  margin-top: var(--space-14);
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  color: var(--color-text-brand);
}
.kyc-slot .ks-preview {
  max-width: 100%; max-height: 240px;
  border-radius: var(--radius-sm);
  display: block;
}
.kyc-slot .ks-done-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-top: var(--space-12);
}
.kyc-slot .ks-done {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: var(--type-body-size);
  font-weight: 600;
  color: var(--color-text-primary);
}
.kyc-slot .ks-done-ico {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-action-primary);
  display: flex; align-items: center; justify-content: center;
}
.kyc-slot .ks-replace {
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--color-text-brand);
}
.kyc-contacts { display: grid; gap: 8px; margin-top: 16px; }
.kyc-contacts label { font-size: 13px; color: var(--color-text-secondary); }
.kyc-contacts input { width: 100%; padding: 12px; border-radius: 12px; background: var(--color-bg-subtle); border: 1px solid var(--color-border-default); }
.kyc-contacts input:focus-visible { outline: 2px solid var(--color-border-brand); outline-offset: 2px; }
.kyc-slot + .hidden + .kyc-slot { margin-top: 12px; }
.kyc-rules {
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-16);
  margin-top: var(--space-14);
}
.kyc-rules .kr-row { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-10) 0; }
.kyc-rules .kr-ico, .kyc-privacy > svg { color: var(--color-text-brand); }
.kyc-rules .kr-ico {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kyc-rules .kr-t {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
}
.kyc-consents {
  margin-top: var(--space-14);
  padding: var(--space-4) var(--space-14);
  border-radius: var(--radius-md);
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
}
.kyc-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-10) 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.kyc-consent input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-action-primary);
}
.kyc-consent-link { color: var(--color-text-brand); text-decoration: underline; }
.kyc-consent input:focus-visible, .kyc-consent-link:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}
.kyc-privacy {
  display: flex; align-items: center; gap: var(--space-10);
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-14);
  margin-top: var(--space-14);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.kyc-center { text-align: center; padding: var(--space-32) var(--space-10) var(--space-10); }
.kyc-center .kc-ico {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-tint);
  color: var(--color-text-brand);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-12);
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-row-size); font-weight: 600;
}
.kyc-center .kc-t {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}
.kyc-center .kc-s {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-secondary);
}
.kc-reason {
  padding: var(--space-12) var(--space-14);
  background: var(--color-surface-default);
  box-shadow: inset 0 0 0 1px var(--color-state-error);
  border-radius: var(--radius-md);
  color: var(--color-state-error);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  max-width: 320px;
}
.kyc-center .kc-reason { margin: var(--space-14) auto 0; }

/* ===========================================================================
   WIDE VIEWPORTS
   Desktop clients, browsers, or fullscreen on a desktop: the layout stays the
   phone column. body keeps the 360 frame and centres itself; the fixed bars
   follow it. Layout px, so at --ui-scale 1.25 the column is 450 screen px.
   =========================================================================== */
@media (min-width: 560px) {
  body { max-width: 360px; margin-left: auto; margin-right: auto; }
  .tabbar { left: calc(50% - 160px); right: auto; width: 320px; }
  .sheet { left: calc(50% - 180px); right: auto; width: 360px; }
}

/* Editable cardholder address and temporary, masked card PIN setup. */
.card-setup-fields { display: grid; gap: 10px; margin: 16px 0; }
.card-setup-fields label { font-size: 14px; color: var(--color-text-secondary); }
.card-setup-fields input { width: 100%; min-width: 0; box-sizing: border-box; padding: 14px;
  border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-subtle); font-size: 16px; }
.card-setup-fields input:focus-visible { outline: 2px solid var(--color-border-brand); outline-offset: 2px; }
.card-setup-error { color: var(--color-state-error); }