@font-face {
  font-family: "Inter";
  src: url("fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1,h2,h3,p { margin: 0; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:root {
  --ink:        #f6f1ff;
  --ink-mute:   rgba(246,241,255,0.60);
  --ink-quiet:  rgba(246,241,255,0.36);
  --line:       rgba(255,255,255,0.09);
  --glass:      rgba(255,255,255,0.06);
  --glass-hi:   rgba(255,255,255,0.12);
  --pink:   #edb2d6;
  --violet: #b8a4ef;
  --peri:   #c8d2f4;
  --aqua:   #b7ded8;
  --peach:  #e9c9b1;
  --green:  #6ee7b7;
  --r-xl:  28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --top-safe: env(safe-area-inset-top, 0px);
  --bottom-safe: env(safe-area-inset-bottom, 0px);
  --left-safe: env(safe-area-inset-left, 0px);
  --right-safe: env(safe-area-inset-right, 0px);
  /* Ширина app-shell: на телефоне (экран < этого) колонка = вся ширина и
     ничего не меняется; на планшете/десктопе приложение центрируется колонкой
     этой ширины, а не растягивается на весь экран. */
  --app-max: 460px;
  --page-pad-top: 14px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "ss01","cv11";
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

.project-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-icon-inline { width: 22px; height: 22px; }
.project-icon-load { width: 64px; height: 64px; }
.project-icon-auth { width: 34px; height: 34px; }

html, body, #root {
  width: 100%; height: 100%;
  /* 100dvh (dynamic viewport height) — стабильная высота при появлении/скрытии
     панелей мобильного браузера (Safari/Chrome). 100% оставлен фолбэком для
     старых движков. Правило rules.md §17. */
  height: 100dvh;
  background: #06030c;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── APP-SHELL: приложение как мобильная колонка фикс. ширины ──
   На реальном телефоне (ширина < --app-max) колонка занимает весь экран —
   полная обратная совместимость, верстка не меняется. На широких экранах
   (планшет/десктоп) приложение показывается колонкой по центру на тёмном
   фоне body, а не растянутым во всю ширину.
   #root: position:relative — КЛЮЧЕВОЕ: вся absolute-инфраструктура (экраны
   .screen/.viewport inset:0, .nav-wrap, pull-to-refresh) теперь прижимается
   к колонке, а не к широкому вьюпорту.
   Полная блокировка десктопа («только мобильный») — задача backend-этапа,
   см. ROADMAP.md Этап «Desktop gate». */
body { display: flex; justify-content: center; }
#root {
  position: relative;
  max-width: var(--app-max);
  margin-inline: auto;
}

/* Запрет выделения текста и системного callout (long-press) во всём
   приложении — поведение нативной аппы, а не веб-страницы. Поля ввода
   остаются выделяемыми, иначе ломаются формы, вставка адреса/суммы и OTP. */
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"], [contenteditable=""] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Скрываем визуальную полосу скролла во всём приложении — нативный вид
   (как user-select:none выше). Скролл остаётся полностью функциональным,
   убирается только сама полоса (в т.ч. боковая на длинных страницах). */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Status-bar blur strip — sits over the top safe-area on devices that
   expose env(safe-area-inset-top) (iPhone notch / Dynamic Island, some
   Android cutouts). When --top-safe is 0 the strip collapses to 0 height
   and is invisible, so it's safe to render everywhere. Click-through.
   Height is 1.35x of the safe-area so the bottom 26% can soft-feather via
   mask-image — no hard edge between blur and the rest of the screen. */
.statusbar-blur {
  position: fixed;
  /* Привязан к app-shell-колонке (по центру, max-width), чтобы на планшете/
     десктопе верхний блюр не растягивался во всю ширину окна. На телефоне
     колонка = вся ширина → визуально как раньше. */
  top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--app-max);
  height: calc(var(--top-safe) * 1.35);
  z-index: 9999;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(6,3,12,0.62) 0%,
      rgba(6,3,12,0.46) 60%,
      rgba(6,3,12,0.00) 100%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
  mask-image:
    linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
}

.viewport {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  background: #06030c;
}

/* phone frame removed */

/* SCREEN SHELL */
.screen {
  position: absolute; inset: 0;
  overflow: hidden;
  color: var(--ink);
}
.bg-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 80% at 110% 110%, #3b1533 0%, #1c0b1a 30%, #080210 70%, #04010a 100%),
    #04010a;
}
.bg-spots {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 38% at 14% 22%, rgba(68,26,55,0.98) 0%, transparent 70%),
    radial-gradient(52% 42% at 96% 92%, rgba(64,20,50,0.62) 0%, transparent 72%),
    radial-gradient(38% 28% at 72% 68%, rgba(36,14,50,0.7) 0%, transparent 70%),
    radial-gradient(44% 32% at 8% 72%, rgba(24,8,32,0.8) 0%, transparent 70%);
  filter: blur(48px);
  pointer-events: none;
}
.bg-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
  opacity: 0.075;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* PAGES CONTAINER */
.pages {
  position: absolute; inset: 0;
  z-index: 4;
}
.page {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding-top: calc(var(--top-safe) + var(--page-pad-top));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.4,0,0.2,1), transform 0.32s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
}
.page::-webkit-scrollbar { display: none; }
.page.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.page.exit-left {
  opacity: 0;
  transform: translateX(-40px);
}

/* APP PULL TO REFRESH */
.pull-refresh-zone {
  position: absolute; inset: 0;
  z-index: 7;
  pointer-events: none;
  --ptr-y: 0px;
  --ptr-opacity: 0;
}
.pull-refresh-indicator {
  position: absolute;
  top: calc(var(--top-safe) + 10px);
  left: 50%;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px;
  padding: 8px 13px 8px 9px;
  border-radius: 999px;
  color: rgba(255,255,255,0.84);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)),
    rgba(12,6,22,0.72);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter: blur(18px) saturate(170%);
  opacity: var(--ptr-opacity);
  transform:
    translate3d(-50%, calc(-50px + var(--ptr-y)), 0)
    scale(calc(0.92 + (var(--ptr-opacity) * 0.08)));
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.38,1.2,0.38,1);
}
.pull-refresh-icon {
  width: 24px; height: 24px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: #d9fff2;
  background: rgba(110,231,183,0.14);
  border: 1px solid rgba(110,231,183,0.22);
}
.pull-refresh-icon svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.18s ease;
}
.pull-refresh-label {
  font-size: 12px; font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.pull-refresh-zone--ready .pull-refresh-icon svg { transform: rotate(180deg); }
.pull-refresh-zone--refreshing .pull-refresh-icon {
  color: #fff;
  background: rgba(184,164,239,0.18);
  border-color: rgba(184,164,239,0.30);
}
.pull-refresh-zone--refreshing .pull-refresh-icon svg {
  animation: ptrSpin 0.78s linear infinite;
}
.pull-refresh-zone--done .pull-refresh-icon {
  color: #8bf0c7;
  background: rgba(110,231,183,0.16);
  border-color: rgba(110,231,183,0.30);
}
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* GREETING */
.greet {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 22px;
}
.greet-left { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 42px; height: 42px; border-radius: 999px;
  background: linear-gradient(135deg, #c8a4ff 0%, #f5a7d9 55%, #e9c9b1 100%);
  color: #180820;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(200,164,255,0.25);
}
.avatar-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--green);
  border: 2px solid #09060f;
}
.greet-text-mute { font-size: 11px; font-weight: 500; color: var(--ink-mute); letter-spacing: 0.01em; }
.greet-text-name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin-top: 1px; }
.greet-right { display: flex; gap: 8px; }
.icon-btn {
  position: relative;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.82);
  transition: background 0.18s, transform 0.14s;
}
.icon-btn:hover { background: var(--glass-hi); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn--notify {
  overflow: visible;
  isolation: isolate;
}
.icon-btn--notify::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  z-index: 0;
  background: radial-gradient(circle, rgba(237,178,214,0.22), rgba(237,178,214,0) 70%);
  opacity: 0;
  transform: scale(0.72);
  animation: notifyHalo 3.8s ease-out infinite;
}
.notify-bell {
  position: relative;
  z-index: 1;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.86);
}
.notify-bell-svg {
  display: block;
  overflow: visible;
}
.notify-bell-body,
.notify-bell-clapper {
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notify-bell-core {
  transform-box: fill-box;
  transform-origin: 50% 8%;
  animation: notifyBellRing 3.8s cubic-bezier(0.4,0,0.2,1) infinite;
}
.notify-bell-clapper {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: notifyBellClapper 3.8s cubic-bezier(0.4,0,0.2,1) infinite;
}
.notify-bell-wave {
  stroke: var(--pink);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(237,178,214,0.58));
  animation: notifyWave 3.8s ease-out infinite;
}
.notify-bell-wave--left {
  transform-box: fill-box;
  transform-origin: 100% 52%;
}
.notify-bell-wave--right {
  transform-box: fill-box;
  transform-origin: 0% 52%;
}
.notify-bell-badge {
  position: absolute;
  top: 2px; right: 2px;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--pink);
  box-shadow:
    0 0 0 2px rgba(18,10,24,0.82),
    0 0 10px rgba(237,178,214,0.78);
  animation: notifyBadgePulse 1.9s cubic-bezier(0.4,0,0.2,1) infinite;
}
.notif-dot {
  position: absolute; top: 9px; right: 9px;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
}
@keyframes notifyBellRing {
  0%, 4%, 35%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-18deg); }
  12% { transform: rotate(16deg); }
  16% { transform: rotate(-12deg); }
  20% { transform: rotate(8deg); }
  24% { transform: rotate(-4deg); }
  29% { transform: rotate(2deg); }
}
@keyframes notifyBellClapper {
  0%, 4%, 35%, 100% { transform: translateX(0); }
  8% { transform: translateX(1.7px); }
  12% { transform: translateX(-1.6px); }
  16% { transform: translateX(1.2px); }
  20% { transform: translateX(-0.8px); }
  24% { transform: translateX(0.4px); }
}
@keyframes notifyWave {
  0%, 5%, 32%, 100% {
    opacity: 0;
    stroke-dashoffset: 12;
    transform: scale(0.82);
  }
  10% {
    opacity: 0.95;
    stroke-dashoffset: 8;
    transform: scale(0.96);
  }
  24% {
    opacity: 0;
    stroke-dashoffset: 0;
    transform: scale(1.18);
  }
}
@keyframes notifyHalo {
  0%, 5%, 34%, 100% { opacity: 0; transform: scale(0.72); }
  11% { opacity: 0.9; transform: scale(0.88); }
  28% { opacity: 0; transform: scale(1.5); }
}
@keyframes notifyBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(18,10,24,0.82), 0 0 10px rgba(237,178,214,0.78); }
  50% { transform: scale(1.18); box-shadow: 0 0 0 2px rgba(18,10,24,0.82), 0 0 15px rgba(237,178,214,0.96); }
}

/* legacy BalanceCard (.balance-card, .bc-, .eye-btn, .bact) удалён 01.06.2026 — заменён BalanceCardPro (.crypto-balance-card, .cbc-). */

/* CONTRACTS CAROUSEL (home) */
.cc-track {
  display: flex; gap: 0;
  padding: 2px 0 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cc-track::-webkit-scrollbar { display: none; }
.bc-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  flex-shrink: 0;
  padding: 0 14px;
}
.bc-card {
  width: 100%;
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 9px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.bc-gauge-section {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; z-index: 1;
  min-width: 124px;
}
.bc-gauge-wrapper { width: 118px; height: 118px; position: relative; }
.bc-gauge-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.bc-gauge-center-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
  isolation: isolate;
}
.bc-gauge-center-text::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  z-index: -1;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    rgba(22,16,35,0.92);
  border: none;
  box-shadow: 0 22px 44px rgba(0,0,0,0.30);
}
.bc-gauge-center-text > * {
  position: relative;
  z-index: 1;
  /* Число оптически сидело высоко (кольцо разорвано снизу) — опускаем текст центра
     во всех контрактах (главная, каталог, ордер). Круг ::before остаётся по центру.
     По комменту max 29.05.2026 — один стиль для всех контрактов. */
  transform: translateY(5px);
}
.bc-gauge-days { font-size: 24px; font-weight: 620; color: #fff; line-height: 0.96; letter-spacing: 0; }
.bc-gauge-label { font-size: 8.5px; font-weight: 620; color: rgba(255,255,255,0.82); letter-spacing: 1.8px; margin-top: 5px; padding-left: 1.8px; }
.bc-contract-title { margin-top: -15px; text-align: center; }
.bc-contract-title-main { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 2px; line-height: 1; }
.bc-contract-title-sub {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 3px; font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,0.6); letter-spacing: 1.2px;
}
.bc-contract-title-sub::before, .bc-contract-title-sub::after {
  content: ""; width: 17px; height: 1px; background: rgba(255,255,255,0.35);
}
.bc-details {
  position: relative; z-index: 1;
  background: rgba(12, 6, 22, 0.88);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 12px 14px 14px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 0;
}
.bc-row {
  display: flex;
  align-items: baseline; padding: 4px 0;
  font-size: 12px; color: rgba(255,255,255,0.92);
}
.bc-row-label { color: rgba(255,255,255,0.5); font-weight: 400; white-space: nowrap; order: 0; }
.bc-row-value { color: #fff; font-weight: 500; white-space: nowrap; order: 2; }
.bc-row::before {
  content: "";
  order: 1;
  flex: 1;
  border-bottom: 1px dotted rgba(255,255,255,0.18);
  margin: 0 6px;
  min-width: 8px;
  position: relative;
  top: 0px;
}
.bc-divider { height: 1px; background: rgba(255,255,255,0.10); margin: 6px 0 8px; }
.bc-tech-label { text-align: center; color: rgba(255,255,255,0.85); font-size: 10px; margin-bottom: 7px; }
.bc-badges { display: flex; justify-content: space-between; gap: 5px; padding: 0 2px; }
.bc-badge {
  flex: 1; text-align: center;
  border: 1.2px solid #e5562a; color: #e5562a; border-radius: 4px;
  padding: 3px 2px; font-size: 9px; font-weight: 600; letter-spacing: 0.2px;
  background: transparent;
}
.bc-badge-dash {
  flex: 0 0 auto; align-self: center;
  color: #e5562a; font-size: 12px; font-weight: 600;
}

/* Блок периода активного контракта (главная): белые подписи НАД оранжевыми
   блоками — слева дата окончания («Действует до:»), справа живой таймер
   («До начисления:»). Отдельные классы (не .bc-badge), чтобы не задеть оранжевые
   бейджи технологий на странице «Контракты». */
.bc-period { display: flex; gap: 7px; }
.bc-period-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bc-period-cap {
  text-align: center; color: #fff; font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.2px; line-height: 1.1; margin-bottom: 5px; white-space: nowrap;
}
.bc-period-val {
  border: 1.2px solid #e5562a; color: #e5562a; border-radius: 4px;
  padding: 4px 2px; text-align: center; font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px; background: transparent;
}
.bc-period-val.is-timer { font-variant-numeric: tabular-nums; }

/* ADD CONTRACT */
.bc-card-add {
  width: 100%;
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  border-radius: 18px;
  position: relative; overflow: hidden;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.bc-add-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%; padding: 24px 0;
}
.bc-add-circle-wrap {
  position: relative; width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
}
.bc-add-circle-wrap::before {
  content: "";
  position: absolute;
  width: 98px; height: 98px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 0;
}
.bc-add-button {
  position: relative; z-index: 1;
  width: 66px; height: 66px; border-radius: 50%;
  background: linear-gradient(135deg, #82A9F3 0%, #999CF6 35%, #C17CE1 70%, #C07DE5 100%);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
  color: #fff;
}
.bc-add-button:hover { transform: scale(1.05); }
.bc-add-button:active { transform: scale(0.98); }
.bc-add-button svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.bc-add-label { margin-top: 12px; text-align: center; color: rgba(255,255,255,0.7); font-size: 10px; letter-spacing: 2px; font-weight: 500; }

/* PROMO */
.promo {
  position: relative;
  margin: 14px 14px 0;
  padding: 15px 16px 15px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  overflow: hidden; isolation: isolate;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 74px;
}
.promo-blob {
  position: absolute; inset: -30% -5% -30% 52%;
  filter: blur(16px); opacity: 0.60; pointer-events: none;
}
.promo-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.18; mix-blend-mode: overlay; pointer-events: none;
}
.promo-body { position: relative; z-index: 2; flex: 1; min-width: 0; }
.promo-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #fff; line-height: 1.2; }
.promo-sub { font-size: 11.5px; color: rgba(255,255,255,0.52); margin-top: 4px; line-height: 1.35; text-wrap: pretty; }
.promo-cta {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  color: #fff;
  display: grid; place-items: center;
  transition: transform 0.15s, background 0.18s;
}
.promo-cta:hover { transform: scale(1.05); }
.promo-cta:active { transform: scale(0.96); }

/* ── Promo carousel (staking + gift) ── */
.promo-carousel {
  position: relative;
  margin: 8px 14px 0;
  overflow: hidden;
  border-radius: 22px;
}
.promo-track {
  display: flex;
  gap: 12px;
  padding: 24px 0 0;
  align-items: flex-end;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.promo-track::-webkit-scrollbar { display: none; }
/* Слайд-обёртка: НЕ карточка, а контейнер слайда. Держит ширину/snap, прижата к низу
   трека (стикер торчит головой в верхний отступ трека). overflow видим — голова не
   режется обёрткой; саму карточку (.promo внутри) клиппит её собственный overflow. */
.promo-slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
  margin: 0 !important;
  scroll-snap-align: start;
  box-sizing: border-box;
  align-self: flex-end;
  display: flex;
}
.promo-slide > .promo {
  flex: 1;
  margin: 0 !important;
  min-height: 100px;
}

.promo-dots {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 10px;
}
.promo-dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}
.promo-dot.active {
  width: 16px;
  background: rgba(255,255,255,0.55);
}

/* ── Gold variant of promo (gift contract) ── */
.promo-gold {
  background:
    linear-gradient(135deg, rgba(232,201,138,0.16) 0%, rgba(247,224,176,0.08) 40%, rgba(199,156,91,0.10) 100%),
    rgba(255,255,255,0.02);
  box-shadow:
    inset 0 0 0 1px rgba(232,201,138,0.30),
    0 10px 26px rgba(199,156,91,0.12);
  cursor: pointer;
  padding-left: 14px;
  gap: 12px;
  transition: box-shadow 0.18s;
}
.promo-gold:hover {
  box-shadow:
    inset 0 0 0 1px rgba(247,224,176,0.50),
    0 14px 32px rgba(199,156,91,0.20);
}
.promo-gold-blob-a {
  position: absolute; inset: -40% 35% -40% auto; width: 55%;
  filter: blur(28px); opacity: 0.55; pointer-events: none;
  background: radial-gradient(50% 60% at 60% 50%, #f3d68f 0%, transparent 65%);
}
.promo-gold-blob-b {
  position: absolute; inset: auto -10% -60% 40%; width: 50%; height: 140%;
  filter: blur(28px); opacity: 0.35; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, #d9a85a 0%, transparent 65%);
}
.promo-gold-shine {
  position: absolute; top: 0; left: -30%;
  width: 35%; height: 100%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,240,200,0.45) 50%, transparent 65%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: promoGoldShine 5.5s ease-in-out 1.6s infinite;
}
@keyframes promoGoldShine {
  0%, 60%, 100% { left: -30%; opacity: 0; }
  72% { opacity: 0.9; }
  90% { left: 110%; opacity: 0; }
}
.promo-gold-icon {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 14px;
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  color: #5a3e15;
  display: grid; place-items: center;
  box-shadow:
    0 6px 14px rgba(199,156,91,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(120,80,30,0.18);
}
.promo-gold-row {
  display: flex; align-items: center; gap: 8px;
}
.promo-gold-new {
  font-size: 9px; font-weight: 800; letter-spacing: 0.10em;
  padding: 2px 7px; border-radius: 999px;
  background: linear-gradient(135deg, #f5dfa3 0%, #d4ad62 100%);
  color: #3a280c;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(212,173,98,0.4);
}
.promo-gold .promo-sub { color: rgba(255,237,201,0.62); }
.promo-cta-gold {
  background: rgba(247,224,176,0.16);
  border-color: rgba(247,224,176,0.32);
  color: #f0d99f;
}

/* ── Pitch variants of promo (referral / mining / services / staking) ──
   Общая стеклянная база .promo + цветной blur-blob + иконка-бейдж в тинте акцента.
   Палитра берётся из бренд-токенов (violet/green/peri/peach). Каждый слайд задаёт
   свой набор --p-* переменных. */
.promo-pitch {
  padding-left: 14px;
  gap: 12px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--p-bd, rgba(255,255,255,0.09));
  transition: box-shadow 0.18s, transform 0.15s;
}
.promo-pitch:hover {
  box-shadow: inset 0 0 0 1px var(--p-bd), 0 12px 30px rgba(0,0,0,0.24);
}
.promo-pitch:active { transform: scale(0.992); }

/* Акцентные палитры слайдов */
.promo-violet { --p-glow: #b8a4ef; --p-tint: rgba(184,164,239,0.14); --p-bd: rgba(184,164,239,0.26); --p-ink: #cbbcff; }
.promo-green  { --p-glow: #6ee7b7; --p-tint: rgba(110,231,183,0.13); --p-bd: rgba(110,231,183,0.24); --p-ink: #93f0cd; }
.promo-peri   { --p-glow: #c8d2f4; --p-tint: rgba(200,210,244,0.15); --p-bd: rgba(200,210,244,0.26); --p-ink: #dbe3ff; }
.promo-peach  { --p-glow: #e9c9b1; --p-tint: rgba(233,201,177,0.15); --p-bd: rgba(233,201,177,0.26); --p-ink: #f3d9c2; }

.promo-pitch-blob {
  position: absolute; inset: -45% 24% -45% auto; width: 64%;
  background: radial-gradient(54% 64% at 64% 50%, var(--p-glow) 0%, transparent 64%);
  filter: blur(22px); opacity: 0.42; pointer-events: none;
}
.promo-pitch-icon {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--p-tint);
  border: 1px solid var(--p-bd);
  color: var(--p-ink);
}
.promo-pitch-row { display: flex; align-items: center; gap: 8px; }

.promo-badge {
  flex-shrink: 0; white-space: nowrap;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 999px; line-height: 1.5;
}
.promo-badge-soon {
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13);
}
.promo-badge-pct {
  background: var(--p-tint); color: var(--p-ink);
  box-shadow: inset 0 0 0 1px var(--p-bd);
}

.promo-chips { display: flex; gap: 6px; margin-top: 6px; }
.promo-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.01em;
  padding: 2px 8px; border-radius: 999px;
  color: rgba(255,255,255,0.74);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.promo-chip-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }

.promo-cta-accent {
  background: var(--p-tint);
  border-color: var(--p-bd);
  color: var(--p-ink);
}

/* ── 3D-стикер в промо-слайде (стандарт §19, эталон — .ai-chat-status.has-mascot) ──
   Стикер вынесен ИЗ карточки .promo (у неё overflow:hidden + mask для блобов) и
   лежит в обёртке .promo-slide (overflow видим). Трек получает верхний отступ,
   слайды прижаты к низу (align-items:flex-end) — голова стикера свободно торчит
   над карточкой в этот отступ, при этом карусель листается по X как обычно. */
.promo-sticker {
  position: absolute;
  left: 12px;
  bottom: 0;
  width: auto;
  height: 118px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.42));
}
/* Реферал — landscape-стикер (два персонажа): размер по ШИРИНЕ, сдвинут чуть левее. */
.promo-violet .promo-sticker {
  width: 172px;
  height: auto;
  left: 0px;
}
/* Майнинг/Сервисы — стикеры сдвинуты правее. */
.promo-green .promo-sticker { left: 10px; height: 124px; }
.promo-peri .promo-sticker { left: 20px; height: 124px; }
.promo-gold-slide .promo-sticker { height: 124px; }
/* Текст карточки сдвинут вправо от стикера; стрелка-CTA на стикер-слайдах убрана. */
.promo-has-sticker > .promo {
  padding-left: 116px;
}
.promo-green.promo-has-sticker > .promo { padding-left: 124px; }
.promo-gold-slide.promo-has-sticker > .promo { padding-left: 126px; }
.promo-peri.promo-has-sticker > .promo { padding-left: 185px; } /* VPN-мaскот шире старого services-mascot, текст ушёл правее, чтобы не наезжал. */
/* Median Tap — стикер крупнее, целиком внутри блока (нога не выезжает) */
.promo-peach .promo-sticker { width: auto; height: 124px; left: 14px; bottom: 0; }
.promo-peach.promo-has-sticker > .promo { padding-left: 150px; } /* текст сдвинут правее, чтобы не наезжал на median-tap-маскота. */
.promo-violet.promo-has-sticker > .promo {
  padding-left: 185px;
}
.promo-has-sticker .promo-cta { display: none; }
.promo-has-sticker .promo-body { padding-right: 4px; }

/* SECTION */
.section { margin-top: 24px; }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 12px;
}
.section-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.section-link { font-size: 12px; font-weight: 500; color: var(--violet); letter-spacing: 0.01em; opacity: 0.9; }

/* ============================================================
   PAGE: CONTRACTS LIST
   ============================================================ */
.page-header {
  padding: 0 20px 12px;
  display: flex; align-items: center; gap: 12px;
}
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }

.contracts-list { padding: 0 14px; display: flex; flex-direction: column; gap: 12px; }
.contract-item {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: background 0.18s, transform 0.14s;
  position: relative; overflow: hidden;
}
.contract-item::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(130,169,243,0.06) 0%, rgba(193,124,225,0.06) 100%);
  opacity: 0; transition: opacity 0.2s;
}
.contract-item:hover::before { opacity: 1; }
.contract-item:active { transform: scale(0.99); }

.contract-gauge-mini {
  position: relative; width: 58px; height: 58px; flex-shrink: 0;
}
.contract-gauge-mini svg { width: 100%; height: 100%; overflow: visible; }
.contract-gauge-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.contract-gauge-num { font-size: 13px; font-weight: 600; color: #fff; line-height: 1; }
.contract-gauge-day { font-size: 6.5px; font-weight: 500; color: rgba(255,255,255,0.6); letter-spacing: 1.5px; margin-top: 2px; }

.contract-info { flex: 1; min-width: 0; }
.contract-name { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 0.04em; }
.contract-meta { font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; }
.contract-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.contract-status.active { background: rgba(110,231,183,0.12); color: #7eecbf; border: 1px solid rgba(110,231,183,0.22); }
.contract-status.pending { background: rgba(233,201,177,0.12); color: #e9c9b1; border: 1px solid rgba(233,201,177,0.22); }

.contracts-income-card {
  margin: 20px 14px 0;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 18px 20px;
  position: relative; overflow: hidden; isolation: isolate;
}
.cic-blob {
  position: absolute;
  inset: -20% -10% -20% 60%;
  filter: blur(40px); opacity: 0.25; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, #999CF6 0%, transparent 100%);
}
.cic-label { font-size: 10.5px; font-weight: 500; color: var(--ink-quiet); letter-spacing: 0.06em; text-transform: uppercase; position: relative; z-index: 1; }
.cic-value { font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -0.03em; margin-top: 4px; position: relative; z-index: 1; }
.cic-sub { font-size: 12px; color: var(--ink-mute); margin-top: 4px; position: relative; z-index: 1; }
.cic-row {
  display: flex; gap: 10px; margin-top: 16px; position: relative; z-index: 1;
}
.cic-stat {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 10px 12px;
}
.cic-stat-label { font-size: 10px; color: var(--ink-quiet); font-weight: 500; }
.cic-stat-value { font-size: 16px; font-weight: 700; color: #fff; margin-top: 3px; }

/* ============================================================
   PAGE: WALLET (TRANSACTIONS)
   ============================================================ */
.wallet-balance {
  margin: 0 14px;
  border-radius: 26px;
  padding: 20px 20px 18px;
  overflow: hidden; isolation: isolate;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  position: relative;
  transform: translateZ(0);
}
.wb-blob {
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 55% at 80% 30%, rgba(200,210,244,0.18) 0%, transparent 70%),
    radial-gradient(40% 40% at 20% 80%, rgba(183,222,216,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.wb-label { font-size: 10.5px; font-weight: 500; color: var(--ink-quiet); letter-spacing: 0.07em; text-transform: uppercase; position: relative; z-index: 1; }
.wb-amount {
  display: flex; align-items: baseline; gap: 4px;
  margin-top: 6px; position: relative; z-index: 1;
}
.wb-int { font-size: 40px; font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.wb-frac { font-size: 24px; font-weight: 700; color: rgba(255,255,255,0.4); }
.wb-cur { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; margin-left: 4px; align-self: center; }
.wb-actions {
  display: flex; gap: 8px; margin-top: 18px; position: relative; z-index: 1;
}
.wb-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 0; border-radius: 14px;
  font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  transition: background 0.18s, transform 0.14s;
}
.wb-btn:hover { background: rgba(255,255,255,0.11); }
.wb-btn:active { transform: scale(0.97); }
.wb-btn.primary {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
}
.wb-btn.primary:hover { background: rgba(255,255,255,0.14); }

/* wallet tabs + invoice */
.wallet-tabs {
  display: flex; gap: 4px; margin: 22px 14px 0;
  height: 55px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 4px;
  font-size: 14px;
}
.wallet-tab {
  flex: 1; padding: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: inherit; font-weight: 600; color: var(--ink-mute); text-align: center;
  line-height: 1;
  transition: color 0.2s, background 0.2s;
}
.wallet-tab.active { color: #fff; background: rgba(255,255,255,0.10); }

.tx-show-more {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 10px auto 0;
  padding: 6px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  font-size: 11.5px; font-weight: 500; color: var(--ink-mute);
  gap: 4px; cursor: pointer; transition: background 0.18s;
  display: flex; width: fit-content; margin-left: auto; margin-right: auto;
}
.tx-show-more:hover { background: rgba(255,255,255,0.07); }

.invoice-empty {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 216px;
  margin: 14px 14px 0;
  padding: 22px 20px 20px;
  gap: 10px; text-align: center;
  border-radius: 22px;
  background: rgba(255,255,255,0.010);
  border: 2px dashed rgba(255,255,255,0.24);
  overflow: hidden;
}
.invoice-empty::before {
  /* Радиальные подсветки внутри пунктирного контура убраны (28.05.2026) —
     по комменту: «оставь только пустоту на фоне и оконтовку пунктирную».
     Псевдоэлемент оставлен пустым на случай, если он где-то перекрывался
     селекторами — выключаем его одной строкой без удаления окружающей логики. */
  content: none;
}
.invoice-empty > * {
  position: relative;
  z-index: 1;
}
.invoice-empty-art {
  width: 122px;
  height: 122px;
  display: block;
  opacity: 0.96;
  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,0.26))
    drop-shadow(0 0 18px rgba(255,255,255,0.10));
}
.invoice-empty-sub { font-size: 12.5px; color: var(--ink-quiet); line-height: 1.45; max-width: 315px; }

.tx-group { margin-top: 16px; }
.tx-group-label {
  font-size: 11px; font-weight: 600;
  color: var(--ink-quiet); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0 20px 10px;
}
.tx-list { padding: 0 14px; display: flex; flex-direction: column; gap: 2px; }
.tx-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 16px;
  transition: background 0.18s;
  cursor: pointer;
}
.tx-item:hover { background: rgba(255,255,255,0.04); }
.tx-icon {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
/* Normalize icon size across all history rows ≈ half of container.
   Overrides per-Ic width/height attributes. */
.tx-icon svg { width: 26px; height: 26px; }
.tx-icon.green { background: rgba(110,231,183,0.12); color: #6ee7b7; }
.tx-icon.red { background: rgba(255,100,100,0.12); color: #ff8080; }
.tx-icon.violet { background: rgba(184,164,239,0.12); color: #b8a4ef; }
.tx-icon.peach { background: rgba(233,201,177,0.14); color: var(--peach); }
.tx-info { flex: 1; min-width: 0; }
.tx-name {
  font-size: 14px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tx-date {
  display: flex; align-items: center; gap: 5px;
  min-width: 0;
  font-size: 11.5px; color: var(--ink-quiet); margin-top: 2px;
}
.tx-meta-part {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tx-meta-part + .tx-meta-part::before {
  content: "·";
  margin-right: 5px;
  color: rgba(246,241,255,0.24);
}
.tx-amount { font-size: 15px; font-weight: 600; text-align: right; }
.tx-amount.pos { color: #7eecbf; }
.tx-amount.neg { color: rgba(255,255,255,0.7); }

/* ============================================================
   PAGE: PARTNERS (REFERRAL)
   ============================================================ */
.ref-tabs {
  display: flex; gap: 0;
  margin: 14px 14px 0;
  height: 55px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 4px;
  position: relative;
}
.ref-tab {
  flex: 1; padding: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  color: var(--ink-mute); text-align: center;
  transition: color 0.2s, background 0.2s;
  position: relative; z-index: 1;
}
.ref-tab.active { color: #fff; background: rgba(255,255,255,0.10); }
.ref-tab-help {
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  display: grid; place-items: center;
  color: var(--peach);
  margin: 4px 0 4px 4px;
  flex-shrink: 0;
  font-size: 12px; font-weight: 700;
}

.ref-panel { display: none; }
.ref-panel.active { display: block; }
#page-partners .ref-panel > .profile-level { margin-top: 14px; }

.ref-qr-section {
  padding: 24px 20px 0;
  display: flex; flex-direction: column; align-items: center;
}
.ref-qr-title { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.01em; text-align: center; }
.ref-qr-sub { font-size: 13px; color: var(--ink-mute); text-align: center; margin-top: 8px; line-height: 1.5; max-width: 260px; }
.ref-qr-wrap {
  margin-top: 24px;
  width: 250px; height: 250px;
  /* Полупрозрачный стеклянный блок под QR (по комменту max 29.05.2026) — та же
     glass-палитра, что у круга гейджа: лёгкая белёсая заливка + тёмная подложка,
     тонкая окантовка, внутренний хайлайт и backdrop-blur. Белые модули QR читаются
     поверх него на тёмном фоне. */
  background:
    linear-gradient(140deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015)),
    rgba(12,6,22,0.34);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 30px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 22px 44px rgba(0,0,0,0.32);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Инвертированное состояние по тапу (по комменту max 29.05.2026): блок белый,
   модули чёрные — универсально сканируется. */
.ref-qr-wrap.is-inverted {
  background: #fff;
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ref-qr-wrap:active { transform: scale(0.99); }
.ref-qr-code {
  display: block;
}
.ref-qr-svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 24px;
}

.ref-field-group { width: 100%; padding: 20px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.ref-field { display: flex; flex-direction: column; gap: 6px; }
.ref-field-label { font-size: 11px; font-weight: 500; color: var(--ink-quiet); letter-spacing: 0.04em; padding-left: 2px; }
.ref-field-input {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 12px 14px;
  gap: 8px;
}
.ref-field-value { font-size: 13px; font-weight: 500; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-field-link {
  text-decoration: none;
}
.ref-field-link:hover {
  color: #fff;
}
.ref-copy-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center;
  color: var(--ink-mute);
  transition: background 0.18s, color 0.18s, transform 0.14s;
}
.ref-copy-btn:hover { background: rgba(255,255,255,0.11); color: #fff; }
.ref-copy-btn:active { transform: scale(0.9); }
.ref-copy-btn.copied { color: var(--green); }

/* Реферальный код: поле-инпут и ОТДЕЛЬНАЯ кнопка «Поделиться» — два самостоятельных
   элемента в одной строке (по комменту max 29.05.2026). Кнопка НЕ внутри поля, просто
   рядом; одинаковая высота через align-items: stretch. */
.ref-field-coderow { display: flex; align-items: stretch; gap: 10px; }
.ref-field-coderow .ref-field-input { flex: 1 1 auto; min-width: 0; }
.ref-share-pill {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 16px;
  min-width: 132px;
  border-radius: 14px;
  background: linear-gradient(135deg, #82A9F3 0%, #999CF6 50%, #C17CE1 100%);
  color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(153,156,246,0.28);
  transition: filter 0.18s, transform 0.14s, background 0.2s;
}
.ref-share-pill:hover { filter: brightness(1.08); }
.ref-share-pill:active { transform: scale(0.97); }
.ref-share-pill.is-done {
  background: linear-gradient(135deg, #6ee7b7 0%, #82A9F3 100%);
  box-shadow: 0 6px 16px rgba(110,231,183,0.24);
}

.ref-share-btn {
  margin: 20px 14px 0;
  width: calc(100% - 28px);
  padding: 15px 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #82A9F3 0%, #999CF6 50%, #C17CE1 100%);
  font-size: 15px; font-weight: 600; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.18s, transform 0.14s;
  box-shadow: 0 8px 24px rgba(153,156,246,0.25);
}
.ref-share-btn:hover { filter: brightness(1.08); }
.ref-share-btn:active { transform: scale(0.98); }
.ref-share-btn.is-done {
  background: linear-gradient(135deg, #6ee7b7 0%, #82A9F3 100%);
  box-shadow: 0 8px 24px rgba(110,231,183,0.22);
}

/* REFERRALS LIST */
.ref-stat {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 14px;
}
.ref-stat-label { font-size: 10px; font-weight: 500; color: var(--ink-quiet); text-transform: uppercase; letter-spacing: 0.05em; }
.ref-stat-value { font-size: 24px; font-weight: 700; color: #fff; margin-top: 4px; letter-spacing: -0.02em; }
.ref-stat-sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }

/* «Заработано» с разбивкой по звеньям — 1 звено / 2 звено в одной карточке */
.ref-stat-earn { display: flex; flex-direction: column; }
.ref-earn-split { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.ref-earn-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ref-earn-tier { font-size: 11px; font-weight: 500; color: var(--ink-quiet); white-space: nowrap; }
.ref-earn-amt { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.01em; white-space: nowrap; }

/* Верхняя строка: количество рефералов (зелёная карточка) + блок уровня в один ряд */
.ref-top-row { display: flex; gap: 10px; align-items: stretch; margin: 14px 14px 0; }
.ref-top-row .ref-stat { margin: 0; }
.ref-top-row .ref-stat-green { flex: 0 0 118px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.ref-level-inrow { flex: 1; margin: 0 !important; }
/* зелёный оттенок блока количества рефералов */
.ref-stat-green {
  background: rgba(110,231,183,0.09);
  border-color: rgba(110,231,183,0.26);
}
.ref-stat-green .ref-stat-value { color: #7eecbf; }
.ref-stat-green .ref-stat-label { color: #7eecbf; }
.ref-stat-green .ref-stat-sub { color: rgba(126,236,191,0.72); }

/* «Заработано на реферальной программе» — карточка на всю ширину (1/2 звено + выплачено) */
.ref-wide-stats { display: flex; flex-direction: column; gap: 10px; margin: 10px 14px 0; }
.ref-wide-stats .ref-stat { margin: 0; width: 100%; }
.ref-stat-wide .ref-earn-split { flex-direction: row; gap: 10px; margin-top: 10px; }
.ref-stat-wide .ref-stat-label { color: #fff; }
.ref-stat-wide .ref-earn-line {
  flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.ref-people-list { padding: 16px 14px 0; display: flex; flex-direction: column; gap: 6px; }
.ref-person {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.ref-person-avatar {
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  color: #180820; flex-shrink: 0;
}
/* Глиф уровня масштабируем под уменьшенный медальон (комм. 12: бейджи были крупноваты).
   Карточка уровня в профиле использует свой размер — правка только в списке рефералов. */
.ref-person-avatar .profile-level-glyph { width: 20px; height: 20px; }
.ref-person-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.ref-person-date { font-size: 11px; color: var(--ink-quiet); margin-top: 2px; }
.ref-person-earn {
  font-size: 12px; font-weight: 700; color: #7eecbf; margin-left: auto;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(110,231,183,0.10);
  border: 1px solid rgba(110,231,183,0.22);
}
.ref-person-body { min-width: 0; flex: 1; }
.ref-person-via { color: var(--ink-mute); }

/* Под-табы внутри панели «Ваши рефералы»: 1 звено / 2 звено */
.ref-tier-tabs {
  display: flex; gap: 6px;
  margin: 14px 14px 0;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
.ref-tier-tab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 12px;
  border: 0; background: transparent;
  border-radius: 10px;
  color: var(--ink-quiet);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: color 0.16s, background 0.16s;
}
.ref-tier-tab .ref-tier-tab-rate {
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}
.ref-tier-tab.active {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.ref-tier-tab.active .ref-tier-tab-rate {
  background: rgba(183,222,216,0.18);
  color: var(--aqua);
}

/* Пояснение под активным звеном (10% / 5%) */
.ref-tier-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 10px 14px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.ref-tier-banner-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(183,222,216,0.14);
  color: var(--aqua);
}
.ref-tier-banner-text {
  font-size: 12.5px; line-height: 1.45;
  color: var(--ink);
}
.ref-tier-banner-text b { color: var(--aqua); font-weight: 700; }
.ref-tier-banner-text i { font-style: normal; color: #fff; }
.ref-tier-banner-mute { color: var(--ink-quiet); }
.ref-tier-banner-2 .ref-tier-banner-icon {
  background: rgba(184,164,239,0.16);
  color: var(--violet);
}
.ref-tier-banner-2 .ref-tier-banner-text b { color: var(--violet); }

/* Сноска с правилом про подарки — тоньше баннера, без фона, но с иконкой подарка.
   Подаренные контракты не дают бонус — действует на оба звена. */
.ref-rule-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 8px 14px 0;
  padding: 0 4px;
  font-size: 11.5px; line-height: 1.45;
  color: var(--ink-quiet);
}
.ref-rule-note > svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--ink-mute);
}

/* Аватарка реферала: звезда по уровню + металлический градиент.
   Поверх — лёгкий шум и блик для «металла». */
.ref-person-avatar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ref-person-avatar > svg {
  position: relative; z-index: 1;
  width: 18px; height: 18px;
}
.ref-person-avatar::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  z-index: 0;
}
/* Медь — 1 звезда (member) */
.ref-avatar-lvl-member {
  background: linear-gradient(135deg, #d98e6a 0%, #9a4f2a 100%);
  color: #3a1a08;
  box-shadow:
    0 4px 10px rgba(154,79,42,0.32),
    inset 0 1px 0 rgba(255,220,196,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.22);
}
/* Серебро — 2 звезды (partner) */
.ref-avatar-lvl-partner {
  background: linear-gradient(135deg, #e6ebef 0%, #98a3ad 100%);
  color: #2b3138;
  box-shadow:
    0 4px 10px rgba(152,163,173,0.28),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}
/* Золото — силуэт со звездой (ambassador) */
.ref-avatar-lvl-ambassador {
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  color: #5a3e15;
  box-shadow:
    0 4px 10px rgba(199,156,91,0.36),
    inset 0 1px 0 rgba(255,234,188,0.55),
    inset 0 -1px 0 rgba(120,80,30,0.20);
}
.ref-avatar-lvl-ambassador > svg { width: 20px; height: 20px; }

/* Пустое состояние списка (нет рефералов на этом звене) */
.ref-empty {
  margin: 6px 0 4px;
  padding: 16px 14px;
  text-align: center;
  font-size: 12.5px; line-height: 1.45;
  color: var(--ink-quiet);
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 14px;
}

/* ============================================================
   PAGE: PROFILE
   ============================================================ */
.profile-hero {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  margin: 0 14px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.profile-avatar {
  width: 80px; height: 80px; border-radius: 999px;
  background: linear-gradient(135deg, #c8a4ff 0%, #f5a7d9 55%, #e9c9b1 100%);
  color: #180820;
  display: grid; place-items: center;
  font-size: 28px; font-weight: 700;
  position: relative;
  box-shadow: 0 8px 28px rgba(200,164,255,0.30);
}
/* глиф уровня в аватаре профиля (буква заменена иконкой уровня, комм. max) */
.profile-avatar .profile-level-glyph { width: 34px; height: 34px; }
/* аватар-уровень: золотой скруглённый квадрат как медальон уровня, кликабелен
   (переход в рефералку). Модификатор поверх .profile-avatar, базовый аватар в
   других местах не задет. */
.profile-avatar-level {
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  color: #5a3e15;
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(120,80,30,0.18);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.profile-avatar-level:active { transform: scale(0.94); }
/* имя+UID: чуть приподняты и с плотной строкой, чтобы обе строки читались
   ровно по центру относительно аватара (комм. max). */
.profile-hero-text { margin-top: -2px; }
.profile-hero-text .profile-name { line-height: 1.15; }
.profile-avatar-edit {
  position: absolute; right: 0; bottom: 0;
  width: 26px; height: 26px; border-radius: 999px;
  background: linear-gradient(135deg, #999CF6 0%, #C17CE1 100%);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.profile-name { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-top: 14px; }
.profile-id { font-size: 12px; color: var(--ink-quiet); margin-top: 4px; letter-spacing: 0.02em; }

.profile-level {
  margin: 0 14px;
  background: rgba(255,255,255,0.04);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  position: relative; overflow: hidden; isolation: isolate;
  /* Тот же фикс, что у .useful-modal-card (max 06.06.2026): clip-path
     жёстко скругляет блок и не даёт filter:blur у ::before (gold-вариант
     с inset:-40% и blur 28px) выходить за угол. overflow:hidden один
     не справляется в Safari/iOS с blur-фильтрами. */
  clip-path: inset(0 round 20px);
}
.profile-level-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(130,169,243,0.92) 0%, rgba(193,124,225,0.92) 100%);
  box-shadow:
    0 6px 14px rgba(153,156,246,0.24),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.16);
}
.profile-level-icon-partner {
  color: #102529;
  background: linear-gradient(135deg, #b7ded8 0%, #82A9F3 100%);
  box-shadow:
    0 6px 14px rgba(130,169,243,0.22),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}
.profile-level-icon-ambassador,
.profile-level-gold .profile-level-icon {
  width: 46px; height: 46px;
  border-radius: 15px;
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  color: #5a3e15;
  box-shadow:
    0 6px 14px rgba(199,156,91,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(120,80,30,0.18);
}
.profile-level-body { flex: 1; min-width: 0; }
.profile-level::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.30 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.10; mix-blend-mode: overlay; pointer-events: none;
  z-index: 0;
}
.profile-level-gold {
  background:
    linear-gradient(135deg, rgba(232,201,138,0.16) 0%, rgba(247,224,176,0.08) 40%, rgba(199,156,91,0.10) 100%),
    rgba(255,255,255,0.02);
  box-shadow:
    inset 0 0 0 1px rgba(232,201,138,0.30),
    0 10px 30px rgba(199,156,91,0.12),
    inset 0 1px 0 rgba(247,224,176,0.18);
}
.profile-level-gold::before {
  content: "";
  position: absolute;
  inset: -40% -10% -60% 35%;
  pointer-events: none;
  z-index: 0;
  filter: blur(28px);
  opacity: 0.45;
  background:
    radial-gradient(50% 60% at 35% 40%, #f3d68f 0%, transparent 65%),
    radial-gradient(45% 55% at 72% 70%, #d9a85a 0%, transparent 70%);
}
.profile-level-gold::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.83 0 0 0 0 0.55 0 0 0 0.45 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  opacity: 0.08;
}
.profile-level-gold .profile-level-accent,
.profile-level-gold .profile-progress-val { color: #f0d99f; }
.profile-level-gold .profile-level-badge {
  color: #3a280c;
  background: linear-gradient(135deg, #f5dfa3 0%, #d4ad62 100%);
  border-color: rgba(247,224,176,0.42);
  box-shadow: 0 2px 6px rgba(212,173,98,0.32);
}
.profile-level-gold .profile-progress-bar { background: rgba(247,224,176,0.13); }
.profile-level-gold .profile-progress-fill { background: linear-gradient(90deg, #f0d99f 0%, #d4ad62 100%); }
.profile-level > * { position: relative; z-index: 1; }
.profile-level-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.profile-level-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: #fff; }
.profile-level-accent { color: var(--aqua); }
.profile-level-badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(183,222,216,0.12); border: 1px solid rgba(183,222,216,0.26);
  color: var(--aqua); font-size: 11px; font-weight: 700;
}
.profile-progress-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.07);
  position: relative; overflow: hidden;
}
.profile-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #82A9F3 0%, #b7ded8 100%);
  width: 0;
}
.profile-progress-label { display: flex; justify-content: space-between; margin-top: 6px; }
.profile-progress-val { font-size: 10.5px; color: var(--ink-quiet); }

.profile-menu { padding: 16px 14px 0; display: flex; flex-direction: column; gap: 6px; }
.profile-menu-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.18s, transform 0.14s;
  cursor: pointer;
}
.profile-menu-item:hover { background: rgba(255,255,255,0.06); }
.profile-menu-item:active { transform: scale(0.99); }
.profile-menu-icon {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.profile-menu-icon.violet { background: rgba(184,164,239,0.14); color: var(--violet); }
.profile-menu-icon.aqua { background: rgba(183,222,216,0.14); color: var(--aqua); }
.profile-menu-icon.peach { background: rgba(233,201,177,0.14); color: var(--peach); }
.profile-menu-icon.peri { background: rgba(200,210,244,0.14); color: var(--peri); }
.profile-menu-icon.red { background: rgba(255,100,100,0.10); color: #ff8080; }
.profile-menu-icon.lang { background: transparent; padding: 0; overflow: visible; }
.profile-menu-icon.lang svg { width: 100% !important; height: 100% !important; }
.profile-menu-text { flex: 1; }
.profile-menu-label { font-size: 14px; font-weight: 500; color: var(--ink); }
.profile-menu-sub { font-size: 11.5px; color: var(--ink-quiet); margin-top: 1px; }
.profile-menu-chevron { color: var(--ink-quiet); }
.profile-menu-value { font-size: 13px; font-weight: 500; color: var(--ink-mute); margin-right: 6px; }

/* ============================================================
   CONTRACT SHOP PAGE
   ============================================================ */
.cpage-tabs {
  display: flex; gap: 4px;
  margin: 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 4px;
}
.cpage-tab {
  flex: 1; padding: 10px 0; border-radius: 12px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-mute); text-align: center;
  transition: color 0.2s, background 0.2s;
}
.cpage-tab:focus,
.cpage-tab:focus-visible { outline: none; }
.cpage-tab.active { color: #fff; background: rgba(255,255,255,0.10); }

.cpage-track {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 16px 0 4px; gap: 0;
}
.cpage-track::-webkit-scrollbar { display: none; }
.cpage-slide {
  flex: 0 0 100%; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
  padding: 0 14px;
}

.cshop-card { cursor: pointer; transition: background 0.22s, box-shadow 0.22s, transform 0.18s; gap: 8px; }
.cshop-card .bc-gauge-section {
  min-width: 0;
  padding-bottom: 3px;
}
/* Блок деталей (правый) шире + меньше боковые отступы внутри, чтобы длинные
   метки (в т.ч. при смене языка) не упирались в край и не съезжали. По комменту
   max 29.05.2026. Гейдж-колонка ужата до ширины кольца (min-width:0) — круг с датой
   садится ближе к левому краю, а 1fr-деталям достаётся больше ширины. Изменения
   только в .cshop-card — главная и ордер-модалка не затронуты (rules.md §13). */
.cshop-card .bc-details {
  padding-left: 11px;
  padding-right: 11px;
}
.cshop-card .bc-gauge-wrapper {
  width: 112px;
  height: 112px;
}
.cshop-card .bc-contract-title {
  margin-top: -7px;
}
.cshop-card .bc-contract-title-main {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.2px;
}
.cshop-card .bc-contract-title-sub {
  margin-top: 4px;
}
.cshop-card:active { transform: scale(0.99); }
/* STARTER (пробный) контракт — собственная зелёная тема (комм. max): отдельный стиль тёплого
   зелёного оттенка, применяется везде, где рендерится STARTER (data.trial): каталог +
   шаг подарка. Без !important — мешавшее редундантное правило .gift-contract-track
   .cshop-card убрано. Выбранное состояние (.cshop-selected) по-прежнему перекрывает. */
.cshop-card.cshop-starter {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(150,214,150,0.10) 0%, transparent 60%),
    linear-gradient(150deg, rgba(150,214,150,0.07) 0%, rgba(126,225,170,0.035) 55%, rgba(255,255,255,0.018) 100%);
  box-shadow: inset 0 0 0 1px rgba(150,214,150,0.18);
}
.cshop-card.cshop-selected {
  background: rgba(153,156,246,0.05) !important;
  box-shadow: inset 0 0 0 1px rgba(153,156,246,0.38) !important;
}
.cshop-check {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 999px;
  background: linear-gradient(135deg, #999CF6 0%, #C17CE1 100%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.5);
  transition: opacity 0.22s, transform 0.3s cubic-bezier(0.34,1.4,0.64,1); z-index: 3;
}
.cshop-selected .cshop-check { opacity: 1; transform: scale(1); }

.cpage-dots {
  display: flex; justify-content: center; align-items: center; gap: 6px; padding: 10px 0 0;
}
.cpage-dot { height: 5px; width: 5px; border-radius: 999px; background: rgba(255,255,255,0.18); transition: width 0.3s cubic-bezier(0.38,1.2,0.38,1), background 0.3s; }
.cpage-dot.active { width: 18px; background: rgba(255,255,255,0.55); }

.cpage-buy-wrap {
  position: sticky; bottom: 86px;
  margin: 16px 14px 0;
  z-index: 20;
  animation: buySlideUp 0.28s cubic-bezier(0.34,1.4,0.64,1);
}
@keyframes buySlideUp { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cpage-buy-btn {
  width: 100%; padding: 15px 0; border-radius: 18px;
  background: linear-gradient(135deg, #82A9F3 0%, #999CF6 50%, #C17CE1 100%);
  font-size: 15px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.18s, transform 0.14s;
}
.cpage-buy-btn:hover { filter: brightness(1.08); }
.cpage-buy-btn:active { transform: scale(0.98); }

/* ── Contract purchase order ── */
.contract-order-backdrop {
  position: fixed; inset: 0;
  z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(4,1,10,0.72);
  animation: usefulModalFade 0.2s ease both;
}
.contract-order {
  position: relative;
  width: min(100%, 380px);
  overflow: hidden;
  border-radius: 24px;
  padding: 22px 20px 20px;
  color: #fff;
  background: #14101c;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 28px 80px rgba(0,0,0,0.62);
  animation: contractOrderPop 0.26s cubic-bezier(0.34,1.18,0.64,1) both;
}
@keyframes contractOrderPop {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.contract-order > * { position: relative; z-index: 1; }
.contract-order-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
}

/* ── Lead: what is being bought ── */
.contract-order-lead {
  padding-right: 34px;
}
.contract-order-kicker {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}
.contract-order-title {
  margin-top: 7px;
  font-size: 23px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.06em;
}
.contract-order-sub {
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255,255,255,0.52);
}

/* ── Amount due ── */
.contract-order-pay {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.contract-order-pay-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.46);
}
.contract-order-pay-value {
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
}

/* ── Balance hint ── */
.contract-order-balance {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255,255,255,0.56);
  text-align: center;
}
.contract-order-balance strong { color: #fff; font-weight: 800; }
.contract-order-balance.bad { color: rgba(255,176,130,0.82); }
.contract-order-balance.bad strong { color: #ffc8a4; }

/* Этап 7 ROADMAP: текст ошибки backend-действия под кнопкой (покупка/подарок) */
.contract-order-error {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  color: #ff9e9e;
  text-align: center;
  text-wrap: pretty;
}
.gift-order-error { margin-top: 12px; }

/* ── Restrained button just for this modal ── */
.contract-order .order-buy-button {
  background: #6457d6;
  box-shadow: 0 12px 26px rgba(100,87,214,0.26);
}
.contract-order .order-buy-button.done {
  background: #3fdc75;
  box-shadow: 0 12px 28px rgba(63,220,117,0.22);
}

/* ── STARTER: зелёная тема ордер-модалки (комм. max) ──
   STARTER несёт свою зелёную тему везде, где встречается. Здесь — тёмно-зелёная
   подложка панели + зелёная кнопка покупки вместо индиго; done-состояние уже зелёное. */
.contract-order.is-starter {
  background:
    radial-gradient(130% 92% at 50% 0%, rgba(126,225,170,0.13) 0%, transparent 58%),
    #121a15;
  border-color: rgba(126,225,170,0.22);
}
.contract-order.is-starter .contract-order-kicker { color: rgba(126,225,170,0.72); }
.contract-order.is-starter .contract-order-pay {
  border-color: rgba(126,225,170,0.18);
  background: rgba(126,225,170,0.05);
}
.contract-order.is-starter .order-buy-button {
  background: #2fa56a;
  box-shadow: 0 12px 26px rgba(47,165,106,0.28);
}

/* ── Success state ── */
.contract-order.is-success {
  width: min(100%, 360px);
  padding: 34px 24px 32px;
}
.contract-order-success {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.cos-check {
  width: 64px; height: 64px; border-radius: 999px;
  display: grid; place-items: center;
  color: #fff;
  background: #3fdc75;
  box-shadow: 0 14px 30px rgba(63,220,117,0.28);
  animation: cosPop 0.36s cubic-bezier(0.34,1.4,0.64,1) both;
}
@keyframes cosPop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
.cos-title {
  margin-top: 18px;
  font-size: 21px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.cos-sub {
  margin-top: 8px;
  max-width: 280px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
  text-wrap: balance;
}
.cos-sub strong { color: #fff; font-weight: 800; }

/* success: «Выйти» + авто-таймер 10с (свайп-внедрение) */
.cos-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px;
}
.cos-exit {
  font-size: 14px; font-weight: 750; color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 11px 30px; border-radius: 999px;
  cursor: pointer; transition: background 0.18s, transform 0.12s;
}
.cos-exit:hover { background: rgba(255,255,255,0.14); }
.cos-exit:active { transform: scale(0.97); }
.cos-timer { position: relative; width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; }
.cos-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.cos-timer circle { fill: none; stroke-width: 2.6; }
.cos-timer circle.bg { stroke: rgba(255,255,255,0.12); }
.cos-timer circle.fg {
  stroke: #3fdc75; stroke-linecap: round;
  stroke-dasharray: 94.25; stroke-dashoffset: 0;
  animation: cosRingDeplete 10s linear forwards;
}
@keyframes cosRingDeplete { to { stroke-dashoffset: 94.25; } }
.cos-timer span { font-size: 13px; font-weight: 800; color: #fff; }

/* ── Свайп-оплата (вариант C «стекло+зерно») — только покупка контракта.
   OrderBuyButton ниже остаётся для GiftContractModal (ROADMAP: визуал не трогаем). ── */
.co-swipe {
  position: relative;
  margin-top: 16px;
  height: 60px;
  border-radius: 999px;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
  isolation: isolate;
}
.co-swipe.disabled { opacity: 0.6; pointer-events: none; }
.co-swipe-track {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 26px rgba(0,0,0,0.35);
}
.co-swipe-track::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.co-swipe-track::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 36%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10) 50%, transparent);
  transform: skewX(-16deg);
  animation: coTrackShine 3.4s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes coTrackShine { 0% { left: -40%; } 55%, 100% { left: 130%; } }
.co-swipe-fill {
  position: absolute; inset: 0; width: var(--fill, 60px); border-radius: inherit; z-index: 1; pointer-events: none; overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(95,227,212,0.18) 70%, rgba(95,227,212,0.34));
  transition: background 0.3s ease;
}
.co-swipe-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start;
  font-size: 15px; font-weight: 650; letter-spacing: 0.01em; color: rgba(255,255,255,0.80);
  z-index: 2; pointer-events: none; opacity: var(--label-op, 1); padding-left: 68px;
}
.co-swipe-chev {
  position: absolute; top: 0; bottom: 0; right: 22px;
  display: flex; align-items: center; gap: 3px; z-index: 2; pointer-events: none;
  color: #5fe3d4; opacity: var(--chev-op, 1);
}
.co-swipe-chev svg { width: 11px; height: 16px; display: block; }
.co-swipe-chev svg path { stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.co-swipe-chev span { animation: coChevMarch 1.5s linear infinite; opacity: 0.18; }
.co-swipe-chev span:nth-child(1) { animation-delay: 0s; }
.co-swipe-chev span:nth-child(2) { animation-delay: 0.12s; }
.co-swipe-chev span:nth-child(3) { animation-delay: 0.24s; }
.co-swipe-chev span:nth-child(4) { animation-delay: 0.36s; }
.co-swipe-chev span:nth-child(5) { animation-delay: 0.48s; }
@keyframes coChevMarch { 0%, 70%, 100% { opacity: 0.16; } 35% { opacity: 0.95; } }
.co-swipe-thumb {
  position: absolute; top: 50%; left: 4px;
  width: 52px; height: 52px; border-radius: 999px;
  transform: translate(var(--x, 0px), -50%);
  display: grid; place-items: center; z-index: 3; cursor: grab; touch-action: none;
  background: radial-gradient(120% 120% at 30% 25%, #ffffff, #dfe4f5);
  box-shadow: 0 6px 18px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.6);
  color: #5fe3d4;
}
.co-swipe-thumb:active { cursor: grabbing; }
.co-swipe.dragging .co-swipe-thumb { transition: none; }
.co-swipe:not(.dragging) .co-swipe-thumb { transition: transform 0.32s cubic-bezier(0.34,1.18,0.64,1); }
.co-swipe:not(.dragging) .co-swipe-fill { transition: width 0.32s cubic-bezier(0.34,1.18,0.64,1), background 0.3s ease; }
.co-swipe.idle:not(.dragging) .co-swipe-thumb { animation: coThumbNudge 3.4s ease-in-out 1.2s infinite; }
@keyframes coThumbNudge {
  0%, 88%, 100% { transform: translate(var(--x,0px), -50%); }
  92% { transform: translate(calc(var(--x,0px) + 7px), -50%); }
}
.co-thumb-ico { position: relative; width: 22px; height: 22px; }
.co-thumb-ico svg { position: absolute; left: 50%; top: 50%; }
.co-thumb-arrow { width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; transition: transform 0.3s cubic-bezier(0.34,1.18,0.64,1), opacity 0.2s ease; }
.co-thumb-ring { width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: 0; fill: none; }
.co-thumb-ring circle { fill: none; stroke: #5fe3d4; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 38 14; }
.co-thumb-check { width: 16px; height: 16px; margin: -8px 0 0 -8px; transform: translateY(20px) scale(0.6); opacity: 0; fill: #3fdc75; transition: transform 0.34s cubic-bezier(0.34,1.5,0.5,1), opacity 0.22s ease; }
.co-swipe.loading .co-thumb-arrow { transform: translateY(-20px); opacity: 0; }
.co-swipe.loading .co-thumb-ring { opacity: 1; animation: coThumbSpin 0.95s linear infinite; }
.co-swipe.done .co-thumb-arrow { opacity: 0; }
.co-swipe.done .co-thumb-ring { opacity: 0; animation: none; }
.co-swipe.done .co-thumb-check { transform: translateY(0) scale(1); opacity: 1; }
@keyframes coThumbSpin { to { transform: rotate(360deg); } }
.co-swipe.committed .co-swipe-thumb { color: #3fdc75; }
.co-swipe.committed .co-swipe-chev { opacity: 0 !important; transition: opacity 0.2s; }
.co-swipe.committed .co-swipe-label { opacity: 0 !important; transition: opacity 0.2s; }
.co-swipe.committed .co-swipe-fill { background: linear-gradient(90deg, rgba(63,220,117,0.20), rgba(63,220,117,0.42)); }

.order-buy-button {
  --order-bg: #7d6cf2;
  --order-success: #3fdc75;
  width: 100%;
  height: 52px;
  margin-top: 14px;
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: #fff;
  background:
    linear-gradient(135deg, #82A9F3 0%, #999CF6 48%, #C17CE1 100%);
  box-shadow: 0 13px 28px rgba(153,156,246,0.24);
  transition: transform 0.18s ease, background 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
}
.order-buy-button:not(.disabled):active { transform: scale(0.96); }
.order-buy-button.loading { box-shadow: 0 12px 26px rgba(153,156,246,0.20); }
.order-buy-button.done {
  background: #3fdc75;
  box-shadow: 0 12px 28px rgba(63,220,117,0.22);
}
.order-buy-button.disabled {
  opacity: 0.48;
  cursor: default;
  box-shadow: none;
}
.order-buy-icon {
  position: relative;
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-block; flex: 0 0 auto;
  background: #fff;
  overflow: hidden;
}
.order-buy-icon::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--order-bg);
  transform: scale(0);
  transition: transform 0.28s ease, background 0.25s ease;
}
.order-buy-button.loading .order-buy-icon { background: transparent; transition: background 0.1s ease 0.18s; }
.order-buy-button.loading .order-buy-icon::before { transform: scale(1); }
.order-buy-button.done .order-buy-icon::before {
  background: var(--order-success);
  transform: scale(0);
}
.order-buy-icon svg {
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  z-index: 1;
  fill: var(--order-bg);
}
.order-buy-ring {
  width: 22px !important; height: 22px !important;
  left: 0 !important; top: 0 !important;
  margin: 0 !important;
  fill: none !important;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-dasharray: 52;
  stroke-dashoffset: 104;
  opacity: 0;
}
.order-buy-arrow {
  transition: transform 0.34s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.22s ease;
}
.order-buy-check {
  transform: translateY(22px);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.24s ease;
}
.order-buy-button.loading .order-buy-ring {
  opacity: 1;
  animation: orderButtonTurn 1.2s linear infinite, orderButtonPath 1.2s linear infinite;
}
.order-buy-button.loading .order-buy-arrow {
  transform: translateY(-22px);
  opacity: 0;
}
.order-buy-button.loading .order-buy-check {
  transform: translateY(0) scale(0.6);
}
.order-buy-button.done .order-buy-ring { opacity: 0; animation: none; }
.order-buy-button.done .order-buy-arrow {
  transform: translateY(-22px);
  opacity: 0;
}
.order-buy-button.done .order-buy-check {
  fill: var(--order-success);
  transform: translateY(0) scale(1);
  opacity: 1;
  transition-delay: 0.08s;
}
@keyframes orderButtonTurn { to { transform: rotate(360deg); } }
@keyframes orderButtonPath { to { stroke-dashoffset: 0; } }
.order-buy-text {
  position: relative;
  width: 78px;
  height: 20px;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.28s ease;
}
.order-buy-text span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 780;
  line-height: 20px;
  backface-visibility: hidden;
}
.order-buy-text span:nth-child(1) { transform: rotateX(0deg) translateZ(10px); }
.order-buy-text span:nth-child(2) { transform: rotateX(-90deg) translateZ(10px); }
.order-buy-text span:nth-child(3) { transform: rotateX(-180deg) translateZ(10px); }
.order-buy-button.loading .order-buy-text { transform: rotateX(90deg); }
.order-buy-button.done .order-buy-text { transform: rotateX(180deg); }

.cpromo-block {
  margin: 16px 14px 0;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  border-radius: 22px; padding: 16px 16px 16px 18px;
  display: flex; align-items: center; gap: 14px;
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer;
  transition: background 0.18s;
  -webkit-mask-image: -webkit-radial-gradient(white,black);
}
.cpromo-block:hover { background: rgba(255,255,255,0.06); }
.cpromo-blob {
  position: absolute; inset: -30% 48% -30% auto; width: 55%; height: 140%;
  filter: blur(28px); opacity: 0.35; pointer-events: none;
  background: radial-gradient(50% 70% at 60% 50%, #b8a4ef 0%, transparent 70%);
}
.cpromo-icon {
  flex-shrink: 0; position: relative; z-index: 2;
  width: 42px; height: 42px; border-radius: 14px;
  background: rgba(184,164,239,0.14); border: 1px solid rgba(184,164,239,0.18);
  display: grid; place-items: center; color: var(--violet);
}
.cpromo-body { position: relative; z-index: 2; flex: 1; }
.cpromo-title { font-size: 14px; font-weight: 600; color: #fff; }
.cpromo-sub { font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; line-height: 1.45; text-wrap: pretty; }
.cpromo-arrow { flex-shrink: 0; position: relative; z-index: 2; width: 32px; height: 32px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--ink-mute); display: grid; place-items: center; }

/* ============================================================
   MINING POOL TAB
   ============================================================ */
.mpool-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 14px 0; }
.mpool-stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 14px 16px; }
.mpool-stat.wide { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; }
.mpool-stat-label { font-size: 10px; font-weight: 500; color: var(--ink-quiet); text-transform: uppercase; letter-spacing: 0.05em; }
.mpool-stat-value { font-size: 22px; font-weight: 700; color: #fff; margin-top: 5px; letter-spacing: -0.02em; }
.mpool-stat-unit { font-size: 12px; color: var(--ink-mute); margin-left: 3px; }
.mpool-stat-badge { padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(110,231,183,0.10); border: 1px solid rgba(110,231,183,0.22); color: #7eecbf; }
.mpool-bars { padding: 10px 14px 0; display: flex; flex-direction: column; gap: 8px; }
.mpool-bar-row { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 12px 14px; }
.mpool-bar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mpool-bar-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.mpool-bar-pct { font-size: 12px; font-weight: 600; color: var(--ink-mute); }
.mpool-track { height: 6px; background: rgba(255,255,255,0.07); border-radius: 999px; overflow: hidden; }
.mpool-fill { height: 100%; border-radius: 999px; }

/* ============================================================
   SUB-PAGES (slide-in overlays)
   ============================================================ */
.subpage-field-group { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 6px; }
.subpage-section-label {
  font-size: 10.5px; font-weight: 600; color: var(--ink-quiet);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 16px 16px 8px;
}
.subpage-field {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; transition: background 0.18s;
}
.subpage-field:hover { background: rgba(255,255,255,0.07); }
.subpage-field-button {
  width: 100%;
  text-align: left;
}
.subpage-field-left { flex: 1; min-width: 0; }
.subpage-field-label { font-size: 10.5px; font-weight: 500; color: var(--ink-quiet); margin-bottom: 3px; }
.subpage-field-value { font-size: 14px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subpage-field-right { color: var(--ink-quiet); flex-shrink: 0; }
.account-password-field {
  cursor: default;
}
.account-password-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.account-password-eye {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.66);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  transition: color 0.18s, background 0.18s, transform 0.14s;
}
.account-password-eye:hover {
  color: #fff;
  background: rgba(255,255,255,0.09);
}
.account-password-eye:active { transform: scale(0.94); }
.account-password-change {
  padding: 8px 2px 8px 7px;
  color: var(--violet);
  font-size: 12px;
  font-weight: 680;
}

/* ── Wallets — сохранённые адреса вывода (сабэкран профиля, комм. Max 07.06.2026) ── */
.wallets-list { padding: 0 14px; display: flex; flex-direction: column; gap: 12px; }
.wallets-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 11px;
}
.wallets-row-top { display: flex; align-items: center; gap: 12px; }
.wallets-coin { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; }
.wallets-coin svg { width: 34px; height: 34px; display: block; }
/* Логотипы-картинки монет майнинг-пула: BCH — готовый круглый диск, Fractal — оранжевый знак на белом диске */
.bch-coin { width: 34px; height: 34px; display: grid; place-items: center; }
.bch-coin img { width: 34px; height: 34px; display: block; }
.fbtc-coin { width: 34px; height: 34px; border-radius: 999px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.fbtc-coin img { width: 27px; height: auto; display: block; }
.wallets-row-meta { flex: 1; min-width: 0; }
.wallets-row-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.wallets-row-net { font-size: 11px; color: var(--ink-quiet); margin-top: 1px; }
.wallets-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: #7fd6a8; background: rgba(70,200,130,0.12);
  border: 1px solid rgba(70,200,130,0.22); border-radius: 999px; padding: 3px 9px;
}
.wallets-saved-row { display: flex; align-items: center; gap: 10px; }
.wallets-saved-addr {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-mute);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wallets-remove {
  flex-shrink: 0; padding: 7px 12px; border-radius: 10px;
  font-size: 12px; font-weight: 600; color: #ff8080;
  background: rgba(255,100,100,0.08); border: 1px solid rgba(255,100,100,0.16);
  transition: background 0.16s, transform 0.14s;
}
.wallets-remove:hover { background: rgba(255,100,100,0.13); }
.wallets-remove:active { transform: scale(0.96); }
.wallets-add-row { display: flex; align-items: center; gap: 8px; }
.wallets-input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
  font-size: 13px; color: var(--ink);
  background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.10);
  transition: border-color 0.16s;
}
.wallets-input::placeholder { color: var(--ink-quiet); }
.wallets-input:focus { outline: none; border-color: rgba(193,124,225,0.45); }
.wallets-add {
  flex-shrink: 0; padding: 7px 12px; border-radius: 10px;
  font-size: 12px; font-weight: 600; color: #7fd6a8;
  background: rgba(70,200,130,0.10); border: 1px solid rgba(70,200,130,0.22);
  transition: background 0.16s, transform 0.14s;
}
.wallets-add:hover { background: rgba(70,200,130,0.16); }
.wallets-add:active { transform: scale(0.96); }
.wallets-error { font-size: 11.5px; color: #ff9d9d; }
/* выше специфичность, чем у .invoice-warning (идёт позже в файле) — иначе блок уезжает шире карточек */
.invoice-warning.wallets-warning { width: auto; margin: 14px 14px 0; }
/* Вкладки PrimePool / Майнинг пул на странице «Кошельки» (переиспользуют .onb-auth-tab) */
.wallets-tabs { height: 48px; margin: 4px 14px 14px; }
/* Нотис «доход идёт на внутренний баланс» (вкладка Майнинг пул, режим зачисления) */
.wallets-mining-note {
  display: flex; align-items: flex-start; gap: 9px;
  background: rgba(130,169,243,0.07); border: 1px solid rgba(130,169,243,0.18);
  border-radius: 14px; padding: 13px 14px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-mute);
}
.wallets-mining-note-dot {
  flex-shrink: 0; width: 7px; height: 7px; margin-top: 5px;
  border-radius: 999px; background: linear-gradient(135deg, #82A9F3, #C17CE1);
}
/* Вкладка «Майнинг пул» под заглушкой «Скоро»: убираем навязанные 640px min-height
   (иначе под контентом висела пустая полоса в скролл). Высота = по контенту превью,
   ничего не клипуем. Двойной класс — чтобы перебить .mining-preview-lock (идёт позже в файле). */
.wallets-mining-lock.mining-preview-lock { min-height: 0; }
.wallets-mining-lock .mining-preview-lock-overlay { padding: 24px 22px; }

/* Language settings preview mirrors onboarding hello animation */
.language-settings-hello {
  margin: 10px 20px 18px;
}
/* Заголовок SubPage здесь скрыт (его роль играет анимированное слово
   «Выберите язык»). Прячем пустую шапку, чтобы блок поднялся под кнопку
   «Назад» без пустого зазора сверху. */
.page-faq-inner.lang-settings-page .page-header { display: none; }
.page-faq-inner.lang-settings-page .language-settings-hello { margin-top: 4px; margin-bottom: 40px; }

.subpage-toggle-row {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.subpage-toggle-info { flex: 1; }
.subpage-toggle-label { font-size: 14px; font-weight: 500; color: var(--ink); }
.subpage-toggle-sub { font-size: 11.5px; color: var(--ink-quiet); margin-top: 2px; }
.subpage-toggle {
  width: 44px; height: 26px; border-radius: 999px;
  position: relative; cursor: pointer; flex-shrink: 0;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.10);
  transition: background 0.22s;
}
.subpage-toggle.on { background: linear-gradient(135deg, #82A9F3, #C17CE1); border-color: transparent; }
.subpage-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 999px;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.22s cubic-bezier(0.34,1.4,0.64,1);
}
.subpage-toggle.on .subpage-toggle-thumb { transform: translateX(18px); }
/* Биометрию нельзя включить без код-пароля — приглушаем переключатель.
   .busy — пока идёт запрос к платформенному аутентификатору (WebAuthn). */
.subpage-toggle.disabled { opacity: 0.4; cursor: not-allowed; }
.subpage-toggle.busy { opacity: 0.6; pointer-events: none; }

.subpage-danger-btn {
  margin: 20px 14px 0;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255,100,100,0.06); border: 1px solid rgba(255,100,100,0.15);
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 500; color: #ff8080;
  cursor: pointer; transition: background 0.18s;
  width: calc(100% - 28px);
  text-align: left;
}
.subpage-danger-btn:hover { background: rgba(255,100,100,0.10); }
.subpage-danger-btn.pending {
  color: #ffd3a3;
  background: rgba(255,179,109,0.075);
  border-color: rgba(255,179,109,0.22);
}
.subpage-danger-btn.pending:hover { background: rgba(255,179,109,0.11); }
.account-delete-action-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-delete-timer-badge {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  color: #ffd3a3;
  background: rgba(255,179,109,0.12);
  border: 1px solid rgba(255,179,109,0.26);
  font-size: 10.5px;
  font-weight: 780;
  line-height: 1.2;
}

.useful-modal-card-danger::before {
  background:
    radial-gradient(50% 70% at 20% 30%, rgba(255,128,128,0.40) 0%, transparent 65%),
    radial-gradient(50% 70% at 78% 50%, rgba(255,179,109,0.22) 0%, transparent 66%),
    radial-gradient(50% 70% at 50% 92%, rgba(184,164,239,0.16) 0%, transparent 70%) !important;
}
.useful-modal-card-danger .useful-modal-title { color: #fff; }
.account-delete-modal {
  gap: 10px;
  padding-bottom: 22px;
}
.account-delete-warning {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 14px;
  border-radius: 16px;
  color: rgba(255,255,255,0.70);
  background: rgba(255,100,100,0.075);
  border: 1px solid rgba(255,100,100,0.18);
}
.account-delete-warning-blocked {
  background: rgba(255,179,109,0.075);
  border-color: rgba(255,179,109,0.20);
}
.account-delete-warning strong {
  color: #fff;
  font-size: 14px;
  font-weight: 780;
}
.account-delete-warning span {
  font-size: 12.5px;
  line-height: 1.5;
  text-wrap: pretty;
}
.account-delete-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.account-delete-secondary,
.account-delete-confirm {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 780;
  transition: transform 0.14s, filter 0.18s, background 0.18s;
}
.account-delete-secondary {
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
}
.account-delete-confirm {
  color: #fff;
  background: rgba(255,100,100,0.16);
  border: 1px solid rgba(255,100,100,0.30);
}
.account-delete-secondary:hover,
.account-delete-confirm:hover { filter: brightness(1.08); }
.account-delete-secondary:active,
.account-delete-confirm:active { transform: scale(0.98); }
.account-delete-single-action {
  grid-column: 1 / -1;
}
.account-delete-error {
  font-size: 12.5px; line-height: 1.4; font-weight: 600;
  color: #ff9b9b;
  background: rgba(255,100,100,0.09);
  border: 1px solid rgba(255,100,100,0.22);
  border-radius: 12px;
  padding: 9px 12px;
}

/* ── Удаление аккаунта: баннер на главной (над балансом) ── */
.home-delete-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  width: calc(100% - 28px);
  margin: 0 14px 10px;
  padding: 11px 13px;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  color: #ff8c8c;
  background: rgba(255,100,100,0.055);
  border: 1px solid rgba(255,100,100,0.16);
  transition: background 0.18s, transform 0.14s;
}
.home-delete-banner:hover { background: rgba(255,100,100,0.09); }
.home-delete-banner:active { transform: scale(0.99); }
.home-delete-banner.pending {
  color: #ffd3a3;
  background: rgba(255,179,109,0.07);
  border-color: rgba(255,179,109,0.22);
}
.home-delete-banner-icon { flex: 0 0 auto; display: flex; opacity: 0.92; }
.home-delete-banner-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.home-delete-banner-title { font-size: 13.5px; font-weight: 680; line-height: 1.2; }
.home-delete-banner-sub {
  font-size: 11px; line-height: 1.3; font-weight: 500;
  color: var(--ink-quiet);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Полноэкранный гейт «аккаунт будет удалён» (блокирует приложение) ── */
.acc-del-gate {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.acc-del-gate-card {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px;
  padding: 30px 22px 24px;
  border-radius: 26px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,100,100,0.18);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.acc-del-gate-icon {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 18px;
  color: #ffb36d;
  background: rgba(255,179,109,0.12);
  border: 1px solid rgba(255,179,109,0.26);
}
.acc-del-gate-title { font-size: 19px; font-weight: 760; color: var(--ink); letter-spacing: -0.01em; }
.acc-del-gate-sub { font-size: 13px; line-height: 1.55; color: var(--ink-mute); text-wrap: pretty; }
.acc-del-gate-timer {
  width: 100%;
  margin-top: 2px;
  padding: 16px 14px;
  border-radius: 18px;
  background: rgba(255,100,100,0.06);
  border: 1px solid rgba(255,100,100,0.16);
}
.acc-del-gate-timer-value {
  font-size: 30px; font-weight: 800; letter-spacing: 0.02em;
  color: #ff9b9b;
  font-variant-numeric: tabular-nums;
}
.acc-del-gate-timer-label {
  margin-top: 4px; font-size: 11px; font-weight: 500;
  color: var(--ink-quiet); letter-spacing: 0.04em; text-transform: uppercase;
}
.acc-del-gate-cancel {
  width: 100%; min-height: 50px; margin-top: 2px;
  border-radius: 15px; cursor: pointer;
  font-size: 15px; font-weight: 760; color: #fff;
  background: linear-gradient(135deg, #7c5cff, #a06bff);
  border: none;
  transition: transform 0.14s, filter 0.18s;
}
.acc-del-gate-cancel:hover { filter: brightness(1.08); }
.acc-del-gate-cancel:active { transform: scale(0.985); }
.acc-del-gate-foot { font-size: 11px; line-height: 1.45; color: var(--ink-quiet); text-wrap: pretty; }

.profile-edit-modal {
  gap: 10px;
  padding-bottom: 22px;
}
.profile-edit-card--password {
  max-height: 82%;
}
.profile-edit-card--password .useful-modal-header {
  padding: 18px 20px 10px;
}
.profile-edit-card--password .useful-modal-title {
  font-size: 18px;
}
.profile-edit-card--password .useful-modal-subtitle {
  max-width: 310px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
}
.profile-edit-modal--password {
  gap: 8px;
  padding-bottom: 16px;
}
.profile-edit-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: rgba(255,255,255,0.48);
  font-size: 11px;
  font-weight: 720;
}
.profile-edit-field input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 0 13px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)),
    rgba(9,5,18,0.62);
  font: inherit;
  font-size: 14px;
  font-weight: 620;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.profile-edit-modal--password .profile-edit-field {
  gap: 5px;
}
.profile-edit-modal--password .profile-edit-field input {
  min-height: 44px;
  border-radius: 13px;
  font-size: 13.5px;
}
.profile-edit-field input:focus {
  border-color: rgba(184,164,239,0.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 3px rgba(184,164,239,0.08);
}
.profile-edit-field input::placeholder { color: rgba(255,255,255,0.32); }
.profile-edit-password-input {
  position: relative;
}
.profile-edit-password-input input {
  padding-right: 46px;
}
.profile-edit-password-input button {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
}
.profile-edit-modal--password .profile-edit-password-input button {
  width: 30px;
  height: 30px;
}
.password-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.profile-edit-modal--password .password-rules {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.password-rule {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border-radius: 12px;
  color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 10.8px;
  font-weight: 680;
  line-height: 1.2;
}
.profile-edit-modal--password .password-rule {
  min-height: 30px;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 11px;
  font-size: 10.2px;
  white-space: nowrap;
}
.password-rule span {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: transparent;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
  font-weight: 900;
}
.profile-edit-modal--password .password-rule span {
  width: 13px;
  height: 13px;
  font-size: 9px;
}
.password-rule.valid {
  color: rgba(217,255,242,0.82);
  background: rgba(110,231,183,0.08);
  border-color: rgba(110,231,183,0.18);
}
.password-rule.valid span {
  color: #092014;
  background: #7eecbf;
  border-color: transparent;
}
.profile-edit-code-btn,
.profile-edit-submit {
  width: 100%;
  min-height: 46px;
  border-radius: 15px;
  font-size: 13.5px;
  font-weight: 780;
  transition: transform 0.14s, filter 0.18s, background 0.18s, color 0.18s;
}
.profile-edit-modal--password .profile-edit-code-btn,
.profile-edit-modal--password .profile-edit-submit {
  min-height: 42px;
  border-radius: 14px;
  font-size: 13px;
}
.profile-edit-note {
  align-self: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.profile-edit-code-btn {
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
}
.profile-edit-submit {
  color: #fff;
  background: linear-gradient(135deg, #82A9F3 0%, #999CF6 50%, #C17CE1 100%);
  border: 0;
  box-shadow: 0 8px 24px rgba(153,156,246,0.22);
}
.profile-edit-code-btn:not(:disabled):hover,
.profile-edit-submit:not(:disabled):hover { filter: brightness(1.07); }
.profile-edit-code-btn:not(:disabled):active,
.profile-edit-submit:not(:disabled):active { transform: scale(0.985); }
.profile-edit-code-btn:disabled,
.profile-edit-submit:disabled {
  color: rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
  cursor: default;
}

@media (max-width: 360px) {
  .password-rules {
    grid-template-columns: 1fr;
  }
  .profile-edit-modal--password .password-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-password-actions {
    gap: 4px;
  }
  .account-password-change {
    padding-left: 4px;
  }
}

/* Primary action button at bottom of sub-page — width matches block group */
.subpage-primary-btn {
  margin: 22px 14px 0;
  width: calc(100% - 28px);
  padding: 14px 0; border-radius: 16px;
  background: linear-gradient(135deg, #82A9F3 0%, #999CF6 50%, #C17CE1 100%);
  font-size: 14.5px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(153,156,246,0.25);
  cursor: pointer;
  transition: filter 0.18s, transform 0.14s;
}
.subpage-primary-btn:hover { filter: brightness(1.07); }
.subpage-primary-btn:active { transform: scale(0.985); }

/* AI assistant demo chat */
.ai-chat-shell {
  height: calc(100dvh - var(--top-safe) - 116px);
  min-height: 520px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 0 14px 14px;
}
.ai-assistant-page .ai-chat-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
}
.ai-assistant-page .ai-chat-shell.is-chat { padding-top: 38px; }
/* В интро-состоянии верхнего блока нет: интро занимает 1fr, форма ввода — авто-высоту
   (иначе форма попадала бы в 1fr-строку и растягивалась на всё свободное место). */
.ai-assistant-page .ai-chat-shell.is-intro { grid-template-rows: minmax(0, 1fr) auto; }
/* Заголовок страницы убран — имя ассистента показывает блок/интро (комм. #12) */
.page-faq-inner.ai-assistant-page .page-header { display: none; }
.ai-chat-status {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
}
.ai-chat-avatar {
  width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center;
  color: #eef2ff;
  background:
    radial-gradient(90% 90% at 25% 20%, rgba(255,255,255,0.28), transparent 56%),
    linear-gradient(135deg, rgba(130,169,243,0.32), rgba(183,222,216,0.18));
  border: 1px solid rgba(255,255,255,0.16);
  flex: 0 0 auto;
}
/* Маскот «сидит» в блоке статуса: тело у нижнего края, голова чуть выше блока */
.ai-chat-status.has-mascot {
  position: relative;
  overflow: visible;
  padding-left: 116px;
}
.ai-chat-mascot {
  position: absolute;
  left: 6px;
  bottom: -2px;
  width: 106px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.ai-chat-status-text { min-width: 0; }

/* Состояние 1 — приветственный экран ассистента: большой стикер по центру */
.ai-intro {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 8px 14px 14px;
}
.ai-intro::-webkit-scrollbar { display: none; }
.ai-intro-mascot {
  width: 208px;
  max-width: 64%;
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,0.45));
}
.ai-intro-text {
  margin: 0;
  max-width: 320px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  text-wrap: pretty;
}
.ai-intro-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 340px;
}
.ai-intro-chips .ai-chat-chip {
  min-height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
}
.ai-chat-name { font-size: 14px; font-weight: 760; color: #fff; }
.ai-chat-sub { margin-top: 2px; font-size: 11.5px; color: var(--ink-quiet); }
.ai-chat-online {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 999px;
  color: #7eecbf;
  background: rgba(110,231,183,0.10);
  border: 1px solid rgba(110,231,183,0.24);
  font-size: 10.5px;
  font-weight: 720;
}
.ai-chat-messages {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 8px;
  scrollbar-width: none;
}
.ai-chat-messages::-webkit-scrollbar { display: none; }
.ai-chat-message { display: flex; width: 100%; }
.ai-chat-message.user { justify-content: flex-end; }
.ai-chat-message.assistant { justify-content: flex-start; }
.ai-chat-bubble-wrap {
  max-width: min(92%, 352px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ai-chat-message.user .ai-chat-bubble-wrap { align-items: flex-end; }
.ai-chat-bubble {
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.48;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  overflow-wrap: anywhere;
}
.ai-chat-bubble p { margin: 0; }
.ai-chat-bubble p + p { margin-top: 8px; }
.ai-chat-message.assistant .ai-chat-bubble {
  border-bottom-left-radius: 7px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(200,210,244,0.11), transparent 54%),
    rgba(255,255,255,0.05);
}
.ai-chat-message.user .ai-chat-bubble {
  border-bottom-right-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, rgba(130,169,243,0.32), rgba(193,124,225,0.24));
  border-color: rgba(184,164,239,0.24);
}
.ai-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 100%;
}
.ai-chat-chip {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: #bff7df;
  background:
    linear-gradient(135deg, rgba(126,236,191,0.13), rgba(60,180,140,0.075)),
    rgba(7,36,28,0.28);
  border: 1px solid rgba(126,236,191,0.24);
  font-size: 12px;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.14s, background 0.18s, border-color 0.18s, color 0.18s;
}
.ai-chat-chip:hover {
  color: #eafff5;
  background:
    linear-gradient(135deg, rgba(126,236,191,0.20), rgba(60,180,140,0.12)),
    rgba(7,36,28,0.36);
  border-color: rgba(126,236,191,0.38);
}
.ai-chat-chip:active { transform: scale(0.96); }
.ai-chat-chip:disabled { opacity: 0.45; cursor: default; transform: none; }
.ai-chat-meta {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}
.ai-chat-meta-row {
  display: grid;
  grid-template-columns: minmax(72px, 0.68fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ai-chat-meta-row span {
  color: rgba(255,255,255,0.44);
  font-size: 11px;
  font-weight: 620;
}
.ai-chat-meta-row strong {
  color: rgba(255,255,255,0.9);
  font-size: 11.5px;
  font-weight: 680;
  text-align: right;
}
.ai-chat-link {
  margin-top: 10px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e8edff;
  background: rgba(130,169,243,0.12);
  border: 1px solid rgba(130,169,243,0.22);
  font-size: 12px;
  font-weight: 720;
  text-decoration: none;
}
.ai-chat-txbody {
  margin-top: 10px;
  padding: 10px;
  border-radius: 13px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.07);
}
.ai-chat-txbody-title {
  margin-bottom: 8px;
  color: rgba(255,255,255,0.52);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ai-chat-txbody-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}
.ai-chat-txbody-row + .ai-chat-txbody-row { margin-top: 5px; }
.ai-chat-txbody-row span {
  color: rgba(255,255,255,0.38);
  font-size: 10.5px;
  font-weight: 650;
}
.ai-chat-txbody-row code {
  color: rgba(255,255,255,0.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10.5px;
  white-space: normal;
  word-break: break-all;
}
.ai-chat-typing {
  min-width: 62px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ai-chat-typing span {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.62);
  animation: aiTypingDot 1.1s ease-in-out infinite;
}
.ai-chat-typing span:nth-child(2) { animation-delay: 0.14s; }
.ai-chat-typing span:nth-child(3) { animation-delay: 0.28s; }
@keyframes aiTypingDot {
  0%, 100% { transform: translateY(0); opacity: 0.42; }
  50% { transform: translateY(-3px); opacity: 1; }
}
.ai-chat-inputbar {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border-radius: 20px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.ai-chat-input {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  color: #fff;
  background: transparent;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 14px;
}
.ai-chat-input::placeholder { color: rgba(255,255,255,0.34); }
.ai-chat-send {
  width: 42px; height: 42px;
  border-radius: 15px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #82A9F3 0%, #C17CE1 100%);
  box-shadow: 0 8px 20px rgba(153,156,246,0.22);
  transition: transform 0.14s, opacity 0.18s;
}
.ai-chat-send:active { transform: scale(0.94); }
.ai-chat-send:disabled {
  opacity: 0.42;
  cursor: default;
  box-shadow: none;
}

/* ── AI-F2: Streaming cursor ▍ ── */
.ai-streaming-cursor {
  display: inline;
  color: rgba(126,236,191,0.82);
  font-weight: 400;
  animation: aiCursorBlink 0.72s steps(2, start) infinite;
}
@keyframes aiCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── AI-F2: fade-in для extras (meta, txBody, link, chips) после streaming ── */
.ai-stream-extras {
  animation: aiExtrasIn 0.32s ease-out both;
}
@keyframes aiExtrasIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── rules.md §24: лимит сессии (20 вопросов) ── */
/* Счётчик X/20 — показывается на последних 5 вопросах */
.ai-chat-counter {
  position: absolute;
  top: -22px;
  right: 16px;
  font-size: 10.5px;
  font-weight: 650;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.04em;
  pointer-events: none;
}
.ai-chat-inputbar { position: relative; }
/* Кнопка «Начать новый чат» — заменяет input после лимита */
.ai-chat-newchat {
  grid-column: 1 / -1;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(126,236,191,0.32);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(126,236,191,0.14), rgba(130,169,243,0.10)),
    rgba(255,255,255,0.04);
  color: #eafff5;
  font-weight: 660;
  cursor: pointer;
  transition: transform 0.14s, background 0.18s, border-color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.ai-chat-newchat:hover {
  background:
    linear-gradient(135deg, rgba(126,236,191,0.20), rgba(130,169,243,0.14)),
    rgba(255,255,255,0.05);
  border-color: rgba(126,236,191,0.5);
}
.ai-chat-newchat:active { transform: scale(0.985); }
.ai-chat-newchat-title { font-size: 13.5px; }
.ai-chat-newchat-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(234,255,245,0.58);
  letter-spacing: 0.02em;
}

.support-contact-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px 0;
}
.support-contact {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px 16px;
  cursor: pointer; transition: background 0.18s;
}
.support-contact:hover { background: rgba(255,255,255,0.07); }
.support-contact-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; flex-shrink: 0;
}
.support-contact-label { font-size: 14px; font-weight: 500; color: var(--ink); }
.support-contact-sub { font-size: 11.5px; color: var(--ink-quiet); margin-top: 2px; }
.faq-ai-contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    rgba(8,8,10,0.68);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.045),
    0 12px 28px rgba(0,0,0,0.18);
}
.faq-ai-contact > .support-contact-icon,
.faq-ai-contact-body,
.faq-ai-contact-arrow {
  position: relative;
  z-index: 2;
}
.faq-ai-contact-body {
  padding-left: 48px;
}
.faq-ai-contact .support-contact-label {
  font-weight: 750;
}
.faq-ai-contact .useful-card-bgicon {
  left: -18px;
  width: 92px;
  height: 92px;
}

/* ============================================================
   FAQ PAGE
   ============================================================ */
.page-faq-wrap {
  position: absolute; inset: 0; z-index: 30;
  pointer-events: none; opacity: 0; transform: translateX(100%);
  transition: opacity 0.30s cubic-bezier(0.4,0,0.2,1), transform 0.30s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
}
.page-faq-wrap.visible { opacity: 1; transform: translateX(0); pointer-events: auto; }
.page-faq-inner {
  position: absolute; inset: 0; background: transparent;
  overflow-y: auto; scrollbar-width: none;
  padding-top: calc(var(--top-safe) + var(--page-pad-top));
}
.page-faq-inner::-webkit-scrollbar { display: none; }
.page-faq-inner.ai-assistant-page {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page-faq-inner.ai-assistant-page .page-header,
.page-faq-inner.ai-assistant-page .faq-back {
  flex: 0 0 auto;
}
.page-faq-inner.ai-assistant-page .bottom-space {
  display: none;
}

/* Subtle circular back button — replaces flashy violet "Назад" link */
.faq-back {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  margin: 0 14px 6px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.58);
  font-size: 0; line-height: 0; gap: 0;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.14s;
}
.faq-back:hover { background: rgba(255,255,255,0.10); color: #fff; }
.faq-back:active { transform: scale(0.92); }
.faq-back svg { width: 16px; height: 16px; }
.notif-feed-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.notif-feed-topbar .faq-back {
  margin-left: 0;
  margin-right: 0;
}
.notif-feed-read-all {
  margin-right: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--violet);
  background: none;
  border: none;
  cursor: pointer;
}

/* Sub-page page title — quieter, less attention-grabbing */
.page-faq-inner .page-header { padding: 6px 20px 8px; }
.page-faq-inner .page-title {
  font-size: 19px; font-weight: 600;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
}
.faq-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.faq-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; gap: 12px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; transition: background 0.18s; text-align: left; width: 100%; }
.faq-q:hover { background: rgba(255,255,255,0.03); }
.faq-chevron { flex-shrink: 0; color: var(--ink-quiet); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.4,0,0.2,1); }
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-item.open .faq-a-inner {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  border-radius: 0 0 16px 16px;
}
.faq-a { padding: 0 16px 14px; font-size: 13px; line-height: 1.65; color: var(--ink-mute); border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; }

/* ============================================================
   KNOWLEDGE BASE (PageKnowledge — список статей + страница статьи)
   Все классы с префиксом .kb-. Список = плашки-вопросы; статья
   рендерится в той же SubPage (className kb-article — page-header скрыт,
   заголовок внутри тела). Скрины статей — плейсхолдеры (.kb-shot).
   ============================================================ */
.page-faq-inner.kb-article .page-header { display: none; }
.kb-page-sub { padding: 2px 20px 4px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }

/* ── список: плашка-вопрос ── */
.kb-list { padding: 4px 14px 0; display: flex; flex-direction: column; gap: 8px; }
.kb-tile {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md); padding: 13px 14px; cursor: pointer;
  transition: background 0.18s, border-color 0.18s; font-family: inherit; color: inherit;
}
.kb-tile:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
.kb-tile-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(38,162,235,0.14); border: 1px solid rgba(38,162,235,0.26); color: #4eb0ee;
}
.kb-tile-ic svg { width: 21px; height: 21px; }
.kb-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kb-tile-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.kb-tile-sub { font-size: 11.5px; color: var(--ink-quiet); margin-top: 3px; line-height: 1.4; }
.kb-tile-chev { flex: 0 0 auto; color: var(--ink-quiet); }
.kb-tile-chev svg { width: 16px; height: 16px; display: block; }
.kb-soon { padding: 14px 22px 0; font-size: 11.5px; color: var(--ink-quiet); line-height: 1.5; }

/* ── статья ── */
.kb-art { padding: 6px 20px 0; }
.kb-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: #4eb0ee;
  background: rgba(38,162,235,0.12); border: 1px solid rgba(38,162,235,0.24);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.kb-art-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; margin: 0 0 10px; color: #fff; }
.kb-lead { font-size: 13.5px; color: var(--ink-mute); line-height: 1.6; margin: 0; text-wrap: pretty; }
.kb-lead b { color: var(--ink); font-weight: 600; }
.kb-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.kb-chip { font-size: 11px; font-weight: 500; color: var(--ink-mute); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: 5px 11px; border-radius: 999px; }

/* раздел статьи */
.kb-sec { display: flex; align-items: center; gap: 11px; padding: 26px 20px 6px; }
.kb-sec-idx {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #06121c; background: linear-gradient(150deg, #7fd0ff, #3a9be0);
}
.kb-sec-idx.kb-sec-warn { background: linear-gradient(150deg, #ffb6b6, #ff7676); color: #2a0606; }
.kb-sec-title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }

.kb-step { display: flex; gap: 12px; padding: 12px 0 2px; }
.kb-step-num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--ink);
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14);
}
.kb-step-body { flex: 1; min-width: 0; padding-top: 1px; display: flex; flex-direction: column; }
.kb-step-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.kb-step-text { font-size: 12.5px; color: var(--ink-mute); line-height: 1.55; margin-top: 4px; text-wrap: pretty; }
.kb-step-text b { color: var(--ink); font-weight: 600; }
.kb-net { color: #7fd0ff; font-weight: 700; }

/* плейсхолдер скриншота (вариант A — пользователь дропнет реальный скрин) */
.kb-shot {
  margin: 12px 0 2px 36px; border-radius: 14px;
  border: 1.5px dashed rgba(126,208,255,0.30);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 12px, transparent 12px 24px), rgba(255,255,255,0.02);
  aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; color: var(--ink-quiet);
}
.kb-shot-ic { width: 26px; height: 26px; opacity: 0.5; margin-bottom: 7px; }
.kb-shot-label { font-size: 11px; font-weight: 600; color: var(--ink-mute); padding: 0 14px; display: block; }
.kb-shot-hint { font-size: 10px; color: var(--ink-quiet); margin-top: 2px; display: block; }

/* казусы P2P */
.kb-warn-list { padding: 6px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.kb-warn-item {
  display: flex; gap: 11px; padding: 13px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
}
.kb-warn-dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,107,107,0.16); color: #ff8f8f; margin-top: 1px; }
.kb-warn-dot svg { width: 12px; height: 12px; }
.kb-warn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kb-warn-t { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.kb-warn-x { font-size: 12px; color: var(--ink-mute); line-height: 1.5; margin-top: 3px; text-wrap: pretty; }
.kb-warn-x b { color: var(--ink); font-weight: 600; }

/* комиссии */
.kb-fees { margin: 16px 20px 0; padding: 13px 15px; border-radius: 14px; background: rgba(110,231,183,0.06); border: 1px solid rgba(110,231,183,0.18); }
.kb-fees-t { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green); margin-bottom: 7px; }
.kb-fees-x { font-size: 12px; color: var(--ink-mute); line-height: 1.6; }
.kb-fees-x b { color: var(--ink); font-weight: 600; }

/* мостик к ассистенту */
.kb-ask { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 20px 20px 0; padding: 13px; border-radius: 14px; background: rgba(184,164,239,0.10); border: 1px solid rgba(184,164,239,0.22); color: var(--violet); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; width: calc(100% - 40px); }
.kb-ask:hover { background: rgba(184,164,239,0.16); }
.kb-ask svg { width: 17px; height: 17px; }

/* ============================================================
   BOTTOM NAV
   ============================================================ */
/* Bottom-space зарезервирован под плавающую нав-пилюлю + её отступ от края.
   Используем max(...) (а не calc(+)) с safe-area, чтобы на iPhone с
   home-indicator пилюля садилась впритык к границе safe-area, без пустой
   чёрной полосы между ней и home-indicator. На устройствах без выреза
   --bottom-safe = 0 → берём базовое значение 110px (исходный дизайн). */
.bottom-space { height: max(110px, calc(78px + var(--bottom-safe))); }
.nav-wrap {
  position: absolute; left: 0; right: 0; bottom: max(14px, var(--bottom-safe));
  z-index: 8;
  display: flex; justify-content: center;
  padding: 0 14px;
  pointer-events: none;
}
.bottom-nav {
  pointer-events: auto;
  position: relative;
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 7px;
  border-radius: 999px;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
    rgba(10,5,18,0.38);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 22px 44px rgba(0,0,0,0.30),
    0 0 0 1px rgba(0,0,0,0.12);
  backdrop-filter: blur(24px) saturate(180%);
  transform: translateZ(0);
  contain: layout paint;
}
.nav-pill {
  display: none;
}
.nav-glow {
  display: none;
}
.nav-item {
  position: relative; z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  padding: 0;
  border-radius: 999px;
  color: rgba(255,255,255,0.50);
  overflow: hidden;
  transform: translateZ(0);
  will-change: flex-grow, color, background-color, transform;
  transition:
    flex-grow 0.54s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.34s ease,
    background 0.36s ease,
    border-color 0.36s ease,
    box-shadow 0.36s ease,
    transform 0.22s ease;
}
.nav-item svg {
  flex: 0 0 auto;
  display: block;
  width: 29px;
  height: 29px;
  opacity: 0.9;
  transform: translateZ(0) scale(1);
  transition:
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}
.nav-item .nav-menu-icon {
  width: 29px;
  height: 29px;
}
.nav-item.active svg {
  opacity: 0.96;
  transform: translateZ(0) scale(1);
}
.nav-item:hover { color: rgba(255,255,255,0.82); }
.nav-item:active { transform: translateZ(0) scale(0.97); }
.nav-item.active {
  flex: 2.2 1 0;
  gap: 6px;
  padding: 0 6px;
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 4px 16px rgba(0,0,0,0.25);
}
.nav-label {
  display: inline-flex;
  align-items: center;
  height: 16px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  color: rgba(255,255,255,0.94);
  transform: translate3d(-5px, 1px, 0);
  will-change: max-width, opacity, transform;
  transition:
    max-width 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.30s ease 0.06s,
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-item.active .nav-label {
  max-width: 100px;
  opacity: 1;
  transform: translate3d(0, 1px, 0);
}

/* ============================================================
   ONBOARDING FLOW
   ============================================================ */
.onb-root, .onb-screen {
  position: absolute; inset: 0;
  color: var(--ink);
  overflow: hidden;
}
.onb-screen {
  display: flex; flex-direction: column;
  align-items: stretch;
}
.onb-screen > .bg-base,
.onb-screen > .bg-spots,
.onb-screen > .bg-grain { position: absolute; inset: 0; }
.onb-screen > .bg-base { z-index: 0; }
.onb-screen > .bg-spots, .onb-screen > .bg-grain { z-index: 1; }

/* ── shared content wrappers (centered, max ~440px) ── */
.onb-lang-wrap,
.onb-promo-wrap,
.onb-auth-wrap {
  position: relative; z-index: 2;
  width: 100%; max-width: 440px;
  margin: 0 auto;
  height: 100%;
  display: flex; flex-direction: column;
  padding: calc(24px + var(--top-safe)) calc(22px + var(--right-safe)) calc(28px + var(--bottom-safe)) calc(22px + var(--left-safe));
}

/* ── shared primary button ── */
.onb-primary-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 16px 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #82A9F3 0%, #999CF6 50%, #C17CE1 100%);
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 28px rgba(153,156,246,0.30);
  transition: filter 0.18s, transform 0.14s, opacity 0.18s;
}
.onb-primary-btn:hover:not(:disabled) { filter: brightness(1.07); }
.onb-primary-btn:active:not(:disabled) { transform: scale(0.985); }
.onb-primary-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.onb-back-btn {
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.78);
  transition: background 0.18s, transform 0.14s;
}
.onb-back-btn:hover { background: rgba(255,255,255,0.10); }
.onb-back-btn:active { transform: scale(0.92); }
.onb-back-btn-floating { position: absolute; top: calc(18px + var(--top-safe)); left: calc(18px + var(--left-safe)); z-index: 3; }

/* LOADING SCREEN (онбординг, гекс/куб) удалён 08.06.2026 — единый лоадер вынесен
   в секцию STATUS OVERLAY (низ файла) + status-overlay.jsx. См. RULES §29. */

/* ============================================================
   LANGUAGE SCREEN
   ============================================================ */
.onb-lang-screen .onb-lang-wrap {
  padding: calc(24px + var(--top-safe)) calc(18px + var(--right-safe)) calc(24px + var(--bottom-safe)) calc(18px + var(--left-safe));
}
.onb-lang-wrap-setup {
  justify-content: flex-start;
}
.onb-lang-header {
  text-align: center;
  margin-bottom: 14px;
}
.onb-lang-header-setup {
  text-align: left;
  margin-bottom: 12px;
}
.onb-lang-topline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  width: 365px;
  max-width: 100%;
  margin: 0 auto;
}
.onb-lang-topline span:first-child {
  font-size: 14px; font-weight: 750;
  color: rgba(255,255,255,0.94);
  letter-spacing: 0;
}
.onb-lang-topline span:last-child {
  min-width: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.42);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb-lang-compact-list {
  width: 365px;
  max-width: 100%;
  margin: 9px auto 0;
  display: flex;
  gap: 7px;
}
.onb-lang-chip {
  height: 38px;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 13px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.64);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.14s, box-shadow 0.18s;
}
.onb-lang-chip:active { transform: scale(0.97); }
.onb-lang-chip.active {
  color: #fff;
  background: rgba(130,169,243,0.11);
  border-color: rgba(130,169,243,0.86);
  box-shadow: 0 0 0 1px rgba(130,169,243,0.28) inset, 0 8px 20px rgba(130,169,243,0.12);
}
.onb-lang-chip-flag {
  display: inline-flex;
  flex-shrink: 0;
}
.onb-install-header {
  margin-bottom: 14px;
}
.onb-install-kicker {
  color: #fff;
  font-size: 24px;
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: 0;
}
.onb-lang-logo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 4px;
}
.onb-lang-logo-name {
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em; color: #fff;
}
.onb-lang-tagline {
  font-size: 12.5px; color: var(--ink-quiet);
  letter-spacing: 0.005em;
  margin-top: 0;
  line-height: 1.5; text-wrap: pretty;
  max-width: 320px;
  margin-left: auto; margin-right: auto;
}

.onb-hello {
  position: relative;
  height: 58px;
  margin: 0 0 4px;
  display: flex; align-items: center; justify-content: center;
}
/* Онбординг идёт во всю высоту экрана (фон уходит под статус-бар).
   Глобальная тёмная полоса статус-бара тут не нужна — прячем её,
   пока смонтирован онбординг, чтобы сверху не было чёрной полоски.
   После завершения онбординга .onb-root размонтируется и полоса вернётся. */
body:has(.onb-root) .statusbar-blur { display: none; }
.onb-hello-word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(135deg, #82A9F3 0%, #C17CE1 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: onbHelloCycle 1.9s ease both;
  white-space: nowrap;
}
@keyframes onbHelloCycle {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(5px); }
  18%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  82%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-14px) scale(0.96); filter: blur(5px); }
}

/* Glass card */
.onb-lang-card {
  position: relative;
  border-radius: 16px;
  padding: 20px 16px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3.2px);
  -webkit-backdrop-filter: blur(3.2px);
  overflow: hidden; isolation: isolate;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.onb-lang-card-blob {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 70%;
  filter: blur(40px); opacity: 0; pointer-events: none;
  background:
    radial-gradient(55% 80% at 20% 30%, #c8a4ff 0%, transparent 65%),
    radial-gradient(55% 80% at 85% 50%, #f5a7d9 0%, transparent 65%),
    radial-gradient(50% 70% at 50% 90%, #b7ded8 0%, transparent 70%);
}
.onb-lang-card-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0; mix-blend-mode: overlay; pointer-events: none;
}
.onb-lang-card-content {
  position: relative; z-index: 2;
}

.onb-install-card {
  margin: 0 auto;
}
.onb-install-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 0;
}
.onb-install-appbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
}
.onb-install-appmark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 13px;
  background: rgba(130,108,190,0.96);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.16);
}
.onb-install-appmark img {
  width: 25px;
  height: 25px;
  filter: brightness(0) invert(1);
}
.onb-install-appcopy {
  flex: 1;
  min-width: 0;
}
.onb-install-appname {
  color: #fff;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.15;
}
.onb-install-apptype {
  margin-top: 2px;
  color: rgba(255,255,255,0.44);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onb-install-state {
  flex-shrink: 0;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(255,255,255,0.56);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
}
.onb-install-state.ready {
  color: rgba(189,255,220,0.9);
  background: rgba(110,231,183,0.10);
  border-color: rgba(110,231,183,0.20);
}
.onb-install-title {
  max-width: 100%;
  margin-top: 13px;
  color: #fff;
  font-size: 21px;
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}
.onb-install-sub {
  max-width: 100%;
  margin-top: 6px;
  color: rgba(255,255,255,0.56);
  font-size: 11.5px;
  line-height: 1.32;
  text-wrap: pretty;
}
.onb-install-benefits {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}
.onb-install-benefits span {
  min-width: 0;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(130,169,243,0.10);
  border: 1px solid rgba(130,169,243,0.16);
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  font-weight: 660;
  line-height: 1.15;
  text-align: center;
}
.onb-install-status {
  width: 100%;
  margin-top: 10px;
  min-height: 32px;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.075);
  color: rgba(255,255,255,0.58);
  font-size: 11.5px;
  line-height: 1.28;
  text-align: left;
}
.onb-install-status.ready {
  color: rgba(189,255,220,0.88);
  background: rgba(110,231,183,0.08);
  border-color: rgba(110,231,183,0.18);
}
.onb-install-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.34);
  flex-shrink: 0;
}
.onb-install-status.ready .onb-install-status-dot {
  background: #6ee7b7;
  box-shadow: 0 0 0 4px rgba(110,231,183,0.10);
}
.onb-install-steps {
  width: 100%;
  margin-top: auto;
  padding: 10px 11px;
  border-radius: 15px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.06);
}
.onb-install-step {
  min-height: 26px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.82);
  text-align: left;
  font-size: 12px;
  line-height: 1.24;
}
.onb-install-step + .onb-install-step {
  margin-top: 5px;
}
.onb-install-step-num {
  color: rgba(255,255,255,0.44);
  font-size: 13px;
  font-weight: 780;
  text-align: center;
}
.onb-install-step-text {
  min-width: 0;
}
.onb-install-step-icon {
  color: #1d95ff;
}

.onb-setup-dots {
  width: 365px;
  max-width: 100%;
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.onb-setup-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  transition: width 0.22s, background 0.22s;
}
.onb-setup-dot.active {
  width: 22px;
  background: linear-gradient(90deg, #82A9F3, #C17CE1);
}

.onb-lang-title {
  font-size: 18px; font-weight: 700; color: #fff;
  letter-spacing: -0.02em; text-align: center;
}
.onb-lang-sub {
  font-size: 12px; color: var(--ink-mute);
  text-align: center; margin-top: 6px;
  line-height: 1.45; text-wrap: pretty;
}

.onb-lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.onb-lang-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--ink);
  text-align: left;
  transition: background 0.18s, border-color 0.18s, transform 0.14s, box-shadow 0.18s;
  cursor: pointer;
  min-width: 0;
}
.onb-lang-item.span2 { grid-column: span 2; justify-content: center; }
.onb-lang-item:hover { background: rgba(255,255,255,0.09); }
.onb-lang-item:active { transform: scale(0.985); }
.onb-lang-item.active {
  background: linear-gradient(135deg, rgba(130,169,243,0.18), rgba(193,124,225,0.18));
  border-color: rgba(193,124,225,0.55);
  box-shadow:
    0 0 0 1px rgba(193,124,225,0.22) inset,
    0 6px 18px rgba(193,124,225,0.15);
}
.onb-lang-flag { display: inline-flex; flex-shrink: 0; }
.onb-lang-name {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onb-lang-check {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: #1b1024;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.22s, transform 0.3s cubic-bezier(0.34,1.4,0.64,1);
  flex-shrink: 0;
}
.onb-lang-item.active .onb-lang-check { opacity: 1; transform: scale(1); }

.onb-lang-wrap .onb-primary-btn {
  width: 365px;
  margin-top: 14px;
}
.onb-lang-wrap-setup .onb-primary-btn:disabled {
  opacity: 1;
  color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.085);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
}

/* Clean first-run setup screen: language + required PWA install */
.onb-setup-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  height: 100%;
  margin: 0 auto;
  padding: calc(10px + var(--top-safe)) calc(18px + var(--right-safe)) calc(24px + var(--bottom-safe)) calc(18px + var(--left-safe));
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.onb-setup-hero {
  width: 365px;
  max-width: 100%;
  text-align: center;
  margin-bottom: 2px;
}
.onb-setup-card {
  width: 365px;
  max-width: 100%;
  padding: 15px;
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 30px rgba(0,0,0,0.10);
  backdrop-filter: blur(3.2px);
  -webkit-backdrop-filter: blur(3.2px);
}
.onb-setup-card + .onb-setup-card {
  margin-top: 10px;
}
.onb-setup-card-install {
  padding-top: 17px;
}
.onb-setup-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.onb-setup-label {
  color: #fff;
  font-size: 16px;
  font-weight: 760;
  line-height: 1.15;
}
.onb-setup-muted {
  margin-top: 4px;
  color: rgba(255,255,255,0.44);
  font-size: 11px;
  line-height: 1.25;
}
.onb-setup-current {
  flex-shrink: 0;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
  font-weight: 780;
  line-height: 1;
}
.onb-setup-language-list {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.onb-setup-lang {
  min-width: 0;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 13px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.085);
  color: rgba(255,255,255,0.58);
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.14s;
}
.onb-setup-lang:active { transform: scale(0.97); }
.onb-setup-lang.active {
  color: #fff;
  background: rgba(130,169,243,0.13);
  border-color: rgba(130,169,243,0.74);
}
.onb-setup-lang-flag {
  display: inline-flex;
}

/* ── First-run hero: olympic language rings (left) + PWA sticker (right) ── */
.onb-lang-hero {
  position: relative;
  width: 365px;
  max-width: 100%;
  height: 56vh;
  max-height: 540px;
  flex-shrink: 0;
  margin-top: -50px;
  margin-bottom: 12px;
}
.onb-lang-left {
  position: absolute;
  left: 22px;
  top: 66%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 188px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.onb-lang-head {
  text-align: center;
}
.onb-lang-head .onb-setup-label { font-size: 17px; }
.onb-lang-head .onb-setup-muted { max-width: 160px; margin-left: auto; margin-right: auto; }

/* Olympic-rings cluster: 3 on top, 2 below, interlocking */
.onb-lang-rings {
  position: relative;
  width: 194px;
  height: 120px;
  flex: none;
}
.onb-lang-ring {
  position: absolute;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.72;
  filter: grayscale(0.35) brightness(0.78);
  transition: transform 0.18s cubic-bezier(.2,.9,.3,1.2), filter 0.2s, opacity 0.2s;
}
.onb-lang-ring svg { width: 46px !important; height: 46px !important; display: block; }
.onb-lang-ring.r0 { left: 0;    top: 0; }
.onb-lang-ring.r1 { left: 74px; top: 0; }
.onb-lang-ring.r2 { left: 148px; top: 0; }
.onb-lang-ring.r3 { left: 37px; top: 74px; }
.onb-lang-ring.r4 { left: 111px; top: 74px; }
.onb-lang-ring:active { transform: scale(0.94); }
.onb-lang-ring:hover { opacity: 0.92; filter: none; }
.onb-lang-ring.active {
  opacity: 1;
  filter: none;
  z-index: 6;
}
.onb-lang-ring.active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(130,169,243,0.95);
  pointer-events: none;
}
.onb-lang-sticker {
  position: absolute;
  right: 0;
  bottom: -34px;
  z-index: 5;
  height: 100%;
  width: auto;
  pointer-events: none;
}
.onb-lang-sticker img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,0.5));
}
.onb-setup-divider {
  height: 1px;
  margin: 14px 0;
  background: rgba(255,255,255,0.08);
}
.onb-setup-appbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
}
.onb-setup-appmark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(130,108,190,0.96);
}
.onb-setup-appmark img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}
.onb-setup-appcopy {
  flex: 1;
  min-width: 0;
}
.onb-setup-appname {
  color: #fff;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.15;
}
.onb-setup-apptype {
  margin-top: 2px;
  color: rgba(255,255,255,0.44);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onb-setup-state {
  flex-shrink: 0;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(255,255,255,0.56);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
}
.onb-setup-state.ready {
  color: rgba(189,255,220,0.9);
  background: rgba(110,231,183,0.10);
  border-color: rgba(110,231,183,0.20);
}
.onb-setup-install-title {
  color: #fff;
  font-size: 20px;
  font-weight: 760;
  line-height: 1.12;
}
.onb-setup-install-sub {
  margin-top: 6px;
  color: rgba(255,255,255,0.56);
  font-size: 11.5px;
  line-height: 1.32;
}
.onb-setup-benefits {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}
.onb-setup-benefits span {
  flex: 1;
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(130,169,243,0.10);
  border: 1px solid rgba(130,169,243,0.16);
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  font-weight: 660;
  text-align: center;
}
.onb-setup-status {
  margin-top: 10px;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.075);
  color: rgba(255,255,255,0.58);
  font-size: 11.5px;
  line-height: 1.28;
}
.onb-setup-status.ready {
  color: rgba(189,255,220,0.88);
  background: rgba(110,231,183,0.08);
  border-color: rgba(110,231,183,0.18);
}
.onb-setup-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.34);
  flex-shrink: 0;
}
.onb-setup-status.ready .onb-setup-status-dot {
  background: #6ee7b7;
  box-shadow: 0 0 0 4px rgba(110,231,183,0.10);
}
.onb-setup-steps {
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.06);
}
.onb-setup-step {
  min-height: 25px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 19px;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  line-height: 1.24;
}
.onb-setup-step + .onb-setup-step { margin-top: 5px; }
.onb-setup-step span {
  color: rgba(255,255,255,0.42);
  font-size: 13px;
  font-weight: 780;
  text-align: center;
}
.onb-setup-step strong {
  min-width: 0;
  font-weight: 560;
}
.onb-setup-step svg {
  color: #1d95ff;
}
.onb-setup-wrap .onb-primary-btn {
  width: 365px;
  max-width: 100%;
  margin-top: auto;
}
.onb-setup-cta-row {
  width: 365px;
  max-width: 100%;
  margin-top: 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.onb-setup-cta-row .onb-setup-status {
  margin-top: 0;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  font-size: 12px;
  font-weight: 640;
  line-height: 1.28;
  gap: 10px;
  padding: 12px 14px;
}
.onb-setup-status.danger {
  color: rgba(255,176,176,0.95);
  background: rgba(255,86,86,0.09);
  border-color: rgba(255,86,86,0.26);
}
.onb-setup-status.danger .onb-setup-status-dot {
  background: #ff6b6b;
  box-shadow: 0 0 0 4px rgba(255,86,86,0.14);
}
.onb-setup-status-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: #ff6b6b;
}
.onb-setup-cta-row .onb-primary-btn {
  flex: 1 1 0;
  width: auto;
  margin-top: 0;
  min-height: 52px;
  white-space: normal;
  line-height: 1.18;
}
.onb-setup-wrap .onb-primary-btn:disabled {
  opacity: 1;
  color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.085);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
}
.onb-setup-skip {
  margin-top: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,0.42);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  transition: color 0.18s, background 0.18s, transform 0.14s;
}
.onb-setup-skip:hover {
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.045);
}
.onb-setup-skip:active {
  transform: scale(0.97);
}

/* ============================================================
   PROMO SCREENS
   ============================================================ */
.onb-promo-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px;
}
.onb-skip-btn {
  font-size: 13px; font-weight: 600;
  color: var(--ink-mute);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.18s, color 0.18s;
}
.onb-skip-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

.onb-promo-stage {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8px 0 0;
}
.onb-promo-frame {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  animation: onbPromoEnter 0.45s cubic-bezier(0.34,1.2,0.64,1) both;
}
@keyframes onbPromoEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.onb-promo-art {
  width: 100%; max-width: 320px;
  height: auto; aspect-ratio: 300 / 220;
  display: block;
  margin-bottom: 30px;
}
/* Промо-герой: 3D-фигура (прозрачный PNG) на тёмном фоне онбординга.
   Текст вынесен в HTML ниже — фон слайда можно менять страница за страницей. */
.onb-promo-hero {
  width: 100%; max-width: 360px;
  height: auto; max-height: min(38vh, 280px);
  object-fit: contain;
  display: block;
  margin: 0 auto 20px;
  -webkit-user-drag: none; user-select: none;
}
.onb-promo-title {
  font-size: 26px; font-weight: 700;
  color: #fff; letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  max-width: 360px;
}
.onb-promo-desc {
  font-size: 15px; color: rgba(255,255,255,0.62);
  margin-top: 12px;
  line-height: 1.5; text-wrap: pretty;
  max-width: 360px;
}

/* Бейдж «СКОРО» над заголовком промо-слайда (PrimeVPN и т.п.) */
.onb-promo-soon {
  align-self: center;
  display: inline-flex; align-items: center; gap: 7px;
  margin: 4px 0 10px;
  padding: 5px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #cdbef4;
  background: rgba(123,107,179,0.16);
  border: 1px solid rgba(160,140,220,0.34);
}
.onb-promo-soon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #b3a4f4;
  box-shadow: 0 0 0 0 rgba(179,164,244,0.55);
  animation: onbSoonPulse 1.8s ease-in-out infinite;
}
@keyframes onbSoonPulse {
  0%   { box-shadow: 0 0 0 0 rgba(179,164,244,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(179,164,244,0); }
  100% { box-shadow: 0 0 0 0 rgba(179,164,244,0); }
}

/* Реферальный стикер: две сидящие фигуры — широкий кадр */
.onb-promo-hero-ref {
  max-width: min(94%, 520px);
  max-height: min(40vh, 320px);
}

.onb-promo-bot {
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 12px;
}
.onb-promo-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 10px;
}
.onb-promo-actions .onb-primary-btn {
  width: 100%;
}
.onb-promo-skip-bottom {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border-radius: 18px;
  color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.18s, color 0.18s, transform 0.14s;
}
.onb-promo-skip-bottom:active {
  transform: scale(0.985);
}
.onb-promo-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 6px;
}
.onb-promo-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  transition: width 0.32s cubic-bezier(0.38,1.2,0.38,1), background 0.3s;
  cursor: pointer;
}
.onb-promo-dot.active {
  width: 22px;
  background: linear-gradient(90deg, #82A9F3, #C17CE1);
}

/* coin drop anim used in promo3 */
@keyframes onbCoinDrop {
  0%   { transform: translate(0, -10px) scale(var(--s,1)); opacity: 0.4; }
  30%  { opacity: 1; }
  60%  { transform: translate(0, 8px) scale(var(--s,1)); opacity: 1; }
  100% { transform: translate(0, -10px) scale(var(--s,1)); opacity: 0.4; }
}
@keyframes onbBlink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* ============================================================
   AUTH SCREEN
   ============================================================ */
.onb-auth-wrap {
  padding-top: calc(64px + var(--top-safe));
}
.onb-auth-brand {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin-bottom: 20px;
}
.onb-auth-logo {
  width: 56px; height: 56px; border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  display: grid; place-items: center;
  margin-bottom: 14px;
  box-shadow: 0 8px 26px rgba(130,169,243,0.18);
}
.onb-auth-logo-pulse { animation: onbPulse 2.4s ease-in-out infinite; }
@keyframes onbPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.onb-auth-h1 {
  font-size: 24px; font-weight: 700;
  color: #fff; letter-spacing: -0.02em;
}
.onb-auth-h2 {
  font-size: 14px; color: var(--ink-mute);
  margin-top: 6px;
  line-height: 1.5; text-wrap: pretty;
  max-width: 320px;
}

.onb-auth-tabs {
  display: flex; gap: 0;
  height: 55px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 4px;
  margin-bottom: 18px;
  position: relative;
}
.onb-auth-tab {
  flex: 1; padding: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  color: var(--ink-mute);
  text-align: center;
  transition: color 0.2s, background 0.2s;
  position: relative; z-index: 1;
}
.onb-auth-tab.active { color: #fff; background: rgba(255,255,255,0.10); }

.onb-auth-form {
  display: flex; flex-direction: column;
  gap: 12px;
}
.onb-auth-field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.onb-auth-label {
  font-size: 11px; font-weight: 600;
  color: var(--ink-quiet);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding-left: 4px;
}
.onb-auth-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.onb-auth-input::placeholder { color: rgba(255,255,255,0.32); }
.onb-auth-input:focus {
  background: rgba(255,255,255,0.07);
  border-color: rgba(193,124,225,0.55);
  box-shadow: 0 0 0 3px rgba(193,124,225,0.14);
}

/* Name + referral code on one row (signup) */
.onb-auth-row {
  display: flex;
  gap: 10px;
}
.onb-auth-row .onb-auth-field { min-width: 0; }
.onb-auth-field-name { flex: 1.25 1 0; }
.onb-auth-field-ref { flex: 1 1 0; }
.onb-auth-field-ref .onb-auth-input { letter-spacing: 0.06em; }

/* Password field with inline strength indicator + show/hide */
.onb-auth-input-wrap { position: relative; }
.onb-auth-input-pw { padding-right: 48px; }
.onb-auth-input-pw.has-meter { padding-right: 120px; }
.onb-auth-input-tools {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}
.onb-pw-strength {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.onb-pw-strength.s1 { color: #ffb3aa; background: rgba(255,90,80,0.14); }
.onb-pw-strength.s2 { color: #ffd79a; background: rgba(245,180,60,0.14); }
.onb-pw-strength.s3 { color: #7eecbf; background: rgba(110,231,183,0.14); }
.onb-pw-eye {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: rgba(255,255,255,0.45);
  background: transparent;
  transition: color 0.18s, background 0.18s;
}
.onb-pw-eye:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.06); }

.onb-auth-spacer { flex: 1; min-height: 12px; }
.onb-auth-terms {
  font-size: 11.5px; color: var(--ink-quiet);
  text-align: center;
  line-height: 1.5; text-wrap: pretty;
  padding: 0 8px 12px;
  max-width: 360px;
  margin: 0 auto;
}

/* OTP */
.onb-otp-row {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 8px; margin-bottom: 16px;
}
.onb-otp-cell {
  width: 44px; height: 54px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  text-align: center;
  font-size: 22px; font-weight: 700;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s, transform 0.14s, box-shadow 0.2s;
}
.onb-otp-cell:focus {
  background: rgba(255,255,255,0.08);
  border-color: rgba(193,124,225,0.6);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(193,124,225,0.16);
}
.onb-otp-cell.filled {
  background: rgba(193,124,225,0.10);
  border-color: rgba(193,124,225,0.36);
}
.onb-resend-btn {
  display: block;
  margin: 0 auto;
  font-size: 12.5px; font-weight: 600;
  color: var(--violet);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(184,164,239,0.07);
  border: 1px solid rgba(184,164,239,0.18);
  transition: background 0.18s, opacity 0.18s;
}
.onb-resend-btn:disabled {
  color: var(--ink-quiet);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.07);
  cursor: not-allowed;
}

/* ── Восстановление доступа (Вариант 1): инлайн под полем пароля ─────────── */
.onb-recover { margin-top: 9px; }
.onb-recover-prompt {
  font-size: 13px; line-height: 1.4;
  color: #FF8A8A;
}
.onb-recover-msg { color: #FF8A8A; }
.onb-recover-link {
  display: inline; padding: 0;
  font-size: 13px; font-weight: 700;
  color: #82A9F3; text-decoration: underline; text-underline-offset: 2px;
  background: none; border: none; cursor: pointer;
}
.onb-recover-link:hover { color: #9DBBF6; }
.onb-recover-panel {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 11px;
  padding: 13px; border-radius: 16px;
  background: rgba(130,169,243,0.06);
  border: 1px solid rgba(130,169,243,0.16);
}
.onb-recover-notice {
  font-size: 12.5px; line-height: 1.4;
  color: rgba(255,255,255,0.7);
}
.onb-recover-dev {
  font-size: 12px; color: rgba(255,255,255,0.5);
}
.onb-recover-dev strong { color: #82A9F3; letter-spacing: 1px; }
.onb-recover-code { letter-spacing: 0.32em; text-align: center; font-weight: 600; }
.onb-recover-err {
  font-size: 12.5px; line-height: 1.35;
  color: #FF6B6B;
}
.onb-recover-submit { margin-top: 2px; }
.onb-recover-resend { margin-top: 0; }

/* Вариант 2: код полностью введён — ячейки зеленеют (готово к смене пароля). */
.onb-otp-cell.valid {
  background: rgba(110,231,183,0.12);
  border-color: rgba(110,231,183,0.55);
  color: #C9F7E4;
  box-shadow: 0 0 0 3px rgba(110,231,183,0.10);
}
.onb-recover-hint {
  font-size: 12px; line-height: 1.4;
  color: var(--ink-quiet);
  padding-left: 4px;
}

/* ============================================================
   DEV: onboarding reset pill — удалён 01.06.2026 (компонент OnboardingResetPill снят, нигде не рендерился)
   ============================================================ */


/* ============================================================
   USEFUL SERVICES (home + profile twin block)
   ============================================================ */
.useful-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 2px 14px 4px;
}
.useful-card {
  position: relative;
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  overflow: hidden; isolation: isolate;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  min-height: 60px;
  color: var(--ink);
  transition: background 0.18s, transform 0.14s;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
}
.useful-card:hover { background: rgba(255,255,255,0.07); }
.useful-card:active { transform: scale(0.99); }

.useful-card-bgicon {
  position: absolute;
  left: -20px; top: 50%;
  width: 84px; height: 84px;
  transform: translateY(-50%);
  display: grid; place-items: center;
  opacity: 0.10;
  pointer-events: none;
  z-index: 1;
  filter: blur(0.2px);
}
.useful-card-bgicon svg { width: 100%; height: 100%; }
.useful-card-ai .useful-card-bgicon  { color: var(--peri); opacity: 0.17; }
.useful-card-srv .useful-card-bgicon { color: var(--aqua);   opacity: 0.13; }

.useful-card-ai {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    rgba(8,8,10,0.68);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.045),
    0 12px 28px rgba(0,0,0,0.18);
}
.useful-card-ai::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.13), transparent 32%),
    radial-gradient(80% 100% at 100% 0%, rgba(200,210,244,0.18), transparent 55%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}
.useful-card-ai .useful-card-title {
  font-weight: 750;
  text-transform: none;
}
.useful-card-ai .useful-card-arrow {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.24), rgba(255,255,255,0.07)),
    rgba(200,210,244,0.12);
  border-color: rgba(255,255,255,0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.useful-card-ai:hover .useful-card-arrow svg {
  animation: aiArrowNudge 0.85s ease-in-out infinite;
}
@keyframes aiArrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}
.useful-card-ai .useful-card-blob {
  position: absolute;
  inset: -40% auto auto -20%;
  width: 90%; height: 200%;
  filter: blur(34px); opacity: 0.38; pointer-events: none;
  background:
    radial-gradient(60% 70% at 28% 48%, #c8d2f4 0%, transparent 60%),
    radial-gradient(60% 70% at 85% 78%, #b7ded8 0%, transparent 62%);
}
.useful-card-srv .useful-card-blob {
  position: absolute;
  inset: -40% auto auto -20%;
  width: 90%; height: 200%;
  filter: blur(34px); opacity: 0.36; pointer-events: none;
  background:
    radial-gradient(60% 70% at 30% 50%, #b7ded8 0%, transparent 60%),
    radial-gradient(60% 70% at 80% 80%, #e9c9b1 0%, transparent 60%);
}
.useful-card-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.36 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.16; mix-blend-mode: overlay; pointer-events: none;
  z-index: 1;
}

.useful-card-title {
  position: relative; z-index: 2;
  font-size: 13.5px; font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
  flex: 1; min-width: 0;
  white-space: nowrap;
}
.useful-card-title-last {
  position: relative;
  display: inline-block;
}
.useful-card-soon-sup {
  position: absolute;
  top: -6px;
  left: calc(100% + 3px);
  transform: none;
  min-width: 32px;
  height: 12px;
  padding: 1px 4px 0;
  border-radius: 999px;
  font-size: 6px; font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(110,231,183,0.18);
  border: 1px solid rgba(110,231,183,0.42);
  color: #7eecbf;
  line-height: 9px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(110,231,183,0.18);
}
/* NEW-вариант шильдика. По правке max (03.06.2026) перекрашен из золота
   в violet-палитру промо-слайда Median Tap (.promo-badge-new) — единый язык
   NEW-бейджей на главной и в профиль-twin-row. Геометрия (размер/радиус)
   сохранена как у соседнего .useful-card-soon-sup. */
.useful-card-new-sup {
  position: absolute;
  top: -6px;
  left: calc(100% + 3px);
  transform: none;
  min-width: 28px;
  height: 12px;
  padding: 1px 5px 0;
  border-radius: 999px;
  font-size: 6px; font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(184,164,239,0.18);
  border: 1px solid rgba(184,164,239,0.40);
  color: var(--ink);
  line-height: 9px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(184,164,239,0.18);
}

/* ── NEW-шильд (pill) — единственный бейдж «new» у карточки Apps, на главной
   (.useful-grid) и в профиль-twin. Рисуется в заголовке (.useful-card-new-sup,
   определён выше). Угловая лента (.useful-card-ribbon*) удалена 06.06.2026 по
   запросу max — вернулись к pill-шильду как было; класса .useful-card-ribbon*
   и обёртки .useful-card-ribbon-wrap в проекте больше нет. */

/* На главной (.useful-grid) убрана правая стрелка-кнопка у карточек «Ассистент AI»
   и «Apps» (mention max, 03.06.2026). bg-иконка — ведущая иконка слева; с
   08.06.2026 (комм. max) обе иконки БЕЛЫЕ и слегка полупрозрачные (вместо
   peri/aqua), чтобы не пестрили и смотрелись одинаково; подпись прижата ближе
   к иконке. В профиль-twin-row эти карточки трогать не нужно — там иконка
   по-прежнему фоновая (цветная), стрелка-индикатор сохраняется. */
.useful-grid .useful-card-arrow { display: none; }
.useful-grid .useful-card { padding-right: 14px; }
.useful-grid .useful-card-bgicon {
  left: 13px;
  width: 38px; height: 38px;
  opacity: 0.62;
  filter: none;
  color: #fff;
}
.useful-grid .useful-card-ai  .useful-card-bgicon { color: #fff; opacity: 0.62; }
.useful-grid .useful-card-srv .useful-card-bgicon { color: #fff; opacity: 0.62; }
/* Подпись прижата ближе к ведущей иконке (комм. max).
   Сдвиг влево относится ТОЛЬКО к Apps (.useful-card-srv) — у её SVG-глифа
   прозрачные поля, из-за которых текст казался дальше. «Ассистент»
   (.useful-card-ai) НЕ двигаем — у него иконка без полей, оставляем базовый 24. */
.useful-grid .useful-card-ai  .useful-card-title { padding-left: 24px; margin-left: 0; }
.useful-grid .useful-card-srv .useful-card-title { padding-left: 0; margin-left: -26px; }
/* NEW-шильд на главной слегка крупнее и с отступом от надписи (комм. max). */
.useful-grid .useful-card-new-sup {
  font-size: 7px;
  min-width: 32px; height: 14px;
  padding: 1px 6px 0;
  left: calc(100% + 6px);
  line-height: 10px;
  top: -7px;
}
.useful-card-arrow {
  position: relative; z-index: 2;
  width: 26px; height: 26px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.78);
  flex-shrink: 0;
}

/* (секция «Profile twin row» удалена 09.06.2026 — twin-row убран из профиля,
   карточки уровня+Apps больше нет; см. RULES §27 «Шапка профиля».) */

/* ============================================================
   USEFUL MODALS
   ============================================================ */
.useful-modal-backdrop {
  position: absolute; inset: 0;
  z-index: 90;
  background: rgba(4,1,10,0.7);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  animation: usefulModalFade 0.22s ease both;
}
@keyframes usefulModalFade { from { opacity: 0; } to { opacity: 1; } }
.useful-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 88%;
  background: rgba(16,10,24,0.78);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border-top-left-radius: 28px; border-top-right-radius: 28px;
  border: 1px solid rgba(255,255,255,0.10);
  border-bottom: 0;
  display: flex; flex-direction: column;
  /* Жёсткое скругление: clip-path гарантирует, что blur-слои ::before и
     внешние тени не вылазят за угол (overflow:hidden в Safari не всегда
     обрезает filter:blur по border-radius — отсюда был тёмный «хвост»
     за углом, max 06.06.2026). */
  overflow: hidden; isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  clip-path: inset(0 round 28px 28px 0 0);
  box-shadow: 0 -10px 32px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.10);
  animation: usefulModalSlide 0.32s cubic-bezier(0.34,1.2,0.64,1) both;
}
.useful-modal-card::before {
  content: "";
  position: absolute;
  /* Удерживаем blur-слой внутри карточки (раньше inset:-10% выпускал blur
     за rounded-corner; clip-path родителя теперь обрезает, но оставляем
     inset:0 — лишний запас не нужен и снижает риск артефактов). */
  inset: 0 0 auto 0;
  height: 70%;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  filter: blur(60px); opacity: 0.38; pointer-events: none;
  background:
    radial-gradient(50% 70% at 20% 30%, #c8a4ff 0%, transparent 65%),
    radial-gradient(50% 70% at 80% 50%, #f5a7d9 0%, transparent 65%),
    radial-gradient(50% 70% at 50% 90%, #b7ded8 0%, transparent 70%);
  z-index: 0;
}
.useful-modal-card::after {
  content: "";
  position: absolute; inset: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.10; mix-blend-mode: overlay; pointer-events: none;
  z-index: 1;
}
.useful-modal-header,
.useful-modal-list { position: relative; z-index: 2; }
@keyframes usefulModalSlide {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.useful-modal-header {
  padding: 22px 22px 14px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  flex-shrink: 0;
}
.useful-modal-title {
  font-size: 19px; font-weight: 700;
  color: #fff; letter-spacing: -0.015em;
}
.useful-modal-subtitle {
  font-size: 12.5px; color: var(--ink-mute);
  margin-top: 6px; line-height: 1.45;
  text-wrap: pretty;
  max-width: 340px;
}
.useful-modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.66);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.useful-modal-close:hover { background: rgba(255,255,255,0.10); color: #fff; }

/* Mining pool soon modal */
.mining-preview-lock {
  position: relative;
  min-height: 640px;
  isolation: isolate;
}
.mining-preview-lock-content {
  position: relative;
  z-index: 0;
  opacity: 0.78;
  filter: blur(0.5px) saturate(0.92);
  pointer-events: none;
  user-select: none;
}
.mining-preview-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 22px 96px;
  background: rgba(6,3,12,0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mining-soon-card--static {
  max-width: 316px;
  padding: 17px 18px 16px;
  animation: none;
  background: rgba(15,10,25,0.86);
  border-color: rgba(184,164,239,0.30);
  box-shadow: 0 8px 24px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
.mining-soon-card--static .mining-soon-title {
  margin-bottom: 6px;
  font-size: 17px;
}
.mining-soon-card--static .mining-soon-copy {
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.mining-soon-countdown {
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,0.68);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}
.mining-soon-countdown strong {
  color: #fff;
}
.mining-soon-backdrop {
  position: absolute; inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(4,1,10,0.7);
  animation: usefulModalFade 0.22s ease both;
}
.mining-soon-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 26px 22px 22px;
  border-radius: 28px;
  overflow: hidden; isolation: isolate;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035) 44%, rgba(255,255,255,0.02)),
    rgba(16,10,24,0.86);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  animation: miningSoonPop 0.28s cubic-bezier(0.34,1.2,0.64,1) both;
}
.mining-soon-card::before {
  content: "";
  position: absolute;
  inset: -12% -12% auto -12%;
  height: 62%;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.36;
  background:
    radial-gradient(50% 70% at 18% 32%, #c8a4ff 0%, transparent 65%),
    radial-gradient(52% 72% at 82% 42%, #f5a7d9 0%, transparent 66%),
    radial-gradient(46% 66% at 52% 98%, #e9c9b1 0%, transparent 70%);
}
.mining-soon-card::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.mining-soon-card > * {
  position: relative;
  z-index: 2;
}
@keyframes miningSoonPop {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.mining-soon-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.66);
  transition: background 0.18s, color 0.18s, transform 0.14s;
}
.mining-soon-close:hover { background: rgba(255,255,255,0.10); color: #fff; }
.mining-soon-close:active { transform: scale(0.94); }
.mining-soon-icon {
  width: 52px; height: 52px;
  margin-bottom: 16px;
  border-radius: 16px;
  display: grid; place-items: center;
  color: var(--violet);
  background: rgba(184,164,239,0.13);
  border: 1px solid rgba(184,164,239,0.22);
}
.mining-soon-title {
  margin-bottom: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mining-soon-copy {
  margin-bottom: 20px;
  color: rgba(255,255,255,0.58);
  font-size: 13.5px;
  line-height: 1.65;
}
.mining-soon-notify {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}
.mining-soon-notify-title {
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}
.mining-soon-notify-sub {
  margin-top: 2px;
  color: rgba(255,255,255,0.42);
  font-size: 11.5px;
}
.mining-soon-switch {
  position: relative;
  width: 44px; height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.10);
  transition: background 0.22s, border-color 0.22s;
}
.mining-soon-switch.is-on {
  background: linear-gradient(135deg, #c8a4ff, #f5a7d9);
  border-color: transparent;
}
.mining-soon-switch-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
  transition: left 0.22s cubic-bezier(0.34,1.4,0.64,1);
}
.mining-soon-switch.is-on .mining-soon-switch-knob {
  left: calc(100% - 23px);
}
.mining-soon-primary {
  width: 100%;
  padding: 14px 0;
  border-radius: 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, #c8a4ff, #f5a7d9);
  box-shadow: 0 8px 24px rgba(237,178,214,0.22);
}

.useful-modal-list {
  overflow-y: auto;
  padding: 0 14px 20px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: none;
}
.useful-modal-list::-webkit-scrollbar { display: none; }

/* ============================================================
   APPS COVERFLOW — середина модалки Apps (ServicesModal).
   Внедрено 08.06.2026 (комм. max): горизонтальный coverflow-рельс.
   Центр в фокусе, соседи позади слева/справа (scale + blur +
   затемнение), свайп/драг с живым масштабом. Заголовок/описание
   модалки и нижний нотис не трогаем. JSX: AppsCoverflow в pages-home.js.
   (Прежний srv-grid-* layout удалён 08.06.2026 как мёртвый код.)
   ============================================================ */
.appcf-modal-list { padding: 0 0 14px; overflow-x: hidden; }
.appcf-modal-list .useful-modal-foot { padding: 12px 22px 2px; }
.appcf-wrap { position: relative; }
.appcf-stage {
  position: relative; height: 196px; margin-top: 2px;
  perspective: 1100px;
  touch-action: pan-y; cursor: grab; user-select: none;
}
.appcf-stage:active { cursor: grabbing; }
/* will-change только пока тянем — без постоянного промоушна слоёв (перф) */
.appcf-stage.appcf-dragging .appcf-card { will-change: transform, opacity, filter; }
.appcf-card {
  position: absolute; top: 50%; left: 50%;
  width: 300px; height: 184px; margin: -92px 0 0 -150px;
  border-radius: 24px; overflow: hidden; text-align: left;
  background: linear-gradient(160deg, rgba(255,255,255,0.085), rgba(255,255,255,0.022));
  border: 1px solid var(--line);
  box-shadow: 0 22px 44px rgba(0,0,0,0.5);
  padding: 16px 18px; display: flex; flex-direction: column; align-items: flex-start;
  transform-style: preserve-3d; will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.appcf-blob {
  position: absolute; inset: auto -28% -32% -12%; height: 72%;
  background: radial-gradient(60% 70% at 60% 70%, var(--a1) 0%, transparent 66%);
  opacity: 0.55; filter: blur(6px);
}
.appcf-grain {
  position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.appcf-scrim {
  position: absolute; inset: 0 0 0 38%; pointer-events: none; z-index: 2;
  background: linear-gradient(110deg, transparent, rgba(8,3,14,0.12) 42%, rgba(8,3,14,0.55) 100%);
}
.appcf-mascot {
  position: absolute; right: -10px; bottom: -10px; width: 150px; height: auto;
  pointer-events: none; z-index: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.45));
}
.appcf-badge {
  position: relative; z-index: 3; align-self: flex-start;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 3px 7px; border-radius: 7px; line-height: 1;
}
.appcf-badge.new  { color: #0b0710; background: linear-gradient(135deg, #d3bdfb, #b8a4ef); }
.appcf-badge.soon { color: var(--ink-mute); background: rgba(255,255,255,0.08); border: 1px solid var(--line); }
.appcf-name {
  position: relative; z-index: 3; margin-top: 10px; color: #fff;
  font-size: 18px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.12; max-width: 150px;
}
.appcf-sub {
  position: relative; z-index: 3; margin-top: 8px;
  font-size: 12.5px; font-weight: 500; color: rgba(246,241,255,0.78); line-height: 1.32; max-width: 142px;
}
.appcf-dots { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.appcf-dot {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.22);
  transition: all .3s; cursor: pointer;
}
.appcf-dot.active { width: 22px; border-radius: 4px; background: var(--violet); }
/* accent per app — задаёт --a1 для блоба-свечения */
.appcf-gold  { --a1: #f3dca0; }
.appcf-peach { --a1: #f1d3ba; }
.appcf-green { --a1: #8ff0c9; }
.appcf-peri  { --a1: #d3dcfb; }

.useful-modal-foot {
  font-size: 12px; color: var(--ink-quiet);
  text-align: center;
  padding: 12px 14px 0;
  line-height: 1.5;
}




/* ============================================================
   HOME — contracts row (active + add, expandable on tap)
   ============================================================ */
/* ── Smooth flex-based expand/collapse ──
   Один такт, одна кривая. До этого было 4 разных длительности (0.18/0.30/0.46)
   и S-curve cubic-bezier(0.65, 0, 0.35, 1) — на мобилках чувствовалось
   рывками, потому что фазы (gap, height, opacity, scale, padding)
   приходили в разное время. Теперь всё едет в один такт
   0.6s cubic-bezier(0.4, 0, 0.2, 1) (мягкий ease-in-out: плавно стартует,
   плавно тормозит — одинаково мягко и на раскрытие, и на сворачивание). */
/* Карусель страниц активных контрактов. Каждая страница = 100% ширины трека
   (scroll-snap), внутри — ряд из 1–2 ячеек. Боковой padding держит страница,
   у ряда его больше нет. */
.home-contracts-carousel { width: 100%; }
.home-contracts-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.home-contracts-track::-webkit-scrollbar { display: none; }
.home-contracts-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 0 14px;
}

.home-contracts-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  /* Promote ряд в отдельный композитный слой, чтобы layout-проход
     не утаскивал соседние блоки страницы. */
  transform: translateZ(0);
  transition: gap 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-contracts-row.expanded,
.home-contracts-row.exp-left,
.home-contracts-row.exp-right {
  gap: 0;
}

/* Active contract card (compact by default, expands inline) */
.home-contract-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px;
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  /* Высота зафиксирована и одинакова в свёрнутом/раскрытом состоянии — иначе при
     раскрытии ряд «прыгает» вниз (см. комментарий 28.05.2026). Слегка прямоугольная:
     при ширине ~ половины контента (~165px на 360px-устройстве) 190px даёт мягкий
     вертикальный прямоугольник без эффекта квадрата. */
  height: 190px;
  /* Плавное сворачивание, когда карточка — соседняя ячейка к раскрытой
     (flex-grow 1→0). Раньше анимировалась только «+»-карточка; теперь оба типа. */
  transition:
    flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    flex-basis 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.home-contracts-row.expanded .home-contract-card {
  height: 190px;
}
.home-contract-card .bc-gauge-section {
  position: absolute;
  top: 9px; bottom: 9px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 130px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 2;
  transition:
    left 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, left, width;
}
.home-contracts-row.exp-left .home-contract-card:first-child .bc-gauge-section {
  left: 9px;
  /* Раскрытый вид: секция ужимается до ширины кольца (112px) и прижата влево,
     как колонка гейджа в каталоге (.cshop-card min-width:0). Без этого кольцо
     центрировалось в 130px-секции, уезжало вправо до ~130px и перекрывало блок
     деталей (left:129px) — блоки «слипались». По комменту max 29.05.2026. */
  width: 112px;
  /* min-width базового .bc-gauge-section = 124px перебивал width:112 — секция
     резолвилась в 124px, кольцо центрировалось и оставляло ~2px до деталей.
     Сбрасываем min-width до 112, чтобы секция была ровно 112px и кольцо прижалось
     влево (9..121) — чистый зазор 8px до деталей (left:129). */
  min-width: 112px;
  transform: translate3d(0, 0, 0);
}
/* Правая ячейка разворачивается так же, как первая (gauge слева, детали справа) —
   разница только в том, что сосед уезжает влево (см. сворачивание ниже). */
.home-contracts-row.exp-right .home-contract-card:last-child .bc-gauge-section {
  left: 9px;
  width: 112px;
  min-width: 112px;
  transform: translate3d(0, 0, 0);
}
.home-contract-card .bc-details {
  position: absolute;
  top: 9px; right: 9px; bottom: 9px;
  /* Раскрытый вид — тот же стиль, что в каталоге (.cshop-card): гейдж у левого
     края (left:9px в expanded), блок деталей шире и с меньшим боковым padding (11px),
     чтобы длинные метки не съезжали. По комменту max 29.05.2026. В свёрнутом
     состоянии детали скрыты (opacity:0), гейдж остаётся по центру. */
  left: 129px;
  padding: 12px 11px 14px;
  min-width: 0;
  opacity: 0;
  transform: translate3d(14px, 0, 0);
  /* На сворачивание: opacity гаснет чуть быстрее основного такта,
     transform — синхронно с рядом. */
  transition:
    opacity 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  will-change: transform, opacity;
}
.home-contracts-row.exp-left .home-contract-card:first-child .bc-details,
.home-contracts-row.exp-right .home-contract-card:last-child .bc-details {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  /* На раскрытие: ждём, пока ряд приоткроется (≈треть основного такта),
     потом проявляем детали той же кривой, что и геометрия. */
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-contract-card::after { display: none; }

/* Compact add card (right of active contract) — сжимается по flex-grow.
   Раньше параллельно с flex-grow ехал ещё transform: scale(0.94) — давал
   эффект двойного движения. Убрал, оставил только flex-grow + opacity,
   синхронизированные с основным тактом ряда. */
.home-add-card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.010);
  border: 2px dashed rgba(255,255,255,0.26);
  box-shadow: none;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 16px 12px 14px;
  cursor: pointer;
  /* Высота синхронизирована с .home-contract-card (190px), чтобы при раскрытии
     контракта общая высота ряда не менялась. До этого add-card была 168px и
     контракт прыгал 168 → 190. */
  height: 190px;
  position: relative; overflow: hidden;
  transition:
    flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  /* flex-grow не композится — declaring его в will-change только грузит
     браузер впустую. Оставляем opacity. */
  will-change: opacity;
}
/* Сворачивание соседней ячейки: exp-left → правая ячейка уезжает вправо,
   exp-right → левая уезжает влево. Работает для любой ячейки (контракт или «+»). */
.home-contracts-row.exp-left > *:last-child,
.home-contracts-row.exp-right > *:first-child {
  flex-grow: 0;
  flex-basis: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  pointer-events: none;
}
.home-add-card-btn {
  width: 76px; height: 76px; border-radius: 50%;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    rgba(22,16,35,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.82);
  transition: transform 0.2s, background 0.2s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 22px 44px rgba(0,0,0,0.30),
    0 0 0 1px rgba(0,0,0,0.12);
  margin: auto 0;
}
.home-add-card-btn:hover {
  background:
    linear-gradient(140deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03)),
    rgba(22,16,35,0.95);
  transform: scale(1.04);
}
.home-add-card-btn:active { transform: scale(0.96); }
.home-add-card-btn svg {
  width: 30px; height: 30px;
  fill: none;
  stroke: rgba(255,255,255,0.78);
  stroke-width: 2.4;
  stroke-linecap: round;
  display: block;
}
.home-add-card-btn svg line { stroke: rgba(255,255,255,0.86); }
.home-add-card-label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,0.52);
  text-align: center;
}

/* Active contract — размер кольца разный по состояниям:
   — Свёрнутое (default): крупное кольцо 130px — заполняет компактную ячейку,
     визуально не мелкое (по комменту max 29.05.2026).
   — Раскрытое: кольцо как в каталоге (112px / 24px), рядом блок деталей. */
.home-contract-card .bc-gauge-wrapper { width: 130px; height: 130px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1), height 0.6s cubic-bezier(0.4,0,0.2,1); }
.home-contract-card .bc-gauge-days { font-size: 27px; }
.home-contract-card .bc-gauge-label { font-size: 9px; margin-top: 5px; }
.home-contract-card .bc-contract-title-main { font-size: 15px; font-weight: 700; letter-spacing: 2px; }
.home-contract-card .bc-contract-title { margin-top: -10px; }

.home-contracts-row.exp-left .home-contract-card:first-child .bc-gauge-wrapper,
.home-contracts-row.exp-right .home-contract-card:last-child .bc-gauge-wrapper { width: 112px; height: 112px; }
.home-contracts-row.exp-left .home-contract-card:first-child .bc-gauge-days,
.home-contracts-row.exp-right .home-contract-card:last-child .bc-gauge-days { font-size: 24px; }
.home-contracts-row.exp-left .home-contract-card:first-child .bc-gauge-label,
.home-contracts-row.exp-right .home-contract-card:last-child .bc-gauge-label { font-size: 8.5px; }
.home-contracts-row.exp-left .home-contract-card:first-child .bc-contract-title-main,
.home-contracts-row.exp-right .home-contract-card:last-child .bc-contract-title-main { font-size: 14px; font-weight: 700; }

/* Точки-карусели под рядом контрактов на главной (логику листания добавим
   следующим шагом — пока статичный индикатор). Переиспользуют .cpage-dots. */
.home-contracts-dots { padding-top: 12px; }

/* ============================================================
   CONTRACTS — Gift contract block (soft gold) + modal
   ============================================================ */
.cgift-block {
  position: relative;
  margin: 16px 14px 0;
  padding: 14px 14px 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(232,201,138,0.16) 0%, rgba(247,224,176,0.08) 40%, rgba(199,156,91,0.10) 100%),
    rgba(255,255,255,0.02);
  border: 1px solid rgba(232,201,138,0.30);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 10px 30px rgba(199,156,91,0.12),
    inset 0 1px 0 rgba(247,224,176,0.18);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.cgift-block:hover {
  border-color: rgba(247,224,176,0.5);
  box-shadow:
    0 14px 36px rgba(199,156,91,0.20),
    inset 0 1px 0 rgba(247,224,176,0.28);
}
.cgift-block:active { transform: scale(0.99); }

.cgift-blob {
  position: absolute; pointer-events: none; z-index: -1;
  filter: blur(28px); opacity: 0.55;
}
.cgift-blob-a {
  inset: -40% 35% -40% auto; width: 55%;
  background: radial-gradient(50% 60% at 60% 50%, #f3d68f 0%, transparent 65%);
}
.cgift-blob-b {
  inset: auto -10% -60% 40%; width: 50%; height: 140%;
  background: radial-gradient(50% 60% at 50% 50%, #d9a85a 0%, transparent 65%);
  opacity: 0.35;
}
.cgift-grain {
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.83 0 0 0 0 0.55 0 0 0 0.45 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
}
.cgift-shine {
  position: absolute; top: 0; left: -30%;
  width: 35%; height: 100%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,240,200,0.5) 50%, transparent 65%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: cgiftShine 5.5s ease-in-out 1.2s infinite;
}
@keyframes cgiftShine {
  0%, 60%, 100% { left: -30%; opacity: 0; }
  72% { opacity: 0.9; }
  90% { left: 110%; opacity: 0; }
}

.cgift-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  display: grid; place-items: center;
  color: #5a3e15;
  box-shadow:
    0 6px 14px rgba(199,156,91,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(120,80,30,0.18);
}

.cgift-body { flex: 1; min-width: 0; }
.cgift-row { display: flex; align-items: center; gap: 8px; }
.cgift-title {
  font-size: 14px; font-weight: 600;
  color: #fff; letter-spacing: -0.005em;
}
.cgift-new {
  font-size: 9px; font-weight: 800; letter-spacing: 0.10em;
  padding: 2px 7px; border-radius: 999px;
  background: linear-gradient(135deg, #f5dfa3 0%, #d4ad62 100%);
  color: #3a280c;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(212,173,98,0.4);
}
.cgift-sub {
  font-size: 11.5px; color: rgba(255,237,201,0.62);
  margin-top: 4px; line-height: 1.45; text-wrap: pretty;
}
.cgift-arrow {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(247,224,176,0.14);
  border: 1px solid rgba(247,224,176,0.22);
  color: #f0d99f;
  display: grid; place-items: center;
}

/* ── Gift modal ── */
.useful-modal-card-gold::before {
  background: linear-gradient(155deg, rgba(232,201,138,0.22) 0%, rgba(199,156,91,0.10) 35%, transparent 70%) !important;
}
.useful-modal-card-gold .useful-modal-title {
  background: linear-gradient(135deg, #fff 0%, #f3d99e 75%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gift-modal-list { gap: 10px !important; padding-bottom: 22px !important; }

.gift-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247,224,176,0.7);
  margin: 8px 2px 4px;
}
.gift-section-label:first-child { margin-top: 0; }

/* ── Gift page (full-screen SubPage): shell, hero, referral carousel, stepper ──
   Классы новой SubPage-версии GiftContractModal (pages-contracts.js). Базовый
   скролл и верхний safe-area-отступ даёт .page-faq-inner; здесь — раскладка. */
.gift-page-body {
  padding: 0 14px;
}
/* Раскладка flow подарка на всю высоту (комм. max): стикер-блок сверху, блок шага
   по центру, кнопка прижата к низу — чтобы стабильно выглядело на всех устройствах. */
.page-faq-inner.gift-flow {
  display: flex;
  flex-direction: column;
}
.page-faq-inner.gift-flow .bottom-space { display: none; }
.gift-flow .gift-page-body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: max(14px, var(--bottom-safe));
}
/* Тело шага растягивается и центрирует свой контент по вертикали; при высоком
   контенте не сжимается (grow:1, shrink:0) — страница просто скроллится. */
/* Шаг не растягивается на всю высоту и не центрируется — садится сразу под героем,
   а кнопка «Далее» идёт следом за выбором (комм. 12: поднять кнопку к блоку выбора,
   три блока — герой/выбор/кнопка — стоят единой группой по сетке на всех этапах). */
.gift-step-body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}
.gift-flow .gift-step-actions { flex: 0 0 auto; }
/* Герой — промо-блок (золотая карточка) с крупным стикером. Заголовок SubPage скрыт
   (ниже), поэтому отступ сверху держит голову стикера ниже кнопки «Назад». */
.page-faq-inner.gift-flow .page-header { display: none; }
/* \u0428\u0430\u043f\u043a\u0430 \u0441\u043a\u0440\u044b\u0442\u0430 \u2014 \u043e\u0442\u043e\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0433\u0435\u0440\u043e\u044f \u043d\u0438\u0436\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb (38px) */
.page-faq-inner.gift-flow .gift-hero { margin-top: 54px; }
.gift-hero {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 12px;
  margin: 4px 0 10px;
  min-height: 104px;
  padding: 14px 18px 14px 162px;
  border-radius: 22px;
  background:
    radial-gradient(120% 88% at 50% 0%, rgba(247,224,176,0.13) 0%, transparent 62%),
    linear-gradient(160deg, rgba(232,201,138,0.10) 0%, rgba(199,156,91,0.04) 52%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(247,224,176,0.16);
  box-shadow: inset 0 1px 0 rgba(247,224,176,0.10);
  overflow: visible;
}
.gift-hero-sticker {
  position: absolute;
  left: 6px;
  bottom: 0;
  width: auto;
  height: 158px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(199,156,91,0.32));
  pointer-events: none;
}
.gift-hero-sub {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.66);
  text-wrap: pretty;
}
/* Реферальная карусель — те же «рельсы», что и .gift-contract-track */
.gift-referral-track {
  margin: 0 -14px;
  padding: 6px 0 2px;
}
.gift-referral-track .cpage-slide,
.gift-referral-slide {
  padding: 0 14px;
  gap: 8px;
}
.gift-referral-dots {
  padding-top: 4px;
}
/* Нижний сегментный прогресс по 3 шагам */
/* Нижний сегментный прогресс: почти вплотную к кнопке, ширина = ширине кнопки */
.gift-stepper-bar {
  display: flex;
  gap: 6px;
  margin: 9px 0 2px;
}
.gift-stepper-seg {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  transition: background 0.28s;
}
.gift-stepper-seg.done {
  background: rgba(247,224,176,0.32);
}
.gift-stepper-seg.active {
  background: rgba(240,217,159,0.5);
}

.gift-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 0 4px;
}
.gift-step-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,0.16);
  transition: width 0.28s cubic-bezier(0.38,1.2,0.38,1), background 0.24s, opacity 0.24s;
}
.gift-step-dot.active {
  width: 26px;
  background: linear-gradient(90deg, #f0d99f 0%, #d4ad62 100%);
}
.gift-step-dot.done {
  background: rgba(247,224,176,0.48);
}

.gift-referrals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gift-referral {
  position: relative;
  width: 100%;
  min-height: 66px;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  text-align: left;
  color: #fff;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  transition: transform 0.16s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.gift-referral:active { transform: scale(0.99); }
.gift-referral.active {
  background: linear-gradient(135deg, rgba(232,201,138,0.15), rgba(199,156,91,0.07));
  border-color: rgba(247,224,176,0.52);
  box-shadow:
    0 10px 24px rgba(199,156,91,0.14),
    inset 0 1px 0 rgba(247,224,176,0.16);
}
.gift-referral-avatar,
.gift-recipient-avatar {
  width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  font-size: 14px; font-weight: 800;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.gift-referral-body { flex: 1; min-width: 0; }
.gift-referral-main {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.gift-referral-name {
  min-width: 0;
  font-size: 14px; font-weight: 750;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gift-referral-badge,
.gift-recipient-status {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #3a280c;
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}
.gift-referral-badge.base,
.gift-recipient-status.base {
  color: rgba(255,255,255,0.74);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: none;
}
.gift-referral-sub,
.gift-recipient-sub {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.25;
  color: rgba(255,255,255,0.48);
}

.gift-step-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}
.gift-step-actions.two {
  grid-template-columns: minmax(86px, 0.42fr) minmax(0, 1fr);
  align-items: center;
}
.gift-next-btn,
.gift-back-btn {
  min-height: 48px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 780;
  transition: transform 0.15s, filter 0.15s, opacity 0.18s, border-color 0.18s;
}
.gift-next-btn {
  color: #3a280c;
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  box-shadow:
    0 12px 28px rgba(212,173,98,0.26),
    inset 0 1px 0 rgba(255,255,255,0.52);
}
.gift-back-btn {
  color: rgba(255,255,255,0.76);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
}
.gift-next-btn:not(.disabled):active,
.gift-back-btn:not(:disabled):active { transform: scale(0.98); }
.gift-next-btn:not(.disabled):hover { filter: brightness(1.04); }
.gift-next-btn.disabled,
.gift-next-btn:disabled,
.gift-back-btn:disabled {
  opacity: 0.46;
  cursor: default;
  box-shadow: none;
}

.gift-recipient-chip {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.gift-recipient-name {
  font-size: 13.5px;
  font-weight: 760;
  color: #fff;
}
.gift-contract-track {
  margin: 0 -14px;
  padding: 10px 0 2px;
}
.gift-contract-track .cpage-slide {
  padding: 0 14px;
  gap: 8px;
}
/* (убрано редундантное .gift-contract-track .cshop-card { background } — оно повторяло
   дефолт .bc-card и перебивало зелёную тему STARTER в шаге подарка, комм. max) */
.gift-contract-dots {
  padding-top: 4px;
}

.gift-order-card {
  margin-top: 2px;
  padding: 13px 14px;
  border-radius: 18px;
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(232,201,138,0.12), transparent 70%),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(247,224,176,0.16);
}
.gift-order-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  color: rgba(255,255,255,0.52);
}
.gift-order-row span {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 720;
}
.gift-order-row strong {
  min-width: 0;
  text-align: right;
  font-size: 13.5px;
  font-weight: 780;
  color: #fff;
  overflow-wrap: anywhere;
}
.gift-order-row.total {
  align-items: center;
  padding-top: 9px;
}
.gift-order-row.total span {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
}
.gift-order-row.total strong {
  font-size: 20px;
  background: linear-gradient(135deg, #fff 0%, #f3d99e 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gift-step-actions.two .order-buy-button {
  min-width: 0;
  margin-top: 0;
}
.gift-order-button {
  --order-bg: #d4ad62;
  height: 48px;
  border-radius: 16px;
  color: #3a280c;
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  box-shadow:
    0 12px 28px rgba(212,173,98,0.26),
    inset 0 1px 0 rgba(255,255,255,0.52);
}
.gift-order-button.done {
  color: #fff;
}
.gift-order-button .order-buy-text {
  width: 86px;
}

.gift-contracts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.gift-contract {
  position: relative;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 11px 12px 12px;
  color: #fff;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.gift-contract:hover { background: rgba(255,255,255,0.06); border-color: rgba(247,224,176,0.25); }
.gift-contract.active {
  background: linear-gradient(135deg, rgba(232,201,138,0.16) 0%, rgba(199,156,91,0.08) 100%);
  border-color: rgba(247,224,176,0.55);
  box-shadow:
    0 8px 22px rgba(199,156,91,0.18),
    inset 0 1px 0 rgba(247,224,176,0.20);
}
.gift-contract-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
}
.gift-contract-name {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.10em;
  color: #fff;
}
.gift-contract.active .gift-contract-name {
  color: #f3d99e;
}
.gift-contract-check {
  width: 18px; height: 18px; border-radius: 999px;
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  color: #3a280c;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.gift-contract-meta {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px;
  font-size: 10.5px; color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}
.gift-contract-dot {
  width: 2.5px; height: 2.5px; border-radius: 999px;
  background: rgba(255,255,255,0.35);
}
.gift-contract-price {
  margin-top: 10px;
  font-size: 16px; font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.gift-contract.active .gift-contract-price { color: #f7e2ad; }

.gift-input-wrap {
  position: relative;
  display: flex; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 0 12px;
  transition: border-color 0.18s, background 0.18s;
}
.gift-input-wrap:focus-within {
  border-color: rgba(247,224,176,0.55);
  background: rgba(255,255,255,0.06);
}
.gift-input-icon {
  color: rgba(247,224,176,0.7);
  display: grid; place-items: center;
  margin-right: 8px;
}
.gift-input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: #fff;
  font-size: 14.5px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  padding: 13px 0;
}
.gift-input::placeholder { color: rgba(255,255,255,0.30); letter-spacing: 0; }
.gift-input-clear {
  width: 22px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: none;
  color: rgba(255,255,255,0.7);
  display: grid; place-items: center;
  cursor: pointer;
}
.gift-input-hint {
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  padding: 2px 4px 0;
  min-height: 14px;
}

.gift-note-wrap {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px 12px 6px;
  transition: border-color 0.18s, background 0.18s;
}
.gift-note-wrap:focus-within {
  border-color: rgba(247,224,176,0.45);
  background: rgba(255,255,255,0.06);
}
.gift-note {
  width: 100%;
  background: transparent; border: none; outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: none;
}
.gift-note::placeholder { color: rgba(255,255,255,0.28); }
.gift-note-count {
  text-align: right;
  font-size: 10.5px;
  color: rgba(255,255,255,0.35);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.gift-summary {
  margin-top: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 12px 14px;
}
.gift-summary-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  padding: 4px 0;
}
.gift-summary-val {
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gift-summary-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 4px 0 2px;
}
.gift-summary-total { padding-top: 6px; }
.gift-summary-total span:first-child { font-size: 13px; color: rgba(255,255,255,0.7); }
.gift-summary-price {
  font-size: 18px; font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, #f3d99e 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}

.gift-pay-btn {
  margin-top: 6px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  color: #3a280c;
  font-family: inherit;
  font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.005em;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer;
  box-shadow:
    0 12px 28px rgba(212,173,98,0.30),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(120,80,30,0.18);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.gift-pay-btn:hover { filter: brightness(1.05); }
.gift-pay-btn:active { transform: scale(0.99); }
.gift-pay-btn.disabled {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.30);
  box-shadow: none;
  cursor: not-allowed;
}
.gift-pay-btn-secondary {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  box-shadow: none;
}

.gift-pay-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(58,40,12,0.25);
  border-top-color: #3a280c;
  animation: giftSpin 0.7s linear infinite;
}
@keyframes giftSpin { to { transform: rotate(360deg); } }

.gift-success {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 14px 22px;
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(232,201,138,0.18) 0%, transparent 70%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(247,224,176,0.25);
  border-radius: 18px;
}
.gift-success-ring {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #f0d99f 0%, #d4ad62 100%);
  color: #3a280c;
  box-shadow:
    0 14px 32px rgba(212,173,98,0.35),
    inset 0 1px 0 rgba(255,255,255,0.5);
  margin-bottom: 14px;
}
.gift-success-amount {
  font-size: 22px; font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, #f3d99e 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.gift-success-meta {
  font-size: 12.5px; color: rgba(255,255,255,0.55);
  margin-top: 4px;
  letter-spacing: 0.02em;
}


/* ============================================================
   INVOICE / PAYMENT BLOCK — glass card style (как balance-card)
   Все классы префиксованы .pm-* чтобы не конфликтовать.
   ============================================================ */
.pm-wrap,
.pm-wrap *,
.pm-wrap *::before,
.pm-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.pm-wrap {
  width: 100%;
  padding: 0 14px;
  font-family: inherit;
  color: #ffffff;
}

/* glass card — mirrors .balance-card */
.pm-card {
  position: relative;
  border-radius: 22px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.pm-card > * { position: relative; z-index: 2; }
.pm-card > [hidden] { display: none !important; }

.pm-blob {
  position: absolute;
  inset: -28% -22% 28% auto;
  width: 70%; height: 70%;
  filter: blur(60px);
  /* Сильно приглушили — иначе блики просвечивают сквозь стеклянные табы/поля
     и «съедают» контраст текста и плейсхолдеров на iOS Safari. */
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 58% at 30% 32%, #c8a4ff 0%, transparent 65%),
    radial-gradient(55% 55% at 78% 60%, #f5a7d9 0%, transparent 65%),
    radial-gradient(50% 50% at 60% 88%, #b7ded8 0%, transparent 70%);
}
.pm-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* tabs — translucent, glassy */
.pm-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Достаточно плотный тёмный фон, чтобы blob под ним не превращал
     неактивные табы в "молочные пятна". */
  background: rgba(10, 6, 20, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 5px;
  gap: 4px;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.pm-tab {
  background: transparent; border: none;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  letter-spacing: 1.1px;
  padding: 14px 6px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.pm-tab:hover { color: rgba(255, 255, 255, 0.85); }
.pm-tab.is-active {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

.pm-amounts {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: end;
}
.pm-field-wrap {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.pm-field {
  background: rgba(10, 6, 20, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 42px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.pm-label {
  font-size: 11px;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding-left: 2px;
}
.pm-input {
  background: transparent;
  border: none; outline: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em;
  width: 100%; padding: 0; min-width: 0;
}
.pm-input::placeholder { color: rgba(255,255,255,0.25); }
.pm-input[readonly],
.pm-input:disabled { cursor: default; }
.pm-currency {
  color: rgba(255,255,255,0.50);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.pm-arrow {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55);
}
.pm-arrow svg { width: 14px; height: 14px; }

.pm-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pm-preset {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
  border-radius: 999px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.pm-preset:hover {
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.05);
}
.pm-preset.is-active {
  border-color: rgba(184,164,239,0.55);
  color: #fff;
  background: rgba(184,164,239,0.10);
}

/* card form (blurred placeholder) */
.pm-card-form {
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.pm-card-blur {
  display: flex; flex-direction: column; gap: 10px;
  filter: blur(0.5px);
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
}
.pm-card-row { display: grid; gap: 10px; }
.pm-card-row--amount { grid-template-columns: 1fr 1fr; }
.pm-card-row--secure { grid-template-columns: 1fr 1fr 1.4fr; }

.pm-card-brand { display: inline-flex; align-items: center; pointer-events: none; }
.pm-card-brand svg { width: 30px; height: 18px; display: block; }

.pm-card-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.pm-card-notice {
  background: rgba(15,10,25,0.86);
  border: 1px solid rgba(229,86,42,0.4);
  border-radius: 12px;
  padding: 12px 18px;
  max-width: 320px;
  color: #ffffff;
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* Этап 7 ROADMAP: текст ошибки backend-действия (депозит/отправка/кошельки) */
.pm-deposit-error {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  color: #ff9e9e;
  text-align: center;
  text-wrap: pretty;
}
.pm-submit:disabled { opacity: 0.6; cursor: default; }

/* primary CTA — project violet gradient */
.pm-submit {
  width: 100%;
  background: linear-gradient(135deg, #82A9F3 0%, #999CF6 50%, #C17CE1 100%);
  border: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.01em;
  padding: 15px 16px;
  border-radius: 16px;
  cursor: pointer;
  margin-top: 14px;
  box-shadow: 0 8px 24px rgba(153,156,246,0.25);
  transition: filter 0.18s ease, transform 0.1s ease;
}
.pm-submit:hover { filter: brightness(1.07); }
.pm-submit:active { transform: scale(0.985); }
.pm-submit:disabled {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.35);
  box-shadow: none;
  cursor: not-allowed;
}
.pm-submit:disabled:hover { filter: none; }

@media (max-width: 380px) {
  .pm-tab { font-size: 11px; letter-spacing: 0.6px; padding: 12px 4px; }
  .pm-preset { padding: 8px 6px; font-size: 11px; }
  .pm-card { padding: 14px; }
}


/* lang icon button on profile header (top-left) */
.profile-hero-lang {
  flex-shrink: 0;
}
.profile-hero-lang svg,
.profile-hero-lang img {
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px;
}


/* ============================================================
   BALANCE CARD PRO (mod.html port) — единая морфирующая карточка
   .balance-card-pro-wrap → .crypto-balance-card (+ optional .invoice-card ниже)
   ============================================================ */

.balance-card-pro-wrap {
  position: relative;
  margin: 0 14px;
  display: block;
}

.crypto-balance-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  min-height: 232px;
  padding: 17px 17px 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.115), rgba(255,255,255,0.035) 44%, rgba(255,255,255,0.02)),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 24px 52px rgba(0,0,0,0.30);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.crypto-balance-card .cbc-blob {
  position: absolute; pointer-events: none;
  filter: blur(46px); opacity: 0.62; z-index: -2;
}
.crypto-balance-card .cbc-blob-a {
  width: 230px; height: 180px; top: -72px; right: -82px;
  background:
    radial-gradient(58% 58% at 35% 30%, rgba(184,164,239,0.95) 0%, transparent 68%),
    radial-gradient(58% 58% at 80% 68%, rgba(237,178,214,0.86) 0%, transparent 68%);
}
.crypto-balance-card .cbc-blob-b {
  width: 190px; height: 150px; left: -74px; bottom: -66px;
  background:
    radial-gradient(54% 64% at 42% 50%, rgba(183,222,216,0.58) 0%, transparent 68%),
    radial-gradient(46% 56% at 80% 70%, rgba(233,201,177,0.48) 0%, transparent 70%);
}
.crypto-balance-card .cbc-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.34 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
  pointer-events: none; opacity: 0.105; mix-blend-mode: overlay; z-index: -1;
}
.crypto-balance-card .cbc-sheen {
  position: absolute; inset: 1px; border-radius: 27px; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,0.18) 0%, transparent 24%),
    radial-gradient(80% 55% at 82% 0%, rgba(255,255,255,0.16), transparent 70%);
  opacity: 0.75; z-index: -1;
}

.cbc-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cbc-wallet {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
}
.cbc-token-mark {
  position: relative; width: 42px; height: 42px;
  border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto;
  background:
    linear-gradient(145deg, rgba(110,231,183,0.22), rgba(183,222,216,0.08)),
    rgba(255,255,255,0.06);
  border: 1px solid rgba(183,222,216,0.22);
  color: #d9fff2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 10px 20px rgba(20,160,122,0.12);
}
.cbc-token-mark.is-token-btc {
  background:
    linear-gradient(145deg, rgba(246,217,141,0.34), rgba(233,166,75,0.10)),
    rgba(255,255,255,0.06);
  border-color: rgba(246,217,141,0.28); color: #ffe7a3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 10px 20px rgba(233,166,75,0.13);
}
.cbc-token-mark.is-token-card {
  background:
    linear-gradient(145deg, rgba(130,169,243,0.32), rgba(193,124,225,0.12)),
    rgba(255,255,255,0.06);
  border-color: rgba(184,164,239,0.28); color: #eef2ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 10px 20px rgba(153,156,246,0.13);
}
.cbc-token-mark.is-token-payment {
  background:
    linear-gradient(145deg, rgba(184,164,239,0.30), rgba(130,169,243,0.10)),
    rgba(255,255,255,0.06);
  border-color: rgba(184,164,239,0.26); color: #f3efff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 10px 20px rgba(184,164,239,0.13);
}
.cbc-wallet-text { min-width: 0; display: flex; flex-direction: column; }
.cbc-wallet-label {
  order: 1; font-size: 10.5px; line-height: 1.2; color: rgba(255,255,255,0.38);
}
.cbc-wallet-name {
  order: 2; margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.2; color: #fff;
}
.crypto-balance-card.is-invoice-mode .cbc-wallet-name {
  font-size: 17px; font-weight: 850; line-height: 1.12;
}
.crypto-balance-card.is-invoice-mode .cbc-wallet-label {
  font-size: 11px; font-weight: 600; line-height: 1.15;
}

.cbc-top-actions { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.cbc-icon-btn {
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.82);
  transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
.cbc-icon-btn:hover { background: transparent; border-color: transparent; color: #fff; }
.cbc-icon-btn:focus,
.cbc-icon-btn:focus-visible { outline: none; }
.cbc-icon-btn:active { transform: scale(0.94); }
.cbc-icon-btn svg { width: 21px; height: 21px; }

.cbc-balance { position: relative; z-index: 2; margin-top: 24px; }
.cbc-balance-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cbc-balance-label {
  font-size: 12.5px; font-weight: 800; line-height: 1.2; color: rgba(255,255,255,0.62);
}
.cbc-amount {
  margin-top: 9px; display: flex; align-items: flex-end; gap: 6px; min-width: 0; color: #fff;
}
.cbc-amount-value {
  min-width: 0; display: inline-flex; align-items: flex-end;
  font-size: 44px; font-weight: 760; line-height: 0.96; color: #fff; letter-spacing: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}
.cbc-amount-symbol { margin-right: 4px; font-size: 0.76em; line-height: 1; transform: translateY(-0.02em); }
.cbc-amount-approx {
  margin-right: 4px;
  font-size: 0.52em;
  font-weight: 760;
  line-height: 1;
  color: rgba(255,255,255,0.56);
  transform: translateY(-0.04em);
}
.cbc-amount-fraction { display: inline-block; margin-left: 2px; font-size: 0.52em; font-weight: 760; line-height: 1; transform: translateY(-0.02em); }
.cbc-amount-cur {
  margin-bottom: 1px; margin-left: 4px; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 9.5px; font-weight: 800; line-height: 1; color: rgba(255,255,255,0.66);
}
.crypto-balance-card.cbc-wide-amount .cbc-amount-value { font-size: 38px; }
.crypto-balance-card.cbc-wide-amount .cbc-amount-cur {
  margin-left: 2px;
  padding: 4px 5px;
  font-size: 8.8px;
}
.crypto-balance-card.cbc-hidden .cbc-amount-value { font-size: 41px; color: rgba(255,255,255,0.72); }

/* ── actions row (4 кнопки) ── */
.crypto-balance-card .cbc-actions {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px; margin-top: 10px;
}
.cbc-action {
  min-width: 0; display: grid; justify-items: center; gap: 3px;
  padding: 7px 4px 5px; border-radius: 18px;
  color: #f6f1ff; background: transparent; border: 0;
  transition: transform 0.14s ease, color 0.18s ease;
  cursor: pointer;
}
.cbc-action:active { transform: scale(0.94); }
.cbc-action-icon {
  position: relative;
  width: 54px; height: 48px;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.86);
  background: transparent;
  border: 0;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.20));
}
.cbc-action-icon::before {
  /* Цветное свечение под каждой иконкой (Депозит/Отправить/Оплата/Настройки)
     убрано по комменту 28.05.2026 — оставляем только саму иконку с тёмной
     drop-shadow для глубины. Псевдоэлемент гасим через content: none, окружающую
     логику (filter/color per-кнопке) не трогаем. */
  content: none;
}
.cbc-action-icon svg {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
}
.cbc-action-primary .cbc-action-icon {
  color: #bff7df;
}
.cbc-action:nth-child(2) .cbc-action-icon { color: #ff8fa3; }
.cbc-action:nth-child(3) .cbc-action-icon { color: #c8d2f4; }
.cbc-action:nth-child(4) .cbc-action-icon { color: rgba(255,255,255,0.82); }
.cbc-action:hover .cbc-action-icon { color: #fff; }
.cbc-action:hover .cbc-action-label { color: rgba(255,255,255,0.76); }
.cbc-action-label {
  max-width: 100%; color: rgba(255,255,255,0.62);
  font-size: 10.5px; font-weight: 600; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── home balance actions (2 широкие кнопки) ── */
.crypto-balance-card .cbc-home-actions {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin-top: 24px;
}
.cbc-home-action {
  min-width: 0; height: 54px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 18px;
  color: #f8f4ff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
.cbc-home-action-wallet {
  background:
    linear-gradient(135deg, rgba(110,231,183,0.20), rgba(184,164,239,0.10)),
    rgba(255,255,255,0.04);
  border-color: rgba(183,222,216,0.20);
}
.cbc-home-action:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.16);
}
.cbc-home-action-wallet:hover {
  background:
    linear-gradient(135deg, rgba(110,231,183,0.24), rgba(184,164,239,0.13)),
    rgba(255,255,255,0.045);
  border-color: rgba(183,222,216,0.26);
}
.cbc-home-action:active { transform: scale(0.97); }
.cbc-home-action-icon,
.cbc-home-currency-mark {
  width: 34px; height: 34px; border-radius: 13px;
  display: grid; place-items: center; flex: 0 0 auto;
  color: rgba(255,255,255,0.92);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
}
.cbc-home-action-wallet .cbc-home-action-icon {
  color: #d9fff2;
  background:
    linear-gradient(145deg, rgba(110,231,183,0.34), rgba(183,222,216,0.10)),
    rgba(255,255,255,0.06);
  border-color: rgba(183,222,216,0.24);
}
.cbc-home-currency-mark {
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.cbc-home-currency-mark.is-usdt { color: #d9fff2; }
.cbc-home-currency-mark svg { width: 20px; height: 20px; }
.cbc-home-action-copy {
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
}
.cbc-home-action-title {
  max-width: 100%;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cbc-home-action-sub {
  max-width: 100%;
  font-size: 10.2px;
  font-weight: 600;
  line-height: 1.15;
  color: rgba(255,255,255,0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cbc-home-action-arrow {
  margin-left: auto;
  display: grid; place-items: center; flex: 0 0 auto;
  color: rgba(255,255,255,0.46);
}
.cbc-home-action-arrow svg { width: 18px; height: 18px; }

/* ── home currency picker ── */
.cbc-currency-backdrop {
  position: fixed; inset: 0;
  z-index: 140;
  display: flex; align-items: center; justify-content: center;
  padding: 22px 16px;
  background: rgba(4,1,10,0.68);
}
.useful-modal-card.cbc-currency-modal {
  width: 100%;
  max-width: 360px;
  max-height: min(74vh, 520px);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.11);
  animation: cbcCurrencyModalPop 0.24s cubic-bezier(0.34,1.14,0.64,1) both;
}
@keyframes cbcCurrencyModalPop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cbc-currency-modal-header { padding: 20px 20px 12px; }
.cbc-currency-list {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 16px;
  overflow-y: auto;
}
.cbc-currency-option {
  position: relative;
  width: 100%;
  min-height: 76px;
  display: grid; grid-template-columns: 36px minmax(0, 1fr);
  align-items: center; gap: 8px;
  padding: 10px 27px 10px 9px;
  border-radius: 17px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
.cbc-currency-option.active {
  background:
    linear-gradient(135deg, rgba(110,231,183,0.18), rgba(184,164,239,0.10)),
    rgba(255,255,255,0.045);
  border-color: rgba(183,222,216,0.24);
}
.cbc-currency-option:active { transform: scale(0.98); }
.cbc-currency-option-mark {
  width: 36px; height: 36px; border-radius: 14px;
  display: grid; place-items: center; flex: 0 0 auto;
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.cbc-currency-option-mark.is-usdt {
  color: #d9fff2;
  background:
    linear-gradient(145deg, rgba(110,231,183,0.34), rgba(183,222,216,0.10)),
    rgba(255,255,255,0.06);
  border-color: rgba(183,222,216,0.24);
}
.cbc-currency-option-mark svg { width: 22px; height: 22px; }
.cbc-currency-option-copy {
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
}
.cbc-currency-option-code {
  max-width: 100%;
  font-size: 13.5px;
  font-weight: 850;
  line-height: 1.12;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cbc-currency-option-name {
  max-width: 100%;
  font-size: 10.2px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255,255,255,0.52);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cbc-currency-option-check {
  position: absolute; top: 7px; right: 7px;
  width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center; flex: 0 0 auto;
  color: #07150f;
  background: transparent;
}
.cbc-currency-option-check.is-visible {
  background: #b7ded8;
  box-shadow: 0 8px 18px rgba(33,180,135,0.18);
}

/* ── секции внутри карточки (invoice/send/payment) ── */
.cbc-invoice, .cbc-send, .cbc-payment {
  position: relative; z-index: 2; margin-top: 22px;
}

/* В режимах invoice/send/payment/settings нижний отступ карточки до иконок/контента
   получался большим за счёт `min-height: 232px` (он рассчитан под основной баланс
   с 4 кнопками действий). После того как тайлы способа компактнее (28.05.2026),
   снизу оставалась пустая полоса. Снимаем min-height в этих режимах — высота
   определяется контентом, нижний паддинг карточки (15px) остаётся как декларирован. */
.crypto-balance-card.is-invoice-mode {
  min-height: 0;
}
.crypto-balance-card.is-invoice-mode .cbc-invoice,
.crypto-balance-card.is-invoice-mode .cbc-send,
.crypto-balance-card.is-invoice-mode .cbc-payment {
  margin-top: 16px;
}

/* embed-вариант .pm-card (без своих рамок/блобов, т.к. лежит уже внутри стеклянной карточки) */
.pm-wrap.pm-wrap--embed { padding: 0; }
.pm-card.pm-card--embed {
  display: flex; flex-direction: column; gap: 13px;
  background: none; border: none; padding: 0; box-shadow: none;
  border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  -webkit-mask-image: none;
}
.pm-card.pm-card--embed > .pm-blob,
.pm-card.pm-card--embed > .pm-grain { display: none; }

/* ============================================================
   INVOICE STEPPER (поэтапное создание инвойса)
   Шаги внутри стеклянной карточки: method → amount.
   Стилистика наследует pm-* (стекло, тонкие границы, фиолетовые акценты).
   Степпер живёт ВНИЗУ блока как приглушённая подсказка о текущем шаге.
   ============================================================ */
.cbc-invoice {
  display: flex; flex-direction: column;
  gap: 14px;
}

/* ── Степпер: тонкая полоска внизу, без визуальной нагрузки ── */
.pm-stepper {
  display: flex; align-items: center;
  margin-top: 4px;
  padding: 10px 2px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  gap: 6px;
  opacity: 0.7;
}
.pm-step {
  display: flex; align-items: center; gap: 7px;
  min-width: 0;
  color: rgba(255,255,255,0.40);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pm-step-dot {
  width: 16px; height: 16px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
  flex: 0 0 auto;
}
.pm-step-dot svg { width: 9px; height: 9px; }
.pm-step-num { line-height: 1; }
.pm-step-label {
  overflow: hidden; text-overflow: ellipsis;
  transition: color 0.22s ease;
}
.pm-step-line {
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  margin: 0;
  border-radius: 1px;
  min-width: 8px;
}
.pm-step-line.is-done {
  background: linear-gradient(to right, rgba(126,236,191,0.45), rgba(126,236,191,0.15));
}
.pm-step.is-active .pm-step-dot {
  background: rgba(184,164,239,0.22);
  border-color: rgba(184,164,239,0.55);
  color: #fff;
}
.pm-step.is-active .pm-step-label { color: rgba(255,255,255,0.85); }
.pm-step.is-done .pm-step-dot {
  background: rgba(126,236,191,0.18);
  border-color: rgba(126,236,191,0.5);
  color: #7eecbf;
}
.pm-step.is-done .pm-step-label { color: rgba(255,255,255,0.55); }

/* ── Тело шага ── */
.pm-step-body { display: flex; flex-direction: column; gap: 12px; }

.pm-step-title {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.01em;
}

.pm-step-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  min-height: 28px;
}
.pm-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  padding: 4px 6px 4px 2px;
  color: rgba(255,255,255,0.62);
  font-size: 12px; font-weight: 600;
  border-radius: 8px;
  transition: color 0.18s ease, background 0.18s ease;
}
.pm-back:hover { color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.04); }
.pm-back svg { display: block; }

/* ── Шаг 1: плитки способов в один ряд ──
   Иконки крипто-валют рендерятся без чёрной подложки и рамки —
   у BTC/USDT сам токен уже цветной кружок, дополнительная оболочка
   только зашумляла. CARD — stroke-иконка на фоне плитки. */
.pm-method-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pm-method-row--2col {
  grid-template-columns: repeat(2, 1fr);
}
.pm-amounts--single {
  grid-template-columns: 1fr;
}
.pm-amounts--single .pm-arrow { display: none; }
.pm-method-tile {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  /* Тайлы выбора способа уменьшены ~вдвое по высоте (28.05.2026): icon 42→28,
     padding 16/8→10/6, gap 8→6. Минимальная высота 56px — выше apple-минимума
     44px, тапается уверенно. Применяется ко ВСЕМ табам, где есть .pm-method-tile
     (Депозит / Отправить / Настройки шаг 1). */
  gap: 6px;
  min-height: 56px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  min-width: 0;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.pm-method-tile:hover {
  border-color: rgba(184,164,239,0.40);
  background: rgba(255,255,255,0.055);
}
.pm-method-tile:active { transform: scale(0.985); }
.pm-method-tile.is-current {
  border-color: rgba(184,164,239,0.55);
  background: rgba(184,164,239,0.08);
}
.pm-method-tile.is-soon {
  background: rgba(255,255,255,0.020);
  border-style: dashed;
  border-color: rgba(255,255,255,0.14);
}
.pm-method-tile-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.pm-method-tile-icon svg { width: 28px; height: 28px; display: block; }
.pm-method-tile-icon.is-card { color: rgba(255,255,255,0.65); }

/* deposit (30.05.2026): формирование адреса прямо по тапу по монете.
   Спиннер встаёт на место логотипа (28px), активная плитка подсвечена,
   остальные на время формирования приглушены и заблокированы. */
.pm-method-tile.is-loading {
  border-color: rgba(153,156,246,0.5);
  background: rgba(153,156,246,0.12);
}
.pm-method-spinner {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.16);
  border-top-color: #b9b6ff;
  animation: ptrSpin 0.7s linear infinite;
}
.pm-method-row.is-creating .pm-method-tile:not(.is-loading) {
  opacity: 0.4;
}
.pm-method-tile:disabled { cursor: default; }
.pm-method-tile.is-loading:disabled { cursor: progress; }
.pm-method-tile-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: uppercase;
}
.pm-method-tile-sub {
  font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,0.46);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Шаг 2: ошибочное состояние поля «Сумма в USD» ──
   Когда пользователь ввёл сумму < $30, поле подсвечивается красным,
   подсказка под пресетами тоже становится красной — этого достаточно,
   развёрнутый текст про длительность инвойса убран. */
.pm-field.is-error {
  border-color: rgba(255, 95, 95, 0.60);
  box-shadow:
    inset 0 0 0 1px rgba(255, 95, 95, 0.18),
    0 0 0 3px rgba(255, 95, 95, 0.10);
}
.pm-hint {
  font-size: 11.5px; line-height: 1.4;
  color: rgba(255,255,255,0.48);
  padding: 0 2px;
  transition: color 0.18s ease;
}
.pm-hint.is-error {
  color: rgba(255, 140, 140, 0.95);
}

/* ── CARD: ответвление «недоступно» ── */
.pm-card-unavailable {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 18px;
  background: rgba(255,255,255,0.035);
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 16px;
  text-align: center;
}
.pm-card-unavailable-eyebrow {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(184,164,239,0.85);
}
.pm-card-unavailable-title {
  font-size: 16px; font-weight: 700;
  color: rgba(255,255,255,0.92);
}
.pm-card-unavailable-text {
  font-size: 12px; line-height: 1.55;
  color: rgba(255,255,255,0.55);
  max-width: 340px; margin: 0 auto;
}

@media (max-width: 380px) {
  .pm-method-tile { padding: 8px 4px; min-height: 52px; }
  .pm-method-tile-icon { width: 24px; height: 24px; }
  .pm-method-tile-icon svg { width: 24px; height: 24px; }
  .pm-method-tile-title { font-size: 10.5px; }
}

/* ── SEND ── */
.send-form { display: flex; flex-direction: column; gap: 11px; }
.send-currency {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; border-radius: 14px;
  background: rgba(10, 6, 20, 0.48);
  border: 1px solid rgba(255,255,255,0.08);
}
.send-token {
  min-width: 0; padding: 11px 4px; border-radius: 10px;
  color: rgba(255,255,255,0.55);
  font-size: 10.5px; font-weight: 800; line-height: 1; white-space: nowrap;
  background: transparent; border: 0; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.send-token:hover { color: rgba(255,255,255,0.85); }
.send-token.is-active {
  background: rgba(255,255,255,0.12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
.send-panel { display: flex; flex-direction: column; gap: 10px; }
.send-field-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 8px; }
.send-field-grid--equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cbc-send .pm-label {
  color: rgba(255,255,255,0.48);
  font-weight: 700;
}
.cbc-send .pm-field {
  min-height: 42px;
  border-radius: 14px;
  padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 6px 14px rgba(0,0,0,0.10);
}
.cbc-send .pm-field:focus-within {
  border-color: rgba(126, 232, 202, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.13),
    inset 0 -12px 26px rgba(0,0,0,0.18),
    0 0 0 3px rgba(126, 232, 202, 0.08),
    0 12px 24px rgba(0,0,0,0.12);
}
/* Поля «Сумма» / «Кошелёк» вывода — сплошной тёмный фон (правка 07.06) */
.cbc-send .pm-field--solid {
  background: #181320;
  border-color: rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 16px rgba(0,0,0,0.24);
}
.cbc-send .pm-field--solid:focus-within {
  border-color: rgba(126, 232, 202, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 3px rgba(126, 232, 202, 0.08),
    0 8px 18px rgba(0,0,0,0.26);
}
/* «В BTC» / «Доступно» — просто аккуратная строка-подпись под суммой */
.send-convert-note {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.52);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Поле «Сумма» слева + конвертация (≈ BTC / доступно) справа — одна строка */
.send-amount-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.send-amount-row .pm-field { flex: 1 1 auto; min-width: 0; }
/* Шильд-итог слева + текстовая кнопка «Вывести» справа на одной строке */
.send-action-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 6px;
}
.send-action-btn {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #82A9F3 0%, #999CF6 50%, #C17CE1 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: filter .18s ease, transform .1s ease;
}
.send-action-btn:hover { filter: brightness(1.07); }
.send-action-btn:active { transform: scale(0.97); }
.send-action-btn:disabled {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.34);
  box-shadow: none;
  cursor: default;
}
.send-action-btn:disabled:hover { filter: none; }
.send-action-badge {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 13px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-wrap: pretty;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.send-action-badge.is-warn {
  background: linear-gradient(180deg, rgba(255,162,84,0.18), rgba(255,162,84,0.06));
  border-color: rgba(255,162,84,0.40);
  color: #ffc187;
}
.send-action-badge.is-ok {
  background: linear-gradient(180deg, rgba(110,222,162,0.17), rgba(110,222,162,0.05));
  border-color: rgba(110,222,162,0.38);
  color: rgba(214,255,235,0.92);
}
.send-badge-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.send-badge-key {
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
}
.send-badge-val {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbc-send .pm-input {
  color: rgba(255,255,255,0.92);
  font-weight: 650;
}
.cbc-send .pm-input::placeholder { color: rgba(255,255,255,0.34); }
.cbc-send .pm-input[readonly],
.cbc-send .pm-input:disabled {
  color: rgba(255,255,255,0.66);
  opacity: 1;
  -webkit-text-fill-color: rgba(255,255,255,0.66);
}
.cbc-send .pm-currency { color: rgba(255,255,255,0.62); }
.send-available-field {
  padding-right: 10px;
  background:
    linear-gradient(180deg, rgba(126,232,202,0.11), rgba(255,255,255,0.032)),
    rgba(9, 5, 18, 0.68);
  border-color: rgba(126,232,202,0.16);
}
.send-available-value {
  min-width: 0; color: rgba(255,255,255,0.86);
  font-size: 12px; font-weight: 800; line-height: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.send-fee-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 34px;
  padding: 8px 11px; border-radius: 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.50);
  font-size: 11px; font-weight: 700;
}
.send-fee-row strong {
  color: rgba(255,255,255,0.86); font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.send-card-form { min-height: 122px; }
.send-card-row--details { grid-template-columns: 0.78fr 1.22fr 0.9fr !important; }

.send-save-row {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 30px;
  color: rgba(255,255,255,0.68);
  font-size: 11.5px; font-weight: 650;
  position: relative; cursor: pointer; user-select: none;
}
.send-save-row input { position: absolute; opacity: 0; pointer-events: none; }
.send-check {
  width: 18px; height: 18px; border-radius: 6px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: transparent;
}
.send-save-row input:checked + .send-check {
  background: rgba(110,231,183,0.18);
  border-color: rgba(110,231,183,0.40);
  color: #8bf0c7;
}
.send-submit {
  width: 100%; padding: 13px 16px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(110,231,183,0.86), rgba(184,164,239,0.86));
  color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 8px 24px rgba(110,231,183,0.16);
  border: 0; cursor: pointer;
  transition: filter 0.18s, transform 0.1s;
}
.send-submit:hover { filter: brightness(1.07); }
.send-submit:active { transform: scale(0.985); }
.send-submit:disabled {
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35);
  box-shadow: none; cursor: not-allowed;
}

/* ── PAYMENT ──
   Унифицировано с .pm-method-tile (28.05.2026): тайлы выбора способа оплаты
   используют ту же сетку 2 колонки, gap 8, ту же компактную геометрию.
   Сохранена приглушённая «soon»-стилистика (opacity, цвет иконки) — фактически
   эти опции пока не активируются (см. PROJECT.md, первый релиз). */
.payment-options {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.payment-option {
  min-height: 56px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; padding: 10px 6px; border-radius: 14px;
  background: rgba(255,255,255,0.020);
  border: 1px dashed rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.72); opacity: 0.76;
}
.payment-option-icon {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  border-radius: 0; background: transparent; border: 0;
  color: rgba(255,255,255,0.86);
}
.payment-option-icon svg { width: 24px; height: 24px; display: block; }
.payment-option-title {
  color: rgba(255,255,255,0.78);
  font-size: 12px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.05em; text-transform: uppercase;
  text-align: center;
}
@media (max-width: 380px) {
  .payment-option { padding: 8px 4px; min-height: 52px; }
  .payment-option-icon { width: 24px; height: 24px; }
  .payment-option-icon svg { width: 22px; height: 22px; }
  .payment-option-title { font-size: 10.5px; }
}
.payment-soon {
  margin-top: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.68);
  font-size: 12px; font-weight: 650; line-height: 1.35; text-align: center;
}

/* SETTINGS-блок карточки удалён 09.06.2026 — встроенный SettingsMode
   (формы кошельков) убран. Адреса вывода редактируются только в
   Профиль → Кошельки (секция .wallets-). Орфаны .settings-form, .settings-currency,
   .settings-token, .settings-wallet, .settings-default-row удалены. См. RULES §27/§31. */

/* ============================================================
   INVOICE-CARD (под основной плашкой после Submit)
   ============================================================ */
.invoice-card {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 14px; border-radius: 28px;
  padding: 13px 14px 13px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.115), rgba(255,255,255,0.035) 44%, rgba(255,255,255,0.02)),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 24px 52px rgba(0,0,0,0.30);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.invoice-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(72% 62% at 88% 0%, rgba(184,164,239,0.20), transparent 72%),
    radial-gradient(78% 62% at 2% 100%, rgba(110,231,183,0.11), transparent 78%);
  z-index: -1;
}
.invoice-card > * { position: relative; z-index: 1; }

.invoice-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 1px 2px 0;
}
.invoice-kicker {
  color: #ff7a2c; font-size: 15px; font-weight: 750; line-height: 1.1;
  letter-spacing: 0.01em; white-space: nowrap;
}
.invoice-net-chip {
  flex: 0 0 auto;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.82);
  background: rgba(10, 6, 20, 0.42);
  border: 1px solid rgba(255,255,255,0.10);
}
.invoice-net-chip.is-expired {
  color: #ffb27a;
  background: rgba(255,123,42,0.12);
  border-color: rgba(255,123,42,0.30);
}
/* Бейдж-таймер: «Адрес активен · MM:SS», зелёный; на последних 5 мин — янтарный */
.invoice-net-chip.is-active {
  display: inline-flex; align-items: center; gap: 6px;
  color: #5dff8f;
  background: rgba(46, 161, 123, 0.16);
  border-color: rgba(93, 255, 143, 0.30);
  font-variant-numeric: tabular-nums;
}
.invoice-net-chip.is-active.is-low {
  color: #ffb27a;
  background: rgba(255,123,42,0.12);
  border-color: rgba(255,178,122,0.32);
}
.invoice-chip-dot {
  width: 7px; height: 7px; flex: 0 0 auto; border-radius: 999px;
  background: currentColor;
  animation: invoiceChipPulse 1.8s ease-out infinite;
}
@keyframes invoiceChipPulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Тело инвойса: текст-предупреждение слева, QR прижат к правому краю */
.invoice-body {
  width: 100%; margin-top: 14px;
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
}
.invoice-body-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.invoice-body-title { color: #fff; font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.invoice-body-sub {
  color: rgba(255,255,255,0.56);
  font-size: 12px; font-weight: 500; line-height: 1.45; text-wrap: pretty;
}

/* Крупный QR по центру — реальный код из адреса, без логотипа */
.invoice-qr-stage {
  display: block; margin: 14px auto 4px;
  width: 192px; max-width: 74%; aspect-ratio: 1;
  padding: 12px; border-radius: 18px;
  background: #fff; border: 0;
  box-shadow: 0 16px 38px rgba(0,0,0,0.34), inset 0 2px 0 rgba(255,255,255,0.5);
  cursor: zoom-in;
  transition: transform 0.16s ease, box-shadow 0.18s ease;
}
.invoice-qr-stage:hover { transform: translateY(-1px); box-shadow: 0 20px 44px rgba(0,0,0,0.38); }
.invoice-qr-stage:active { transform: scale(0.98); }
/* В двухколоночном теле QR не центрируется, а стоит справа компактным блоком */
.invoice-body .invoice-qr-stage {
  margin: 0; flex: 0 0 auto;
  width: 132px; max-width: 44%;
  padding: 10px; border-radius: 16px;
}
.invoice-qr-stage svg { width: 100%; height: 100%; display: block; }

/* Состояние «прошло время» — TTL 60 минут истёк */
.invoice-expired {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px 14px 16px; gap: 9px;
}
.invoice-expired-icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 999px;
  color: #ffb27a;
  background: rgba(255,123,42,0.12);
  border: 1px solid rgba(255,123,42,0.26);
}
.invoice-expired-icon svg { width: 25px; height: 25px; }
.invoice-expired-title { color: #fff; font-size: 16px; font-weight: 760; line-height: 1.2; }
.invoice-expired-text {
  max-width: 284px; color: rgba(255,255,255,0.56);
  font-size: 12.5px; font-weight: 500; line-height: 1.5; text-wrap: pretty;
}
.invoice-expired-btn {
  margin-top: 7px;
  padding: 11px 22px; border-radius: 13px; border: 0; cursor: pointer;
  color: #fff; font-size: 13.5px; font-weight: 700;
  background: linear-gradient(135deg, #7b6cf0, #5a49d6);
  box-shadow: 0 10px 24px rgba(90,73,214,0.34);
  transition: transform 0.14s ease, box-shadow 0.16s ease;
}
.invoice-expired-btn:active { transform: scale(0.97); }

/* Индикатор ожидания перевода (backend-ready слот вместо хардкода confirmation) */
.invoice-wait-dot {
  position: relative;
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 999px;
  background: radial-gradient(circle at center, #09091d 54%, transparent 56%);
}
.invoice-wait-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #58d98e;
  box-shadow: 0 0 0 0 rgba(88,217,142,0.55);
  animation: invoiceWaitPulse 1.8s ease-out infinite;
}
@keyframes invoiceWaitPulse {
  0%   { box-shadow: 0 0 0 0 rgba(88,217,142,0.5); }
  70%  { box-shadow: 0 0 0 11px rgba(88,217,142,0); }
  100% { box-shadow: 0 0 0 0 rgba(88,217,142,0); }
}

.invoice-qr-zoom {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  background: rgba(4, 2, 10, 0.74);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 1; transition: opacity 0.18s ease;
}
.invoice-qr-zoom-button {
  position: relative;
  width: min(72vw, 318px);
  max-width: calc(100vw - 56px);
  aspect-ratio: 1;
  padding: 18px; border-radius: 28px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0,0,0,0.46);
  cursor: zoom-out; border: 0;
  opacity: 1; transform: scale(1);
}
.invoice-qr-zoom-button > svg { width: 100%; height: 100%; display: block; }

.invoice-address { width: 100%; padding-left: 2px; margin-top: 16px; }
.invoice-address-label {
  color: rgba(255,255,255,0.54);
  font-size: 11.5px; font-weight: 760; line-height: 1.1;
}
.invoice-address-row {
  width: 100%; margin-top: 7px;
  display: flex; align-items: center; gap: 8px;
}
.invoice-address-field {
  min-height: 46px; display: flex; align-items: center;
  flex: 1; min-width: 0;
  padding: 8px 13px; border-radius: 12px;
  background: rgba(10, 6, 20, 0.48);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  -webkit-appearance: none; appearance: none;
  transition: background 0.15s ease, transform 0.12s ease;
}
.invoice-address-field:hover { background: rgba(20, 12, 36, 0.6); }
.invoice-address-field:active { transform: scale(0.99); }
.invoice-address-text {
  min-width: 0; flex: 1; overflow: hidden;
  color: rgba(255,255,255,0.96);
  font-size: 14.5px; font-weight: 650; line-height: 1.2; letter-spacing: 0.01em;
  text-overflow: ellipsis; white-space: nowrap;
}
.invoice-copy {
  width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto;
  color: rgba(255,255,255,0.88);
  border-radius: 12px;
  background: rgba(10, 6, 20, 0.48);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.invoice-copy:hover { background: rgba(20, 12, 36, 0.6); }
.invoice-copy:active { transform: scale(0.94); }
.invoice-copy.is-copied { color: #5dff8f; background: rgba(46,161,123,0.16); border-color: rgba(93,255,143,0.30); }
.invoice-copy svg { width: 21px; height: 21px; }

/* Статус ожидания перевода — отдельной строкой под адресом */
.invoice-wait-row {
  width: 100%; margin-top: 12px;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 14px;
  background: rgba(10, 6, 20, 0.40);
  border: 1px solid rgba(255,255,255,0.07);
}
.invoice-wait-row .invoice-wait-dot { width: 30px; height: 30px; }
.invoice-wait-label { color: #58d98e; font-size: 13.5px; font-weight: 750; line-height: 1.15; }

.invoice-status-grid {
  width: 100%; margin-top: 10px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 14px; overflow: hidden;
  background: rgba(10, 6, 20, 0.40);
  border: 1px solid rgba(255,255,255,0.07);
}
.invoice-status {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; padding: 11px 10px;
}
.invoice-status + .invoice-status { border-left: 1px solid rgba(255,255,255,0.05); }
.invoice-ring {
  --invoice-ring-progress: 300deg;
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 999px;
  background:
    radial-gradient(circle at center, #09091d 54%, transparent 56%),
    conic-gradient(#5aff62 0 var(--invoice-ring-progress), rgba(90,255,98,0.16) var(--invoice-ring-progress) 360deg);
  transition: background 0.35s linear;
}
.invoice-ring.is-confirm {
  background:
    radial-gradient(circle at center, #09091d 54%, transparent 56%),
    conic-gradient(
      #5aff62 0deg 34deg, transparent 34deg 51.43deg,
      #5aff62 51.43deg 85.43deg, transparent 85.43deg 102.86deg,
      #5aff62 102.86deg 136.86deg, transparent 136.86deg 154.29deg,
      rgba(90,255,98,0.20) 154.29deg 188.29deg, transparent 188.29deg 205.72deg,
      rgba(90,255,98,0.20) 205.72deg 239.72deg, transparent 239.72deg 257.15deg,
      rgba(90,255,98,0.20) 257.15deg 291.15deg, transparent 291.15deg 308.58deg,
      rgba(90,255,98,0.20) 308.58deg 342.58deg, transparent 342.58deg 360deg
    );
}
.invoice-status-title { color: #fff; font-size: 12px; font-weight: 800; line-height: 1.15; }
.invoice-status-value {
  margin-top: 3px; color: #5dff66;
  font-size: 12.5px; font-weight: 850; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.invoice-status-value.is-wait {
  color: #58d98e; font-weight: 750;
}
.invoice-status-value.is-solo { margin-top: 0; font-size: 13.5px; }
/* Низкий остаток TTL — таймер становится янтарным */
.invoice-status.is-low .invoice-status-value { color: #ffb27a; }
.invoice-status.is-low .invoice-ring {
  background:
    radial-gradient(circle at center, #09091d 54%, transparent 56%),
    conic-gradient(#ffb27a 0 var(--invoice-ring-progress), rgba(255,178,122,0.16) var(--invoice-ring-progress) 360deg);
}

.invoice-warning {
  position: relative; z-index: 1;
  width: calc(100% - 0px);
  margin: 10px 0 0 0;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,123,42,0.055)),
    rgba(255,123,42,0.055);
  border: 1px solid rgba(255,178,101,0.18);
  color: #ffb05f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 26px rgba(0,0,0,0.15);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.invoice-warning-icon {
  width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 13px;
  background: #ff9f1a; color: #221000;
}
.invoice-warning-icon svg { width: 24px; height: 24px; }
.invoice-warning-text {
  color: #ffb05f; font-size: 11.5px; font-weight: 600; line-height: 1.35;
}

/* invoice-cancel — отмена пополнения / удаление инвойса (тёплый красный) */
.invoice-cancel-link {
  width: 100%; margin-top: 10px;
  display: block; text-align: center;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,92,80,0.07);
  border: 1px solid rgba(255,107,92,0.22);
  color: #ff7e6e; font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.invoice-cancel-link:hover { background: rgba(255,92,80,0.12); }
.invoice-cancel-link:active { transform: scale(0.985); }

.invoice-cancel-confirm {
  width: 100%; margin-top: 10px;
  display: flex; flex-direction: column; gap: 11px;
  padding: 13px 14px; border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,92,80,0.07)),
    rgba(255,92,80,0.07);
  border: 1px solid rgba(255,107,92,0.28);
}
.invoice-cancel-q {
  color: #ff8979; font-size: 13px; font-weight: 760; text-align: center; line-height: 1.2;
}
.invoice-cancel-actions { display: flex; gap: 9px; }
.invoice-cancel-yes,
.invoice-cancel-no {
  flex: 1; padding: 11px 12px; border-radius: 12px;
  font-size: 13px; font-weight: 700; cursor: pointer; border: 0;
  transition: transform 0.12s ease, background 0.15s ease;
}
.invoice-cancel-yes {
  color: #fff;
  background: linear-gradient(135deg, #ff6f61, #ef4636);
  box-shadow: 0 8px 20px rgba(239,70,54,0.30);
}
.invoice-cancel-no {
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.invoice-cancel-yes:active,
.invoice-cancel-no:active { transform: scale(0.96); }

@media (max-width: 360px) {
  .crypto-balance-card { padding: 15px 13px 13px; }
  .cbc-amount-value { font-size: 38px; }
  .crypto-balance-card.cbc-wide-amount .cbc-amount-value { font-size: 34px; }
  .cbc-action-icon { width: 50px; height: 46px; }
  .cbc-action-icon svg { width: 33px; height: 33px; }
  .crypto-balance-card .cbc-home-actions { gap: 7px; }
  .cbc-home-action { height: 52px; gap: 7px; padding: 7px 8px; border-radius: 17px; }
  .cbc-home-action-icon,
  .cbc-home-currency-mark { width: 32px; height: 32px; border-radius: 12px; }
  .cbc-home-currency-mark svg { width: 19px; height: 19px; }
  .cbc-home-action-title { font-size: 12.5px; }
  .cbc-home-action-sub { font-size: 9.7px; }
  .cbc-home-action-arrow svg { width: 16px; height: 16px; }
  .useful-modal-card.cbc-currency-modal { max-width: 334px; border-radius: 24px; }
  .cbc-currency-modal-header { padding: 18px 18px 10px; }
  .cbc-currency-list { gap: 7px; padding: 0 12px 14px; }
  .cbc-currency-option { min-height: 72px; grid-template-columns: 34px minmax(0, 1fr); gap: 7px; padding: 9px 25px 9px 8px; border-radius: 16px; }
  .cbc-currency-option-mark { width: 34px; height: 34px; border-radius: 13px; }
  .cbc-currency-option-mark svg { width: 21px; height: 21px; }
  .cbc-currency-option-code { font-size: 13px; }
  .cbc-currency-option-name { font-size: 9.8px; }
  .invoice-qr-stage { width: 168px; padding: 10px; }
  .invoice-status { gap: 7px; padding: 10px 8px; }
  .invoice-ring { width: 31px; height: 31px; }
  .invoice-status-title { font-size: 10.5px; }
  .invoice-status-value { font-size: 11px; }
}

/* Wallet — заголовок секции истории (после удаления табов) */
.wallet-history-head {
  margin: 22px 20px 8px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.32);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Wallet → вкладка Инвойс: контейнер активного инвойса, ширина = балансу */
.wallet-invoice-stack {
  margin: 18px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wallet-invoice-stack .invoice-card { margin-top: 0; }

/* ============================================================
   WITHDRAW-CARD — компактная заявка на вывод
   Наследует стекло .invoice-card, акцент — холодный фиолет
   (отличие от оранжевого пополнения). Окно отмены 3ч + проверка в сети.
   ============================================================ */
/* Подсказка минимума под формой вывода (SendMode) */
.send-min-hint {
  margin-top: 2px; padding: 0 2px;
  color: rgba(255,255,255,0.46);
  font-size: 11px; font-weight: 560; line-height: 1.4; text-wrap: pretty;
}
.send-min-hint.is-warn { color: #ffb27a; font-weight: 650; }

.withdraw-card::before {
  background:
    radial-gradient(72% 62% at 88% 0%, rgba(150,140,245,0.22), transparent 72%),
    radial-gradient(78% 62% at 2% 100%, rgba(130,169,243,0.12), transparent 78%);
}
.wd-kicker { color: #b3a4f4; }

/* Сумма к выводу */
.wd-amount {
  margin-top: 12px; padding: 11px 13px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(10, 6, 20, 0.40);
  border: 1px solid rgba(255,255,255,0.07);
}
.wd-amount-label {
  color: rgba(255,255,255,0.52);
  font-size: 11px; font-weight: 760; letter-spacing: 0.02em; text-transform: uppercase;
}
.wd-amount-value { display: flex; align-items: baseline; gap: 5px; }
.wd-amount-sign { color: rgba(255,255,255,0.62); font-size: 17px; font-weight: 700; }
.wd-amount-main {
  color: #fff; font-size: 26px; font-weight: 820; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.wd-amount-sub {
  margin-left: 3px; color: rgba(255,255,255,0.50);
  font-size: 12px; font-weight: 650;
}

/* Адрес получателя — неактивное серое поле во всю ширину (без копирования) */
.wd-dest { margin-top: 10px; padding-left: 2px; }
.wd-dest-label { display: block; color: rgba(255,255,255,0.52); font-size: 11.5px; font-weight: 700; }
.wd-dest-field {
  width: 100%; margin-top: 6px;
  display: flex; align-items: center;
  min-height: 44px; padding: 10px 13px; border-radius: 12px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
}
.wd-dest-addr {
  min-width: 0; flex: 1; overflow: hidden;
  color: rgba(255,255,255,0.56);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
  text-overflow: ellipsis; white-space: nowrap;
}

/* Красный бейдж-таймер ЧЧ:ММ:СС с пульсирующим кружком (комм. #12) */
.wd-timer-badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  color: #ff8f8f; font-size: 12.5px; font-weight: 820;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  background: rgba(255,90,90,0.12);
  border: 1px solid rgba(255,90,90,0.30);
}
.wd-timer-dot {
  position: relative; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 999px;
  background: #ff6b6b;
  box-shadow: 0 0 0 0 rgba(255,107,107,0.6);
  animation: wdPulse 1.5s ease-out infinite;
}
@keyframes wdPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,107,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,107,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
}
.wd-timer-badge.is-processing {
  color: rgba(255,255,255,0.62);
  background: rgba(10, 6, 20, 0.42);
  border-color: rgba(255,255,255,0.12);
  font-weight: 700; letter-spacing: 0.01em;
}

/* Заметка состояния «в обработке» (после окна отмены) */
.wd-proc-note {
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  color: rgba(255,255,255,0.50); font-size: 11.5px; font-weight: 560;
  line-height: 1.4; text-align: center; text-wrap: pretty;
  background: rgba(10, 6, 20, 0.34);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Красный спиннер-подтверждение в кнопке отмены (как при покупке) */
.wd-spin {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.30);
  border-top-color: #fff;
  animation: giftSpin 0.7s linear infinite;
}

/* Статус-зона (окно отмены / проверка в сети) */
.wd-zone {
  margin-top: 10px; padding: 11px 12px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(10, 6, 20, 0.40);
  border: 1px solid rgba(255,255,255,0.07);
}
.wd-zone-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.wd-zone-copy { min-width: 0; }
.wd-zone-title { color: #fff; font-size: 12.5px; font-weight: 800; line-height: 1.15; }
.wd-zone-value {
  margin-top: 3px; color: #b3a4f4;
  font-size: 12.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.wd-zone-value.is-muted {
  color: rgba(255,255,255,0.50); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.wd-zone-note {
  color: rgba(255,255,255,0.34); font-size: 10px; font-weight: 560;
  letter-spacing: 0.01em; text-align: center;
}

/* Точка проверки в сети (как invoice-wait-dot, но фиолетовая / зелёная) */
.wd-net-dot {
  position: relative;
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 999px;
  background: radial-gradient(circle at center, #09091d 54%, transparent 56%);
}
.wd-net-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; border-radius: 999px; transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.34);
}
.wd-net-dot.is-checking::after {
  background: #b3a4f4;
  box-shadow: 0 0 0 0 rgba(150,140,245,0.55);
  animation: invoiceWaitPulse 1.4s ease-out infinite;
}
.wd-net-dot.is-found::after {
  background: #58d98e;
  box-shadow: 0 0 0 4px rgba(88,217,142,0.16);
}

/* Кнопки зоны */
.wd-cancel-btn, .wd-check-btn, .wd-complete-btn, .wd-dismiss {
  width: 100%; border: 0; cursor: pointer;
  padding: 11px 16px; border-radius: 12px;
  font-size: 13px; font-weight: 720;
  transition: transform 0.13s ease, background 0.16s ease, opacity 0.16s ease;
}
.wd-cancel-btn:active, .wd-check-btn:active, .wd-complete-btn:active, .wd-dismiss:active { transform: scale(0.98); }
.wd-cancel-btn {
  color: #ff8f8f;
  background: rgba(255,90,90,0.10);
  border: 1px solid rgba(255,90,90,0.24);
}
.wd-cancel-btn:hover { background: rgba(255,90,90,0.16); }
.wd-check-btn {
  color: #cfc6fb;
  background: rgba(150,140,245,0.14);
  border: 1px solid rgba(150,140,245,0.28);
}
.wd-check-btn:hover { background: rgba(150,140,245,0.2); }
.wd-check-btn:disabled { opacity: 0.6; cursor: default; }
.wd-complete-btn {
  color: #06140d;
  background: linear-gradient(135deg, #74e6a0, #3fbf78);
  box-shadow: 0 10px 24px rgba(63,191,120,0.26);
}

/* Подтверждение отмены */
.withdraw-card .wd-cancel-btn,
.withdraw-card .wd-confirm { margin-top: 13px; }
.wd-confirm { display: flex; flex-direction: column; gap: 9px; }
.wd-confirm-q { color: rgba(255,255,255,0.84); font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.wd-confirm-actions { display: flex; gap: 8px; }
.wd-confirm-yes, .wd-confirm-no {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 12px; border-radius: 11px; border: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 720; transition: transform 0.12s ease, opacity 0.15s ease;
}
.wd-confirm-yes:active, .wd-confirm-no:active { transform: scale(0.97); }
.wd-confirm-yes { color: #fff; background: linear-gradient(135deg, #ff6b6b, #e24848); }
.wd-confirm-no { color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); }
.wd-confirm-yes:disabled, .wd-confirm-no:disabled { opacity: 0.6; cursor: default; }

/* Завершённая заявка */
.wd-chip-done { color: #74e6a0 !important; background: rgba(88,217,142,0.12) !important; border-color: rgba(88,217,142,0.30) !important; }
.wd-done {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 14px 8px; gap: 7px;
}
.wd-done-icon {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px;
  color: #74e6a0; background: rgba(88,217,142,0.12); border: 1px solid rgba(88,217,142,0.26);
}
.wd-done-icon svg { width: 24px; height: 24px; }
.wd-done-title { color: #fff; font-size: 15.5px; font-weight: 780; }
.wd-done-sum { color: rgba(255,255,255,0.74); font-size: 13px; font-weight: 650; }
.wd-done-sum span { color: rgba(255,255,255,0.46); }
.wd-txhash {
  margin-top: 2px; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(10, 6, 20, 0.48); border: 1px solid rgba(255,255,255,0.08);
}
.wd-txhash-tag { color: rgba(255,255,255,0.44); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
.wd-txhash code { color: rgba(255,255,255,0.82); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wd-dismiss {
  margin-top: 6px; max-width: 220px;
  color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.wd-dismiss:hover { background: rgba(255,255,255,0.1); }

/* ============================================================
   LOCK / PASSCODE (введено 29.05.2026)
   Экран-замок + настройка пина. Единый визуальный язык онбординга
   (bg-base/spots/grain, акцентный градиент, лого icon-192).
   ============================================================ */
.lock-screen {
  position: absolute; inset: 0;
  color: var(--ink);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch;
  z-index: 60;
}
.lock-screen > .bg-base,
.lock-screen > .bg-spots,
.lock-screen > .bg-grain { position: absolute; inset: 0; }
.lock-screen > .bg-base { z-index: 0; }
.lock-screen > .bg-spots, .lock-screen > .bg-grain { z-index: 1; }

.lock-wrap {
  position: relative; z-index: 2;
  width: 100%; max-width: 440px;
  margin: 0 auto;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(58px + var(--top-safe)) 28px calc(26px + var(--bottom-safe));
}
.lock-top { display: flex; flex-direction: column; align-items: center; text-align: center; }

.lock-logo {
  width: 60px; height: 60px; border-radius: 19px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid; place-items: center;
  overflow: hidden;
  margin-bottom: 18px;
}
.lock-logo img { width: 38px; height: 38px; object-fit: contain; display: block; }

.lock-title {
  font-size: 21px; font-weight: 700; color: #fff;
  letter-spacing: -0.02em;
}
.lock-sub {
  font-size: 13.5px; color: var(--ink-mute); font-weight: 500;
  margin-top: 7px; min-height: 18px;
}
.lock-sub.is-error { color: #f1869f; }

.lock-dots { display: flex; gap: 18px; justify-content: center; margin: 30px 0 6px; }
.lock-dot {
  width: 14px; height: 14px; border-radius: 999px;
  border: 1.6px solid rgba(255,255,255,0.32);
  background: transparent;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.lock-dot.filled {
  background: linear-gradient(135deg, #82A9F3 0%, #C17CE1 100%);
  border-color: transparent;
  transform: scale(1.05);
}
.lock-dots.is-error .lock-dot { border-color: rgba(241,134,159,0.7); }
.lock-dots.is-error .lock-dot.filled { background: #f1869f; }
.lock-dots.shake { animation: lockShake 0.45s cubic-bezier(0.36,0.07,0.19,0.97); }
@keyframes lockShake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-6px); }
  40%,60% { transform: translateX(6px); }
}

.lock-keypad {
  margin-top: auto;
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: 18px 26px;
  justify-content: center;
}
.lock-key {
  width: 72px; height: 72px; border-radius: 999px;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.14s, transform 0.1s, color 0.14s;
}
.lock-key-num {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 29px; font-weight: 500; color: #fff;
  letter-spacing: 0.5px;
}
.lock-key-num:active { background: rgba(255,255,255,0.16); transform: scale(0.93); }
.lock-key-action { background: transparent; color: rgba(255,255,255,0.82); }
.lock-key-action:active { transform: scale(0.9); color: #fff; }
.lock-key-faceid { color: #9fd0ff; }
.lock-key-faceid.busy { animation: lockBioPulse 1s ease-in-out infinite; }
@keyframes lockBioPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.lock-key-empty { background: transparent; pointer-events: none; }

.lock-forgot {
  margin-top: 18px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.42);
}
.lock-forgot:active { color: rgba(255,255,255,0.72); }

/* setup → биометрический шаг */
.lock-bio {
  margin: auto 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px;
}
.lock-bio-icon {
  width: 92px; height: 92px; border-radius: 28px;
  background: rgba(130,169,243,0.10);
  border: 1px solid rgba(130,169,243,0.24);
  display: grid; place-items: center;
  color: #9fd0ff;
  margin-bottom: 14px;
}
.lock-bio .lock-sub { max-width: 280px; }
.lock-bio-actions { width: 100%; max-width: 340px; margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.lock-bio-skip {
  padding: 13px; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.5);
}
.lock-bio-skip:active { color: #fff; }

@media (max-width: 360px) {
  .lock-keypad { grid-template-columns: repeat(3, 64px); gap: 14px 22px; }
  .lock-key { width: 64px; height: 64px; }
  .lock-key-num { font-size: 26px; }
}

/* CLOUD LOADER — анимированный лоадер «облако» (02.06.2026).
   SVG лежит инлайном в разметке (loader.js / CloudLoader), а анимация —
   здесь, обычными @keyframes. Так это работает «как у всех»: разметка в
   компоненте, движение в стилях. Через <img src="*.svg"> НЕ грузить —
   сервер режет анимацию у отдаваемых .svg (см. loader.js). */
.cloud-loader { display: block; width: 100%; height: auto; }
.cloud-loader .flow {
  fill: none;
  stroke: url(#cldG);
  stroke-width: 300;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: cloudFlow 3s ease-in-out infinite;
}
@keyframes cloudFlow {
  0%        { stroke-dashoffset: 100; }
  78%, 88%  { stroke-dashoffset: 0; }
  89%, 100% { stroke-dashoffset: 100; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-loader .flow { animation: none; stroke-dashoffset: 0; }
}

/* Бренд-марка облака на экране входа (onboarding form step).
   max (02.06.2026): логотип НЕ в блоке, в 2 раза больше, заливка белая. */
.onb-auth-cloud { margin-bottom: 14px; }
.onb-auth-cloud rect { fill: #fff; }


/* ════════════════════════════════════════════════════════════════════════
   MEDIAN-TAP — start (игровой сервис проекта; React-страница, 04.06.2026)
   Удаляется целиком (см. чек-лист в шапке pages-median-tap.js):
     • этот блок CSS;
     • файл pages-median-tap.js и его <script>-тег в index.html / index.php;
     • promo-слайд и subpage-узел в app.js / pages-home.js;
     • поля gameConfig/user.points/user.hasEverBoughtContract в data.js;
     • actions addPoints/gameStake/gamePayout в app-state.js;
     • иконка icons/median-tap-mascot.webp.
   Все классы имеют префикс mtap-, чтобы блок можно было снять одним куском
   и быть уверенным, что ничего из общей системы не сломается.
   ════════════════════════════════════════════════════════════════════════ */

/* Median Tap страница: hub-страница использует обычный padding/scroll
   SubPage. Внутри турнирного раннера сетка скейлится сама — выключаем
   только overflow и page-header. */
.page-faq-inner.median-tap-page .page-header { display: none; }
.page-faq-inner.median-tap-page .bottom-space { display: none; }
/* Внутри турнира back-кнопка не нужна (выход — через runner-exit), а
   overflow гасим, чтобы overlay не давал страницу скроллить. */
.page-faq-inner.median-tap-page:has(.mtap-runner) {
  overflow: hidden;
}
.median-tap-page:has(.mtap-runner) .faq-back { display: none; }

/* HUB — вертикальная колонка с обычным скроллом SubPage. */
.mtap-hub {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding:
    6px
    max(14px, env(safe-area-inset-right, 0px))
    calc(env(safe-area-inset-bottom, 0px) + 24px)
    max(14px, env(safe-area-inset-left, 0px));
  color: var(--ink);
}

/* ── Верхний блок «Что это за игра» (стикер слева, текст справа) ── */
/* ── Верхний блок «Что это за игра» — описание на всю ширину,
   как оглавление (комм. Max, 07.06). Стикер уехал в ряд статов. ── */
.mtap-about-top {
  padding: 2px 2px 0;
}
.mtap-about-top-title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.mtap-about-top-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
  text-wrap: pretty;
}

/* ── Ряд статов: стикер (слева) + Победы (справа) ──────────────── */
.mtap-stat-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 12px;
  align-items: center;
}
/* Стикер БЕЗ рамки — крупный маскот «вылезает» в макет (комм. Max, 07.06) */
.mtap-stat-sticker {
  display: grid; place-items: center;
}
.mtap-stat-sticker img {
  width: 124px; height: 124px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(184,164,239,0.35));
  transform: rotate(-4deg);
}
.mtap-stat-card {
  padding: 12px 14px;
  border-radius: var(--r-md, 16px);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 7px;
  min-width: 0;
}
.mtap-stat-card-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mtap-stat-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mtap-stat-card-value span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
}
.mtap-stat-card-bar {
  height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.mtap-stat-card-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--violet), #6ee7b7);
  transition: width .3s ease;
}
.mtap-stat-card-foot {
  font-size: 11px;
  color: var(--ink-mute);
}
.mtap-stat-card-foot-row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.mtap-stat-card-foot-row strong {
  color: var(--ink); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mtap-stat-card-muted { opacity: .8; }

.mtap-stat-card-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}

/* ── Карусель: 3 слайда «выбор режима → правила → старт» ────────── */
.mtap-carousel {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 24px);
  padding: 14px 14px 12px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  display: flex; flex-direction: column; gap: 12px;
}
.mtap-carousel-viewport {
  width: 100%;
  overflow: hidden;
  /* Позволяет картам внутри слайда занять полную ширину viewport'а. */
}
.mtap-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}
.mtap-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  min-height: 220px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 2px 0 2px;
}
.mtap-slide-kicker {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 700;
}

/* Слайд 1: выбор режима — 2 карточки на всю ширину, друг под другом. */
.mtap-mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  flex: 1;
  align-content: center;
}
.mtap-mode-pick {
  position: relative;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 16px);
  padding: 16px 16px;
  color: var(--ink);
  cursor: pointer;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 0;
  transition: background .18s ease, border-color .18s ease, transform .14s ease;
  font: inherit;
}
.mtap-mode-pick-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.mtap-mode-pick:hover:not(:disabled) {
  background: rgba(255,255,255,0.07);
  border-color: rgba(184,164,239,0.30);
}
.mtap-mode-pick:active:not(:disabled) { transform: scale(.985); }
.mtap-mode-pick.is-selected {
  background: rgba(184,164,239,0.10);
  border-color: rgba(184,164,239,0.45);
  box-shadow: 0 0 0 1px rgba(184,164,239,0.30) inset;
}
.mtap-mode-pick.is-locked {
  opacity: .55;
  cursor: not-allowed;
}
.mtap-mode-pick-kicker {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--violet);
  text-transform: uppercase;
}
.mtap-mode-pick-paid .mtap-mode-pick-kicker { color: var(--green, #6ee7b7); }
.mtap-mode-pick-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
.mtap-mode-pick-prize {
  display: inline-flex; align-self: center; flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mtap-mode-pick-paid .mtap-mode-pick-prize {
  background: rgba(110,231,183,0.14);
  color: #6ee7b7;
}
.mtap-mode-pick.is-locked .mtap-mode-pick-prize { display: none; }
.mtap-mode-pick-desc {
  margin-top: 0;
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.4;
  text-wrap: pretty;
}
.mtap-mode-pick-locked {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--ink-mute);
  border: 1px solid var(--line);
}

/* Слайд 2: правила-нумерованный список (растянуты по высоте слайда). */
.mtap-rules-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  counter-reset: mtap-rules;
  flex: 1;
  justify-content: center;
}
.mtap-rules-list li {
  position: relative;
  padding-left: 32px;
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}
.mtap-rules-list li b { color: var(--ink); font-weight: 600; }
.mtap-rules-list li::before {
  counter-increment: mtap-rules;
  content: counter(mtap-rules);
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--violet);
  background: rgba(184,164,239,0.12);
  border: 1px solid rgba(184,164,239,0.30);
}

/* Слайд 3: чипы ставок + банк + CTA. Ставки — колонкой слева,
   банк — справа. */
.mtap-paid-layout {
  display: grid;
  grid-template-columns: minmax(92px, 0.85fr) 1.15fr;
  gap: 10px;
  align-items: stretch;
}
.mtap-stake-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.mtap-stake-chip {
  height: 40px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--ink-mute);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--r-md, 14px);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  font-variant-numeric: tabular-nums;
}
.mtap-stake-chip:hover { background: rgba(255,255,255,0.08); }
.mtap-stake-chip:active { transform: scale(.98); }
.mtap-stake-chip.is-active {
  background: var(--ink);
  color: #0a0a14;
  border-color: var(--ink);
}
.mtap-bank-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  border-radius: var(--r-md, 16px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.mtap-bank-row {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--ink-mute); font-size: 13px;
}
.mtap-bank-row strong {
  color: var(--ink); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.mtap-bank-payout strong { color: var(--green, #6ee7b7); font-size: 17px; }
.mtap-bank-fee strong { color: var(--ink-mute); font-weight: 600; }

.mtap-free-recap {
  padding: 12px 14px;
  border-radius: var(--r-md, 16px);
  background: rgba(184,164,239,0.08);
  border: 1px solid rgba(184,164,239,0.20);
  display: flex; flex-direction: column; gap: 6px;
}
.mtap-free-recap-prize {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.mtap-free-recap-prize b { color: var(--violet); }
.mtap-free-recap-desc {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.mtap-free-recap-empty {
  background: rgba(255,255,255,0.03);
  border-color: var(--line);
  color: var(--ink-mute);
  font-size: 12.5px;
  text-align: center;
  padding: 16px 14px;
}

/* CTA-кнопка старта (общая для free/paid и в overlay-турнире — см. ниже). */
.mtap-cta {
  height: 50px;
  border-radius: var(--r-md, 16px);
  border: 0;
  background: var(--ink);
  color: #0a0a14;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter .18s ease, transform .12s ease;
  font-variant-numeric: tabular-nums;
}
.mtap-cta:hover { filter: brightness(.95); }
.mtap-cta:active { transform: scale(.985); }
.mtap-cta.is-locked,
.mtap-cta:disabled {
  background: rgba(255,255,255,0.06);
  color: var(--ink-mute);
  cursor: not-allowed;
}

/* Предупреждение о дневном лимите проигрыша — оранжевая окантовка.
   Стоит в правой колонке paid-layout ПОД банк-карточкой (комм. Max, 07.06):
   слева колонка ставок (4 шт), справа банк + это предупреждение. Без иконки. */
.mtap-paid-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.mtap-loss-warn {
  padding: 12px 14px;
  border-radius: var(--r-md, 16px);
  background: rgba(245,158,66,0.08);
  border: 1px solid rgba(245,158,66,0.45);
}
.mtap-loss-warn-title {
  color: #f5a142;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
}
.mtap-loss-warn-desc {
  color: var(--ink-mute);
  font-size: 11.5px;
  line-height: 1.4;
}
.mtap-loss-warn-desc b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Контролы карусели — точки + стрелки с текстовыми метками. */
.mtap-carousel-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
}
.mtap-carousel-arrow {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: background .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.mtap-carousel-arrow-icon { font-size: 15px; line-height: 1; }
.mtap-carousel-arrow-label { font-size: 13px; font-weight: 600; }
.mtap-carousel-arrow:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.mtap-carousel-arrow:disabled { opacity: .35; cursor: not-allowed; }
.mtap-carousel-arrow.is-hidden { visibility: hidden; pointer-events: none; }
/* На последнем шаге место «Дальше» занимает основная кнопка старта.
   Акцентная когда активна; подсвеченный контур — когда недоступна. */
.mtap-carousel-cta {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 0;
  background: var(--green, #6ee7b7);
  color: #08231a;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: filter .18s ease, transform .12s ease;
  box-shadow: 0 6px 18px rgba(110,231,183,0.28);
}
.mtap-carousel-cta:hover:not(:disabled) { filter: brightness(.95); }
.mtap-carousel-cta:active:not(:disabled) { transform: scale(.985); }
.mtap-carousel-cta.is-locked,
.mtap-carousel-cta:disabled {
  background: rgba(110,231,183,0.14);
  color: var(--green, #6ee7b7);
  box-shadow: inset 0 0 0 1px rgba(110,231,183,0.45);
  cursor: not-allowed;
}
.mtap-carousel-dots {
  display: flex; gap: 6px;
}
.mtap-carousel-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 0; padding: 0;
  cursor: pointer;
  transition: background .15s ease, width .15s ease;
}
.mtap-carousel-dot.is-active {
  width: 18px;
  border-radius: 999px;
  background: var(--violet);
}

/* Нижний линк в FAQ — стиль cpromo-block (как «Что такое контракты?»). */
/* Нижний линк в FAQ — зелёный оттенок как у промо майнинг-пула
   (палитра .promo-green, комм. Max 07.06). */
.mtap-faq-link {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px 16px 18px;
  border-radius: 22px;
  background:
    linear-gradient(0deg, rgba(110,231,183,0.07), rgba(110,231,183,0.07)),
    rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(110,231,183,0.20);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .18s ease;
  -webkit-mask-image: -webkit-radial-gradient(white,black);
}
.mtap-faq-link:hover {
  background:
    linear-gradient(0deg, rgba(110,231,183,0.11), rgba(110,231,183,0.11)),
    rgba(255,255,255,0.05);
}
.mtap-faq-link-blob {
  position: absolute; inset: -30% 48% -30% auto; width: 55%; height: 140%;
  filter: blur(28px); opacity: 0.40; pointer-events: none;
  background: radial-gradient(50% 70% at 60% 50%, #6ee7b7 0%, transparent 70%);
}
.mtap-faq-link-icon {
  flex-shrink: 0; position: relative; z-index: 2;
  width: 42px; height: 42px; border-radius: 14px;
  background: rgba(110,231,183,0.14); border: 1px solid rgba(110,231,183,0.24);
  display: grid; place-items: center; color: #93f0cd;
}
.mtap-faq-link-body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mtap-faq-link-title {
  font-size: 14px; font-weight: 600; color: #fff;
}
.mtap-faq-link-sub {
  font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; text-wrap: pretty;
}
.mtap-faq-link-arrow {
  flex-shrink: 0; position: relative; z-index: 2;
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: var(--ink-mute);
  display: grid; place-items: center;
}

/* ── Runner overlay (турнир) ──────────────────────────────────────
   Полноэкранный слой поверх hub'а внутри SubPage. Layout копирует
   старый .mtap-app: HUD/статус/тап-кнопка/соперники. */
.mtap-runner {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #04010a;
  display: flex;
  overflow: hidden;
}
/* Фон раннера = фон проекта (bg-base / bg-spots / bg-grain),
   плюс лёгкое фиолетовое свечение сверху для «драйва». */
.mtap-runner > .bg-base,
.mtap-runner > .bg-spots,
.mtap-runner > .bg-grain { position: absolute; inset: 0; z-index: 0; }
.mtap-runner::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(140% 80% at 50% -10%, rgba(184,164,239,0.16), transparent 60%);
  pointer-events: none;
}
.mtap-runner-inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + 24px)
    max(16px, env(safe-area-inset-right, 0px))
    calc(env(safe-area-inset-bottom, 0px) + 20px)
    max(16px, env(safe-area-inset-left, 0px));
  display: grid;
  /* Порядок DOM в runner: HUD / status / opponents / button.
     1fr последним — кнопка доминирует и центрируется
     в оставшемся пространстве под оппонентами. */
  grid-template-rows: auto auto auto 1fr;
  gap: 14px;
  overflow: hidden;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.mtap-runner-exit {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: max(14px, env(safe-area-inset-right, 0px));
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-hi, rgba(255,255,255,0.06));
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 5;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.mtap-runner-exit:hover { background: var(--glass-hi); filter: brightness(1.1); }

/* Карточка итога раунда (round-result) — без угловых акцентов wm/lose,
   только базовая mtap-card. */
.mtap-round-card .mtap-result-grid { margin-top: 10px; }

/* Карточка очереди матчмейкинга. */
.mtap-queue-card { width: min(92vw, 430px); }
/* Одиночная кнопка отмены — на всю ширину модалки, а не в бок. */
.mtap-queue-card .mtap-btn-row { grid-template-columns: 1fr; }
.mtap-queue-bar {
  height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); overflow: hidden;
  margin: 14px 0 6px;
}
.mtap-queue-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--violet), #6ee7b7);
  transition: width .2s linear;
}
.mtap-queue-meta {
  display: flex; justify-content: space-between;
  color: var(--ink-mute); font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Корневой контейнер игры (legacy, MT-F1): больше не используется в hub-mode,
   но сохраняем класс на случай старых ссылок. Стили совпадают с runner-inner. */
.mtap-app {
  position: absolute;
  inset: 0;
  padding:
    calc(env(safe-area-inset-top, 0px) + 64px)
    max(16px, env(safe-area-inset-right, 0px))
    calc(env(safe-area-inset-bottom, 0px) + 20px)
    max(16px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  overflow: hidden;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* HUD: 3 колонки — игроки / таймер / баланс-очки. */
.mtap-hud {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(60px, 16vw, 76px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.mtap-pill {
  min-width: 0;
  height: clamp(42px, 6.4vh, 52px);
  padding: 0 clamp(12px, 3vw, 18px);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  color: var(--ink-mute);
  font-size: clamp(12px, 3vw, 15px);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.mtap-pill-left { justify-content: flex-start; }
.mtap-pill-right { justify-content: center; }
.mtap-pill b { color: var(--ink); font-weight: 600; }
.mtap-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(110,231,183,0.55);
  flex: 0 0 auto;
}

/* Правая ячейка HUD: компактная плашка «Ставка / STARTER» + круглая
   mute-кнопка справа. Иконка денег убрана — освобождаем место. */
.mtap-hud-right {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.mtap-hud-right .mtap-pill-compact {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 12px;
  font-size: clamp(12px, 2.8vw, 14px);
}
.mtap-sound-btn {
  flex: 0 0 auto;
  height: clamp(42px, 6.4vh, 52px);
  width: clamp(42px, 6.4vh, 52px);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.12s ease, opacity 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mtap-sound-btn:active { transform: scale(0.94); }
.mtap-sound-btn.is-muted { color: var(--ink-mute); opacity: 0.55; }
.mtap-sound-btn svg { display: block; }

/* Таймер: квадратный glass-блок с фиолетовым inner-glow. */
.mtap-timer {
  position: relative;
  width: clamp(60px, 16vw, 76px);
  height: clamp(60px, 16vw, 76px);
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  isolation: isolate;
}
.mtap-timer::before {
  content: "";
  position: absolute;
  inset: -30% -30% auto -30%;
  height: 160%;
  background: radial-gradient(50% 50% at 50% 60%, rgba(184,164,239,0.45) 0%, transparent 70%);
  filter: blur(8px);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}

/* Статус-строка между HUD и тап-кнопкой. */
.mtap-status { text-align: center; min-height: 58px; }
.mtap-status div {
  color: var(--violet);
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: clamp(11px, 2.8vw, 13px);
  text-transform: uppercase;
}
.mtap-status p {
  margin: 8px 0 0;
  color: var(--ink-mute);
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Тап-кнопка: базовая палитра — системный фиолет. State-цвета
   (count-red/yellow/green, hot, burning) сохранены как игровой сигнал. */
.mtap-tap-btn {
  align-self: center;
  justify-self: center;
  position: relative;
  width: min(66vw, 360px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, rgba(184,164,239,0.28), rgba(22,16,32,0.96) 46%, rgba(9,6,18,0.99));
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 30px 90px rgba(0,0,0,0.42);
  transform: translateZ(0);
  transition: filter .22s ease, box-shadow .22s ease, background .22s ease;
  font-family: inherit;
  padding: 0;
}
.mtap-tap-btn:active { transform: scale(.985); }
.mtap-tap-btn.locked { opacity: .96; }
.mtap-tap-btn.count-red {
  background: radial-gradient(circle, rgba(255,60,60,.55), rgba(42,14,22,.98) 58%);
  box-shadow: 0 0 70px rgba(255,40,40,.34);
}
.mtap-tap-btn.count-yellow {
  background: radial-gradient(circle, rgba(255,205,44,.58), rgba(45,35,10,.98) 58%);
  box-shadow: 0 0 70px rgba(255,205,44,.32);
}
.mtap-tap-btn.count-green {
  background: radial-gradient(circle, rgba(37,242,128,.58), rgba(9,38,28,.98) 58%);
  box-shadow: 0 0 80px rgba(37,242,128,.38);
}
.mtap-tap-btn.hot {
  background: radial-gradient(circle at 50% 44%, rgba(255,88,54,.38), rgba(38,17,21,.95) 45%, rgba(9,12,22,.98));
  box-shadow: inset 0 0 0 2px rgba(255,125,80,.08), 0 0 70px rgba(255,82,44,.24), 0 30px 90px rgba(0,0,0,.36);
  animation: mtapHeatShake .28s linear infinite;
}
.mtap-tap-btn.burning {
  filter: saturate(1.25);
  animation: mtapHeatShake .18s linear infinite;
}
.mtap-tap-glow {
  position: absolute;
  width: 46%; height: 46%;
  border-radius: 50%;
  background: rgba(184,164,239,0.38);
  filter: blur(24px);
  animation: mtapBreathe 2.4s ease-in-out infinite;
}
.mtap-tap-btn.hot .mtap-tap-glow,
.mtap-tap-btn.burning .mtap-tap-glow { background: rgba(255,103,70,.42); }
.mtap-heat-ring {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(184,164,239,0.32);
  opacity: .3;
  animation: mtapSpin 4s linear infinite;
}
.mtap-tap-btn.hot .mtap-heat-ring { border-top-color: rgba(255,96,54,.75); opacity: .75; animation-duration: 1.15s; }
.mtap-tap-btn.burning .mtap-heat-ring { border-top-color: rgba(255,40,40,.95); opacity: 1; animation-duration: .55s; }
.mtap-tap-title {
  position: relative;
  font-size: clamp(46px, 12vw, 72px);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.mtap-tap-sub {
  position: relative;
  margin-top: 8px;
  color: var(--ink-quiet);
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mtap-tap-count {
  position: relative;
  margin-top: 18px;
  font-size: clamp(64px, 17vw, 105px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.mtap-particles { position: absolute; inset: 0; pointer-events: none; }
.mtap-float-plus {
  position: absolute;
  left: 50%;
  top: 44%;
  pointer-events: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 28px;
  text-shadow: 0 0 18px rgba(184,164,239,0.9);
  animation: mtapFloatUp .82s ease-out forwards;
}
.mtap-tap-ripple {
  position: absolute;
  left: 50%; top: 50%;
  width: 42%; aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(184,164,239,0.55);
  transform: translate(-50%, -50%) scale(.28);
  pointer-events: none;
}
.mtap-tap-ripple { animation: mtapRipple .6s ease-out forwards; }
.mtap-tap-btn.hot .mtap-tap-ripple,
.mtap-tap-btn.burning .mtap-tap-ripple { border-color: rgba(255,103,70,0.6); }

/* Карточки соперников снизу + прогресс-бар. */
.mtap-opponents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mtap-opponent {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  padding: 14px 16px;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.mtap-opponent strong {
  display: block;
  color: var(--ink-mute);
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.mtap-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  margin-top: 14px;
  overflow: hidden;
}
.mtap-bar i {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--peri));
  box-shadow: 0 0 12px rgba(184,164,239,0.45);
  transition: width .22s ease;
}

/* Модалки правил и результата. Backdrop по всей SubPage. */
.mtap-modal {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
  background: rgba(4,1,10,0.7);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.mtap-modal.show { display: flex; }
.mtap-card {
  position: relative;
  width: min(92vw, 430px);
  border-radius: var(--r-xl);
  padding: 28px 26px;
  text-align: center;
  background: rgba(16,10,24,0.78);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 100px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10);
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}
.mtap-card::before {
  content: "";
  position: absolute;
  /* inset:0 + border-radius:inherit — иначе при блюре blob выходил за
     скруглённые углы и давал светлые «крылья» на углах модалки. */
  inset: 0;
  border-radius: inherit;
  filter: blur(60px);
  opacity: 0.32;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 20% 20%, #c8a4ff 0%, transparent 70%),
    radial-gradient(60% 50% at 80% 30%, #f5a7d9 0%, transparent 70%),
    radial-gradient(60% 60% at 50% 95%, #b7ded8 0%, transparent 75%);
  z-index: 0;
}
.mtap-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* border-radius:inherit, чтобы шумовая текстура с mix-blend-mode не
     торчала прямоугольником по углам — это и были артефакты. */
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.mtap-card > * { position: relative; z-index: 2; }

/* Result-варианты blob: green/red акцент сверху (тоже inset:0 + inherit,
   см. .mtap-card::before — иначе угловые артефакты). */
.mtap-result-card.win::before {
  background:
    radial-gradient(70% 60% at 50% 10%, rgba(110,231,183,0.36) 0%, transparent 65%),
    radial-gradient(60% 50% at 20% 40%, #c8a4ff 0%, transparent 70%),
    radial-gradient(60% 50% at 80% 60%, #f5a7d9 0%, transparent 70%);
  opacity: 0.42;
}
.mtap-result-card.lose::before {
  background:
    radial-gradient(70% 60% at 50% 10%, rgba(255,128,128,0.32) 0%, transparent 65%),
    radial-gradient(60% 50% at 20% 40%, #c8a4ff 0%, transparent 70%),
    radial-gradient(60% 50% at 80% 60%, #b7ded8 0%, transparent 70%);
  opacity: 0.42;
}
.mtap-sticker {
  width: 86px; height: 86px;
  margin: 0 auto 14px;
  border-radius: 24px;
  display: grid; place-items: center;
  font-size: 46px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 55px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.12);
  animation: mtapStickerPop .72s cubic-bezier(.18,1.4,.28,1);
}
.mtap-card-kicker {
  color: var(--violet);
  font-weight: 700;
  letter-spacing: 0.24em;
  font-size: 11px;
  text-transform: uppercase;
}
.mtap-card h1 {
  margin: 10px 0 12px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mtap-card p {
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
  margin: 0 0 6px;
}
.mtap-card p b { color: var(--ink); font-weight: 600; }

.mtap-result-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin: 16px 0;
}
.mtap-result-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 16px 8px 14px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mtap-result-row strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.mtap-result-place { font-size: 10.5px; color: var(--ink-mute); }
.mtap-result-continue { width: 100%; margin-top: 4px; }
.mtap-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: #180820;
  background: var(--ink);
  border-radius: 999px;
  padding: 4px 8px;
  text-transform: uppercase;
  max-width: 100%;
  white-space: nowrap;
}
.mtap-result-row.win {
  border-color: rgba(110,231,183,0.6);
  background: linear-gradient(180deg, rgba(110,231,183,0.20), rgba(110,231,183,0.05));
  box-shadow: 0 0 30px rgba(110,231,183,0.30), inset 0 0 0 1px rgba(110,231,183,0.30);
  transform: translateY(-4px) scale(1.05);
  animation: mtapWinnerPulse 1.5s ease-in-out infinite;
}
.mtap-result-row.win strong { color: var(--green, #6ee7b7); }
.mtap-result-crown {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
  color: #0a1d14;
  background: var(--green, #6ee7b7);
  box-shadow: 0 4px 14px rgba(110,231,183,0.5);
  z-index: 3;
}
.mtap-result-row.you .mtap-badge { background: var(--violet); color: #180820; }
.mtap-result-row.win.you .mtap-badge,
.mtap-result-row.middle .mtap-badge { background: var(--green); color: #0a1d14; }
@keyframes mtapWinnerPulse {
  0%, 100% { box-shadow: 0 0 26px rgba(110,231,183,0.22), inset 0 0 0 1px rgba(110,231,183,0.30); }
  50% { box-shadow: 0 0 40px rgba(110,231,183,0.42), inset 0 0 0 1px rgba(110,231,183,0.45); }
}

/* Кольцевой 10-секундный отсчёт в карточке итога раунда (без кнопки). */
.mtap-result-timer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 16px;
}
.mtap-rt-wrap { position: relative; width: 48px; height: 48px; }
.mtap-rt-svg { display: block; }
.mtap-rt-track { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 4; }
.mtap-rt-prog {
  fill: none; stroke: var(--violet); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 131.95;
  animation: mtapRtDeplete 10s linear forwards;
}
.mtap-rt-num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mtap-rt-cap {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
@keyframes mtapRtDeplete { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 131.95; } }

/* Драйв в карточках итога: вход победы/проигрыша + акцентный blob. */
.mtap-round-card.win, .mtap-result-card.win { animation: mtapResultWin .6s cubic-bezier(.18,1.3,.3,1); }
.mtap-round-card.lose, .mtap-result-card.lose { animation: mtapResultLose .55s ease; }
.mtap-round-card.win::before {
  background:
    radial-gradient(70% 60% at 50% 8%, rgba(110,231,183,0.40) 0%, transparent 62%),
    radial-gradient(60% 50% at 20% 40%, #c8a4ff 0%, transparent 70%),
    radial-gradient(60% 50% at 80% 60%, #f5a7d9 0%, transparent 70%);
  opacity: 0.42;
}
.mtap-round-card.lose::before {
  background:
    radial-gradient(70% 60% at 50% 8%, rgba(255,128,128,0.34) 0%, transparent 62%),
    radial-gradient(60% 50% at 20% 40%, #c8a4ff 0%, transparent 70%),
    radial-gradient(60% 50% at 80% 60%, #b7ded8 0%, transparent 70%);
  opacity: 0.42;
}
@keyframes mtapResultWin { 0% { transform: scale(.82); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
@keyframes mtapResultLose { 0%,100% { transform: translateX(0); } 15% { transform: translateX(-9px); } 30% { transform: translateX(8px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(4px); } 80% { transform: translateX(-2px); } }

/* Кнопки модалок: пара «ВЫЙТИ» / основная. */
.mtap-btn-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  margin-top: 18px;
}
.mtap-result-card .mtap-btn-row { margin-top: 6px; }
.mtap-btn-primary {
  height: 50px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #180820;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s ease, filter .18s ease;
}
.mtap-btn-primary:hover { filter: brightness(0.95); }
.mtap-btn-primary:active { transform: scale(.985); }
.mtap-btn-secondary {
  height: 50px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit;
  transition: transform .12s ease, background .18s ease;
}
.mtap-btn-secondary:hover { background: var(--glass-hi); }
.mtap-btn-secondary:active { transform: scale(.985); }
.mtap-again { width: 100%; }

/* Конфетти результата. */
.mtap-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.mtap-confetti i {
  position: absolute;
  width: 9px; height: 15px;
  border-radius: 3px;
  top: -20px;
  animation: mtapConfettiFall 1.9s linear forwards;
}
.mtap-confetti.lose i {
  width: 8px; height: 8px;
  border-radius: 50%;
  opacity: .8;
}

/* keyframes — все с префиксом mtap, чтобы не конфликтовать с системными. */
@keyframes mtapBreathe { 0%,100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.18); opacity: .9; } }
@keyframes mtapSpin { to { transform: rotate(360deg); } }
@keyframes mtapHeatShake {
  0%,100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-1px) rotate(-.35deg); }
  75% { transform: translateX(1px) rotate(.35deg); }
}
@keyframes mtapFloatUp {
  0% { transform: translate(-50%, 0) scale(.85) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--mtap-dx, 0px)), -96px) scale(1.35) rotate(var(--mtap-rot, 0deg)); opacity: 0; }
}
@keyframes mtapRipple {
  0% { transform: translate(-50%, -50%) scale(.24); opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}
@keyframes mtapConfettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes mtapStickerPop {
  0% { transform: scale(.2) rotate(-12deg); opacity: 0; }
  70% { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* Узкие экраны — то же поведение, что в оригинале (сужения отступов/кнопки). */
@media (max-width: 390px) {
  .mtap-app { padding-left: 14px; padding-right: 14px; gap: 12px; }
  .mtap-hud { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); gap: 8px; }
  .mtap-timer { width: 70px; height: 70px; border-radius: 24px; font-size: 36px; }
  .mtap-pill { height: 50px; padding: 0 12px; font-size: 14px; gap: 6px; }
  .mtap-dot { width: 9px; height: 9px; }
  .mtap-tap-btn { width: min(64vw, 310px); }
  .mtap-opponent { padding: 14px 13px; border-radius: 22px; }
  .mtap-opponents { gap: 10px; }
}
@media (max-height: 720px) {
  .mtap-app { gap: 9px; }
  .mtap-status { min-height: 48px; }
  .mtap-tap-btn { width: min(68vw, 350px); }
  .mtap-opponent { padding-top: 12px; padding-bottom: 12px; }
}

/* Бейдж NEW для промо-слайда Median Tap (вход на главной). */
.promo-badge-new {
  background: rgba(184,164,239,0.18);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(184,164,239,0.40);
}

/* Баннер серверной ошибки старта/очереди (free_daily_limit, level_too_low, …). */
.mtap-start-error {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,77,77,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,77,77,0.34);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}
.mtap-start-error span { flex: 1; }
.mtap-start-error-x {
  flex: none;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.mtap-start-error-x:active { transform: scale(0.94); }
/* MEDIAN-TAP — end */

/* ═════════════════════════════════════════════════════════════════
   TX DETAILS MODAL — half-screen стеклянная модалка с деталями
   транзакции в Кошельке (введено 06.06.2026 по комментарию max).
   Шелл общий (ModalShell, RULES §12 / §19), здесь только наполнение
   карточки. Префикс .tx-modal-*; иконка переиспользует .tx-icon
   (см. TX-LIST блок выше).
   ════════════════════════════════════════════════════════════════ */
/* Бэкдроп — стандартный .useful-modal-backdrop, такой же как у Apps
   и других модалок (унификация по комментарию max 06.06.2026).
   Предыдущий override (solid #050309) скрывал ступеньку у скруглённых
   углов на десктоп-превью внутри колонки #root — теперь не нужен,
   т.к. артефакт скруглённых углов уже починен через clip-path
   на .useful-modal-card (см. блок USEFUL MODALS выше). */
.tx-modal {
  gap: 14px;
  padding: 4px 16px 22px;
  display: flex;
  flex-direction: column;
}
.tx-modal-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.tx-modal-hero .tx-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  flex-shrink: 0;
}
.tx-modal-hero .tx-icon svg { width: 30px; height: 30px; }
.tx-modal-hero-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tx-modal-hero-amount {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.tx-modal-hero-amount.pos { color: #7eecbf; }
.tx-modal-hero-amount.neg { color: #fff; }
.tx-modal-hero-sub {
  font-size: 12.5px;
  color: var(--ink-mute);
}

.tx-modal-rows {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}
.tx-modal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.tx-modal-row + .tx-modal-row {
  border-top: 1px solid rgba(255,255,255,0.04);
}
.tx-modal-row-key {
  font-size: 13px;
  color: var(--ink-quiet);
  flex-shrink: 0;
}
.tx-modal-row-val {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tx-modal-hash {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.10);
}
.tx-modal-hash-key {
  font-size: 11px;
  color: var(--ink-quiet);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tx-modal-hash-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink);
  word-break: break-all;
  line-height: 1.4;
}
.tx-modal-hash-note {
  font-size: 11.5px;
  color: var(--ink-quiet);
  line-height: 1.45;
}

/* Тап-фидбек по строке истории — даём понять, что блок кликабелен. */
.tx-item { transition: background 0.16s; }
.tx-item:active { background: rgba(255,255,255,0.06); }
/* TX DETAILS MODAL — end */

/* ============================================================
   STATUS OVERLAY (введено 08.06.2026)
   Универсальный блок-оверлей: загрузка / обновление / нет интернета.
   Состояния: loading (облако, белая заливка) / offline (вышка + волны).
   Стекло + шум, без цветовых оттенков; поверх страницы на чёрном
   полупрозрачном фоне. Префиксы .status-* / .tower-*.
   Анимация облака cloudFlow — из CLOUD-блока (выше). Компонент:
   status-overlay.jsx (window.StatusOverlay / StatusBlock).
   ============================================================ */
.status-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* полноэкранный лоадер-гейт (после код-пароля): фон проекта + блок по центру */
.status-gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.status-gate > .bg-base,
.status-gate > .bg-spots,
.status-gate > .bg-grain { position: absolute; inset: 0; }
.status-gate > .bg-base { z-index: 0; }
.status-gate > .bg-spots, .status-gate > .bg-grain { z-index: 1; }
.status-gate > .status-block { position: relative; z-index: 2; }
.status-block {
  position: relative;
  width: 128px; height: 128px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 38%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.07) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(255, 255, 255, 0.06),
    inset 0 0 24px rgba(255, 255, 255, 0.05);
}
/* верхний диагональный блик — «свет на стекле» */
.status-block::before {
  content: ""; position: absolute;
  top: -40%; left: -20%; width: 90%; height: 130%;
  background: linear-gradient(115deg, rgba(255,255,255,0.30), rgba(255,255,255,0) 55%);
  transform: rotate(8deg); filter: blur(4px);
  pointer-events: none; z-index: 3;
}
/* шумовой слой поверх стекла */
.status-block::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.10; mix-blend-mode: overlay;
  pointer-events: none; z-index: 4;
}
/* состояние «информер» (вышка + подпись) — шире и по колонке */
.status-block--info {
  width: 168px; height: auto;
  flex-direction: column; gap: 14px;
  padding: 26px 18px 22px;
}
/* облако */
.status-cloud { position: relative; z-index: 2; display: block; width: 80px; line-height: 0; }
/* заливка облака белым (а не фиолетовым cldG) — выше специфичность, перебивает CLOUD-блок */
.status-block .cloud-loader .flow { stroke: #ffffff; }
/* вышка */
.status-tower { position: relative; z-index: 2; display: block; width: 54px; line-height: 0; }
.status-tower .tower-icon { display: block; width: 100%; height: auto; }
.tower-body { fill: #eef0f4; }
.tower-wave { fill: #eef0f4; opacity: 0; animation: towerWave 2.1s ease-in-out infinite; }
.tower-wave.wave-in  { animation-delay: 0s; }      /* внутренние волны — первыми */
.tower-wave.wave-out { animation-delay: 0.32s; }   /* внешние — следом */
@keyframes towerWave {
  0%        { opacity: 0; }
  16%       { opacity: 1; }
  66%       { opacity: 1; }
  82%, 100% { opacity: 0; }
}
.status-caption {
  position: relative; z-index: 2;
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.82); text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .tower-wave { animation: none; opacity: 1; }
}


/* ── Этап 7 — снижение нагрузки GPU в раннере Median Tap (перегрев телефона) ──
   1) Полноэкранный mix-blend-mode: overlay на .bg-grain заставлял композитор
      пересчитывать ВЕСЬ вьюпорт на каждом кадре анимаций (свечение/спин/частицы) —
      убираем блендинг ВНУТРИ раннера (зерно при opacity .075 визуально почти не меняется).
   2) Тяжёлые блюр-слои (blur 48px у .bg-spots, blur 24px у .mtap-tap-glow) выносим в
      собственный GPU-слой: блюр растеризуется один раз и далее только трансформируется,
      а не пере-растеризуется каждый кадр. Скоупим строго под .mtap-runner. */
.mtap-runner .bg-grain { mix-blend-mode: normal; }
.mtap-runner .bg-spots { transform: translateZ(0); will-change: transform; }
.mtap-runner .mtap-tap-glow { will-change: transform, opacity; }