/* AVJ Digital — Mini App.
   Только белый и зелёный, без тёмной темы и чёрных поверхностей — фикс. брендовая
   палитра, не зависит от темы Telegram. Деньги — Golos Text, остальное — Onest. */

:root {
  --bg: #F0F2EF;
  --surface: #FFFFFF;
  --surface-2: #E8ECE7;
  --line: #DFE4DF;
  --ink: #10160F;
  --muted: #616D63;
  --forest: #0A3F26;
  --green: #147A41;
  --leaf: #1F9D55;
  --tint: #E7F1E9;
  --tint-ink: #0A3F26;
  --danger: #B23A28;
  --danger-bg: #FAE5E1;
  --warn: #93600F;
  --warn-bg: #FBEED2;
  /* Бонус — единственный второй акцент. Красный взят заметно ярче и чище, чем
     кирпичный --danger: рядом они не путаются, награда не читается как ошибка. */
  --bonus: #DE2B20;
  --bonus-ink: #A81C11;
  --dc: #106138;
  --alif: #1C4FB0;

  --shadow-sm: 0 1px 2px rgba(16, 22, 15, .04), 0 1px 1px rgba(16, 22, 15, .03);
  --shadow-md: 0 8px 20px -8px rgba(10, 34, 20, .18), 0 2px 6px -2px rgba(10, 34, 20, .08);
  --shadow-hero: 0 14px 28px -16px rgba(20, 122, 65, .28), 0 2px 8px -2px rgba(16, 22, 15, .06);

  --font-body: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-money: "Golos Text", Onest, system-ui, sans-serif;

  --r-ctl: 12px;
  --r-card: 16px;
  --r-hero: 20px;
  color-scheme: light;
}

/* Тёмная тема — только по явному выбору клиента в Настройках (Кошелёк),
   не подстраиваемся под системную тему Telegram или устройства. */
html.dark {
  --bg: #070E09;
  --surface: #101A13;
  --surface-2: #172319;
  --line: #223026;
  --ink: #EAF0E8;
  --muted: #8A988B;
  --forest: #79D6A0;
  --green: #2FA05C;
  --leaf: #3CC96E;
  --tint: #14291D;
  --tint-ink: #82DAA5;
  --danger: #EC8672;
  --danger-bg: #2B1712;
  --warn: #E3B65C;
  --warn-bg: #29210E;
  --bonus: #FF6B5E;
  --bonus-ink: #FF8C80;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-md: 0 10px 24px -10px rgba(0, 0, 0, .55);
  --shadow-hero: 0 14px 28px -16px rgba(0, 0, 0, .5), 0 2px 8px -2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

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

body {
  margin: 0;
  font: 15px/1.45 var(--font-body);
  background: var(--bg);
  color: var(--ink);
  padding: 0 16px calc(108px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Поверхности, которые рисует браузер, тоже брендовые: выделение и каретка
   по умолчанию синие и выдают «неоформленную» страницу. */
::selection { background: var(--tint); color: var(--tint-ink); }
input, textarea { caret-color: var(--green); }

h1 { font-size: 22px; line-height: 1.2; margin: 10px 0 16px; letter-spacing: -.3px; font-weight: 700; text-wrap: balance; }
h2 { font-size: 12px; margin: 28px 0 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.link { color: var(--green); font-weight: 600; }

/* --- шапка --- */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 0 12px;
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; letter-spacing: 0; }
.brand b { color: var(--green); font-weight: 700; }
.brand-mark { width: 32px; height: 40px; object-fit: contain; display: block; }
.top-right { display: flex; align-items: center; gap: 10px; }
/* Сумма в шапке — третий показ одного и того же: она уже есть крупно в карточке на
   главной, в Кошельке и в Профиле. Поэтому в шапке её не держим нигде. */
.balance-chip { display: none; }
/* Исключение: у гостя этот же элемент работает кнопкой входа, а не балансом. */
.balance-chip[href="#/login"] { display: inline-flex; align-items: center; }
/* На экране входа кнопка в шапке повторяла бы главную кнопку экрана. */
body[data-route="login"] .balance-chip { display: none; }
/* Колокольчик — только на главной: на остальных экранах шапка остаётся чистой. */
body:not([data-route="home"]) .bell { display: none; }
.bell {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; margin-right: -6px; color: var(--ink);
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
}
.bell svg { width: 23px; height: 23px; }
/* Точку ставит app.js — когда есть заказ в работе или новое объявление. */
.bell.has-news::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--leaf); border: 2px solid var(--bg);
}

/* --- панель уведомлений: выпадает под колокольчиком, никуда не переходим --- */
.notices-panel {
  position: absolute; top: 100%; right: 0; margin-top: 10px;
  width: min(340px, calc(100vw - 32px));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  z-index: 20;
}
.notices-head {
  position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface);
  font-weight: 700; font-size: 14px;
}
.notices-close {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px;
  border: 0; background: none; color: var(--muted); cursor: pointer;
}
.notices-close svg { width: 16px; height: 16px; }
.notices-close:hover { background: var(--tint); color: var(--tint-ink); }
.notices-body { padding: 8px; display: grid; gap: 8px; }
.notice-item { padding: 11px 12px; border-radius: 14px; background: var(--bg); }
.notice-item .muted { margin-bottom: 4px; }
.notices-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 380px) { .notices-panel { width: calc(100vw - 24px); } }
.balance-chip {
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  color: var(--ink); font-family: var(--font-money); font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums; letter-spacing: -.1px;
}

/* --- карточка баланса: белая, с зелёным акцентом --- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-hero); padding: 22px 22px 20px; color: var(--ink);
  background: linear-gradient(155deg, var(--tint) 0%, var(--surface) 55%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-hero);
}
.hero::after {
  content: ""; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,122,65,.14), transparent);
}
.hero > * { position: relative; z-index: 1; }
.hero .label { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.hero .amount {
  font-family: var(--font-money); font-weight: 700; font-size: 32px; line-height: 1.1;
  letter-spacing: -.6px; margin: 9px 0 20px; color: var(--forest); font-variant-numeric: tabular-nums;
}
.hero .amount small { font-size: 14px; font-weight: 600; color: var(--green); letter-spacing: 0; margin-left: 4px; }
.hero .row { display: flex; gap: 8px; }
.hero .btn.ghost { background: var(--surface); color: var(--forest); border: 1px solid var(--line); box-shadow: none; }

/* Keep the catalog close to the top on a phone.
   Баланс на главном — единственный второй тёмный акцент помимо карусели баннеров:
   глянцевый зелёный градиент, по образцу референса. Остальные hero (Кошелёк, Профиль)
   остаются светлыми — тут это осознанное исключение, а не общий переход на тёмное. */
.home-balance {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
  align-content: center; row-gap: 2px; min-height: 96px;
  padding: 10px 12px 10px 16px; border: 0; color: #fff;
  /* Четыре слоя делают «объём» без единой картинки: изумрудное свечение за
     кошельком, концентрические кольца света от него, верхний глянец и база. */
  /* Цвета сняты пипеткой с карточки «Мой кошелёк» в макете профиля: фон там почти
     ровный #064328 с лёгким высветлением справа. Яркий градиент делал картинку
     кошелька наклеенной — вокруг неё фон был светлее, чем внутри неё самой. */
  background:
    radial-gradient(90% 120% at 76% 40%, rgba(13, 104, 63, .75) 0%, rgba(8, 84, 52, .35) 38%, transparent 70%),
    linear-gradient(135deg, #0A5231 0%, #064328 48%, #042F1D 100%);
  box-shadow: 0 18px 32px -18px rgba(0, 80, 55, .5), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.home-balance::after {
  display: block; right: -34px; top: -56px; width: 190px; height: 190px;
  background: radial-gradient(closest-side, rgba(126, 255, 190, .22), transparent);
}
/* Вихрь света — отдельный слой под содержимым, тянется на всю карточку. */
.home-balance .balance-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
/* Кошелёк вынесен из потока в правый верхний угол и уходит нижним краем за кнопку —
   так же, как в референсе. Кнопка рисуется поверх: она ниже по разметке. */
.home-balance .wallet-art { position: absolute; right: 10px; top: -1px; width: 72px; height: auto; z-index: 1; pointer-events: none; }
/* На этой карточке подпись не капслоком, как на остальных hero, а обычным
   предложением и крупнее: в референсе «Ваш баланс» читается наравне с суммой. */
.home-balance .label {
  grid-column: 1; grid-row: 1; align-self: end; font-size: 12.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, .78);
}
/* Сумма — одной строкой в любом случае: перенос «1 / 250.00» ломает всю карточку.
   Кегль тянется за шириной экрана, чтобы влезали и пятизначные балансы. */
.home-balance .amount {
  grid-column: 1; grid-row: 2; align-self: start; margin: 0;
  font-size: clamp(20px, calc(10.2vw - 13px), 26px); font-weight: 800;
  letter-spacing: -1px; white-space: nowrap; color: #fff; text-shadow: 0 2px 12px rgba(2, 20, 11, .45);
}
.home-balance .amount small { color: rgba(255, 255, 255, .82); font-size: 12px; text-transform: uppercase; margin-left: 5px; }
.home-balance .row { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; align-items: center; }
.home-balance .row .btn {
  min-height: 44px; padding: 11px 10px; font-size: 12.5px; gap: 4px; border-radius: 999px;
  background: linear-gradient(180deg, #D4FDE6 0%, #9CEFC1 100%); color: #06301C;
  box-shadow: 0 8px 18px -8px rgba(2, 20, 11, .7), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.home-balance .row .btn svg { width: 13px; height: 13px; flex: none; }
.home-balance .row .btn .ic-chev { width: 10px; height: 10px; opacity: .45; }
/* На узком телефоне сумма и кнопка в одну строку не помещаются: шеврон уходит
   первым — он декоративный, в отличие от плюса и подписи. */
@media (max-width: 380px) {
  .home-balance .row .btn { padding: 11px 9px; font-size: 12px; }
  .home-balance .row .btn .ic-chev { display: none; }
}
.home-balance .row .ghost { display: none; }
.checkout-steps { display: flex; gap: 20px; padding: 0 0 12px; margin: -4px 0 14px; list-style: none; border-bottom: 1px solid var(--line); }
.checkout-steps li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.checkout-steps li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-weight: 600; }
.checkout-steps .current { color: var(--tint-ink); font-weight: 600; }
.checkout-steps .current > span { background: var(--green); color: #fff; }
.checkout-steps .done > span { background: var(--tint); color: var(--tint-ink); }
.checkout-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 12px 2px 0; }

/* --- согласие с условиями обслуживания перед покупкой/пополнением --- */
.terms-details { margin: 14px 2px 0; font-size: 13px; }
.terms-details summary { display: inline-flex; align-items: center; gap: 2px; color: var(--green); font-weight: 600; cursor: pointer; list-style: none; }
.terms-details summary::-webkit-details-marker { display: none; }
.terms-details summary::after { content: '▾'; font-size: 10px; }
.terms-details[open] summary::after { content: '▴'; }
.terms-details ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.5; }
.terms-details li { margin: 4px 0; }
.terms-check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 2px 0; font-size: 13px; color: var(--ink); cursor: pointer; }
.terms-check input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--green); cursor: pointer; }
.terms-check.invalid { color: var(--danger); }
.terms-check.invalid input { outline: 2px solid var(--danger); outline-offset: 2px; }
.resume-purchase { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--tint); color: var(--tint-ink); }
.resume-purchase small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; }
.wallet-history { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 13px; }
.search-empty .btn { margin-top: 16px; }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.input { scroll-margin: 100px 0 220px; }

/* --- промо-карусель: единственное тёмное пятно на светлой странице, баннеры
   настраиваются из админки (Баннеры), admin сам решает, сколько их поставить --- */
.banner-carousel { margin-top: 12px; }
.banner-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; border-radius: var(--r-hero);
}
.banner-track::-webkit-scrollbar { display: none; }
.banner-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 9;
  border-radius: var(--r-hero); overflow: hidden; display: block; color: #fff;
  background: linear-gradient(150deg, #0F5A34 0%, #0A3F26 45%, #061F13 100%);
  box-shadow: var(--shadow-hero);
}
.banner-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.banner-copy {
  position: relative; z-index: 1; height: 100%; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 16px;
  background: linear-gradient(0deg, rgba(4,16,10,.88) 0%, rgba(4,16,10,.15) 65%, transparent 100%);
}
.banner-copy h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.3px; overflow-wrap: anywhere; }
.banner-copy p { margin: 4px 0 0; font-size: 12.5px; color: rgba(255,255,255,.78); overflow-wrap: anywhere; }
.banner-cta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; width: fit-content;
  padding: 8px 14px; border-radius: 999px; background: #fff; color: #0A3F26; font-weight: 700; font-size: 12.5px;
}
.banner-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.banner-dots span {
  width: 16px; height: 6px; border-radius: 3px; background: var(--line);
  transform: scaleX(.375); transform-origin: center;
  transition: background .15s ease, transform .15s ease;
}
.banner-dots span.on { background: var(--green); transform: scaleX(1); }

/* --- каталог --- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 16px 8px 14px; border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-weight: 600; font-size: 13px; line-height: 1.25;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.tile:active { transform: scale(.96); border-color: var(--green); box-shadow: none; }

.catalog-art {
  position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  border-radius: var(--r-card); background: linear-gradient(150deg, var(--tint) 0%, var(--surface-2) 100%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.catalog-art .art-fallback { color: var(--tint-ink); font-family: var(--font-money); font-weight: 700; letter-spacing: .2px; }
.catalog-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.catalog-art.art-loaded .art-fallback { visibility: hidden; }
.catalog-art.brand-steam, .catalog-art.brand-steam img { background: var(--forest); }
.catalog-art.brand-steam img { padding: 12px; }
.tile > .catalog-art {
  width: 76px; height: 76px; border-radius: 22px; font-size: 16px;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.catalog-art img[src$="freefire.jpg"] { object-fit: cover; object-position: 65% center; }
.catalog-art img[src$="stars.svg"], .catalog-art img[src$="premium.svg"], .catalog-art img[src$="telegram.png"] { padding: 16%; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 12px; }
.section-heading h2 { margin: 0; color: var(--ink); font-size: 19px; letter-spacing: -.3px; text-transform: none; }
.catalog-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.catalog-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--tint); }
.catalog-search svg { width: 20px; height: 20px; flex: none; stroke: var(--muted); stroke-width: 1.8; fill: none; }
.catalog-search input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 14px 0; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.catalog-search input::placeholder { color: var(--muted); }
.tile-title { font-size: 14px; }
.tile-caption { color: var(--muted); font-size: 12px; font-weight: 500; margin-top: auto; }
.search-empty { grid-column: 1 / -1; }
.search-empty span { display: block; margin-top: 8px; }
.catalog-search + .grid { margin-top: 14px; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 8px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.category-heading { display: flex; align-items: center; gap: 14px; margin: 8px 0 20px; }
.category-heading > .catalog-art {
  width: 60px; height: 60px; border-radius: 18px; flex: none;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.category-heading h1 { margin: 0; }

.seg { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; margin: 14px 0 6px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  padding: 8px 15px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.seg button.on { background: var(--forest); border-color: var(--forest); color: var(--bg); }

/* --- карточки и списки --- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow-sm); }
.stack > * + * { margin-top: 12px; }

.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease; }
.product-select { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; text-align: left; padding: 10px 12px 58px; border: 0; border-radius: inherit; background: transparent; color: var(--ink); cursor: pointer; }
.product-brand { display: block; padding-right: 20px; font-size: 10px; line-height: 1.5; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.product-check { position: absolute; right: 12px; top: 10px; width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 50%; }
.product-select > .catalog-art { width: 100%; height: 104px; margin: 4px 0 8px; border-radius: 0; background: transparent; box-shadow: none; }
.product-select .catalog-art img { padding: 2px; }
.product-select .catalog-art img[src$="stars.svg"], .product-select .catalog-art img[src$="premium.svg"] { padding: 12px; }
.product .t { display: block; font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.3px; overflow-wrap: anywhere; }
.product-price { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: auto; padding-top: 6px; }
.product .p { font-family: var(--font-money); font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.5px; color: var(--forest); overflow-wrap: anywhere; }
.product-action { position: absolute; bottom: 10px; left: 10px; right: 10px; height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; background: var(--green); color: #fff; font-weight: 600; font-size: 14px; transition: background .15s ease, transform .15s ease; }
.product-action > span { font-size: 21px; line-height: 1; font-weight: 400; }
.product-select:active .product-action { background: var(--forest); transform: scale(.97); }
html.dark .product-select:active .product-action { background: #176b39; }
@media (hover: hover) { .product-select:hover .product-action { background: var(--forest); } }
@media (hover: hover) { html.dark .product-select:hover .product-action { background: #176b39; } }
.product.on { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.product.on .product-action { visibility: hidden; }
.product.on .product-check { background: var(--green); border-color: var(--green); }
.product.on .product-check::after { content: ''; position: absolute; left: 4px; top: 2px; width: 5px; height: 8px; border: solid white; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.product-select:focus-visible { outline-offset: 4px; }
@media (hover: hover) { .product:hover { border-color: var(--green); } }
@media (max-width: 350px) { .products { gap: 10px; } .product-select { padding: 10px 10px 58px; } .product .t { font-size: 17px; } .product-select > .catalog-art { height: 72px; } .product .p { font-size: 19px; } }

.list > a, .list > div, .list > button {
  display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.list > button { width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.list > :first-child { padding-top: 0; }
.list > :last-child { border-bottom: 0; padding-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .t { font-weight: 600; overflow-wrap: anywhere; }
.list-icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--ink); opacity: .75; }
.list-icon svg { width: 23px; height: 23px; }
.amt { font-family: var(--font-money); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt.plus { color: var(--green); }

.badge { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); white-space: nowrap; letter-spacing: .2px; }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--danger-bg); color: var(--danger); }

/* --- формы --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.input {
  width: 100%; padding: 14px 15px; border-radius: var(--r-ctl); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--tint); }
.hint { font-size: 13px; }
.hint.ok { color: var(--green); }
.hint.bad { color: var(--danger); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); }
.qty button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.qty span { min-width: 38px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.presets button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--r-ctl); padding: 13px 4px; font-family: var(--font-money); font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.presets button.on { border-color: var(--green); background: var(--tint); color: var(--tint-ink); box-shadow: 0 0 0 1px var(--green), 0 8px 16px -10px rgba(20, 122, 65, .6); }
.presets button { padding: 15px 4px; border-radius: 14px; font-size: 15px; }
.presets button:active { transform: scale(.96); }
#mine.list > a { padding: 12px 0; }
#mine .t { font-family: var(--font-money); letter-spacing: .2px; }

/* --- 3D-карта кошелька (Кошелёк) --- */
.wcard-stage { perspective: 900px; padding: 6px 2px 14px; touch-action: pan-y; }
.wcard {
  --rx: 0deg; --ry: 0deg; --gx: 30%; --gy: 20%;
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 1.586 / 1; min-height: 190px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px 22px 18px; border-radius: 22px; color: #fff;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(120, 235, 170, .34), transparent 55%),
    radial-gradient(70% 90% at 0% 100%, rgba(3, 20, 11, .55), transparent 60%),
    linear-gradient(135deg, #1F9D55 0%, #0F6B3B 42%, #073A21 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 1px 0 rgba(255, 255, 255, .1),
    0 28px 36px -18px rgba(5, 40, 22, .55), 0 10px 14px -8px rgba(5, 40, 22, .35);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  animation: wcard-in .8s cubic-bezier(.16, 1, .3, 1) both, wcard-sway 7s ease-in-out 1s infinite;
}
.wcard.live { transition: transform .08s linear; animation: none; }
/* тонкий гильош-узор, как на банкнотах */
.wcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: soft-light;
  background: repeating-radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .55) 0 1px, transparent 1px 7px);
}
.wcard-glare {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background:
    radial-gradient(260px circle at var(--gx) var(--gy), rgba(255, 255, 255, .75), transparent 60%),
    linear-gradient(115deg, transparent 30%, rgba(190, 255, 220, .22) 45%, rgba(255, 238, 190, .2) 52%, transparent 66%);
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, calc(var(--gx) * 1.2) 0;
}
.wcard > :not(.wcard-glare) { position: relative; z-index: 2; }
.wcard-top { display: flex; align-items: center; gap: 9px; transform: translateZ(18px); }
.wcard-logo { width: 22px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.wcard-brand { font-weight: 600; font-size: 15px; letter-spacing: .2px; }
.wcard-brand b { font-weight: 700; color: #BFF2D4; }
.wcard-nfc { margin-left: auto; width: 26px; height: 26px; fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.8; stroke-linecap: round; }
.wcard-chip {
  /* 62px сверху предполагали карту выше, чем она выходит на телефоне
     (ширина 358 → высота 226): чип наезжал на подпись «Баланс» на 8px.
     50px ставят его ровно между логотипом и подписью на всех ширинах. */
  position: absolute !important; left: 22px; top: 52px; width: 36px; height: 27px; border-radius: 6px;
  background: linear-gradient(135deg, #F3F6F0, #B9C8BC 55%, #E5ECE6);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .25);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 4px; transform: translateZ(14px);
}
.wcard-chip i { border: 1px solid rgba(60, 80, 66, .45); border-radius: 2px; }
.wcard-bal { transform: translateZ(30px); margin-top: auto; }
.wcard .label { font-size: 11px; letter-spacing: .9px; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, .72); }
.wcard .amount {
  font-family: var(--font-money); font-weight: 700; font-size: clamp(40px, 13vw, 52px); line-height: 1.05; letter-spacing: -1.2px;
  margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-shadow: 0 2px 10px rgba(0, 30, 14, .35);
}
.wcard .amount small { font-size: 18px; font-weight: 600; color: #BFF2D4; letter-spacing: 0; margin-left: 6px; }
.wcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; transform: translateZ(18px); }
.wcard-tag { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, .6); }
/* История — одна иконка часов со стрелкой назад: на карте нет места для
   текстовой кнопки рядом с суммой, а смысл «посмотреть прошлые операции»
   иконка несёт сама. Доступное имя приходит из aria-label. */
.wcard-hist {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .15s ease, transform .15s ease;
}
.wcard-hist svg { width: 20px; height: 20px; color: #fff; }
.wcard-hist:active { background: rgba(255, 255, 255, .28); transform: scale(.94); }
.wallet-help { margin: 2px 4px 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
@keyframes wcard-in { from { opacity: 0; transform: rotateX(28deg) rotateY(-10deg) translateY(18px) scale(.94); } }
@keyframes wcard-sway { 0%, 100% { transform: rotateX(2deg) rotateY(-4deg); } 50% { transform: rotateX(-2deg) rotateY(4deg); } }
@media (prefers-reduced-motion: reduce) { .wcard { animation: none; transition: none; } }
html.dark .wcard { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 28px 36px -18px rgba(0, 0, 0, .7); }

/* --- кнопки --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r-ctl); padding: 13px 18px; font-weight: 700; cursor: pointer;
  background: var(--green); color: #fff; box-shadow: var(--shadow-sm); transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.975); filter: brightness(.94); box-shadow: none; }
.btn.block { width: 100%; padding: 16px; font-size: 16px; }
.btn.soft { background: var(--tint); color: var(--tint-ink); box-shadow: none; }
.btn.line { background: transparent; border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.btn.dc { background: var(--dc); }
.btn.alif { background: var(--alif); }
.btn:disabled { opacity: .5; box-shadow: none; }

.buybar {
  z-index: 4;
  position: fixed; left: 0; right: 0; bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  padding: 12px 16px 10px; background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.buybar .sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 8px; color: var(--muted); }
.buybar .sum b { font-family: var(--font-money); font-weight: 600; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- оплата --- */
.pay { text-align: center; padding: 22px 18px 18px; }
.pay .big { font-family: var(--font-money); font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.6px; color: var(--forest); font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.banks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.bank {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 10px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink);
  font-weight: 700; font-size: 14px; letter-spacing: -.1px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.bank { min-width: 0; }
.bank-logo { display: flex; align-items: center; justify-content: center; height: 76px; border-radius: calc(var(--r-card) - 6px); background: #fff; }
.bank-logo img { max-width: 78%; max-height: 62px; object-fit: contain; }
.bank.alif .bank-logo img { max-height: 70px; }
.bank-name { display: flex; align-items: center; justify-content: center; gap: 6px; }
.bank-name::after { content: "›"; font-size: 18px; line-height: 1; opacity: .6; }
.bank:hover { box-shadow: var(--shadow-md); }
.bank:active { transform: scale(.97); box-shadow: none; }
.bank.dc { border-color: color-mix(in srgb, var(--dc) 45%, var(--line)); }
.bank.alif { border-color: color-mix(in srgb, var(--alif) 45%, var(--line)); }
.bank.dc .bank-name { color: var(--dc); }
.bank.alif .bank-name { color: var(--alif); }
.copy {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line);
  font-weight: 600; font-family: var(--font-money); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer;
}
.copy small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.copy .c { color: var(--green); font-size: 13px; font-weight: 700; }
.copy:active { background: var(--tint); }
.note { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--warn-bg); color: var(--warn); font-size: 13px; text-align: left; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pulse { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--muted); }
.pulse::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); animation: p 1.6s infinite; }
@keyframes p { 0% { box-shadow: 0 0 0 0 rgba(43,179,92,.55); } 100% { box-shadow: 0 0 0 11px rgba(43,179,92,0); } }
.receipt { padding: 16px; }

/* --- статус заказа: вертикальный таймлайн --- */
.road { position: relative; padding: 4px 0 4px 28px; }
.road svg.path { display: none; }
.road::before {
  content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 2px;
  background: var(--line); border-radius: 2px;
}
.road .step { position: relative; padding: 2px 0 20px; color: var(--muted); }
.road .step:last-child { padding-bottom: 0; }
.road .step b { display: block; font-weight: 600; color: var(--ink); }
.road .step:not(.done):not(.now) b { color: var(--muted); font-weight: 500; }
.road .dot { position: absolute; left: -28px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); z-index: 1; }
.road .step.done .dot { background: var(--green); border-color: var(--green); }
.road .step.now .dot { background: var(--leaf); border-color: var(--leaf); box-shadow: 0 0 0 4px var(--tint); }

.empty { text-align: center; padding: 44px 12px; color: var(--muted); }
.empty svg { width: 60px; height: 76px; opacity: .85; margin-bottom: 8px; }
.skel { height: 64px; border-radius: var(--r-card); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: s 1.3s infinite; }
@keyframes s { to { background-position: -200% 0; } }

/* --- нижнее меню: плавающая панель --- */
.tabs {
  position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 6;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  padding: 6px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
@media (min-width: 600px) { .tabs { max-width: 532px; margin: 0 auto; } }
.tabs a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: var(--muted); padding: 9px 2px 8px; border-radius: 16px;
  transition: background .18s ease, color .18s ease;
}
/* Пять вкладок на узком телефоне: подпись не переносится и не уходит ниже 11px. */
.tabs a span { white-space: nowrap; letter-spacing: -.2px; }
.tabs svg { width: 22px; height: 22px; fill: currentColor; transition: transform .18s ease; }
.tabs a.on { color: var(--tint-ink); background: var(--tint); }
.tabs a.on svg { transform: translateY(-1px) scale(1.04); }
/* Розыгрыш — единственная вкладка со вторым акцентом. Цвет держится и в неактивном
   состоянии: награду должно быть видно до того, как на неё нажали. Золото, а не
   --bonus-красный: кнопка в меню читается как «приз/подарок», отдельно от красного
   акцента самого экрана Розыгрыша (прогресс, awards) — так в референсе. */
/* Матовая кнопка: ровная заливка без блика и градиента, только тонкая тёмная
   кромка снизу для тела и короткая тень. Кнопка лежит в панели, а не парит.
   Заливка одна на обе темы, как у банковских кнопок: золото узнаётся всегда. */
.tabs a[data-tab="loyalty"] {
  color: #fff;
  background: #CC9A3B;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 3px 7px -3px rgba(124, 88, 10, .5);
  transition: background .14s ease, box-shadow .14s ease;
}
/* Лента коробки — вырез в заливке, а не белая линия по белому: иначе подарок
   читается сплошным пятном. Цвет ленты повторяет фон кнопки в каждом состоянии. */
.tabs a[data-tab="loyalty"] .rib { stroke: #CC9A3B; }
/* Зелёное кольцо фокуса на золотой кнопке было бы чужим. */
.tabs a[data-tab="loyalty"]:focus-visible { outline-color: #8C6A1F; }
@media (hover: hover) {
  .tabs a[data-tab="loyalty"]:hover { background: #DAAC50; }
  .tabs a[data-tab="loyalty"]:hover .rib { stroke: #DAAC50; }
}
/* Нажато и «вы здесь» — одно состояние: цвет глубже, кромка уходит внутрь. */
.tabs a[data-tab="loyalty"]:active,
.tabs a[data-tab="loyalty"].on {
  background: #A87B28;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28), 0 1px 2px -1px rgba(124, 88, 10, .4);
}
.tabs a[data-tab="loyalty"]:active .rib,
.tabs a[data-tab="loyalty"].on .rib { stroke: #A87B28; }
.tabs a[data-tab="loyalty"].on svg { transform: none; }
html.dark .tabs a[data-tab="loyalty"] { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28), 0 3px 7px -3px rgba(0, 0, 0, .7); }

.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(98px + env(safe-area-inset-bottom, 0px)); z-index: 10;
  padding: 13px 16px; border-radius: var(--r-ctl); background: var(--surface); color: var(--forest); font-weight: 700; text-align: center;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}

/* Подтверждение покупки — страховка от случайного тапа по кнопке оплаты:
   списание уже реальное и без возврата, поэтому нужен отдельный явный шаг. */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 16, 9, .45); padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  animation: confirm-fade .15s ease;
}
.confirm-overlay[hidden] { display: none; }
.confirm-sheet {
  width: 100%; max-width: 480px; background: var(--surface); border-radius: var(--r-card); padding: 20px;
  box-shadow: var(--shadow-md); animation: confirm-up .18s ease;
}
.confirm-sheet h3 { margin: 0 0 8px; font-size: 18px; }
.confirm-sheet p { margin: 0 0 18px; color: var(--muted); }
.confirm-sheet .sum-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--tint); color: var(--tint-ink); }
.confirm-sheet .sum-row b { font-family: var(--font-money); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.confirm-sheet .row { display: flex; gap: 10px; }
.confirm-sheet .row .btn { flex: 1; }
@keyframes confirm-fade { from { opacity: 0; } }
@keyframes confirm-up { from { transform: translateY(16px); opacity: 0; } }
@media (min-width: 600px) { .confirm-overlay { align-items: center; } }

.success { text-align: center; padding: 24px 0; }
.success .ring { width: 88px; height: 88px; margin: 0 auto 14px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.success .ring svg { width: 42px; height: 42px; stroke: var(--green); fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: d .5s .1s forwards; }
@keyframes d { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (min-width: 600px) {
  body { max-width: 560px; margin: 0 auto; box-shadow: var(--shadow-md); min-height: 100vh; }
  .buybar { max-width: 560px; margin: 0 auto; }
}

.attach {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: var(--r-ctl);
  border: 1.5px dashed var(--line); background: transparent; text-align: left; font-weight: 600; cursor: pointer;
}
.attach .ai { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--tint); color: var(--tint-ink); font-size: 18px; flex: none; }
.attach span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sent { text-align: center; padding: 20px 16px; border: 1px solid var(--green); background: var(--tint); border-radius: var(--r-ctl); }
.sent b { display: block; margin-bottom: 4px; color: var(--tint-ink); font-size: 16px; }

.receipt-box { text-align: left; padding: 14px; border-radius: var(--r-ctl); background: var(--surface-2); }
.receipt-box .rtitle { font-weight: 700; }
.receipt-box .attach { background: var(--surface); }
.receipt-box[hidden], .sent[hidden] { display: none; }

/* --- розыгрыш: прогресс до бонуса --- */
.loyalty-card { text-align: center; padding: 26px 20px 22px; }
.loyalty-count {
  font-family: var(--font-money); font-weight: 700; font-size: 40px; line-height: 1;
  letter-spacing: -.6px; color: var(--bonus-ink); font-variant-numeric: tabular-nums;
}
.loyalty-count small { font-size: 20px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.loyalty-sub { margin-top: 6px; }
.loyalty-track { display: flex; justify-content: center; gap: 6px; margin: 18px 0 4px; flex-wrap: wrap; }
.loyalty-track .lp {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface);
  display: grid; place-items: center; transition: background .15s ease, border-color .15s ease;
}
.loyalty-track .lp.done { background: var(--bonus); border-color: var(--bonus); }
.loyalty-track .lp.done::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 700; }
.loyalty-reward-note {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--r-ctl); background: #DE2B20;
  color: #fff; font-size: 14px; font-weight: 700;
}

/* мультивыбор товаров */
.pick-hint { margin: -6px 0 10px; }
.product { position: relative; user-select: none; }
.product .pq {
  position: absolute; bottom: 10px; left: 10px; right: 10px; height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 2px;
  border: 1px solid var(--green); border-radius: 11px; background: var(--tint); color: var(--forest); overflow: hidden;
}
.product .pq[hidden] { display: none; }
.product .pq b { flex: 1; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.product .pq button { width: 36px; height: 44px; border: 0; background: transparent; color: var(--green); font-size: 18px; font-weight: 700; cursor: pointer; }
.product .pq button:disabled { opacity: .35; cursor: default; }


.empty .empty-logo { display: block; width: 72px; height: 90px; object-fit: contain; margin: 0 auto 16px; }

.product .selected-label { padding-left: 12px; color: var(--green); font-size: 12px; font-weight: 600; }

/* --- профиль: кто вы, сколько денег, куда идти дальше --- */
/* Шапка — своя карточка в мятном градиенте: аватар, имя, статус, переход в данные. */
.profile-card {
  display: flex; align-items: center; gap: 15px; width: 100%; text-align: left; cursor: pointer;
  padding: 16px; border: 0; border-radius: var(--r-hero); font: inherit; color: var(--ink);
  /* Мятное свечение слева тянется от аватара — градиент из двух плоских тонов
     на белом фоне почти не читался. */
  background:
    radial-gradient(85% 150% at 2% 50%, rgba(31, 157, 85, .17), transparent 64%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), filter .18s ease;
}
html.dark .profile-card { box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.profile-card:active { transform: scale(.985); filter: brightness(.97); }
.profile-avatar-wrap { position: relative; flex: none; line-height: 0; }
.profile-avatar {
  width: 76px; height: 76px; flex: none; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center;
  /* Аватар всегда тёмно-зелёный, а не по токенам темы: в тёмной теме --forest
     светлеет, и круг под белой буквой становился кислотным. */
  background: radial-gradient(120% 120% at 30% 20%, #1E8C55 0%, #0C4A2C 70%); color: #fff;
  font-weight: 700; font-size: 30px; letter-spacing: .2px;
  box-shadow: 0 10px 20px -10px rgba(5, 40, 23, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.avatar-edit {
  position: absolute; right: 0; bottom: 2px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--surface);
  background: #10160F; color: #fff;
}
.avatar-edit svg { width: 13px; height: 13px; }
.profile-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.profile-name { font-size: 22px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; overflow-wrap: anywhere; }
.profile-meta { margin-top: 2px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.premium-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 5px 12px 5px 9px;
  border-radius: 999px; background: #FCD667; color: #4A3306; font-size: 13px; font-weight: 700;
}
.premium-badge svg { width: 14px; height: 14px; }
/* Разделы профиля: крупный тёмный заголовок + меню со штриховыми иконками,
   без плашек под ними — иконка читается как подпись к строке, а не как кнопка. */
.sec-title { margin: 26px 0 10px; font-size: 19px; letter-spacing: -.3px; text-transform: none; color: var(--ink); }
.menu { padding: 4px 0; overflow: hidden; }
.menu > a, .menu > div, .menu > button {
  position: relative; gap: 14px; padding: 16px; border-bottom: 0;
  transition: background .14s ease;
}
.menu > :first-child { padding-top: 16px; }
.menu > :last-child { padding-bottom: 16px; }
.menu > * + *::before { content: ""; position: absolute; left: 54px; right: 0; top: 0; height: 1px; background: var(--line); }
/* Тап по строке должен отзываться: без этого меню ощущается картинкой. */
.menu > a:active, .menu > button:active { background: var(--surface-2); }
.menu > a:active::before, .menu > button:active::before { opacity: 0; }
.menu .t { font-weight: 500; font-size: 16px; }
.menu .row-value { color: var(--muted); font-size: 15px; white-space: nowrap; }
.menu .go { display: grid; place-items: center; flex: none; color: var(--muted); opacity: .8; }
.menu .go svg { width: 16px; height: 16px; }
.profile-card > .go { display: grid; place-items: center; flex: none; color: var(--muted); }
.profile-card > .go svg { width: 18px; height: 18px; }

/* Вход на экран: карточка профиля и кошелёк всплывают один раз — единственный
   авторский момент движения здесь, списки появляются без анимации. */
@keyframes profile-rise { from { opacity: 0; transform: translateY(14px); } }
.profile-card { animation: profile-rise .5s cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .profile-card { animation: none; transition: none; }
}

/* --- подэкраны профиля: мои данные, безопасность, привязанные аккаунты --- */
.security-intro { display: flex; align-items: flex-start; gap: 14px; }
.security-intro .list-icon {
  width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: var(--tint-ink); opacity: 1;
}
.security-intro .list-icon svg { width: 20px; height: 20px; }
.security-intro .t { font-weight: 700; font-size: 16px; }
.security-intro p { margin: 3px 0 0; }
.linked-row { display: flex; align-items: center; gap: 12px; }
.linked-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, #1E8C55 0%, #0C4A2C 70%); color: #fff;
  font-weight: 700; font-size: 17px;
}

/* Profile settings: deliberate choices in a native, keyboard-accessible sheet. */
.profile-heading { margin: 8px 0 18px; font-size: 28px; letter-spacing: -.7px; }
body[data-route="profile"] .profile-card { background: var(--surface); border: 1px solid var(--line); padding: 18px; }
body[data-route="profile"] .profile-avatar { width: 64px; height: 64px; font-size: 26px; }
body[data-route="profile"] .profile-name { font-size: 21px; }
body[data-route="profile"] .menu .list-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--tint); color: var(--tint-ink); opacity: 1; display: grid; place-items: center; flex: none; }
body[data-route="profile"] .menu > * + *::before { left: 66px; right: 16px; }
body[data-route="profile"] .menu > a, body[data-route="profile"] .menu > button { gap: 12px; min-height: 68px; padding: 14px 16px; }
body[data-route="profile"] .menu .t { font-size: 15px; }
body[data-route="profile"] .menu .row-value { font-size: 13px; }
.settings-dialog { position: fixed; inset: auto 0 0; margin: 0 auto; width: min(100%, 560px); max-height: 90dvh; overflow-y: auto; box-sizing: border-box; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -16px 60px rgb(0 0 0 / .15); }
.settings-dialog[open] { animation: settings-enter .22s ease-out; }
.settings-dialog::backdrop { background: rgb(4 18 10 / .45); }
.settings-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.settings-dialog-head h2 { margin: 0; font-size: 23px; text-transform: none; letter-spacing: -.4px; color: var(--ink); }
.settings-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 26px; cursor: pointer; }
.settings-hint { margin: 8px 0 22px; font-size: 14px; color: var(--muted); }
.settings-options { display: grid; gap: 10px; }
.settings-option { position: relative; display: flex; align-items: center; gap: 14px; padding: 17px 16px; margin: 0; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; background: var(--surface); }
.settings-option:has(input:checked) { border-color: var(--green); background: var(--tint); }
.settings-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.settings-option:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 3px; }
.choice-copy { flex: 1; display: grid; gap: 4px; }
.choice-copy b { font-size: 16px; font-weight: 600; }
.choice-copy small { font-size: 13px; color: var(--muted); }
.choice-mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; }
input:checked ~ .choice-mark { border: 6px solid var(--green); background: var(--surface); }
.settings-apply { margin-top: 24px; min-height: 50px; }
@keyframes settings-enter { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .settings-dialog[open] { animation: none; } }
@media (max-width: 360px) { body[data-route="profile"] .menu > button { gap: 8px; padding-inline: 12px; } body[data-route="profile"] .menu .t { font-size: 14px; } }

/* Orders: individual cards and status filters, matching the supplied reference. */
.orders-page { padding-top: 12px; }
.orders-page h1 { font-size: 30px; margin: 8px 0 18px; letter-spacing: -.7px; }
.orders-filters { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: none; }
.orders-filters button { flex: 1 0 auto; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 700; font-size: 13px; box-shadow: 0 3px 12px rgb(10 34 20 / .06); cursor: pointer; }
.orders-filters button.on { background: var(--green); color: #fff; }
.orders-list { display: grid; gap: 12px; }
.order-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 12px; align-items: center; gap: 12px; padding: 16px 14px; border-radius: 20px; background: var(--surface); box-shadow: 0 4px 14px rgb(10 34 20 / .055); }
.order-card > .catalog-art { width: 64px; height: 66px; border-radius: 14px; overflow: hidden; }
.order-card > .catalog-art img { width: 100%; height: 100%; object-fit: cover; }
.order-copy { min-width: 0; }
.order-title { font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.order-meta { color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 6px; }
.order-summary { display: grid; justify-items: center; gap: 7px; }
.order-amount { font-family: var(--font-money); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700; white-space: nowrap; }
.order-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.order-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.order-status.success { color: var(--green); background: var(--tint); }
.order-status.pending { color: var(--warn); background: var(--warn-bg); }
.order-status.refund { color: var(--danger); background: var(--danger-bg); }
.order-chevron { color: var(--muted); opacity: .55; }
.order-chevron svg { display: block; width: 14px; height: 20px; }
@media (max-width: 380px) {
  .order-card { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 9px; padding: 13px 11px; }
  .order-card > .catalog-art { width: 52px; height: 58px; }
  .order-chevron { display: none; }
  .order-title { font-size: 13px; }
  .order-status { font-size: 9px; padding: 5px 7px; }
  .orders-filters button { padding: 10px 12px; font-size: 12px; }
}
.btn.cancel { border-color: color-mix(in srgb, var(--danger, #C0392B) 55%, var(--line)); color: var(--danger, #C0392B); font-weight: 700; background: var(--surface); }
.pay-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay-bank { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.pay-bank-logo { display: grid; place-items: center; width: 40px; height: 32px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pay-bank-logo img { max-width: 32px; max-height: 24px; object-fit: contain; }
.timer { padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay .btn.block { font-size: 17px; padding: 18px; }
.details .rtitle, .receipt-box .rtitle { font-weight: 700; text-align: left; }
.copy .c { white-space: nowrap; }
.copy > span:first-child { min-width: 0; }
.pay-bank b { white-space: nowrap; }
.details .copy { font-size: 16px; }
.details .copy > span:first-child { white-space: nowrap; }
.details .copy .c { font-size: 12px; padding: 6px 10px; border-radius: 999px; background: var(--tint); }
.card > .receipt-box { padding: 0; background: transparent; }
.details .copy { font-size: 15px; gap: 8px; padding: 12px; }
.details .copy .c { font-size: 11px; padding: 5px 8px; }
.pay .btn.pay-go { font-size: 16px; padding: 14px; }
.receipt-box .btn[disabled] { opacity: .55; cursor: not-allowed; }
.big-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.big-row .big { margin: 6px 0 2px; }
.copy-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--tint); color: var(--tint-ink); cursor: pointer; transition: transform .12s ease; }
.copy-ico:active { transform: scale(.92); }

/* --- оплата: всё в одной карточке --- */
.pay-go {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 12px;
  border: 0; border-radius: var(--r-card); color: #fff; text-align: left; cursor: pointer;
  box-shadow: var(--shadow-md); transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.pay-go.dc { background: var(--dc); }
.pay-go.alif { background: var(--alif); }
.pay-go:active { transform: scale(.98); filter: brightness(.94); box-shadow: var(--shadow-sm); }
.pg-logo { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; }
.pg-logo img { max-width: 42px; max-height: 38px; object-fit: contain; }
.pg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-text b { font-size: 18px; letter-spacing: -.2px; }
.pg-text small { font-size: 12.5px; font-weight: 500; opacity: .85; }
.pg-arrow { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: rgba(255,255,255,.18); }
.pay #change { display: block; }
.pay .details { text-align: left; }
.pay-sep { height: 1px; background: var(--line); margin: 4px -18px; }
.pay > .receipt-box { padding: 0; background: transparent; text-align: left; }
.pay > .sent { text-align: center; }
.attach.done { border-color: var(--green); }
.attach.done .ai { background: var(--green); color: #fff; }
.attach.need { border-color: var(--danger); background: var(--danger-bg); animation: need .45s ease; }
.rmiss { color: var(--danger); font-weight: 700; font-size: 14px; }
#rsend.soft { color: var(--muted); }
@keyframes need { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .attach.need { animation: none; } }

/* Как приложение: без увеличения двойным тапом, без «раздувания» шрифта в альбомной ориентации. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* =====================================================================
   Сайт (avj.tj в обычном браузере, html.web). В Mini App ничего не меняется:
   там «назад» — кнопка Telegram, вход — initData.
   ===================================================================== */
.top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.back-btn {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.back-btn svg { width: 20px; height: 20px; }
.back-btn:active { transform: scale(.94); }
@media (hover: hover) { .back-btn:hover { border-color: var(--green); color: var(--green); } }
/* «← В каталог» внутри экрана повторял бы кнопку в шапке. */
html.web a.back-link[href="#/"] { display: none; }
/* У гостя в чипе не сумма, а действие — значит, это не деньги и не Golos Text. */
.balance-chip[href="#/login"] { font-family: var(--font-body); font-weight: 700; color: var(--green); }

/* Гость на главной: та же зелёная карточка, вместо суммы приглашение войти. */
.home-guest .guest-title {
  grid-row: 1; align-self: end; font-family: var(--font-body); font-size: 18px; font-weight: 800;
  letter-spacing: -.3px; line-height: 1.2; white-space: normal; text-wrap: balance;
}
.home-guest .label { grid-row: 2; align-self: start; margin-top: 3px; padding-right: 4px; line-height: 1.35; }
.home-guest .row .btn { padding-inline: 16px; }

/* --- вход --- */
.login {
  max-width: 440px; margin: 8px auto 0; overflow: hidden;
  border-radius: var(--r-hero); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-hero);
}
/* Шапка экрана того же леса, что карточка баланса, с тем же тонким узором-гильошем.
   Плитки это настоящие обложки каталога: сидят на нижнем краю веером, крайние ниже и
   наклонены, средняя выше и крупнее. При открытии плитки один раз поднимаются по очереди,
   показывая, что внутри магазина. */
.login-band {
  position: relative; height: 150px; display: flex; justify-content: center; align-items: flex-end; gap: 8px;
  background:
    radial-gradient(90% 120% at 50% 100%, rgba(13, 104, 63, .75) 0%, rgba(8, 84, 52, .3) 45%, transparent 75%),
    linear-gradient(135deg, #0A5231 0%, #064328 48%, #042F1D 100%);
}
.login-band::before {
  content: ""; position: absolute; inset: 0; opacity: .1; mix-blend-mode: soft-light; pointer-events: none;
  background: repeating-radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .6) 0 1px, transparent 1px 8px);
}
.login-tile {
  --lift: 34px; --tilt: 0deg; --i: 0;
  position: relative; display: block; width: 54px; height: 54px; flex: none; overflow: hidden;
  border-radius: var(--r-card); background: var(--surface);
  box-shadow: 0 0 0 3px var(--surface), 0 14px 24px -12px rgba(2, 20, 11, .8);
  transform: translateY(var(--lift)) rotate(var(--tilt));
}
.login-tile:nth-child(1) { --tilt: -6deg; --i: 1; }
.login-tile:nth-child(2) { --lift: 20px; --tilt: -3deg; --i: 2; }
.login-tile:nth-child(3) { --lift: 6px; --tilt: 0deg; --i: 0; width: 68px; height: 68px; }
.login-tile:nth-child(4) { --lift: 20px; --tilt: 3deg; --i: 2; }
.login-tile:nth-child(5) { --lift: 34px; --tilt: 6deg; --i: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* Своё свойство translate, а не transform: transform уже держит дугу и наклон. */
  .login-tile { animation: login-rise .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 80ms); }
}
@keyframes login-rise { from { opacity: 0; translate: 0 18px; } }
.login-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Цвет Steam фирменный и в тёмной теме не светлеет, как --forest. */
.login-tile.brand-steam { background: #0A3F26; }
.login-tile.brand-steam img { object-fit: contain; padding: 12px; }
.login-body { padding: 56px 22px 20px; text-align: center; }
.login-body h1 { margin: 0 0 8px; text-wrap: balance; }
.login-text { margin: 0 auto 22px; max-width: 34ch; color: var(--muted); text-wrap: pretty; }
/* Три коротких довода под кнопками: иконка и два слова, без рамок и карточек. */
.login-perks {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 400px;
  margin: 20px auto 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line);
}
.login-perks li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.login-perks svg { width: 22px; height: 22px; fill: currentColor; color: var(--green); }
.login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; font-size: 16px; }
.login-btn img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.login-btn:disabled { opacity: .6; cursor: progress; }
.login-note { margin: 12px auto 0; max-width: 34ch; }
.login-note.login-error { color: var(--danger); font-weight: 600; }
.login-alt {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px;
  color: var(--green); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}

/* --- выход в профиле --- */
.logout-menu { margin-top: 22px; }
body[data-route="profile"] .logout-menu .list-icon { background: var(--danger-bg); color: var(--danger); }
.logout-menu .t { color: var(--danger); font-weight: 600; }

/* --- компьютер: меню переезжает в шапку, витрина раскрывается на всю ширину,
   остальные экраны остаются удобной колонкой для чтения и форм --- */
@media (min-width: 1000px) {
  html.web body { max-width: 1120px; padding: 0 32px 64px; box-shadow: none; }
  html.web .top { padding: 14px 0; min-height: 72px; }
  html.web .tabs {
    top: 13px; bottom: auto; left: 50%; right: auto; width: auto; max-width: none; margin: 0;
    transform: translateX(-50%); grid-template-columns: repeat(5, auto); gap: 4px; padding: 5px; border-radius: var(--r-card);
  }
  html.web .tabs a { flex-direction: row; gap: 7px; padding: 9px 14px; font-size: 13.5px; border-radius: var(--r-ctl); }
  html.web .tabs svg { width: 19px; height: 19px; }
  html.web .toast { left: 50%; right: auto; bottom: 28px; width: min(420px, calc(100vw - 32px)); transform: translateX(-50%); }
  html.web .buybar { bottom: 0; max-width: 820px; }

  html.web #view { max-width: 640px; margin: 0 auto; }
  html.web body[data-screen="category"] #view { max-width: 820px; }
  html.web body[data-screen="home"] #view { max-width: none; }

  html.web .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  html.web .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.web .catalog-search { max-width: 520px; }
  /* Два баннера рядом вместо одного во всю ширину: 16:9 на 1056px заняли бы весь экран. */
  html.web .banner-slide { flex-basis: calc(50% - 5px); }
  html.web .banner-slide:only-child { flex-basis: 100%; aspect-ratio: 3 / 1; }
  html.web .home-balance { min-height: 112px; padding: 14px 18px 14px 24px; }
  html.web .home-balance .amount { font-size: 30px; }
  /* Декор нарисован под ширину телефона: на широкой карточке держим его у правого края
     в родных пропорциях, иначе блик и кошелёк расползаются по всей полосе. */
  html.web .home-balance .balance-art { left: auto; right: 0; width: 420px; }
  html.web .home-balance .wallet-art { width: 84px; right: 16px; }
  html.web .home-guest .guest-title { font-size: 22px; }
  html.web .login { margin-top: 32px; }

  @media (hover: hover) {
    html.web .tile:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-md); }
    html.web .tabs a:not(.on):not([data-tab="loyalty"]):hover { color: var(--ink); background: var(--surface-2); }
  }
}

/* --- экран подписки на канал: кнопки внизу, меню скрыто, пока клиент не подписан --- */
body[data-route="subscribe"] .tabs { display: none; }
body[data-route="subscribe"] { padding-bottom: 200px; }
.sub-screen { margin-top: 8px; }
.sub-bar {
  position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 4;
  display: grid; gap: 10px; padding: 12px 16px 4px;
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.sub-bar .btn { min-height: 52px; font-size: 16px; }
@media (min-width: 600px) { .sub-bar { max-width: 560px; margin: 0 auto; } }

/* --- успех и отзыв --- */
.success-mark { display: grid; place-items: center; gap: 10px; margin: 6px 0 18px; text-align: center; }
.success-mark svg { width: 72px; height: 72px; }
.success-mark circle { fill: none; stroke: var(--leaf); stroke-width: 3; stroke-dasharray: 152; stroke-dashoffset: 152; animation: ring .5s ease-out forwards; }
.success-mark path { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick .35s .4s ease-out forwards; }
.success-mark b { font-size: 18px; color: var(--forest); }
@keyframes ring { to { stroke-dashoffset: 0; } }
@keyframes tick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .success-mark circle, .success-mark path { animation: none; stroke-dashoffset: 0; }
}
.review-box { display: grid; gap: 10px; margin-top: 14px; }
.review-box b { font-size: 16px; }
.stars { display: flex; gap: 4px; }
.star { background: none; border: 0; padding: 4px; font-size: 30px; line-height: 1; cursor: pointer; color: var(--line); transition: color .12s ease, transform .12s ease; }
.star:hover { transform: scale(1.08); }
.star.on { color: #F0A81E; }
.review-box textarea.input { resize: vertical; min-height: 56px; }
.review-done { margin-top: 14px; text-align: center; color: var(--forest); font-weight: 700; }

/* --- экран категории: нижнее меню уступает место кнопке покупки --- */
/* На выборе товара внизу уже стоит своя панель (.buybar) с итогом и
   действием. Плавающее меню висело прямо под ней: два прижатых друг к
   другу блока съедали треть экрана телефона, последний ряд товаров
   уходил под них, а сам переход «витрина → товар» это уже уход вглубь —
   возврат там даёт «Ба каталог» в шапке и кнопка «Назад» Telegram.
   Меню прячем, и .buybar опускается на его место. */
body[data-screen="category"] .tabs { display: none; }
body[data-screen="category"] .buybar { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1000px) {
  /* На компьютере меню живёт в шапке и кнопке снизу не мешает — там
     прятать нечего, иначе экран остался бы вовсе без навигации. */
  html.web body[data-screen="category"] .tabs { display: grid; }
  html.web body[data-screen="category"] .buybar { bottom: 0; }
}


/* --- Кошелёк: пополнение одним блоком ------------------------------------
   Было четыре этажа подряд — заголовок, ряд пресетов, подписанное поле
   «или своя сумма» и подсказка, — и экран переставал помещаться в телефон:
   список заявок уезжал под плавающее меню. Сумма и пресеты это один вопрос
   («сколько»), поэтому они живут в одной карточке: крупное поле сверху,
   быстрые суммы под ним. Нажатие на пресет только подставляет число в то же
   поле, так что место ответа всегда одно. */
.topup-box {
  display: grid; gap: 12px; margin-top: 14px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-sm);
}
.topup-label {
  font-size: 12px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted);
}
/* Поле-сумма: рамка у обёртки, а не у input, чтобы «см» стояло внутри рамки
   и не уезжало при длинном числе. */
.topup-amount {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 14px 12px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.topup-amount:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--tint); }
.topup-amount input {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: none; background: none; padding: 0;
  font-family: var(--font-money); font-weight: 700; font-size: 34px; line-height: 1.1;
  letter-spacing: -.8px; color: var(--forest); font-variant-numeric: tabular-nums;
}
.topup-cur { font-family: var(--font-money); font-weight: 600; font-size: 17px; color: var(--muted); }
.topup-help { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.topup-go { margin-top: 14px; }

/* Неоплаченная заявка — единственное, что осталось от списка на этом экране:
   клиент, закрывший реквизиты, должен найти дорогу назад к оплате. */
.topup-open {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--warn); border-radius: var(--r-card);
  background: var(--warn-bg); color: var(--warn);
}
.topup-open__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.topup-open b { display: block; font-size: 14px; }
.topup-open small { display: block; font-size: 12px; opacity: .85; }
.topup-open__sum { font-family: var(--font-money); font-weight: 700; font-variant-numeric: tabular-nums; }
.topup-open:active { filter: brightness(.97); }

/* Меню на экране пополнения не нужно: внизу стоит кнопка «Пур кардан», и
   две панели подряд снова съедали бы экран. Уйти с экрана есть чем —
   «Назад» Telegram, а на сайте кнопка «Назад» в шапке. */
body[data-screen="walletScreen"] .tabs { display: none; }
/* Нижний отступ страницы — это запас под плавающее меню. Меню здесь нет,
   значит и запас не нужен: с ним экран оставался длиннее телефона и
   прокручивался впустую. */
body[data-screen="walletScreen"] { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1000px) {
  /* На компьютере меню живёт в шапке и ничему не мешает. */
  html.web body[data-screen="walletScreen"] .tabs { display: grid; }
  html.web body[data-screen="walletScreen"] { padding-bottom: 64px; }
}


/* --- выбор товаров: снять выбор ------------------------------------------
   Тап по выбранной карточке снимает её, а «минус» на единице убирает товар
   совсем — обе возможности были, но невидимые. Здесь им дана форма: иконка
   корзины вместо минуса на последней штуке и «Тоза кардан» в строке итога,
   когда выбрано хоть что-то. Подтверждения нет намеренно: вернуть выбор —
   один тап, а диалог на каждое нажатие мешал бы чаще, чем спасал. */
.buybar .sum-left { display: flex; align-items: center; gap: 10px; }
.cart-clear {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; margin: -4px 0;
  border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.cart-clear svg { width: 13px; height: 13px; }
.cart-clear[hidden] { display: none; }
.cart-clear:active { background: var(--surface-2); color: var(--ink); }

.product .pq button.pq-remove { display: grid; place-items: center; }
.product .pq button.pq-remove svg { width: 19px; height: 19px; }

/* --- номер клиента в профиле ---------------------------------------------
   Строка-кнопка: нажатие копирует номер в буфер. Номер набран денежным
   шрифтом с tabular-nums — это цифры, которые человек диктует вслух, и
   ведущие нули не должны прыгать по ширине. */
.client-no { display: flex; align-items: center; gap: 12px; text-align: left; }
.client-no .t small {
  display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted);
}
.client-no__value {
  font-family: var(--font-money); font-weight: 700; font-size: 15px;
  color: var(--forest); font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
.client-no .go svg { width: 19px; height: 19px; }
.client-no:active { background: var(--surface-2); }

/* Номер клиента рядом с именем в шапке профиля: цифры денежным шрифтом и в
   цвете чернил, чтобы читались раньше @username, который они дополняют. */
.profile-no {
  font-family: var(--font-money); font-weight: 700; color: var(--forest);
  font-variant-numeric: tabular-nums; letter-spacing: .2px;
}

/* --- вход через Google ----------------------------------------------------
   Кнопку рисует сам Google в iframe, поэтому стилизуем только место под неё и
   разделитель «или» между двумя способами входа. */
.login-or {
  display: flex; align-items: center; gap: 12px; margin: 18px auto 14px; max-width: 34ch;
  color: var(--muted); font-size: 13px;
}
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-or[hidden] { display: none; }
/* Две кнопки входа одного размера. Google рисует свою кнопку сам и фиксированной высоты
   (size large = 40px), поэтому под неё подогнана кнопка Telegram, а общая ширина задана
   обёрткой: ширину кнопке Google отдаёт js по ширине этого же блока. */
.login-auth { max-width: 400px; margin: 0 auto; }
.login-auth .login-btn { height: 40px; min-height: 40px; padding: 0 16px; font-size: 15px; }
.login-auth .login-btn img { width: 22px; height: 22px; }
.g-login, .g-link { display: flex; justify-content: center; min-height: 40px; margin: 0 auto; max-width: 400px; }
.g-login[hidden] { display: none; }
.g-link { margin-top: 10px; }

/* Связанные аккаунты: строка Google и кнопка «Подключить» у Telegram. */
.linked-row + .linked-row { margin-top: 10px; }
.linked-google {
  display: grid; place-items: center; font-weight: 800; font-size: 20px;
  background: var(--surface-2); color: var(--ink);
}
.linked-row .btn.sm { padding: 9px 14px; font-size: 14px; flex: none; }
.login-error { color: var(--danger); font-weight: 600; }


/* --- чек: что именно приложено ---------------------------------------------
   После выбора файла вместо имени показывается сам снимок. Клиент видит, что
   прикладывает, и может заменить или убрать его до отправки. Тап по миниатюре
   раскрывает снимок на всю ширину. */
.rprev {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 12px;
  border: 1.5px solid var(--green); border-radius: var(--r-ctl); background: var(--surface);
}
.rprev[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .rprev:not([hidden]) { animation: rprev-in .35s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes rprev-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.rthumb {
  position: relative; width: 72px; height: 96px; padding: 0; border: 0; overflow: hidden; cursor: zoom-in;
  border-radius: 12px; background: var(--surface-2);
}
.rthumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.rthumb.noprev { display: grid; place-items: center; color: var(--green); }
.rthumb.noprev svg { width: 32px; height: 32px; fill: currentColor; }
.rinfo { min-width: 0; display: grid; gap: 2px; justify-items: start; }
.rok { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 700; font-size: 13px; }
.rok svg { width: 16px; height: 16px; }
.rfn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rsz { color: var(--muted); font-size: 12.5px; }
.ractions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-width: 100%; }
.rbtn {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.rbtn:active { background: var(--surface-2); }
.rbtn-del { color: var(--danger); }
.rprev.open { grid-template-columns: 1fr; }
.rprev.open .rthumb { width: 100%; height: auto; cursor: zoom-out; }
.rprev.open .rthumb img { height: auto; max-height: 60vh; object-fit: contain; }
.rprev.open .rinfo { justify-items: stretch; }


/* Ссылки внизу главной на сайте: индексируемые страницы (каталог, о сервисе, политика) должны
   быть достижимы с корня настоящими ссылками. Политика на главной нужна и Google для проверки входа. */
.home-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 26px 0 4px; font-size: 13px; }
.home-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.home-links a:hover { color: var(--ink); }