/* ============================================================
   Components: inset grouped lists, controls, wallet visuals
   ============================================================ */

/* iOS continuous corners live in js/squircle.js (clip-path superellipse
   with Apple's extended 1.528×R blend — CSS corner-shape:squircle stays
   inside the radius box and reads almost like a circle, so it's not used) */

/* ============ inset grouped list (UITableView.insetGrouped) ============ */

.list-section {
  margin: 0 var(--inset-x);
}

.list-section + .list-section {
  margin-top: 24px;
}

.section-header {
  /* iOS 26: sentence case ~15px, not 13px uppercase */
  padding: 0 var(--inset-x) 8px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: var(--section-header);
  text-transform: none;
  letter-spacing: -0.23px;
}

/* content headers for main surfaces (20 bold — unified with settings headers) */
.content-header {
  padding: 26px var(--inset-x) 10px;
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  color: var(--label);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.content-header .header-link,
.section-header .header-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--tint);
  padding: 12px 0;
  margin: -12px 0;
  transition: opacity 0.18s ease-out;
}

.header-link:active,
.header-link.is-pressed {
  opacity: 0.4;
  transition: none;
}

.list-section .content-header {
  padding-left: 0;
  padding-right: 0;
}

/* ============ setup checklist (Telegram Wallet onboarding style) ============ */

.setup-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px var(--inset-x) 0;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  background: var(--bg-section);
  width: calc(100% - var(--inset-x) * 2);
  text-align: left;
  transition: opacity 0.2s ease;
}

.setup-card:active,
.setup-card.is-pressed {
  opacity: 0.6;
}

.setup-ring {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.setup-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.setup-ring .ring-track {
  stroke: var(--fill-3);
}

.setup-ring .ring-progress {
  stroke: var(--tint);
  transition: stroke-dashoffset 0.7s cubic-bezier(0.42, 0, 0.58, 1);
}

.setup-ring .ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--tint);
}

.setup-body {
  flex: 1;
  min-width: 0;
}

.setup-title {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
  color: var(--label);
}

.setup-sub {
  font-size: 14px;
  line-height: 18px;
  color: var(--label-2);
}

/* full checklist screen */
.gauge-wrap {
  display: flex;
  justify-content: center;
  padding: 28px 0 8px;
}

.gauge {
  position: relative;
  width: 148px;
  height: 148px;
}

.gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gauge .ring-track {
  stroke: var(--fill-3);
}

.gauge .ring-progress {
  stroke: var(--tint);
  transition: stroke-dashoffset 0.7s cubic-bezier(0.42, 0, 0.58, 1);
}

.gauge .gauge-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--tint);
}

.setup-heading {
  text-align: center;
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  padding: 8px 32px 4px;
  text-wrap: balance;
}

.step-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.step-icon svg {
  width: 22px;
  height: 22px;
}

/* сплошная заливка системным цветом, без градиента: в списках iOS кружок
   статуса заливается одним цветом, а градиенты живут на крупных иконках */
.step-icon.done {
  background: var(--green);
}

.step-icon.next {
  background: var(--tint);
}

.step-icon.locked {
  background: var(--fill-press);
  color: var(--label-2);
}

.cell.step-row .cell-title.done {
  color: var(--label-2);
}

/* settings: bold section headers (Telegram Wallet style) */
.settings-header {
  padding: 26px var(--inset-x) 12px;
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  color: var(--label);
}

/* onboarding card (add to Home Screen) */
.onboard-card {
  margin: 12px var(--inset-x) 0;
  padding: 18px 18px 4px;
  border-radius: var(--radius-card);
  background: var(--bg-section);
}

.onboard-title {
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
}

.onboard-text {
  margin-top: 4px;
  font-size: 15px;
  line-height: 20px;
  color: var(--label-2);
}

.onboard-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 0;
  font-size: 17px;
  line-height: 22px;
  color: var(--tint);
  position: relative;
  transition: opacity 0.16s ease-out;
}

.onboard-link:active,
.onboard-link.is-pressed {
  opacity: 0.5;
}

.onboard-link + .onboard-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: -18px;
  height: var(--separator-h);
  background: var(--separator);
}

.onboard-links {
  margin-top: 12px;
}

/* nav header icon buttons (eye toggle etc) */
.large-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.icon-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-section);
  color: var(--tint);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.16s ease-out, transform 0.18s var(--ease-out-ios);
}

.icon-btn:active,
.icon-btn.is-pressed {
  opacity: 0.6;
  transform: scale(0.92);
  transition: opacity 0.08s ease-out, transform 0.1s ease-out;
}

.icon-btn svg {
  width: 19px;
  height: 19px;
}

/* asset rows (coin logo + rich anatomy) */
.coin-logo {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.coin-logo.usdt {
  background: radial-gradient(120% 120% at 30% 20%, #4fd6a5 0%, #189e70 100%);
}

.coin-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--bg-section);
}

.tag {
  display: inline-block;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--fill-3);
  color: var(--label-2);
  margin-left: 6px;
  vertical-align: 1px;
}

.cell-amount-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.cell-fiat {
  font-size: 13px;
  line-height: 17px;
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}

.content-header .header-total {
  font-size: 15px;
  font-weight: 500;
  color: var(--label-2);
}

/* gradient tx icons */
.cell-icon.grad-green {
  background: linear-gradient(135deg, #6ce695 0%, #22a94e 100%);
  color: #fff;
}

.cell-icon.grad-blue {
  background: linear-gradient(135deg, #6db5ff 0%, #2470e8 100%);
  color: #fff;
}

.cell-icon.grad-indigo {
  background: linear-gradient(135deg, #8a88ff 0%, #4f4cd8 100%);
  color: #fff;
}

.cell-icon.grad-orange {
  background: linear-gradient(135deg, #ffc46b 0%, #f08a1d 100%);
  color: #fff;
}

.section-footer {
  padding: 7px var(--inset-x) 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--section-header);
  text-transform: none;
}

.list-card {
  background: var(--bg-section);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* no decorative shadows: surfaces separate by color alone (iOS grouped style) */

.cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px; /* UIKit icon-to-label spacing */
  min-height: var(--cell-h);
  padding: 6px var(--inset-x);
  width: 100%;
  text-align: left;
}

.cell::after {
  /* separator, inset from text start; справа тоже с отступом - как в
     inset-grouped списках iOS, там линия не доходит до края карточки */
  content: '';
  position: absolute;
  left: var(--sep-inset, var(--inset-x));
  right: var(--inset-x);
  bottom: 0;
  height: var(--separator-h);
  background: var(--separator);
}

.cell:last-child::after {
  display: none;
}

/* separator starts where the text starts: inset-x + icon width + gap */
.cell.has-icon {
  --sep-inset: 60px; /* 16 + 29 + 15 */
}

.cell.icon-34 {
  --sep-inset: 65px; /* 16 + 34 + 15 */
}

.cell.icon-40 {
  --sep-inset: 71px; /* 16 + 40 + 15 */
}

/* highlight snaps IN fast on touch-down and fades out softly on release */
.cell.pressable:active,
.cell.pressable.is-pressed {
  background: var(--cell-press);
  transition: background 0.08s ease-out;
}

.cell.pressable {
  transition: background 0.18s ease-out;
}

/* 29x29 colored icon square, iOS Settings style */
.cell-icon {
  flex-shrink: 0;
  width: 29px;
  height: 29px;
  border-radius: 7.5px; /* iOS 26: угол плитки чуть полнее, подобрано по профилю угла Apple */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  /* Плитка как в списке Settings iOS 26: у Apple она почти плоская — только
     едва заметный перепад светлоты сверху вниз и тонкая обводка в Overlay.
     Внешней тени и бликов в списке нет (это есть у крупных иконок Home
     Screen, не здесь). Все оттенки строятся из --icon-color через
     oklch(from …): двигается только светлота, тон и насыщенность сохраняются.
     isolation: обводка в режиме наложения смешивается только с телом плитки,
     а не с карточкой под ней. */
  isolation: isolate;
}

/* Форму задаёт статичный UIKit-суперэллипс (тот же pathFor из squircle.js,
   29×29 r6.5) на псевдоэлементах, а не clip-path на самой плитке: clip-path
   срезал бы drop-shadow. Порядок слоёв: ободок → тело → глиф. */
.cell-icon:not(.round):not([style*='border-radius'])::before,
.cell-icon:not(.round):not([style*='border-radius'])::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: path('M11.465 0L17.535 0C20.836 0 22.487 0 23.975 0.491C26.204 1.268 27.732 2.796 28.438 4.736C29 6.513 29 8.164 29 11.465L29 17.535C29 20.836 29 22.487 28.509 23.975C27.732 26.204 26.204 27.732 24.264 28.438C22.487 29 20.836 29 17.535 29L11.465 29C8.164 29 6.513 29 5.025 28.509C2.796 27.732 1.268 26.204 0.562 24.264C0 22.487 0 20.836 0 17.535L0 11.465C0 8.164 0 6.513 0.491 5.025C1.268 2.796 2.796 1.268 4.736 0.562C6.513 0 8.164 0 11.465 0Z');
}

/* обводка по референсу (Figma): stroke Inside только сверху и снизу, белый,
   с горизонтальным градиентом прозрачности 0% - 100% в центре - 0%.
   Кольцо вырезано маской evenodd по суперэллипсу (внешний контур минус
   внутренний со сдвигом 0.5px), затем пересекается с горизонтальным
   градиентом (гаснет к бокам, поэтому на углах сходит на нет) и с
   вертикальным (только верхняя и нижняя стороны, без боковых). */
.cell-icon:not(.round):not([style*='border-radius'])::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.36) 100%);
  -webkit-mask-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 29 29'%3E%3Cpath fill-rule%3D'evenodd' d%3D'M11.465 0L17.535 0C20.836 0 22.487 0 23.975 0.491C26.204 1.268 27.732 2.796 28.438 4.736C29 6.513 29 8.164 29 11.465L29 17.535C29 20.836 29 22.487 28.509 23.975C27.732 26.204 26.204 27.732 24.264 28.438C22.487 29 20.836 29 17.535 29L11.465 29C8.164 29 6.513 29 5.025 28.509C2.796 27.732 1.268 26.204 0.562 24.264C0 22.487 0 20.836 0 17.535L0 11.465C0 8.164 0 6.513 0.491 5.025C1.268 2.796 2.796 1.268 4.736 0.562C6.513 0 8.164 0 11.465 0Z M11.583 0.500L17.417 0.500C20.608 0.500 22.204 0.500 23.643 0.975C25.797 1.726 27.274 3.203 27.957 5.078C28.500 6.796 28.500 8.392 28.500 11.583L28.500 17.417C28.500 20.608 28.500 22.204 28.025 23.643C27.274 25.797 25.797 27.274 23.922 27.957C22.204 28.500 20.608 28.500 17.417 28.500L11.583 28.500C8.392 28.500 6.796 28.500 5.357 28.025C3.203 27.274 1.726 25.797 1.043 23.922C0.500 22.204 0.500 20.608 0.500 17.417L0.500 11.583C0.500 8.392 0.500 6.796 0.975 5.357C1.726 3.203 3.203 1.726 5.078 1.043C6.796 0.500 8.392 0.500 11.583 0.500Z'%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 30%, transparent 40%, transparent 60%, #000 70%, #000 100%);
  mask-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 29 29'%3E%3Cpath fill-rule%3D'evenodd' d%3D'M11.465 0L17.535 0C20.836 0 22.487 0 23.975 0.491C26.204 1.268 27.732 2.796 28.438 4.736C29 6.513 29 8.164 29 11.465L29 17.535C29 20.836 29 22.487 28.509 23.975C27.732 26.204 26.204 27.732 24.264 28.438C22.487 29 20.836 29 17.535 29L11.465 29C8.164 29 6.513 29 5.025 28.509C2.796 27.732 1.268 26.204 0.562 24.264C0 22.487 0 20.836 0 17.535L0 11.465C0 8.164 0 6.513 0.491 5.025C1.268 2.796 2.796 1.268 4.736 0.562C6.513 0 8.164 0 11.465 0Z M11.583 0.500L17.417 0.500C20.608 0.500 22.204 0.500 23.643 0.975C25.797 1.726 27.274 3.203 27.957 5.078C28.500 6.796 28.500 8.392 28.500 11.583L28.500 17.417C28.500 20.608 28.500 22.204 28.025 23.643C27.274 25.797 25.797 27.274 23.922 27.957C22.204 28.500 20.608 28.500 17.417 28.500L11.583 28.500C8.392 28.500 6.796 28.500 5.357 28.025C3.203 27.274 1.726 25.797 1.043 23.922C0.500 22.204 0.500 20.608 0.500 17.417L0.500 11.583C0.500 8.392 0.500 6.796 0.975 5.357C1.726 3.203 3.203 1.726 5.078 1.043C6.796 0.500 8.392 0.500 11.583 0.500Z'%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 30%, transparent 40%, transparent 60%, #000 70%, #000 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect;
}

/* тело плитки. Числа сняты с настоящих плиток Settings iOS 26 (3px/pt):
   перепад тела сверху вниз 4%; кромки — 1 физический пиксель, светлее
   самой плитки: синяя (lum 120) → 177, серая (154) → 224, чёрная (9) → 81.
   То есть это не белый с фиксированной прозрачностью (на чёрной он дал бы
   ~130), а сдвиг светлоты цвета плитки: сверху сильнее, снизу слабее. */
.cell-icon:not(.round):not([style*='border-radius'])::after {
  z-index: 0;
  background-color: var(--icon-color);
  background-image:
    linear-gradient(
      180deg,
      oklch(from var(--icon-color) calc(l + 0.013) c h) 0%,
      oklch(from var(--icon-color) calc(l - 0.013) c h) 100%
    );
}

.cell-icon svg {
  position: relative;
  z-index: 2;
  width: 19px;
  height: 19px;
  /* тень под глифом: в замере у Apple это −3…−4% на 2–4 физических пикселя
     ниже глифа. Значения только целые: WebKit молча не рисует drop-shadow
     с субпиксельным смещением/размытием (0.6px давал ровно ноль на iPhone). */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
}

/* real coin logos (img-based) */
.net-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.coin-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.coin-badge img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

/* round icon (transactions, networks) */
.cell-icon.round {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.cell-icon.round svg {
  width: 19px;
  height: 19px;
}

.cell-icon.round[style*='64px'] svg {
  width: 30px;
  height: 30px;
}

/* способы пополнения: цвет актива как в Telegram Wallet, знак валюты - текстом
   в SF Rounded (тем же, что в поле суммы и в кольце прогресса) */
.cell-icon.round.pay-crypto {
  background: var(--green-vivid);
}

.cell-icon.round.pay-rub {
  background: var(--tint);
}

.cell-icon.round.pay-crypto,
.cell-icon.round.pay-rub {
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  /* оптический центр: у ₽ и $ нижние выносные элементы тянут знак вниз */
  padding-bottom: 1px;
}

.cell-body {
  flex: 1;
  min-width: 0;
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cell-title,
.cell-subtitle {
  display: block;
}

.cell-title {
  font-size: 17px;
  line-height: 22px;
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-subtitle {
  font-size: 15px;
  line-height: 20px;
  color: var(--label-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-subtitle.small {
  font-size: 13px;
  line-height: 18px;
}

.cell-trailing {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--label-2);
  font-size: 17px;
}

.cell-trailing svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.cell-trailing .chevron svg,
.chevron svg {
  width: 9.9px;
  height: 14px;
}

.cell-value {
  color: var(--hint);
  font-size: 17px;
}

/* 9.9 вместо 7.3 по ширине - правый боковой пробел глифа, как у SF Symbols:
   у iOS чернила шеврона кончаются в 18.3pt от края карточки при отступе 16 */
.chevron {
  width: 9.9px;
  height: 14px;
  color: var(--gray3);
  flex-shrink: 0;
}

.cell-amount {
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--label);
  text-align: right;
}

.cell-amount.positive {
  color: var(--green);
}

.cell .destructive {
  color: var(--destructive);
}

.cell-title.centered {
  text-align: center;
  color: var(--tint);
}

/* ============ balance hero (plain, on background) ============ */

.balance-hero {
  padding: 14px var(--inset-x) 2px;
  text-align: center;
}

.balance-caption {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--label-2);
  margin-bottom: 2px;
}

.balance-amount {
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  font-size: 52px;
  line-height: 60px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  color: var(--label);
}

.balance-amount .cur {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--label-2);
  vertical-align: 6px;
  margin-right: 1px;
}

.balance-amount .frac {
  font-size: 28px;
  font-weight: 700;
  color: var(--label-2);
}

/* rolling-digit style refresh when the balance changes */
.balance-amount.roll-in {
  animation: roll-in 0.45s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes roll-in {
  0% {
    opacity: 0.15;
    filter: blur(7px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* news pill under the balance (feed entry: news, stories) */
.news-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 8px 15px;
  border-radius: 100px;
  background: var(--bg-section);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--label);
  transition: opacity 0.16s ease-out, transform 0.18s var(--ease-out-ios);
}

.news-pill:active,
.news-pill.is-pressed {
  opacity: 0.6;
  transform: scale(0.97);
}

.news-pill svg {
  width: 17px;
  height: 17px;
}

.news-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--tint);
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
}

/* news feed cards */
.news-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-small);
  background: var(--bg-section);
}

.news-card + .news-card {
  margin-top: 10px;
}

.news-card .cell-icon {
  flex: none;
}

.news-title {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}

.news-text {
  margin-top: 2px;
  font-size: 14px;
  line-height: 19px;
  color: var(--label-2);
}

.news-date {
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--label-3);
}

/* ============ stories: tile row (news screen) ============ */

.stories-row {
  display: flex;
  gap: 10px;
  padding: 10px var(--inset-x) 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.stories-row::-webkit-scrollbar {
  display: none;
}

/* ring wrapper; radii stay concentric: 24 (tile) + 3 (gap) + 2 (ring) */
.story-tile-wrap {
  flex: none;
  padding: 3px;
  border: 2px solid var(--tint);
  border-radius: 29px;
  transition: opacity 0.16s ease-out, transform 0.18s var(--ease-out-ios);
}

.story-tile-wrap.seen {
  border-color: transparent; /* viewed: no ring at all */
}

.story-tile-wrap:active,
.story-tile-wrap.is-pressed {
  opacity: 0.7;
  transform: scale(0.96);
}

.story-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 116px;
  height: 116px;
  border-radius: 24px;
  padding: 11px;
  text-align: left;
}

.story-tile-emoji {
  font-size: 34px;
  line-height: 40px;
}

.story-tile-title {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #fff;
}

/* ============ stories: fullscreen viewer ============ */

/* open/close/drag transforms are driven inline by the viewer JS
   (zoom out of the tapped tile, finger-following dismissal) */
.story-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  will-change: transform;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.story-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--top-inset) + 14px) 16px calc(var(--safe-bottom) + 24px);
  /* rounds while the card is dragged so shifted edges never look raw;
     clip-path is the rounding primitive that provably PAINTS on iOS
     WKWebView (border-radius computed fine but rendered square there) */
  clip-path: inset(0 round var(--story-radius, 0px));
  transition: clip-path 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.story-bars {
  display: flex;
  gap: 4px;
}

.story-bars i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.story-bars i b {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.story-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.story-app {
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: #fff;
}

.story-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -11px;
  color: #fff;
  opacity: 0.92;
}

.story-close svg {
  width: 22px;
  height: 22px;
}

.story-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 0 8px 48px;
}

/* the outgoing card dims (dark theme) / lightens (light theme) while the
   incoming one slides in over it */
.story-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
}

html[data-theme='light'] .story-veil {
  background: rgba(255, 255, 255, 0.5);
}

.story-content.story-fade {
  animation: story-fade 0.3s ease;
}

@keyframes story-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.story-emoji {
  font-size: 72px;
  line-height: 82px;
}

.story-title {
  font-size: 28px;
  line-height: 34px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
}

.story-text {
  font-size: 17px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.92);
}

.story-cta {
  margin-top: 12px;
  align-self: flex-start;
  padding: 12px 24px;
  border-radius: 100px;
  background: #fff;
  color: #111;
  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
}

.story-cta:active {
  opacity: 0.75;
}

/* ============ action tiles (iOS 26 wallet style) ============ */

.actions-row {
  display: flex;
  gap: 10px;
  padding: 16px var(--inset-x) 8px;
}

.action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 76px;
  padding: 10px 6px;
  border-radius: var(--radius-small);
  background: var(--bg-section);
  color: var(--tint);
  transition: opacity 0.16s ease-out, transform 0.18s var(--ease-out-ios);
}

.action-btn:active,
.action-btn.is-pressed {
  opacity: 0.6;
  transform: scale(0.97);
  transition: opacity 0.08s ease-out, transform 0.1s ease-out;
}

.action-btn .action-circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn .action-circle svg {
  width: 29px;
  height: 29px;
}

.action-btn .action-label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

/* ============ bank card visual (ISO ID-1, 1.586:1) ============ */

/* Revolut-grade matte metal: minimal face, brushed texture, bevel edge, 3D tilt */
.bank-card {
  position: relative;
  aspect-ratio: 1.683; /* пропорция самой картинки: иначе cover срезает бока */
  border-radius: 20px;
  background: #1d1d1d;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

html[data-theme='dark'] .bank-card {
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.9);
}

.bank-card .card-inner {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bank-card .frozen-overlay {
  z-index: 6;
}

/* card face — one black design, artwork carries logo, chip and scheme */
.card-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

/* global chrome shading: dark crown sweep top-right + light pooling that
   glides with the tilt (--mx) — the "parked chrome" reflection */
.card-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 28%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.16) 82%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.16) 100%);
  background-size: 170% 100%, 100% 100%;
  background-position: calc(var(--mx, 50%) * 0.6) 0, 0 0;
  pointer-events: none;
}

/* film grain, barely there */
.card-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* machined silver chip */
.card-chip-metal {
  position: absolute;
  left: 20px;
  top: 72px;
  width: 42px;
  height: 32px;
  border-radius: 6.5px;
  background: linear-gradient(155deg, #f2f3f6 0%, #b9bcc4 38%, #83868e 72%, #c9ccd4 100%);
  box-shadow:
    inset 0 0 0 1px rgba(70, 72, 80, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

.card-chip-metal::before {
  content: '';
  position: absolute;
  inset: 4px 6px;
  border: 1px solid rgba(60, 62, 70, 0.55);
  border-radius: 4px;
  background:
    linear-gradient(rgba(60, 62, 70, 0.55), rgba(60, 62, 70, 0.55)) center / 100% 1px no-repeat,
    linear-gradient(rgba(60, 62, 70, 0.55), rgba(60, 62, 70, 0.55)) 32% center / 1px 100% no-repeat,
    linear-gradient(rgba(60, 62, 70, 0.55), rgba(60, 62, 70, 0.55)) 68% center / 1px 100% no-repeat;
}

.card-brand {
  text-align: right;
}

.card-virtual {
  margin-top: 2px;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* hairline edge light */
.card-edge {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.card-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* bottom row is laser-etched dark on the bright metal (white on graphite) */
.card-num,
.card-brand {
  color: rgba(28, 30, 36, 0.85);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.design-obsidian .card-num,
.design-obsidian .card-brand {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.card-num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 1.2px;
}

.card-num .card-exp {
  font-size: 11px;
  letter-spacing: 0.4px;
  opacity: 0.55;
}

.card-scheme {
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.92;
}

.card-scheme svg {
  height: 100%;
  width: auto;
}

/* frozen card: icy glass veil — desaturation lives in the overlay's backdrop
   filter (a filter on the card itself would break backdrop clipping in Chromium) */
.bank-card .frozen-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(180, 215, 240, 0.34) 0%, rgba(150, 190, 225, 0.26) 100%);
  -webkit-backdrop-filter: blur(5px) saturate(45%);
  backdrop-filter: blur(5px) saturate(45%);
}

/* dark canvas: keep the veil translucent-blue, not near-white */
html[data-theme='dark'] .bank-card .frozen-overlay {
  background: linear-gradient(160deg, rgba(110, 150, 195, 0.22) 0%, rgba(80, 115, 160, 0.18) 100%);
}

.bank-card.frozen .frozen-overlay {
  display: flex;
}

.frozen-overlay svg {
  width: 42px;
  height: 42px;
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
}

/* ============ promo banner ============ */

/* Промо-баннер как у Wallet: градиент, наклонная карта, звезды.
   Макет 1028×281 (r80) снят попиксельно и пересчитан на ширину 361px
   (393 − 2×16): высота 98.4, радиус 28.2, текст 16.6/20.9, карта 172 с
   выносом над верхним краем на 11.
   Масштабируется целиком, как одна картинка: 1cqw = 1% ширины баннера
   (контейнер — .promo-wrap), поэтому на узком экране текст, карта и звезды
   уменьшаются вместе и не наезжают друг на друга. min()/max() держат потолок
   на размерах макета, чтобы на планшете и в браузере баннер не раздувался.
   Первая строка каждого свойства — запасная для движков без cqw. */
.promo-wrap {
  container-type: inline-size;
  margin: 16px var(--inset-x) 0;
}

.promo-banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 98px;
  height: min(98.4px, 27.26cqw);
  padding: 0 0 0 18px;
  padding: 0 0 0 min(18.3px, 5.07cqw);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.promo-banner:active,
.promo-banner.is-pressed {
  opacity: 0.8;
  transform: scale(0.98);
  transition: opacity 0.08s ease-out, transform 0.1s ease-out;
}

.promo-banner .promo-bg {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border-radius: min(28.2px, 7.81cqw);
  background: linear-gradient(90deg, #129cff, #7fd3ff);
}

.promo-banner .promo-body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.promo-banner .promo-title {
  font-size: 16.6px;
  font-size: min(16.6px, 4.6cqw);
  line-height: 20.9px;
  line-height: min(20.9px, 5.79cqw);
  font-weight: 600;
  white-space: nowrap;
}

.promo-banner .promo-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  margin-top: min(6px, 1.66cqw);
  font-size: 16.6px;
  font-size: min(16.6px, 4.6cqw);
  line-height: 20.9px;
  line-height: min(20.9px, 5.79cqw);
  font-weight: 400;
}

.promo-banner .promo-cta svg {
  position: relative;
  top: 2px;
  width: 8px;
  width: min(8px, 2.22cqw);
  height: 13px;
  height: min(13px, 3.6cqw);
  margin-left: 6px;
  margin-left: min(6px, 1.66cqw);
  flex: none;
}

/* PNG 1845×1731 как есть. В макете карта — 172px по ширине, ее верхний угол
   выходит над баннером на 11px. Содержимое начинается на 310/1845 = 0.168
   ширины холста от его верха — на столько и поднимаем карту margin-top */
.promo-banner .promo-card {
  position: absolute;
  right: -4px;
  top: -11px;
  top: max(-11px, -3.05cqw);
  width: 172px;
  width: min(172px, 47.65cqw);
  margin-top: -28.9px;
  margin-top: max(-28.9px, -8.01cqw);
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* звезда — PNG 398×411 с фигурой 140×146 в центре (176.6, 219.4);
   размер элемента = размер звезды × 398/146, смещение по этому центру */
.promo-banner .promo-star {
  position: absolute;
  background: url("../assets/promo-star.png") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.promo-banner .promo-star.s1 {
  width: 42.8px;
  width: min(42.8px, 11.86cqw);
  height: 44.2px;
  height: min(44.2px, 12.24cqw);
  right: 119.5px;
  right: min(119.5px, 33.1cqw);
  top: -7.1px;
  top: max(-7.1px, -1.97cqw);
}

.promo-banner .promo-star.s2 {
  width: 42.8px;
  width: min(42.8px, 11.86cqw);
  height: 44.2px;
  height: min(44.2px, 12.24cqw);
  right: 5.1px;
  right: min(5.1px, 1.41cqw);
  top: 54.3px;
  top: min(54.3px, 15.04cqw);
}

.promo-banner .promo-star.s3 {
  width: 24px;
  width: min(24px, 6.65cqw);
  height: 24.8px;
  height: min(24.8px, 6.87cqw);
  right: 91.4px;
  right: min(91.4px, 25.32cqw);
  top: -5.3px;
  top: max(-5.3px, -1.47cqw);
}

.promo-banner .promo-star.s4 {
  width: 21.8px;
  width: min(21.8px, 6.04cqw);
  height: 22.5px;
  height: min(22.5px, 6.23cqw);
  right: 63.4px;
  right: min(63.4px, 17.56cqw);
  top: 75.9px;
  top: min(75.9px, 21.02cqw);
  opacity: 0.55;
}

.promo-banner .promo-star.s5 {
  width: 18.8px;
  width: min(18.8px, 5.21cqw);
  height: 19.4px;
  height: min(19.4px, 5.37cqw);
  right: 8.9px;
  right: min(8.9px, 2.47cqw);
  top: 4.2px;
  top: min(4.2px, 1.16cqw);
  opacity: 0.55;
}

/* ============ cards carousel (peek + dots) ============ */

.cards-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px var(--inset-x) 10px;
  scrollbar-width: none;
}

.cards-carousel::-webkit-scrollbar {
  display: none;
}

.cards-carousel .bank-card {
  flex: 0 0 calc(100% - 56px);
  scroll-snap-align: center;
}

.cards-carousel .bank-card:only-child {
  flex-basis: 100%; /* container padding already provides the 16px gutters */
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 2px 0 4px;
}

.carousel-dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--label) 25%, transparent);
  transition: width 0.25s ease-out, background 0.2s ease;
}

.carousel-dots i.active {
  width: 20px;
  background: var(--tint);
}

/* card in list context */
.cards-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px var(--inset-x) 0;
}

.cards-stack .bank-card {
  transition: transform 0.25s var(--ease-out-ios);
}

.cards-stack .bank-card:active,
.cards-stack .bank-card.is-pressed {
  transform: scale(0.98);
}

/* small card thumbnail (29x18) for cells */
.card-thumb {
  width: 34px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ============ big filled button (in-page, non-MainButton) ============ */

.btn-filled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  border-radius: var(--radius-capsule); /* iOS 26: buttons are capsules */
  background: var(--btn);
  color: var(--btn-text);
  font-size: 17px;
  font-weight: 600;
  transition: filter 0.25s ease, transform 0.25s var(--ease-out-ios), opacity 0.2s ease;
}

.btn-filled svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-filled:active,
.btn-filled.is-pressed {
  filter: brightness(0.8);
}

.btn-tinted {
  background: color-mix(in srgb, var(--tint) 15%, transparent);
  color: var(--tint);
}

.btn-tinted:active,
.btn-tinted.is-pressed {
  filter: none;
  background: color-mix(in srgb, var(--tint) 24%, transparent);
}

.btn-plain {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  margin-right: -12px;
  color: var(--tint);
  font-size: 17px;
  font-weight: 400;
  transition: opacity 0.18s ease-out;
}

.btn-plain:active,
.btn-plain.is-pressed {
  opacity: 0.4;
  transition: none;
}

/* ============ segmented control (iOS 13 style) ============ */

.segmented {
  position: relative;
  display: flex;
  height: 36px;
  padding: 4px;
  border-radius: 18px;
  background: var(--fill-3);
}

.segmented .seg-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px; /* explicit anchor: width/offset are percent-based in JS */
  border-radius: 14px;
  background: var(--seg-thumb-bg, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1);
}

html[data-theme='dark'] .segmented {
  --seg-thumb-bg: #636366;
}

.segmented .seg-item {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--label);
  z-index: 1;
  transition: font-weight 0.15s;
}

.segmented .seg-item.active {
  font-weight: 600;
}

/* ============ iOS 26 switch: 64×28 track, 38×24 lozenge handle ============ */

.ios-switch {
  position: relative;
  width: 64px;
  height: 28px;
  flex-shrink: 0;
}

.ios-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 2;
}

.ios-switch .track {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.23);
  transition: background 0.28s ease;
}

html[data-theme='dark'] .ios-switch .track {
  background: rgba(255, 255, 255, 0.23);
}

.ios-switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 38px;
  height: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.28s ease, width 0.12s ease-in-out 0.08s;
}

.ios-switch input:checked ~ .track {
  background: var(--green);
}

.ios-switch input:checked ~ .knob {
  transform: translateX(22px);
}

/* the glass blob balloons slightly while pressed */
.ios-switch input:active ~ .knob,
.ios-switch.is-pressed .knob {
  width: 44px;
}

.ios-switch input:active:checked ~ .knob,
.ios-switch.is-pressed input:checked ~ .knob {
  transform: translateX(16px);
}

/* ============ forms / inputs ============ */

.input-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--cell-h);
  padding: 6px var(--inset-x);
  position: relative;
}

.input-cell::after {
  content: '';
  position: absolute;
  left: var(--inset-x);
  right: var(--inset-x);
  bottom: 0;
  height: var(--separator-h);
  background: var(--separator);
}

.input-cell:last-child::after {
  display: none;
}

.input-cell input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 17px;
  line-height: 22px;
  caret-color: var(--tint);
}

.input-cell input::placeholder {
  color: var(--label-3);
}

.input-label {
  font-size: 17px;
  color: var(--label);
  flex-shrink: 0;
}

/* big centered amount input */
.amount-entry {
  padding: 26px var(--inset-x) 8px;
  text-align: center;
}

.amount-entry .amount-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  max-width: 100%;
}

.amount-entry .currency {
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--label-2);
  margin-right: 3px;
}

.amount-entry input {
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  font-size: 44px;
  line-height: 52px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  width: 100%;
  min-width: 40px;
  caret-color: var(--tint);
}

.amount-entry input::placeholder {
  color: var(--label-3);
}

.amount-hint {
  margin-top: 4px;
  font-size: 15px;
  line-height: 20px;
  color: var(--label-2);
}

.amount-hint.error {
  color: var(--destructive);
}

.amount-hint .link {
  color: var(--tint);
  font-weight: 500;
}

/* shake on invalid */
.shake {
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-7px); }
  80% { transform: translateX(7px); }
}

/* ============ chips (amount presets, designs) ============ */

.chips-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px var(--inset-x);
}

.chip {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 18px;
  background: var(--fill-3);
  font-size: 15px;
  font-weight: 500;
  color: var(--label);
  transition: background 0.15s ease, color 0.15s ease, transform 0.2s var(--ease-out-ios);
}

.chip:active,
.chip.is-pressed {
  transform: scale(0.94);
}

.chip.active {
  background: var(--btn);
  color: var(--btn-text);
}

/* design swatches */
.swatch-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  padding: 14px var(--inset-x);
}

.swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  transition: transform 0.2s var(--ease-out-ios);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); /* keep obsidian visible on black */
}

html[data-theme='dark'] .swatch {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.24);
}

/* metal previews for the design picker */
.swatch.design-obsidian {
  background: linear-gradient(150deg, #6a6a72 0%, #3a3a40 45%, #191920 100%);
}

.swatch.design-ultramarine {
  background: linear-gradient(150deg, #f4f5f8 0%, #b9bcc6 45%, #6f727c 100%);
}

.swatch.design-sunset {
  background: linear-gradient(150deg, #f4cebf 0%, #cb9483 45%, #7c5044 100%);
}

.swatch.design-mint {
  background: linear-gradient(150deg, #f3e2ac 0%, #cbaa5e 45%, #77602a 100%);
}

.swatch:active,
.swatch.is-pressed {
  transform: scale(0.92);
}

.swatch.active::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px solid var(--tint);
  border-radius: 50%;
}

/* ============ QR / deposit ============ */

.qr-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0 4px;
}

.qr-box {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  line-height: 0;
}

.qr-box svg,
.qr-box img {
  width: 190px;
  height: 190px;
  display: block;
}

.address-mono {
  font-family: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 21px;
  word-break: break-all;
  user-select: text;
  -webkit-user-select: text;
}

/* ============ status badges ============ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.badge.pending {
  background: color-mix(in srgb, var(--orange) 15%, transparent);
  color: var(--orange);
}

.badge.completed {
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
}

.badge.processing {
  background: color-mix(in srgb, var(--tint) 15%, transparent);
  color: var(--tint);
}

/* ============ toast HUD (copied etc.) ============ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 34px);
  transform: translate(-50%, 16px);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-section) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 var(--hairline) var(--separator);
  font-size: 15px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-ios), transform 0.3s var(--ease-out-ios);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* pushed screens hide the dock — anchor the toast just above the MainButton area */
html.has-screen .toast {
  bottom: calc(var(--safe-bottom) + 92px);
}

.toast svg {
  width: 18px;
  height: 18px;
  color: var(--green);
}

/* ============ empty states ============ */

.empty-state {
  padding: 48px 32px;
  text-align: center;
}

.empty-state svg {
  width: 56px;
  height: 56px;
  color: var(--gray);
  margin-bottom: 12px;
}

.empty-state .empty-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  margin-bottom: 4px;
}

.empty-state .empty-text {
  font-size: 15px;
  line-height: 20px;
  color: var(--label-2);
}

/* ============ skeleton loading ============ */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--fill-3);
  border-radius: 8px;
  color: transparent !important;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shimmer 1.4s infinite;
}

html[data-theme='dark'] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

/* ============ misc ============ */

.spacer-8 { height: 8px; }
.spacer-16 { height: 16px; }
.spacer-24 { height: 24px; }

.centered-note {
  /* iOS grouped footers are left-aligned */
  text-align: left;
  font-size: 13px;
  line-height: 18px;
  color: var(--label-2);
  padding: 12px calc(var(--inset-x) * 2);
}

.reveal-secret {
  filter: blur(7px);
  transition: filter 0.25s ease;
  cursor: pointer;
}

.reveal-secret.revealed {
  filter: none;
}

/* ============================================================
   Funnel v1: оффер, лестница бонусов, шаги, экраны успеха/ожидания
   ============================================================ */

/* Оффер-экран новичка */
.offer-card-hero {
  /* живая карта-продукт как hero: чуть уже экрана, с воздухом сверху */
  padding: 6px calc(var(--inset-x) + 30px) 0;
}

/* витринная карта — маркетинговый объект: номер и срок не показываем */
.offer-card-hero .card-num {
  visibility: hidden;
}

.offer-hero {
  padding: 10px var(--inset-x) 8px;
  text-align: center;
}

.offer-title {
  font-size: 28px;
  line-height: 34px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--label);
}

.offer-sub {
  margin-top: 6px;
  font-size: 15px;
  line-height: 21px;
  color: var(--label-2);
}

/* Оффер - flex-колонка: гарантия прижата к низу контента, то есть ровно над
   нижней кнопкой (панель кнопки накладывается на контент, и на коротком
   экране строка иначе уезжала под нее). На длинном экране свободного места
   нет, и строка идет обычным потоком. */
.offer-screen {
  display: flex;
  flex-direction: column;
}

.offer-screen > * {
  flex: none;
}

.offer-screen .offer-guarantee {
  margin-top: auto;
  padding-top: 22px;
}

/* место под кнопку - распоркой, а не padding: WebKit не включает нижний
   padding flex-скроллера в прокрутку, и до гарантии нельзя было доехать */
html.has-dom-main-button .offer-screen {
  padding-bottom: 0;
}

.offer-screen::after {
  content: '';
  flex: none;
  height: calc(var(--main-bar-bottom) + var(--main-btn-h) + 14px);
}

.offer-guarantee {
  /* микрострока-гарантия у CTA: воздух отделяет ее от карточки выше */
  margin-top: 22px;
  padding: 0 var(--inset-x) 8px;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--green);
}

/* Лестница бонусов: три плитки-пресета */
.tier-row {
  display: flex;
  gap: 8px;
  padding: 0 var(--inset-x);
}

.tier-tile {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 4px 10px;
  border: none;
  border-radius: 16px;
  background: var(--bg-section);
  box-shadow: inset 0 0 0 var(--hairline) var(--separator);
  font: inherit;
  color: var(--label);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out-ios);
}

.tier-tile:active,
.tier-tile.is-pressed {
  transform: scale(0.97);
  transition: transform 0.1s ease-out;
}

.tier-tile.active {
  box-shadow: inset 0 0 0 2px var(--tint);
}

.tier-flag {
  position: absolute;
  top: -8px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--tint);
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
}

.tier-sum {
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tier-bonus {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--green);
}

.tier-note {
  font-size: 11px;
  line-height: 14px;
  color: var(--label-2);
  text-align: center;
  min-height: 14px;
  white-space: nowrap;
}

.tier-custom-link {
  display: block;
  min-height: 44px; /* HIG: зона касания не меньше 44pt */
  margin: 0 auto;
  padding: 0 16px;
  border: none;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--tint);
  cursor: pointer;
  transition: opacity 0.18s ease-out;
}

.tier-custom-link:active,
.tier-custom-link.is-pressed {
  opacity: 0.4;
  transition: none;
}

.tier-custom {
  margin-top: 10px;
}

/* Прогресс «До бонуса +$X осталось $Y» */
.bonus-progress {
  padding: 10px var(--inset-x) 0;
}

.bonus-progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--fill-3);
  overflow: hidden;
}

.bonus-progress-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--green);
  transition: width 0.25s ease;
}

.bonus-progress-label {
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--label-2);
}

/* Нумерованные шаги (рублёвый путь, «что дальше») */
.step-num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  color: var(--tint);
  font-size: 15px;
  font-weight: 700;
}

/* «Ждём ваш перевод» */
.await-wrap {
  padding: 56px var(--inset-x) 24px;
  text-align: center;
}

.await-spinner {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.await-check svg {
  width: 64px;
  height: 64px;
  color: var(--green);
}

/* «Карта готова 🎉» */
.success-hero {
  padding: 22px var(--inset-x) 10px;
  text-align: center;
}

.success-emoji {
  font-size: 52px;
  line-height: 60px;
}

.success-title {
  margin-top: 6px;
  font-size: 26px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--label);
}

.success-sub {
  margin-top: 6px;
  font-size: 15px;
  line-height: 20px;
  color: var(--label-2);
}

/* Рублёвый визард: шаг = одно действие */
.wiz-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px 0 0;
}

.wiz-dots i {
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: var(--fill-3);
  transition: background 0.25s ease;
}

.wiz-dots i.active {
  background: var(--tint);
}

.wiz-dots i.done {
  background: color-mix(in srgb, var(--tint) 45%, transparent);
}

.wiz-step {
  padding: 18px var(--inset-x) 0;
  text-align: center;
}

.wiz-emoji {
  font-size: 44px;
  line-height: 52px;
}

.wiz-count {
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--tint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.wiz-title {
  margin-top: 4px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--label);
}

.wiz-text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 21px;
  color: var(--label-2);
}

/* Инлайновые текстовые ссылки (условия, поддержка) */
.inline-link {
  border: none;
  background: none;
  /* вертикальный паддинг с отрицательным margin: зона касания 44pt,
     строка текста при этом не раздвигается */
  padding: 11.5px 0;
  margin: -11.5px 0;
  font: inherit;
  font-size: inherit;
  color: var(--tint);
  cursor: pointer;
  transition: opacity 0.18s ease-out;
}

.inline-link:active,
.inline-link.is-pressed {
  opacity: 0.4;
  transition: none;
}

.deposit-legal {
  margin-top: 18px;
  padding: 0 calc(var(--inset-x) * 2) 10px;
  font-size: 13px;
  line-height: 18px;
  color: var(--label-2);
  text-align: center;
}

/* fade-in for content after skeleton */
.fade-in {
  animation: fade-in 0.3s ease forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}