/* ============ Шрифты (локальные: без внешних запросов и белого экрана) ============ */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/manrope-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/manrope-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/manrope-600-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/manrope-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/manrope-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/manrope-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/manrope-800-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/manrope-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/unbounded-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/unbounded-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/unbounded-800-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/unbounded-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Michroma — свободный аналог Eurostile Extended (широкий квадратный гротеск) */
@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/michroma-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============ Дизайн-система: liquid glass на космосе ============ */
:root {
    color-scheme: dark;

    --bg: #03050e;
    --text: #f2f7ff;
    --text-dim: #b3c1e0;
    --text-faint: #8e9cc2;

    --blue: #5cc8ff;
    --violet: #9b6bff;
    --red: #ff2d55;
    --orange: #ff9a3d;

    --cta-gradient: linear-gradient(100deg, var(--red) 0%, #ff6a2a 55%, var(--orange) 100%);
    --accent-gradient: linear-gradient(100deg, var(--blue) 0%, var(--violet) 100%);
    --ice-gradient: linear-gradient(180deg, #ffffff 0%, #eaf7ff 34%, #a8dcff 68%, #56b0f0 100%);
    /* Сколько экрана съела экранная клавиатура. Ноль, пока её нет; на
       телефоне значение проставляет скрипт окна поддержки в base.html */
    --keyboard: 0px;

    /* Стекло */
    --glass-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.045) 46%, rgba(120, 170, 255, 0.05) 100%);
    --glass-blur: blur(26px) saturate(190%);
    --glass-rim: linear-gradient(150deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.14) 26%, rgba(255, 255, 255, 0.04) 52%, rgba(140, 200, 255, 0.45) 100%);
    /* В покое и при наведении одинаковое число теней — иначе браузер
       не может их интерполировать и подсветка включается рывком */
    --glass-shadow: 0 18px 46px rgba(0, 0, 0, 0.5), 0 0 0 rgba(92, 200, 255, 0);
    --glass-shadow-hover: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 36px rgba(92, 200, 255, 0.3);
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    --glass-inner-hover: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.1);

    --border: rgba(150, 190, 255, 0.16);
    --border-bright: rgba(160, 210, 255, 0.5);
    --glow-blue: 0 0 34px rgba(92, 200, 255, 0.28);

    --s1: 6px; --s2: 10px; --s3: 14px; --s4: 20px; --s5: 28px;
    --s6: 40px; --s7: 56px; --s8: 76px;

    --radius: 26px;
    --radius-sm: 18px;
    --maxw: 1140px;
    --topbar-h: 68px;

    --font-display: "Unbounded", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-h) + var(--s3));
    background: var(--bg);
    /* Место под полосу прокрутки держим всегда. Иначе на короткой странице
       (карточка товара) полосы нет, окно на 15 px шире, и при переходе туда
       весь макет дёргается вбок, а фон пересобирается под новый размер */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh; min-height: 100dvh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Наши display из классов (.btn — inline-flex и т.п.) перебивают браузерное
   скрытие через [hidden], и спрятанные кнопки оставались видимыми.
   Правило должно идти раньше компонентов и быть сильнее их */
[hidden] { display: none !important; }

/* Мобильные браузеры при тапе заливают элемент своим полупрозрачным
   прямоугольником — он не считается с нашими скруглениями и выглядит грязно.
   Отклик даём сами: у кнопок есть :active со сжатием */
a, button, input, select, textarea, summary, [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

::selection { background: rgba(92, 200, 255, 0.32); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

/* ============ Космос ============ */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.space { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.nebula { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.nebula--blue {
    width: 52vw; height: 52vw; left: -10vw; top: -8vw; opacity: 0.5;
    background: radial-gradient(circle, rgba(60, 140, 255, 0.55), transparent 68%);
    animation: drift-a 34s ease-in-out infinite;
}
.nebula--violet {
    width: 48vw; height: 48vw; right: -12vw; top: 10vw; opacity: 0.45;
    background: radial-gradient(circle, rgba(155, 107, 255, 0.5), transparent 70%);
    animation: drift-b 42s ease-in-out infinite;
}
.nebula--warm {
    width: 40vw; height: 40vw; left: 28vw; bottom: -14vw; opacity: 0.35;
    background: radial-gradient(circle, rgba(255, 90, 60, 0.45), transparent 70%);
    animation: drift-c 48s ease-in-out infinite;
}
@keyframes drift-a { 50% { transform: translate3d(6vw, 5vw, 0) scale(1.12); } }
@keyframes drift-b { 50% { transform: translate3d(-7vw, 6vw, 0) scale(1.08); } }
@keyframes drift-c { 50% { transform: translate3d(5vw, -5vw, 0) scale(1.14); } }

/* ============ Стеклянная поверхность ============ */
.glass {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow), var(--glass-inner);
    isolation: isolate;
}
/* Кромка: тонкий световой кант по краю — главный признак liquid glass */
.glass::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: inherit; padding: 1px;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
/* ============ Каркас ============ */
.shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.wrap {
    width: 100%; max-width: var(--maxw); margin: 0 auto;
    padding-left: max(var(--s4), env(safe-area-inset-left));
    padding-right: max(var(--s4), env(safe-area-inset-right));
}
.content { flex: 1; padding: var(--s5) 0 var(--s7); }

/* ============ Шапка ============ */
.topbar {
    position: sticky; top: 0; z-index: 40;
    padding-top: env(safe-area-inset-top);
    background: linear-gradient(180deg, rgba(10, 16, 38, 0.72), rgba(6, 10, 26, 0.58));
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid rgba(160, 200, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: var(--topbar-h); }

.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; min-width: 0;
    transition: opacity 0.24s ease, visibility 0.24s ease; }
.brand__logo {
    width: 40px; height: 40px; border-radius: 12px; object-fit: contain; flex-shrink: 0;
    /* В покое свечения нет; нулевая тень нужна, чтобы она плавно разгоралась */
    box-shadow: 0 0 0 rgba(92, 200, 255, 0);
    /* Те же 0.22s ease, что и у текста — загораются синхронно */
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
@media (hover: hover) {
    .brand:hover .brand__logo,
    .brand:focus-visible .brand__logo { box-shadow: var(--glow-blue); transform: scale(1.07); }
}
@media (hover: none) { .brand__logo { box-shadow: var(--glow-blue); } }

/* Строки по центру друг друга: «Shop» стоит под серединой «VVVCorp» —
   так же, как на обложках разделов и товаров */
.brand__name { display: flex; flex-direction: column; align-items: center; line-height: 1.06; min-width: 0; transform: skewX(-8deg); }
.brand__line {
    position: relative;
    /* Eurostile идёт первым намеренно: у кого он установлен (в том числе у
       владельца) знак выглядит именно так, как задумано. У остальных — и
       это подавляющее большинство покупателей — подхватится Michroma,
       свободный аналог, который мы отдаём вместе с сайтом. Разнобой между
       браузерами объясняется этим же: одни находят системный Eurostile,
       другие нет */
    font-family: "Eurostile Extended Bold", "Eurostile Extended", "Eurostile", "Michroma", var(--font-display), sans-serif;
    font-weight: 700; color: #ffffff;
    white-space: nowrap; padding-right: 3px;
}
/* Градиент со свечением проявляется плавно поверх белого */
.brand__line::before {
    content: attr(data-text);
    position: absolute; left: 0; top: 0; pointer-events: none;
    background: var(--ice-gradient);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(92, 200, 255, 0.5));
    opacity: 0; transition: opacity 0.22s ease;
    white-space: nowrap;
}
@media (hover: hover) {
    .brand:hover .brand__line::before,
    .brand:focus-visible .brand__line::before { opacity: 1; }
}
@media (hover: none) { .brand__line::before { opacity: 1; } }
.brand__line--top { font-size: 12px; letter-spacing: 0.12em; }
.brand__line--bottom { font-size: 23px; letter-spacing: 0.02em; }

/* ---- Знак, нарисованный контурами (app/utils/brand_mark.py) ----
   Правила выше нужны как запасной вариант: если магазин переименуют,
   контуры к новому имени не подойдут и знак снова отрисуется текстом.

   Кегль задаётся переменными --mark-top/--mark-bottom ровно там же, где
   раньше стоял font-size, а высота считается от него: 0.88 и 0.881 — это
   доля, которую пятно букв занимает от кегля; снята из самого шрифта.
   Ширину браузер берёт из viewBox, поэтому знак не искажается нигде. */
.brand-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand__name--mark { --mark-top: 12px; --mark-bottom: 23px; }
.brand__name--mark, .hero__mark--mark {
    /* Просвет между строками повторяет межстрочный воздух прежнего
       текстового знака (замерен в браузере при 12/23 px) и выражен долями
       кегля — тогда на всех размерах пропорции остаются теми же */
    gap: calc(var(--mark-top) * 0.03 + var(--mark-bottom) * 0.2257);
}
.brand__mark { display: block; width: auto; overflow: visible; }
.brand__mark--top { height: calc(var(--mark-top) * 0.88); }
.brand__mark--bottom { height: calc(var(--mark-bottom) * 0.881); }
.brand__mark-ink { fill: #ffffff; }
/* Тот же ледяной градиент со свечением, что проявлялся поверх текста */
.brand__mark-glow {
    fill: url(#brand-ice);
    filter: drop-shadow(0 0 5px rgba(92, 200, 255, 0.5));
    opacity: 0; transition: opacity 0.22s ease;
}
@media (hover: hover) {
    .brand:hover .brand__mark-glow,
    .brand:focus-visible .brand__mark-glow { opacity: 1; }
}
@media (hover: none) { .brand__mark-glow { opacity: 1; } }

.nav { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }

/* Поиск в шапке: поле выезжает вбок из-под лупы */
.search-box { display: flex; align-items: center; gap: 8px; }
.search-box__form {
    /* Схлопнуто по умолчанию; ширину анимируем с «отдачей» — кривая на конце
       перелетает цель и возвращается */
    width: 0; overflow: hidden; opacity: 0;
    transition: width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.24s ease, overflow 0s linear;
}
/* Пока поле едет, содержимое подрезаем, а как доехало — открываем контейнер,
   иначе он срезает свечение вокруг поля при фокусе */
.search-box.is-open .search-box__form {
    width: min(260px, 46vw); opacity: 1; overflow: visible;
    transition: width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.24s ease, overflow 0s linear 0.42s;
}
.search-box__input {
    width: 100%; min-width: 0; height: 44px; padding: 0 18px; border-radius: 999px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(150, 190, 255, 0.26);
    color: var(--text); font-family: var(--font-body); font-size: 14px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.search-box__input::placeholder { color: var(--text-faint); }
.search-box__input:focus { outline: none; border-color: var(--border-bright); box-shadow: var(--glow-blue); }
/* Родной крестик прячем — вместо него своя стеклянная кнопка */
.search-box__input::-webkit-search-cancel-button,
.search-box__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-box__form { position: relative; }
.search-box__input { padding-right: 44px; }

.search-box__clear {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; color: var(--text-dim);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
.search-box__clear::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.search-box__clear svg { width: 13px; height: 13px; }
@media (hover: hover) {
    .search-box__clear:hover {
        color: #fff;
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.09));
    }
}
.search-box__clear:active { transform: translateY(-50%) scale(0.92); }

/* Выпадающие результаты живого поиска */
.search-box { position: relative; }
/* Затемнение страницы: разгорается вместе с выездом поля.
   Размытие постоянное, а проявляется через прозрачность — так плавнее
   и не требует анимации самого backdrop-filter */
.search-veil {
    position: fixed; inset: 0; z-index: 35; opacity: 0; pointer-events: none;
    background: rgba(4, 6, 15, 0.5);
    backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
    /* visibility, а не только opacity. Прозрачный элемент для браузера всё
       равно рисуется, и этот — размытие во ВЕСЬ экран, лежащее на каждой
       странице сайта. Под ним шевелится живой фон, поэтому размытие
       пересчитывалось каждый кадр, хотя поиск закрыт и показывать нечего.
       Скрытый элемент не рисуется вовсе, а видимой разницы нет никакой:
       задержка на время затухания сохраняет плавность ухода */
    visibility: hidden;
    transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 0.42s;
}
.is-searching .search-veil {
    opacity: 1; pointer-events: auto; visibility: visible;
    transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

/* Шторка результатов: спрятана за шапкой и съезжает вниз */
.search-curtain {
    position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 38;
    overflow: hidden; pointer-events: none; max-height: 0;
    transition: max-height 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.search-curtain.is-open { max-height: min(68vh, 460px); pointer-events: auto; }
/* Стекло держит панель, прокрутка живёт внутри. На одном элементе браузер
   красит фон только по видимой части: строки, уехавшие за нижний край,
   оставались висеть без подложки — «стекло убегало» */
.search-curtain__pane {
    transform: translateY(-101%);
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
    max-height: min(64vh, 430px); overflow: hidden;
    border-radius: 0 0 var(--radius) var(--radius);
    display: flex; flex-direction: column;
    /* Плотнее обычного стекла: под шторкой лежат карточки — тоже стеклянные,
       со своими скруглениями. Сквозь прозрачную панель их край читался как
       край шторки, и казалось, что строки вывалились наружу */
    background: linear-gradient(180deg, rgba(14, 20, 40, 0.95), rgba(10, 15, 32, 0.97));
}
.search-curtain.is-open .search-curtain__pane { transform: translateY(0); }
.search-curtain__inner {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.search-result {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px;
    /* Концентрично шторке: её радиус минус собственный отступ, иначе подсветка
       выглядит угловатой рядом с закруглением шторки */
    border-radius: calc(var(--radius) - 6px);
    text-decoration: none; color: var(--text); min-width: 0;
    transition: background 0.18s ease;
}
.search-result:hover, .search-result:focus-visible { background: rgba(150, 200, 255, 0.14); }
.search-result__img {
    width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
}
/* Обложка Steam-игры — 460×215. В квадрате от неё оставалась полоска из
   середины, поэтому даём ей ту же пропорцию, что в каталоге игр */
.search-result__img--wide { width: 94px; height: 44px; border-radius: 8px; }
.search-result__img--blank { background: linear-gradient(150deg, rgba(92, 200, 255, 0.18), rgba(140, 120, 255, 0.1)); }
.search-result__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-result__title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result__sub { color: var(--text-faint); font-size: 12.5px; }
.search-results__empty { padding: 14px; color: var(--text-faint); font-size: 13px; text-align: center; }

/* Стеклянные круглые кнопки-иконки */
.icon-btn {
    position: relative; width: 44px; height: 44px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 50%;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    color: var(--text-dim); text-decoration: none;
    /* Одинаковое число теней в покое и при наведении — иначе свечение включается рывком */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 rgba(92, 200, 255, 0), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.icon-btn::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) {
    .icon-btn:hover {
        color: #fff; transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42), 0 0 22px rgba(92, 200, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.36);
    }
}

/* ============ Кнопки ============ */
.btn {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
    min-height: 46px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
    font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1.2;
    text-decoration: none; color: #fff; white-space: nowrap;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.32s ease, filter 0.32s ease, background 0.32s ease;
}
/* Значок на кнопке: покупатель ловит смысл раньше, чем читает подпись.
   flex-shrink — чтобы при узкой кнопке сжимался текст, а не картинка */
.btn__icon { flex-shrink: 0; width: 18px; height: 18px; }
.btn--lg .btn__icon { width: 19px; height: 19px; }
.btn::after {
    /* световой кант, как у стекла */
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(160deg, rgba(255,255,255,0.6), rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.22));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
/* Свечение почти без сдвига вниз: со смещением в 10px оно лужей стекало
   под кнопку и выглядело оторванным от неё */
.btn--primary {
    background: var(--cta-gradient);
    box-shadow: 0 2px 10px rgba(255, 90, 50, 0.3), 0 0 22px rgba(255, 90, 50, 0.22);
}
.btn--ghost {
    background: linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    color: var(--text);
}
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { min-height: 54px; padding: 0 32px; font-size: 17px; }
.btn--block { width: 100%; }
.btn:active { transform: translateY(1px) scale(0.99); }

@media (hover: hover) {
    .btn--primary:hover {
        transform: translateY(-2px); filter: brightness(1.08);
        box-shadow: 0 4px 14px rgba(255, 90, 50, 0.4), 0 0 30px rgba(255, 90, 50, 0.3);
    }
    .btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--glow-blue); filter: brightness(1.1); }
}

/* ============ Главный экран ============ */
.hero { position: relative; text-align: center; padding: var(--s3) 0 var(--s1); }
.hero__badge {
    display: inline-flex; align-items: center; gap: var(--s1);
    padding: 5px 14px; border-radius: 999px; margin-bottom: var(--s2);
    background: linear-gradient(150deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(160, 210, 255, 0.28);
    color: #cfeaff; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
.hero__dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; }

.hero__logo-wrap { position: relative; width: 124px; height: 124px; margin: 0 auto var(--s4); }
.hero__ring {
    position: absolute; inset: -13px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--red) 40deg, var(--orange) 78deg, transparent 130deg, transparent 210deg, var(--blue) 268deg, var(--violet) 300deg, transparent 340deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: spin 18s linear infinite;
}
.hero__logo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: 50%; object-fit: contain;
    background: radial-gradient(circle at 32% 26%, rgba(30, 44, 96, 0.6), rgba(6, 10, 24, 0.9) 72%);
    box-shadow: 0 0 40px rgba(92, 200, 255, 0.3);
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__title {
    font-family: var(--font-display); font-weight: 800;
    /* Unbounded очень широкий: на узком экране длинное слово вылезало за край */
    font-size: clamp(22px, 4.2vw, 34px); line-height: 1.05; letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    background: var(--ice-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: var(--s1);
}
.hero__accent { background: var(--cta-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__subtitle { max-width: 620px; margin: 0 auto var(--s2); color: var(--text-dim); font-size: clamp(13.5px, 1.8vw, 15px); line-height: 1.45; }
.hero__actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

/* ============ Плашки доверия ============ */
/* grid-auto-rows: 1fr — ряды одной высоты: иначе плитка с короткой подписью
   ниже соседок, и при переносе на вторую строку ряд выглядит рваным */
.trust {
    /* 310px — по самой длинной строке «Средняя выдача ~2 мин»: она в одну
       строку и не переносится, и на более узкой колонке вылезла бы за край.
       Подпись у «Безопасно» тоже должна умещаться в строку: перенос сделал
       бы плашку выше соседних */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    grid-auto-rows: 1fr; gap: 8px; list-style: none; margin: 0;
}
/* min-width: 0 — иначе длинная подпись не даёт плитке сжаться и она вылезает за сетку */
/* Капсула: торцы полукругом, поэтому радиус заведомо больше половины высоты.
   Сетка, а не flex-wrap: подпись всегда под заголовком, иначе на одной ширине
   у одной плитки текст в строку, у соседней — в две, и ряд выглядит рваным */
/* Отступ слева равен верхнему и нижнему — тогда кружок значка получается
   ровно по центру полукруглого торца капсулы, каким бы он ни был по размеру */
.trust__item {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; column-gap: 13px;
    padding: 8px 22px 8px 8px; border-radius: 999px; min-width: 0; text-align: left;
}
.trust__item > .trust__icon { grid-row: span 2; }
.trust__icon {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: linear-gradient(150deg, rgba(92, 200, 255, 0.22), rgba(92, 200, 255, 0.06));
    border: 1px solid rgba(160, 210, 255, 0.24);
    color: #9fdcff;
}
.trust__icon svg { width: 21px; height: 21px; }
.trust__item--warm .trust__icon {
    background: linear-gradient(150deg, rgba(255, 154, 61, 0.24), rgba(255, 122, 42, 0.06));
    border-color: rgba(255, 176, 110, 0.3); color: #ffc188;
}
/* Межстрочный интервал задан явно: две строки вместе должны уместиться в
   высоту значка (44px), иначе плашка станет выше — а она задаёт высоту всему
   ряду. 20.4 + 18.9 = 39.3px, запас есть */
.trust__title { font-weight: 800; font-size: 17px; line-height: 1.2; }
.trust__text { color: var(--text-faint); font-size: 14px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
/* Плашка в одну строку: значок занимает одну строку, а не две, иначе
   сетка держала бы под подпись пустой ряд */
.trust__item--line > .trust__icon { grid-row: auto; }
.trust__line { font-weight: 800; font-size: 18px; line-height: 1.2; white-space: nowrap; }

/* ============ Заголовки ============ */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: var(--s6) 0 var(--s4); flex-wrap: wrap; }
.section-title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(22px, 3.4vw, 32px); letter-spacing: -0.03em; overflow-wrap: anywhere;
    background: var(--ice-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-sub { color: var(--text-faint); font-size: 14px; }
/* «смотреть все» в заголовке группы поиска: там тысячи позиций, и в выдаче
   показана только верхушка */
.section-sub--link { text-decoration: none; font-weight: 700; transition: color 0.22s ease; }
@media (hover: hover) { .section-sub--link:hover { color: var(--text); } }

/* ============ Навигационная панель ============ */
/* Метка над панелью: как только она уходит под шапку, панель «прилипает» */
.crumbs-sentinel { display: block; height: 1px; margin-bottom: -1px; }

.crumbs-wrap { position: sticky; top: calc(var(--topbar-h) + 12px); z-index: 30; margin-bottom: var(--s4); }
.crumbs {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 999px;
    color: var(--text-dim); font-size: 14px;
    /* Число теней одинаковое в обоих состояниях — иначе свечение включится рывком */
    box-shadow: var(--glass-shadow), var(--glass-inner);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease;
}
/* Прокручивается только путь: «Назад» остаётся на месте даже на узком экране.
   Запас по вертикали обязателен: прокручиваемый блок обрезает всё за своими
   границами, и без него свечение текущей плашки срезалось бы сверху и снизу */
.crumbs__trail {
    display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
    padding: 22px 6px 22px 0; margin: -22px -6px -22px 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.crumbs__trail::-webkit-scrollbar { display: none; }
/* Прилипла к шапке — приподнимается и мягко светится, как кнопки */
.crumbs.is-stuck {
    transform: translateY(-3px);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 26px rgba(92, 200, 255, 0.26), var(--glass-inner-hover);
}

/* Все элементы внутри панели — одинаковое стекло со скруглением до круга */
.crumbs__back, .crumbs__icon, .crumbs__link, .crumbs__chip {
    position: relative; flex-shrink: 0; border: 0; border-radius: 999px;
    text-decoration: none; white-space: nowrap;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    /* Число теней одинаковое в покое и при наведении — иначе подсветка мигает */
    box-shadow: 0 0 0 rgba(92, 200, 255, 0), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.crumbs__back::after, .crumbs__icon::after, .crumbs__link::after, .crumbs__chip::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
/* Внутри узкой панели кнопки не «подпрыгивают» — только светлеют:
   подъём в тесном ряду читается как смещение, а не как отклик */
@media (hover: hover) {
    .crumbs__back:hover, .crumbs__icon:hover, .crumbs__link:hover {
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.09));
        color: #fff;
    }
}
.crumbs__back:active, .crumbs__icon:active, .crumbs__link:active { transform: scale(0.96); }

.crumbs__back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 16px 0 12px; height: 38px;
    color: var(--text); font-weight: 700; font-size: 13.5px;
}
.crumbs__back svg { width: 16px; height: 16px; }

.crumbs__split { flex-shrink: 0; width: 1px; height: 22px; background: rgba(150, 190, 255, 0.22); }

.crumbs__icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--text-dim); }
.crumbs__icon svg { width: 17px; height: 17px; }

.crumbs__step { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.crumbs__sep { display: grid; place-items: center; flex-shrink: 0; color: var(--text-faint); }
.crumbs__sep svg { width: 15px; height: 15px; }

.crumbs__link {
    display: inline-flex; align-items: center; height: 38px; padding: 0 15px;
    color: var(--text-dim); font-weight: 600; font-size: 13.5px;
}

/* Текущее место — единственное, что светится */
.crumbs__chip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 16px 0 12px;
    background: linear-gradient(135deg, rgba(92, 200, 255, 0.3), rgba(140, 120, 255, 0.24));
    color: #fff; font-weight: 700; font-size: 13.5px;
    box-shadow: 0 0 20px rgba(92, 200, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.crumbs__chip svg { width: 15px; height: 15px; opacity: 0.9; flex-shrink: 0; }
/* Длинное название текущей страницы («Политика конфиденциальности») уезжало
   за край плашки. Шаги пути намеренно не сжимаются — путь листается вбок,
   и промежуточные ссылки должны читаться целиком. Но у ПОСЛЕДНЕГО шага
   листать нечего: это страница, на которой человек уже стоит. Поэтому
   разрешаем ему сжиматься и подрезаем текст многоточием — так плашка
   всегда остаётся внутри панели, что особенно заметно в мини-приложении,
   где ширина экрана и без того урезана */
/* flex-shrink здесь обязателен: общее правило для элементов крошек (выше)
   запрещает им сжиматься, и без отмены запрета ни min-width, ни подрезание
   текста ничего не дают — плашка сохраняет полную ширину и уезжает за край */
.crumbs__step:last-child { flex-shrink: 1; }
.crumbs__chip { min-width: 0; flex-shrink: 1; }
.crumbs__chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ Карточки ============ */
/* Потолок в три колонки: на широком экране карточки должны расти, а не
   плодиться — иначе обложки мельчают и каталог читается как список */
.grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: var(--s4); align-items: start;
}
@media (min-width: 860px) {
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tile {
    display: flex; flex-direction: column; overflow: hidden;
    text-decoration: none; color: var(--text);
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tile__shine {
    position: absolute; top: 0; left: 0; width: 60%; height: 100%; z-index: 3; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.14), transparent);
    transform: translateX(-180%) skewX(-18deg);
    transition: transform 0.6s ease;
}
@media (hover: hover) {
    a.tile:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow-hover), var(--glass-inner-hover); }
    a.tile:hover .tile__shine { transform: translateX(280%) skewX(-18deg); }
}
a.tile:active { transform: scale(0.985); }

.card-media {
    position: relative; z-index: 2; display: block; flex: 0 0 auto;
    width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain;
    background: linear-gradient(150deg, rgba(18, 28, 60, 0.6), rgba(6, 10, 24, 0.75));
    color: transparent; font-size: 0;
}
.card-media--empty {
    display: grid; place-items: center; font-size: 34px; aspect-ratio: 3 / 2;
    font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em;
}
.card-media--empty span {
    background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: 0.9;
}
.card-media--h1 { background: linear-gradient(150deg, rgba(60, 40, 130, 0.5), rgba(6, 10, 24, 0.8)); }
.card-media--h2 { background: linear-gradient(150deg, rgba(20, 70, 130, 0.5), rgba(6, 10, 24, 0.8)); }
.card-media--h3 { background: linear-gradient(150deg, rgba(110, 40, 110, 0.45), rgba(6, 10, 24, 0.8)); }
.card-media--h4 { background: linear-gradient(150deg, rgba(20, 100, 110, 0.45), rgba(6, 10, 24, 0.8)); }
.card-media--h5 { background: linear-gradient(150deg, rgba(130, 60, 40, 0.45), rgba(6, 10, 24, 0.8)); }

.tile__body {
    position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--s1);
    align-items: center; text-align: center;
    padding: var(--s3) var(--s3) var(--s4); flex: 1 1 auto;
}
.tile__title { font-family: var(--font-body); font-weight: 800; font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.price { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--orange); white-space: nowrap; }
.price--lg {
    font-size: 34px;
    background: var(--cta-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============ Страница товара ============ */
.product {
    display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: var(--s5); align-items: start;
    padding: var(--s5);
}
.product--nomedia { grid-template-columns: 1fr; max-width: 640px; }
.product__media { position: relative; z-index: 2; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(160, 200, 255, 0.18); }
.card-media-hero { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: rgba(6, 10, 24, 0.75); max-height: 70vh; }
.product__info { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--s3); }
.product__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3.2vw, 30px); line-height: 1.2; letter-spacing: -0.03em; overflow-wrap: anywhere; }
/* Описание товара — раскрывашка. Свёрнута, чтобы длинный текст не отодвигал
   кнопку покупки за экран */
.product__about {
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(150, 190, 255, 0.12);
}
.product__about > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    padding: 13px 16px; border-radius: inherit;
    font-weight: 700; font-size: 14px; color: var(--text-dim);
    transition: color 0.22s ease;
}
.product__about > summary::-webkit-details-marker { display: none; }
.product__about-chevron {
    flex-shrink: 0; width: 17px; height: 17px;
    transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
}
/* :not([data-closing]) — чтобы стрелка пошла назад сразу по нажатию, а не
   после того, как описание уже свернулось: атрибут open держится всю анимацию */
.product__about[open]:not([data-closing]) > summary { color: var(--text); }
.product__about[open]:not([data-closing]) .product__about-chevron { transform: rotate(180deg); }
.product__about > summary:focus { outline: none; }
.product__about > summary:focus-visible { color: var(--text); text-decoration: underline; }
@media (hover: hover) {
    .product__about > summary:hover { color: var(--text); }
}
.product__about .product__desc { padding: 0 16px 14px; margin: 0; font-size: 14px; }
.product__desc { color: var(--text-dim); white-space: pre-line; overflow-wrap: anywhere; }
.note { color: var(--text-faint); font-size: 13px; }
/* Инструкции по оплате приходят из настроек многострочными — переносы сохраняем */
.note--lines { white-space: pre-line; }

/* ============ Поиск ============ */
.search-form { display: flex; gap: var(--s2); margin-bottom: var(--s5); flex-wrap: wrap; }
.search-form__field { position: relative; flex: 1 1 260px; min-width: 0; }
.search-form__icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 19px; height: 19px; color: var(--text-faint); pointer-events: none;
    /* Без z-index лупы не видно: у поля backdrop-filter, оно тоже создаёт
       слой и, стоя в разметке ПОСЛЕ иконки, закрашивает её собой */
    z-index: 1;
}
.search-form__input {
    width: 100%; min-height: 54px; padding: 0 52px 0 46px; border-radius: 999px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(150, 190, 255, 0.24);
    color: var(--text); font-family: var(--font-body); font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.search-form__input::placeholder { color: var(--text-faint); }
.search-form__input:focus { outline: none; border-color: var(--border-bright); box-shadow: var(--glow-blue); }
/* Родной крестик у type=search рисует ОС — стеклом его не покрасить, поэтому
   гасим и ставим свой, такой же, как у окна оплаты и шторки поиска */
.search-form__input::-webkit-search-cancel-button,
.search-form__input::-webkit-search-decoration {
    -webkit-appearance: none; appearance: none;
}
.search-form__clear {
    position: absolute; right: 10px; top: 50%; z-index: 1;
    display: grid; place-items: center;
    width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    color: var(--text-dim); font-size: 20px; line-height: 1;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* transform держит и центровку, и нажатие: две анимации на одном свойстве
       не уживаются, поэтому масштаб дописан прямо в translate */
    transform: translateY(-50%);
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, opacity 0.18s ease;
}
.search-form__clear::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.search-form__clear:active { transform: translateY(-50%) scale(0.94); }
.search-form__clear:focus { outline: none; }
.search-form__clear:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--glow-blue); }
@media (hover: hover) {
    .search-form__clear:hover {
        color: #fff;
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    }
}

/* ============ Покупка на сайте ============ */
.buy-form { display: flex; flex-direction: column; gap: var(--s2); }
.buy-form__label { font-size: 13px; font-weight: 700; color: var(--text-dim); }
/* Что именно вписывать: у Supercell это почта Supercell ID, у других игр
   игровой ID. Плейсхолдер пропадает при вводе, а ошибка тут стоит денег —
   поэтому дублируем подсказку строкой под полем */
.buy-form__hint { color: var(--text-faint); font-size: 12.5px; margin-top: -2px; }

/* Своя плашка о неверном поле вместо браузерного пузыря: тот рисует ОС, он
   белый, квадратный и на языке браузера. Тёплое стекло, как у «Требуется
   оплата» — ошибка должна читаться как ошибка, но не выбиваться из страницы */
.field-error {
    position: fixed; z-index: 60; display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 14px; border-radius: 14px; pointer-events: none;
    background: linear-gradient(150deg, rgba(255, 122, 122, 0.26) 0%, rgba(120, 30, 45, 0.5) 60%, rgba(60, 20, 40, 0.55) 100%);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #ffdede; font-size: 13px; font-weight: 700; line-height: 1.35;
    animation: field-error-in 0.24s cubic-bezier(0.22, 1.12, 0.36, 1);
}
/* Стрелки-уголка нет намеренно: повёрнутый квадрат давал шов на стыке с
   плашкой и рваный край. Плашка и так стоит вплотную под своим полем */
/* Внутри окна оплаты координаты считаются от самого окна — оно в верхнем
   слое и задаёт свой отсчёт для fixed */
.field-error--in-dialog { position: absolute; }
.field-error__icon { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; color: #ff9c9c; }
@keyframes field-error-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Уходит тем же путём, только назад: кривая — зеркало входной
   (x1,y1,x2,y2) → (1-x2, 1-y2, 1-x1, 1-y1) */
.field-error.is-hiding {
    animation: field-error-out 0.24s cubic-bezier(0.64, 0, 0.78, -0.12) forwards;
}
@keyframes field-error-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-6px); }
}
/* Поле, на которое ругаемся */
.buy-form__input.is-invalid {
    border-color: rgba(255, 120, 120, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.14);
}
.buy-form__input {
    width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px;
    background: rgba(8, 13, 30, 0.6); border: 1px solid rgba(150, 190, 255, 0.22);
    color: var(--text); font-family: var(--font-body); font-size: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.buy-form__input::placeholder { color: var(--text-faint); }
.buy-form__input:focus { outline: none; border-color: var(--border-bright); box-shadow: var(--glow-blue); }
.buy-form__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.order-done {
    display: flex; flex-direction: column; gap: var(--s2);
    padding: var(--s4); border-radius: var(--radius-sm);
    background: linear-gradient(150deg, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0.04));
    border: 1px solid rgba(52, 211, 153, 0.32);
}
.order-done__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #7cf0bd; }

/* ============ Корзина ============ */
.icon-btn__badge {
    position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 999px;
    background: linear-gradient(150deg, #6ea8ff, #3f6fe0); color: #fff;
    font-family: var(--font-body); font-size: 11px; font-weight: 800; line-height: 1;
    box-shadow: 0 4px 12px rgba(63, 111, 224, 0.45);
}

.cart { display: flex; flex-direction: column; gap: var(--s3); }
.cart-line {
    display: flex; flex-direction: column; gap: var(--s2);
    padding: var(--s4); border-radius: var(--radius-sm);
}
.cart-line > * { position: relative; z-index: 2; }
.cart-line__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.cart-line__thumb {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
    display: block; background: rgba(255, 255, 255, 0.05);
}
.cart-line__media { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* min-width: 0 — иначе длинное название распирает строку и цена уезжает */
.cart-line__name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-line__game { color: var(--text-faint); font-size: 12.5px; font-weight: 600; }
.cart-line__title {
    font-family: var(--font-display); font-weight: 800; font-size: 17px;
    color: var(--text); text-decoration: none; overflow-wrap: anywhere;
}
.cart-line__title:hover { color: #fff; }
.cart-line--gone { opacity: 0.65; }
.cart-line__note { display: flex; flex-direction: column; gap: 6px; }
/* «Сохранено» под полем: набранное уезжает на сервер само, и без отметки
   непонятно, дошло ли. Гаснет само — постоянная подпись только мешала бы */
.cart-line__saved {
    font-size: 12px; font-weight: 700; color: #8ef0c0; opacity: 0;
}
.cart-line__saved.is-shown { animation: note-saved 2s ease forwards; }
@keyframes note-saved {
    0% { opacity: 0; transform: translateY(-3px); }
    12% { opacity: 1; transform: translateY(0); }
    70% { opacity: 1; }
    100% { opacity: 0; }
}
.cart-line__note-row { display: flex; gap: var(--s2); align-items: stretch; }
.cart-line__note-row .buy-form__input { flex: 1; min-width: 0; }
.cart-line__warn { color: #ffcf8a; font-size: 13px; font-weight: 700; }
.cart-line__qty { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
/* Такое же стекло, как ± в профиле, но видимое и без JS: это обычные формы */
.step-btn {
    position: relative; display: grid; place-items: center; flex-shrink: 0;
    width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    color: var(--text);
    font-family: var(--font-body); font-size: 18px; font-weight: 700; line-height: 1;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.step-btn::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.step-btn:active { transform: scale(0.94); }
.step-btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (hover: hover) {
    .step-btn:not(:disabled):hover { color: #fff; background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); }
}
.cart-line__count { min-width: 54px; text-align: center; font-weight: 800; }
.cart-line__badge {
    align-self: flex-start; padding: 5px 12px; border-radius: 999px;
    background: rgba(110, 168, 255, 0.16); color: #9ec9ff;
    font-size: 12px; font-weight: 800;
}
.cart-line--flat { background: rgba(255, 255, 255, 0.04); }

/* Переключатель «один аккаунт / разные»: стеклянная дорожка, выбранный
   вариант подсвечен зелёным и чуть увеличен — как будто выступает под стеклом */
.acc-switch {
    position: relative; align-self: flex-start;
    display: inline-flex; padding: 4px; border-radius: 999px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 18px rgba(0, 0, 0, 0.28);
}
/* Зелёная стекляшка — отдельный слой: она переезжает, а не перерисовывается */
.acc-switch__thumb {
    position: absolute; top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px); border-radius: 999px; pointer-events: none;
    background: linear-gradient(150deg, rgba(52, 211, 153, 0.28) 0%, rgba(52, 211, 153, 0.1) 55%, rgba(120, 170, 255, 0.06) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 16px rgba(52, 211, 153, 0.26);
    transition: transform 0.42s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.acc-switch--right .acc-switch__thumb { transform: translateX(100%); }
.acc-switch::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.acc-switch__opt {
    /* Половинки равной ширины: иначе стекляшке некуда ровно доехать */
    position: relative; z-index: 2; flex: 1 1 0; min-width: 152px;
    border: 0; cursor: pointer; background: transparent;
    padding: 9px 18px; border-radius: 999px; color: var(--text-faint);
    font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 1;
    transition: color 0.28s ease;
}
.acc-switch__opt span {
    display: block;
    transition: transform 0.42s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.acc-switch__opt.is-on { color: #8ef0c0; }
/* Зум выбранного текста — тот самый эффект «под стеклом» */
.acc-switch__opt.is-on span { transform: scale(1.12); }
.acc-switch__opt[data-blocked] { color: rgba(255, 255, 255, 0.32); }
@media (hover: hover) {
    .acc-switch__opt:not(.is-on):not([data-blocked]):hover { color: #fff; }
}
.acc-switch__opt:active span { transform: scale(0.96); }

.blocked-dialog, .cart-dialog {
    /* position: fixed — иначе окно центрируется относительно начала документа
       и на прокрученной странице уезжает вверх за экран.
       margin: auto обязателен: глобальный сброс отступов гасит центрирование */
    position: fixed; inset: 0; height: fit-content;
    margin: auto; width: min(380px, calc(100vw - 32px)); padding: var(--s5);
    border: 0; border-radius: var(--radius); color: var(--text); text-align: center;
    background: linear-gradient(160deg, rgba(20, 28, 52, 0.96), rgba(12, 16, 32, 0.98));
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.blocked-dialog::backdrop, .cart-dialog::backdrop { background: rgba(6, 10, 22, 0.62); backdrop-filter: blur(6px); }
.blocked-dialog__text { margin-bottom: var(--s4); font-weight: 600; line-height: 1.5; }

/* Окно «добавлено в корзину»: галочка, что именно добавили, и выбор — оформить
   или смотреть дальше. Кнопки в столбик, чтобы обе читались как равные пути */
.cart-dialog__mark {
    width: 54px; height: 54px; margin: 0 auto var(--s3); border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(150deg, rgba(52, 211, 153, 0.28), rgba(52, 211, 153, 0.08));
    /* Свечение ровным ореолом вокруг круга, без сдвига вниз */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 20px rgba(52, 211, 153, 0.26);
    color: #8ef0c0;
}
.cart-dialog__mark svg { width: 26px; height: 26px; }
.cart-dialog__title { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.cart-dialog__subject { margin-top: 6px; color: var(--text-dim); font-size: 14px; line-height: 1.45; }
.cart-dialog__count { margin-top: 4px; color: var(--text-faint); font-size: 13px; }
.cart-dialog__actions { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }

/* Два пути восстановления доступа: нумерованные шаги, чтобы человек выбрал свой */
.recover { display: flex; flex-direction: column; gap: var(--s4); }
.recover__way { display: flex; gap: var(--s3); align-items: flex-start; }
.recover__num {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: 14px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.recover__title { font-family: var(--font-display); font-weight: 800; font-size: 16px; margin-bottom: 4px; }

/* Правила читают редко, но читают внимательно: широкая колонка и воздух */
/* ============ Выпадающий список ============ */
/* Системный список ОС стилями не покрасить, поэтому JS подменяет его своим.
   Пока JS не отработал (и когда его нет) остаётся обычный select — ему хотя бы
   рисуем свою стрелку и отодвигаем её от края */
select.buy-form__input {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 44px; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb6d6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px 18px;
}

.glass-select { position: relative; }
.glass-select__button {
    position: relative; width: 100%; cursor: pointer; text-align: left;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    min-height: 52px; padding: 0 16px; border: 0; border-radius: var(--radius-sm);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    color: var(--text); font-family: var(--font-body); font-size: 15px; font-weight: 600;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: background 0.22s ease, box-shadow 0.22s ease;
}
.glass-select__button::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.glass-select__chevron {
    flex-shrink: 0; width: 18px; height: 18px; color: #9fb6d6;
    transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.glass-select[data-open] .glass-select__chevron { transform: rotate(180deg); }
.glass-select[data-open] .glass-select__button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--glow-blue); }

/* Оболочка живёт в конце body и позиционируется от кнопки: внутри карточки её
   резала стеклянная панель, а полупрозрачный фон просвечивал текст под ним.
   Поэтому здесь фон ПЛОТНЫЙ, без backdrop-filter.
   Она же раскрывается шторкой (высоту анимирует JS) и несёт тень — тень тогда
   растёт вместе с панелью. Когда шторкой ехал сам список через clip-path,
   обрезка съедала и тень, и та появлялась рывком в конце анимации */
.glass-select__pop {
    position: fixed; z-index: 90; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-start;
    border-radius: var(--radius-sm);
    background: #131a2e;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(150, 190, 255, 0.18);
}
/* display: flex перебивает браузерное [hidden] { display: none } — без этого
   правила закрытый список остался бы висеть на экране */
.glass-select__pop[hidden] { display: none; }
/* Раскрылся вверх — список прижат к низу оболочки, и шторка едет от кнопки вверх */
.glass-select__pop[data-drop="up"] { justify-content: flex-end; }
.glass-select__list {
    /* flex-shrink: 0 — иначе на нулевой высоте оболочки список сжимался бы
       вместе с ней и строки прыгали бы */
    flex-shrink: 0;
    max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px; list-style: none; margin: 0;
}
/* Системная полоса прокрутки в тёмной панели выглядит инородно: делаем свою —
   тонкую, без стрелок, с полупрозрачным бегунком.

   ВАЖНО: в Chrome scrollbar-width/scrollbar-color ОТМЕНЯЮТ все ::-webkit-scrollbar,
   и вместо нашей полосы рисуется системная — та самая, со стрелочками на концах.
   Поэтому стандартные свойства отдаём только браузерам без ::-webkit-scrollbar
   (Firefox), а Chrome и Safari забирают правила ниже */
@supports not selector(::-webkit-scrollbar) {
    .glass-select__list,
    .pay-dialog__scroll,
    .guide-dialog__scroll,
    .search-curtain__inner,
    .support-panel__list,
    .support-inbox__list,
    .support-inbox__thread,
    .table-wrap {
        scrollbar-width: thin;
        scrollbar-color: rgba(150, 190, 255, 0.28) transparent;
    }
}
.glass-select__list::-webkit-scrollbar,
.pay-dialog__scroll::-webkit-scrollbar,
.guide-dialog__scroll::-webkit-scrollbar,
.search-curtain__inner::-webkit-scrollbar,
.support-panel__list::-webkit-scrollbar,
.support-inbox__list::-webkit-scrollbar,
.support-inbox__thread::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
    width: 8px; height: 8px;
}
/* Дорожку поджимаем от краёв: она идёт во всю высоту панели, а углы у панели
   скруглены — без отступа бегунок в крайних положениях вылезал за скругление.
   Отступ чуть меньше радиуса: к этой высоте край уже почти вертикальный */
.glass-select__list::-webkit-scrollbar-track,
.search-curtain__inner::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
    background: transparent;
    margin: 12px 0;
}
.pay-dialog__scroll::-webkit-scrollbar-track,
.support-panel__list::-webkit-scrollbar-track,
.support-inbox__list::-webkit-scrollbar-track,
.support-inbox__thread::-webkit-scrollbar-track,
.guide-dialog__scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 18px 0; /* у этих окон радиус больше — 26px */
}
/* У шторки поиска скруглены только нижние углы, зато на все 26px: сверху
   дорожке отступ почти не нужен, снизу — больше обычного, иначе бегунок
   заезжает на закругление */
.search-curtain__inner::-webkit-scrollbar-track {
    background: transparent;
    margin: 6px 0 20px;
}
.glass-select__list::-webkit-scrollbar-thumb,
.pay-dialog__scroll::-webkit-scrollbar-thumb,
.guide-dialog__scroll::-webkit-scrollbar-thumb,
.search-curtain__inner::-webkit-scrollbar-thumb,
.support-panel__list::-webkit-scrollbar-thumb,
.support-inbox__list::-webkit-scrollbar-thumb,
.support-inbox__thread::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    /* Прозрачная рамка + background-clip: бегунок не липнет к краю панели */
    background: rgba(150, 190, 255, 0.26);
    border: 2px solid transparent;
    background-clip: padding-box;
}
.glass-select__list::-webkit-scrollbar-thumb:hover,
.pay-dialog__scroll::-webkit-scrollbar-thumb:hover,
.guide-dialog__scroll::-webkit-scrollbar-thumb:hover,
.search-curtain__inner::-webkit-scrollbar-thumb:hover,
.support-panel__list::-webkit-scrollbar-thumb:hover,
.support-inbox__list::-webkit-scrollbar-thumb:hover,
.support-inbox__thread::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 214, 255, 0.45);
    background-clip: padding-box;
}
/* Стрелки на концах убираем — из-за них полоса и выглядит системной.
   Одного display: none мало: без нулевых размеров браузер всё равно
   резервирует под кнопку место и бегунок не достаёт до края */
.glass-select__list::-webkit-scrollbar-button,
.pay-dialog__scroll::-webkit-scrollbar-button,
.guide-dialog__scroll::-webkit-scrollbar-button,
.search-curtain__inner::-webkit-scrollbar-button,
.support-panel__list::-webkit-scrollbar-button,
.support-inbox__list::-webkit-scrollbar-button,
.support-inbox__thread::-webkit-scrollbar-button,
.table-wrap::-webkit-scrollbar-button {
    display: none;
    width: 0; height: 0;
}
.glass-select__list::-webkit-scrollbar-corner,
.pay-dialog__scroll::-webkit-scrollbar-corner,
.guide-dialog__scroll::-webkit-scrollbar-corner,
.search-curtain__inner::-webkit-scrollbar-corner,
.support-panel__list::-webkit-scrollbar-corner,
.support-inbox__list::-webkit-scrollbar-corner,
.support-inbox__thread::-webkit-scrollbar-corner,
.table-wrap::-webkit-scrollbar-corner {
    background: transparent;
}

/* Свой фокус вместо системной рамки — она рисуется поверх стекла синим прямоугольником */
.glass-select__button:focus { outline: none; }
.glass-select__button:focus-visible {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--glow-blue);
}
.edition summary:focus { outline: none; }
.edition summary:focus-visible .edition__name { text-decoration: underline; }
.glass-select__option {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding: 11px 14px; border-radius: 12px; cursor: pointer;
    color: var(--text-dim); font-size: 14px; font-weight: 600;
    transition: background 0.16s ease, color 0.16s ease;
}
.glass-select__option[aria-selected="true"] {
    color: #8ef0c0;
    background: linear-gradient(150deg, rgba(52, 211, 153, 0.24), rgba(52, 211, 153, 0.07));
}
.glass-select__option.is-active:not([aria-selected="true"]),
.glass-select__option:hover:not([aria-selected="true"]) {
    background: rgba(255, 255, 255, 0.07); color: var(--text);
}
.glass-select__price { color: inherit; font-weight: 800; white-space: nowrap; }

/* Издание Steam-игры: заголовок-раскрывашка, цены внутри.
   Отступы карточки переносим внутрь: иначе поля панели не входят в summary,
   и по верхней и нижней полосе карточка не открывалась */
.edition.panel { padding: 0; }
.edition > summary {
    list-style: none; cursor: pointer;
    /* Тот же элемент несёт .edition__head, поэтому раскладку задаём здесь:
       иначе этот селектор перебивает её своей специфичностью */
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
    padding: var(--s5); border-radius: inherit;
}
.edition > summary::-webkit-details-marker { display: none; }
.edition > :not(summary) { position: relative; z-index: 2; padding: 0 var(--s5) var(--s5); }
.edition__head {
    position: relative; z-index: 2;
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
}
.edition__name { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.edition__from { color: var(--text-faint); font-size: 13px; font-weight: 700; white-space: nowrap; }
.edition[open] > summary { padding-bottom: var(--s3); }
@media (hover: hover) {
    .edition > summary:hover .edition__name { color: #fff; }
}

/* Игра рядом с названием: «80 Гемов» есть у трёх игр сразу */
.tile__game { display: block; color: var(--text-faint); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.product__game { display: block; color: var(--text-faint); font-size: 14px; font-weight: 600; margin-bottom: 6px; }

.rules { max-width: 760px; margin: 0 auto; line-height: 1.6; }
.rules > * { position: relative; z-index: 2; }
.rules__updated { margin-bottom: var(--s4); }
.rules__head {
    font-family: var(--font-display); font-weight: 800; font-size: 18px;
    margin: var(--s4) 0 var(--s2);
}
.rules p { color: var(--text-dim); margin-bottom: var(--s2); }
.rules__list { margin: 0 0 var(--s2) 22px; color: var(--text-dim); }
.rules__list li { margin-bottom: 8px; }
.rules b { color: var(--text); }

.error-code {
    display: block; font-family: var(--font-display); font-weight: 800;
    font-size: clamp(56px, 12vw, 88px); line-height: 1; letter-spacing: -0.04em;
    background: var(--ice-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Фокус стоит на самом окне ради клавиатуры — обводку вокруг карточки не рисуем */
.cart-dialog:focus, .cart-dialog:focus-visible { outline: none; }
/* Ведро живёт в шапке карточки, рядом с ценой */
.cart-line__remove { flex-shrink: 0; display: flex; }
.cart-line__trash {
    position: relative; display: grid; place-items: center;
    width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    color: var(--text-faint);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.cart-line__trash::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.cart-line__trash svg { width: 17px; height: 17px; }
.cart-line__trash:active { transform: scale(0.92); }
.cart-line__trash:focus { outline: none; }
.cart-line__trash:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--glow-blue); }
@media (hover: hover) {
    /* Действие необратимое — на наведении честно краснеет */
    .cart-line__trash:hover {
        color: #ffb4b4;
        background: linear-gradient(150deg, rgba(255, 120, 120, 0.26), rgba(255, 90, 90, 0.1));
    }
}
.cart-line--link {
    text-decoration: none; color: inherit; align-items: flex-start;
    background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-sm);
    transition: background 0.22s ease, transform 0.22s ease;
}
.cart-line--link .cart-line__head { width: 100%; }
.cart-line--link:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }

.cart-total { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.cart-total > * { position: relative; z-index: 2; }
.cart-total__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font-weight: 700; }
.cart-total__row--muted { color: var(--text-faint); font-weight: 600; margin-bottom: var(--s2); }
.cart-add { margin-top: var(--s2); }

@media (max-width: 560px) {
    .cart-line__note-row { flex-direction: column; }
    .cart-line__note-row .btn { width: 100%; }
    /* На узком экране четыре элемента в строке не помещаются и название
       рвётся по буквам. Ведро уводим в угол карточки, а цену — на свою
       строку под названием: так заголовок получает всю ширину */
    .cart-line__remove { position: absolute; top: 14px; right: 14px; z-index: 3; }
    .cart-line__head { flex-wrap: wrap; row-gap: 4px; padding-right: 46px; }
    .cart-line__head .price { flex: 1 0 100%; padding-left: calc(52px + var(--s3)); }
}

/* ============ Панели ============ */
.panel { padding: var(--s5); }
.panel > * { position: relative; z-index: 2; }
.panel--narrow { max-width: 480px; margin: var(--s6) auto; text-align: center; }
.panel__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; margin-bottom: var(--s2); }

.balance-card { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.balance-card__label { color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.stack { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); }

/* ============ Пополнение баланса ============ */
/* Ширина как у таблиц заказов — карточка тянется на всю колонку */
.balance-card--wide { width: 100%; gap: var(--s4); }
.balance-card__head { display: flex; flex-direction: column; gap: 6px; }

.head-actions { display: flex; align-items: center; gap: var(--s2); }

.topup { display: flex; flex-direction: column; gap: var(--s2); width: 100%; }
/* Перехватывает Enter в поле суммы, но невидима и не фокусируется */
.hidden-submit { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.topup__field { display: flex; align-items: center; gap: 8px; }
.topup__input-wrap { position: relative; flex: 1; min-width: 0; display: block; }
.topup__input { padding-right: 42px; font-size: 17px; font-weight: 700; }
.topup__currency {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    color: var(--text-faint); font-weight: 700; pointer-events: none;
}

/* Шаг ±50 ₽ — только при работающем JS, иначе кнопки были бы мёртвыми.
   Стекло как у остальных поверхностей: размытие, световой кант, внутренний блик */
.topup__step { display: none; }
.js .topup__step {
    position: relative; display: grid; place-items: center; flex-shrink: 0;
    /* Круг ровно по высоте поля суммы */
    width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
    font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    /* Число теней в покое и при наведении одинаковое, иначе свечение включается рывком */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34), 0 0 0 rgba(92, 200, 255, 0),
                inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.js .topup__step::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
/* Оттенок даёт стеклу смысл: плюс зелёный, минус красный */
.js .topup__step--plus {
    background: linear-gradient(150deg, rgba(52, 211, 153, 0.22) 0%, rgba(52, 211, 153, 0.07) 55%, rgba(120, 170, 255, 0.05) 100%);
    color: #8ef0c0;
}
.js .topup__step--minus {
    background: linear-gradient(150deg, rgba(255, 90, 120, 0.2) 0%, rgba(255, 45, 85, 0.06) 55%, rgba(120, 170, 255, 0.05) 100%);
    color: #ffa8bc;
}
@media (hover: hover) {
    .js .topup__step:hover { transform: translateY(-2px); }
    .js .topup__step--plus:hover {
        color: #b6ffdc;
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4), 0 0 22px rgba(52, 211, 153, 0.34),
                    inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(255, 255, 255, 0.09);
    }
    .js .topup__step--minus:hover {
        color: #ffc6d3;
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4), 0 0 22px rgba(255, 45, 85, 0.32),
                    inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(255, 255, 255, 0.09);
    }
}
.js .topup__step:active { transform: scale(0.94); }
.topup__hint { color: var(--text-faint); font-size: 12px; margin-top: var(--s1); }
.topup__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s2); }
.chip {
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(150, 190, 255, 0.2);
    color: var(--text); font-family: var(--font-body); font-size: 14px; font-weight: 700;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
@media (hover: hover) {
    .chip:hover { background: rgba(150, 200, 255, 0.16); border-color: var(--border-bright); transform: translateY(-1px); }
}
.chip:active { transform: scale(0.96); }

/* ============ Способы оплаты ============ */
/* ============ Steam-игры ============ */
.game-list { display: flex; flex-direction: column; gap: 12px; }
.game-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding: 14px 18px; border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none; font-weight: 600;
    /* overflow нужен блику: без него он уезжал бы за скруглённые углы строки */
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
/* Тот же бегущий блик, что у карточек каталога: строки — такое же стекло,
   и вести себя под курсором должны так же */
.game-row__shine {
    position: absolute; top: 0; left: 0; width: 55%; height: 100%; z-index: 3; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transform: translateX(-180%) skewX(-18deg);
    transition: transform 0.6s ease;
}
@media (hover: hover) {
    .game-row:hover .game-row__shine { transform: translateX(320%) skewX(-18deg); }
}
@media (hover: hover) {
    .game-row:hover { transform: translateY(-2px); color: #fff; box-shadow: var(--glass-shadow-hover); }
}
.game-row__name { min-width: 0; overflow-wrap: anywhere; }
/* Стеклянный кружок с шевроном вместо текстовой «→»: та рисуется шрифтом,
   у неё своя толщина и своя высота строки, и рядом с остальным интерфейсом
   она смотрелась чужой */
.game-row__go {
    position: relative; flex-shrink: 0; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%; color: var(--text-faint);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.22s ease, color 0.22s ease, background 0.22s ease;
}
.game-row__go::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.game-row__go svg { width: 15px; height: 15px; }
@media (hover: hover) {
    .game-row:hover .game-row__go {
        color: #fff; transform: translateX(3px);
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    }
}

/* Строка с обложкой Steam. Отдельный модификатор: у ключей картинок нет,
   и их строки должны остаться прежними */
.game-row--art { padding: 12px 18px 12px 12px; gap: var(--s3); }
.game-row--art .game-row__name { flex: 1; }
.game-row__art {
    position: relative; flex-shrink: 0; display: grid; place-items: center;
    width: 148px; aspect-ratio: 460 / 215; border-radius: 12px; overflow: hidden;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
}
/* Картинка ложится поверх заглушки. Не загрузилась — её убирает JS,
   и снизу остаётся буква, а не пустая рамка с иконкой битого файла */
.game-row__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* На телефоне широкая обложка съедает строку под названием: «Virtua Fighter 5
   R.E.V.O. World Stage» разъезжался на четыре строки. Правило стоит здесь, а не
   в общем блоке для узких экранов, — там оно шло ДО обычной ширины и проигрывало */
@media (max-width: 560px) {
    .game-row__art { width: 116px; }
}
.game-row__stub {
    font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--text-faint);
}

/* Шапка страницы игры: обложка и название рядом */
.steam-head {
    display: flex; align-items: center; gap: var(--s4);
    flex-wrap: wrap; margin-bottom: var(--s4);
}
.steam-head__art {
    position: relative; display: grid; place-items: center;
    /* Пропорции витринной обложки Steam. Ширину не задираем: картинка 460 px,
       растянутая шире, она мылит */
    flex: 0 1 360px; width: 360px; max-width: 100%; aspect-ratio: 460 / 215;
    border-radius: var(--radius-sm); overflow: hidden;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(150, 190, 255, 0.18);
}
.steam-head__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steam-head__stub {
    font-family: var(--font-display); font-weight: 800; font-size: 42px; color: var(--text-faint);
}
.steam-head__text { flex: 1 1 260px; min-width: 0; }
.steam-head__link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    color: var(--text-dim); text-decoration: none; font-size: 14px; font-weight: 700;
    transition: color 0.22s ease;
}
@media (hover: hover) { .steam-head__link:hover { color: var(--text); } }

/* Пока идёт поиск при вводе — приглушаем прошлый результат, чтобы было видно,
   что список уже не про то, что набрано */
[data-results] { transition: opacity 0.18s ease; }
[data-results].is-busy { opacity: 0.45; }

/* «Показать ещё» под списком каталога */
.more-row { display: flex; justify-content: center; margin-top: var(--s3); }
.more-row__btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.more-row__left { color: var(--text-faint); font-weight: 600; }

.region-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.region-card {
    padding: 14px; border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(150, 190, 255, 0.16);
}
.region-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: 10px; }
.region-card__name { font-weight: 700; }
.region-card__buy summary { list-style: none; cursor: pointer; }
.region-card__buy summary::-webkit-details-marker { display: none; }
.region-card__buy[open] summary { display: none; }
.region-card__buy .buy-form { margin-top: 4px; }

/* ============ Выданный товар ============ */
.delivery {
    text-align: left; padding: var(--s3); border-radius: var(--radius-sm);
    background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.3);
}
.delivery__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: 10px; }
.delivery__label { color: #8ef0c0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.delivery__body {
    margin: 0; padding: 14px; border-radius: 12px;
    background: rgba(4, 8, 18, 0.55); border: 1px solid rgba(150, 190, 255, 0.14);
    color: var(--text); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.waiting-note { text-align: left; }

/* ============ Окно оплаты товара ============ */
.pay-dialog {
    /* position: fixed — иначе на прокрученной странице окно уезжает вверх:
       absolute считает центр от начала документа, а не от экрана.
       margin: auto обязателен: глобальный сброс отступов гасит центрирование */
    position: fixed; inset: 0; height: fit-content;
    margin: auto; max-height: calc(100dvh - 32px);
    /* Прокрутка — на внутреннем слое, а не здесь. Кромка стекла нарисована
       ::after с position: absolute, и внутри прокручиваемого блока она
       отсчитывается от содержимого: при прокрутке обводка уезжала вверх */
    overflow: hidden;
    width: min(560px, calc(100vw - 32px)); padding: 0; border: 0;
    border-radius: var(--radius); color: var(--text);
    background: linear-gradient(160deg, rgba(20, 28, 52, 0.96), rgba(12, 16, 32, 0.98));
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.pay-dialog::backdrop { background: rgba(4, 6, 15, 0.72); backdrop-filter: blur(6px); }

/* ============ Появление модальных окон ============ */
/* Окно выезжает снизу и слегка «доводится» — как шторка оплаты в App Store.
   Закрытие вешает .is-closing: та же дорога в обратную сторону */
@keyframes dialog-rise {
    from { transform: translateY(34px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes dialog-sink {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to { transform: translateY(28px) scale(0.97); opacity: 0; }
}
@keyframes dialog-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-veil-out { from { opacity: 1; } to { opacity: 0; } }

.pay-dialog[open], .blocked-dialog[open], .cart-dialog[open] {
    animation: dialog-rise 0.42s cubic-bezier(0.22, 1.12, 0.36, 1);
}
/* display задаём только у открытого: у закрытого его ставит сам браузер
   (dialog:not([open]) { display: none }), и своим display мы бы его показали */
.pay-dialog[open], .guide-dialog[open] { display: flex; flex-direction: column; }
.pay-dialog__scroll, .guide-dialog__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pay-dialog[open]::backdrop, .blocked-dialog[open]::backdrop, .cart-dialog[open]::backdrop {
    animation: dialog-veil-in 0.32s ease;
}
.pay-dialog.is-closing, .blocked-dialog.is-closing, .cart-dialog.is-closing {
    animation: dialog-sink 0.2s ease-in forwards;
}
.pay-dialog.is-closing::backdrop, .blocked-dialog.is-closing::backdrop, .cart-dialog.is-closing::backdrop {
    animation: dialog-veil-out 0.2s ease-in forwards;
}

/* На телефоне это уже не карточка, а шторка: приезжает от нижнего края */
@media (max-width: 560px) {
    .pay-dialog, .blocked-dialog, .cart-dialog {
        margin: auto auto 0; width: 100%; max-width: none;
        border-radius: var(--radius) var(--radius) 0 0;
    }
    .pay-dialog { max-height: 88dvh; }
    @keyframes dialog-rise {
        from { transform: translateY(100%); opacity: 0.6; }
        to { transform: translateY(0); opacity: 1; }
    }
    @keyframes dialog-sink {
        from { transform: translateY(0); opacity: 1; }
        to { transform: translateY(100%); opacity: 0.6; }
    }
}
.pay-dialog__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
    padding: var(--s4) var(--s4) var(--s3);
    border-bottom: 1px solid rgba(150, 190, 255, 0.14);
}
.pay-dialog__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.pay-dialog__subject { color: var(--text-faint); font-size: 13px; margin-top: 4px; }
/* Такое же стекло, как у ± в корзине и крестика поиска */
.pay-dialog__close {
    position: relative; flex-shrink: 0; display: grid; place-items: center;
    width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    color: var(--text-dim); font-size: 20px; line-height: 1;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.pay-dialog__close::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.pay-dialog__close:active { transform: scale(0.94); }
@media (hover: hover) {
    .pay-dialog__close:hover {
        color: #fff;
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    }
}
.pay-dialog__body { padding: var(--s4); }
.pay-dialog__body .buy-form { gap: var(--s3); }

/* Предупреждение и сводка «цена / баланс» */
/* Тёплое стекло: та же механика, что у остальных плашек, но с оранжевым
   оттенком — предупреждение должно читаться как предупреждение */
.pay-warn {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    padding: 13px 15px; border-radius: var(--radius-sm); border: 0;
    background: linear-gradient(150deg, rgba(255, 154, 61, 0.24) 0%, rgba(255, 122, 42, 0.08) 55%, rgba(120, 170, 255, 0.05) 100%);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-size: 13px;
}
.pay-warn::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(150deg, rgba(255, 200, 150, 0.5), rgba(255, 255, 255, 0.06) 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.pay-warn > * { position: relative; z-index: 2; }
.pay-warn b { color: #ffc188; font-size: 13.5px; }
.pay-warn span { color: var(--text-dim); line-height: 1.45; }

.pay-facts {
    position: relative; display: flex; flex-direction: column; gap: 1px;
    border-radius: var(--radius-sm); overflow: hidden;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 0 0 1px rgba(150, 190, 255, 0.16), 0 8px 22px rgba(0, 0, 0, 0.26);
}
.pay-facts__row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    padding: 11px 15px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
}
.pay-facts__row dt { color: var(--text-faint); font-size: 13px; }
.pay-facts__row dd { margin: 0; font-weight: 800; }
.pay-facts__lack { color: #ff9ab0; }

.buy-form__counter { align-self: flex-end; color: var(--text-faint); font-size: 12px; margin-top: -6px; }
.buy-form__area { min-height: 96px; padding-top: 12px; padding-bottom: 12px; line-height: 1.5; resize: vertical; font-family: var(--font-body); }
/* align-items: stretch — «Отмена» той же высоты, что и кнопка оплаты рядом:
   разные высоты в одном ряду выглядят как недоделка */
.buy-form__actions { display: flex; gap: var(--s2); align-items: stretch; }
.buy-form__actions .btn { min-height: 54px; font-size: 17px; }
.buy-form__actions .btn--block { flex: 1; }
.buy-form__cancel { flex-shrink: 0; padding: 0 26px; }

/* ============ Панель способов оплаты ============ */
.pay-panel { margin-top: var(--s4); text-align: center; }
.pay-panel__title { margin-bottom: 6px; }
.pay-panel__foot { margin-top: var(--s4); }
.pay-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); text-align: left; }

.pay-card {
    position: relative; display: flex; align-items: stretch; gap: 8px;
    padding: 10px; border-radius: var(--radius-sm);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
@media (hover: hover) {
    .pay-card:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-hover); }
}
.pay-card__main { flex: 1; min-width: 0; display: flex; }
.pay-card__button {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
    padding: 6px; border: 0; background: none; cursor: pointer;
    color: var(--text); font-family: var(--font-body); text-align: left;
}
.pay-card__icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(140deg, rgba(92, 200, 255, 0.26), rgba(140, 120, 255, 0.18));
    color: #cfe6ff;
}
.pay-card__icon svg { width: 20px; height: 20px; }
.pay-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pay-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-card__title { font-weight: 800; font-size: 15px; }
.pay-card__badge {
    padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: rgba(92, 200, 255, 0.18); color: #9fdcff; border: 1px solid rgba(140, 190, 255, 0.28);
}
.pay-card__note { color: var(--text-faint); font-size: 12.5px; line-height: 1.4; }

.pay-card__copy {
    flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 13px; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(150, 190, 255, 0.2);
    color: var(--text-dim); font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.pay-card__copy svg { width: 15px; height: 15px; }
@media (hover: hover) {
    .pay-card__copy:hover { background: rgba(150, 200, 255, 0.16); color: #fff; border-color: var(--border-bright); }
}
.pay-card__copy.is-done { background: rgba(52, 211, 153, 0.2); border-color: rgba(52, 211, 153, 0.4); color: #8ef0c0; }

.pay-subject { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.pay-methods { display: flex; flex-direction: column; gap: var(--s2); text-align: left; }
.pay-method {
    position: relative; width: 100%; display: flex; align-items: center; gap: var(--s3);
    padding: 16px 18px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
    color: var(--text); font-family: var(--font-body); text-align: left;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
@media (hover: hover) {
    .pay-method:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-hover); }
}
.pay-method:active { transform: scale(0.99); }
.pay-method__icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(140deg, rgba(92, 200, 255, 0.24), rgba(140, 120, 255, 0.16));
    color: #cfe6ff;
}
.pay-method__icon svg { width: 20px; height: 20px; }
.pay-method__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pay-method__title { font-weight: 800; font-size: 15px; }
.pay-method__note { color: var(--text-faint); font-size: 12.5px; line-height: 1.4; }
.pay-method__arrow { color: var(--text-faint); font-size: 18px; flex-shrink: 0; }

.settings-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); justify-content: center; }

.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; }
table.orders { width: 100%; border-collapse: collapse; min-width: 520px; position: relative; z-index: 2; }
table.orders th, table.orders td { padding: 13px 16px; text-align: left; white-space: nowrap; font-size: 14px; }
table.orders th { color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid rgba(150, 190, 255, 0.16); }
table.orders tr + tr td { border-top: 1px solid rgba(150, 190, 255, 0.09); }
.scroll-hint { color: var(--text-faint); font-size: 12px; margin-top: var(--s1); }

.status { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.status-new { background: rgba(92, 200, 255, 0.18); color: #9fdcff; }
.status-processing { background: rgba(255, 154, 61, 0.18); color: #ffc188; }
.status-completed { background: rgba(52, 211, 153, 0.18); color: #7cf0bd; }
.status-cancelled { background: rgba(255, 45, 85, 0.18); color: #ff9ab0; }
/* Статусы пополнений */
.status-pending { background: rgba(255, 154, 61, 0.18); color: #ffc188; }
.status-paid { background: rgba(52, 211, 153, 0.18); color: #7cf0bd; }

/* Кнопка-ссылка внутри таблицы */
.link-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #9ec9ff; font-family: var(--font-body); font-size: 13px; font-weight: 700;
    transition: color 0.22s ease;
}
.link-btn:hover { color: #fff; }

.empty { text-align: center; padding: var(--s6) var(--s4); color: var(--text-faint); border-radius: var(--radius); }
.empty > * { position: relative; z-index: 2; }
/* Плашки ответа формы — то же тёплое стекло, что у .field-error под полем.
   Раньше это была просто красная строчка, и на фоне стеклянной панели она
   читалась как часть текста, а не как «что-то пошло не так». Стиль висит на
   самом классе, а не на отдельной разметке: класс уже стоит в двух десятках
   шаблонов, и так они получают плашку разом и одинаковую. */
.error-note,
.ok-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 14px;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
}
/* Значок рисуем на ::before, а не картинкой: строгий CSP на сайте запрещает
   внешние источники, а data:-адреса в масках поддержаны неровно. Кружок с
   восклицательным знаком собирается из ничего и работает везде */
.error-note::before,
.ok-note::before {
    content: "!";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}
.error-note {
    background: linear-gradient(150deg, rgba(255, 122, 122, 0.26) 0%, rgba(120, 30, 45, 0.5) 60%, rgba(60, 20, 40, 0.55) 100%);
    color: #ffdede;
}
.error-note::before { background: rgba(255, 156, 156, 0.9); color: #4a0f1c; }
.ok-note {
    background: linear-gradient(150deg, rgba(122, 255, 190, 0.22) 0%, rgba(20, 90, 70, 0.48) 60%, rgba(14, 50, 44, 0.55) 100%);
    color: #d9ffee;
}
.ok-note::before { content: "✓"; background: rgba(142, 240, 192, 0.9); color: #06301f; }
/* Внутри пустого состояния плашка не нужна: там уже стекло, и стекло на
   стекле выглядит наклейкой поверх наклейки. Возвращаем простую строку */
.empty .error-note,
.empty .ok-note {
    display: block;
    padding: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    font-size: inherit;
}
.empty .error-note { color: #ff9ab0; }
.empty .ok-note { color: #8ef0c0; }
.empty .error-note::before,
.empty .ok-note::before { content: none; }
/* 400, а не 500: файла на 500 у Manrope нет, и браузер по правилам подбора
   всё равно берёт ближайший меньший — то есть ровно 400. Написано было
   одно, рисовалось другое; теперь совпадает, вид не меняется */
.note-inline { color: var(--text-faint); font-weight: 400; }

.panel__title--sm { font-size: 18px; margin-bottom: var(--s3); }
.panel__eyebrow { display: block; color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; margin-bottom: 6px; }

/* Разделитель «или через Telegram» на странице входа */
.divider { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; color: var(--text-faint); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: rgba(150, 190, 255, 0.18); }

/* Профиль: строки аккаунта и сворачиваемые формы */
.account-rows { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.account-row { display: flex; gap: 14px; align-items: baseline; }
.account-row dt { color: var(--text-faint); font-size: 13px; font-weight: 700; min-width: 84px; }
.account-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ============ Подвал ============ */
.footer {
    border-top: 1px solid rgba(150, 190, 255, 0.14); margin-top: var(--s6);
    background: linear-gradient(180deg, rgba(8, 13, 32, 0.5), rgba(4, 7, 20, 0.75));
    backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
}
/* Одной колонкой по центру: подвал перестал быть строкой ссылок и стал
   разделом «как с нами связаться». Способы связи важнее навигации — в каталог
   и профиль ведут шапка и логотип, а вот куда написать при проблеме с
   заказом, раньше приходилось искать */
.footer__inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--s4);
    padding-top: var(--s6);
    padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
}
.footer__title {
    font-family: var(--font-display); font-size: 21px; font-weight: 800;
    color: var(--text); letter-spacing: -0.01em; margin-bottom: -10px;
}
.footer__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
/* Вид даёт класс .glass — то же стекло со световой кромкой, что у остальных
   панелей сайта. Здесь только раскладка: подменять оформление своими
   градиентом и рамкой значит завести вторую, чуть другую версию стекла,
   и карточки выпадут из общего стиля, как только он изменится */
.footer__card {
    display: inline-flex; align-items: center; gap: 12px; text-align: left;
    /* Капсула, а не скруглённый прямоугольник: полукруглый край перекликается
       с кнопками и чипами сайта. Отступ справа больше левого — слева край
       занимает круглый значок, и одинаковые поля смотрелись бы кривовато.
       Класс .glass задаёт свой радиус, поэтому этот идёт после него */
    padding: 10px 26px 10px 10px; text-decoration: none;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.22s ease;
}
@media (hover: hover) {
    .footer__card:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-hover), var(--glass-inner); }
}
/* Внутри карточки кружок не двигается сам. Он унаследовал от .icon-btn
   подъём при наведении, а карточка поднимается своим — выходило 4px разом,
   и кружок будто отрывался от карточки. Нажатие тоже гасим: сжиматься
   должна вся капсула, а не значок внутри неподвижной рамки */
@media (hover: hover) {
    .footer__card .icon-btn:hover { transform: none; }
}
.footer__card .icon-btn:active { transform: none; }

/* Круг — тот же .icon-btn, что кнопки в шапке: стекло, световая кромка,
   тот же кегль значка. Своего оформления здесь намеренно нет — иначе в
   магазине завелись бы два похожих, но разных круглых значка, и они
   разъехались бы при первой же правке стиля */
.footer__card-icon { flex-shrink: 0; cursor: inherit; }
.footer__card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.footer__card-title { color: var(--text-faint); font-size: 12px; font-weight: 600; }
.footer__card-value {
    color: var(--text); font-size: 14px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.footer__docs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s4);
    padding-top: var(--s3); border-top: 1px solid rgba(150, 190, 255, 0.12); width: 100%;
}
.footer__legal { color: var(--text-faint); font-size: 12.5px; line-height: 1.6; }
.footer__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.footer__brand {
    font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em;
    background: var(--ice-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__note { color: var(--text-faint); font-size: 13px; }
.footer__actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; justify-content: flex-end; }
.footer__link { color: var(--text-dim); text-decoration: none; font-weight: 600; font-size: 14px; }
.footer__link:hover { color: var(--blue); }
/* Почта и реквизиты набраны тем же мелким кеглем, что копирайт: это
   справочные сведения, а не способ связи «в один клик» — для связи есть
   карточки выше */
.footer__contact { color: var(--text-faint); font-size: 12px; }
.footer__contact a { color: var(--text-dim); }
.footer__contact a:hover { color: var(--blue); }
.footer__copy { color: var(--text-faint); font-size: 12px; }

/* ============ Появление при скролле ============ */
.js .reveal { opacity: 0; translate: 0 18px; }
.reveal { transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
/* У карточек тот же класс: без этого правило выше срезало бы им
   плавность подъёма и тени при наведении */
.tile.reveal {
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .reveal.is-visible { opacity: 1; translate: 0 0; }

/* ============ Адаптив ============ */
@media (max-width: 900px) {
    .product { grid-template-columns: 1fr; padding: var(--s4); gap: var(--s4); }
    .stats { gap: var(--s5); }
}

@media (max-width: 620px) {
    :root { --topbar-h: 60px; --radius: 22px; --radius-sm: 16px; }
    .content { padding: var(--s4) 0 var(--s6); }
    .hero { padding: var(--s5) 0 var(--s2); }
    .hero__logo-wrap { width: 100px; height: 100px; }
    .grid { grid-template-columns: 1fr; gap: var(--s3); }
    .tile__body { padding: var(--s3) var(--s3) var(--s4); }
    .tile__title { font-size: 16px; }
    .icon-btn { width: 40px; height: 40px; }
    .icon-btn svg { width: 19px; height: 19px; }
    .search-box__input { height: 40px; padding: 0 15px; }
    /* На телефоне поле занимает почти всю шапку: пружинка на такой ширине
       выглядит дёрганьем, поэтому едет ровно */
    .search-box__form,
    .search-box.is-open .search-box__form {
        transition: width 0.3s ease-out, opacity 0.2s ease, overflow 0s linear;
    }
    .search-box.is-open .search-box__form { transition-delay: 0s, 0s, 0.3s; }
    /* Поиск открыт — логотип уступает место, иначе поле налезает на него */
    .topbar.is-searching .brand { opacity: 0; visibility: hidden; }
    .topbar.is-searching .search-box.is-open .search-box__form { width: calc(100vw - 150px); }
    .search-box.is-open .search-box__form { width: min(200px, 52vw); }
    .brand__line { padding-right: 2px; }
    .brand__line--top { font-size: 10px; letter-spacing: 0.1em; }
    .brand__line--bottom { font-size: 19px; }
    .brand__name--mark { --mark-top: 10px; --mark-bottom: 19px; }
    .brand__logo { width: 34px; height: 34px; }
    .trust { grid-template-columns: 1fr; margin-top: var(--s5); }
    .stats { gap: var(--s4); margin-top: var(--s5); }
    .stats__value { font-size: 22px; }
    .btn--lg { min-height: 48px; padding: 0 22px; font-size: 15px; }
    .card-media-hero { aspect-ratio: 4 / 3; }
    /* Путь целиком на телефон не влезает: оставляем каталог и текущее место,
       длинное название подрезаем — так ничего не уезжает за край */
    .crumbs__step--mid { display: none; }
    .crumbs { gap: 8px; padding: 9px 12px; }
    .crumbs__back { padding: 0 13px 0 10px; }
    .crumbs__chip { min-width: 0; }
    .crumbs__chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Узкий экран: ужимаем шаги и знак рубля, иначе поле съедается
       кнопками и плейсхолдер обрезается */
    .js .topup__step { width: 44px; height: 44px; font-size: 19px; }
    .topup__field { gap: 6px; }
    .topup__input { padding-right: 32px; padding-left: 14px; font-size: 16px; }
    .topup__currency { right: 12px; font-size: 14px; }
    /* Слабым телефонам тяжело держать много стекла поверх движущегося фона */
    :root { --glass-blur: blur(16px) saturate(160%); }
    .nebula { animation: none; }
    .footer { margin-top: var(--s5); }
    .footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s3); }
    .footer__cards { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
    .footer__title { font-size: 19px; }
    .footer__main { align-items: center; gap: 6px; }
    .footer__brand { font-size: 19px; }
    .footer__actions { width: 100%; justify-content: center; gap: var(--s4); }
    .footer__actions .btn { width: 100%; max-width: 320px; margin-top: var(--s1); }
    .footer__copy { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .js .reveal { opacity: 1; translate: none; }
}

@media (forced-colors: active) {
    .brand__line::before, .hero__title, .hero__accent, .section-title, .price--lg, .card-media--empty span, .footer__brand {
        -webkit-text-fill-color: currentColor; color: CanvasText; background: none;
    }
    /* У знака-рисунка цвет задаётся заливкой, а не color: красим системным
       и убираем градиентную подсветку — в высокой контрастности она читается
       как грязь поверх букв */
    .brand__mark-ink { fill: CanvasText; }
    .brand__mark-glow { display: none; }
    .glass, .tile { border: 1px solid CanvasText; }
}

/* ============ Инструкция «как найти данные для выдачи» ============ */
/* Кнопка стоит в одной строке с подсказкой под полем: подсказка говорит,
   ЧТО ввести, кнопка — где это взять */
.buy-form__hintrow {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s2); flex-wrap: wrap;
}
.buy-form__hintrow .buy-form__hint { flex: 1 1 auto; min-width: 0; }
.guide-open {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
    color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 700;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.guide-open .btn__icon { width: 15px; height: 15px; }
.guide-open:active { transform: scale(0.96); }
@media (hover: hover) {
    .guide-open:hover {
        color: #fff;
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
    }
}

/* Окно инструкции — та же шторка, что у оплаты: одна механика на весь сайт */
.guide-dialog {
    position: fixed; inset: 0; height: fit-content;
    margin: auto; max-height: calc(100dvh - 32px); overflow: hidden;
    width: min(520px, calc(100vw - 32px)); padding: 0; border: 0;
    border-radius: var(--radius); color: var(--text);
    background: linear-gradient(160deg, rgba(20, 28, 52, 0.96), rgba(12, 16, 32, 0.98));
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.guide-dialog::backdrop { background: rgba(4, 6, 15, 0.72); backdrop-filter: blur(6px); }
.guide-dialog[open] { animation: dialog-rise 0.42s cubic-bezier(0.22, 1.12, 0.36, 1); }
.guide-dialog[open]::backdrop { animation: dialog-veil-in 0.32s ease; }
.guide-dialog.is-closing { animation: dialog-sink 0.2s ease-in forwards; }
.guide-dialog.is-closing::backdrop { animation: dialog-veil-out 0.2s ease-in forwards; }
/* Шапка не сжимается и не прокручивается — крестик всегда на месте */
.guide-dialog .pay-dialog__head { flex: 0 0 auto; }
.guide-dialog__body { padding: var(--s4); display: grid; gap: var(--s3); }
.guide-dialog__text { display: grid; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
/* Переводы строк внутри абзаца — тоже переводы строк: инструкцию пишут
   шагами, и «1. …» с новой строки должно остаться с новой строки */
.guide-dialog__text p { white-space: pre-line; overflow-wrap: anywhere; }
.guide-dialog__shots { display: grid; gap: var(--s2); }
.guide-dialog__shot {
    display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
    border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(150, 190, 255, 0.14);
}
.guide-dialog__shot img { display: block; width: 100%; height: auto; }

/* Скриншот во весь экран: разглядеть мелкий пункт меню в списке невозможно */
.guide-zoom {
    position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; padding: var(--s3); border: 0; background: transparent; cursor: zoom-out;
    display: flex; align-items: center; justify-content: center;
}
.guide-zoom::backdrop { background: rgba(3, 5, 12, 0.92); }
.guide-zoom img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.guide-zoom[open] { animation: dialog-veil-in 0.2s ease; }
.guide-zoom.is-closing { animation: dialog-veil-out 0.18s ease-in forwards; }

@media (max-width: 560px) {
    .guide-dialog {
        margin: auto auto 0; width: 100%; max-width: none; max-height: 88dvh;
        border-radius: var(--radius) var(--radius) 0 0;
    }
}

/* ============ Карточка первого экрана ============ */
/* Текстовый логотип и главная фраза — одним стеклом: раньше текст висел
   на фоне, и первый экран выглядел незаконченным */
/* Во всю ширину — ровно как плашки доверия под ней: узкая карточка
   висела посреди пустого места и ломала строй первого экрана */
.hero__card {
    display: grid; justify-items: center; gap: var(--s3);
    margin: var(--s3) 0 var(--s4);
    padding: var(--s5) var(--s4);
}
/* Сам текст остаётся узким: строка во всю ширину читается тяжело */
.hero__card .hero__subtitle { margin: 0; }
/* Тот же наклон и те же строки, что в шапке, только крупнее */
.hero__mark {
    display: flex; flex-direction: column; align-items: center;
    line-height: 1.06; transform: skewX(-8deg);
}
.hero__mark .brand__line--top { font-size: 17px; letter-spacing: 0.12em; }
.hero__mark .brand__line--bottom { font-size: 33px; letter-spacing: 0.02em; }
.hero__mark--mark { --mark-top: 17px; --mark-bottom: 33px; }
/* Логотип дышит: белый → ледяной градиент → обратно, по кругу.
   Одна анимация с одним временем на обе строки — значит, разгораются и
   гаснут они синхронно, а не вразнобой */
.hero__mark .brand__line::before {
    opacity: 0;
    transition: none;
    animation: mark-glow 5s ease-in-out infinite;
}
@keyframes mark-glow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
/* Кому анимации мешают — просто оставляем логотип светящимся */
.hero__mark--mark .brand__mark-glow {
    opacity: 0; transition: none;
    animation: mark-glow 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .hero__mark .brand__line::before { animation: none; opacity: 1; }
    .hero__mark--mark .brand__mark-glow { animation: none; opacity: 1; }
}

@media (max-width: 720px) {
    .hero__card { padding: var(--s4) var(--s3); margin: var(--s2) 0 var(--s3); }
    .hero__mark .brand__line--top { font-size: 14px; }
    .hero__mark .brand__line--bottom { font-size: 27px; }
    .hero__mark--mark { --mark-top: 14px; --mark-bottom: 27px; }
}

/* Узкие телефоны (320px и около): строка «Средняя выдача ~2 мин» не
   переносится и на такой ширине вылезала за капсулу, а подпись у
   «Безопасно» уезжала на вторую строку и делала весь ряд выше.
   Ужимаем значок и кегль — пропорции те же, просто мельче */
@media (max-width: 380px) {
    .trust__item { column-gap: 11px; padding: 8px 16px 8px 8px; }
    .trust__icon { width: 40px; height: 40px; }
    .trust__icon svg { width: 19px; height: 19px; }
    .trust__line { font-size: 15.5px; }
    .trust__title { font-size: 15px; }
    .trust__text { font-size: 12.5px; }
}

/* Выход — форма, а не ссылка: по GET его мог дёрнуть кто угодно со стороны.
   Внешне должно остаться кнопкой на своём месте */
.logout-form { display: inline-flex; margin: 0; }
.logout-form--inline { display: inline; }
/* Кнопка, которая выглядит ссылкой — для строки «Не вы запрашивали?» */
.linklike {
    padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--accent, #7cc6ff); font: inherit; text-decoration: underline;
}

/* Код сверки на странице входа через бота. Крупно и вразрядку: его читают
   с экрана и сравнивают с тем, что прислал бот */
.login-code {
    display: grid; justify-items: center; gap: 6px;
    margin-bottom: 22px; padding: 16px 14px; border-radius: var(--radius-sm);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.login-code__label { color: var(--text-faint); font-size: 12.5px; }
.login-code__value {
    font-family: var(--font-display); font-weight: 800; font-size: 30px;
    letter-spacing: 0.22em; text-indent: 0.22em; color: #fff;
}
.login-code__hint { color: var(--text-faint); font-size: 12px; text-align: center; }

/* ============ Поддержка: кружок, панель переписки, инбокс ============ */
/* Лестница слоёв на сайте: шапка 40, всплывашки селекта 90, плашки ошибок 60.
   Кружку достаётся 50 — он выше шапки и подсказок, но не перекрывает ошибку */
.support-fab {
    position: fixed; z-index: 50;
    right: max(var(--s4), env(safe-area-inset-right));
    bottom: max(var(--s4), env(safe-area-inset-bottom));
    width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center;
    /* Один градиент, холодный: тёплый --cta-gradient рядом с ним в одном
       переходе даёт грязную серо-зелёную середину в sRGB */
    background: var(--accent-gradient);
    color: #fff; text-decoration: none; cursor: pointer;
    /* backdrop-filter намеренно нет: на кружке, который висит поверх
       прокручивающейся страницы, размытие в Telegram-вебвью дёргается */
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 rgba(120, 150, 255, 0);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.support-fab::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.support-fab__icon { width: 26px; height: 26px; }
.support-fab:active { transform: scale(0.94); }
@media (hover: hover) {
    .support-fab:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 0 28px rgba(120, 160, 255, 0.45);
    }
}
/* Непрочитанное красным: синий значок на синем кружке было бы не разглядеть */
.support-fab__badge {
    position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px;
    display: grid; place-items: center; border-radius: 999px;
    background: linear-gradient(150deg, #ff7a6e, #e03050); color: #fff;
    font-family: var(--font-body); font-size: 11px; font-weight: 800; line-height: 1;
    box-shadow: 0 4px 12px rgba(224, 48, 80, 0.5);
}

.support-panel {
    /* position: fixed — иначе на прокрученной странице панель отсчитывается
       от начала документа и уезжает за экран. inset: auto гасит растяжку,
       margin: 0 — глобальный сброс отступов и так убрал бы центрирование */
    position: fixed; inset: auto; margin: 0;
    right: max(var(--s4), env(safe-area-inset-right));
    bottom: calc(58px + var(--s3) + max(var(--s4), env(safe-area-inset-bottom)));
    /* Уже привычного окна чата: панель висит поверх каталога, и на широком
       экране лишние полсотни пикселей закрывали правую карточку товара.
       Меньше 300 уходить нельзя — переписка превращается в узкую колонку,
       где каждое второе сообщение переносится */
    width: min(330px, calc(100vw - 32px));
    height: min(560px, calc(100dvh - 150px));
    /* Браузер сам навязывает <dialog> max-width/max-height вида
       calc(100% - 38px) — из-за них панель на телефоне не дотягивалась до
       краёв экрана, и по бокам просвечивала страница. Размер мы задаём
       явно, так что ограничение снимаем */
    max-width: none; max-height: none;
    padding: 0; border: 0; overflow: hidden;
    border-radius: var(--radius); color: var(--text);
    /* Стекло как у остальных панелей сайта. Тёмная подложка ПОД стеклом
       обязательна: под панелью проезжает пёстрый каталог с обложками, и на
       чистом --glass-bg белый текст сообщений на светлой картинке пропадал */
    background: linear-gradient(160deg, rgba(16, 23, 44, 0.74), rgba(10, 14, 28, 0.8)), var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-inner);
    isolation: isolate;
}
/* Световой кант по краю — то, по чему стекло в этом проекте и узнаётся.
   Absolute выводит псевдоэлемент из потока, поэтому flex-раскладку
   содержимого он не ломает */
.support-panel::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: inherit; padding: 1px;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
/* Кант лежит на z-index 4 — поднимаем содержимое, иначе шапка и форма
   оказываются под ним и глохнут клики по краям */
.support-panel > * { position: relative; z-index: 2; }
/* display только у открытой: у закрытой его ставит сам браузер
   (dialog:not([open]) { display: none }), и своим display мы бы её показали */
.support-panel[open] { display: flex; flex-direction: column; }
/* Затемнение слабее, а размытие сильнее: сквозь него должен угадываться
   каталог — так панель читается как слой поверх магазина, а не как
   отдельная страница. Совсем прозрачным делать нельзя: пёстрые обложки
   товаров начинают спорить с текстом переписки */
.support-panel::backdrop {
    background: rgba(6, 10, 22, 0.44);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.support-panel:focus, .support-panel:focus-visible { outline: none; }

.support-panel__head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid rgba(150, 190, 255, 0.14);
}
.support-panel__title { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
/* Крестик — то же стекло, что у круглых кнопок в хлебных крошках */
.support-panel__close {
    position: relative;
    flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    color: var(--text-dim);
    /* Число теней одинаковое в покое и при наведении — иначе подсветка мигает */
    box-shadow: 0 0 0 rgba(92, 200, 255, 0), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.support-panel__close::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.support-panel__close svg { width: 16px; height: 16px; position: relative; z-index: 1; }
.support-panel__close:active { transform: scale(0.92); }
@media (hover: hover) {
    .support-panel__close:hover {
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
        color: #fff;
        box-shadow: 0 0 22px rgba(92, 200, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* Прокрутка живёт здесь, а не на самом <dialog>: у панели скруглённые углы
   и overflow: hidden, иначе сообщения вылезали бы за кромку */
.support-panel__list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    /* По горизонтали режем наглухо. Стрелка свайпа и кнопка ответа висят
       СБОКУ от пузыря и вылезают за край ленты — без этого браузер считал
       их прокручиваемой областью и рисовал внизу полосу прокрутки.
       Подсказке это не мешает: при свайпе пузырь едет влево и тянет
       стрелку за собой, внутрь видимой области */
    overflow-x: hidden;
    display: flex; flex-direction: column; gap: var(--s2);
    padding: var(--s4);
}
/* Переписка прижимается к низу, как в любом мессенджере: два сообщения не
   должны висеть под шапкой, оставляя пустоту до поля ввода. Через отступ
   первого элемента, а не justify-content: flex-end — при переполнении тот
   не даёт доскроллить до самого верхнего сообщения */
.support-panel__list > :first-child { margin-top: auto; }
/* Гостю ленты нет вовсе, и подпись «войдите» болталась у нижнего края
   пустой панели во весь экран. Пустая лента съёживается, подпись забирает
   свободное место и встаёт по центру — это читается как приглашение,
   а не как обрезанный интерфейс */
.support-panel__list:empty { flex: 0 0 auto; padding: 0; }
.support-panel__list:empty + .support-panel__note {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s1);
    padding: var(--s5) var(--s4);
    text-align: center; font-size: 14px;
}
.support-panel__note {
    padding: 0 var(--s4) var(--s2);
    color: var(--text-faint); font-size: 13px; line-height: 1.45;
}
/* Тот же класс переиспользован внутри ленты (пустая переписка, «диалог
   закрыт») — там боковые отступы уже даёт сама лента */
.support-panel__list .support-panel__note { padding: var(--s2) 0; text-align: center; }
.support-panel__note a { color: var(--blue); font-weight: 700; }

/* flex-wrap нужен плашке «отвечаете на…»: она лежит в этой же форме (иначе
   её пришлось бы отправлять отдельно от текста) и занимает всю строку, вставая
   над полем ввода. Пока цитаты нет, плашка display: none и на раскладку не
   влияет */
.support-panel__form {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2);
    padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(150, 190, 255, 0.14);
}
.support-panel__input {
    flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 132px;
    padding: 11px 15px; border-radius: 16px; resize: none;
    /* Тёмное «углубление» в стекле: подложка темнее панели плюс внутренняя
       тень сверху — поле читается как вырез, а не как наклейка */
    background: rgba(8, 13, 30, 0.55);
    backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(150, 190, 255, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.35;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.support-panel__input::placeholder { color: var(--text-faint); }
.support-panel__input:focus {
    outline: none; border-color: var(--border-bright);
    box-shadow: var(--glow-blue), inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* Стрелка отправки собрана как .btn--primary: градиент, световой кант и
   мягкое свечение. Градиент холодный: тёплый и холодный в проекте не
   смешивают, а панель целиком в сине-фиолетовой гамме */
.support-panel__send {
    position: relative; isolation: isolate;
    flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--accent-gradient); color: #fff;
    box-shadow: 0 2px 10px rgba(92, 200, 255, 0.28), 0 0 22px rgba(92, 200, 255, 0.18);
    transition: transform 0.28s cubic-bezier(.22, .61, .36, 1), box-shadow 0.28s ease, opacity 0.2s ease;
}
.support-panel__send::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.support-panel__send svg { width: 19px; height: 19px; position: relative; z-index: 1; }
.support-panel__send:active { transform: translateY(1px) scale(0.95); }
@media (hover: hover) {
    .support-panel__send:hover:not([disabled]) {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(92, 200, 255, 0.36), 0 0 30px rgba(155, 107, 255, 0.28);
    }
}
/* Свечение при недоступной кнопке гасим полностью: подсвеченная кнопка,
   которая не нажимается, читается как поломка */
.support-panel__send[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Пузыри переписки. Один набор классов на виджет, страницу /support и
   админский инбокс — чтобы переписка выглядела одинаково везде */
.support-msg {
    max-width: 84%; padding: 9px 13px; border-radius: 16px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.support-msg--user {
    align-self: flex-end; border-bottom-right-radius: 6px;
    background: linear-gradient(150deg, rgba(92, 200, 255, 0.26), rgba(155, 107, 255, 0.16));
}
.support-msg--admin { align-self: flex-start; border-bottom-left-radius: 6px; }
/* pre-wrap сохраняет переводы строк, которые человек набрал сам.
   overflow-wrap: anywhere обязателен: ссылка без пробелов иначе растягивает
   панель по горизонтали и ломает всю раскладку */
.support-msg__text {
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
    font-size: 14.5px; line-height: 1.45;
}
.support-msg__time { display: block; margin-top: 3px; color: var(--text-faint); font-size: 11px; text-align: right; }

/* Панель прилетает из угла, где стоит кружок, а не из центра экрана */
@keyframes support-pop {
    from { transform: translateY(18px) scale(0.94); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes support-drop {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to { transform: translateY(14px) scale(0.96); opacity: 0; }
}
.support-panel[open] { animation: support-pop 0.3s cubic-bezier(0.22, 1.12, 0.36, 1); transform-origin: 100% 100%; }
.support-panel[open]::backdrop { animation: dialog-veil-in 0.28s ease; }
.support-panel.is-closing { animation: support-drop 0.18s ease-in forwards; }
.support-panel.is-closing::backdrop { animation: dialog-veil-out 0.18s ease-in forwards; }

/* На широком экране панель открывается НЕ модально: покупатель продолжает
   листать каталог с открытой перепиской, поэтому она обычный слой и ей
   нужен свой этаж. Кружок на 50, шапка на 40, плашки ошибок на 60 */
.support-panel { z-index: 55; }

/* Страница при открытии чата НЕ двигается и не поджимается: панель просто
   висит поверх неё. Сдвиг контента пробовали — он честно убирал перекрытие
   карточек, но заодно дёргал всю страницу и обрывал фон шапки, и это
   раздражало сильнее, чем сама перекрытая карточка. */

/* На телефоне окно шире и выше, но остаётся карточкой: по краям видно
   размытый сайт, углы скруглены. Во весь экран это выглядело грубо —
   как будто открылась отдельная страница, а не панель поверх магазина.
   Размер задаём отступами со всех сторон, width/height сбрасываем в auto,
   иначе они пересилят и панель снова упрётся в свои 384 пикселя */
@media (max-width: 560px) {
    .support-panel {
        top: calc(var(--s7) + env(safe-area-inset-top));
        right: max(var(--s3), env(safe-area-inset-right));
        /* Клавиатура на iOS не уменьшает окно браузера — она накрывает его
           снизу. Панель прибита к нижнему краю, поэтому поле ввода и кнопка
           отправки уезжали ПОД клавиатуру: было видно только шапку окна.
           Поднимаем низ ровно на её высоту, и панель просто становится ниже */
        bottom: calc(max(var(--s3), env(safe-area-inset-bottom)) + var(--keyboard));
        left: max(var(--s3), env(safe-area-inset-left));
        width: auto; height: auto;
        max-width: none; max-height: none;
        border-radius: var(--radius);
    }
    /* Только на телефоне: там панель модальная и занимает почти весь экран,
       и без этого палец «проваливался» в каталог за ней. На широком экране
       блокировать прокрутку нельзя — покупатель как раз и должен листать
       товары с открытым чатом */
    html:has(.support-panel[open]) { overflow: hidden; }
    .support-fab { width: 54px; height: 54px; }
    .support-fab__icon { width: 24px; height: 24px; }
    /* Кружок висит над низом экрана и на прокрученной донизу странице накрывал
       ссылки подвала — отодвигаем их от края ровно на его высоту */
    .footer__inner { padding-bottom: calc(var(--s4) + 66px + env(safe-area-inset-bottom)); }
}

/* Кому анимации мешают — панель просто появляется */
@media (prefers-reduced-motion: reduce) {
    .support-panel[open], .support-panel.is-closing,
    .support-panel[open]::backdrop, .support-panel.is-closing::backdrop { animation: none; }
    .support-fab { transition: none; }
}

/* ============ Ответ на конкретное сообщение ============ */
/* Один набор классов на виджет, страницу /support и админский инбокс: цитата
   должна выглядеть одинаково, где бы переписку ни открыли */

/* Пузырь — точка отсчёта для кнопки ответа: она висит рядом с ним, в пустой
   половине строки, и потому не закрывает текст */
.support-msg { position: relative; }

/* Цитата: узкая полоска слева и приглушённый текст — так это устроено во всех
   мессенджерах, и её не путают с самим сообщением. Кнопка, а не блок, потому
   что по ней кликают (прыжок к оригиналу) и до неё доходят табом */
.support-msg__quote {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
    width: 100%; margin-bottom: 6px; padding: 4px 9px 5px;
    border: 0; border-left: 2px solid var(--blue); border-radius: 4px 10px 10px 4px;
    background: rgba(255, 255, 255, 0.08);
    color: inherit; font-family: var(--font-body); text-align: left; cursor: pointer;
    transition: background 0.2s ease;
}
.support-msg__quote-author { font-size: 12px; font-weight: 700; color: var(--blue); }
/* Цитата всегда в одну строку: развернись она на весь оригинал, сам ответ
   потерялся бы под ней. Полный текст человек видит, прыгнув к сообщению */
.support-msg__quote-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; color: var(--text-faint);
}
.support-msg__quote:focus-visible { outline: 2px solid var(--border-bright); outline-offset: 2px; }

/* Прыжок к оригиналу: пузыри похожи друг на друга, и без вспышки непонятно,
   на какой именно нас перенесло */
/* Подсветка не просто «дольше горит», а ДЕРЖИТСЯ: разгорается быстро,
   стоит на месте больше секунды и лишь потом медленно гаснет. Равномерное
   растягивание той же вспышки читалось бы как подтормаживание, а не как
   подсказка «вот это сообщение» */
@keyframes support-flash {
    0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
    12% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 2px var(--border-bright), 0 0 20px rgba(92, 200, 255, 0.35); }
    58% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 2px var(--border-bright), 0 0 20px rgba(92, 200, 255, 0.35); }
    100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
}
.support-msg.is-flash { animation: support-flash 2.6s ease; }

/* Кнопка ответа маленькая и ненавязчивая: висит в поле сбоку от пузыря и на
   компьютере проявляется только при наведении, чтобы не рябить в переписке */
.support-msg__reply {
    position: absolute; top: 3px; width: 26px; height: 26px; padding: 0;
    display: grid; place-items: center; border: 0; border-radius: 50%;
    background: rgba(12, 18, 38, 0.72);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(150, 190, 255, 0.22);
    color: var(--text-faint); cursor: pointer;
}
.support-msg__reply svg { width: 15px; height: 15px; }
/* Кнопку уводим в сторону центра ленты: у своих сообщений свободно слева,
   у ответов поддержки — справа */
/* Кнопка ВПЛОТНУЮ к пузырю, без зазора: она его потомок, поэтому пока
   курсор на ней — пузырь считается наведённым и кнопка не гаснет. Стоило
   оставить между ними даже пару пикселей, как курсор по дороге оказывался
   ни на чём, наведение спадало и кнопка исчезала прямо перед нажатием */
.support-msg--user .support-msg__reply { right: 100%; }
.support-msg--admin .support-msg__reply { left: 100%; }
@media (hover: hover) {
    .support-msg__reply {
        opacity: 0; pointer-events: none;
        transition: opacity 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }
    /* focus-visible обязателен: с клавиатуры до кнопки доходят табом, а
       наведения при этом нет — иначе фокус стоял бы на невидимом */
    .support-msg:hover .support-msg__reply,
    .support-msg__reply:focus-visible { opacity: 1; pointer-events: auto; }
    .support-msg__reply:hover { color: var(--text); transform: scale(1.06); }
    .support-msg__quote:hover { background: rgba(255, 255, 255, 0.14); }
}
/* У пальца наведения не бывает — там пузырь тянут влево или держат, а
   вечно висящая кнопка на каждом сообщении только мешала бы читать */
@media (hover: none) {
    .support-msg__reply { display: none; }
}

/* Меню по правому клику — как в мессенджерах. Живёт в body, а не внутри
   панели: у панели overflow: hidden, и меню у нижнего сообщения обрезалось
   бы её краем. Этаж выше панели (55) и кружка (50) */
.support-menu {
    position: fixed; z-index: 60; min-width: 178px; padding: 6px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(18, 25, 48, 0.96), rgba(11, 15, 30, 0.98));
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), var(--glass-inner);
    display: flex; flex-direction: column; gap: 2px;
}
.support-menu[hidden] { display: none; }
.support-menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border: 0; border-radius: 9px;
    background: transparent; color: var(--text);
    font-family: var(--font-body); font-size: 14px; text-align: left;
    cursor: pointer; white-space: nowrap;
}
.support-menu__item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-faint); }
.support-menu__item:hover, .support-menu__item:focus-visible {
    background: rgba(255, 255, 255, 0.09); outline: none;
}
.support-menu__item:hover svg { color: var(--text-dim); }

/* Свайп влево по пузырю — ответ, как в мессенджерах.
   pan-y отдаёт браузеру только вертикаль: лента прокручивается пальцем как
   обычно, а горизонтальное движение достаётся нам и не воюет с прокруткой.
   Стрелка проявляется по мере движения (--swipe ставит скрипт) — иначе
   непонятно, что вообще произойдёт, если дотянуть. */
.support-msg { touch-action: pan-y; }
/* Стрелка только в виджете: свайп живёт в его скрипте, а на странице
   /support и в админском инбоксе она была бы мёртвой картинкой, которая
   к тому же вылезает за край и добавляет полосу прокрутки */
.support-panel__list .support-msg::after {
    content: "↩";
    position: absolute; top: 50%; right: -34px; margin-top: -13px;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(12, 18, 38, 0.72);
    box-shadow: inset 0 0 0 1px rgba(150, 190, 255, 0.22);
    color: var(--text-dim); font-size: 14px; line-height: 1;
    opacity: var(--swipe, 0);
    pointer-events: none;
}
/* Пружинка возврата вешается только на время отпускания: постоянный
   transform-переход тормозил бы пузырь за пальцем */
.support-msg--springback { transition: transform 0.24s cubic-bezier(0.22, 1.12, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
    .support-msg--springback { transition: none; }
}

/* Версия БЕЗ скрипта (страница /support и админский инбокс): там цитату
   выбирают обычной ссылкой, и она обязана быть видна всегда. Круглая иконка по
   наведению для неё не годится дважды: наведения на телефоне не бывает вовсе
   (ссылка пропала бы вместе со всем цитированием без JS), а слово «Ответить» в
   кружок 26×26 не помещается и вылезало бы за край ленты. Поэтому здесь
   обычная текстовая ссылка в потоке пузыря. Правило идёт ПОСЛЕ обоих
   @media выше — при равной силе селектора побеждает последнее */
.support-msg__reply--static {
    position: static; display: inline-block; width: auto; height: auto;
    margin-top: 4px; padding: 2px 9px 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: inset 0 0 0 1px rgba(150, 190, 255, 0.18);
    color: var(--text-faint); font-size: 12px; line-height: 1.5; text-decoration: none;
    opacity: 1; pointer-events: auto;
}
@media (hover: hover) {
    .support-msg__reply--static:hover {
        background: rgba(255, 255, 255, 0.13); color: var(--text); transform: none;
    }
}

/* Плашка «отвечаете на…» над полем ввода: то же тёмное углубление в стекле,
   что и у самого поля, плюс полоска цитаты слева — связь с пузырём читается
   без подписи */
.support-reply-bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: var(--s2);
    padding: 6px 8px 7px 10px;
    border-left: 2px solid var(--blue); border-radius: 4px 12px 12px 4px;
    background: rgba(8, 13, 30, 0.55);
    backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* В виджете форма — flex-строка (поле + кнопка отправки), и плашка обязана
   занять её целиком и встать первой. На страницах /support и /admin/support
   форма другая (.buy-form, колонка), и растягивать плашку там нечем и незачем:
   flex-basis 100 % по главной оси колонки — это уже высота, а не ширина */
.support-panel__form .support-reply-bar { order: -1; flex: 1 0 100%; }
/* Скрытая плашка не должна занимать строку формы: display: grid пересилил бы
   атрибут hidden, и над полем висела бы пустая полоса */
.support-reply-bar[hidden] { display: none; }
.support-reply-bar__author { grid-column: 1; font-size: 12px; font-weight: 700; color: var(--blue); }
.support-reply-bar__text {
    grid-column: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; color: var(--text-faint);
}
.support-reply-bar__cancel {
    grid-column: 2; grid-row: 1 / span 2;
    width: 26px; height: 26px; padding: 0; flex-shrink: 0;
    display: grid; place-items: center; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.08); color: var(--text-faint); cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.support-reply-bar__cancel svg { width: 13px; height: 13px; }
/* Без скрипта отмена — это ссылка со словом «Отменить», а не крестик-иконка:
   иконку там нечем нарисовать без JS, а слово в кружок 26×26 не влезает и
   вылезало бы поверх текста цитаты */
.support-reply-bar__cancel--static {
    width: auto; height: auto; padding: 3px 10px 4px; border-radius: 999px;
    font-size: 12px; line-height: 1.5; text-decoration: none; white-space: nowrap;
}
@media (hover: hover) {
    .support-reply-bar__cancel:hover { background: rgba(255, 255, 255, 0.16); color: var(--text); }
}

/* Кому движение мешает: вспышку заменяем ровной рамкой — она гаснет сама,
   когда скрипт снимет класс, и никуда не мигает */
@media (prefers-reduced-motion: reduce) {
    .support-msg.is-flash {
        animation: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 2px var(--border-bright);
    }
    .support-msg__quote, .support-msg__reply, .support-reply-bar__cancel { transition: none; }
}

/* ============ Инбокс поддержки в админке сайта ============ */
/* Слева список диалогов, справа переписка — как в Telegram. На узком экране
   колонки складываются в одну: список сверху, открытый диалог под ним */
.support-inbox {
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--s3); align-items: start;
}
.support-inbox__list {
    display: flex; flex-direction: column; gap: var(--s1);
    max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s2);
}
.support-inbox__item {
    display: flex; flex-direction: column; gap: 3px;
    padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none;
    transition: background 0.2s ease;
}
@media (hover: hover) {
    .support-inbox__item:hover { background: rgba(255, 255, 255, 0.07); }
}
.support-inbox__item.is-active {
    background: linear-gradient(150deg, rgba(92, 200, 255, 0.2), rgba(155, 107, 255, 0.12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* Строка пункта списка — две части: слева текст, справа время или счётчик.
   Обрезаем многоточием только левую половину: обрезай мы строку целиком,
   значок непрочитанного уезжал бы за край, и админ не видел бы, где ждут
   ответа — то есть терялся бы главный смысл списка */
.support-inbox__meta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    color: var(--text-faint); font-size: 12.5px;
}
.support-inbox__meta > :first-child {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.support-inbox__meta > :last-child { flex: none; }
.support-inbox__badge {
    align-self: flex-start; min-width: 20px; height: 20px; padding: 0 6px;
    display: grid; place-items: center; border-radius: 999px;
    background: linear-gradient(150deg, #ff7a6e, #e03050); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 1;
}
.support-inbox__thread {
    display: flex; flex-direction: column; gap: var(--s2);
    max-height: 62dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s4);
}
.support-inbox__empty { padding: var(--s5) var(--s4); color: var(--text-faint); text-align: center; }
/* На широком экране обе колонки видны сразу, и возвращаться к списку не надо */
.support-inbox__back { display: none; }
@media (max-width: 860px) {
    .support-inbox { grid-template-columns: minmax(0, 1fr); }
    .support-inbox__list { max-height: 40dvh; }
    /* Одна колонка — показываем что-то одно: пока диалог не выбран, это
       список, после выбора — переписка. Иначе к полю ответа приходилось бы
       пролистывать весь список, а он длинный */
    .support-inbox.is-open .support-inbox__list { display: none; }
    .support-inbox:not(.is-open) .support-inbox__thread { display: none; }
    .support-inbox__back { display: inline-flex; }
}

/* ======================= Вход по коду и двухфакторка ======================= */

/* Поле для кода: цифры вводят и сверяют с письмом посимвольно, поэтому
   моноширинный шрифт и разрядка — так «0» не путается с «O», а взгляд
   не сбивается на середине */
.code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 24px;
    letter-spacing: 0.34em;
    text-align: center;
    /* Разрядка сдвигает текст влево на один пробел — компенсируем отступом,
       иначе центр «плывёт» */
    padding-left: calc(16px + 0.34em);
    min-height: 56px;
}

/* QR не растягиваем на всю ширину панели: на большом экране гигантский
   квадрат выглядит нелепо, а камера телефона берёт его и мелким */
.totp-qr {
    width: min(220px, 60vw);
    margin: 14px auto;
    padding: 12px;
    background: #ffffff;
    border-radius: var(--radius-sm);
}
/* Модули QR рисуются заливкой path — на тёмной теме без этого они белые
   на белом, то есть кода не видно вовсе */
.totp-qr svg { display: block; width: 100%; height: auto; }
.totp-qr svg path { fill: #03050e; }

.totp-secret {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(8, 13, 30, 0.6);
    border: 1px solid rgba(150, 190, 255, 0.22);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    /* Ключ длинный: на узком экране он обязан переноситься, а не уезжать
       за край панели вместе с горизонтальной полосой прокрутки */
    word-break: break-all;
}

/* Резервные коды: сетка, потому что их переписывают глазами построчно */
.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.recovery-codes__item {
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(8, 13, 30, 0.6);
    border: 1px solid rgba(150, 190, 255, 0.22);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-align: center;
    /* Выделение по двойному клику берёт код целиком, без соседних */
    user-select: all;
}

/* Нумерованные шаги настройки */
.steps { margin: 0; padding-left: 22px; display: grid; gap: 16px; }
.steps li { color: var(--text-dim); font-size: 15px; line-height: 1.55; }
.steps li::marker { color: var(--text); font-weight: 700; }

/* Необратимое действие: цветом отделяем от обычных кнопок, чтобы «выключить
   двухфакторку» не нажималось на автомате рядом с «сохранить» */
.btn--danger {
    background: linear-gradient(150deg, rgba(255, 90, 90, 0.9), rgba(200, 40, 60, 0.9));
    color: #fff;
}

/* ======================= Кнопка в строке заказа ======================= */

/* Раньше это была текстовая ссылка «Открыть»: в плотной таблице она терялась,
   хотя действие там ключевое — ради него страницу и открывают. Теперь это
   стеклянная капсула того же языка, что кружки «плюс» и «минус» у суммы
   пополнения: тот же блюр, та же кромка, те же тени в покое и при наведении
   (число теней одинаковое, иначе свечение включалось бы рывком). */
.order-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34), 0 0 0 rgba(92, 200, 255, 0),
                inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}
/* Кромка стекла отдельным слоем: рамкой её не сделать — нужен градиент по
   периметру, а он рисуется маской поверх псевдоэлемента */
.order-action::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
/* Зелёный оттенок ровно как у «плюса»: цвет тут несёт смысл — заказ ждёт,
   пока его заберут. У выданного заказа кнопка нейтральная: смотреть можно
   спокойно, торопить незачем */
.order-action--get {
    background: linear-gradient(150deg, rgba(52, 211, 153, 0.22) 0%, rgba(52, 211, 153, 0.07) 55%, rgba(120, 170, 255, 0.05) 100%);
    color: #8ef0c0;
}
@media (hover: hover) {
    .order-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4), 0 0 22px rgba(92, 200, 255, 0.28),
                    inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(255, 255, 255, 0.09);
    }
    .order-action--get:hover {
        color: #b6ffdc;
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4), 0 0 22px rgba(52, 211, 153, 0.34),
                    inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(255, 255, 255, 0.09);
    }
}
.order-action:active { transform: scale(0.96); }

/* ======================= Состав заказа по группам ======================= */

/* Группа — это позиции одной игры на один аккаунт. Выдача делается по
   аккаунту целиком, поэтому и на экране они одна карточка: одна почта,
   одно действие. Раньше каждая единица товара была отдельной карточкой со
   своей копией почты, и заказ из трёх штук выглядел как три заказа. */
.order-group {
    position: relative;
    margin-top: var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    text-align: left;
}
.order-group + .order-group { margin-top: var(--s3); }

/* Строка товара. Сетка, а не flex: колонки количества и цены обязаны
   выстроиться друг под другом у всех строк, иначе список выглядит рваным */
.order-group__line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}
/* Разделитель между позициями — тот же приём, что и в таблице заказов */
.order-group__line + .order-group__line { border-top: 1px solid rgba(150, 190, 255, 0.14); }

.order-group__thumb { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.order-group__media {
    width: 44px; height: 44px; border-radius: 12px; object-fit: cover; display: block;
}
.order-group__name { display: flex; flex-direction: column; min-width: 0; }
.order-group__title {
    font-weight: 700; font-size: 15px; color: var(--text);
    overflow-wrap: anywhere;
}
.order-group__game { color: var(--text-faint); font-size: 12.5px; }
.order-group__count { color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.order-group__price { font-size: 15px; white-space: nowrap; }

/* Аккаунт пишем ОДИН раз на группу: он общий для всех её позиций */
.order-group__account {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(150, 190, 255, 0.14);
}
.order-group__account-label { color: var(--text-faint); font-size: 12.5px; }
.order-group__account-value {
    font-weight: 700; font-size: 14px; color: var(--text); overflow-wrap: anywhere;
}
.order-group__foot { margin-top: 12px; }

@media (max-width: 560px) {
    /* На узком экране цена уезжает под название: четыре колонки в 320px
       не помещаются, и название сжималось до одного слова в строку */
    .order-group__line { grid-template-columns: auto minmax(0, 1fr) auto; }
    .order-group__price { grid-column: 2 / -1; }
}


/* ============ Поля ввода на телефоне: без самовольного увеличения ============
   Safari на iPhone приближает ВСЮ страницу, когда человек ставит курсор в поле
   с кеглем меньше 16px, и обратно потом не отъезжает — страница так и остаётся
   увеличенной даже после закрытия окна. Именно поэтому сайт «разъезжался» при
   появлении клавиатуры.

   Запрещать масштабирование через maximum-scale в meta viewport нельзя: это
   отнимает у людей возможность приблизить страницу пальцами, а слабовидящим
   она нужна. Поэтому просто держим кегль полей не ниже порога — и у браузера
   не остаётся повода что-либо приближать.

   Блок стоит В КОНЦЕ файла намеренно: вес у этих селекторов такой же, как у
   исходных правил, и при равном весе побеждает тот, что ниже. Стой он выше —
   поле поддержки (правило около строки 2330) осталось бы с прежними 15px.

   Только для сенсорных экранов: на настольном браузере кегли прежние. */
@media (pointer: coarse) {
    .search-box__input,       /* было 14px, поиск в шапке — на каждой странице */
    .buy-form__input,         /* было 15px, самый ходовой класс полей */
    .buy-form__area,          /* textarea, получала те же 15px */
    select.buy-form__input,   /* нативный выпадающий список */
    .support-panel__input {   /* поле переписки с поддержкой */
        font-size: 16px;
    }
    /* Поле суммы и поле кода изначально крупнее порога; повторяем их здесь,
       иначе строка выше придавила бы их до 16px */
    .topup__input { font-size: 17px; }
    .code-input { font-size: 24px; }
    /* Подстраховка на будущее: поле без своего класса получит от браузера
       около 13px и снова утащит страницу в увеличение. Селектор по имени тега
       слабее любого классового, поэтому заданные классами кегли он не трогает */
    input, textarea, select { font-size: 16px; }
}