/* 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);
  /* --- 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); }

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;
  min-height: calc(100dvh / var(--ui-scale, 1));
  /* 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 pre-multiplies every length, viewport units and env() included,
     so those are divided back by the factor wherever they appear below. */
  zoom: var(--ui-scale, 1);
}
body.has-tabbar { padding-bottom: calc(94px + var(--inset-bottom) / var(--ui-scale, 1)); }

.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-12);
}
.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); }
.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; }


/* ---- 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); }

/* 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-8) 2px var(--space-16);
}
.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-14);
}

/* 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-12); }
.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-24) 2px var(--space-12);
}

.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-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;
  background: var(--card-face-base) 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 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-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 .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); }

/* ---- 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-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; }

/* ---- "Coming soon" feature tiles ------------------------------------------ */
.feat-grid { display: flex; gap: var(--space-12); margin-top: var(--space-14); }
.feat {
  flex: 1;
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  cursor: pointer;
  min-width: 0;
  transition: background-color var(--t-state), box-shadow var(--t-state);
}
.feat:active { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.feat .ft-icons { display: flex; }
.feat .ft-em {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-bg-subtle);
  box-shadow: var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  letter-spacing: normal;
  font-size: var(--type-body-size);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.feat .ft-em + .ft-em { margin-left: -8px; }
.feat .ft-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-14);
}
.feat .ft-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-8);
}
.soon-badge {
  display: inline-block;
  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: 6px var(--space-10);
  border-radius: var(--radius-pill);
  margin-top: var(--space-10);
}

/* ===========================================================================
   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-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 .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 -> heading (12 above, 8 below)
   -> use-case panel 320x234 with the CTA inside -> benefits strip 12 below.
   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) -------------------------
   Heading Onest SemiBold 18/22 at -5%, 12 under the card and 8 above the
   panel. Panel: 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. */
.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: flex; flex-direction: column;
  overflow: hidden;
}
.usecase { display: flex; align-items: flex-start; gap: var(--space-24); }
.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);
}

/* ---- Benefits strip — the .fig, frame "Main / Subscriptions" -----------
   A real 320x76 container the mirror was missing: radius 12, washed fill, 1px
   ring, 18px backdrop blur. Three equal columns, icon at top 11, label at 39,
   dividers 1x42 hanging from the top edge (the .fig frame has no centring). */
.benefits {
  display: flex; align-items: flex-start; justify-content: space-between;
  height: 76px;
  margin-top: var(--space-12);
  border-radius: var(--radius-sm);
  background: var(--benefits-wash), linear-gradient(var(--benefits-fill), var(--benefits-fill));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--benefits-ring);
  overflow: hidden;
}
.benefits-div { width: 1px; height: 42px; background: var(--benefits-divider); flex-shrink: 0; align-self: flex-start; }
.benefit {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  gap: var(--space-8);
  padding: 11px 0 0;
  align-items: center;
}
.benefit svg { display: block; width: 20px; height: 20px; color: var(--benefit-icon); }
.benefit span {
  max-width: 94px;
  text-align: center;
  white-space: pre-line;
  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-primary);
}

/* ===========================================================================
   PAYMENT SCREEN
   =========================================================================== */
.payscreen { padding-top: 6px; }
.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-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. That padding reaches
   94px above the viewport bottom, the tab bar's top edge 80px (16 margin + 64
   height, both plus the safe-area inset) — with 2px of section padding the
   composer sits exactly 16px above the bar, matching the bar's own margin.
   =========================================================================== */
.support {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-bottom: 2px;
}
.support-head { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-4) 2px var(--space-16); }
.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-quick { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: var(--space-8) 0 var(--space-4); }
.chat-quick button {
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-pill);
  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-primary);
  transition: background-color var(--t-state), box-shadow var(--t-state), color var(--t-state);
}
.chat-quick button:active {
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--color-border-brand);
  color: var(--color-text-brand);
}
.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); max-height: 104px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  padding: var(--space-16) var(--space-20) 0;
  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
   =========================================================================== */
.pf-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--space-10) 0 var(--space-16); }
.pf-avatar {
  width: 72px; height: 72px; 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: 30px; 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: var(--space-14);
}
.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: var(--space-12);
  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: 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: var(--space-24); }
.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 .primary { margin-top: var(--space-14); }

.docs {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-sm);
  padding: var(--space-16);
  margin-top: var(--space-14);
}
.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: var(--space-12) 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-24) 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-14); padding: 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; gap: var(--space-12); margin-top: var(--space-14); }
.ref-stat {
  flex: 1;
  background: var(--color-surface-default);
  box-shadow: var(--hairline);
  border-radius: var(--radius-md);
  padding: 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-14); padding: 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
   =========================================================================== */
.auth { display: flex; flex-direction: column; padding-top: 8vh !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-holder { margin: 0 calc(var(--space-20) * -1); }
#admin-frame {
  width: 100%;
  height: calc(100dvh / var(--ui-scale, 1) - 170px);
  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;
  max-height: calc(82dvh / var(--ui-scale, 1));
  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 { 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-sub {
  display: block;
  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: 2px;
}
.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);
}

/* Plus banner (placeholder). */
.plus-banner {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-sm);
  padding: var(--space-16);
  margin-top: var(--space-14);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
}
.plus-banner .pb-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-12);
  border-radius: var(--radius-pill);
}
.plus-banner .pb-t {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--color-text-primary);
  text-align: center;
}

/* 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(100vw / 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-14);
  padding: var(--space-24) 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-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-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; }
}