/*
 * Кошелёк поверх дизайн-системы app.css: компоненты кабинета и премиальный слой.
 * Палитра по-прежнему монохромная (чёрный, графит, белый), цвет есть только у статусов.
 * Заливки сплошные, без градиентов: блоки (--block), кнопки второго плана и значки (--raised),
 * основные кнопки, активные вкладки и переключатели (--platinum).
 * Обводок нет: блоки, кнопки и значки отделяются друг от друга только тоном.
 * Металл остался только там, где он изображает предмет:
 *  - банковская карта: градиент, блик, чип и светлая кромка (--metal-edge);
 *  - «жидкий металл» на карте и в блоке баланса рисует шейдер core/metal.js (<canvas data-metal>);
 *  - цифра баланса — стальной градиент по тексту.
 * Размеры компактные, по сетке панели Widemade: кнопки 36 / 30 / 42, поля 44, текст 13–14.
 * Нажатие кнопок (продавливание) делает core/press.js.
 */
:root {
  --block: #131313;
  --raised: #222222;
  --raised-hover: #2b2b2b;
  --platinum: #ffffff;
  --platinum-hover: #e4e4e6;
  --metal-edge: linear-gradient(160deg, rgb(255 255 255 / .17), rgb(255 255 255 / .04) 28%, rgb(255 255 255 / .015) 58%, rgb(255 255 255 / .09));
  --steel-text: linear-gradient(180deg, #ffffff 0%, #ffffff 38%, #a6a6ab 100%);
  --chip-metal: linear-gradient(135deg, #f2f2f2 0%, #9a9a9c 38%, #e3e3e4 58%, #77777a 100%);
}

@layer components {
  /* ================= Логотип (core/logo.js) ================= */
  .logo-mark { display: block; flex-shrink: 0; overflow: visible; color: #fff; }
  .logo-hex { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ui-ease); will-change: transform; }
  .brand:hover .logo-hex, .brand:focus-visible .logo-hex { transform: scale(1.08); }
  .logo-intro .logo-hex { animation: logo-stem-in .9s var(--ui-ease) both; }

  /* Плашка уровня Pro: серебро. Градиент здесь — исключение из сплошных заливок, по просьбе владельца */
  /* Плашка уровня Premium: золото, тот же приём, что у серебряной плашки Pro */
  .badge-premium { background: linear-gradient(120deg, #fbe7a6 0%, #d4a53c 34%, #f6dc8e 56%, #b88a26 100%); color: #1a1204; font-weight: 600; }
  .badge-pro { background: linear-gradient(120deg, #f6f6f8 0%, #b4b4bb 34%, #ededf0 56%, #9f9fa7 100%); color: #0b0b0c; font-weight: 600; }

  /* ================= Нажимаемые элементы ================= */
  /*
   * Всё, что продавливается при нажатии (тот же список, что SELECTOR в core/press.js), всегда рисуется по целым пикселям.
   * Плитки и кнопки часто стоят на дробных пикселях (пять плиток в сетке 1200px — по 228,8px). Пока элемент масштабируется,
   * браузер рисует его по целым пикселям, в покое — по дробным, и текст на нём при нажатии сдвигался на пиксель.
   * С will-change разницы между этими состояниями нет.
   */
  button, .btn, .press, [role="button"],
  a.nav-link, a.tab, a.legal-tab, a.link-card, a.tile-link, a.svc-tile, a.action, a.vcard-mini, a.copy-row, a.back-link, a.tabbar-item, a.popover-item { will-change: transform; }

  /* ================= Белые и графитовые элементы ================= */
  .btn-primary, .badge-light, .chip[aria-pressed="true"], .chip.is-active, .segment[aria-checked="true"], .legal-tab.is-active, .choice[aria-pressed="true"] { background: var(--platinum); color: #000; }
  .btn-primary:hover, .btn-primary:focus-visible { background: var(--platinum-hover); }
  .btn-secondary { background: var(--raised); }
  .btn-secondary:hover, .btn-secondary:focus-visible { background: var(--raised-hover); }
  .switch[aria-checked="true"], .params-toggle[aria-checked="true"] .switch { background: var(--platinum); }
  .num { font-variant-numeric: tabular-nums; }
  /* Знак валюты светлее цифр */
  .cur { color: var(--ui-muted); font-weight: 500; }

  /* ================= Вкладки-сегменты ================= */
  .tabs { display: inline-flex; max-width: 100%; gap: 3px; padding: 3px; border-radius: 14px; background: var(--ui-surface-1); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  /* Края прокручиваемой ленты уходят в прозрачность, пока за ними есть содержимое (ui.js → bindScrollFade) */
  [data-fade="end"] { mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  [data-fade="start"] { mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); }
  [data-fade="both"] { mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
  .tabs-fill { display: flex; }
  .tabs-fill .tab { flex: 1 1 0; }
  .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
  }
  .tab .icon { width: 15px; height: 15px; }
  .tab:hover, .tab:focus-visible { background: var(--ui-surface-3); color: var(--ui-fg); outline: none; }
  .tab[aria-selected="true"], .tab.is-active { background: var(--platinum); color: #000; }
  .tabs-sm .tab { height: 28px; padding: 0 10px; font-size: 12px; }
  .card .tabs, .modal-panel .tabs { background: rgb(255 255 255 / .05); }
  .card .tab:hover, .modal-panel .tab:hover { background: rgb(255 255 255 / .07); }
  .card .tab[aria-selected="true"], .modal-panel .tab[aria-selected="true"] { background: var(--platinum); }
  .tabs .legal-tab { height: 32px; }

  /* ================= Формы ================= */
  .field-hint { margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--ui-muted); }
  .field-unit { position: absolute; right: 14px; top: 50%; color: var(--ui-muted); font-size: 14px; pointer-events: none; translate: 0 -50%; }
  .has-unit .field { padding-right: 40px; }
  textarea.field { height: auto; min-height: 92px; padding-top: 12px; padding-bottom: 12px; line-height: 1.5; resize: vertical; }
  .float-field textarea.field + label { top: 14px; transform: none; }
  input.field::-webkit-outer-spin-button, input.field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  /* Поля в окнах и карточках: полупрозрачные, чтобы читался металл подложки */
  .modal-panel .field, .card .field { background: rgb(255 255 255 / .06); }
  .modal-panel .field:hover, .card .field:hover { background: rgb(255 255 255 / .08); }
  .modal-panel .field:focus, .card .field:focus { background: rgb(255 255 255 / .1); }
  .modal-panel .field[readonly], .card .field[readonly] { background: rgb(255 255 255 / .03); }

  /* Выпадающий список с подписью внутри, как у полей */
  .select-btn.is-field { position: relative; width: 100%; height: 44px; padding: 16px 36px 1px 14px; font-size: 14px; }
  .select-btn.is-field::before { content: attr(data-label); position: absolute; left: 14px; top: 6px; color: var(--ui-muted); font-size: 10.5px; line-height: 1.2; }
  .select-btn.is-field > .icon { position: absolute; right: 12px; top: 50%; margin-top: -8px; }
  .select-btn.is-compact { height: 30px; min-width: 0; padding: 0 7px 0 10px; border-radius: var(--ui-radius-sm); font-size: 12px; gap: 5px; }
  .select-btn.is-compact > .icon { width: 14px; height: 14px; }
  .modal-panel .select-btn, .card .select-btn { background: rgb(255 255 255 / .06); }
  .modal-panel .select-btn:hover, .modal-panel .select-btn.is-open, .card .select-btn:hover, .card .select-btn.is-open { background: rgb(255 255 255 / .1); }

  .file-drop { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 18px; background: rgb(255 255 255 / .06); text-align: left; cursor: pointer; transition: background-color .2s; }
  .file-drop:hover, .file-drop:focus-within { background: rgb(255 255 255 / .1); }
  .file-drop strong { display: block; font-size: 13px; font-weight: 500; color: var(--ui-fg); }
  .file-drop small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--ui-muted); }

  /* ================= Иконки сервисов, флаги, теги ================= */
  .svc-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--raised); color: var(--ui-fg-strong); flex-shrink: 0; overflow: hidden; }
  .svc-icon .icon { width: 50%; height: 50%; }
  .svc-icon-xs { width: 22px; height: 22px; }
  .svc-icon-sm { width: 28px; height: 28px; }
  .svc-icon-lg { width: 44px; height: 44px; }
  .flag { display: block; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
  .card-icon { background: var(--raised); }
  .card-icon.is-sm { width: 32px; height: 32px; border-radius: 10px; }
  .card-icon.is-sm .icon { width: 16px; height: 16px; }

  .tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 9px; background: rgb(255 255 255 / .06); color: var(--ui-fg); font-size: 12px; font-weight: 500; white-space: nowrap; }
  .tag .icon { width: 13px; height: 13px; color: var(--ui-muted); }
  .check-list { display: flex; flex-direction: column; gap: 8px; }
  .check-list li { display: flex; align-items: flex-start; gap: 9px; color: #cfcfcf; font-size: 13px; line-height: 1.45; }
  .check-list .icon { width: 15px; height: 15px; margin-top: 2px; color: var(--ui-fg-strong); }

  /* ================= Металлическая карта ================= */
  .vcard {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1.586;
    padding: 6.2% 6.8%;
    border: 1px solid transparent;
    border-radius: 20px;
    /* Фон на случай без WebGL: статичный металл */
    background: linear-gradient(135deg, #3b3b3d 0%, #1d1d1f 42%, #0c0c0d 72%, #2a2a2c 100%) padding-box, var(--metal-edge) border-box;
    color: #fff;
    text-align: left;
    overflow: hidden;
    container-type: inline-size;
    isolation: isolate;
  }
  .vcard > canvas[data-metal] { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ui-ease), filter 1.1s var(--ui-ease); }
  .vcard > canvas[data-metal].is-ready { opacity: 1; }
  /* Блик: стоит в левом верхнем углу, у наклоняемой карты идёт за курсором (--mx, --my) */
  .vcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at var(--mx, 12%) var(--my, -10%), rgb(255 255 255 / .16), rgb(255 255 255 / 0) 58%), linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / .32) 100%); pointer-events: none; }
  .vcard-top, .vcard-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
  .vcard-bottom { align-items: flex-end; justify-content: flex-start; }
  .vcard-number, .vcard-meta, .vcard-balance, .vcard-logo { display: block; }
  .vcard-brand { display: inline-flex; align-items: center; gap: 7px; font-size: clamp(12px, 4.2cqw, 15px); font-weight: 600; letter-spacing: -.01em; }
  .vcard-brand .logo-mark { color: currentColor; width: clamp(15px, 5.2cqw, 20px); height: auto; }
  /* Логотип платёжной системы в левом верхнем углу карты. Синяя Visa на тёмном металле не читается — там она белая. */
  .vcard-pay { display: block; width: auto; }
  .vcard-pay.is-visa { height: clamp(13px, 5.2cqw, 20px); filter: brightness(0) invert(1); }
  .vcard-pay.is-mastercard { height: clamp(24px, 9.4cqw, 36px); }
  .vcard[data-finish="platinum"] .vcard-pay.is-visa { filter: none; }
  /* Чип: металлическая площадка с контактами (линии рисует svg из core/ui.js). */
  .vcard-chip { display: block; width: 12.5cqw; max-width: 48px; aspect-ratio: 44 / 34; border-radius: 20%; background: var(--chip-metal); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .55), 0 1px 2px rgb(0 0 0 / .35); fill: none; stroke: rgb(0 0 0 / .42); stroke-width: 1; flex-shrink: 0; }
  .vcard-chip rect { fill: rgb(255 255 255 / .14); }
  .vcard-number { font-family: var(--ui-font-mono); font-size: clamp(13px, 5.4cqw, 21px); letter-spacing: .09em; white-space: nowrap; text-shadow: 0 1px 1px rgb(0 0 0 / .45); }
  .vcard-meta small, .vcard-balance small { display: block; color: rgb(255 255 255 / .5); font-size: clamp(7.5px, 2.4cqw, 9.5px); letter-spacing: .13em; text-transform: uppercase; }
  .vcard-meta strong { display: block; margin-top: 2px; font-size: clamp(10.5px, 3.5cqw, 13.5px); font-weight: 500; letter-spacing: .05em; white-space: nowrap; }
  /* Баланс на карте (хаб карт): между логотипом и номером */
  .vcard-balance strong { display: block; margin-top: 1px; font-size: clamp(17px, 7.4cqw, 28px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; text-shadow: 0 1px 1px rgb(0 0 0 / .45); }
  .vcard-logo { margin-left: auto; line-height: 1; }
  .vcard-visa { font-size: clamp(17px, 6.6cqw, 26px); font-style: italic; font-weight: 800; letter-spacing: -.03em; }
  .vcard-mastercard { display: block; width: clamp(32px, 12cqw, 46px); aspect-ratio: 1.618; }
  /* Угол карты: чип, у замороженной карты на его месте плашка «Заморожена» (она стоит поверх льда) */
  .vcard-corner { display: grid; justify-items: end; align-items: start; flex-shrink: 0; }
  .vcard-corner > * { grid-area: 1 / 1; }
  .vcard-chip { transition: opacity .5s var(--ui-ease); }
  .vcard-state { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 9px; background: rgb(255 255 255 / .16); font-size: 11px; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transform: scale(.9); transition: opacity .35s var(--ui-ease), transform .35s var(--ui-ease), visibility 0s .35s; }
  .vcard-state .icon { width: 13px; height: 13px; }
  .vcard.is-frozen .vcard-state { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ui-ease) .55s, transform .45s var(--ui-ease) .55s, visibility 0s; }
  .vcard.is-frozen .vcard-chip { opacity: 0; }
  /*
   * Замороженная карта: металл темнеет, уходит в холодный синий тон и останавливается (core/metal.js → data-hold).
   * Иней по краям и снег рисует core/frost.js на своих холстах: .vcard-ice — внутри карты, над металлом и под реквизитами,
   * .vcard-snow — в сцене поверх карты (выходит за её края). При разморозке иней гаснет здесь, через opacity.
   */
  .vcard.is-frozen > canvas[data-metal] { filter: sepia(.8) hue-rotate(178deg) saturate(1.9) brightness(.46); }
  .vcard-ice { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; opacity: 0; filter: drop-shadow(0 0 2.5px rgb(110 184 255 / .4)); pointer-events: none; transition: opacity .7s var(--ui-ease); }
  .vcard.is-frozen .vcard-ice { opacity: 1; transition-duration: .25s; }
  .vcard-snow { position: absolute; z-index: 2; display: block; pointer-events: none; }
  /* Платина: светлая карта с тёмным текстом */
  .vcard[data-finish="platinum"] { background: linear-gradient(135deg, #f6f6f7 0%, #c2c2c6 40%, #e9e9eb 66%, #9d9da2 100%) padding-box, var(--metal-edge) border-box; color: #0c0c0d; }
  .vcard[data-finish="platinum"] .vcard-meta small, .vcard[data-finish="platinum"] .vcard-balance small { color: rgb(0 0 0 / .5); }
  .vcard[data-finish="platinum"] .vcard-number, .vcard[data-finish="platinum"] .vcard-balance strong { text-shadow: 0 1px 0 rgb(255 255 255 / .55); }
  .vcard[data-finish="platinum"] .vcard-chip { background: linear-gradient(135deg, #d8d8da 0%, #77777a 40%, #c5c5c8 60%, #5c5c60 100%); }
  .vcard[data-finish="platinum"] .vcard-state { background: rgb(0 0 0 / .12); }
  .vcard[data-finish="platinum"]::before { background: radial-gradient(90% 120% at var(--mx, 12%) var(--my, -10%), rgb(255 255 255 / .5), rgb(255 255 255 / 0) 58%), linear-gradient(180deg, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / .28) 100%); }
  /* Тёмное серебро (Pro): тёмная сталь с серебряным блеском, текст белый */
  .vcard[data-finish="silver"] { background: linear-gradient(135deg, #8e8e94 0%, #3d3d41 38%, #1f1f22 62%, #a4a4aa 100%) padding-box, var(--metal-edge) border-box; }
  .vcard[data-finish="silver"] .vcard-number, .vcard[data-finish="silver"] .vcard-balance strong { text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
  .vcard[data-finish="silver"] .vcard-chip { background: linear-gradient(135deg, #e6e6ea 0%, #8a8a8f 40%, #d3d3d8 60%, #6a6a6f 100%); }
  /* Тёмное золото (Premium): бронза с шампанским блеском, текст светлый */
  .vcard[data-finish="gold"] { background: linear-gradient(135deg, #c9a24b 0%, #6b4f17 38%, #2e2108 62%, #d9b765 100%) padding-box, var(--metal-edge) border-box; color: #fff7e0; }
  .vcard[data-finish="gold"] .vcard-meta small, .vcard[data-finish="gold"] .vcard-balance small { color: rgb(255 240 200 / .62); }
  .vcard[data-finish="gold"] .vcard-number, .vcard[data-finish="gold"] .vcard-balance strong { text-shadow: 0 1px 2px rgb(40 24 0 / .55); }
  .vcard[data-finish="gold"] .vcard-chip { background: linear-gradient(135deg, #fbe7a6 0%, #b8892a 40%, #efd183 60%, #8a6414 100%); }
  .vcard[data-finish="steel"] { background: linear-gradient(135deg, #5a5a5e 0%, #2b2b2e 45%, #17171a 75%, #3c3c40 100%) padding-box, var(--metal-edge) border-box; }
  button.vcard { cursor: pointer; }
  /* Наклон за курсором: --rx, --ry задаёт core/ui.js → bindCardTilt */
  .vcard-stage { position: relative; perspective: 1100px; }
  /*
   * Первый экран лендинга: сверху две карты (задняя чуть повёрнута), книзу они растворяются в фоне,
   * и на это затухание заходит заголовок. Поля у .hero-cards нужны, чтобы маска не обрезала повёрнутую заднюю карту.
   */
  /* Первый экран занимает всю высоту окна (минус шапка 56px): следующий раздел появляется только после прокрутки. */
  .hero { position: relative; min-height: calc(100dvh - 56px); padding-top: 8px; }
  /* На ПК карты, заголовок и кнопки опущены: отступ растёт с высотой окна, свечение остаётся у верхнего края. */
  @media (min-width: 1024px) { .hero { padding-top: clamp(28px, 8vh, 96px); } }
  /* Мягкое светлое свечение сверху: эллипс за картами, заходит под шапку. */
  .hero::before { content: ""; position: absolute; top: -90px; left: 50%; width: min(980px, 100vw); height: 520px; transform: translateX(-50%); background: radial-gradient(ellipse 50% 62% at 50% 0%, rgb(255 255 255 / .2), rgb(255 255 255 / .07) 45%, rgb(255 255 255 / 0) 72%); pointer-events: none; }
  .hero-cards { width: min(540px, 100%); margin: 0 auto; padding: 78px 80px 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%); mask-image: linear-gradient(to bottom, #000 30%, transparent 92%); }
  .hero-text { margin-top: -84px; }
  .card-stack { position: relative; }
  .card-stack > .vcard { z-index: 1; }
  .card-stack-back { position: absolute; inset: 0; transform: translate(13%, -17%) rotate(9deg) scale(.94); filter: brightness(.82); }
  @media (max-width: 640px) { .hero-cards { padding: 62px 44px 0; } .hero-text { margin-top: -56px; } .card-stack-back { transform: translate(8%, -15%) rotate(8deg) scale(.94); } }
  /* Логотип платёжной системы: цветная картинка на белой плашке, чтобы читалась на тёмном фоне. */
  .pay-badge { display: inline-grid; place-items: center; width: 42px; height: 28px; padding: 5px 6px; border-radius: 8px; background: #fff; flex-shrink: 0; }
  .pay-badge img { display: block; max-width: 100%; max-height: 100%; }
  /* Подпись с логотипом в плитке выбора: мельче обычной подписи плитки, чтобы «MASTERCARD» не наезжал на галочку */
  .pick-label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; letter-spacing: .01em; }
  .pick-label .pay-badge { width: 36px; height: 24px; padding: 4px 5px; border-radius: 7px; }
  .pick-item[aria-checked="true"] .pay-badge { background: #f1f1f2; }
  .vcard.is-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ui-ease); will-change: transform; }
  /* Уменьшенная карта (главная): логотип, чип и последние цифры, остальные данные стоят рядом текстом */
  .vcard.is-compact { padding: 8% 8.5%; border-radius: 14px; }
  .vcard.is-compact .vcard-pay.is-visa { height: clamp(10px, 9.5cqw, 15px); }
  .vcard.is-compact .vcard-pay.is-mastercard { height: clamp(17px, 16cqw, 26px); }
  .vcard.is-compact .vcard-chip { width: 17cqw; max-width: 30px; }
  .vcard.is-compact .vcard-number { font-size: clamp(11px, 9.5cqw, 14px); letter-spacing: .07em; line-height: 1.3; }
  .vcard.is-compact .vcard-state { height: 20px; padding: 0 5px; border-radius: 7px; }
  /* Карты ещё нет (главная): тот же металл, но ниже карты; на нём предложение и белая кнопка. Блик приглушён, чтобы текст читался */
  .vcard.is-offer { aspect-ratio: auto; min-height: 176px; gap: 22px; padding: 20px; }
  .vcard.is-offer::before { background: linear-gradient(180deg, rgb(0 0 0 / .2), rgb(0 0 0 / .36)); }
  .vcard-offer-title { max-width: 320px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; text-shadow: 0 1px 2px rgb(0 0 0 / .5); text-wrap: balance; }
  .vcard-mini { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 18px; background: rgb(255 255 255 / .04); text-align: left; transition: background-color .2s; }
  .vcard-mini:hover, .vcard-mini:focus-visible { background: rgb(255 255 255 / .07); }
  .vcard-mini[aria-pressed="true"] { background: rgb(255 255 255 / .11); }
  .vcard-mini strong { display: block; font-size: 13px; font-weight: 500; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
  .vcard-mini small { display: block; font-size: 11.5px; color: var(--ui-muted); }

  /* ================= Баланс ================= */
  .balance-amount { width: fit-content; max-width: 100%; background: var(--steel-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(34px, 5vw, 46px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1.08; }
  .balance-amount.is-sm { font-size: clamp(24px, 3.2vw, 30px); }
  .balance-amount .cur { color: #8a8a8f; font-weight: 500; }
  .balance-amount.amount-in { background: none; color: var(--ui-success); }

  /* ================= Операции ================= */
  .op-list { display: flex; flex-direction: column; gap: 1px; }
  .op-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 18px; text-align: left; transition: background-color .15s; }
  .op-row:hover, .op-row:focus-visible { background: rgb(255 255 255 / .05); }
  .op-main { flex: 1; min-width: 0; }
  .op-main strong, .op-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .op-main strong { color: var(--ui-fg); font-size: 13.5px; font-weight: 500; }
  .op-main small { margin-top: 1px; color: var(--ui-muted); font-size: 12px; }
  .op-side { flex-shrink: 0; text-align: right; }
  .op-side strong { display: block; color: var(--ui-fg); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .op-side small { display: block; margin-top: 1px; color: var(--ui-subtle); font-size: 11.5px; white-space: nowrap; }
  .op-side strong.is-in, .amount-in { color: var(--ui-success); }
  .op-group { margin: 18px 10px 6px; color: var(--ui-subtle); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .op-group:first-child { margin-top: 2px; }

  /* История на десктопе — таблица: операция, дата, статус, сумма */
  .tx-head, .tx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 10px; }
  .tx-head { display: none; height: 32px; color: var(--ui-subtle); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .tx-row { width: 100%; min-height: 54px; border-radius: 18px; text-align: left; transition: background-color .15s; }
  .tx-row:hover, .tx-row:focus-visible { background: rgb(255 255 255 / .05); }
  .tx-cell { display: none; min-width: 0; overflow: hidden; color: var(--ui-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
  .tx-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .tx-amount { color: var(--ui-fg); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .tx-amount.is-in { color: var(--ui-success); }
  @media (min-width: 900px) {
    .tx-head, .tx-row { grid-template-columns: minmax(0, 1fr) 150px 118px minmax(104px, auto); gap: 14px; }
    .tx-head { display: grid; }
    .tx-cell { display: block; }
    .tx-main .op-main small .tx-mobile { display: none; }
  }
  /* На широкой сетке колонкам даты, статуса и суммы даётся больше места */
  @media (min-width: 1200px) { .tx-head, .tx-row { grid-template-columns: minmax(0, 1fr) 210px 170px minmax(140px, auto); } }

  .status { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
  .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .status-success { color: var(--ui-success); }
  .status-declined { color: #fca5a5; }
  .live-dot { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-success); flex-shrink: 0; }
  .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: live-pulse 1.8s ease-out infinite; }

  /* ================= Строки данных: расчёт, детали операции, условия ================= */
  .rows { display: flex; flex-direction: column; padding: 4px 14px; border-radius: 20px; background: var(--ui-surface-2); }
  .modal-panel .rows, .card .rows { background: rgb(255 255 255 / .05); }
  .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 38px; padding: 5px 0; font-size: 13px; }
  .row > :first-child { color: var(--ui-muted); }
  .row > :last-child { min-width: 0; color: var(--ui-fg); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
  .row > .status-success { color: var(--ui-success); }
  .row > .status-declined { color: #fca5a5; }
  .row-sep { height: 1px; margin: 3px 0; background: rgb(255 255 255 / .08); }
  .row.is-total > :last-child { color: var(--ui-fg-strong); font-size: 15px; font-weight: 600; }
  .row > .amount-in { color: var(--ui-success); white-space: nowrap; }

  /* ================= Окно пополнения: сумма крупно по центру и цветной баннер бонуса ================= */
  .amount-entry { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .amount-entry-row { position: relative; display: flex; align-items: baseline; justify-content: center; gap: .16em; width: 100%; margin-top: 10px; font-size: clamp(40px, 12vw, 52px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
  .amount-input { width: 1ch; max-width: calc(100% - 1em); height: 1.4em; margin-block: -.15em; padding: 0; line-height: 1.4; border: 0; background: none; color: var(--ui-fg-strong); font: inherit; font-variant-numeric: tabular-nums; letter-spacing: inherit; text-align: right; outline: none; caret-color: var(--ui-success); }
  .amount-input::placeholder { color: var(--ui-subtle); transition: color .25s var(--ui-ease); }
  .amount-input:focus::placeholder { color: transparent; }
  .amount-input.is-invalid { color: #fca5a5; }
  .amount-mirror { position: absolute; visibility: hidden; font-variant-numeric: tabular-nums; white-space: pre; pointer-events: none; }
  .amount-unit { color: #8a8a8f; font-weight: 500; }
  .amount-hint { margin-top: 8px; color: var(--ui-muted); font-size: 12.5px; }
  /* Быстрые суммы в окне: полупрозрачные, иначе сливаются с фоном окна */
  .modal-panel .chip { background: rgb(255 255 255 / .06); }
  .modal-panel .chip:hover, .modal-panel .chip:focus-visible { background: rgb(255 255 255 / .1); }
  /* Единственное цветное пятно: зелёный — цвет пополнений во всём кабинете */
  .bonus-banner, .bonus-hero, .info-hero { position: relative; background: linear-gradient(110deg, #22c55e, #a3e635, #2dd4bf, #22c55e) 0 0 / 300% 100%; color: #04210f; overflow: hidden; isolation: isolate; animation: bonus-flow 9s linear infinite; }
  .bonus-banner::after, .bonus-hero::after, .info-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / .6) 50%, rgb(255 255 255 / 0) 65%); transform: translateX(-120%); animation: bonus-shine 4s var(--ui-ease) infinite; }
  .bonus-banner { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 11px 11px 12px; border-radius: 20px; font-size: 13.5px; font-weight: 600; line-height: 1.35; text-align: left; }
  /* Информационное окно: цветная шапка во всю ширину окна с главной цифрой, крестик стоит поверх неё */
  /* Шапка окна крипто-бонуса — тот же тёмно-синий перелив, что у промо-баннера на главной (.promo) */
  .info-hero { display: grid; place-items: center; height: 150px; margin: -22px -22px 0; background-image: linear-gradient(110deg, #0a1a4a, #1a3fb0, #0c2470, #132f8f, #0a1a4a); color: #fff; animation-duration: 22s; }
  .info-hero::after { background: linear-gradient(105deg, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / .16) 50%, rgb(255 255 255 / 0) 65%); }
  .info-hero strong { font-size: 64px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
  .info-hero-mark { position: absolute; right: -22px; bottom: -40px; z-index: -1; width: 168px; height: 168px; opacity: .14; transform: rotate(-14deg); }
  .modal-panel:has(> .info-hero) .modal-close { color: #fff; }
  .modal-panel:has(> .info-hero) .modal-close:hover, .modal-panel:has(> .info-hero) .modal-close:focus-visible { background: rgb(255 255 255 / .14); color: #fff; }
  /* Плашка с главной цифрой в виде «бонусы» окна пополнения: цвета и блик — как у .bonus-banner */
  .bonus-hero { display: grid; place-content: center; justify-items: center; gap: 1px; height: 104px; border-radius: 20px; }
  .bonus-hero small { font-size: 13px; font-weight: 600; opacity: .7; }
  .bonus-hero strong { font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
  .bonus-hero-mark { position: absolute; right: -14px; bottom: -30px; z-index: -1; width: 124px; height: 124px; opacity: .16; transform: rotate(-14deg); }
  .bonus-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bonus-tier { display: flex; flex-direction: column; gap: 4px; padding: 11px 14px; border-radius: 18px; background: rgb(255 255 255 / .06); text-align: left; transition: background-color .2s; }
  .bonus-tier:hover, .bonus-tier:focus-visible { background: rgb(255 255 255 / .1); }
  .bonus-tier small { color: var(--ui-muted); font-size: 12px; }
  .bonus-tier strong { color: var(--ui-success); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
  /* В шторке на телефоне шапка доходит до самого верха, чёрточка лежит поверх неё */
  @media (max-width: 639px) {
    .info-hero { margin: -8px -16px 0; }
    /* Свой слой (translate3d + will-change): иначе Safari на iPhone, пока шторка выезжает, рисует чёрточку под анимированной шапкой и показывает её только после остановки */
    .modal-panel:has(> .info-hero) .modal-grabber { position: absolute; top: 8px; left: 50%; z-index: 2; margin: 0; background: rgb(255 255 255 / .32); transform: translate3d(-50%, 0, 0); will-change: transform; }
  }
  .bonus-banner-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 13px; background: rgb(0 0 0 / .14); flex-shrink: 0; animation: bonus-wiggle 4s ease-in-out infinite; }
  .bonus-banner-icon .icon { width: 19px; height: 19px; stroke-width: 1.8; }
  .bonus-banner-more { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 7px 0 12px; border-radius: 11px; background: #04210f; color: #fff; font-size: 12px; font-weight: 500; flex-shrink: 0; }
  .bonus-banner-more .icon { width: 13px; height: 13px; }
  /* Условия карты: серый скруглённый блок, внутри сетка в две колонки — подпись и под ней значение */
  .terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 13px 16px; border-radius: 20px; background: rgb(255 255 255 / .05); }
  .terms-item { min-width: 0; }
  .terms-item small { display: block; color: var(--ui-muted); font-size: 11.5px; line-height: 1.35; }
  .terms-item strong { display: block; margin-top: 2px; color: var(--ui-fg); font-size: 13.5px; font-weight: 500; line-height: 1.35; }
  /* «Бесплатно» — зелёным, как статус */
  .terms-item strong.is-free { color: var(--ui-success); }

  /* ================= Экран нового уровня (modals/level.js) ================= */
  /*
   * Чёрный слой поверх кабинета: проявляется плавно, под ним течёт тёмный металл, по центру по очереди появляются
   * название уровня, что он даёт и что зачислено. Задержку каждого элемента задаёт --d (мс).
   * У анимируемых элементов will-change стоит постоянно: иначе текст сдвигается на пиксель в конце анимации.
   */
  .levelup { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px 16px; background: #000; overflow-y: auto; opacity: 0; transition: opacity .7s var(--ui-ease); }
  .levelup.is-open { opacity: 1; }
  .levelup.is-leaving { opacity: 0; transition: opacity .45s var(--ui-ease-in); }
  .levelup-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
  /* Металл считается в половинном размере и растянут вдвое: на весь экран шейдер иначе слишком тяжёлый */
  .levelup-bg canvas { position: absolute; top: 0; left: 0; display: block; width: 50%; height: 50%; transform: scale(2); transform-origin: 0 0; opacity: 0; transition: opacity 2.4s var(--ui-ease) .3s; }
  .levelup-bg canvas.is-ready { opacity: .75; }
  /* Свет остаётся в середине, края уходят в чёрный */
  .levelup-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 54% at 50% 40%, rgb(0 0 0 / .18), rgb(0 0 0 / .86) 62%, #000 86%); }
  .levelup-body { position: relative; display: flex; flex-direction: column; align-items: center; width: min(420px, 100%); text-align: center; }
  .levelup-body > *, .levelup-row { opacity: 0; will-change: transform; animation: levelup-rise .9s var(--ui-ease) calc(var(--d, 0) * 1ms) both; }
  .levelup-cap { color: var(--ui-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; }
  /* Название уровня: стальной градиент по буквам, проявляется из размытия, затем по буквам проходит блик */
  .levelup-mark {
    margin-top: 10px;
    padding: 0 .08em .06em;
    background: linear-gradient(105deg, rgb(255 255 255 / 0) 42%, #fff 50%, rgb(255 255 255 / 0) 58%) 220% 0 / 240% 100% no-repeat, var(--steel-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(88px, 22vw, 150px);
    font-weight: 600;
    letter-spacing: -.05em;
    line-height: 1;
    animation: levelup-mark 1.5s var(--ui-ease) calc(var(--d, 0) * 1ms) both, levelup-shine 1.8s var(--ui-ease) calc(var(--d, 0) * 1ms + 1300ms) both;
  }
  /* Premium: золотое название уровня и золотая линия */
  .levelup.is-premium .levelup-mark { background: linear-gradient(105deg, rgb(255 255 255 / 0) 42%, #fff6d6 50%, rgb(255 255 255 / 0) 58%) 220% 0 / 240% 100% no-repeat, linear-gradient(180deg, #fff1bd 0%, #e2b650 48%, #9a6f1c 100%); -webkit-background-clip: text; background-clip: text; }
  .levelup.is-premium .levelup-line { background: linear-gradient(90deg, rgb(255 224 140 / 0), rgb(255 224 140 / .7), rgb(255 224 140 / 0)); }
  .levelup-line { width: 132px; height: 1px; margin-top: 18px; background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .55), rgb(255 255 255 / 0)); animation-name: levelup-line; }
  .levelup-title { margin-top: 22px; color: var(--ui-fg-strong); font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; text-wrap: balance; }
  .levelup-text { margin-top: 8px; color: var(--ui-muted); font-size: 14px; line-height: 1.5; text-wrap: balance; }
  .levelup-body > .levelup-list { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 28px; opacity: 1; animation: none; }
  .levelup-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px 11px 11px; border-radius: 20px; background: rgb(255 255 255 / .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-align: left; }
  .levelup-row > span:nth-child(2) { flex: 1; min-width: 0; color: var(--ui-muted); font-size: 13px; }
  .levelup-row > strong { color: var(--ui-fg-strong); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .levelup-row > strong.is-in { color: var(--ui-success); }
  .levelup-body > .levelup-btn { width: 100%; margin-top: 22px; }

  /* ================= Экран выпуска карты ================= */
  /*
   * Слой как у экрана нового уровня. Карта вылетает из глубины, за ней вспыхивает свет, по металлу пробегает блик,
   * вокруг разлетаются искры. Задержку каждого элемента задаёт --d (мс).
   * У анимируемых элементов will-change стоит постоянно: иначе текст сдвигается на пиксель в конце анимации.
   */
  .cardfx { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px 16px; background: #000; overflow-y: auto; opacity: 0; transition: opacity .6s var(--ui-ease); }
  .cardfx.is-open { opacity: 1; }
  .cardfx.is-leaving { opacity: 0; transition: opacity .45s var(--ui-ease-in); }
  .cardfx-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
  .cardfx-bg canvas { position: absolute; top: 0; left: 0; display: block; width: 50%; height: 50%; transform: scale(2); transform-origin: 0 0; opacity: 0; transition: opacity 2.4s var(--ui-ease) .3s; }
  .cardfx-bg canvas.is-ready { opacity: .5; }
  .cardfx-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 52% at 50% 36%, rgb(0 0 0 / .2), rgb(0 0 0 / .88) 60%, #000 86%); }
  .cardfx-body { position: relative; display: flex; flex-direction: column; align-items: center; width: min(420px, 100%); text-align: center; }
  .cardfx-scene { position: relative; display: grid; place-items: center; width: min(340px, 100%); margin-bottom: 34px; perspective: 1100px; }
  .cardfx-glow { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; background: #fff; filter: blur(70px); opacity: 0; will-change: transform; animation: cardfx-glow 2.4s var(--ui-ease) calc(var(--d, 0) * 1ms) both; }
  .cardfx-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
  .cardfx-sparks i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: #fff; opacity: 0; will-change: transform; animation: cardfx-spark 1.7s var(--ui-ease) calc(var(--d, 0) * 1ms) both; }
  .cardfx-card { position: relative; width: 100%; will-change: transform; animation: cardfx-fly 1.5s var(--ui-ease) calc(var(--d, 0) * 1ms) both, cardfx-float 6s ease-in-out calc(var(--d, 0) * 1ms + 1500ms) infinite; }
  .cardfx-card .vcard { max-width: none; box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
  .cardfx-shine { position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .38) 50%, transparent 62%) 0 0 / 250% 100% no-repeat; background-position: 160% 0; opacity: 0; pointer-events: none; animation: cardfx-shine 1.4s var(--ui-ease) calc(var(--d, 0) * 1ms) both; }
  .cardfx-cap, .cardfx-title, .cardfx-text, .cardfx-row, .cardfx-actions { opacity: 0; will-change: transform; animation: levelup-rise .9s var(--ui-ease) calc(var(--d, 0) * 1ms) both; }
  .cardfx-cap { color: var(--ui-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; }
  .cardfx-title { margin-top: 12px; color: var(--ui-fg-strong); font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; }
  .cardfx-text { margin-top: 8px; color: var(--ui-muted); font-size: 14px; line-height: 1.5; text-wrap: balance; }
  .cardfx-list { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 26px; }
  .cardfx-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px 11px 11px; border-radius: 20px; background: rgb(255 255 255 / .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-align: left; }
  .cardfx-row > span:nth-child(2) { flex: 1; min-width: 0; color: var(--ui-muted); font-size: 13px; }
  .cardfx-row > strong { color: var(--ui-fg-strong); font-size: 14px; font-weight: 600; white-space: nowrap; }
  .cardfx-actions { display: flex; gap: 8px; width: 100%; margin-top: 22px; }
  .cardfx-actions .btn { flex: 1; }
  /* Карта на этом экране без обводки: только металл */
  .cardfx-card .vcard { border-width: 0; background: linear-gradient(135deg, #3b3b3d 0%, #1d1d1f 42%, #0c0c0d 72%, #2a2a2c 100%); }
  .cardfx-card .vcard[data-finish="silver"] { background: linear-gradient(135deg, #8e8e94 0%, #3d3d41 38%, #1f1f22 62%, #a4a4aa 100%); }
  .cardfx-card .vcard[data-finish="gold"] { background: linear-gradient(135deg, #c9a24b 0%, #6b4f17 38%, #2e2108 62%, #d9b765 100%); }
  .cardfx-card .vcard[data-finish="platinum"] { background: linear-gradient(135deg, #f6f6f7 0%, #c2c2c6 40%, #e9e9eb 66%, #9d9da2 100%); }
  @media (max-width: 640px) {
    .cardfx { padding: 16px 14px; }
    .cardfx-scene { width: min(264px, 100%); margin-bottom: 22px; }
    .cardfx-card .vcard, .cardfx-shine { border-radius: 16px; }
    .cardfx-title { margin-top: 8px; font-size: 22px; }
    .cardfx-text { margin-top: 6px; font-size: 13px; }
    .cardfx-list { gap: 6px; margin-top: 18px; }
    .cardfx-row { gap: 10px; padding: 8px 14px 8px 8px; border-radius: 18px; }
    .cardfx-row > span:nth-child(2) { font-size: 12.5px; }
    .cardfx-row > strong { font-size: 13px; }
    .cardfx-actions { margin-top: 16px; }
    .cardfx-actions .btn { height: 38px; font-size: 13px; }
  }

  /* ================= Лендинг: блок бонусов ================= */
  /*
   * Две тёмные панели с медленным металлом за стеклом: слева лестница бонусов с полосками, справа бонус за крипту.
   * Цифры — стальной градиент, как у баланса. Без цветных заливок: только графит, металл и белый.
   */
  .lux-panel { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 32px; background: #060607; overflow: hidden; isolation: isolate; }
  .lux-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .lux-bg canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ui-ease); }
  .lux-bg canvas.is-ready { opacity: .62; }
  /* Свет собран слева сверху, края и низ уходят в чёрный: текст и строки остаются читаемыми */
  .lux-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 18% 8%, rgb(0 0 0 / .1), rgb(0 0 0 / .72) 60%, rgb(0 0 0 / .94)); }
  .lux-cap { color: var(--ui-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
  .lux-figure { display: flex; align-items: baseline; gap: 12px; width: fit-content; margin-top: 14px; background: var(--steel-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(52px, 8vw, 84px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
  .lux-figure small { font-size: 16px; font-weight: 500; letter-spacing: 0; opacity: .6; }
  .lux-text { max-width: 440px; margin-top: 14px; color: var(--ui-muted); font-size: 14px; line-height: 1.6; }
  .lux-ladder { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 26px; list-style: none; }
  .lux-step { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 13px 18px; border-radius: 18px; background: rgb(255 255 255 / .045); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .lux-step.is-top { background: rgb(255 255 255 / .1); }
  .lux-from { color: var(--ui-muted); font-size: 13px; white-space: nowrap; }
  .lux-bar { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .1); overflow: hidden; }
  .lux-bar i { display: block; width: var(--w); height: 100%; border-radius: 4px; background: rgb(255 255 255 / .55); }
  .lux-step.is-top .lux-bar i { background: #fff; }
  .lux-step strong { min-width: 78px; color: var(--ui-fg-strong); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .lux-mark { position: absolute; right: -34px; top: -30px; z-index: -1; width: 240px; height: 240px; color: #fff; opacity: .07; transform: rotate(-14deg); }
  .lux-note { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding: 14px 16px; border-radius: 18px; background: rgb(255 255 255 / .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ui-fg); font-size: 13px; line-height: 1.5; }
  .lux-note > .icon { flex: none; margin-top: 1px; color: var(--ui-fg-strong); }
  .lux-btn { width: 100%; margin-top: 10px; }
  @media (max-width: 639px) {
    .lux-panel { padding: 22px 18px; border-radius: 28px; }
    .lux-step { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; padding: 11px 14px; }
  }

  /* ================= Окно выпуска карты ================= */
  /* Одна колонка: карта-образец по центру, выбор системы, регион, условия, пояснение и кнопка */
  .issue { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
  .issue-preview { width: 100%; max-width: 300px; margin: 0 auto 4px; }
  /* Выбор одного варианта крупными плитками: у выбранной галочка */
  .pick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .pick-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: 50px; padding: 0 12px 0 14px; border-radius: 16px; background: rgb(255 255 255 / .06); color: var(--ui-fg); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color .2s, color .2s; }
  .pick-item:hover, .pick-item:focus-visible { background: rgb(255 255 255 / .1); }
  .pick-item .icon { width: 18px; height: 18px; opacity: 0; transition: opacity .2s; }
  .pick-item[aria-checked="true"] { background: var(--platinum); color: #000; }
  .pick-item[aria-checked="true"] .icon { opacity: 1; }

  .note-box { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 18px; background: rgb(255 255 255 / .06); color: var(--ui-fg); font-size: 13px; line-height: 1.45; }
  .note-box > .icon { color: var(--ui-fg-strong); }
  .note-box > span { flex: 1; min-width: 0; }
  /* Предупреждение о проблеме: красное, в тонах статуса «Отклонено» и ошибок форм */
  .note-box.is-danger { background: rgb(248 113 113 / .13); color: #fca5a5; }
  .note-box.is-danger > .icon { color: var(--ui-danger); }
  .note-box.is-danger .btn-danger { background: rgb(248 113 113 / .17); color: #fecaca; }
  .note-box.is-danger .btn-danger:hover, .note-box.is-danger .btn-danger:focus-visible { background: rgb(248 113 113 / .27); }
  .info-block { display: flex; gap: 12px; }
  .info-block strong { display: block; color: var(--ui-fg-strong); font-size: 14px; font-weight: 600; }
  .info-block p { margin-top: 3px; color: var(--ui-muted); font-size: 13px; line-height: 1.55; }

  /* Реквизиты: строка копируется нажатием */
  .copy-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px 6px 14px; border-radius: 18px; background: rgb(255 255 255 / .05); text-align: left; transition: background-color .15s; }
  .copy-row:hover, .copy-row:focus-visible { background: rgb(255 255 255 / .09); }
  .copy-row > span:first-child, .copy-row-main { flex: 1; min-width: 0; text-align: left; }
  .copy-row small { display: block; color: var(--ui-muted); font-size: 10.5px; }
  .copy-row strong { display: block; margin-top: 1px; color: var(--ui-fg); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .copy-row .icon { width: 15px; height: 15px; color: var(--ui-subtle); }
  .copy-row .icon-btn { width: 30px; height: 30px; margin-right: -6px; }
  .code-box { padding: 14px; border-radius: 20px; background: rgb(255 255 255 / .06); color: var(--ui-fg-strong); font-family: var(--ui-font-mono); font-size: 17px; letter-spacing: .06em; text-align: center; overflow-wrap: anywhere; }

  /* ================= Карточки-ссылки и номиналы ================= */
  /*
   * Плитки сервисов на лендинге: название и подпись сверху, крупный знак сервиса в правом нижнем углу.
   * Нажатие меняет сетку плиток на форму сервиса (views/landing.js).
   */
  .service-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  @media (min-width: 768px) { .service-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .service-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .service-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 200px; padding: 20px; border-radius: 28px; background: var(--block); overflow: hidden; text-align: left; transition: filter .25s var(--ui-ease); }
  .service-tile:hover, .service-tile:focus-visible { filter: brightness(1.2); }
  .service-tile strong { position: relative; z-index: 1; color: var(--ui-fg-strong); font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
  .service-tile small { position: relative; z-index: 1; max-width: 16em; margin-top: 6px; color: var(--ui-muted); font-size: 12.5px; line-height: 1.45; }
  .service-tile-art { position: absolute; right: -14px; bottom: -14px; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; background: var(--raised); color: var(--ui-fg-strong); transition: transform .35s var(--ui-ease); }
  .service-tile-art .icon { width: 56px; height: 56px; }
  .service-tile:hover .service-tile-art { transform: translate(-6px, -6px) scale(1.06); }
  @media (max-width: 767px) {
    .service-tile { min-height: 164px; padding: 16px; border-radius: 24px; }
    .service-tile strong { font-size: 14.5px; }
    .service-tile small { display: none; }
    .service-tile-art { width: 92px; height: 92px; }
    .service-tile-art .icon { width: 42px; height: 42px; }
    .service-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  }
  .link-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: var(--ui-radius-block); background: var(--block); text-align: left; transition: filter .2s; }
  .link-card:hover, .link-card:focus-visible { filter: brightness(1.25); }
  .link-card > span:nth-child(2) { flex: 1; min-width: 0; }
  .link-card strong { display: block; color: var(--ui-fg-strong); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
  .link-card small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 12.5px; line-height: 1.45; }
  .link-card > .icon { color: var(--ui-subtle); }

  /*
   * Витрина номиналов (services.js → tileHtml): плитка-«карта» с подписью, ценой в углу и номиналом внизу.
   * Колонки подстраиваются под ширину блока: на лендинге четыре в ряд, в узкой колонке кабинета — две-три.
   */
  .gift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  @media (min-width: 640px) { .gift-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } }
  /* Группа из трёх предложений (подписки и бумажник PlayStation / Xbox): три колонки во всю ширину блока, плитки ниже обычных. */
  @media (min-width: 640px) { .gift-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gift-grid.is-3 .gift-tile { aspect-ratio: auto; min-height: 136px; } }
  @media (max-width: 639px) { .gift-grid.is-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: auto; min-height: 96px; } }
  .gift-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; aspect-ratio: 1.75; padding: 18px 20px; border-radius: 24px; background: var(--block); overflow: hidden; text-align: left; transition: filter .2s var(--ui-ease), transform .2s var(--ui-ease); }
  .card .gift-tile, .pane .gift-tile { background: rgb(255 255 255 / .045); }
  .gift-tile:hover, .gift-tile:focus-visible { filter: brightness(1.25); }
  .gift-tile:active { transform: scale(.97); }
  /* Предоплаченные карты: та же металлическая поверхность, что у наших карт (Visa — графит, Mastercard — платина). Градиент — запас на случай без WebGL. */
  .gift-tile.is-metal { background: linear-gradient(135deg, #3b3b3d 0%, #1d1d1f 42%, #0c0c0d 72%, #2a2a2c 100%); isolation: isolate; }
  .gift-tile.is-metal > canvas { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; opacity: 0; filter: brightness(.5); transition: opacity .9s var(--ui-ease); }
  .gift-tile[data-finish="platinum"] > canvas { filter: brightness(.8); }
  .gift-tile.is-metal > canvas.is-ready { opacity: 1; }
  .gift-tile.is-metal .gift-tile-label { color: rgb(255 255 255 / .72); }
  .gift-tile.is-metal .gift-tile-price { background: rgb(0 0 0 / .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .gift-tile[data-finish="platinum"] { background: linear-gradient(135deg, #f6f6f7 0%, #c2c2c6 40%, #e9e9eb 66%, #9d9da2 100%); }
  .gift-tile[data-finish="platinum"] .gift-tile-label { color: rgb(0 0 0 / .62); }
  .gift-tile[data-finish="platinum"] .gift-tile-bottom strong, .gift-tile[data-finish="platinum"] .gift-tile-bottom .icon { color: #0c0c0d; }
  .gift-tile[data-finish="platinum"] .gift-tile-price { background: rgb(0 0 0 / .78); color: #fff; }
  .gift-tile-price { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgb(255 255 255 / .13); color: var(--ui-fg-strong); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .gift-tile-label { max-width: 62%; color: var(--ui-muted); font-size: 13px; font-weight: 500; line-height: 1.25; }
  .gift-tile-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
  .gift-tile-bottom strong { color: var(--ui-fg-strong); font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
  .gift-tile-bottom strong.is-text { font-size: 18px; letter-spacing: -.02em; line-height: 1.15; }
  .gift-tile-bottom .icon { width: 30px; height: 30px; color: var(--ui-fg); opacity: .9; stroke: none; }
  @media (max-width: 639px) {
    .gift-tile { aspect-ratio: 1.5; padding: 13px 14px; border-radius: 18px; }
    .gift-tile-price { top: 10px; right: 10px; height: 22px; padding: 0 8px; font-size: 11px; }
    .gift-tile-label { font-size: 12px; }
    .gift-tile-bottom strong { font-size: 24px; }
    .gift-tile-bottom strong.is-text { font-size: 15px; }
    .gift-tile-bottom .icon { width: 24px; height: 24px; }
  }
  .nominal { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; background: var(--ui-surface-1); }
  .card .nominal { background: rgb(255 255 255 / .045); }
  .nominal-value { color: var(--ui-fg-strong); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; }
  .nominal-price { margin-top: 3px; color: var(--ui-muted); font-size: 12px; }

  /* ================= Кабинет: шапка с меню, нижнее меню на телефоне ================= */
  /*
   * Шапка — одна полоса меню поверх прокрутки: цвет как у фона страницы, но полупрозрачный и с размытием, содержимое уходит под неё.
   * Прокручивается раздел целиком (.app-main), а не .page-scroll внутри экрана: название раздела на десктопе стоит
   * в той же прокрутке (.app-title.is-page) и уезжает под шапку вместе с содержимым. Высота шапки — --app-header-h.
   */
  .app-shell { position: relative; --app-header-h: 54px; }
  .app-header { position: absolute; inset: 0 0 auto; z-index: 20; background: rgb(0 0 0 / .62); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
  /* Раздел — отдельный слой: ничто из его содержимого не поднимется над шапкой */
  .app-main { isolation: isolate; padding-top: var(--app-header-h); overflow: hidden auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; }
  body[data-layout="app"] .page-scroll { position: static; overflow: visible; scrollbar-gutter: auto; }
  .app-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 54px; }
  .app-header-menu { display: none; }
  .app-header-actions { display: flex; align-items: center; gap: 4px; }
  .app-title { overflow: hidden; color: var(--ui-fg-strong); font-size: 17px; font-weight: 600; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
  .app-title.is-page { display: none; }
  .app-nav { display: flex; align-items: center; gap: 2px; margin-left: 22px; }
  .app-nav .nav-link { height: 36px; border-radius: 12px; }
  .app-nav .nav-link:hover, .app-nav .nav-link:focus-visible { background-color: rgb(255 255 255 / .04); }
  .app-nav .nav-link.is-active { background: var(--raised); color: #fff; }
  /* Десктоп: в шапке логотип, меню разделов и профиль; название раздела — в начале прокрутки, под шапкой */
  @media (min-width: 1024px) {
    .app-shell { --app-header-h: 60px; }
    .app-header-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 60px; column-gap: 16px; height: auto; }
    .app-header-menu { display: flex; align-items: center; min-width: 0; }
    .app-header-actions { grid-area: 1 / 2; }
    .app-header .app-title { display: none; }
    .app-title.is-page { display: block; padding-top: 24px; font-size: 22px; letter-spacing: -.03em; line-height: 1.2; }
    body[data-layout="app"] .page { padding-top: 18px; }
  }
  .bell-btn { position: relative; }
  .bell-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
  .profile-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 190px; height: 34px; padding: 0 10px 0 2px; border-radius: 999px; color: var(--ui-fg); font-size: 13px; font-weight: 500; transition: background-color .2s; }
  .profile-btn:hover, .profile-btn:focus-visible, .profile-btn.is-open { background: var(--ui-surface-3); }
  .profile-btn > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Галочка уровня на аватаре в шапке: золото у Premium, серебро у Pro (градиент — как у плашек уровня) */
  .profile-btn { position: relative; }
  .tier-seal { position: absolute; left: 20px; bottom: 1px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #14100a; box-shadow: 0 1px 4px rgb(0 0 0 / .5); }
  .tier-seal[hidden] { display: none; }
  .tier-seal .icon { width: 10px; height: 10px; stroke-width: 2.4; }
  .tier-seal.is-premium { background: linear-gradient(120deg, #fbe7a6 0%, #d4a53c 40%, #f6dc8e 62%, #b88a26 100%); }
  .tier-seal.is-pro { background: linear-gradient(120deg, #f6f6f8 0%, #b4b4bb 40%, #ededf0 62%, #9f9fa7 100%); }
  /* Плашка уровня на выпущенной карте: PRO или PREMIUM рядом с логотипом системы */
  .vcard-tier { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 7px; color: #14100a; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-indent: .1em; line-height: 1; }
  .vcard-tier.is-pro { background: linear-gradient(120deg, #f6f6f8 0%, #b4b4bb 34%, #ededf0 56%, #9f9fa7 100%); }
  .vcard-tier.is-premium { background: linear-gradient(120deg, #fbe7a6 0%, #d4a53c 34%, #f6dc8e 56%, #b88a26 100%); }
  .vcard.is-compact .vcard-tier { height: 14px; padding: 0 5px; border-radius: 5px; font-size: clamp(6.5px, 4.6cqw, 8px); }
  .avatar { background: var(--raised); }
  .back-link { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0 0 12px -8px; padding: 0 10px 0 7px; border-radius: var(--ui-radius-sm); color: var(--ui-muted); font-size: 13px; font-weight: 500; transition: background-color .2s, color .2s; }
  .back-link:hover, .back-link:focus-visible { background: var(--ui-surface-2); color: var(--ui-fg); }
  .back-link .icon { width: 15px; height: 15px; }

  .tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: rgb(12 12 12 / .72); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
  .tabbar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 52px; border-radius: 14px; color: var(--ui-subtle); font-size: 10px; font-weight: 500; line-height: 1.2; transition: color .2s; }
  .tabbar-item .icon { width: 20px; height: 20px; }
  .tabbar-item.is-active { color: #fff; }
  @media (min-width: 1024px) { .tabbar { display: none; } }
  @media (max-width: 1023px) {
    body[data-layout="app"] .page { padding-top: 6px; padding-bottom: 104px; }
    body[data-layout="app"] .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  }

  /* Панели кабинета — сплошной цвет */
  body[data-layout="app"] .card { background: var(--block); }

  /* ================= Раскладка разделов: слева главное, справа лента ================= */
  /*
   * Главная и карты собраны как экраны банковского приложения: слева узкая колонка с главным
   * (.pane: цифра, действия, карта), справа лента (.feed: списки и справочные блоки).
   * На телефоне это одна колонка. Коробок мало: заголовки и списки стоят прямо на фоне.
   */
  /* Подпись раздела: мелкая, прописными, вразрядку */
  .cap { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
  /* Раздел в одну колонку по центру, без деления на левую и правую части: настройки с подстраницами и поддержка */
  .narrow { max-width: var(--page-width, 720px); margin-inline: auto; }
  .split { display: flex; flex-direction: column; gap: 36px; }
  .pane { display: flex; flex-direction: column; gap: 26px; min-width: 0; container-type: inline-size; }
  .feed { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
  .feed-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 12px; margin-bottom: 14px; }
  .feed-title { color: var(--ui-fg-strong); font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
  .feed-text { margin-top: 3px; color: var(--ui-muted); font-size: 13px; line-height: 1.5; }
  /* Главная цифра колонки: размер считается от её ширины, длинная сумма не переносится */
  .pane .balance-amount { margin-top: 8px; font-size: clamp(36px, 13.5cqw, 60px); white-space: nowrap; }
  /*
   * Сумма со знаком валюты-кнопкой. Кнопка стоит рядом с суммой, а не внутри неё: у суммы градиент по тексту
   * (background-clip: text), и вложенная кнопка при нажатии рисовалась вторым знаком валюты в углу суммы.
   */
  .balance-line { display: flex; align-items: baseline; width: fit-content; max-width: 100%; margin-top: 8px; font-size: clamp(36px, 13.5cqw, 60px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; white-space: nowrap; }
  .balance-line .balance-amount { margin-top: 0; font-size: inherit; }
  @media (max-width: 1023px) { .wallet-pane .balance-line { margin-inline: auto; } .wallet-pane .cap { text-align: center; } }
  @media (min-width: 1024px) {
    .split { display: grid; grid-template-columns: minmax(0, 392px) minmax(0, 1fr); gap: 72px; align-items: start; }
    /* Раздел в одну колонку: название в шапке стоит над ней, а не у левого края */
    .app-shell[data-narrow] .app-title.is-page { max-width: var(--page-width); margin-inline: auto; }
    /* Название раздела на главной не показывается: экран начинается с баланса */
    .app-shell[data-path="/home"] .app-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
    .app-shell[data-path="/home"] .page { padding-top: 34px; }
  }
  /* Левая колонка стоит на месте при прокрутке ленты, если целиком помещается по высоте */
  @media (min-width: 1024px) and (min-height: 900px) {
    .pane.is-sticky { position: sticky; top: calc(var(--app-header-h, 60px) + 18px); }
    .app-shell[data-path="/home"] .pane.is-sticky { top: calc(var(--app-header-h, 60px) + 34px); }
  }
  .wallet-card .vcard, .pane .vcard { max-width: none; }
  /* Выпущенная карта на главной: блок-кнопка, слева уменьшенная карта, справа её данные */
  .card-brief { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: var(--ui-radius-block); background: var(--block); text-align: left; transition: background-color .2s; }
  .card-brief:hover, .card-brief:focus-visible { background: var(--ui-surface-3); }
  .card-brief .vcard-stage { display: block; flex: none; width: 42%; max-width: 168px; }
  .card-brief-data { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; max-width: 300px; }
  .card-brief-data > strong { margin-bottom: 3px; overflow: hidden; color: var(--ui-fg-strong); font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .card-brief-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ui-muted); font-size: 12.5px; line-height: 1.45; white-space: nowrap; }
  .card-brief-row > :last-child { min-width: 0; overflow: hidden; color: var(--ui-fg); font-weight: 500; text-overflow: ellipsis; }
  .card-brief-row > .status-success { color: var(--ui-success); }

  /* Знак валюты в балансе открывает выбор валюты отображения */
  .cur-btn { display: inline-flex; align-items: center; gap: .06em; margin-left: .2em; border-radius: .22em; color: #8a8a8f; font-weight: 500; line-height: 1.1; vertical-align: baseline; transition: color .2s; }
  .cur-btn:hover, .cur-btn:focus-visible, .cur-btn.is-open { color: #d0d0d4; }
  .cur-btn > .icon { width: .34em; height: .34em; stroke-width: 2.6; transition: transform .2s var(--ui-ease); }
  .cur-btn.is-open > .icon { transform: rotate(180deg); }

  /* Показатели без коробок: подпись и цифра */
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  @media (min-width: 640px) { .stats.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .stats .stat-value { margin-top: 6px; overflow: hidden; font-size: 22px; text-overflow: ellipsis; }
  /* Пояснения: значок, заголовок и текст в строку, без коробки */
  .info-list { display: grid; gap: 26px 36px; }
  @media (min-width: 640px) { .info-list.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .info-row { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
  /* Плитка сервиса: логотип сверху, название и описание снизу. Плиток в ряду столько, сколько помещается */
  .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
  .svc-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 14px 16px 16px; border-radius: 22px; background: var(--block); text-align: left; transition: background-color .2s; }
  .svc-tile:hover, .svc-tile:focus-visible { background: var(--ui-surface-3); }
  .svc-tile-top { display: flex; align-items: flex-start; justify-content: space-between; color: var(--ui-subtle); }
  .svc-tile-top > .icon { width: 15px; height: 15px; }
  .svc-tile strong { display: block; color: var(--ui-fg-strong); font-size: 15px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
  .svc-tile small { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 12.5px; line-height: 1.4; }
  /* На телефоне плитка — строка: логотип, название с описанием, стрелка */
  @media (max-width: 639px) {
    .svc-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .svc-tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 12px 14px; }
    .svc-tile-top { display: contents; }
    .svc-tile-top > .icon { order: 2; }
    .svc-tile > span:last-child { order: 1; flex: 1; min-width: 0; }
  }

  /* Действия: ряд плиток с подписью под каждой */
  .actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .action { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; color: var(--ui-muted); font-size: 12px; font-weight: 500; white-space: nowrap; transition: color .2s; }
  .action-ico { display: grid; place-items: center; width: 100%; height: 56px; border-radius: 20px; background: var(--raised); color: #fff; transition: background-color .2s; }
  .action-ico .icon { width: 20px; height: 20px; }
  .action:hover, .action:focus-visible { color: var(--ui-fg); }
  .action:hover .action-ico, .action:focus-visible .action-ico { background: var(--raised-hover); }
  .action.is-primary .action-ico, .action[aria-pressed="true"] .action-ico { background: var(--platinum); color: #000; }
  .action.is-primary:hover .action-ico, .action.is-primary:focus-visible .action-ico { background: var(--platinum-hover); }
  .action.is-danger { color: #fca5a5; }

  .stat-label { color: var(--ui-muted); font-size: 12px; }
  .stat-value { margin-top: 2px; color: var(--ui-fg-strong); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
  .stat-value.is-in { color: var(--ui-success); }
  /* Столбики расходов по дням */
  .bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
  .bars i { flex: 1; min-height: 3px; border-radius: 3px; background: #c4c4c8; }
  .bars i.is-empty { background: rgb(255 255 255 / .08); }
  .meter { height: 5px; border-radius: 5px; background: rgb(255 255 255 / .08); overflow: hidden; }
  .meter > i { display: block; height: 100%; border-radius: inherit; background: var(--platinum); transition: width .5s var(--ui-ease); }

  .svc-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .svc-strip::-webkit-scrollbar { display: none; }
  .tile-link { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 18px 8px 14px; border-radius: 24px; background: var(--block); color: var(--ui-fg); font-size: 12px; font-weight: 500; line-height: 1.25; text-align: center; transition: background-color .2s; }
  .tile-link:hover, .tile-link:focus-visible { background: var(--ui-surface-3); }
  .tile-link span:last-child { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  /* Промо-баннер: медленно переливающийся тёмно-синий градиент (первый и последний цвет совпадают — шов не виден) */
  .promo { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 20px 46px 20px 18px; border-radius: 24px; background: linear-gradient(110deg, #0a1a4a, #1a3fb0, #0c2470, #132f8f, #0a1a4a) 0 0 / 300% 100%; animation: bonus-flow 22s linear infinite; }
  /* Значок на синем фоне: полупрозрачная подложка вместо серой */
  .promo .card-icon { background: rgb(255 255 255 / .12); color: #fff; }

  /* ================= Карты: сцена ================= */
  .card-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 18px 20px; border-radius: var(--ui-radius-panel); background: var(--block); overflow: hidden; isolation: isolate; }
  .card-stage .vcard { max-width: 360px; }

  /* ================= Лендинг ================= */
  .marquee-track.is-short { animation-duration: 46s; }
  .bank-rail { display: grid; gap: 12px; }
  @media (max-width: 1023px) {
    .bank-rail { grid-auto-flow: column; grid-auto-columns: min(86%, 360px); margin-inline: -16px; padding-inline: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .bank-rail::-webkit-scrollbar { display: none; }
    .bank-rail > * { scroll-snap-align: center; }
  }
  @media (min-width: 1024px) { .bank-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  /* Управление слайдером над лентой (в разметке стоит после неё): стрелки по краям, между ними точки (текущая вытянута) */
  .bank-slider { display: flex; flex-direction: column; }
  .rail-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; order: -1; margin-bottom: 14px; }
  .rail-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--raised); color: var(--ui-fg-strong); transition: background-color .2s, opacity .2s; }
  .rail-arrow:hover, .rail-arrow:focus-visible { background: var(--ui-surface-3); }
  .rail-arrow:disabled { opacity: .35; pointer-events: none; }
  .rail-arrow .icon { width: 18px; height: 18px; }
  .rail-dots { display: flex; align-items: center; gap: 6px; }
  .rail-dots button { width: 6px; height: 6px; border-radius: 6px; background: rgb(255 255 255 / .22); transition: width .25s var(--ui-ease), background-color .25s; }
  .rail-dots button[aria-selected="true"] { width: 20px; background: var(--ui-fg-strong); }
  @media (min-width: 1024px) { .rail-nav { display: none; } }
  .bank-card { display: flex; flex-direction: column; padding: 20px; border-radius: var(--ui-radius-panel); background: var(--block); overflow: hidden; }
  .bank-card > p:last-of-type { margin-bottom: 20px; }
  /* Шапка карточки банка: развевающийся флаг фоном, поверх название банка */
  .bank-flag { position: relative; height: 156px; margin: -20px -20px 0; overflow: hidden; isolation: isolate; background: var(--block); }
  .bank-flag::after { content: ""; position: absolute; inset: 0 0 -1px; background: linear-gradient(to bottom, rgb(0 0 0 / .1), rgb(0 0 0 / .18) 35%, var(--block) 90%); }
  .bank-pay { position: absolute; right: 16px; top: 16px; z-index: 1; display: flex; gap: 6px; }
  .bank-flag-text { position: absolute; right: 20px; bottom: 12px; left: 20px; z-index: 1; }
  .bank-flag-text p { color: rgb(255 255 255 / .78); font-size: 12px; font-weight: 500; }
  .bank-flag-text h3 { margin-top: 2px; color: #fff; font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
  /* Полотно не доходит до нижнего края на 12px: полосы волны лежат на отдельных слоях и у самой кромки просвечивали пунктиром, пока блок появлялся. */
  .flag-wave { position: absolute; inset: -10px 0 12px; display: flex; background: var(--flag) 50% / cover no-repeat; }
  .flag-wave i { flex: 1; margin-right: -1px; background: var(--flag) calc(var(--i) / (var(--n) - 1) * 100%) 50% / calc(var(--n) * 100%) 100% no-repeat; animation: flag-wave 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -110ms); will-change: transform; }
  @keyframes flag-wave { 0%, 100% { transform: translateY(-6px); filter: brightness(1.14); } 50% { transform: translateY(6px); filter: brightness(.8); } }
  @media (prefers-reduced-motion: reduce) { .flag-wave i { animation: none; } }
  .rating { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ui-fg-strong); font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
  .rating small { color: var(--ui-muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
  .stars { display: inline-flex; gap: 2px; color: var(--ui-fg-strong); }
  .stars .icon { width: 13px; height: 13px; }
  .review-avatar { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ui-surface-3); color: var(--ui-fg-strong); font-size: 15px; font-weight: 600; text-transform: uppercase; }
  .review-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
  .review-text.is-open { display: block; }
  .review-photos { display: flex; flex: none; gap: 5px; }
  .review-photo { position: relative; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 12px; background: var(--ui-surface-3); transition: opacity .2s; }
  .review-photo:hover, .review-photo:focus-visible { opacity: .8; }
  .review-photo span { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .6); color: #fff; font-size: 12px; font-weight: 600; }
  .review-photo img, .review-upload-item img { width: 100%; height: 100%; object-fit: cover; }
  [data-reviews-root], #review-form { scroll-margin-top: 76px; }

  /* Форма отзыва: оценка звёздами и загрузка фото */
  .rate { display: inline-flex; }
  .rate label { position: relative; padding: 2px 3px; border-radius: 8px; color: var(--ui-surface-5); cursor: pointer; transition: color .15s; }
  .rate label .icon { width: 28px; height: 28px; }
  .rate label.is-on, .rate:hover label { color: #fff; }
  .rate label:hover ~ label { color: var(--ui-surface-5); }
  .rate label:has(:focus-visible) { outline: 2px solid var(--ui-fg); outline-offset: 1px; }
  .review-upload { display: flex; flex-wrap: wrap; gap: 8px; }
  .review-upload-item, .review-upload-add { position: relative; width: 72px; height: 72px; overflow: hidden; border-radius: 16px; }
  .review-upload-item { background: var(--ui-surface-3); }
  .review-upload-item button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(0 0 0 / .7); color: #fff; }
  .review-upload-item button .icon { width: 12px; height: 12px; }
  .review-upload-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgb(255 255 255 / .06); color: var(--ui-muted); font-size: 11px; cursor: pointer; transition: background-color .2s, color .2s; }
  .review-upload-add:hover, .review-upload-add:focus-within { background: rgb(255 255 255 / .1); color: var(--ui-fg); }
  .review-upload-add .icon { width: 18px; height: 18px; }

  /* Просмотр фото на весь экран: выше модалок (90), ниже тостов (100) */
  .lightbox { position: fixed; inset: 0; z-index: 98; display: grid; place-items: center; padding: 56px 16px; background: rgb(0 0 0 / .92); animation: fade-in .2s ease both; }
  .lightbox-image { max-width: 100%; max-height: 100%; min-height: 0; border-radius: 16px; object-fit: contain; user-select: none; }
  .lightbox-btn { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; transition: background-color .2s; }
  .lightbox-btn:hover, .lightbox-btn:focus-visible { background: rgb(255 255 255 / .2); }
  .lightbox-btn .icon { width: 18px; height: 18px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev { left: 12px; top: 50%; translate: 0 -50%; }
  .lightbox-next { right: 12px; top: 50%; translate: 0 -50%; }
  .lightbox-count { position: absolute; bottom: 18px; left: 50%; color: rgb(255 255 255 / .7); font-size: 13px; translate: -50% 0; }

  /* Венки над отзывами: золотой и чёрно-белый */
  .awards { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 44px; }
  .award { display: flex; align-items: center; gap: 4px; color: #cfcfcf; }
  .award.is-gold { color: #e3b85a; }
  .award-branch { flex: none; width: 46px; }
  .award-branch svg { display: block; width: 100%; height: auto; }
  .award-branch.is-right { transform: scaleX(-1); }
  .award-text { display: flex; flex-direction: column; align-items: center; min-width: 118px; text-align: center; line-height: 1.2; }
  .award-text small { margin-bottom: 3px; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
  .award-text strong { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
  .award-text span { margin-top: 2px; font-size: 12px; font-weight: 500; opacity: .85; }
  .award.is-gold .award-text strong { background: linear-gradient(180deg, #f8e3a1, #d39c33); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .award.is-mono .award-text strong { color: #fff; }
  .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
  .pager[hidden] { display: none; }
  .pager-btn { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--ui-radius-btn); background: var(--ui-surface-1); color: var(--ui-muted); font-size: 14px; font-weight: 500; transition: background-color .2s, color .2s, opacity .2s; }
  .pager-btn .icon { width: 16px; height: 16px; }
  .pager-btn:hover, .pager-btn:focus-visible { background: var(--ui-surface-3); color: var(--ui-fg); }
  .pager-btn.is-active { background: #fff; color: #000; }
  .pager-btn:disabled { opacity: .4; pointer-events: none; }
  .pager-gap { min-width: 24px; color: var(--ui-subtle); text-align: center; }

  .steam-mock { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; background: rgb(0 0 0 / .35); }
  .steam-mock-field { padding: 8px 11px; border-radius: 10px; background: rgb(255 255 255 / .06); }
  .steam-mock-field small { display: block; color: var(--ui-subtle); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
  .steam-mock-field span { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 13px; }
  .steam-mock-field.is-target { background: var(--platinum); }
  .steam-mock-field.is-target small { color: #555; }
  .steam-mock-field.is-target span { color: #000; font-weight: 600; }
  .steam-mock-button { display: grid; place-items: center; height: 32px; border-radius: 10px; background: rgb(255 255 255 / .1); color: var(--ui-muted); font-size: 12px; font-weight: 500; }

  /* ================= Отслеживание заявки ================= */
  .track { display: flex; flex-direction: column; }
  .track-step { position: relative; display: flex; gap: 12px; padding-bottom: 18px; }
  .track-step:last-child { padding-bottom: 0; }
  .track-step::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; margin-left: -1px; border-radius: 2px; background: rgb(255 255 255 / .1); }
  .track-step:last-child::before { display: none; }
  .track-step.is-done::before { background: #d6d6d9; }
  .track-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(255 255 255 / .1); color: var(--ui-subtle); font-size: 11.5px; font-weight: 600; flex-shrink: 0; }
  .track-dot .icon { width: 14px; height: 14px; stroke-width: 2.4; }
  .track-step.is-done .track-dot { background: var(--platinum); color: #000; }
  .track-step strong { display: block; padding-top: 3px; color: var(--ui-fg); font-size: 14px; font-weight: 500; }
  .track-step small { display: block; margin-top: 1px; color: var(--ui-muted); font-size: 12px; }
  .track-step.is-done small { color: var(--ui-success); }
}

@keyframes logo-stem-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
/* Баннер бонуса: цвет плавно течёт по фону, раз в несколько секунд пробегает блик и покачивается значок */
@keyframes bonus-flow { to { background-position: 150% 0; } }
/* Экран нового уровня: появление строк, название уровня из размытия, блик по буквам, линия под названием */
@keyframes levelup-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* config.php: размытие не меняет размеры элементов или логику реквизитов. */
.privacy-text { display: inline-block; }
html[data-blur-name="true"] .brand-name,
html[data-blur-name="true"] .brand-copy,
html[data-blur-name="true"] [data-brand-sensitive],
html[data-blur-name="true"] [data-personal-sensitive],
html[data-blur-card="true"] [data-card-sensitive] {
  filter: blur(var(--privacy-blur, 6px));
  user-select: none;
}

@keyframes levelup-mark { from { opacity: 0; transform: scale(.9); filter: blur(16px); letter-spacing: .08em; } to { opacity: 1; transform: none; filter: blur(0); letter-spacing: -.05em; } }
@keyframes levelup-shine { from { background-position: 220% 0, 0 0; } to { background-position: -120% 0, 0 0; } }
@keyframes levelup-line { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
/* Экран выпуска карты: вылет карты из глубины, вспышка света за ней, блик по металлу, искры, лёгкое парение */
@keyframes cardfx-fly { from { opacity: 0; transform: translateY(150px) rotateX(58deg) scale(.7); filter: blur(12px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes cardfx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cardfx-glow { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .55; transform: scale(1.5); } 100% { opacity: .14; transform: scale(1.9); } }
@keyframes cardfx-shine { 0% { opacity: 1; background-position: 160% 0; } 100% { opacity: 1; background-position: -60% 0; } }
@keyframes cardfx-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } }
@keyframes bonus-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes bonus-wiggle { 0%, 68%, 100% { transform: none; } 75% { transform: rotate(-12deg) scale(1.1); } 83% { transform: rotate(9deg) scale(1.1); } 91% { transform: rotate(-4deg); } }
@keyframes live-pulse { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }

/* Печать квитанции заявки: светлая страница без шапки, подвала и кнопок */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .public-header, footer, .no-print, .toast { display: none !important; }
  .card, .rows, .copy-row { background: #f3f3f3 !important; }
  .card *, .page-title, .section-title, .track-step strong { color: #000 !important; }
  .track-dot { background: #000 !important; color: #fff !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}