/* ── Design tokens: dark navy premium, blue only as accent ─ */
:root {
  --tg-primary: #009EFF;
  --tg-primary-dark: #0086D6;
  --tg-primary-light: #16AFFF;

  --tg-bg: #020914;
  --tg-bg-2: #071625;
  --tg-card: #0A1B2D;
  --tg-card-2: #0D2135;
  --tg-gray-dark: #060C14;
  --tg-gray-medium: #152433;
  --tg-gray: #3E5368;
  --tg-gray-light: #8FA3BD;
  --tg-gray-vlight: #D5DEE9;
  --tg-text: #FFFFFF;
  --tg-text-2: #C5D4E4;
  --tg-muted: #91A6BA;
  --tg-success: #16C784;
  --tg-error: #FF5364;
  --tg-warning: #E0B45A;
  --tg-border: rgba(0, 158, 255, 0.22);
  --tg-border-soft: rgba(0, 158, 255, 0.14);
  --tg-border-hover: rgba(200, 220, 240, 0.16);
  --tg-hover-overlay: rgba(255, 255, 255, 0.04);
  --tg-active-overlay: rgba(0, 158, 255, 0.14);

  /* Legacy aliases (used across components) */
  --bx-primary: var(--tg-primary);
  --bx-primary-hover: var(--tg-primary-light);
  --bx-primary-dark: var(--tg-primary-dark);
  --bx-bg: var(--tg-bg);
  --bx-bg-2: var(--tg-bg-2);
  --bx-card: var(--tg-card);
  --bx-text: var(--tg-text);
  --bx-text-2: var(--tg-text-2);
  --bx-muted: var(--tg-muted);
  --bx-success: var(--tg-success);
  --bx-danger: var(--tg-error);
  --bx-warning: var(--tg-warning);
  --bx-border: var(--tg-border);
  --bx-border-soft: var(--tg-border-soft);

  --bg: var(--tg-bg);
  --bg-elevated: var(--tg-bg-2);
  --accent: var(--tg-primary);
  --accent-2: var(--tg-text-2);
  --accent-soft: rgba(0, 158, 255, 0.12);
  --accent-glow: rgba(0, 158, 255, 0.18);
  --text: var(--tg-text);
  --muted: var(--tg-muted);
  --glass: rgba(10, 27, 45, 0.96);
  --glass-border: rgba(0, 158, 255, 0.18);
  --icon: #91A6BA;
  --icon-active: #16AFFF;
  --ok: var(--tg-success);
  --warn: var(--tg-warning);
  --danger: var(--tg-error);

  --surface-1: var(--tg-card);
  --surface-2: var(--tg-bg-2);
  --surface-3: var(--tg-gray-dark);
  --on-primary: #ffffff;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;

  --fs-xs:  0.75rem;
  --fs-sm:  0.8125rem;
  --fs-md:  0.875rem;
  --fs-lg:  1rem;
  --fs-xl:  1.125rem;
  --fs-2xl: 1.25rem;
  --fs-3xl: 1.5rem;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --lh-tight:  1.25;
  --lh-normal: 1.45;

  --ring: rgba(0, 158, 255, 0.28);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.28);
  --shadow:   0 10px 28px rgba(0, 0, 0, 0.38);

  /* ── Motion system ───────────────────────────────────────────────────
     Единая шкала длительностей. Короткие переходы для отклика на нажатие,
     средние для смены состояния, длинные только для входа целых экранов.
     Кривые: --ease-out для входа элементов, --ease-soft для крупных
     перемещений, --ease-spring для упругих микро-взаимодействий.        */
  --t-micro: 120ms;   /* нажатие, ripple, hover */
  --t-fast: 180ms;    /* смена цвета/иконки */
  --t-base: 240ms;    /* появление карточек, тостов */
  --t-slow: 320ms;    /* модалки, панели */
  --t-page: 300ms;    /* смена экрана/вкладки */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
  /* Единые переходы-«пресеты»: применять вместо ручных перечислений. */
  --tr-colors: color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
  --tr-press: transform var(--t-micro) var(--ease-spring);
  --surface-transition: background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out);

  --radius-lg: var(--r-lg);
  --radius-md: var(--r-md);

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


html[data-theme="light"] {
  --tg-primary: #009EFF;
  --tg-primary-dark: #0086D6;
  --tg-primary-light: #16AFFF;

  --tg-bg: #F4F8FC;
  --tg-bg-2: #EAF2F9;
  --tg-card: #FFFFFF;
  --tg-card-2: #E8F5FF;
  --tg-gray-dark: #D7E3EE;
  --tg-gray-medium: #C7D7E6;
  --tg-gray: #5E7185;
  --tg-gray-light: #5E7185;
  --tg-gray-vlight: #0B1726;
  --tg-text: #0B1726;
  --tg-text-2: #3D5166;
  --tg-muted: #5E7185;
  --tg-success: #16A66A;
  --tg-error: #E5485D;
  --tg-border: #D7E3EE;
  --tg-border-soft: rgba(11, 23, 38, 0.08);
  --tg-border-hover: rgba(11, 23, 38, 0.14);
  --tg-hover-overlay: rgba(11, 23, 38, 0.04);
  --tg-active-overlay: rgba(0, 158, 255, 0.12);

  --accent-soft: #E8F5FF;
  --accent-glow: rgba(0, 158, 255, 0.14);
  --glass: rgba(255, 255, 255, 0.96);
  --glass-border: #D7E3EE;
  --icon: #5E7185;
  --icon-active: #009EFF;
  --surface-1: #FFFFFF;
  --surface-2: #EAF2F9;
  --surface-3: #E8F5FF;
  --on-primary: #ffffff;
  --ring: rgba(0, 158, 255, 0.22);
  --shadow-1: 0 1px 2px rgba(11, 23, 38, 0.05);
  --shadow-2: 0 6px 18px rgba(11, 23, 38, 0.07);
  --shadow: 0 10px 24px rgba(11, 23, 38, 0.08);
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html {
  height: 100%;
  background: var(--tg-bg);
  color-scheme: dark;
  transition: var(--surface-transition);
}
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  min-height: 100%;
  background: transparent;
  color: var(--tg-text);
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; }
input, textarea { font-family: inherit; }

/* ── Splash ──────────────────────────────────────────────────────────── */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(42, 171, 238, 0.16), transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 110%, rgba(31, 138, 203, 0.10), transparent 50%),
    linear-gradient(165deg, #07101c 0%, var(--tg-bg) 42%, #0c1a2e 100%);
  transition: opacity .48s var(--ease-out), transform .48s var(--ease-out);
}
.splash--out {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}
.splash__glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 171, 238, 0.22) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  animation: splash-pulse 3.2s ease-in-out infinite;
}
.splash__glow--2 {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(108, 207, 255, 0.12) 0%, transparent 70%);
  animation-delay: -1.4s;
  animation-duration: 4s;
}
.splash__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: var(--s-6);
  text-align: center;
  animation: splash-rise .7s var(--ease-out) both;
}
.splash__logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-bottom: var(--s-5);
}
.splash__logo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(42, 171, 238, 0.14), rgba(15, 31, 51, 0.4));
  border: 1px solid rgba(108, 207, 255, 0.14);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25) inset,
    0 18px 40px rgba(0, 0, 0, 0.35),
    0 0 48px rgba(42, 171, 238, 0.12);
}
.logo-mark--splash {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  transform: scaleY(-1);
  transform-origin: center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  opacity: 0.96;
}
.splash__brand {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--fw-700);
  letter-spacing: 0.14em;
  color: var(--tg-text);
  text-shadow: 0 1px 12px rgba(42, 171, 238, 0.18);
}
.splash__tag {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tg-muted);
}
.splash__bar {
  width: 128px;
  height: 3px;
  margin-top: var(--s-6);
  border-radius: 999px;
  background: rgba(168, 184, 204, 0.12);
  overflow: hidden;
}
.splash__bar-fill {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tg-primary-dark), var(--tg-primary-light));
  box-shadow: 0 0 12px rgba(42, 171, 238, 0.55);
  animation: splash-bar 1.35s var(--ease-out) infinite;
}
@keyframes splash-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes splash-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}
@keyframes splash-bar {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* ── Logo ────────────────────────────────────────────────────────────── */
.logo-mark {
  display: block; object-fit: contain;
  flex-shrink: 0; user-select: none; pointer-events: none;
}
.logo-mark--header {
  width: 34px; height: 34px;
  padding: 0; border-radius: 0; opacity: 0.94;
  background: none !important; border: none; box-shadow: none;
  transform: scaleY(-1); transform-origin: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* ── Shell layout ────────────────────────────────────────────────────── */
.shell {
  position: relative;
  z-index: 1;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  padding-top: 6px;
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom,0px));
  background: transparent;
}
.shell--hidden { opacity: 0; }

/* ── Top header ──────────────────────────────────────────────────────── */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--s-2) 0 var(--s-3);
  flex-shrink: 0;
}
.top-header__aside {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.top-header__brand-row {
  display: flex; align-items: center;
  gap: 8px; min-width: 0; flex: 1;
}
.top-header__titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.top-header__brand {
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-header__subtitle {
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-header__chips {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.top-header__chips[hidden] { display: none !important; }
.header-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  margin: 0;
  padding: 0 5px;
  border: 1px solid var(--tg-border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: var(--fw-600);
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.header-chip[hidden] { display: none !important; }
.header-chip svg { width: 11px; height: 11px; display: block; flex: 0 0 auto; }
.header-chip:active { transform: scale(0.97); }
.header-channel { color: var(--tg-primary); }
.header-rating {
  color: var(--text);
  border-color: rgba(245, 196, 81, 0.38);
  background: rgba(245, 196, 81, 0.1);
}
.header-rating__star {
  color: var(--tg-warning, #f5c451);
  font-size: 12px;
  line-height: 1;
  transform: translateY(-0.5px);
}

/* Profile chip */
.profile-chip {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--text-2, var(--tg-text-2));
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
  transition: transform var(--t-base) var(--ease-out), background var(--t-base), border-color var(--t-base);
}
.profile-chip:hover {
  border-color: var(--tg-border-hover);
  background: var(--tg-gray-medium);
  color: var(--text);
}
.profile-chip:active { transform: scale(.95); }
.profile-chip.is-hidden { visibility: hidden; pointer-events: none; }
.profile-chip__icon { font-size: 1rem; line-height: 1; }

/* ── Stage (tab content) ─────────────────────────────────────────────── */
.stage {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(100px + env(safe-area-inset-bottom,0px));
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.stage.is-transitioning { opacity: 0; transform: translateY(8px); }

/* ── Tabbar ──────────────────────────────────────────────────────────── */
.tabbar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 100%; max-width: 430px;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 0;
  padding: 8px 6px calc(10px + env(safe-area-inset-bottom,0px));
  background: color-mix(in srgb, var(--tg-bg) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--tg-border-soft);
  box-shadow: none;
  z-index: 50;
}
.tabbar--five { gap: 2px; padding-left: var(--s-1); padding-right: var(--s-1); }
.tabbar--five .tabbar__ico  { font-size: 1rem; }
.tabbar--five .tabbar__lbl  { font-size: .56rem; letter-spacing: 0; }

.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  min-height: 46px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--tg-muted);
  font-size: .6rem;
  cursor: pointer;
  transition: color var(--t-base), background var(--t-base);
}
.tabbar__item:hover { color: var(--tg-text-2); }
.tabbar__item.is-active {
  color: var(--tg-primary);
  background: transparent;
}
.tabbar__item.is-active .tabbar__ico svg {
  stroke: var(--tg-primary);
}
.tabbar__ico  { font-size: 1.15rem; line-height: 1; }
.tabbar__ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar__lbl  { font-weight: var(--fw-500); letter-spacing: .01em; }

/* ── Card (replaces .glass) ──────────────────────────────────────────── */
.card {
  background: var(--tg-card);
  border: 1px solid var(--tg-border-soft);
  border-radius: 16px;
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  box-shadow: 0 0 18px rgba(0, 158, 255, 0.05);
}
.card--tight  { padding: var(--s-3) var(--s-4); }
.card--accent {
  background: var(--surface-1);
  border-color: var(--tg-border);
}

/* Legacy .glass alias */
.glass {
  background: var(--tg-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--tg-border-soft);
  border-radius: 16px;
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  box-shadow: 0 0 18px rgba(0, 158, 255, 0.05);
}
.glass--tight { padding: var(--s-3) var(--s-4); }
.glass__title {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tg-text-2);
}

/* ── Section title ───────────────────────────────────────────────────── */
.section-title {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--tg-text-2);
}
.section-sub {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: -.4em 0 var(--s-3);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: var(--s-4);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-lg);
  font-weight: var(--fw-600);
  cursor: pointer;
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out),
              background var(--t-base), box-shadow var(--t-base);
  -webkit-appearance: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(.98); }

.btn--primary, .btn-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-600);
  letter-spacing: 0.01em;
  cursor: pointer;
  background: var(--tg-primary);
  color: var(--on-primary);
  box-shadow: none;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast);
  margin-bottom: var(--s-3);
}
.btn--primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background: var(--tg-primary-light);
}
.btn--primary:active:not(:disabled), .btn-primary:active:not(:disabled) {
  transform: scale(0.985);
  background: var(--tg-primary-dark);
}
.btn--primary:disabled, .btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.btn--secondary, .btn-secondary {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  margin-bottom: var(--s-2);
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-500);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), transform var(--t-fast) var(--ease-out),
              border-color var(--t-base);
}
.btn--secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
  background: var(--tg-gray-medium);
  border-color: var(--tg-border-hover);
}
.btn--secondary:active:not(:disabled), .btn-secondary:active:not(:disabled) {
  background: var(--tg-gray-medium);
  transform: scale(0.985);
}

.btn--ghost {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  cursor: pointer;
  transition: color var(--t-base), background var(--t-base);
}
.btn--ghost:active { color: var(--text); background: rgba(255,255,255,.04); }

.btn-secondary--lite {
  padding: var(--s-2) 13px;
  font-size: var(--fs-sm);
  margin-bottom: var(--s-2);
  opacity: .85;
}

.btn--sm { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
.btn--lg { padding: 17px; font-size: var(--fs-xl); }

/* Channel button */
.channel-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 11px var(--s-4);
  border: 1px solid var(--tg-border-soft);
  border-radius: var(--r-md);
  background: var(--tg-bg-2);
  color: var(--tg-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-500);
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-fast) var(--ease-out), border-color var(--t-base);
  box-shadow: none;
}
.channel-btn:hover {
  border-color: var(--tg-border-hover);
  background: var(--tg-gray-medium);
}
.channel-btn:active { transform: scale(0.985); }

/* ── Form fields ─────────────────────────────────────────────────────── */
.field { margin-bottom: var(--s-4); }
.field__label, label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  color: var(--bx-text-2);
  margin-bottom: var(--s-2);
  text-transform: none;
  letter-spacing: 0.01em;
}
.input, input, .textarea, textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--text);
  font-size: var(--fs-md);
  margin-bottom: var(--s-4);
  outline: none;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
input::placeholder, textarea::placeholder { color: var(--tg-muted); }
input:hover, textarea:hover,
.input:hover, .textarea:hover {
  border-color: var(--tg-border);
}
input:focus, textarea:focus,
.input:focus, .textarea:focus {
  border-color: var(--tg-primary);
  box-shadow: 0 0 0 3px var(--tg-active-overlay);
  background: var(--tg-card);
}
textarea, .textarea {
  min-height: 88px;
  resize: vertical;
}
.hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: calc(-.25 * var(--s-4)) 0 var(--s-4);
  line-height: var(--lh-normal);
}
.helper {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: calc(-.5 * var(--s-4));
  margin-bottom: var(--s-3);
}
.buy-preview {
  font-size: var(--fs-md);
  color: var(--bx-primary);
  margin: -8px 0 var(--s-4);
  min-height: 1.4em;
  font-weight: var(--fw-500);
}
.err {
  color: var(--danger);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-2);
}
.ok {
  color: var(--ok);
  font-size: var(--fs-md);
  margin-bottom: var(--s-2);
}
.ok.sell-tx-ok {
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

/* Buy flow: warning footer — equal buttons, readable primary action */
.warn-box + div {
  display: flex;
  gap: var(--s-2);
  align-items: stretch;
}
.warn-box + div .btn-primary,
.warn-box + div .btn-secondary {
  flex: 1;
  min-height: 52px;
  margin-bottom: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  white-space: normal;
  padding-top: 12px;
  padding-bottom: 12px;
}
#buyWarnContinueBtn {
  font-size: var(--fs-md);
}
#buyWarnContinueBtn::before {
  content: "✓\00a0";
  color: var(--ok);
  font-weight: 800;
}

/* ── List items ──────────────────────────────────────────────────────── */
.list { margin: 0; padding: 0; }
.list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: var(--fs-md);
}
.list-item:last-child { border-bottom: none; }
.list-item__main { flex: 1; min-width: 0; }
.list-item__meta { color: var(--muted); font-size: var(--fs-sm); flex-shrink: 0; }

/* ── Chip / badge / tag ──────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center;
  padding: var(--s-1) var(--s-3);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: .04em;
}
.badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
}
.badge-type {
  font-size: var(--fs-xs);
  padding: 3px var(--s-2);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.status-badge--ok    { background: rgba(34, 197, 94, 0.15); color: var(--ok); }
.status-badge--wait  { background: rgba(250, 204, 21, 0.15); color: var(--warn); }
.status-badge--bad   { background: rgba(239, 68, 68, 0.15); color: var(--danger); }

/* ── KV row ──────────────────────────────────────────────────────────── */
.kv {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-md);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--glass-border);
}
.kv:last-child { border-bottom: none; padding-bottom: 0; }
.kv span  { color: var(--muted); flex-shrink: 0; }
.kv strong { text-align: right; font-weight: var(--fw-600); word-break: break-word; }
.profile-kv { display: grid; gap: var(--s-3); }
.profile-kv--tight { gap: var(--s-2); }
.profile-kv--tight .kv { padding-bottom: var(--s-2); }

/* ── Timeline ────────────────────────────────────────────────────────── */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-3);
}
.timeline__step {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  min-height: 30px;
  padding: 6px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
  letter-spacing: 0;
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--muted);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.timeline__step.is-done {
  border-color: rgba(34, 197, 94, 0.32);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
}
.timeline__step.is-current {
  border-color: rgba(250, 204, 21, 0.4);
  color: #fef9c3;
  background: rgba(250, 204, 21, 0.14);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.12);
}

/* Legacy timeline aliases */
.home-active-order__timeline,
.order-room-timeline {
  margin: var(--s-2) 0 var(--s-3);
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--s-2);
}
.home-t-step,
.order-t-step {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  min-height: 30px;
  padding: 6px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--muted);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.home-t-step.is-done, .order-t-step.is-done {
  border-color: rgba(34, 197, 94, 0.32);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
}
.order-detail-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-4);
  min-width: 0;
}
.order-t-step {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.order-t-step.is-bad {
  color: var(--tg-error);
  font-weight: var(--fw-600);
}

.home-t-step.is-current, .order-t-step.is-current {
  border-color: rgba(250, 204, 21, 0.4);
  color: #fef9c3;
  background: rgba(250, 204, 21, 0.14);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.12);
}

/* ── Skeleton ────────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.1)  50%,
    rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton--text   { height: 1em; margin-bottom: var(--s-2); }
.skeleton--card   { height: 120px; }
.skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; }

/* ── Empty / Error / Success states ─────────────────────────────────── */
.empty-state, .empty {
  text-align: center;
  padding: var(--s-8) var(--s-5);
  color: var(--muted);
}
.empty__icon { font-size: 2.5rem; margin-bottom: var(--s-3); opacity: .5; }
.empty__icon svg { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-600);
  color: var(--text);
  margin: 0 0 var(--s-2);
}
.empty__hint { font-size: var(--fs-md); margin: 0 0 var(--s-4); }

.error-state {
  text-align: center;
  padding: var(--s-8) var(--s-5);
}
.error-state__icon { font-size: 2rem; margin-bottom: var(--s-3); color: var(--danger); }
.error-state__msg  { font-size: var(--fs-md); color: var(--muted); margin-bottom: var(--s-4); }

.success-state {
  text-align: center;
  padding: var(--s-8) var(--s-5);
}
.success-state__icon { font-size: 2rem; margin-bottom: var(--s-3); color: var(--ok); }
.success-state__msg  { font-size: var(--fs-md); color: var(--muted); }

/* ── Toast ───────────────────────────────────────────────────────────── */
@keyframes toastIn  { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }

.toast-root {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom,0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * var(--s-4));
  max-width: 488px;
  z-index: 200;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  font-size: var(--fs-md);
  font-weight: var(--fw-500);
  color: var(--text);
  box-shadow: var(--shadow-2);
  animation: toastIn var(--t-base) var(--ease-out) both;
  pointer-events: auto;
}
.toast--ok  { background: rgba(34, 197, 94, 0.18); border: 1px solid rgba(34, 197, 94, 0.35); }
.toast--err { background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.35); }
.toast.is-leaving { animation: toastOut var(--t-base) var(--ease-out) both; }

/* ── Home screen ─────────────────────────────────────────────────────── */
.rate-hero {
  text-align: left;
  padding: var(--s-4);
}
.rate-hero--fintech .rate-hero__rate-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: 2px;
}
.rate-hero__head {
  margin-bottom: var(--s-4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.rate-hero__pair {
  font-size: var(--fs-xs);
  color: var(--tg-text-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--fw-600);
}
.rate-hero__value {
  font-size: 2.25rem;
  font-weight: var(--fw-700);
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--text);
}
.rate-hero--fintech .rate-hero__value {
  font-size: 1.6rem;
  font-weight: var(--fw-700);
  letter-spacing: -.02em;
}
.rate-hero__unit {
  font-size: var(--fs-md);
  font-weight: var(--fw-500);
  color: var(--tg-text-2);
  margin-left: 3px;
}
.rate-hero--fintech .rate-hero__unit { margin-left: 0; opacity: .9; }
.rate-hero__hint {
  margin-top: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.rate-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s-2);
}
.rate-pill {
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md);
  background: var(--tg-bg-2);
  text-align: left;
  border: 1px solid var(--tg-border-soft);
  transition: border-color var(--t-base);
}
.rate-pill span  { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 3px; }
.rate-pill strong { font-size: var(--fs-xl); letter-spacing: -.01em; color: var(--text); }
.rate-pill--accent {
  background: var(--tg-card);
  border-color: var(--tg-border);
}

/* Premium home: курс + быстрые действия (compact) */
.rate-panel {
  padding: var(--s-3);
  border: 1px solid var(--tg-border-soft);
  border-radius: var(--r-lg);
  background: var(--tg-card);
  margin-bottom: var(--s-3);
}
.rate-panel__pair-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.rate-panel__symbols {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-700);
  color: var(--bx-text);
}
.rate-panel__sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
  font-size: 0.68rem;
  color: var(--tg-text-2);
}
.rate-panel__sym--usdt { color: var(--tg-gray-vlight); }
.rate-panel__sym--rub  { color: var(--tg-gray-vlight); }
.rate-panel__sym-x {
  font-size: 0.7rem;
  color: var(--bx-muted);
  font-weight: var(--fw-600);
}
.rate-panel__label {
  font-size: var(--fs-xs);
  color: var(--bx-text-2);
  text-align: right;
  line-height: var(--lh-tight);
}
.rate-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.rate-panel__side {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--tg-bg-2);
  border: 1px solid var(--bx-border-soft);
}
.rate-panel__caption {
  display: block;
  font-size: var(--fs-xs);
  color: var(--bx-text-2);
  margin-bottom: 4px;
}
.rate-panel__num {
  display: block;
  font-size: 1.15rem;
  font-weight: var(--fw-700);
  letter-spacing: -0.02em;
  color: var(--bx-text);
  line-height: var(--lh-tight);
}
.rate-panel__suffix {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--bx-muted);
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
.qa-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-fast) var(--ease-out);
}
.qa-tile:hover {
  border-color: var(--tg-border-hover);
  background: var(--tg-card-2);
}
.qa-tile:active { transform: scale(0.985); }
.qa-tile__ico {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
  color: var(--tg-text-2);
}
.qa-tile__ico svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qa-tile--buy .qa-tile__ico {
  color: var(--tg-success);
}
.qa-tile--sell .qa-tile__ico {
  color: var(--tg-error);
}
.qa-tile__t {
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
}
.qa-tile__s {
  font-size: 0.7rem;
  color: var(--bx-text-2);
  line-height: var(--lh-tight);
}

.analytics-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}
.analytics-cell--stat {
  padding: var(--s-2);
  border-radius: var(--r-md);
  background: var(--tg-bg-2);
  border: 1px solid var(--bx-border-soft);
  text-align: left;
}
.analytics-cell--stat span {
  display: block;
  font-size: 0.68rem;
  color: var(--bx-text-2);
  margin-bottom: 4px;
  line-height: 1.2;
}
.analytics-cell--stat strong {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-700);
  color: var(--bx-text);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

.home-block.glass {
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
.home-block .glass__title {
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
}
.home-block .btn-secondary {
  margin-top: var(--s-2) !important;
  padding: 8px var(--s-3);
  font-size: var(--fs-sm);
}
@media (max-width: 380px) {
  .analytics-grid--3 {
    grid-template-columns: 1fr;
  }
}

.home-active-order {
  margin-top: -4px;
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.home-active-order:active { transform: scale(.99); }
.home-active-order__k {
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--tg-text-2);
  margin-bottom: var(--s-1);
}
.home-active-order__id {
  font-size: var(--fs-xl);
  font-weight: var(--fw-700);
  margin-top: var(--s-1);
}
.home-active-order__meta {
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Quick actions */
.quick-actions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--s-2);
}
.quick-actions__btn {
  border: 1px solid var(--tg-border-soft);
  border-radius: var(--r-md);
  background: var(--tg-card);
  color: var(--text);
  padding: var(--s-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-500);
  text-align: left;
  cursor: pointer;
  min-height: 48px;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast) var(--ease-out);
}
.quick-actions__btn:hover { background: var(--tg-card-2); border-color: var(--tg-border-hover); }
.quick-actions__btn:active { transform: scale(.985); }

/* Rating card */
.rating-block {
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--tg-card);
  border: 1px solid var(--tg-border-soft);
  box-shadow: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  margin-bottom: var(--s-3);
  transition: border-color var(--t-base), transform var(--t-fast) var(--ease-out);
}
.rating-block:hover {
  border-color: var(--tg-border-hover);
}
.rating-block:active { transform: scale(0.99); }
.rating-block__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  letter-spacing: 0;
  color: var(--tg-text-2);
  margin: 0 0 var(--s-2);
  text-transform: none;
}
.rating-block__row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.rating-block__score {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--tg-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.2;
  padding-top: 0.08em;
}
.rating-block__stars { font-size: 1rem; letter-spacing: 2px; line-height: 1; color: var(--tg-warning); opacity: 0.85; }
.rating-block__hint {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--tg-text-2);
  line-height: var(--lh-normal);
}

/* Analytics / turnover */
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.analytics-cell {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
}
.analytics-cell span   { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 3px; }
.analytics-cell strong { font-size: var(--fs-xl); }

/* P2P channel card */
.p2p-channel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tg-border-soft);
  box-shadow: none;
  background: var(--tg-card);
}
.p2p-channel__glow { display: none; }
.p2p-channel__inner { position: relative; z-index: 1; padding-top: var(--s-1); }
.p2p-channel__badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: 0.06em;
  color: var(--tg-text-2);
  margin: 0 0 var(--s-3);
}
.p2p-channel__title {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xl);
  font-weight: var(--fw-700);
  letter-spacing: -0.01em;
  color: var(--tg-text);
}
.p2p-channel__hint {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-sm);
  color: var(--tg-text-2);
  line-height: var(--lh-normal);
}
.p2p-channel__btn {
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
  color: var(--tg-primary);
  box-shadow: none;
}

/* Last home blocks: extra air above tab bar */
.p2p-channel.glass { margin-bottom: var(--s-6); }

/* ── Exchange hub ────────────────────────────────────────────────────── */
.exchange-nav {
  display: flex; align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.back-fab {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-fast) var(--ease-out);
}
.back-fab:hover { color: var(--text); border-color: var(--tg-border-hover); background: var(--tg-gray-medium); }
.back-fab:active { transform: scale(.94); }
.exchange-nav__title, .detail-nav-title {
  font-weight: var(--fw-600);
  font-size: var(--fs-md);
  color: var(--text);
}
.exchange-glass { padding-bottom: var(--s-2); }
.hub-limits {
  margin: -2px 0 var(--s-3);
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-normal);
}

/* Hub cards — redesigned as proper cards */
.hub-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.hub-card {
  display: block; width: 100%;
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--surface-1);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-fast) var(--ease-out);
}
.hub-card:hover { border-color: var(--tg-border-hover); background: var(--tg-card-2); }
.hub-card:active { transform: scale(.985); }
.hub-card--buy  { border-color: var(--tg-border-soft); }
.hub-card--sell { border-color: var(--tg-border-soft); }
.hub-card__ico  { font-size: 1.2rem; margin-bottom: var(--s-2); color: var(--tg-text-2); }
.hub-card__ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.hub-card--buy .hub-card__ico  { color: var(--tg-success); }
.hub-card--sell .hub-card__ico { color: var(--tg-error); }
.hub-card__k  { font-size: var(--fs-xs); text-transform: none; letter-spacing: 0.02em; color: var(--tg-text-2); }
.hub-card__t  { font-size: var(--fs-lg); font-weight: var(--fw-600); margin-top: var(--s-1); }
.hub-card__a  { font-size: var(--fs-sm); font-weight: var(--fw-500); letter-spacing: 0; color: var(--tg-text-2); margin-top: 3px; }

/* Legacy hub-row for resume order */
.hub-row {
  display: block; width: 100%;
  padding: var(--s-4) 2px;
  border: none;
  text-align: left;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  transition: opacity var(--t-fast);
}
.hub-row:active { opacity: .8; }
.hub-row__k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.hub-row__t { font-size: var(--fs-xl); font-weight: var(--fw-700); margin-top: 5px; }
.hub-row__a { margin-top: 4px; font-size: var(--fs-md); font-weight: var(--fw-600); letter-spacing: .02em; color: var(--accent); }

.exchange-glass .hub-row + .hub-row { border-top: 1px solid var(--tg-border-soft); }
.hub-row--accent {
  background: var(--tg-bg-2);
  border-radius: var(--r-md);
  margin: 0 -4px var(--s-3);
  padding-left: var(--s-3) !important;
  padding-right: var(--s-2) !important;
  border: 1px solid var(--tg-border-soft);
}
.hub-row--accent .hub-row__k { color: var(--tg-text-2); }
.hub-row--resume {
  border-color: var(--tg-border);
  background: var(--tg-bg-2);
}

/* ── Order room ──────────────────────────────────────────────────────── */
.order-room-card { padding: var(--s-4); }
.order-room-kv {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  column-gap: var(--s-3);
  row-gap: var(--s-1);
  align-items: start;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: var(--fs-md);
}
.order-room-kv:last-child { border-bottom: none; }
.order-room-kv > span {
  color: var(--muted);
  min-width: 0;
  padding-top: 1px;
  line-height: var(--lh-normal);
}
.order-room-kv > strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  text-align: right;
  font-weight: var(--fw-600);
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: var(--lh-normal);
  white-space: normal;
}
.order-room-kv--stack {
  grid-template-columns: 1fr;
}
.order-room-kv--stack > strong {
  text-align: left;
  font-weight: var(--fw-500);
}
/* Inline icon-only copy button */
.copy-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-left: 6px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.72;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
}
.copy-icon-btn:hover { opacity: 1; color: var(--accent); }
.copy-icon-btn:active { transform: scale(.92); background: rgba(255,255,255,.05); }
.copy-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.copy-icon-btn.is-copied { color: var(--ok); opacity: 1; }
.copy-icon-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copy-icon-btn--solo {
  margin-left: 0;
  margin-top: 2px;
}

/* Copyable row: value wraps in its column; copy icon stays on the right */
.order-room-kv--copy > strong,
.kv--copy > strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
}
.order-room-kv--copy .copyable-value,
.kv--copy .copyable-value {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.order-room-kv--copy .copy-icon-btn,
.kv--copy .copy-icon-btn {
  margin-left: 0;
  flex-shrink: 0;
  color: var(--muted);
}

/* Legacy .copy-inline-* — keep harmless aliases */
.copy-inline-wrap { display: none; }
.order-room-actions { margin-bottom: var(--s-3); }
.order-room-status.status-line--wait,
.order-room-status.status-line--ok,
.order-room-status.status-line--bad { display: inline; }
.order-room-timeline {
  margin: var(--s-2) 0 var(--s-3);
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--s-2);
}

/* Wallet section */
.order-room-card > .glass.glass--tight {
  margin-top: var(--s-3);
}
.order-wallet {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.order-wallet label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-500);
  font-size: var(--fs-sm);
  margin-top: var(--s-1);
  margin-bottom: 0;
}
.order-wallet input {
  margin-bottom: 0;
}
.order-room-card > p.hint {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-1);
  line-height: var(--lh-normal);
}
.order-room-card > .glass.glass--tight .glass__title {
  margin-bottom: var(--s-2);
}
.order-room-card > .glass.glass--tight .order-room-kv:first-of-type {
  padding-top: 0;
}

/* ── Status line ─────────────────────────────────────────────────────── */
.status-line {
  display: flex; align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-md);
}
.status-line--ok  { color: var(--ok); }
.status-line--wait { color: var(--warn); }
.status-line--bad  { color: var(--danger); }

/* ── Order cards (history list) ──────────────────────────────────────── */
.order-card {
  display: block; width: 100%;
  padding: var(--s-4);
  margin-bottom: var(--s-2);
  border-radius: var(--r-md);
  background: var(--tg-card);
  border: 1px solid var(--tg-border-soft);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-fast) var(--ease-out);
}
.order-card:active { transform: scale(.99); }
.order-card:hover, .order-card:focus-visible {
  border-color: var(--tg-border-hover);
  background: var(--tg-card-2);
}
.order-card:last-child { margin-bottom: 0; }
.order-card__top {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--s-2); margin-bottom: var(--s-2);
}
.order-card__id    { font-weight: var(--fw-600); font-size: var(--fs-md); }
.order-card__sums  { font-size: var(--fs-md); color: var(--text); margin-bottom: var(--s-2); }
.order-card__time  { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s-2); }
.order-card__more  { margin-top: var(--s-2); font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; color: var(--accent); font-weight: var(--fw-500); }
.order-card__timer-wrap { font-size: var(--fs-xs); color: var(--warn); margin: var(--s-1) 0 3px; }
.order-card__timer { font-variant-numeric: tabular-nums; font-weight: var(--fw-600); }

.orders-sheet { }
.orders-sheet__title { margin-bottom: var(--s-4); }

.app-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  animation: fadeIn var(--t-base) var(--ease-out) both;
}
.app-modal__card {
  position: relative;
  width: min(440px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: var(--tg-card);
  border: 1px solid var(--tg-border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
  box-shadow: var(--shadow);
}
.app-modal__title {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-xl);
  font-weight: var(--fw-700);
  letter-spacing: -.01em;
  padding-right: 32px;
}
.p2p-rules-support {
  width: auto;
  min-height: 34px;
  margin: 14px 0 0 auto;
  padding: 6px 14px;
  font-size: var(--fs-sm);
}
.app-modal__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: none;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.app-modal__close:hover { color: var(--text); background: rgba(255,255,255,.08); }
.app-modal__close:active { transform: scale(.92); }
.app-modal__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-modal__img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  margin-bottom: var(--s-3);
}

.app-modal--blocking {
  z-index: 1002;
  backdrop-filter: blur(6px);
}
.amount-wait-card {
  text-align: center;
}
.amount-wait-timer {
  font-size: var(--fs-4);
  font-weight: var(--fw-700);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin: var(--s-3) 0 var(--s-4);
}
.amount-wait-timer__unit {
  font-size: var(--fs-md);
  font-weight: var(--fw-500);
  color: var(--muted);
  margin-left: 4px;
}
.amount-wait-dismiss {
  margin-top: var(--s-2);
}

.instruction-modal__card {
  width: min(760px, 100%);
}

.instruction-modal__media {
  display: block;
  margin: 0 0 var(--s-2);
}

.instruction-zoom-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.instruction-zoom-btn {
  min-width: 40px;
  height: 36px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.instruction-zoom-btn--text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.instruction-zoom-btn:active { transform: scale(.96); }
.instruction-zoom-scale {
  font-size: var(--fs-sm);
  color: var(--muted);
  min-width: 3.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.instruction-modal__viewport {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: min(62vh, 520px);
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  touch-action: pan-x pan-y;
}

.instruction-modal__loading {
  text-align: center;
  font-size: var(--fs-md);
  color: var(--muted);
  padding: var(--s-3) 0;
}

.instruction-modal__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--tg-bg-2);
}

.instruction-modal__fallback {
  margin-top: var(--s-2);
}

/* Inline paste control (кошелёк / хэш / реквизиты) */
.input-with-paste {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: var(--s-4);
}
.order-wallet .input-with-paste {
  margin-bottom: var(--s-2);
}
.input-with-paste:last-child {
  margin-bottom: 0;
}
.input-with-paste input {
  flex: 1;
  min-width: 0;
  width: auto;
  padding-right: 10px;
  margin-bottom: 0;
}
.input-paste-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--tg-border-soft);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.65;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
}
.input-paste-icon-btn:hover {
  opacity: 1;
  color: var(--tg-text-2);
  border-color: var(--tg-border-hover);
  background: rgba(255, 255, 255, 0.03);
}
.input-paste-icon-btn:active {
  transform: scale(0.94);
}
.input-paste-icon-btn[hidden] {
  display: none !important;
}
.input-paste-icon-btn svg {
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.no-payment-modal input[type="file"] {
  margin: 8px 0 10px;
}

.no-payment-modal textarea {
  margin: 0 0 10px;
}

.no-payment-progress {
  height: 8px;
  border: 1px solid var(--tg-border-soft);
  border-radius: 999px;
  overflow: hidden;
  background: var(--tg-bg-2);
  margin-bottom: 10px;
}

.no-payment-progress__bar {
  height: 100%;
  width: 0%;
  transition: width .15s linear;
  background: var(--tg-primary);
}

/* ── Order detail ────────────────────────────────────────────────────── */
.detail-grid { display: flex; flex-direction: column; gap: 0; }
.detail-row {
  display: grid;
  grid-template-columns: minmax(0,36%) minmax(0,64%);
  gap: var(--s-2);
  align-items: start;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: var(--fs-md);
  min-width: 0;
}
.detail-row:last-child { border-bottom: none; }
.detail-row__k {
  color: var(--muted);
  line-height: var(--lh-normal);
  min-width: 0;
}
.detail-row__v {
  font-weight: var(--fw-600);
  text-align: right;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: var(--lh-normal);
  white-space: normal;
}
.detail-row--stack {
  grid-template-columns: 1fr;
  gap: 4px;
}
.detail-row--stack .detail-row__v {
  text-align: left;
  font-weight: var(--fw-500);
}

/* ── In-app chat ─────────────────────────────────────────────────────── */
.chat-card { padding-bottom: var(--s-4); }
.chat-card--tab {
  margin-top: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: var(--s-3);
  height: 100%;
}
.chat-hint {
  margin: 0 0 var(--s-2);
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  color: var(--tg-text);
}

.chat-log {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-3) var(--s-2);
  margin-bottom: var(--s-2);
  border-radius: var(--r-md);
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
}
.chat-compose {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex-shrink: 0;
}
.chat-compose textarea { margin-bottom: 0; }
.chat-send { margin-bottom: 0; }

.stage.stage--support {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
.stage.stage--support > .chat-card--tab {
  flex: none;
  min-height: 260px;
}
.stage.stage--support-chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.stage.stage--support-chat > .chat-card--tab {
  flex: 1;
  min-height: 0;
}
.stage.stage--support-chat .chat-log {
  max-height: none;
  min-height: 0;
}
.chat-card--tab .chat-log {
  min-height: 168px;
  max-height: 38vh;
}
.chat-compose {
  flex-direction: row;
  align-items: flex-end;
}
.chat-compose textarea {
  flex: 1;
  min-height: 44px;
  max-height: 96px;
  resize: none;
  border-radius: 12px;
  border: 1px solid var(--tg-border);
  background: var(--tg-bg-2);
  color: var(--tg-text);
  padding: 10px 12px;
  outline: none;
}
.chat-compose textarea:focus {
  border-color: rgba(0, 158, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 158, 255, 0.12);
}
.chat-send,
.chat-send.btn-primary {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-bottom: 0;
}
.chat-send svg { width: 18px; height: 18px; }

/* Chat bubbles */
.chat-bubble {
  max-width: 86%;
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-lg);
  animation: msgIn var(--t-base) var(--ease-out) both;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.chat-bubble--user {
  margin-left: auto;
  background: var(--tg-primary);
  border: 1px solid transparent;
  color: var(--on-primary);
  border-bottom-right-radius: var(--r-sm);
}
.chat-bubble--user .chat-bubble__meta { color: rgba(255,255,255,0.75); }
.chat-bubble--admin {
  margin-right: auto;
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
  border-bottom-left-radius: var(--r-sm);
}
.chat-bubble--system {
  margin-left: auto; margin-right: auto;
  max-width: 94%;
  text-align: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
}
.chat-bubble--system .chat-bubble__text { font-size: var(--fs-sm); color: var(--muted); }
.chat-bubble__meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.chat-bubble__time { opacity: .7; }
.chat-bubble__text {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Date separator */
.chat-date-sep {
  text-align: center;
  margin: var(--s-3) 0;
}
.chat-date-sep span {
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
  padding: 3px var(--s-3);
  border-radius: 999px;
}
.chat-empty {
  text-align: center; padding: var(--s-4) var(--s-2); margin: 0;
}

/* ── Profile ─────────────────────────────────────────────────────────── */
.profile-hero {
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-card);
}
.profile-hero__row  { display: flex; align-items: center; gap: var(--s-4); }
.profile-hero__mark {
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
  letter-spacing: -.02em; color: var(--tg-text);
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
  flex-shrink: 0;
}
.profile-hero__brand { font-weight: 600; letter-spacing: .02em; font-size: var(--fs-md); }
.profile-hero__id    { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
.profile-hero__meta  { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--muted); }

.profile-pill {
  display: inline-block; margin-top: var(--s-2);
  padding: 3px var(--s-2);
  border-radius: 999px;
  font-size: var(--fs-xs); font-weight: var(--fw-600); letter-spacing: .02em;
}
.profile-pill--ok  { background: rgba(34, 197, 94, 0.14); color: var(--ok); }
.profile-pill--bad { background: rgba(239, 68, 68, 0.14); color: var(--danger); }

.balance-card {
  margin-bottom: var(--s-3);
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-card);
  text-align: left;
}
.balance-card__label {
  font-size: var(--fs-sm);
  color: var(--tg-muted);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: var(--fw-500);
}
.balance-card__value {
  margin-top: var(--s-2);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--tg-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.wallet-bal {
  margin-bottom: 12px;
  text-align: left;
}
.wallet-bal .vx-bal__v {
  font-size: 30px;
}
.wallet-bal .vx-bal__unit {
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tg-muted);
  vertical-align: 0.12em;
  margin-left: 4px;
}
.wallet-bal .balance-card__actions--wallet {
  margin-top: 16px;
}
.wallet-bal .btn-wallet-hist {
  color: #16AFFF;
  background: #071625;
  border: 1px solid rgba(0, 158, 255, 0.22);
  border-radius: 12px;
}
.wallet-bal .btn-wallet-hist svg {
  width: 18px;
  height: 18px;
}
.wallet-deposit {
  margin-top: 4px;
}
.wallet-deposit .glass__title {
  margin-bottom: 10px;
}
.wallet-deposit__rows {
  display: grid;
  gap: 0;
}
.wallet-deposit .kv--stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
}
.wallet-deposit .kv--stack > strong {
  text-align: left;
  font-weight: 500;
}
.wallet-deposit .btn-primary {
  margin: 14px 0 0;
}
.balance-card--home {
  margin-bottom: var(--s-3);
  padding: var(--s-3);
}
.balance-card--home .balance-card__value {
  font-size: 1.45rem;
}
.balance-card--home .balance-card__actions {
  margin-top: var(--s-2);
}
.balance-card__actions {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.balance-card__actions--row {
  grid-template-columns: 1fr 1fr;
}
.balance-card__actions--wallet {
  grid-template-columns: 1fr 1fr auto;
  align-items: stretch;
}
.btn-wallet-hist {
  min-width: 44px;
  width: 44px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text-2);
  font-size: 1.05rem;
  cursor: pointer;
  line-height: 0;
  display: grid;
  place-items: center;
}
.btn-wallet-hist:hover {
  color: var(--text);
  border-color: var(--tg-border);
}
.purchase-paused {
  opacity: 0.58 !important;
  filter: grayscale(0.35);
  cursor: pointer !important;
  pointer-events: auto !important;
}
.balance-card__actions .btn-primary,
.balance-card__actions .btn-secondary {
  width: 100%;
  margin: 0;
}
.deposit-address {
  display: block;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--tg-text);
  letter-spacing: -0.01em;
}
.deposit-warn {
  margin: 12px 0 0;
  color: var(--tg-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
html[data-theme="light"] .wallet-bal .btn-wallet-hist {
  background: #EAF2F9;
  border-color: #D7E3EE;
  color: #009EFF;
}
html[data-theme="light"] .wallet-bal .vx-bal__unit {
  color: #5E7185;
}
.deposit-hist { display: grid; gap: var(--s-2); }
.deposit-hist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--tg-border-soft);
}
.deposit-hist__row:last-child { border-bottom: 0; }
.deposit-hist__amt {
  font-weight: var(--fw-600);
  font-variant-numeric: tabular-nums;
}
.deposit-hist__st { font-size: var(--fs-sm); color: var(--muted); }
.deposit-hist__st--ok { color: var(--ok); }
.deposit-hist__st--wait { color: var(--tg-text-2); }
.deposit-hist__st--bad { color: var(--danger); }

.wallet-modal {
  max-height: 85vh;
  overflow: auto;
}
.wallet-modal__hint {
  margin: 0 0 16px;
  color: var(--tg-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.wallet-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.wallet-modal__actions > .btn-primary,
.wallet-modal__actions > .btn-secondary {
  width: 100%;
  margin: 0;
}
.wallet-avail {
  position: relative;
  overflow: hidden;
  margin: 0 0 16px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: #0A1B2D;
  border: 1px solid rgba(0, 158, 255, 0.22);
  box-shadow: 0 0 20px rgba(0, 158, 255, 0.06);
  text-align: left;
}
.wallet-avail::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90% 80% at 100% 0%, rgba(0, 158, 255, 0.14), transparent 58%);
}
.wallet-avail > * { position: relative; }
.wallet-avail__k {
  font-size: 13px;
  color: var(--tg-muted);
  margin-bottom: 6px;
}
.wallet-avail__v {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--tg-text);
  font-variant-numeric: tabular-nums;
}
.wallet-avail__v span {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--tg-muted);
  margin-left: 4px;
  letter-spacing: 0.04em;
}
.wallet-avail__net {
  margin-top: 6px;
  font-size: 12px;
  color: var(--tg-muted);
}
.vx-pills--wallet {
  margin: 0 0 14px;
}
.wallet-hist-body {
  min-height: 80px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.wallet-hist-body.is-ready {
  opacity: 1;
  transform: translateY(0);
}
.wallet-hist-body.is-swap {
  opacity: 0;
  transform: translateY(4px);
}
.wallet-hist__row {
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.wallet-hist-body.is-ready .wallet-hist__row {
  animation: wallet-hist-row-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wallet-hist-body.is-ready .wallet-hist__row:nth-child(1) { animation-delay: 0.02s; }
.wallet-hist-body.is-ready .wallet-hist__row:nth-child(2) { animation-delay: 0.05s; }
.wallet-hist-body.is-ready .wallet-hist__row:nth-child(3) { animation-delay: 0.08s; }
.wallet-hist-body.is-ready .wallet-hist__row:nth-child(4) { animation-delay: 0.11s; }
.wallet-hist-body.is-ready .wallet-hist__row:nth-child(5) { animation-delay: 0.14s; }
.wallet-hist-body.is-ready .wallet-hist__row:nth-child(n+6) { animation-delay: 0.16s; }
@keyframes wallet-hist-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wallet-hist-body,
  .wallet-hist__row { transition: none; animation: none !important; }
  .wallet-hist-body { opacity: 1; transform: none; }
}
.wallet-hist {
  display: grid;
  gap: 8px;
}
.wallet-hist__row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 14px;
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
}
.wallet-hist__ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  color: #16AFFF;
  background: rgba(0, 158, 255, 0.12);
  border: 1px solid rgba(0, 158, 255, 0.18);
}
.wallet-hist__ico.is-in {
  color: #16C784;
  background: rgba(22, 199, 132, 0.12);
  border-color: rgba(22, 199, 132, 0.22);
}
.wallet-hist__ico.is-out {
  color: #16AFFF;
}
.wallet-hist__ico svg {
  width: 18px;
  height: 18px;
}
.wallet-hist__body { min-width: 0; }
.wallet-hist__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wallet-hist__amt {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.wallet-hist__amt span {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--tg-muted);
  margin-left: 2px;
}
.wallet-hist__amt--in { color: var(--ok); }
.wallet-hist__amt--out { color: var(--tg-text); }
.wallet-hist__st {
  flex: none;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.wallet-hist__st.is-ok {
  color: #16C784;
  background: rgba(22, 199, 132, 0.12);
}
.wallet-hist__st.is-bad {
  color: #FF5364;
  background: rgba(255, 83, 100, 0.12);
}
.wallet-hist__st.is-wait {
  color: #E0B45A;
  background: rgba(224, 180, 90, 0.12);
}
.wallet-hist__meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--tg-muted);
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.wallet-withdraw-calc {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 158, 255, 0.18);
  background: #071625;
  box-shadow: inset 0 0 0 1px rgba(0, 158, 255, 0.04);
}
.wallet-withdraw-calc .kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 158, 255, 0.08);
  font-size: 13px;
}
.wallet-withdraw-calc .kv:last-child { border-bottom: 0; }
.wallet-withdraw-calc .kv span { color: var(--tg-muted); }
.wallet-withdraw-calc .kv strong {
  text-align: right;
  font-weight: 650;
  color: var(--tg-text);
}
.wallet-withdraw-calc .kv--stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.wallet-withdraw-calc .kv--stack strong {
  text-align: left;
  font-weight: 500;
}
.wallet-modal .field-label {
  margin-top: 12px;
}
.wallet-modal .field-label:first-of-type {
  margin-top: 0;
}
html[data-theme="light"] .wallet-avail {
  background: #FFFFFF;
  border-color: #D7E3EE;
  box-shadow: 0 1px 2px rgba(11, 23, 38, 0.04);
}
html[data-theme="light"] .wallet-hist__row {
  background: #FFFFFF;
  border-color: #D7E3EE;
}
html[data-theme="light"] .wallet-withdraw-calc {
  background: #EAF2F9;
  border-color: #D7E3EE;
  box-shadow: none;
}
html[data-theme="light"] .wallet-hist__ico {
  background: #E8F5FF;
  border-color: #D7E3EE;
}
.field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  color: var(--tg-muted);
  margin-bottom: 8px;
}
.field-input {
  margin-bottom: 0 !important;
}

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-4); }
.stat-tile {
  margin-bottom: 0;
  padding: var(--s-4) var(--s-3);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-card);
}
.stat-tile__k {
  display: block; font-size: var(--fs-xs);
  text-transform: none; letter-spacing: 0.02em;
  color: var(--tg-text-2); margin-bottom: var(--s-2);
}
.stat-tile__v { font-size: var(--fs-2xl); font-weight: var(--fw-700); letter-spacing: -0.02em; color: var(--tg-text); }

.loyalty-card { border: 1px solid var(--tg-border-soft); }
.loyalty-ring {
  text-align: center;
  padding: var(--s-3) 0 var(--s-2);
  margin-bottom: var(--s-2);
  border-radius: var(--r-md);
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
}
.loyalty-ring__value { font-size: 1.85rem; font-weight: 700; color: var(--tg-text); letter-spacing: -0.02em; }
.loyalty-ring__lbl   { font-size: var(--fs-xs); color: var(--tg-text-2); text-transform: none; letter-spacing: 0.02em; }

.loyalty-progress {
  margin: var(--s-3) 0 var(--s-4);
}
.loyalty-progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
  overflow: hidden;
}
.loyalty-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--tg-primary);
  transition: width var(--t-base) var(--ease-out);
}
.loyalty-progress__cap {
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--tg-muted);
}

/* ── Reviews ─────────────────────────────────────────────────────────── */
.reviews-head { }
.reviews-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.reviews-head__score { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.03em; color: var(--tg-text); }
.reviews-head__meta  { margin-top: var(--s-2); font-size: var(--fs-md); color: var(--tg-text-2); }

.review-stars-avg {
  position: relative;
  display: inline-block;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  line-height: 1;
  user-select: none;
}
.review-stars-avg__base {
  color: rgba(168, 184, 204, 0.28);
}
.review-stars-avg__fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f5c451;
  pointer-events: none;
}

.review-stars-static {
  display: inline-flex;
  gap: 1px;
  letter-spacing: 0;
  line-height: 1;
  font-size: 0.95rem;
}
.review-stars-static__s {
  color: rgba(168, 184, 204, 0.28);
}
.review-stars-static__s.is-on { color: #f5c451; }

/* Segment control */
.seg-ctrl {
  display: flex;
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-border-soft);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
  margin-bottom: var(--s-4);
}
.seg-ctrl__btn {
  flex: 1;
  padding: var(--s-2) var(--s-3);
  border: none;
  border-radius: calc(var(--r-md) - 3px);
  background: transparent;
  color: var(--tg-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base);
}
.seg-ctrl__btn:hover { color: var(--tg-text); }
.seg-ctrl__btn.is-active {
  background: var(--tg-card);
  color: var(--text);
  border: 1px solid var(--tg-border);
  box-shadow: none;
}

.reviews-cat { }
.review-item + .review-item {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--glass-border);
}
.review-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.review-item__who {
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  color: var(--tg-text);
  min-width: 0;
  word-break: break-word;
}
.review-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.review-item__date { color: var(--tg-text-2); font-size: var(--fs-xs); }
.review-item__text {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--tg-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.reviews-cat {
  margin-bottom: 8px;
  overflow: hidden;
}

/* Review submission: 1–5 stars */
.review-box .review-stars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: var(--s-3) 0 var(--s-4);
}
.review-star-btn {
  flex: 1;
  min-height: 44px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1px solid rgba(245, 196, 81, 0.22);
  background: #071625;
  color: rgba(168, 184, 204, 0.35);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-fast);
}
.review-star-btn.is-on {
  color: #f5c451;
  border-color: rgba(245, 196, 81, 0.55);
  background: rgba(245, 196, 81, 0.10);
}
.review-star-btn.is-selected {
  box-shadow: 0 0 0 1px rgba(245, 196, 81, 0.35);
}
.review-star-btn:active { transform: scale(0.97); }
html[data-theme="light"] .review-star-btn {
  background: #EAF2F9;
  border-color: #D7E3EE;
  color: rgba(11, 23, 38, 0.28);
}
html[data-theme="light"] .review-star-btn.is-on {
  color: #d4a017;
  border-color: rgba(212, 160, 23, 0.45);
  background: rgba(245, 196, 81, 0.16);
}
html[data-theme="light"] .review-stars-avg__base,
html[data-theme="light"] .review-stars-static__s {
  color: rgba(11, 23, 38, 0.18);
}
html[data-theme="light"] .review-stars-avg__fill,
html[data-theme="light"] .review-stars-static__s.is-on {
  color: #d4a017;
}
.review-box textarea {
  width: 100%; margin-top: var(--s-2); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--text); font: inherit; resize: vertical; min-height: 64px;
  margin-bottom: 0;
}

/* ── Session wait ────────────────────────────────────────────────────── */
.session-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
  margin: 12vh auto 0;
  padding: var(--s-6) var(--s-5);
  border-radius: 20px;
  background:
    linear-gradient(165deg, rgba(26, 51, 80, 0.72), rgba(15, 31, 51, 0.92));
  border: 1px solid rgba(108, 207, 255, 0.12);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.session-wait__logo {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-4);
  transform: scaleY(-1);
  transform-origin: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  opacity: 0.94;
}
.session-wait__spinner {
  width: 28px;
  height: 28px;
  margin-bottom: var(--s-4);
  border-radius: 50%;
  border: 2px solid rgba(168, 184, 204, 0.16);
  border-top-color: var(--tg-primary);
  border-right-color: var(--tg-primary-light);
  animation: session-spin .85s linear infinite;
}
.session-wait__title {
  margin: 0 0 6px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-600);
  letter-spacing: 0.02em;
  color: var(--tg-text);
}
.session-wait__hint {
  margin: 0 0 var(--s-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--tg-muted);
  max-width: 240px;
}
.session-wait .btn-primary {
  max-width: 200px;
  width: 100%;
  margin: 0 auto;
}
@keyframes session-spin {
  to { transform: rotate(360deg); }
}

/* ── Wallet ──────────────────────────────────────────────────────────── */
.wallet-line { font-size: var(--fs-sm); color: var(--muted); word-break: break-all; margin-top: var(--s-2); }
.wallet-line code { color: var(--accent); font-size: var(--fs-xs); }

/* ── Brand hero (legacy, kept for compatibility) ─────────────────────── */
.brand-hero {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--tg-card);
  border: 1px solid var(--tg-border-soft);
}
.brand-hero__name { font-weight: 600; letter-spacing: .02em; font-size: var(--fs-lg); color: var(--tg-text); }
.brand-hero__tag  { margin-top: 3px; font-size: var(--fs-sm); color: var(--muted); }

/* ── Bank picker (прокручиваемый список) ───────────────────────────── */
.bank-picker {
  position: relative;
  margin: var(--s-2) 0 var(--s-4);
}
.bank-picker__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-500);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.bank-picker__trigger:hover {
  border-color: var(--tg-border-hover);
  background: var(--tg-card);
}
.bank-picker__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-picker__chev { flex-shrink: 0; font-size: 10px; color: var(--muted); opacity: 0.8; transition: transform var(--t-base) var(--ease-out); }
.bank-picker--open .bank-picker__chev { transform: rotate(180deg); }
.bank-picker__popover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  max-height: min(52vh, 340px);
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border);
  background: var(--tg-card);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.bank-picker__popover[hidden] {
  display: none !important;
}
.bank-picker__search {
  padding: 8px;
  border-bottom: 1px solid var(--tg-border-soft);
  flex-shrink: 0;
}
.bank-picker__search input {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text);
  font-size: var(--fs-sm);
}
.bank-picker__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.bank-picker__list li {
  margin: 0;
}
.bank-picker__option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--tg-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}
.bank-picker__option:hover {
  background: var(--tg-hover-overlay);
}
.bank-picker__option.is-selected {
  color: var(--tg-primary);
  background: rgba(42, 171, 238, 0.08);
}

/* Legacy bank grid (не используется в sell-форме) */
.bank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-4);
}
.bank-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 42px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast),
              transform var(--t-fast) var(--ease-out);
}
.bank-chip:hover { border-color: var(--tg-border-hover); background: var(--tg-card); }
.bank-chip:active { transform: scale(.985); }
.bank-chip.is-selected {
  border-color: var(--tg-primary);
  background: var(--tg-card);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--tg-primary);
}
.bank-chip__dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--tg-muted);
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.bank-chip.is-selected .bank-chip__dot { background: var(--tg-primary); box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.18); }
@media (max-width: 360px) { .bank-grid { grid-template-columns: 1fr; } }

/* ── Button loading state ──────────────────────────────────────────── */
.btn-primary.is-loading,
.btn--primary.is-loading,
.btn-secondary.is-loading,
.btn--secondary.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-primary.is-loading::after,
.btn--primary.is-loading::after,
.btn-secondary.is-loading::after,
.btn--secondary.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: .9;
  animation: btnSpin .85s linear infinite;
  color: var(--text);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.btn-primary.is-loading::after,
.btn--primary.is-loading::after {
  color: var(--on-primary);
}
@keyframes btnSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Form niceties ─────────────────────────────────────────────────── */
.input--error, input.is-error, textarea.is-error {
  border-color: rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Trading access (registration checkbox) ─────────────────────────── */
.trading-reg-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: #C5D4E4;
}
.trading-reg-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  flex: none;
  border-radius: 5px;
  border: 1.5px solid rgba(0, 158, 255, 0.75);
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
}
.trading-reg-check input:checked {
  background: #009EFF;
  border-color: #009EFF;
}
.trading-reg-check input:checked::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.hub-card--disabled,
.qa-tile--disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .rate-row { grid-template-columns: 1fr; }
  .quick-actions__grid { grid-template-columns: 1fr; }
  .home-active-order__timeline,
  .order-room-timeline,
  .timeline { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hub-cards { grid-template-columns: 1fr; }
}

/* ── Sell calculator (trade hub) ─────────────────────────────────────── */
.sell-calc {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--tg-border-soft);
}
.sell-calc__head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  min-height: 40px;
}
.sell-calc__ico {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 158, 255, 0.12);
  border: 1px solid rgba(0, 158, 255, 0.22);
  color: #16AFFF;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(0, 158, 255, 0.12);
}
.sell-calc__ico.is-buy { color: #16AFFF; }
.sell-calc__ico:active { transform: scale(0.96); }
.sell-calc__ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.65; }
.sell-calc__title {
  margin: 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #FFFFFF;
}
.sell-calc__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2px;
  width: 168px;
  margin: 0;
  padding: 2px;
  border-radius: 999px;
  background: #0A1B2D;
  border: 0;
}
.sell-calc__switch-btn {
  height: 30px;
  margin: 0;
  padding: 0 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #91A6BA;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.sell-calc__switch-btn.is-active {
  background: #009EFF;
  color: #fff;
}
.sell-calc__switch-btn:disabled,
.sell-calc__ico:disabled,
.vx-swap__flip:disabled { opacity: .4; }
.sell-calc__field { margin-bottom: var(--s-2); }
.sell-calc__field label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--bx-muted);
  margin-bottom: 4px;
}
.sell-calc__field input {
  width: 100%;
  margin-bottom: 0;
}
.sell-calc__input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sell-calc__input-row input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 8px 12px;
}
.sell-calc__btn {
  flex: 0 0 auto;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border: none;
  border-radius: var(--r-md);
  background: var(--tg-primary);
  color: var(--on-primary);
  font-size: 12px;
  font-weight: var(--fw-600);
  line-height: 1;
  cursor: pointer;
}
.sell-calc__btn:active { transform: scale(0.97); }
.sell-calc__rows {
  display: grid;
  gap: 6px;
  margin-top: var(--s-2);
}
.sell-calc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-sm);
}
.sell-calc__row span { color: var(--bx-muted); }
.sell-calc__row strong {
  color: var(--tg-text);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-600);
}
.sell-calc__row--total strong {
  font-size: var(--fs-lg);
  color: var(--tg-success);
}

/* ── Profile ID copy ─────────────────────────────────────────────────── */
.profile-hero__id-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: 4px;
}
.profile-hero__id { margin-top: 0; }
.profile-id-copy {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.profile-id-copy svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.profile-id-copy:hover { border-color: var(--tg-border-hover); color: var(--tg-text); }
.profile-id-copy.is-copied { color: var(--tg-success); border-color: rgba(34, 197, 94, 0.35); }
.loyalty-card {
  cursor: pointer;
  transition: border-color var(--t-base), transform var(--t-fast) var(--ease-out);
}
.loyalty-card:hover { border-color: var(--tg-border-hover); }
.loyalty-card:active { transform: scale(0.99); }
.loyalty-card__hint {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--tg-primary);
}

/* ── Loyalty levels modal ────────────────────────────────────────────── */
.loyalty-modal__card {
  max-height: min(88vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: var(--s-4);
}
.loyalty-levels {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 2px 2px var(--s-3);
  margin: 0 calc(-1 * var(--s-1));
  scrollbar-width: thin;
}
.loyalty-level-chip {
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-width: 104px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
}
.loyalty-level-chip.is-active {
  border-color: var(--tg-primary);
  background: rgba(42, 171, 238, 0.14);
  color: var(--tg-text);
  box-shadow: 0 0 0 1px rgba(42, 171, 238, 0.25);
}
.loyalty-level-chip__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
}
.loyalty-level-chip__bonus {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--bx-muted);
}
.loyalty-level-chip.is-active .loyalty-level-chip__bonus { color: var(--tg-primary-light); }
.loyalty-level-chip.is-current:not(.is-active) {
  border-color: rgba(34, 197, 94, 0.35);
}
.loyalty-benefits {
  margin-top: var(--s-2);
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.loyalty-benefits__title {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-600);
}
.loyalty-benefits__cap {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-sm);
  color: var(--bx-muted);
}
.loyalty-benefits__list {
  margin: 0;
  padding-left: 1.15em;
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--tg-text);
  line-height: var(--lh-normal);
}
.loyalty-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-3);
  flex-shrink: 0;
}
.loyalty-nav__btn {
  flex: 1;
  padding: 8px var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.loyalty-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Trade requisites ───────────────────────────────────────────────── */
.req-section { margin-top: var(--s-3); }
.req-why {
  margin: 0 0 var(--s-3);
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}
.req-why__title {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  font-weight: var(--fw-600);
}
.req-why .hint { margin: 0 0 10px; }
.req-why .btn-secondary { width: 100%; }
#reqAddBtn[hidden],
#reqForm[hidden],
#reqBankTrigger[hidden],
#reqCustomBank[hidden],
#reqBankBack[hidden] {
  display: none !important;
}
.req-empty { margin: 0 0 var(--s-3); }
.req-add { width: 100%; }
.req-item {
  margin-bottom: var(--s-2);
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
}
.req-item.is-favorite { border-color: rgba(250, 204, 21, 0.45); }
.req-pick {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.req-pick.is-selected { border-color: var(--tg-primary); }
.req-item__top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.req-item__bank {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-600);
}
.req-del {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bx-muted);
  font-size: var(--fs-sm);
  line-height: 1.2;
  cursor: pointer;
}
.req-star {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bx-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.req-star.is-on { color: var(--tg-warning); }
.req-item__name,
.req-item__phone {
  margin-top: 2px;
  color: var(--bx-muted);
  font-size: var(--fs-sm);
}
.req-methods {
  display: flex;
  gap: 8px;
}
.req-method {
  flex: 1;
  min-height: 40px;
  margin: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  cursor: pointer;
}
.req-method.is-on {
  border-color: var(--tg-primary);
  background: rgba(56, 189, 248, 0.12);
}
.req-item__method {
  margin-top: 4px;
  color: var(--tg-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
}
#reqPhoneBlock[hidden],
#reqCardBlock[hidden] { display: none !important; }
.req-form { margin-top: var(--s-3); }
.req-form label { margin-top: var(--s-2); }
.req-bank { margin-bottom: var(--s-2); }
.req-bank-row { display: flex; align-items: center; gap: 8px; }
.req-bank-row .bank-picker__trigger { margin: 0; }
.req-custom-bank { flex: 1; width: auto; min-width: 0; margin: 0; }
.req-bank-back {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-bg-2);
  color: var(--tg-text);
  font-size: var(--fs-sm);
}
.req-bank .bank-picker__popover {
  top: auto;
  bottom: calc(100% + 4px);
}
.req-bank-other {
  position: sticky;
  bottom: 0;
  background: var(--tg-card);
  border-top: 1px solid var(--tg-border-soft);
}
.req-form__actions {
  display: flex;
  gap: 8px;
  margin-top: var(--s-3);
}
.req-form__actions .btn-secondary,
.req-form__actions .btn-primary { flex: 1; }
#reqErr { margin: 8px 0 0; }

/* ── Account page density ───────────────────────────────────────────── */
.account-page {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.account-page > * {
  min-width: 0;
  max-width: 100%;
}
.account-page > .glass,
.account-page > .stat-grid,
.account-page > .btn-secondary {
  margin-bottom: 0;
}
.account-page .profile-hero {
  padding: 8px 10px;
}
.account-page .profile-hero__row { gap: 8px; }
.account-page .profile-hero__mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.85rem;
}
.account-page .profile-hero__brand { font-size: 0.92rem; }
.account-page .profile-hero__id { font-size: 0.72rem; }
.account-page .profile-hero__id-row { gap: 6px; margin-top: 1px; }
.account-page .profile-id-copy { width: 22px; height: 22px; }
.account-page .profile-id-copy svg { width: 12px; height: 12px; }
.account-page .stat-grid { gap: 6px; }
.account-page .stat-tile { padding: 6px 8px; }
.account-page .stat-tile__k {
  margin-bottom: 1px;
  font-size: 0.68rem;
}
.account-page .stat-tile__v { font-size: 0.95rem; }
.account-page .loyalty-card,
.account-page .ref-card,
.account-page .promo-card { padding: 8px 10px; }
.account-page .promo-form {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.account-page .promo-form__input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  margin: 0;
  padding: 6px 8px;
  font-size: 0.78rem;
}
.account-page .promo-form__btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 34px;
  margin: 0;
  padding: 0 10px;
  font-size: 0.78rem;
}
.account-page .promo-card .profile-kv--tight { margin-top: 6px; }
.account-page .glass__title {
  margin: 0 0 6px;
  font-size: 0.78rem;
}
.account-page .loyalty-ring {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  min-width: 0;
}
.account-page .loyalty-ring__value { font-size: 0.95rem; min-width: 0; }
.account-page .loyalty-ring__lbl {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  text-align: right;
}
.account-page .loyalty-progress { margin: 4px 0 6px; }
.account-page .loyalty-progress__track { height: 4px; }
.account-page .loyalty-progress__cap { font-size: 0.68rem; }
.account-page .loyalty-card__hint { margin: 4px 0 0; font-size: 0.68rem; }
.account-page .profile-kv--tight { gap: 0; }
.account-page .profile-kv--tight .kv {
  padding: 3px 0;
  font-size: 0.78rem;
  min-width: 0;
}
.account-page .profile-kv--tight .kv span,
.account-page .profile-kv--tight .kv strong {
  min-width: 0;
}
.account-page .profile-kv--tight .kv strong {
  overflow-wrap: anywhere;
}
.account-page > .btn-secondary {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.82rem;
}
.ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.ref-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ref-cell span {
  color: var(--tg-text-2);
  font-size: 0.68rem;
  line-height: 1.2;
}
.ref-cell strong {
  color: var(--tg-text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}
.ref-cell--wide { grid-column: 1 / -1; }
.ref-link { margin: 0 0 8px; min-width: 0; }
.ref-link__label {
  display: block;
  margin-bottom: 4px;
  color: var(--tg-text-2);
  font-size: 0.68rem;
}
.ref-link__row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 3px 3px 8px;
  border: 1px solid var(--tg-border-soft);
  border-radius: 8px;
  background: var(--tg-bg-2);
}
.ref-link__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--tg-text);
}
.ref-link__copy {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--tg-border-soft);
  background: var(--tg-card);
  color: var(--tg-text-2);
  cursor: pointer;
}
.ref-link__copy svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.ref-link__copy:active { color: var(--tg-text); }
.ref-note {
  margin: 4px 0;
  color: var(--tg-text-2);
  font-size: 0.68rem;
  line-height: 1.35;
}
.ref-progress { margin-top: 6px; }
.ref-progress__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
}
.ref-levels {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 6px 0 2px;
}
.ref-level {
  flex: 0 0 auto;
  min-width: 78px;
  padding: 4px 6px;
  border: 1px solid var(--tg-border-soft);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ref-level strong { font-size: 0.72rem; }
.ref-level span { color: var(--tg-text-2); font-size: 0.64rem; }
.ref-level.is-current { border-color: var(--tg-primary); }
.ref-level.is-next { border-style: dashed; }

/* ── Atmosphere: dark navy field with quiet sparks ─────────────────── */
.atm {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #020914;
}
.atm__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* ── Reference lock: visual copy of the attached mock ─────────────── */
.shell {
  padding: 0 20px;
  padding-top: 4px;
}
.stage { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.atm__stars { opacity: .28; }

.tabbar {
  width: calc(100% - 28px);
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  background: #071625;
  border: 1px solid rgba(0, 158, 255, 0.28);
  border-radius: 20px;
  box-shadow: 0 0 24px rgba(0, 158, 255, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 6px 6px 8px;
}
html[data-theme="light"] .tabbar {
  background: #FFFFFF;
  border-color: #D7E3EE;
  box-shadow: 0 8px 20px rgba(11, 23, 38, 0.08);
}
.tabbar__item {
  min-height: 44px;
  gap: 2px;
  padding: 4px 0;
  color: #91A6BA;
}
.tabbar__item.is-active { color: #009EFF; }
.tabbar__ico svg { width: 22px; height: 22px; stroke-width: 1.65; }
.tabbar--five .tabbar__lbl,
.tabbar__lbl { font-size: 10px; font-weight: 500; letter-spacing: 0; }

.vx-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin: 2px 0 10px;
}
.vx-top__left, .vx-top__right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vx-brand { display: flex; align-items: center; gap: 8px; }
.vx-brand__logo {
  width: 26px; height: 26px;
  transform: scaleY(-1);
  filter: none;
}
.vx-brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.vx-brand__txt span:first-child {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #FFFFFF;
}
.vx-brand__txt span:last-child {
  font-size: 8px; font-weight: 600; letter-spacing: .16em; color: #8FA3BD;
}
.vx-page-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vx-ico-btn[hidden], .vx-brand[hidden], .vx-page-title[hidden] { display: none !important; }
.vx-ico-btn {
  width: 28px; height: 28px;
  border: 0; padding: 0;
  background: transparent;
  color: #D7E4F0;
  display: grid; place-items: center;
}
.vx-ico-btn svg { width: 20px; height: 20px; }
#headerChannel { color: #16AFFF; }
#headerCopyLink { color: #16AFFF; }
#headerRating { color: #f5c451; }

.vx-bal {
  position: relative;
  overflow: hidden;
  margin-top: 4px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: #0A1B2D;
  border: 1px solid rgba(0, 158, 255, 0.24);
  box-shadow: 0 0 28px rgba(0, 158, 255, 0.08);
}
.vx-bal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(0, 158, 255, 0.16), transparent 58%),
    linear-gradient(135deg, transparent 42%, rgba(22, 175, 255, 0.05) 42% 43%, transparent 43% 58%, rgba(22, 175, 255, 0.04) 58% 59%, transparent 59%);
}
.vx-bal > * { position: relative; }
.vx-bal__k { font-size: 13px; color: #91A6BA; margin-bottom: 8px; }
.vx-bal__v {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: #FFFFFF;
}
.vx-bal__f { margin-top: 6px; font-size: 13px; color: #91A6BA; }
.vx-bal__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.vx-bal .vx-btn--sec {
  background: #071625;
  border: 1px solid rgba(0, 158, 255, 0.22);
}

.vx-btn {
  height: 42px;
  border-radius: 12px;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vx-btn--pri {
  background: #009EFF;
  color: #fff;
  box-shadow: 0 0 16px rgba(0, 158, 255, 0.35);
}
.vx-btn--sec {
  background: #071625;
  color: #FFFFFF;
  border: 1px solid rgba(0, 158, 255, 0.22);
}
.vx-btn--wide { width: 100%; height: 44px; border-radius: 12px; margin-top: 14px; }
.vx-btn:active { transform: scale(.985); }
.vx-btn:disabled { opacity: .4; }

.vx-acts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 14px;
}
.vx-act {
  border: 1px solid rgba(0, 158, 255, 0.18);
  background: #0A1B2D;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 12px 4px 10px;
  border-radius: 16px;
  box-shadow: 0 0 18px rgba(0, 158, 255, 0.05);
}
.vx-act__ico {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 158, 255, 0.12);
  border: 0;
  color: #16AFFF;
  display: grid; place-items: center;
}
.vx-act__ico svg { width: 16px; height: 16px; }
.vx-act__t { font-size: 11px; line-height: 1.2; text-align: center; font-weight: 500; color: #D7E4F0; }
.vx-act.is-off { opacity: .4; }
.vx-act:active { transform: scale(.98); }

.vx-rate {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr 16px;
  gap: 10px;
  align-items: center;
  margin: 2px 0 14px;
  padding: 12px;
  border: 1px solid rgba(0, 158, 255, 0.2);
  border-radius: 16px;
  background: #0A1B2D;
  box-shadow: 0 0 18px rgba(0, 158, 255, 0.06);
  color: inherit;
  text-align: left;
}
.vx-rate__ico {
  width: 36px; height: 36px; border-radius: 12px;
  background: rgba(0, 158, 255, 0.12); display: grid; place-items: center; color: #16AFFF;
}
.vx-rate__ico svg { width: 18px; height: 18px; }
.vx-rate__t { display: block; font-size: 14px; font-weight: 600; color: #FFFFFF; }
.vx-rate__s { display: block; font-size: 12px; color: #91A6BA; margin-top: 3px; line-height: 1.35; }
.vx-rate__go svg { width: 14px; height: 14px; color: #16AFFF; }
.vx-rate:active { transform: scale(.985); }

.vx-linkrow {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr 16px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 0;
  border-radius: 14px;
  background: #0A1B2D;
  color: inherit;
  text-align: left;
}
.vx-linkrow__ico {
  width: 36px; height: 36px; border-radius: 50%;
  background: #0D2135; display: grid; place-items: center; color: #009EFF;
}
.vx-linkrow__ico svg { width: 15px; height: 15px; }
.vx-linkrow__t { display: block; font-size: 13px; font-weight: 600; }
.vx-linkrow__s { display: block; font-size: 11px; color: #91A6BA; margin-top: 2px; }
.vx-linkrow__go svg { width: 14px; height: 14px; color: #91A6BA; }

.vx-sec {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0 8px;
  font-size: 14px; font-weight: 600;
}
.vx-sec__all {
  border: 0; background: transparent; color: #009EFF; font-size: 13px; font-weight: 600;
}

.vx-ops { display: flex; flex-direction: column; gap: 8px; }
.vx-op {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0, 158, 255, 0.16);
  border-radius: 16px;
  background: #0A1B2D;
  box-shadow: none;
  color: inherit;
  text-align: left;
}
.vx-op:active { transform: scale(.985); }
.vx-op__ico {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(145, 166, 186, 0.12); color: #91A6BA;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.vx-op:has(.is-in) .vx-op__ico {
  background: rgba(22, 199, 132, 0.16);
  color: #16C784;
}
.vx-op__ico svg { width: 15px; height: 15px; }
.vx-op__ico--usdt { background: #12303a; color: #16C784; }
.vx-op__ico--rub { background: #0D2135; color: #91A6BA; }
.vx-op__t { display: block; font-size: 13px; font-weight: 500; }
.vx-op__d { display: block; font-size: 11px; color: #91A6BA; margin-top: 2px; }
.vx-op__right { text-align: right; }
.vx-op__amt { display: block; font-size: 13px; font-weight: 600; }
.vx-op__amt.is-in { color: #16C784; }
.vx-op__amt.is-out { color: #FF5364; }
.vx-op__st { display: block; font-size: 10px; color: #91A6BA; margin-top: 4px; }
.vx-op__st.is-ok {
  display: inline-block;
  color: #16C784;
  border: 1px solid rgba(22, 199, 132, 0.45);
  border-radius: 999px;
  padding: 1px 7px;
}
.vx-op__st.is-bad { color: #FF5364; }
.vx-op__st.is-wait { color: #16AFFF; }
.vx-empty { font-size: 13px; color: #91A6BA; padding: 8px 0; }
.vx-note-list { display: grid; gap: 8px; }
.vx-note-card {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: #0A1B2D;
  color: inherit;
  text-align: left;
}
.vx-note-card__ico {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  color: #16AFFF;
  background: rgba(22, 175, 255, 0.1);
}
.vx-note-card__ico svg { width: 15px; height: 15px; }
.vx-note-card__body { min-width: 0; display: grid; gap: 2px; }
.vx-note-card__t { font-size: 13px; font-weight: 650; line-height: 1.3; }
.vx-note-card__b {
  font-size: 12px; line-height: 1.35; color: #91A6BA;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vx-note-card__time { font-size: 11px; color: #91A6BA; }
html[data-theme="light"] .vx-note-card { background: #FFFFFF; border-color: #D7E3EE; }
html[data-theme="light"] .vx-note-card__t { color: #0B1726; }
.vx-ops .vx-empty { display: block; padding: 12px; }

.vx-mini-stats {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 12px;
  font-size: 11px; color: #91A6BA;
}

.trade-switch {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 3px; margin: 2px 0 14px;
  border-radius: 22px;
  background: #071625;
  border: 0;
}
.trade-switch button {
  height: 34px; border: 0; border-radius: 18px;
  background: transparent; color: #91A6BA;
  font-size: 13px; font-weight: 600;
}
.trade-switch button.is-on { background: #009EFF; color: #fff; }

.vx-swap { margin-top: 2px; }
.vx-swap__box {
  background: #0A1B2D;
  border: 1px solid rgba(0, 158, 255, 0.2);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 0 18px rgba(0, 158, 255, 0.05);
}
.vx-swap__k { font-size: 12px; color: #91A6BA; margin-bottom: 8px; font-weight: 500; }
.vx-swap__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.vx-coin { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; color: #FFFFFF; }
.vx-coin__mark {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 158, 255, 0.12);
  border: 1px solid rgba(0, 158, 255, 0.18);
  color: #16AFFF;
  display: grid; place-items: center;
  font-size: 13px; flex: 0 0 28px;
}
.vx-swap__row input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 0; background: transparent;
  color: #FFFFFF; font-size: 22px; font-weight: 700;
  text-align: right; outline: none; padding: 0;
  box-shadow: none;
}
.vx-swap__row input::placeholder { color: #91A6BA; opacity: 0.7; }
.vx-swap__out {
  min-width: 0;
  max-width: 100%;
  justify-self: end;
  font-size: 22px;
  font-weight: 700;
  text-align: right;
  line-height: 1.15;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}
.vx-swap__out.is-empty { color: #91A6BA; font-weight: 600; }
.vx-swap__warn {
  margin: 10px 2px 2px;
  padding: 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}
.vx-swap__warn[hidden] { display: none !important; }
.vx-swap__pay {
  margin: 8px 0 0;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: #91A6BA;
}
.vx-swap__pay:empty { display: none; }
.vx-pct { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.vx-pct button {
  height: 32px;
  border: 1px solid rgba(0, 158, 255, 0.16);
  border-radius: 10px;
  background: #071625;
  color: #D7E4F0;
  font-size: 12px;
  font-weight: 600;
}
.vx-pct button.is-on,
.vx-pct button:active {
  color: #16AFFF;
  border-color: rgba(0, 158, 255, 0.4);
  background: rgba(0, 158, 255, 0.12);
}
.vx-swap__flip {
  width: 100%;
  height: 36px;
  margin: 8px 0;
  border-radius: 12px;
  border: 1px solid rgba(0, 158, 255, 0.28);
  background: #071625;
  color: #16AFFF;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  box-shadow: none;
}
.vx-swap__flip svg { width: 18px; height: 18px; stroke-width: 1.65; }
.vx-swap__flip:active { transform: scale(0.98); background: rgba(0, 158, 255, 0.10); }
.vx-meta { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.vx-meta__row { display: flex; justify-content: space-between; font-size: 13px; }
.vx-meta__row span { color: #91A6BA; }
.vx-textback {
  display: block; margin: 14px auto 0; border: 0; background: transparent;
  color: #91A6BA; font-size: 13px;
}

.vx-sup { text-align: center; padding: 18px 8px 8px; }
.vx-sup__ico {
  width: 64px; height: 64px; margin: 0 auto 14px;
  border-radius: 50%; background: #071625;
  color: #91A6BA; display: grid; place-items: center;
}
.vx-sup__ico svg { width: 28px; height: 28px; }
.vx-sup h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.vx-sup p { margin: 0 0 16px; font-size: 13px; color: #91A6BA; line-height: 1.4; }

.vx-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px 0 16px;
}
.vx-tile {
  height: 72px; border: 0; border-radius: 14px;
  background: #0A1B2D; color: #C5D4E4;
  font-size: 12px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.vx-tile svg { width: 18px; height: 18px; color: #91A6BA; }

.vx-chat {
  margin-top: 8px;
  background: #0A1B2D;
  border-radius: 16px;
  padding: 10px;
}
.chat-log {
  background: transparent;
  border: 0;
  max-height: 32vh;
  min-height: 140px;
}
.chat-compose { flex-direction: row; align-items: flex-end; }
.chat-compose textarea {
  flex: 1; min-height: 40px; max-height: 88px;
  border-radius: 12px; border: 1px solid rgba(0, 158, 255, 0.18);
  background: #071625; color: #FFFFFF; padding: 10px 12px;
}
.chat-send, .chat-send.btn-primary {
  width: 40px; min-width: 40px; height: 40px; min-height: 40px;
  border-radius: 20px; padding: 0; margin: 0;
}

.vx-pills {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  margin: 2px 0 12px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vx-pills::-webkit-scrollbar { display: none; }
.vx-pills__ink {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 0;
  border-radius: 999px;
  background: #009EFF;
  box-shadow: 0 0 14px rgba(0, 158, 255, 0.28);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translateX(0);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}
.vx-pills__ink.is-ready { opacity: 1; }
.vx-pills__ink.is-snap {
  transition: none;
}
.vx-pills button {
  position: relative;
  z-index: 1;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #91A6BA;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex: none;
  transition:
    color 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.vx-pills button:active { transform: scale(0.97); }
.vx-pills button.is-on {
  background: transparent;
  color: #fff;
  box-shadow: none;
}
.vx-pills--reviews button.is-on {
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.vx-idcard {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  background: #0A1B2D;
  border-radius: 18px;
  padding: 14px;
  margin: 2px 0 12px;
  cursor: pointer;
  text-align: left;
}
.vx-idcard__ava {
  width: 56px; height: 56px; border-radius: 50%;
  background: #0D2135; color: #009EFF;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 2px #009EFF, 0 0 16px rgba(0, 158, 255, 0.45);
}
.vx-idcard__ava img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.vx-idcard__name { font-size: 18px; font-weight: 650; line-height: 1.2; }
.vx-idcard__id {
  font-size: 13px; color: #91A6BA; margin-top: 4px;
  display: flex; align-items: center; gap: 6px;
}
.vx-idcard__chev { color: #91A6BA; display: grid; }
.vx-idcard__chev svg { width: 16px; height: 16px; }
.vx-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 3px 8px 3px 3px;
  border-radius: 20px;
  background: rgba(0, 158, 255, 0.16);
  color: #16AFFF;
  font-size: 12px; font-weight: 600;
}
.vx-badge svg {
  width: 16px; height: 16px; padding: 2px;
  border-radius: 50%; background: #009EFF; color: #fff;
}
.vx-copy { border: 0; background: transparent; color: #91A6BA; padding: 0; }
.vx-copy svg { width: 13px; height: 13px; }

.vx-menu { background: #0A1B2D; border-radius: 16px; margin: 10px 0; overflow: hidden; }
.vx-menu__row {
  width: 100%; display: grid;
  grid-template-columns: 20px 1fr auto 14px;
  gap: 10px; align-items: center;
  padding: 13px 14px; border: 0; border-bottom: 1px solid rgba(0, 158, 255, 0.10);
  background: transparent; color: inherit; text-align: left; font-size: 14px;
}
.vx-menu__row:last-child { border-bottom: 0; }
.vx-menu__row svg { width: 16px; height: 16px; color: #91A6BA; }
.vx-menu__row strong { font-size: 12px; color: #91A6BA; font-weight: 500; }

.vx-menu__ico,
.vx-menu__chev {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
  flex: none;
  color: #16AFFF;
  line-height: 0;
  overflow: hidden;
}
.vx-menu__ico svg,
.vx-menu__chev svg {
  width: 16px;
  height: 16px;
  display: block;
  margin: 0;
  stroke-width: 1.65;
  overflow: visible;
  transform-box: fill-box;
  transform-origin: center;
}
.vx-menu__chev {
  width: 14px;
  height: 14px;
  color: #91A6BA;
}
.vx-menu__chev svg {
  width: 14px;
  height: 14px;
}


.vx-logout {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 14px 16px;
  border: 0; border-radius: 16px;
  background: #241318;
  color: #ff4d5e;
  font-size: 15px; font-weight: 650;
  text-align: left;
}
.vx-logout__ico {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid #ff4d5e; color: #ff4d5e;
}
.vx-logout svg { width: 15px; height: 15px; }

.vx-note {
  background: #0A1B2D;
  border-radius: 16px;
  padding: 14px 16px;
  color: #C5D4E4;
  font-size: 14px;
  line-height: 1.45;
}
.vx-note p { margin: 0 0 8px; }
.vx-note p:last-child { margin: 0; }
.vx-note strong { color: #FFFFFF; font-weight: 650; }
.vx-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.vx-stats div {
  background: #0A1B2D;
  border-radius: 14px;
  padding: 12px;
}
.vx-stats span { display: block; font-size: 12px; color: #91A6BA; }
.vx-stats strong { display: block; margin-top: 4px; font-size: 15px; font-weight: 650; }

.account-page .ref-card,
.account-page .promo-card,
.account-page .loyalty-card,
.req-section {
  background: #0A1B2D;
  border: 0;
  border-radius: 16px;
  padding: 14px;
  margin: 10px 0;
}
.ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.promo-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.promo-form__input {
  height: 38px; border-radius: 12px; border: 1px solid rgba(0, 158, 255, 0.18);
  background: #071625; color: #FFFFFF; padding: 0 12px;
}
.promo-form__btn { height: 38px; width: auto; padding: 0 14px; border-radius: 19px; }

.home-active-order {
  background: #0A1B2D;
  border: 1px solid rgba(0, 158, 255, 0.2);
  border-radius: 16px;
  padding: 12px; margin: 10px 0; width: 100%; color: inherit; text-align: left;
}

.btn-primary, .btn-secondary { border-radius: 12px; }
.btn-primary { box-shadow: 0 0 16px rgba(0, 158, 255, 0.28); }
.glass { background: #0A1B2D; border: 1px solid rgba(0, 158, 255, 0.18); }

/* mid light overrides moved to end */

@media (max-width: 360px) {
  .vx-bal__v { font-size: 30px; }
  .vx-act__t { font-size: 9px; }
}

/* ── Loyalty program ───────────────────────────────────────────────── */
.loy {
  color: #E8F1FA;
  padding-bottom: 8px;
}
.loy-sub, .loy-muted, .loy-note {
  margin: 0 0 12px;
  color: #91A6BA;
  font-size: 13px;
  line-height: 1.4;
}
.loy-h, .loy-block h3 {
  margin: 16px 0 10px;
  font-size: 15px;
  font-weight: 650;
  color: #E8F1FA;
}
.loy-hero, .loy-block, .loy-tier, .loy-benefit, .loy-gain article {
  background: #0A1B2D;
  border: 1px solid rgba(0, 158, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 0 18px rgba(0, 158, 255, 0.05);
}
.loy-hero {
  padding: 16px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--loy, #009EFF) 18%, transparent);
  border-color: color-mix(in srgb, var(--loy, #009EFF) 42%, transparent);
}
.loy-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.loy-kicker {
  margin: 0 0 6px;
  color: #91A6BA;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.loy-hero h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.loy-hero__bonus {
  margin: 6px 0 0;
  color: var(--loy, #00BFFF);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-shadow: 0 0 16px color-mix(in srgb, var(--loy, #00BFFF) 45%, transparent);
}
.loy-hero__range { margin: 10px 0 0; color: #C5D4E4; font-size: 13px; }
.loy-crown {
  width: 46px; height: 46px; border-radius: 16px;
  display: grid; place-items: center; flex: none;
  color: var(--loy, #00BFFF);
  background: color-mix(in srgb, var(--loy, #00BFFF) 16%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--loy, #00BFFF) 28%, transparent);
}
.loy-crown svg { width: 22px; height: 22px; }
button.loy-crown { border: 0; padding: 0; cursor: pointer; }
.loy-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.loy-stats div {
  background: #071625;
  border: 1px solid rgba(0, 158, 255, 0.16);
  border-radius: 14px;
  padding: 12px;
}
.loy-stats span { display: block; color: #91A6BA; font-size: 12px; }
.loy-stats strong { display: block; margin-top: 4px; font-size: 15px; font-weight: 650; }
.loy-badge {
  display: inline-flex;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--loy, #00BFFF) 16%, transparent);
  color: var(--loy, #00BFFF);
  font-size: 12px;
  font-weight: 650;
}
.loy [data-tier="standard"] { --loy: #00BFFF; }
.loy [data-tier="silver"] { --loy: #AFC4D8; }
.loy [data-tier="gold"] { --loy: #F5B942; }
.loy [data-tier="platinum"] { --loy: #B8D9FF; }
.loy [data-tier="vip"] { --loy: #9B6CFF; }
.loy-block { margin-top: 12px; padding: 14px; }
.loy-block h3 { margin: 0 0 10px; }
.loy-progress__head, .loy-req {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.loy-progress__head span, .loy-req span, .loy-progress__meta span { color: #91A6BA; font-size: 12px; }
.loy-progress__head strong { color: var(--loy, #16AFFF); font-size: 13px; }
.loy-progress__ratio { margin: 8px 0; font-size: 18px; font-weight: 700; }
.loy-progress__meta { display: grid; gap: 8px; margin-top: 10px; }
.loy-progress__meta div, .loy-req { display: flex; justify-content: space-between; gap: 10px; }
.loy-progress__meta strong, .loy-req strong { font-size: 13px; font-weight: 650; text-align: right; }
.loy-req + .loy-req { margin-top: 8px; }
.loy-bar {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: #071321;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.loy-bar > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #1677FF, var(--loy, #16AFFF));
  box-shadow: 0 0 12px color-mix(in srgb, var(--loy, #16AFFF) 70%, transparent);
  transition: width .6s ease;
}
.loy-max { margin: 0 0 8px; font-size: 15px; font-weight: 650; }
.loy-list { display: grid; gap: 8px; }
.loy-tier {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  color: inherit;
  text-align: left;
}
.loy-tier.is-current {
  border-color: #16AFFF;
  box-shadow: 0 0 18px rgba(0, 191, 255, 0.28);
}
.loy-tier.is-locked { opacity: 0.78; }
.loy-tier__ico {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--loy, #00BFFF);
  background: color-mix(in srgb, var(--loy, #00BFFF) 14%, transparent);
}
.loy-tier__ico svg { width: 18px; height: 18px; }
.loy-tier__name { display: block; font-size: 15px; font-weight: 650; }
.loy-tier__range { display: block; margin-top: 2px; color: #91A6BA; font-size: 12px; }
.loy-tier__side { text-align: right; }
.loy-tier__side strong { display: block; color: var(--loy, #00BFFF); font-size: 14px; }
.loy-tier__side em { display: block; margin-top: 2px; color: #91A6BA; font-style: normal; font-size: 11px; }
.loy-benefits, .loy-gain { display: grid; gap: 8px; }
.loy-benefit, .loy-gain article {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px;
}
.loy-benefit__ico {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  color: #16AFFF;
  background: rgba(0, 191, 255, 0.12);
}
.loy-benefit__ico svg { width: 16px; height: 16px; }
.loy-benefit strong, .loy-gain strong { display: block; font-size: 14px; font-weight: 650; }
.loy-benefit em, .loy-gain span {
  display: block; margin-top: 2px;
  color: #91A6BA; font-style: normal; font-size: 12px; line-height: 1.35;
}
.loy-cta {
  width: 100%;
  height: 44px;
  margin-top: 14px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  background: #009EFF;
  box-shadow: 0 0 16px rgba(0, 158, 255, 0.28);
}
.loy-crown {
  border: 1px solid rgba(0, 158, 255, 0.22);
}
.loy-benefit__ico,
.loy-tier__ico {
  border: 1px solid rgba(0, 158, 255, 0.16);
}
.loy-benefit__ico svg,
.loy-tier__ico svg,
.loy-crown svg {
  stroke-width: 1.65;
}
@media (prefers-reduced-motion: reduce) {
  .loy-bar > span { transition: none; }
}


.stage {
  transition: opacity var(--t-page) var(--ease-soft), transform var(--t-page) var(--ease-soft);
}

/* ── Cross-page visual lock to Home design system ───────────────────── */
.stage svg,
.vx-top svg,
.tabbar svg {
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vx-linkrow,
.vx-swap__box,
.vx-tile,
.vx-chat,
.vx-idcard,
.vx-menu,
.vx-note,
.vx-stats div,
.vx-note-card,
.account-page .ref-card,
.account-page .promo-card,
.account-page .loyalty-card,
.req-section,
.req-item,
.req-pick,
.order-card,
.order-detail-sheet,
.reviews-head,
.home-active-order,
.sell-calc__switch,
.trade-switch {
  background: var(--tg-card);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 18px rgba(0, 158, 255, 0.05);
  transition: var(--surface-transition);
}

.vx-linkrow,
.vx-swap__box,
.vx-chat,
.vx-idcard,
.vx-menu,
.vx-note,
.vx-note-card,
.req-section,
.account-page .ref-card,
.account-page .promo-card,
.account-page .loyalty-card {
  border-radius: 16px;
}

.vx-tile {
  border-radius: 16px;
  color: #FFFFFF;
}
.vx-tile svg {
  color: #16AFFF;
  opacity: 0.95;
}
.vx-linkrow__go svg,
.vx-idcard__chev,
.vx-copy,
.vx-textback,
.page-head__back,
.empty__icon,
.hub-card__ico {
  color: #91A6BA;
}
.vx-linkrow__ico,
.vx-sup__ico,
.vx-note-card__ico,
.vx-badge svg,
.sell-calc__ico,
.vx-rate__ico,
.vx-act__ico,
.vx-menu__row svg,
.vx-swap__flip {
  color: #16AFFF;
}
.vx-sup__ico {
  background: rgba(0, 158, 255, 0.12);
  border: 1px solid rgba(0, 158, 255, 0.18);
}
.vx-menu__row {
  border-bottom-color: rgba(0, 158, 255, 0.10);
}
.vx-menu__ico {
  color: #16AFFF;
  opacity: 0.95;
}
.vx-menu__row svg {
  color: inherit;
  opacity: 1;
}
.vx-idcard__ava {
  background: #0D2135;
  color: #16AFFF;
  box-shadow: 0 0 0 2px #009EFF, 0 0 16px rgba(0, 158, 255, 0.35);
}
.vx-badge {
  background: rgba(0, 158, 255, 0.16);
  color: #16AFFF;
}
.vx-badge svg { background: #009EFF; color: #fff; }

.trade-switch,
.sell-calc__switch,
.seg-ctrl {
  background: #071625;
  border: 1px solid rgba(0, 158, 255, 0.16);
}
.trade-switch { border-radius: 22px; }
.trade-switch button,
.sell-calc__switch-btn,
.seg-ctrl__btn {
  color: #91A6BA;
}
.trade-switch button.is-on,
.sell-calc__switch-btn.is-active {
  background: #009EFF;
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 158, 255, 0.28);
}
.seg-ctrl__btn.is-active {
  background: #0A1B2D;
  color: #FFFFFF;
  border-color: rgba(0, 158, 255, 0.28);
}

.chat-compose textarea,
.promo-form__input,
.sell-calc__field input,
input:not([type="checkbox"]):not([type="radio"]):not(#sellCalcAmt),
textarea {
  background: #071625;
  border-color: rgba(0, 158, 255, 0.18);
  color: #FFFFFF;
}
.vx-swap__flip {
  background: #071625;
  border: 1px solid rgba(0, 158, 255, 0.28);
  color: #16AFFF;
  border-radius: 12px;
}
.vx-pct button {
  background: #071625;
  border: 1px solid rgba(0, 158, 255, 0.16);
  color: #D7E4F0;
}
.vx-pct button.is-on { color: #16AFFF; background: rgba(0, 158, 255, 0.12); }
.vx-coin__mark {
  background: rgba(0, 158, 255, 0.12);
  border: 1px solid rgba(0, 158, 255, 0.18);
  color: #16AFFF;
}

.btn-primary,
.vx-btn--pri,
.promo-form__btn,
.loy-cta,
.chat-send.btn-primary {
  background: #009EFF;
  color: #fff;
  box-shadow: 0 0 16px rgba(0, 158, 255, 0.28);
}
.loy-cta {
  background: #009EFF;
  border-radius: 12px;
  height: 44px;
  box-shadow: 0 0 16px rgba(0, 158, 255, 0.28);
}
.btn-secondary,
.vx-btn--sec {
  background: #071625;
  border: 1px solid rgba(0, 158, 255, 0.22);
  color: #FFFFFF;
}

.tabbar__item { color: #91A6BA; }
.tabbar__item.is-active,
.tabbar__item.is-active .tabbar__lbl,
.tabbar__item.is-active .tabbar__ico {
  color: #009EFF;
}
.tabbar__item.is-active .tabbar__ico svg {
  color: #009EFF;
  stroke: #009EFF;
}
.tabbar__ico svg { stroke-width: 1.65; }
.vx-ico-btn { color: #D7E4F0; }
.vx-ico-btn svg { stroke-width: 1.65; }
#headerChannel { color: #16AFFF; }
#headerCopyLink { color: #16AFFF; }

.page-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 12px;
}
.page-head__back {
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #D7E4F0;
  display: grid;
  place-items: center;
}
.page-head__back svg { width: 20px; height: 20px; stroke-width: 1.65; }
.page-head__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF;
}

.order-card,
.order-detail-sheet,
.vx-card {
  background: #0A1B2D;
  border: 1px solid rgba(0, 158, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 0 18px rgba(0, 158, 255, 0.05);
}

.chat-compose textarea:focus,
.promo-form__input:focus,
input:focus,
textarea:focus {
  border-color: rgba(0, 158, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 158, 255, 0.12);
  outline: none;
}

.trading-reg-check input {
  border-color: rgba(0, 158, 255, 0.75);
}
.trading-reg-check input:checked {
  background: #009EFF;
  border-color: #009EFF;
}

/* ── Light theme surfaces (same layout, light tokens) ─────────────── */
html[data-theme="light"] .atm {
  background: var(--tg-bg);
}
html[data-theme="light"] .atm__stars { opacity: 0.12; }

html[data-theme="light"] .tabbar {
  background: #FFFFFF;
  border-color: #D7E3EE;
  box-shadow: 0 8px 20px rgba(11, 23, 38, 0.08);
}
html[data-theme="light"] .tabbar__item { color: #5E7185; }
html[data-theme="light"] .tabbar__item.is-active,
html[data-theme="light"] .tabbar__item.is-active .tabbar__lbl,
html[data-theme="light"] .tabbar__item.is-active .tabbar__ico,
html[data-theme="light"] .tabbar__item.is-active .tabbar__ico svg {
  color: #009EFF;
  stroke: #009EFF;
}

html[data-theme="light"] .vx-top,
html[data-theme="light"] .page-head__title,
html[data-theme="light"] .vx-brand__txt span:first-child,
html[data-theme="light"] .vx-bal__v,
html[data-theme="light"] .vx-rate__t,
html[data-theme="light"] .vx-idcard__name,
html[data-theme="light"] .vx-note,
html[data-theme="light"] .vx-note strong,
html[data-theme="light"] .vx-stats strong,
html[data-theme="light"] .vx-op__t,
html[data-theme="light"] .vx-linkrow__t,
html[data-theme="light"] .vx-swap__amt,
html[data-theme="light"] .vx-swap__lbl,
html[data-theme="light"] .loy-head__title,
html[data-theme="light"] .loy-card__title,
html[data-theme="light"] .loy-tier__name,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3 {
  color: #0B1726;
}

html[data-theme="light"] .vx-muted,
html[data-theme="light"] .vx-bal__l,
html[data-theme="light"] .vx-op__m,
html[data-theme="light"] .vx-linkrow__s,
html[data-theme="light"] .vx-note-card__d,
html[data-theme="light"] .vx-act__t,
html[data-theme="light"] .tabbar__lbl,
html[data-theme="light"] .vx-menu__row strong {
  color: #5E7185;
}

html[data-theme="light"] .vx-bal,
html[data-theme="light"] .vx-act,
html[data-theme="light"] .vx-rate,
html[data-theme="light"] .vx-op {
  background: #FFFFFF;
  border-color: #D7E3EE;
  box-shadow: 0 1px 2px rgba(11, 23, 38, 0.04);
}
html[data-theme="light"] .vx-act { color: #0B1726; }
html[data-theme="light"] .vx-act__ico {
  color: #009EFF;
  background: #E8F5FF;
}

html[data-theme="light"] .vx-linkrow,
html[data-theme="light"] .vx-swap__box,
html[data-theme="light"] .vx-tile,
html[data-theme="light"] .vx-chat,
html[data-theme="light"] .vx-idcard,
html[data-theme="light"] .vx-menu,
html[data-theme="light"] .vx-note,
html[data-theme="light"] .vx-stats div,
html[data-theme="light"] .req-section,
html[data-theme="light"] .order-card,
html[data-theme="light"] .order-detail-sheet,
html[data-theme="light"] .vx-card,
html[data-theme="light"] .glass,
html[data-theme="light"] .home-active-order,
html[data-theme="light"] .vx-note-card,
html[data-theme="light"] .hub-card,
html[data-theme="light"] .loy-card,
html[data-theme="light"] .loy-tier,
html[data-theme="light"] .loy-panel,
html[data-theme="light"] .ref-card,
html[data-theme="light"] .account-page .vx-menu {
  background: #FFFFFF;
  border-color: #D7E3EE;
  box-shadow: 0 1px 2px rgba(11, 23, 38, 0.04);
}

html[data-theme="light"] .vx-note-card__t { color: #0B1726; }

html[data-theme="light"] .trade-switch,
html[data-theme="light"] .sell-calc__switch,
html[data-theme="light"] .seg-ctrl {
  background: #EAF2F9;
  border-color: #D7E3EE;
}
html[data-theme="light"] .trade-switch button,
html[data-theme="light"] .sell-calc__switch-btn,
html[data-theme="light"] .seg-ctrl__btn {
  color: #5E7185;
}
html[data-theme="light"] .trade-switch button.is-on,
html[data-theme="light"] .sell-calc__switch-btn.is-active {
  background: #009EFF;
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 158, 255, 0.18);
}
html[data-theme="light"] .vx-pills {
  background: transparent;
  border: 0;
}
html[data-theme="light"] .vx-pills__ink {
  background: #009EFF;
  box-shadow: 0 0 12px rgba(0, 158, 255, 0.16);
}
html[data-theme="light"] .vx-pills button {
  color: #5E7185;
  background: transparent;
}
html[data-theme="light"] .vx-pills button.is-on {
  background: transparent;
  color: #fff;
  box-shadow: none;
}
html[data-theme="light"] .seg-ctrl__btn.is-active {
  background: #FFFFFF;
  color: #0B1726;
  border-color: #D7E3EE;
}

html[data-theme="light"] .chat-compose textarea,
html[data-theme="light"] .promo-form__input,
html[data-theme="light"] .sell-calc__field input,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not(#sellCalcAmt),
html[data-theme="light"] textarea {
  background: #FFFFFF;
  border-color: #D7E3EE;
  color: #0B1726;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #5E7185;
}

html[data-theme="light"] .vx-swap__flip {
  background: #EAF2F9;
  border-color: #D7E3EE;
  color: #009EFF;
  box-shadow: none;
}
html[data-theme="light"] .vx-swap__flip:active {
  background: #E8F5FF;
}
html[data-theme="light"] .vx-pct button {
  background: #EAF2F9;
  border-color: #D7E3EE;
  color: #0B1726;
}
html[data-theme="light"] .vx-pct button.is-on {
  color: #009EFF;
  background: #E8F5FF;
}
html[data-theme="light"] .vx-coin__mark {
  background: #E8F5FF;
  border-color: #D7E3EE;
  color: #009EFF;
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .vx-btn--sec {
  background: #EAF2F9;
  border-color: #D7E3EE;
  color: #0B1726;
}
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .vx-btn--pri,
html[data-theme="light"] .promo-form__btn,
html[data-theme="light"] .loy-cta,
html[data-theme="light"] .chat-send.btn-primary {
  box-shadow: 0 0 14px rgba(0, 158, 255, 0.18);
}

html[data-theme="light"] .vx-logout {
  background: #FFF1F3;
  color: #E5485D;
}

html[data-theme="light"] .vx-ico-btn,
html[data-theme="light"] .page-head__back {
  color: #3D5166;
}
html[data-theme="light"] #headerChannel,
html[data-theme="light"] #headerCopyLink {
  color: #009EFF;
}

html[data-theme="light"] .vx-menu__ico { color: #009EFF; }
html[data-theme="light"] .vx-menu__chev { color: #5E7185; }
html[data-theme="light"] .vx-menu__row {
  border-bottom-color: #D7E3EE;
  color: #0B1726;
}

html[data-theme="light"] .vx-idcard__ava {
  background: #E8F5FF;
  color: #009EFF;
  box-shadow: 0 0 0 2px #009EFF, 0 0 12px rgba(0, 158, 255, 0.18);
}
html[data-theme="light"] .vx-badge {
  background: #E8F5FF;
  color: #009EFF;
}
html[data-theme="light"] .vx-sup__ico {
  background: #E8F5FF;
  border-color: #D7E3EE;
  color: #009EFF;
}
html[data-theme="light"] .hub-card__ico,
html[data-theme="light"] .vx-linkrow__ico,
html[data-theme="light"] .vx-note-card__ico,
html[data-theme="light"] .vx-rate__ico,
html[data-theme="light"] .sell-calc__ico {
  color: #009EFF;
}

html[data-theme="light"] .splash {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(0, 158, 255, 0.10), transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 110%, rgba(22, 175, 255, 0.06), transparent 50%),
    linear-gradient(165deg, #EAF2F9 0%, #F4F8FC 42%, #E8F5FF 100%);
  color: #0B1726;
}

html[data-theme="light"] .loy-hero,
html[data-theme="light"] .loy-block,
html[data-theme="light"] .loy-tier,
html[data-theme="light"] .loy-benefit,
html[data-theme="light"] .loy-gain article {
  background: #FFFFFF;
  border-color: #D7E3EE;
  box-shadow: 0 1px 2px rgba(11, 23, 38, 0.04);
}
html[data-theme="light"] .loy-stats div,
html[data-theme="light"] .ref-cell,
html[data-theme="light"] .ref-level,
html[data-theme="light"] .ref-link__row {
  background: #EAF2F9;
  border-color: #D7E3EE;
  color: #0B1726;
}
html[data-theme="light"] .loy-hero h2,
html[data-theme="light"] .loy-h,
html[data-theme="light"] .loy-block h3,
html[data-theme="light"] .loy-benefit strong,
html[data-theme="light"] .loy-gain strong,
html[data-theme="light"] .ref-cell strong {
  color: #0B1726;
}
html[data-theme="light"] .loy-sub,
html[data-theme="light"] .loy-muted,
html[data-theme="light"] .loy-note,
html[data-theme="light"] .loy-hero__range,
html[data-theme="light"] .loy-stats span,
html[data-theme="light"] .loy-tier__range,
html[data-theme="light"] .loy-tier__side em,
html[data-theme="light"] .loy-progress__head span,
html[data-theme="light"] .loy-req span,
html[data-theme="light"] .loy-progress__meta span,
html[data-theme="light"] .ref-cell span,
html[data-theme="light"] .ref-level span,
html[data-theme="light"] .ref-note,
html[data-theme="light"] .ref-link__label {
  color: #5E7185;
}
html[data-theme="light"] .loy-bar {
  background: #EAF2F9;
}
html[data-theme="light"] .loy-crown {
  background: #E8F5FF;
  color: #009EFF;
}
html[data-theme="light"] .loy-tier.is-current {
  border-color: #009EFF;
  box-shadow: 0 0 0 1px rgba(0, 158, 255, 0.18);
}
html[data-theme="light"] .ref-level.is-current {
  border-color: #009EFF;
}

html[data-theme="light"] .session-wait {
  background: #FFFFFF;
  border-color: #D7E3EE;
  box-shadow: 0 8px 24px rgba(11, 23, 38, 0.08);
}
html[data-theme="light"] .session-wait__title {
  color: #0B1726;
}
html[data-theme="light"] .session-wait__hint {
  color: #5E7185;
}
html[data-theme="light"] .app-modal__card,
html[data-theme="light"] .instruction-modal__card {
  background: #FFFFFF;
  border-color: #D7E3EE;
  color: #0B1726;
}
html[data-theme="light"] .app-modal__title {
  color: #0B1726;
}
html[data-theme="light"] .app-modal__close {
  color: #5E7185;
}
html[data-theme="light"] .toast {
  color: #0B1726;
}


/* ══════════════════════════════════════════════════════════════════════
   FINAL GLOBAL UI POLISH — shared system (do not page-patch)
   ══════════════════════════════════════════════════════════════════════ */

.glass,
.card,
.vx-card,
.order-detail-sheet,
.reviews-head,
.reviews-cat,
.req-section,
.ref-card,
.loyalty-card,
.promo-card,
.home-active-order,
.order-card {
  border-radius: 16px;
  transition: var(--surface-transition);
}
.vx-card,
.order-detail-sheet,
.reviews-head {
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--tg-card);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 18px rgba(0, 158, 255, 0.05);
}
.glass--tight,
.vx-card--tight { padding: var(--s-3) var(--s-4); }

.btn-primary,
.btn-secondary,
.btn--primary,
.btn--secondary,
.vx-btn--pri,
.vx-btn--sec,
.loy-cta,
.promo-form__btn,
.chat-send.btn-primary {
  min-height: 44px;
  border-radius: 12px;
  gap: 8px;
  transition:
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    transform var(--t-micro) var(--ease-out),
    opacity var(--t-fast) var(--ease-out);
}
.btn-primary,
.btn--primary,
.vx-btn--pri,
.loy-cta,
.promo-form__btn {
  box-shadow: 0 0 16px rgba(0, 158, 255, 0.22);
}
.btn-row > .btn-primary,
.btn-row > .btn-secondary,
.balance-card__actions > .btn-primary,
.balance-card__actions > .btn-secondary,
.req-form__actions > .btn-primary,
.req-form__actions > .btn-secondary,
.vx-bal__btns > .vx-btn--pri,
.vx-bal__btns > .vx-btn--sec {
  margin-bottom: 0;
}
.promo-form__input,
.promo-form__btn {
  min-height: 44px;
  border-radius: 12px;
}

.stage svg,
.vx-top svg,
.tabbar svg,
.vx-menu__ico svg,
.vx-menu__chev svg,
.page-head__back svg,
.vx-ico-btn svg,
.app-modal__close svg,
.copy-icon-btn svg,
.input-paste-icon-btn svg,
.ref-link__copy svg,
.hub-card__ico svg,
.vx-linkrow__ico svg,
.vx-note-card__ico svg,
.vx-act__ico svg,
.vx-rate__ico svg,
.vx-tile svg,
.vx-swap__flip svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.tabbar__ico svg { width: 22px; height: 22px; }
.vx-ico-btn,
.page-head__back,
.app-modal__close {
  display: grid;
  place-items: center;
  line-height: 0;
}
.vx-ico-btn svg,
.page-head__back svg { width: 20px; height: 20px; }

.vx-act__ico,
.vx-op__ico,
.vx-rate__ico,
.vx-linkrow__ico,
.vx-note-card__ico,
.vx-sup__ico,
.hub-card__ico,
.loy-tier__ico,
.loy-benefit__ico {
  display: grid;
  place-items: center;
  flex: none;
  line-height: 0;
  color: var(--icon-active);
}
.vx-act__ico svg,
.vx-linkrow__ico svg,
.vx-note-card__ico svg,
.vx-rate__ico svg,
.hub-card__ico svg {
  width: 18px;
  height: 18px;
}

.copy-icon-btn,
.input-paste-icon-btn,
.ref-link__copy,
.profile-id-copy {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  line-height: 0;
  flex: none;
  transition:
    background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-micro) var(--ease-out),
    opacity var(--t-fast) var(--ease-out);
}
.copy-icon-btn svg,
.input-paste-icon-btn svg,
.ref-link__copy svg,
.profile-id-copy svg {
  width: 14px;
  height: 14px;
}

.vx-linkrow,
.vx-op,
.vx-note-card,
.vx-menu__row,
.vx-act,
.hub-row,
.req-item,
.review-item__top,
.loy-tier,
.loy-benefit {
  align-items: center;
}
.vx-linkrow,
.vx-op,
.vx-note-card,
.hub-row,
.req-item { gap: 12px; }
.vx-linkrow__t,
.vx-op__t,
.vx-note-card__t,
.review-item__who,
.loy-tier__name,
.loy-benefit strong { line-height: 1.3; }
.vx-linkrow__s,
.vx-op__d,
.vx-note-card__b,
.vx-note-card__time,
.review-item__date,
.loy-tier__range,
.loy-benefit em {
  line-height: 1.4;
  color: var(--tg-muted);
}

.kv,
.detail-row,
.order-room-kv {
  gap: 8px 12px;
  padding: 12px 0;
  min-width: 0;
}
.kv > span,
.detail-row__k,
.order-room-kv > span {
  color: var(--tg-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  min-width: 0;
}
.kv > strong,
.detail-row__v,
.order-room-kv > strong {
  min-width: 0;
  max-width: 100%;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.input,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
.promo-form__input,
.sell-calc__field input,
.chat-compose textarea {
  min-height: 44px;
  border-radius: 12px;
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}
textarea { min-height: 72px; }
.input:focus,
input:focus,
textarea:focus,
.promo-form__input:focus,
.chat-compose textarea:focus {
  outline: none;
  border-color: rgba(0, 158, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 158, 255, 0.12);
}

.reviews-head__score {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--tg-text);
}
.reviews-head__meta {
  margin-top: 8px;
  font-size: var(--fs-md);
  color: var(--tg-muted);
  line-height: 1.4;
}
.reviews-cat {
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.review-item + .review-item {
  margin-top: 12px;
  padding-top: 12px;
}
.review-item__top { gap: 12px; }
.review-item__who {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tg-text);
  min-width: 0;
  overflow-wrap: anywhere;
}
.review-item__meta {
  gap: 4px;
  flex: none;
  align-items: flex-end;
}
.review-item__text {
  margin-top: 8px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.review-box { margin-top: 12px; }
.order-detail-sheet + .review-box,
.order-detail-sheet + .glass.review-box { margin-top: 12px; }

.vx-ops,
.vx-note-list,
.deposit-hist {
  display: grid;
  gap: 10px;
}
.vx-op,
.vx-note-card,
.req-item {
  padding: 12px 14px;
  border-radius: 14px;
  transition:
    border-color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    transform var(--t-micro) var(--ease-out);
}
.vx-op:active,
.vx-note-card:active,
.req-item:active,
.home-active-order:active { transform: scale(0.985); }

.loy-hero,
.loy-block,
.loy-tier,
.loy-benefit,
.loy-gain article,
.ref-cell,
.ref-level { transition: var(--surface-transition); }
.loy-bar,
.loyalty-progress__track,
.ref-progress .loyalty-progress__track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tg-bg-2);
}
.loy-bar > span,
.loyalty-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width var(--t-slow) var(--ease-soft);
}
.ref-link__row {
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.ref-link__url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-modal__card,
.instruction-modal__card {
  border-radius: 16px;
  padding: var(--s-5) var(--s-4) var(--s-4);
  animation: polish-modal-in var(--t-slow) var(--ease-soft) both;
}
@keyframes polish-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.app-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.app-modal__title {
  line-height: 1.3;
  padding-right: 36px;
}

.empty-state,
.error-state,
.success-state {
  text-align: center;
  padding: var(--s-6) var(--s-4);
}
.empty__icon,
.error-state__icon,
.success-state__icon {
  display: grid;
  place-items: center;
  margin: 0 auto var(--s-3);
  line-height: 0;
}
.empty__icon svg,
.error-state__icon svg,
.success-state__icon svg {
  width: 44px;
  height: 44px;
}
.vx-empty,
.req-empty,
.state-empty {
  text-align: center;
  padding: var(--s-5) var(--s-3);
  color: var(--tg-muted);
  font-size: var(--fs-md);
  line-height: 1.45;
}
.state-empty--inline {
  text-align: left;
  padding: var(--s-3) 0;
}

.tabbar__item {
  transition: color var(--t-fast) var(--ease-out), transform var(--t-micro) var(--ease-out);
}
.tabbar__item:active { transform: scale(0.96); }
.tabbar__ico {
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.tabbar__item.is-active .tabbar__ico { transform: translateY(-1px); }
.vx-ico-btn {
  transition: color var(--t-fast) var(--ease-out), transform var(--t-micro) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.vx-ico-btn:active { transform: scale(0.92); }

html[data-theme="light"] .req-item,
html[data-theme="light"] .req-pick {
  background: var(--surface-2);
  border-color: var(--tg-border);
}
html[data-theme="light"] .vx-card,
html[data-theme="light"] .order-detail-sheet,
html[data-theme="light"] .reviews-head,
html[data-theme="light"] .reviews-cat {
  background: #FFFFFF;
  border-color: #D7E3EE;
  box-shadow: 0 1px 2px rgba(11, 23, 38, 0.04);
}

.stage > .vx-card,
.stage > .glass,
.stage > .reviews-head,
.stage > .reviews-cat,
.stage > .order-detail-sheet { max-width: 100%; }
.vx-top { gap: 8px; min-width: 0; }
.vx-top__left { min-width: 0; gap: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   MOTION LAYER — единая система движения (перекрывает ранние правила).
   Принципы:
   1. Анимируем только composited-свойства: opacity и transform.
      Никаких width/height/top/left в переходах интерактивных элементов.
   2. Одна шкала длительностей (--t-micro/fast/base/slow/page) и три
      кривые (--ease-out / --ease-soft / --ease-spring) на весь интерфейс.
   3. Полные экраны входят мягким fade+lift; вложенные элементы — статично,
      чтобы не было «двойной анимации» и каскадных задержек.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Индикатор загрузки раздела ──────────────────────────────────────
   Тонкая полоса под хедером: даёт обратную связь при медленном API,
   не перекрывает контент и не вызывает layout shift (позиция absolute). */
.stage-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 120;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
  contain: strict;
}
.stage-progress.is-on { opacity: 1; }
.stage-progress > span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, transparent, var(--tg-primary), var(--tg-primary-light));
  box-shadow: 0 0 10px rgba(0, 158, 255, 0.5);
  transform: translate3d(-100%, 0, 0);
  animation: stage-progress-run 1.05s var(--ease-soft) infinite;
}
@keyframes stage-progress-run {
  0%   { transform: translate3d(-100%, 0, 0); }
  60%  { transform: translate3d(180%, 0, 0); }
  100% { transform: translate3d(280%, 0, 0); }
}

/* ── Stage: смена экрана без рывка и без скачка высоты ────────────────
   JS перед подменой контента фиксирует текущую высоту через min-height,
   поэтому контейнер не «схлопывается» на время перерисовки. Здесь — сама
   анимация входа нового содержимого. */
.stage {
  transition: opacity var(--t-page) var(--ease-soft);
  /* Изолируем перерисовку stage от остального шелла (кардинально снижает
     стоимость layout/paint при подмене innerHTML). */
  contain: layout style;
}

/* ── Кросс-фейд панелей при смене экрана ──────────────────────────────
   Обе панели лежат в одной grid-ячейке, поэтому контейнер не бывает пустым.
   Важно: старая панель уходит БЫСТРО (--t-fade-out) и удерживается на
   opacity:0 через `forwards`. Иначе на медленном устройстве старая версия
   остаётся видимой поверх новой — ровно тот «наложенный» экран, который
   заметен на телефоне. */
:root { --t-fade-out: 140ms; }

.stage__pane {
  min-width: 0;
  /* Панели не тянутся по высоте строки: их размер задаёт контейнер. */
  height: auto;
  min-height: 0;
}
.stage__pane--prev {
  pointer-events: none;
  overflow: hidden;
  animation: stage-leave var(--t-fade-out) var(--ease-out) forwards;
}
.stage__pane--next {
  pointer-events: none;
  animation: stage-enter var(--t-page) var(--ease-out) both;
}
/* Нижняя панель должна перекрыть уходящую, чтобы не было «двойного» текста. */
.stage__pane--next { position: relative; z-index: 1; }

@keyframes stage-leave {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, -4px, 0); }
}
@keyframes stage-enter {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── Таббар: отклик без дёрганья ────────────────────────────────────── */
.tabbar {
  /* Единый переход вместо трёх конфликтующих блоков ниже по файлу. */
  transition: background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.tabbar__item {
  transition: color var(--t-fast) var(--ease-out),
              transform var(--t-micro) var(--ease-spring);
}
.tabbar__item:active { transform: scale(0.94); }
.tabbar__ico {
  transition: transform var(--t-fast) var(--ease-spring),
              color var(--t-fast) var(--ease-out);
}
.tabbar__item.is-active .tabbar__ico { transform: translate3d(0, -1px, 0); }

/* ── Кнопки и интерактивные элементы: единый press-отклик ───────────── */
.btn,
.vx-btn,
button.vx-btn,
.qa-tile,
.vx-tile,
.vx-menu__row,
.vx-linkrow,
.vx-op,
.req-item,
.review-item,
.hub-card,
.vx-act,
.tab-chip,
.hist-pill,
.chip {
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-micro) var(--ease-spring),
              opacity var(--t-fast) var(--ease-out);
}
.btn:active,
.vx-btn:active,
.qa-tile:active,
.vx-tile:active,
.hub-card:active,
.vx-act:active,
.tab-chip:active,
.hist-pill:active,
.chip:active { transform: scale(0.975); }
/* Кнопка в состоянии загрузки/отключена — не «прыгает» при нажатии. */
.btn:disabled:active,
.vx-btn:disabled:active,
.btn.is-loading:active,
.vx-btn.is-loading:active { transform: none; }

/* ── Модалки: вход консистентный с тостами ──────────────────────────── */
.app-modal,
.instruction-modal { transition: opacity var(--t-slow) var(--ease-out); }
.app-modal__card,
.instruction-modal__card {
  animation: motion-modal-in var(--t-slow) var(--ease-out) both;
  /* transform-origin по центру, чтобы scale не «уезжал» в угол. */
  transform-origin: center center;
}
@keyframes motion-modal-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ── Тост: без скачка снизу вверх на всю высоту ─────────────────────── */
.toast {
  animation: motion-toast-in var(--t-base) var(--ease-spring) both;
  will-change: transform, opacity;
}
.toast.is-leaving { animation: motion-toast-out var(--t-fast) var(--ease-out) both; }
@keyframes motion-toast-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.98); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes motion-toast-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.98); }
}

/* ── Появление строк списков: только transform+opacity, без каскада ─── */
@keyframes motion-row-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.wallet-hist-row,
.vx-op,
.vx-note-card,
.hist-row {
  animation: motion-row-in var(--t-base) var(--ease-out) both;
}
/* Каскад ограничен 6 строками: дальше задержка не растёт, иначе список
   ощущается медленным. */
.wallet-hist-row:nth-child(2), .vx-op:nth-child(2), .hist-row:nth-child(2) { animation-delay: 24ms; }
.wallet-hist-row:nth-child(3), .vx-op:nth-child(3), .hist-row:nth-child(3) { animation-delay: 48ms; }
.wallet-hist-row:nth-child(4), .vx-op:nth-child(4), .hist-row:nth-child(4) { animation-delay: 72ms; }
.wallet-hist-row:nth-child(5), .vx-op:nth-child(5), .hist-row:nth-child(5) { animation-delay: 96ms; }
.wallet-hist-row:nth-child(n+6), .vx-op:nth-child(n+6), .hist-row:nth-child(n+6) { animation-delay: 120ms; }

/* ── Skeleton: анимация фона вместо layout-свойств ──────────────────── */
.skeleton {
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  will-change: background-position;
}

/* ── Прогресс-бары: transform вместо width там, где это возможно ───── */
.loy-bar > span,
.loyalty-progress__fill,
.progress__bar > span {
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease-soft);
  will-change: transform;
}

/* ── Скролл: плавность без «инерционных» задержек ───────────────────── */
.stage,
.chat-log,
.app-modal__body,
.bank-picker__list {
  scroll-behavior: auto; /* нативный momentum-скролл плавнее CSS smooth */
  overscroll-behavior: contain; /* без «отскока» родителя и цепной прокрутки */
}
/* Тонкий скроллбар, не перекрывающий контент на десктопе. */
.stage { scrollbar-gutter: stable; }

/* ── Списки: не тратим кадры на то, что за пределами вьюпорта ────────── */
.vx-ops > *,
.vx-note-list > *,
.deposit-hist > *,
.wallet-hist-list > *,
.order-hist > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 64px;
}

/* ── Focus-visible: доступность без «прыжков» при клике мышью ───────── */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: inherit;
}
:where(button, a, input, textarea, select, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}
/* Внутри скроллящегося stage фокус не должен «прыгать» под таббар. */
.stage :where(button, a, input, textarea):focus-visible {
  scroll-margin-block: 12px 96px;
}

/* ── Отключаем тяжёлые декоративные эффекты там, где они не видны ──── */
/* Canvas-фон перекрыт непрозрачным контентом: не тратим GPU на blur. */
@media (max-width: 430px) {
  .splash__glow { filter: none; }
}

html[data-theme="light"] .stage { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION — единственное итоговое правило (перекрывает ранние).
   Убираем декоративное движение, но сохраняем смену состояний: переходы
   цвета/прозрачности остаются, они не провоцируют укачивание и помогают
   понять, что интерфейс отреагировал.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
    /* Обнуляем сдвиги, но оставляем короткие переходы цвета и прозрачности:
       они не провоцируют укачивание и сохраняют обратную связь интерфейса. */
    transition-property: color, background-color, border-color, opacity, box-shadow, outline-color !important;
    transition-duration: var(--t-fast) !important;
    transition-timing-function: linear !important;
  }
  /* Прогресс-бары информативны, а не декоративны: оставляем их плавными. */
  .loy-bar > span,
  .loyalty-progress__fill,
  .progress__bar > span {
    transition-property: transform !important;
    transition-duration: var(--t-slow) !important;
    transition-timing-function: var(--ease-soft) !important;
  }
  .splash__glow,
  .splash__bar-fill,
  .skeleton { animation: none !important; }
  .stage,
  .stage.is-swapping { animation: none !important; transform: none !important; }
  .toast { animation: none !important; }
  .app-modal__card,
  .instruction-modal__card { animation: none !important; }
  /* Press-эффекты через scale отключаем полностью. */
  .btn:active, .vx-btn:active, .qa-tile:active, .vx-tile:active,
  .hub-card:active, .vx-act:active, .tab-chip:active, .hist-pill:active,
  .chip:active, .tabbar__item:active { transform: none !important; }
}