/* =========================================================================
   SH DONAT TJ — Premium Mini App (v2)
   Фитех-эстетика: obsidian фон + iridescent gold, glass surfaces,
   spring motion. Все имена классов совпадают со старой версией, чтобы
   JS (app.js) работал без изменений.
   ======================================================================== */

:root {
    /* ---------- BRAND: единственный акцент — тёплый оранжевый. ---------- */
    --brand:            #FFA726;
    --brand-hi:         #FFB74D;
    --brand-lo:         #FF8A00;
    --brand-deep:       #E67300;
    --brand-soft:       rgba(255, 167, 38, 0.12);
    --brand-softer:     rgba(255, 167, 38, 0.06);
    --brand-line:       rgba(255, 167, 38, 0.24);
    /* Glow используется ТОЛЬКО на балансе (главный элемент главной)
       и на primary CTA-кнопке. Больше нигде — чтобы экраны различались. */
    --brand-glow:       0 10px 40px rgba(255, 138, 0, 0.32),
                        0 2px 12px rgba(255, 167, 38, 0.22),
                        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    --brand-glow-soft:  0 0 0 1px rgba(255, 167, 38, 0.18),
                        0 6px 20px rgba(255, 138, 0, 0.14);

    /* ---------- INK: строгая тёмно-синяя палитра ---------- */
    --bg:               #0B0E14;
    --bg-veil:          #060810;
    --surface-2:        #10151F;
    --surface:          #151A24;
    --surface-hi:       #1E2431;
    --surface-hover:    #262D3D;

    /* Линии-разделители */
    --line:             rgba(255, 255, 255, 0.06);
    --line-2:           rgba(255, 255, 255, 0.04);
    --line-strong:      rgba(255, 255, 255, 0.10);

    /* ---------- TEXT: 4 уровня, не больше ---------- */
    --fg:               #FFFFFF;
    --fg-2:             #C7CBD4;
    --fg-3:             #8A8F9C;
    --fg-muted:         #5C6172;
    --fg-dim:           #3E4358;

    /* ---------- SEMANTIC ---------- */
    --success:          #22C55E;
    --success-soft:     rgba(34, 197, 94, 0.14);
    --success-line:     rgba(34, 197, 94, 0.28);
    --warning:          #F5B740;
    --warning-soft:     rgba(245, 183, 64, 0.14);
    --warning-line:     rgba(245, 183, 64, 0.28);
    --error:            #EF4444;
    --error-soft:       rgba(239, 68, 68, 0.14);
    --error-line:       rgba(239, 68, 68, 0.28);
    --info:             #3B82F6;
    --info-soft:        rgba(59, 130, 246, 0.14);
    --info-line:        rgba(59, 130, 246, 0.28);

    /* ---------- RADIUS: банковский ритм 14–16px ----------
       Единый радиус для карточек (14px), меньший — для чипов и small-элементов.
       Не мешаем разные значения по компонентам — визуальный ритм требует
       консистентности. */
    --r-sm:  10px;   /* input, chip, small button */
    --r:     14px;   /* ВСЕ карточки: баланс, категории, options, orders */
    --r-lg:  14px;   /* для консистентности — тот же радиус */
    --r-xl:  16px;   /* только для крупных hero-элементов (wallet-card, sheet) */

    /* ---------- SHADOWS: мягкие, банковские ---------- */
    /* Убрали резкие 0.4–0.48 opacity, оставили тонкий подъём.
       Тени работают на плоском тёмном фоне уже при 0.18–0.28. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
    --shadow:    0 6px 18px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.34);
    --inset-hi:  inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* ---------- SPACING (4px base) ---------- */
    --gap-xs: 6px;
    --gap-sm: 10px;
    --gap:    14px;
    --gap-lg: 20px;
    --gap-xl: 28px;

    /* ---------- TYPE SCALE: строго 5 размеров ----------
       title     — заголовок экрана (topbar)                      20 / 600
       huge      — гигантские цифры (баланс)                       40 / 700 / tnum
       body      — обычный текст                                   15 / 400
       button    — CTA                                             15 / 600
       label     — капс-лейблы (БАЛАНСИ ШУМО, КАТЕГОРИЯҲО)         12 / 500 / gray */
    --fs-title:  20px;
    --fw-title:  600;
    --fs-huge:   40px;
    --fw-huge:   700;
    --fs-body:   15px;
    --fw-body:   400;
    --fs-button: 15px;
    --fw-button: 600;
    --fs-label:  12px;
    --fw-label:  500;
    --ls-label:  0.06em;

    /* ---------- FONT ---------- */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;

    /* Safe area */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Motion */
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth:  cubic-bezier(0.32, 0.72, 0, 1);
    --ease-swift:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   RESET
   ================================================================ */

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

html, body {
    margin: 0;
    padding: 0;
    color: var(--fg);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.45;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
}

body {
    /* Единый акцентный оттенок — мягкое тёплое пятно вверху, потом плоский тёмный.
       Никаких синих/фиолетовых пятен: один акцент = одна визуальная нить. */
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 460px at 20% -8%, rgba(255, 138, 0, 0.06), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-veil) 100%);
    background-attachment: fixed;
}

/* Film-grain отключён — тоже был источником визуального шума */
body::before { content: none; }

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
button:disabled { cursor: not-allowed; }

input, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hi); }

img { display: block; max-width: 100%; }

.dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    background: var(--fg-dim);
    border-radius: 50%;
    margin: 0 7px;
    vertical-align: middle;
}

/* Иконки Lucide — единый стиль: outline, stroke-width 2 везде.
   Никаких индивидуальных 2.2/2.4/2.6 в компонентах — иначе иконки
   выглядят «разного веса» в рамках одного экрана. */
[data-lucide], svg.lucide {
    width: 20px;
    height: 20px;
    stroke-width: 2 !important;
    flex-shrink: 0;
}

/* ================================================================
   APP ROOT
   ================================================================ */

.app {
    max-width: 560px;
    margin: 0 auto;
    min-height: 100vh;
    padding-top: var(--safe-top);
    /* Место под floating tabbar (74px) + системный «@bot» бейдж Telegram
       (≈18px) + запас 8px. Итого 100px. + safe-area для iPhone-хоум-бара. */
    padding-bottom: calc(100px + var(--safe-bottom));
    position: relative;
    z-index: 1;
}

.screen {
    display: none;
    animation: screenIn 340ms var(--ease-smooth);
}
.screen--active { display: block; }

@keyframes screenIn {
    from { opacity: 0; transform: translateY(8px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- SECTION WRAPPER ---------- */

.section {
    padding: 22px 18px 0;
}
.section:last-child { padding-bottom: 24px; }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0 4px;
}
.section__title {
    margin: 0;
    font-size: var(--fs-label);
    font-weight: var(--fw-label);
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}
.section__hint {
    font-size: 12px;
    color: var(--fg-muted);
    letter-spacing: -0.005em;
}

/* ================================================================
   HERO — верхний блок главной с большим wallet-card
   ================================================================ */

.hero {
    position: relative;
    padding: 20px 18px 8px;
    isolation: isolate;
}

.hero__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.hero__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 0;
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}
.hero__logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--brand-line);
    background: var(--surface-hi);
    box-shadow: var(--brand-glow-soft);
}
.hero__title { flex: 1; min-width: 0; }
.hero__name {
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--fg);
    line-height: 1.15;
}
.hero__tag {
    font-size: 12px;
    font-weight: 400;
    color: var(--fg-3);
    margin-top: 2px;
    letter-spacing: -0.005em;
}

.hero__notif {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--fg-2);
    transition: all 180ms var(--ease-swift);
    flex-shrink: 0;
    position: relative;
}
.hero__notif:active {
    background: var(--surface-hi);
    transform: scale(0.94);
    color: var(--fg);
}

/* ---------- WALLET CARD — герой главной, ЕДИНСТВЕННЫЙ элемент с glow ---------- */

/* Единственная карточка приложения с мягким hero-градиентом —
   всё остальное (стата, orders, ref-cta) идёт плоскими поверхностями.
   Так баланс сразу считывается как «главная цифра экрана». */
.wallet-card {
    position: relative;
    padding: 20px;
    border-radius: var(--r-xl);
    background:
        radial-gradient(420px 200px at 15% 0%, rgba(255, 138, 0, 0.08), transparent 68%),
        linear-gradient(180deg, #171C28 0%, #10141C 100%);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-sm), var(--inset-hi);
    overflow: hidden;
    isolation: isolate;
}
/* Едва заметное свечение справа-сверху — вместо старого «пятна» с ватермаркой.
   Держим один аккуратный акцент, не заглушая цифру баланса. */
.wallet-card::before {
    content: '';
    position: absolute;
    right: -40px;
    top: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 167, 38, 0.10), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.wallet-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.wallet-card__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-label);
    font-weight: var(--fw-label);
    color: var(--fg-3);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    flex-shrink: 0;
}
.wallet-card__label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
    animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.5; transform: scale(0.7); }
}
.wallet-card__hi {
    font-size: 12px;
    color: var(--fg-3);
    letter-spacing: -0.005em;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.wallet-card__amount {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 6px 0 18px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.wallet-card__amount__value {
    font-size: var(--fs-huge);
    font-weight: var(--fw-huge);
    line-height: 1;
    color: #FFFFFF;
    /* tabular-numsalready в parent, но повторяем для гарантии */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
.wallet-card__amount__unit {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-3);
    letter-spacing: -0.01em;
    position: relative;
    top: -2px;
}

.wallet-card__foot {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wallet-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-2);
    letter-spacing: -0.005em;
}
.wallet-chip__icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-hi);
    color: var(--brand);
}
.wallet-chip__icon [data-lucide], .wallet-chip__icon svg {
    width: 11px; height: 11px;
}
.wallet-chip strong {
    color: var(--fg);
    font-weight: 700;
    margin-right: 2px;
    font-variant-numeric: tabular-nums;
}

/* Trust chips — ниже wallet */

.trust-chips {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 4px;
}
.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg-2);
    letter-spacing: -0.005em;
}
.trust-chip [data-lucide], .trust-chip svg {
    width: 13px;
    height: 13px;
    color: var(--brand);
}

/* ---------- Старый .hero__greeting/.hero__user (совместимость) ---------- */

.hero__greeting { display: none; }
.hero__user     { /* всё ещё используется через data-bind */ }

/* ================================================================
   STAT — маленькие показатели (профиль, referral)
   ================================================================ */

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color 200ms var(--ease-swift), transform 100ms ease;
    box-shadow: var(--shadow-xs);
}
.stat:active {
    transform: scale(0.99);
    border-color: var(--line-strong);
}
/* Иконка в мягком круге — тот же приём, что у .order-row__icon.
   Радиус 50% (круг), а не 12px (rounded rect) — банковский line-стиль. */
.stat__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-softer);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--brand-line);
}
.stat__icon [data-lucide], .stat__icon svg { width: 17px; height: 17px; }
.stat__body { min-width: 0; flex: 1; }
.stat__label {
    font-size: var(--fs-label);
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    font-weight: var(--fw-label);
    margin-bottom: 4px;
}
.stat__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat__unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-3);
    margin-left: 3px;
}

/* ================================================================
   GAME HERO CARDS — большие карточки FF / PUBG
   ================================================================ */

.game-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.game-card {
    position: relative;
    display: block;
    width: 100%;
    /* без aspect-ratio — высота задаётся самим баннером (без обрезки) */
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
    line-height: 0;               /* убирает лишний зазор под картинкой */
    /* Светлая рамка + мягкая тень — баннер читается как отдельная кнопка */
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: transform 200ms var(--ease-spring), box-shadow 200ms ease, border-color 200ms ease;
    isolation: isolate;
}
.game-card:active {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}
/* Тонкая светлая обводка поверх картинки — чёткая граница карточки */
.game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    pointer-events: none;
    z-index: 4;
}
.game-card:active { transform: scale(0.985); }

.game-card__photo {
    display: block;
    width: 100%;
    height: auto;      /* натуральное соотношение баннера — без обрезки */
    z-index: 1;
}

.game-card__scrim {
    /* Сильное затемнение слева и снизу — текст всегда читается поверх
       любой (даже пёстрой) обложки, включая обложки с собственным логотипом. */
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg,
            rgba(8, 10, 15, 0.94) 0%,
            rgba(8, 10, 15, 0.72) 40%,
            rgba(8, 10, 15, 0.20) 74%,
            rgba(8, 10, 15, 0.00) 100%),
        linear-gradient(0deg,
            rgba(8, 10, 15, 0.88) 0%,
            rgba(8, 10, 15, 0.25) 45%,
            rgba(8, 10, 15, 0.00) 72%);
}

.game-card__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #FFFFFF;
}

.game-card__brand {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8);
}

.game-card__title {
    margin-top: 5px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.85);
}

.game-card__cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 14px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.005em;
    align-self: flex-start;
    color: #FFF;
}
.game-card__cta [data-lucide], .game-card__cta svg {
    width: 16px; height: 16px;
    background: var(--brand);
    color: #1A0E00;
    border-radius: 50%;
    padding: 3px;
    box-sizing: content-box;
}

/* ================================================================
   DRAWER (правая шторка)
   ================================================================ */

.drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
}
.drawer[hidden] { display: none; }

.drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 6, 11, 0.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 220ms ease;
}
.drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 84vw);
    background: var(--surface-2);
    border-left: 1px solid var(--line);
    box-shadow: -28px 0 72px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 320ms var(--ease-smooth);
    display: flex;
    flex-direction: column;
    padding-top: var(--safe-top);
}
.drawer--open .drawer__backdrop { opacity: 1; }
.drawer--open .drawer__panel { transform: translateX(0); }

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--line);
}
.drawer__title {
    font-size: 15px;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.01em;
}
.drawer__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--fg-2);
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 180ms var(--ease-swift);
}
.drawer__close:active {
    background: var(--surface-hi);
    color: var(--fg);
    transform: scale(0.94);
}
.drawer__close [data-lucide], .drawer__close svg { width: 16px; height: 16px; }

.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    width: 100%;
    text-align: left;
    box-shadow: var(--inset-hi);
}
.drawer-user__avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--brand-line);
    flex-shrink: 0;
    background: var(--surface-hi);
    box-shadow: var(--brand-glow-soft);
}
.drawer-user__body { flex: 1; min-width: 0; }
.drawer-user__name {
    font-size: 14px;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.drawer-user__username {
    margin-top: 2px;
    font-size: 12px;
    color: var(--brand);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.drawer-user__tag {
    margin-top: 3px;
    font-size: 11px;
    color: var(--fg-3);
}

.row-list--menu {
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
}
.row-list--menu .row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px 14px;
    box-shadow: var(--inset-hi);
}
.row-list--menu .row:last-child { border-bottom: 1px solid var(--line); }

.row.row--active {
    background:
        radial-gradient(160px 80px at 0% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
        linear-gradient(135deg, var(--brand-hi) 0%, var(--brand-lo) 100%);
    border-color: var(--brand);
}
.row.row--active .row__icon {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.32);
    color: #1A0E00;
}
.row.row--active .row__title { color: #1A0E00; }
.row.row--active .row__sub { color: rgba(26, 14, 0, 0.72); }
.row.row--active .row__chevron { color: rgba(26, 14, 0, 0.65); }

.drawer__foot {
    padding: 14px 18px calc(14px + var(--safe-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}
.drawer__balance {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background:
        linear-gradient(155deg, #1D2542 0%, #0F1428 100%);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--inset-hi);
    position: relative;
    overflow: hidden;
}
.drawer__balance::before {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(253, 181, 21, 0.18), transparent 65%);
    pointer-events: none;
}
.drawer__balance__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-line);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.drawer__balance__icon [data-lucide], .drawer__balance__icon svg {
    width: 16px; height: 16px;
}
.drawer__balance__label {
    flex: 1;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    position: relative;
    z-index: 1;
}
.drawer__balance__value {
    font-size: 16px;
    font-weight: 800;
    color: #FFF;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}
.drawer__balance__unit {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 3px;
}

/* ================================================================
   ROW LIST
   ================================================================ */

.row-list {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--inset-hi);
}
.row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    transition: background 120ms ease;
}
.row:last-child { border-bottom: none; }
.row:active { background: var(--surface-hover); }

.row__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    flex-shrink: 0;
    border: 1px solid var(--brand-line);
}
.row__icon [data-lucide], .row__icon svg { width: 18px; height: 18px; }

.row__body { flex: 1; min-width: 0; }
.row__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.row__sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--fg-3);
}
.row__chevron {
    color: var(--fg-dim);
    flex-shrink: 0;
    transition: transform 180ms var(--ease-swift);
}
.row:active .row__chevron { transform: translateX(2px); }

/* ================================================================
   TOPBAR
   ================================================================ */

.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px;
    background: rgba(8, 11, 20, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar__back,
.topbar__spacer {
    /* 44×44 — минимум по Apple HIG для tap-target.
       Визуальная иконка внутри остаётся 20px (via [data-lucide] rule). */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--fg-2);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: all 180ms var(--ease-swift);
    flex-shrink: 0;
}
.topbar__back:active {
    background: var(--surface-hi);
    color: var(--fg);
    transform: scale(0.94);
}
.topbar__spacer { visibility: hidden; }
.topbar__title {
    flex: 1;
    text-align: center;
    font-size: var(--fs-title);
    font-weight: var(--fw-title);
    color: var(--fg);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================================================================
   PRODUCT CARDS
   ================================================================ */

/* Каталог — сетка 2 колонки. Карточка вертикальная: арт-область сверху,
   название и цена снизу, у ваучеров — кнопка «i» с описанием. */
.product-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.product-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 12px 14px;
    background:
        linear-gradient(180deg,
            var(--surface-hi, rgba(255, 255, 255, 0.05)),
            var(--surface, #12161f));
    border: 1px solid var(--line);
    border-radius: 20px;
    text-align: center;
    width: 100%;
    transition: transform 120ms ease, border-color 200ms ease, box-shadow 220ms ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), var(--inset-hi);
}
/* Тонкая верхняя блик-линия — премиальный акцент */
.product-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    pointer-events: none;
}
.product-card:active {
    transform: scale(0.97);
    border-color: var(--brand-line);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3),
                0 0 0 1px var(--brand-line);
}

/* Арт-область — «глянцевая» подложка с сиянием под картинкой товара */
.product-card__art {
    height: 116px;
    border-radius: 16px;
    background:
        radial-gradient(90% 70% at 50% 32%, rgba(56, 132, 255, 0.30), transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
}
/* Мягкое световое пятно за картинкой */
.product-card__art::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 132, 255, 0.22), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}
.product-card__art img,
.product-card__art__img {
    position: relative;
    z-index: 1;
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    transition: transform 200ms var(--ease-smooth, ease);
}
.product-card:active .product-card__art__img {
    transform: scale(0.93);
}
.product-card:active .product-card__art__img {
    transform: scale(0.94);
}
.product-card__art [data-lucide], .product-card__art svg {
    width: 48px;
    height: 48px;
    color: var(--brand);
    filter: drop-shadow(0 4px 12px rgba(56, 132, 255, 0.35));
}

/* Название (количество) — по центру, фикс. высота для ровной сетки */
.product-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 10px;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* Цена — яркая градиентная кнопка внизу карточки (акцент «купить») */
.product-card__price {
    margin-top: auto;
    font-size: 15px;
    font-weight: 800;
    color: #1a1206;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #ffc24a, #ff9500);
    border: none;
    border-radius: 12px;
    padding: 10px 8px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(255, 149, 0, 0.30);
}
.product-card__price__unit {
    font-size: 12px;
    font-weight: 700;
    color: #1a1206;
    opacity: 0.7;
    margin-left: 3px;
}

/* Кнопка «i» — открывает описание товара (у ваучеров) */
.product-card__info {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
    transition: transform 120ms ease, background 150ms ease;
}
.product-card__info [data-lucide], .product-card__info svg { width: 15px; height: 15px; }
.product-card__info:active { transform: scale(0.88); }

/* ---------- Модалка «Тавсифи маҳсулот» (описание товара) ---------- */
.desc-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: descFade 200ms ease;
}
.desc-modal[hidden] { display: none; }
.desc-modal__card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--surface-hi, #1a1f2b);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    animation: descPop 240ms var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1));
}
.desc-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.desc-modal__head__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.02em;
}
.desc-modal__close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--fg-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.desc-modal__close [data-lucide], .desc-modal__close svg { width: 18px; height: 18px; }
.desc-modal__body { display: flex; gap: 14px; margin-bottom: 20px; }
.desc-modal__art {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.desc-modal__art img { max-width: 78%; max-height: 78%; object-fit: contain; }
.desc-modal__art [data-lucide], .desc-modal__art svg { width: 30px; height: 30px; color: var(--brand); }
.desc-modal__text { flex: 1; min-width: 0; }
.desc-modal__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.desc-modal__desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg-2, #c4cbd8);
    white-space: pre-line;
}
.desc-modal__ok {
    width: 100%;
    padding: 15px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--fg);
    font-size: 15px;
    font-weight: 700;
    transition: transform 120ms ease, background 150ms ease;
}
.desc-modal__ok:active { transform: scale(0.99); background: var(--surface-hi); }
@keyframes descFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes descPop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================================
   ORDER SCREEN
   ================================================================ */

.order-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--inset-hi);
}
.order-summary__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--brand-line);
}
.order-summary__icon [data-lucide], .order-summary__icon svg {
    width: 22px;
    height: 22px;
}
.order-summary__body { flex: 1; min-width: 0; }
.order-summary__label {
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    font-weight: var(--fw-label);
    color: var(--fg-3);
    margin-bottom: 4px;
}
.order-summary__name {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.015em;
}
.order-summary__price {
    font-size: 22px;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: -0.025em;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.order-summary__unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-3);
    margin-left: 3px;
}

/* ---------- INPUT ---------- */

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    padding: 0 16px;
    transition: border-color 180ms var(--ease-swift),
                box-shadow 220ms ease,
                background 180ms ease;
    box-shadow: var(--inset-hi);
}
.input-wrap:focus-within {
    border-color: var(--brand);
    background: var(--surface-hi);
    box-shadow: 0 0 0 4px rgba(253, 181, 21, 0.12);
}
.input-wrap__icon {
    color: var(--fg-3);
    margin-right: 12px;
    width: 18px !important;
    height: 18px !important;
    transition: color 180ms var(--ease-swift);
}
.input-wrap:focus-within .input-wrap__icon { color: var(--brand); }

.input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.input::placeholder {
    color: var(--fg-muted);
    font-weight: 400;
}

.input-status {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    animation: fadeInDown 220ms var(--ease-smooth);
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.input-status--ok {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-line);
}
.input-status--warn {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--warning-line);
}
.input-status--err {
    background: var(--error-soft);
    color: var(--error);
    border-color: var(--error-line);
}
/* Нейтральное состояние «идёт проверка ID» — приглушённый фон + крутящийся
   спиннер (loader-2). Цвета берём из surface/line, чтобы не мигать зелёным
   до того, как пришёл реальный результат. */
.input-status--checking {
    background: var(--surface, rgba(255, 255, 255, 0.04));
    color: var(--fg-muted, #98a1b3);
    border-color: var(--line, rgba(255, 255, 255, 0.08));
}
.input-status--checking [data-lucide="loader-2"],
.input-status--checking svg {
    animation: uidSpin 0.8s linear infinite;
}
@keyframes uidSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.input-status [data-lucide], .input-status svg { width: 16px; height: 16px; }

/* ---------- OPTION (radio) ---------- */

.option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    transition: all 180ms var(--ease-swift);
    position: relative;
    overflow: hidden;
    box-shadow: var(--inset-hi);
}
.option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--brand-softer), transparent);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.option:has(input:checked) {
    border-color: var(--brand);
    background: var(--surface-hi);
    box-shadow: 0 0 0 3px rgba(253, 181, 21, 0.10), var(--inset-hi);
}
.option:has(input:checked)::before { opacity: 1; }

.option__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--surface-hi);
    color: var(--fg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 180ms var(--ease-swift);
    border: 1px solid var(--line);
    position: relative;
    z-index: 1;
}
.option:has(input:checked) .option__icon {
    background: linear-gradient(135deg, var(--brand-hi), var(--brand-lo));
    color: #1A0E00;
    border-color: var(--brand);
}
.option__icon [data-lucide], .option__icon svg { width: 20px; height: 20px; }

.option__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.option__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.option__sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--fg-3);
}
.option__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-hi);
    border: 1.5px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 180ms var(--ease-spring);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transform: scale(0.9);
}
.option:has(input:checked) .option__check {
    background: var(--brand);
    border-color: var(--brand);
    color: #1A0E00;
    transform: scale(1);
}
.option__check [data-lucide], .option__check svg { width: 14px; height: 14px; stroke-width: 3; }

/* ---------- CONSENT (checkbox) ---------- */

.consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 180ms ease;
}
.consent:active { background: var(--surface); }

.consent input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.consent__box {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all 180ms var(--ease-swift);
}
.consent:has(input:checked) .consent__box {
    background: var(--brand);
    border-color: var(--brand);
    color: #1A0E00;
    box-shadow: 0 4px 12px rgba(253, 181, 21, 0.30);
}
.consent__box [data-lucide], .consent__box svg { width: 14px; height: 14px; stroke-width: 3; }
.consent__text {
    font-size: 13px;
    color: var(--fg-2);
    line-height: 1.45;
}
.consent__text a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-color: var(--brand-line);
    text-underline-offset: 3px;
}

/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: var(--r-sm);
    font-size: var(--fs-button);
    font-weight: var(--fw-button);
    cursor: pointer;
    transition: transform 100ms ease, box-shadow 220ms ease, background 180ms ease;
    white-space: nowrap;
    letter-spacing: -0.005em;
}
.btn [data-lucide], .btn svg { width: 18px; height: 18px; }

.btn--lg {
    padding: 16px 24px;
    font-size: var(--fs-button);
    border-radius: var(--r);
    width: 100%;
    font-weight: var(--fw-button);
}

.btn--primary {
    background: linear-gradient(135deg, var(--brand-hi) 0%, var(--brand-lo) 100%);
    color: #1A0E00;
    box-shadow: var(--brand-glow);
    position: relative;
    overflow: hidden;
}
.btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
    pointer-events: none;
    border-radius: inherit;
}
/* Убран sweeping shimmer — постоянная анимация отвлекает */
.btn--primary::after { content: none; }
.btn--primary:active:not(:disabled) {
    transform: scale(0.985);
}
.btn--primary:disabled {
    background: var(--surface-hi);
    color: var(--fg-muted);
    box-shadow: none;
    text-shadow: none;
}
.btn--primary:disabled::before { display: none; }

.btn--secondary {
    background: var(--surface-hi);
    color: var(--fg);
    border: 1px solid var(--line-strong);
    box-shadow: var(--inset-hi);
}
.btn--secondary:active:not(:disabled) {
    transform: scale(0.98);
    background: var(--surface-hover);
}
.btn--secondary:disabled { color: var(--fg-muted); }

.btn--ghost {
    background: transparent;
    color: var(--fg);
    border: 1.5px solid var(--line-strong);
}
.btn--ghost:active {
    background: var(--surface);
    transform: scale(0.98);
}

/* ---------- CTA bar (sticky bottom) ---------- */

.cta-bar {
    /* CTA-бар прижат к нижней части экрана (над таббаром).
       Padding-top держим минимальным — большой отступ раньше был для
       fade-полосы под note-строкой, но note удалили, отступ не нужен. */
    padding: 12px 18px 12px;
    position: sticky;
    bottom: calc(90px + var(--safe-bottom));
    background: linear-gradient(180deg,
        transparent 0%,
        var(--bg-veil) 40%);
    z-index: 10;
    pointer-events: none;
}
.cta-bar > * { pointer-events: auto; }
.cta-bar__note {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--fg-3);
    letter-spacing: -0.005em;
}

/* ================================================================
   TABS
   ================================================================ */

/* Segmented control — банковский стиль: приглушённые табы, активный
   выделяется контрастным текстом и мягкой подложкой (без ярких заливок). */
.tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 14px;
}
.tab {
    flex: 1;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-3);
    border-radius: 9px;
    transition: color 200ms var(--ease-swift), background 200ms var(--ease-swift);
    text-align: center;
    letter-spacing: -0.005em;
}
.tab--active {
    background: var(--surface-hi);
    color: var(--fg);
    font-weight: 600;
}

/* ================================================================
   ORDERS LIST
   ================================================================ */

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-item {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: transform 100ms ease, border-color 200ms ease, background 180ms ease;
    box-shadow: var(--inset-hi);
}
.order-item:active {
    transform: scale(0.99);
    border-color: var(--brand-line);
    background: var(--surface-hi);
}

.order-item__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}
.order-item__id {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}
.order-item__title {
    font-size: 15px;
    font-weight: 800;
    color: var(--fg);
    margin-top: 4px;
    letter-spacing: -0.02em;
}
.order-item__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--fg-3);
    margin-top: 4px;
}

.order-item__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line-strong);
}
.order-item__price {
    font-size: 16px;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.order-item__price__unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-3);
    margin-left: 3px;
}

/* ---------- BADGE ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border: 1px solid transparent;
}
.badge [data-lucide], .badge svg { width: 12px; height: 12px; stroke-width: 2.6; }

.badge--success {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-line);
}
.badge--warning {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--warning-line);
}
.badge--error {
    background: var(--error-soft);
    color: var(--error);
    border-color: var(--error-line);
}
.badge--info {
    background: var(--info-soft);
    color: var(--info);
    border-color: var(--info-line);
}
.badge--muted {
    background: var(--surface-hi);
    color: var(--fg-3);
    border-color: var(--line);
}

/* ---------- EMPTY STATE ---------- */

.empty {
    padding: 60px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.empty__icon {
    width: 72px;
    height: 72px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-3);
    margin-bottom: 6px;
    box-shadow: var(--inset-hi);
}
.empty__icon [data-lucide], .empty__icon svg { width: 32px; height: 32px; }
.empty__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.015em;
}
.empty__sub {
    font-size: 13px;
    color: var(--fg-3);
    margin-bottom: 8px;
}

/* ================================================================
   ORDER DETAIL
   ================================================================ */

/* Hero заказа — banking-style: номер заказа как крупный заголовок,
   ниже одной строкой цветная точка + короткий статус, ниже дата.
   Никаких больших pill-badge — они конфликтовали с точками в списке. */
.detail-hero {
    padding: 22px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-align: center;
    margin-bottom: 14px;
    box-shadow: var(--shadow-xs);
}
.detail-hero::before { content: none; }
.detail-hero__id {
    font-size: 20px;
    font-weight: 700;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.detail-hero__date {
    margin-top: 6px;
    font-size: 12px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
}

/* Компактная статус-строка на detail-hero и любых других экранах.
   Тот же tone-map, что у .order-row__status — консистентность цветов. */
.status-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}
.status-line .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-line--success { color: var(--success); }
.status-line--success .status-dot { background: var(--success); box-shadow: 0 0 8px rgba(34, 197, 94, 0.55); }

.status-line--warning { color: var(--warning); }
.status-line--warning .status-dot { background: var(--warning); box-shadow: 0 0 8px rgba(245, 183, 64, 0.55); }

.status-line--error { color: var(--error); }
.status-line--error .status-dot { background: var(--error); box-shadow: 0 0 8px rgba(239, 68, 68, 0.55); }

.status-line--info { color: var(--info); }
.status-line--info .status-dot { background: var(--info); box-shadow: 0 0 8px rgba(59, 130, 246, 0.55); }

.status-line--muted { color: var(--fg-3); }
.status-line--muted .status-dot { background: var(--fg-muted); }

.kv {
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--inset-hi);
}
.kv__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-2);
}
.kv__row:last-child { border-bottom: none; }
.kv__k {
    font-size: 12px;
    color: var(--fg-3);
    margin: 0;
    flex-shrink: 0;
    letter-spacing: 0.01em;
    font-weight: 500;
}
.kv__v {
    font-size: 14px;
    color: var(--fg);
    font-weight: 700;
    margin: 0;
    text-align: right;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.kv__v--strong {
    color: var(--brand);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ================================================================
   PROFILE — премиум membership-карта
   ================================================================ */

/* Старая .profile-card / .tier-card оставлены, но переопределены
   новыми компонентами .member-card / .tier-progress-card */

/* Premium profile card — горизонтальная композиция как у настоящих
   metal-cards (Revolut Metal, Alif Premium). Слева — аватар в тонком
   акцентном кольце, справа стеком имя/@username/ID. В верхнем правом
   углу — tier chip. Едва заметный диагональный «holographic» градиент
   даёт ощущение премиум-карты, но не спорит с балансом-героем.
   Внизу — тонкая полоска мета-статусов (verified/secure). */
.member-card {
    position: relative;
    padding: 20px;
    border-radius: var(--r-xl);
    background:
        /* Диагональный «holo» блик — очень тонкий, только в верхнем-правом */
        linear-gradient(135deg, rgba(255, 167, 38, 0.05) 0%, transparent 45%),
        linear-gradient(180deg, #171C28 0%, #10141C 100%);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-sm), var(--inset-hi);
    overflow: hidden;
    isolation: isolate;
}
/* Убираем все декоративные слои — от них уже отказались раньше. */
.member-card__pattern,
.member-card__avatar-glow { display: none; }
.member-card::before,
.member-card::after { content: none; }

/* Верхняя строка: маленький brand-mark слева, tier chip справа. */
.member-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
.member-card__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--fg-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-card__logo {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid var(--brand-line);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-hi);
}
.member-card__tier {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: -0.005em;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}
.member-card__tier [data-lucide],
.member-card__tier svg {
    width: 12px;
    height: 12px;
    color: var(--brand);
    flex-shrink: 0;
}

/* Центральная строка — аватар слева + имя/id справа. */
.member-card__avatar-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.member-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.06), transparent 55%),
        linear-gradient(135deg, rgba(255, 167, 38, 0.16) 0%, rgba(255, 138, 0, 0.08) 100%);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-line);
    flex-shrink: 0;
    position: relative;
    /* Тонкое двойное кольцо — иллюзия «оправы» без heavy glow. */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 3px rgba(255, 167, 38, 0.08);
}
.member-card__avatar::before { content: none; }
.member-card__avatar [data-lucide],
.member-card__avatar svg {
    width: 26px;
    height: 26px;
}

/* Инициалы в аватаре — 2 символа макс, крупный вес, tabular-nums
   на случай если инициалы вида «Ш1». */
.member-card__initials {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand);
    line-height: 1;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 8px rgba(255, 138, 0, 0.25);
}

.member-card__body {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.member-card__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.015em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-card__meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--fg-3);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-card__meta .dot {
    background: var(--fg-dim);
    margin: 0 6px;
}

/* Нижняя строка мета-статусов: тонкий разделитель + inline-статусы
   с точками. Никаких pill-badge — они бы конкурировали с tier chip. */
.member-card__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-2);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.member-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--fg-2);
    letter-spacing: -0.005em;
}
/* Скрываем старую lucide-иконку в chip — используем цветную точку через
   ::before, чтобы chip визуально соответствовал .status-line-стилю. */
.member-card__chip [data-lucide],
.member-card__chip svg {
    display: none;
}
.member-card__chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.55);
    flex-shrink: 0;
}

/* ---------- Tier Progress Card (заменяет старую .tier-card) ---------- */
/*
   Иерархия банковских progress-виджетов:
     — большой процент справа (hero-число этого блока)
     — компактный лейбл + название следующего тира слева
     — тонкий прогресс-бар под ними
     — приглушённый foot-текст с деталями «сколько осталось».
   Имя текущего тира не дублируем (оно уже в chip на member-card).
*/
.tier-progress-card {
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
}
.tier-progress-card::before { content: none; }
.tier-progress-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}
.tier-progress-card__current { min-width: 0; }
.tier-progress-card__current__label {
    font-size: 10px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 6px;
}
.tier-progress-card__current__value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.tier-progress-card__current__value [data-lucide],
.tier-progress-card__current__value svg {
    width: 16px;
    height: 16px;
    color: var(--brand);
}
.tier-progress-card__percent {
    font-size: 32px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.03em;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    flex-shrink: 0;
}
.tier-progress-card__percent__sign {
    font-size: 15px;
    font-weight: 500;
    margin-left: 3px;
    color: var(--fg-3);
    opacity: 1;
}
.tier-progress-card__foot {
    margin-top: 10px;
    font-size: 12px;
    color: var(--fg-3);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* ---------- Старая .profile-card (не используется, но оставлена
              на случай если где-то ещё встретится) ---------- */

.profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: linear-gradient(155deg, #1D2542 0%, #0F1428 100%);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    position: relative;
    overflow: hidden;
    box-shadow: var(--inset-hi);
}
.profile-card::before {
    content: '';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(253, 181, 21, 0.14), transparent 65%);
    pointer-events: none;
}
.profile-card__avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-hi), var(--brand-lo));
    color: #1A0E00;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.profile-card__avatar [data-lucide], .profile-card__avatar svg {
    width: 28px;
    height: 28px;
    stroke-width: 2.2;
    position: relative;
    z-index: 1;
}
.profile-card__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.profile-card__name {
    font-size: 18px;
    font-weight: 800;
    color: #FFF;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.profile-card__meta {
    margin-top: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.tier-card {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    position: relative;
    overflow: hidden;
    box-shadow: var(--inset-hi);
}
.tier-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(253, 181, 21, 0.10), transparent 65%);
    pointer-events: none;
}
.tier-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.tier-card__label {
    font-size: 11px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}
.tier-card__value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.02em;
}
.tier-card__value [data-lucide], .tier-card__value svg {
    width: 18px;
    height: 18px;
    color: var(--brand);
}
.tier-card__foot {
    margin-top: 12px;
    font-size: 12px;
    color: var(--fg-3);
    position: relative;
    z-index: 1;
}

.progress {
    height: 6px;
    background: var(--surface-hi);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-lo), var(--brand-hi));
    border-radius: 999px;
    transition: width 800ms var(--ease-smooth);
    box-shadow: 0 0 8px rgba(255, 167, 38, 0.35);
}
.progress__bar::after { content: none; }

/* ================================================================
   REFERRAL
   ================================================================ */

.ref-hero {
    padding: 30px 22px 26px;
    background:
        radial-gradient(500px 240px at 20% -10%, rgba(255, 138, 0, 0.16), transparent 62%),
        linear-gradient(180deg, #1B2130 0%, #12161F 100%);
    color: var(--fg);
    border-radius: var(--r);
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    box-shadow: var(--inset-hi);
}
.ref-hero::before { content: none; }
.ref-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand);
    margin-bottom: 14px;
}
.ref-hero__badge [data-lucide], .ref-hero__badge svg {
    width: 13px;
    height: 13px;
    color: var(--brand);
}

.ref-hero__title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--brand);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.ref-hero__sub {
    margin-top: 10px;
    font-size: 13px;
    color: var(--fg-3);
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.ref-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 16px;
    background: var(--surface);
    border: 1px dashed var(--brand-line);
    border-radius: var(--r);
    box-shadow: var(--inset-hi);
}
.ref-link__url {
    flex: 1;
    font-size: 13px;
    color: var(--fg);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}
.ref-link__copy {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms ease, background 180ms ease;
    border: 1px solid var(--brand-line);
}
.ref-link__copy:active {
    transform: scale(0.94);
    background: linear-gradient(135deg, var(--brand-hi), var(--brand-lo));
    color: #1A0E00;
}

.tier-list {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--inset-hi);
}
.tier-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid var(--line-2);
}
.tier-row:last-child { border-bottom: none; }

.tier-row__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--brand-line);
}
/* Hero и Legend больше не имеют cyan/purple вариантов — только один акцент. */
.tier-row__icon--hero,
.tier-row__icon--legend {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--brand-line);
}
.tier-row__icon [data-lucide], .tier-row__icon svg { width: 20px; height: 20px; }

.tier-row__body { flex: 1; min-width: 0; }
.tier-row__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.tier-row__sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--fg-3);
}
.tier-row__pct {
    font-size: 18px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

/* ================================================================
   SUPPORT HERO — premium centered hero
   Крупная иконка с двумя soft-rings, чёткая типографика, статус-pill
   и trust-статистика в 3 колонки. Дизайн вдохновлён support-страницами
   премиум-финтеха: доказать надёжность одним экраном.
   ================================================================ */

.support-hero {
    padding: 28px 20px 20px;
    text-align: center;
    background:
        radial-gradient(420px 200px at 50% 0%, rgba(255, 138, 0, 0.08), transparent 62%),
        linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm), var(--inset-hi);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.support-hero::before { content: none; }

/* Иконка — 72×72 с двумя расходящимися кольцами (breathing effect).
   Кольца сделаны через :before/:after у отдельных элементов, они не
   перетягивают внимание, но добавляют «живость» support-у. */
.support-hero__icon {
    position: relative;
    width: 72px;
    height: 72px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08), transparent 55%),
        linear-gradient(135deg, rgba(255, 167, 38, 0.22) 0%, rgba(255, 138, 0, 0.10) 100%);
    color: var(--brand);
    border: 1px solid var(--brand-line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(255, 138, 0, 0.12);
    z-index: 2;
}
.support-hero__icon [data-lucide],
.support-hero__icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 2 !important;
}

/* Два кольца, расходящихся из центра иконки. `pointer-events:none`,
   чтобы не мешать кликам по иконке (иконка сама не кликабельная,
   но rings всё равно absolute-позиционированы поверх).  */
.support-hero__ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 167, 38, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: supportRing 2.6s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
    will-change: transform, opacity;
}
.support-hero__ring--delay {
    animation-delay: 1.3s;
}

@keyframes supportRing {
    0%   { opacity: 0.65; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(1.6); }
}

.support-hero__title {
    font-size: var(--fs-title);
    font-weight: var(--fw-title);
    color: var(--fg);
    letter-spacing: -0.025em;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}
.support-hero__sub {
    margin: 6px auto 0;
    font-size: 13px;
    color: var(--fg-3);
    max-width: 300px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    position: relative;
    z-index: 2;
}

.support-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    padding: 5px 12px;
    background: var(--success-soft);
    border: 1px solid var(--success-line);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--success);
    letter-spacing: -0.005em;
    position: relative;
    z-index: 2;
}
.support-hero__status .dot { background: var(--success); opacity: 0.5; margin: 0 6px; }
.support-hero__status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    margin-right: 4px;
    animation: pulseDot 1.6s ease-in-out infinite;
}



/* ================================================================
   CONTACT CARDS — Telegram / канал (flat, единый стиль)
   ================================================================ */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 420px) {
    .contact-grid { grid-template-columns: 1fr 1fr; }
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--r);
    text-align: left;
    color: var(--fg);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--inset-hi);
    transition: transform 100ms ease, border-color 200ms ease, background 150ms ease;
}
.contact-card:active {
    transform: scale(0.99);
    border-color: var(--brand-line);
    background: var(--surface-hi);
}
.contact-card__pattern { display: none; }

.contact-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid var(--brand-line);
}
.contact-card__icon [data-lucide],
.contact-card__icon svg {
    width: 20px;
    height: 20px;
}

/* Обе карточки визуально идентичны — только тип иконки различает. */
.contact-card--tg .contact-card__icon,
.contact-card--ch .contact-card__icon,
.contact-card--ig .contact-card__icon {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--brand-line);
    box-shadow: none;
}

.contact-card__body {
    flex: 1;
    min-width: 0;
}
.contact-card__label {
    font-size: var(--fs-label);
    color: var(--fg-3);
    font-weight: var(--fw-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}
.contact-card__value {
    margin-top: 3px;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.015em;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-card__cta {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--surface-hi);
    border: 1px solid var(--line);
    color: var(--fg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 180ms var(--ease-swift), background 180ms ease;
}
.contact-card:active .contact-card__cta {
    background: var(--surface-hover);
    transform: translateX(2px) translateY(-2px);
}
.contact-card__cta [data-lucide],
.contact-card__cta svg {
    width: 15px;
    height: 15px;
}

/* ================================================================
   FAQ (accordion)
   ================================================================ */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: var(--inset-hi);
    transition: border-color 200ms var(--ease-swift);
}
.faq-item[open] {
    border-color: var(--brand-line);
}
.faq-item[open] .faq-item__q {
    color: var(--fg);
}
.faq-item[open] .faq-item__chev {
    background: var(--brand);
    color: #1A0E00;
    border-color: var(--brand);
    transform: rotate(180deg);
}

.faq-item__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
    line-height: 1.35;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { display: none; content: ''; }

.faq-item__chev {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--surface-hi);
    border: 1px solid var(--line);
    color: var(--fg-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 240ms var(--ease-spring),
                background 200ms ease,
                color 200ms ease,
                border-color 200ms ease;
}
.faq-item__chev [data-lucide],
.faq-item__chev svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
}

.faq-item__a {
    padding: 0 16px 14px;
    font-size: 13px;
    color: var(--fg-2);
    line-height: 1.55;
    letter-spacing: -0.005em;
    animation: faqFadeIn 280ms var(--ease-smooth);
}
@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   ORDERS SUMMARY strip — вверху экрана заказов
   ================================================================ */

.orders-summary {
    display: flex;
    align-items: stretch;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--inset-hi);
}
.orders-summary__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.orders-summary__divider {
    width: 1px;
    background: var(--line);
    margin: 0 12px;
    flex-shrink: 0;
}
.orders-summary__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-line);
    flex-shrink: 0;
}
.orders-summary__icon--money {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-line);
}
.orders-summary__icon [data-lucide],
.orders-summary__icon svg {
    width: 19px;
    height: 19px;
}
.orders-summary__body { min-width: 0; flex: 1; }
.orders-summary__label {
    font-size: var(--fs-label);
    color: var(--fg-3);
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    margin-bottom: 3px;
}
.orders-summary__value {
    font-size: 17px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.orders-summary__unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-3);
    margin-left: 3px;
}

/* ================================================================
   FOOTER
   ================================================================ */

.footer {
    padding: 28px 20px 12px;
    text-align: center;
}
.footer__brand {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--fg-3);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.footer__ver {
    margin-top: 4px;
    font-size: 11px;
    color: var(--fg-dim);
    letter-spacing: 0.02em;
}

/* ================================================================
   TABBAR — 4 равных сегмента по 25%, без «прыжков» ширины
   ================================================================ */

.tabbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--safe-bottom));
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 6px;
    background: rgba(11, 14, 20, 0.85);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    max-width: 540px;
    margin: 0 auto;
    box-shadow: var(--shadow-sm), var(--inset-hi);
}

.tabbar__item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: var(--r-sm);
    color: var(--fg-3);
    transition: color 200ms var(--ease-swift);
    position: relative;
    overflow: hidden;
}
.tabbar__item:active .tabbar__icon,
.tabbar__item:active .tabbar__label {
    transform: scale(0.94);
}

.tabbar__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms var(--ease-swift), color 200ms var(--ease-swift);
}
.tabbar__icon [data-lucide], .tabbar__icon svg {
    width: 20px;
    height: 20px;
}

.tabbar__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: transform 120ms var(--ease-swift), color 200ms var(--ease-swift);
}

/* Активный таб — только цвет акцента на иконке+подписи, без заливки.
   Мягкая точка под иконкой заменяет старую оранжевую пилюлю. */
.tabbar__item--active {
    color: var(--brand);
}
.tabbar__item--active .tabbar__label {
    color: var(--brand);
    font-weight: 600;
}
.tabbar__item--active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand);
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(255, 167, 38, 0.6);
}

/* ================================================================
   TILE grid (запасной)
   ================================================================ */

.tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 16px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-align: left;
    transition: transform 100ms ease, border-color 200ms ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--inset-hi);
}
.tile:active {
    transform: scale(0.98);
    border-color: var(--line-strong);
}
.tile__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    margin-bottom: 10px;
    border: 1px solid var(--brand-line);
}
.tile__icon [data-lucide], .tile__icon svg { width: 22px; height: 22px; }
.tile__title {
    font-size: 15px;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.015em;
}
.tile__sub { font-size: 12px; color: var(--fg-3); }
.tile__cta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand);
}
.tile__cta [data-lucide], .tile__cta svg { width: 14px; height: 14px; }

/* ================================================================
   SKELETON — универсальные плейсхолдеры при загрузке
   ================================================================ */

.skeleton {
    background: linear-gradient(90deg,
        var(--surface-hi) 0%,
        var(--surface-hover) 50%,
        var(--surface-hi) 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s linear infinite;
    border-radius: var(--r-sm);
}
.skeleton--line { border-radius: 4px; }

@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Order-item в режиме skeleton — без padding-структуры реального item */
.order-item--skeleton { pointer-events: none; }
.order-item--skeleton:active { transform: none; }

/* Product-card в режиме skeleton — тоже неинтерактивный */
.product-card--skeleton { pointer-events: none; }
.product-card--skeleton:active { transform: none; background: var(--surface); }

/* ================================================================
   ERROR STATE — единый вид ошибки сети/API
   Одно сообщение + одна кнопка "Дубора". Никогда не сочетается
   с empty-state в одной секции.
   ================================================================ */

.error-state {
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--inset-hi);
}
.error-state__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--error-soft);
    border: 1px solid var(--error-line);
    color: var(--error);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.error-state__icon [data-lucide], .error-state__icon svg {
    width: 24px;
    height: 24px;
}
.error-state__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.015em;
}
.error-state__sub {
    font-size: 13px;
    color: var(--fg-3);
    margin-bottom: 6px;
    line-height: 1.5;
    max-width: 280px;
}
.error-state .btn {
    max-width: 260px;
    width: 100%;
    margin-top: 4px;
}

/* ================================================================
   REF-CTA — карточка реферала на экране профиля (flat)
   ================================================================ */

.ref-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--inset-hi);
    text-align: left;
    transition: transform 100ms ease, border-color 200ms ease, background 150ms ease;
}
.ref-cta:active {
    transform: scale(0.99);
    border-color: var(--brand-line);
    background: var(--surface-hi);
}
.ref-cta__pattern { display: none; }

.ref-cta__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--brand-line);
}
.ref-cta__icon::before { content: none; }
.ref-cta__icon [data-lucide],
.ref-cta__icon svg {
    width: 22px;
    height: 22px;
}

.ref-cta__body {
    flex: 1;
    min-width: 0;
}
.ref-cta__title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.ref-cta__sub {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--fg-3);
    line-height: 1.4;
    letter-spacing: -0.005em;
}
.ref-cta__sub strong {
    color: var(--brand);
    font-weight: 700;
}

.ref-cta__arrow {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--surface-hi);
    border: 1px solid var(--line);
    color: var(--fg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 180ms var(--ease-swift), background 180ms ease;
}
.ref-cta:active .ref-cta__arrow {
    transform: translateX(3px);
    background: var(--surface-hover);
}
.ref-cta__arrow [data-lucide],
.ref-cta__arrow svg {
    width: 16px;
    height: 16px;
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */

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



/* =============================================================
   Subscription gate — оверлей, блокирующий мини-апп для юзеров,
   которые не подписаны на required_channel. Показывается когда
   /api/bootstrap вернул 403 not_subscribed.
   ============================================================= */
.sub-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(11, 14, 20, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: sub-gate-fade 200ms var(--ease-swift, ease) both;
}

.sub-gate[hidden] {
    display: none !important;
}

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

.sub-gate__card {
    width: 100%;
    max-width: 380px;
    background: linear-gradient(155deg, #1D2542 0%, #0F1428 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px 24px 24px;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.sub-gate__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--brand-hi, #FFB020) 0%, var(--brand-lo, #FF7A00) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 12px 24px rgba(255, 122, 0, 0.35);
}

.sub-gate__icon i {
    width: 36px;
    height: 36px;
    stroke-width: 2;
}

.sub-gate__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.sub-gate__text {
    margin: 0 0 16px;
    color: var(--fg-muted, #98a1b3);
    font-size: 14px;
    line-height: 1.5;
}

.sub-gate__channels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.sub-gate__channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255, 176, 32, 0.12);
    color: var(--brand-hi, #FFB020);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.sub-gate__channel:hover {
    background: rgba(255, 176, 32, 0.22);
}

.sub-gate__channel i {
    width: 18px;
    height: 18px;
}

.sub-gate__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sub-gate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 100ms ease, background 180ms ease, border-color 200ms ease;
}

.sub-gate__btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

.sub-gate__btn:active {
    transform: scale(0.98);
}

.sub-gate__btn--primary {
    background: linear-gradient(135deg, var(--brand-hi, #FFB020) 0%, var(--brand-lo, #FF7A00) 100%);
    color: #1a0f00;
}

.sub-gate__btn--secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sub-gate__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sub-gate__btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}


/* =============================================================
   SPLASH — «Bullet Breaks Logo»
   Хореография (тайминги — от старта splash в мс):
     000–320   логотип плавно проявляется в центре (целый).
     050       muzzle-flash у нижнего края (выстрел).
     100–720   пуля летит снизу вверх с огненным следом.
     620       ИМПАКТ: пуля попадает в центр логотипа, растворяется
               во вспышке.
     640–880   логотип «раскалывается» пополам — половинки разлетаются
               в стороны с motion-blur и лёгким поворотом.
     880–1040  половинки на максимуме разлёта.
     1040–1400 половинки «магнитом» стягиваются обратно с overshoot
               и «щёлкают» вместе.
     1050–1950 расходящееся золотое кольцо (shockwave) вокруг лого.
     1700      появляется бренд «SH DONAT TJ».
     1840      появляется подзаголовок.
     2500+     JS ставит класс splash--hide → 500мс fade-out и remove.
   Работает GPU-only (transform + opacity + filter blur). Никаких
   heavy-фильтров на десятках элементов, чтобы не лагать на слабых
   Android под Telegram-WebView.
   ============================================================= */

.splash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Overflow:hidden обязательно — иначе длинный огненный след пули
       вылезает вниз и создаёт скролл на iOS. */
    overflow: hidden;
    background:
        radial-gradient(720px 400px at 50% 44%, rgba(255, 138, 0, 0.08), transparent 62%),
        linear-gradient(180deg, #0B0E14 0%, #050710 100%);
    transition:
        opacity 500ms var(--ease-smooth, cubic-bezier(0.32, 0.72, 0, 1)),
        visibility 0s linear 500ms;
    /* Splash перехватывает касания, пока виден. */
    pointer-events: auto;
}

.splash--hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side at 50% 42%, rgba(255, 167, 38, 0.05), transparent 70%);
    pointer-events: none;
}

.splash__stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 24px;
    text-align: center;
}

/* Слот, в котором собирается финальный логотип. Половинки, вспышка
   и кольцо все привязаны к его центру. Пуля влетает сюда снизу. */
.splash__slot {
    position: relative;
    width: 140px;
    height: 140px;
}

/* ---------- BULLET + TRAIL ---------- */

/* Обёртка пуля+след двигается как одно целое: снизу за экраном →
   в центр слота. Обёртка позиционирована абсолютно внутри слота,
   центр слота = (50%,50%). Смещение старта (виден до fx) задаётся
   первым кейфреймом bulletFly в vh, поэтому пуля стартует ниже
   экрана независимо от размера устройства. */
.splash__bullet-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 66px;
    /* Центрируем 24×66 на (50%,50%) слота */
    margin-left: -12px;
    margin-top: -33px;
    opacity: 0;
    animation: bulletFly 620ms cubic-bezier(0.42, 0.02, 0.16, 1) 100ms both;
    filter: drop-shadow(0 0 12px rgba(255, 191, 60, 0.65));
    will-change: transform, opacity, filter;
    pointer-events: none;
    /* z-index выше половинок — пуля видна поверх логотипа во время
       полёта, до того как исчезнет во вспышке. */
    z-index: 3;
}

.splash__bullet {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* Огненный след — за пулей, тянется далеко вниз, конус сужается,
   blur размывает края. mix-blend-mode:screen делает след ярче на
   тёмном фоне без нужды в overlay. */
.splash__bullet__trail {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 12px;
    height: 130vh;
    background: linear-gradient(180deg,
        rgba(255, 220, 120, 0.95) 0%,
        rgba(255, 148, 20, 0.7)  10%,
        rgba(255,  90,  0, 0.35) 35%,
        rgba(255,  90,  0, 0.10) 65%,
        transparent 100%);
    filter: blur(3px);
    border-radius: 60% 60% 0 0 / 30% 30% 0 0;
    z-index: 1;
    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes bulletFly {
    /* Стартовая позиция — за нижним краем viewport.
       50vh — расстояние от центра слота до низа viewport. */
    0%   { transform: translate3d(0, calc(50vh + 60px), 0); opacity: 0; }
    10%  { opacity: 1; }
    /* Полёт вверх — быстро, но с ease-out в animation-timing-function.
       К 80% пуля касается центра логотипа. */
    80%  { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    /* ИМПАКТ на 87% (t ≈ 640мс): пуля раскрывается в свет и
       мгновенно растворяется — точно синхронно со стартом kick-фазы
       у половинок логотипа (см. halfLeft/halfRight на 40%). */
    87%  { transform: translate3d(0, 0, 0) scale(1.4); opacity: 1; }
    94%  { transform: translate3d(0, 0, 0) scale(0.55); opacity: 0.3; }
    100% { transform: translate3d(0, 0, 0) scale(0.1);  opacity: 0; }
}

/* ---------- MUZZLE FLASH ---------- */

/* Вспышка выстрела у нижнего края экрана. Появляется одновременно с
   первым кадром пули и быстро гаснет. Fixed относительно viewport,
   чтобы всегда была у нижнего края независимо от размера слота. */
.splash__muzzle {
    position: fixed;
    left: 50%;
    bottom: -80px;
    width: 260px;
    height: 260px;
    transform: translateX(-50%) scale(0.25);
    background: radial-gradient(circle,
        rgba(255, 240, 150, 0.95) 0%,
        rgba(255, 168,  40, 0.75) 14%,
        rgba(255,  90,   0, 0.35) 32%,
        transparent 62%);
    border-radius: 50%;
    opacity: 0;
    animation: muzzleFlash 420ms ease-out 50ms both;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(3px);
    will-change: opacity, transform;
}

@keyframes muzzleFlash {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.2); }
    30%  { opacity: 1; transform: translateX(-50%) scale(1.15); }
    100% { opacity: 0; transform: translateX(-50%) scale(1.55); }
}

/* ---------- IMPACT FLASH ---------- */

/* Импакт-вспышка на центре — точка попадания пули в логотип.
   Синхронизировано с пиком bulletFly (87% из 620мс = импакт t≈640мс)
   и стартом kick-фазы у половинок (40% из 1600мс = t≈640мс).
   Вспышка перекрывает всё в момент пикового горения, маскируя
   мгновенный переход от «целого логотипа» к «разлетевшимся половинкам». */
.splash__impact {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle,
        rgba(255, 255, 240, 1)     0%,
        rgba(255, 215,  90, 0.85) 12%,
        rgba(255, 138,   0, 0.55) 30%,
        rgba(255,  60,   0, 0.18) 55%,
        transparent 80%);
    border-radius: 50%;
    opacity: 0;
    animation: impactFlash 560ms cubic-bezier(0.16, 0.84, 0.44, 1) 620ms both;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(1px);
    will-change: opacity, transform;
    /* Импакт-вспышка перекрывает всё в момент пикового горения (t≈770мс),
       маскируя мгновенный «kick» половинок — глаз видит «BOOM → две
       половинки уже разлетелись», без резкого прыжка. */
    z-index: 4;
}

@keyframes impactFlash {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
    28%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}

/* ---------- LOGO HALVES ---------- */

/* Обе половинки — полная копия логотипа, обрезанная clip-path.
   Left видит только левую половину PNG, right — только правую.
   В покое (translateX=0) они плотно прилегают друг к другу и
   выглядят как ЦЕЛЫЙ логотип — это нужно для фазы «до импакта».
   Полётный keyframe их разбрасывает в стороны, потом стягивает. */
.splash__half {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    will-change: transform, opacity;
    /* Fallback (без анимации) — собранный логотип. */
    transform: translate3d(0, 0, 0);
}

/* Половинки видны с самого начала как ЦЕЛЫЙ логотип (клипаются
   вплотную, translateX=0). Одна анимация проходит все 4 фазы:
     0–20%   fade-in (логотип проявляется целым)
     20–40%  hold (целый логотип на экране, пуля летит)
     40–55%  KICK: пуля бьёт, половинки разлетаются с blur+rotate
     55–65%  разлёт на максимуме — «сломанный» логотип
     65–88%  half-и стягиваются обратно с overshoot
     88–100% settle
   40% на 1600мс = 640мс — ровно момент импакта пули. */
.splash__half--left {
    clip-path: inset(0 50% 0 0);
    animation: halfLeftShatter 1600ms cubic-bezier(0.22, 0.9, 0.36, 1) 0ms both;
}

.splash__half--right {
    clip-path: inset(0 0 0 50%);
    animation: halfRightShatter 1600ms cubic-bezier(0.22, 0.9, 0.36, 1) 0ms both;
}

@keyframes halfLeftShatter {
    /* Fade-in (t 0 → 320мс): логотип проявляется целым, в центре. */
    0%   { transform: translate3d(0, 0, 0) rotate(0) scale(0.94); opacity: 0; filter: blur(0); }
    20%  { transform: translate3d(0, 0, 0) rotate(0) scale(1);    opacity: 1; }
    /* Hold (320 → 640мс): логотип целый, пуля летит из-под экрана. */
    40%  { transform: translate3d(0, 0, 0) rotate(0) scale(1);    opacity: 1; filter: blur(0); }
    /* KICK (640 → 880мс): пуля попадает, половинку выбрасывает влево-вверх
       с поворотом и motion-blur. Небольшой -Y — эффект «отдачи». */
    48%  { transform: translate3d(-28px, -6px, 0) rotate(-9deg) scale(1.02); filter: blur(1.6px); }
    55%  { transform: translate3d(-56px, -3px, 0) rotate(-13deg) scale(0.98); filter: blur(1.2px); }
    /* Максимум разлёта (880 → 1040мс) — небольшая пауза, чтобы глаз
       увидел «сломанный» логотип. */
    65%  { transform: translate3d(-58px, 0, 0) rotate(-12deg) scale(0.99); filter: blur(0.6px); }
    /* Стягивание обратно (1040 → 1400мс) с overshoot — «магнитом». */
    82%  { transform: translate3d(4px, 0, 0) rotate(1deg) scale(1.04); filter: blur(0); }
    92%  { transform: translate3d(-1.5px, 0, 0) rotate(0) scale(1); }
    /* Settle (1400 → 1600мс) — покой. */
    100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); opacity: 1; }
}
@keyframes halfRightShatter {
    0%   { transform: translate3d(0, 0, 0) rotate(0) scale(0.94); opacity: 0; filter: blur(0); }
    20%  { transform: translate3d(0, 0, 0) rotate(0) scale(1);    opacity: 1; }
    40%  { transform: translate3d(0, 0, 0) rotate(0) scale(1);    opacity: 1; filter: blur(0); }
    48%  { transform: translate3d(28px, -6px, 0) rotate(9deg) scale(1.02); filter: blur(1.6px); }
    55%  { transform: translate3d(56px, -3px, 0) rotate(13deg) scale(0.98); filter: blur(1.2px); }
    65%  { transform: translate3d(58px, 0, 0) rotate(12deg) scale(0.99); filter: blur(0.6px); }
    82%  { transform: translate3d(-4px, 0, 0) rotate(-1deg) scale(1.04); filter: blur(0); }
    92%  { transform: translate3d(1.5px, 0, 0) rotate(0) scale(1); }
    100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); opacity: 1; }
}

/* ---------- SHOCKWAVE RING ---------- */

/* Расходящееся кольцо вокруг собранного логотипа — «shockwave»
   от импакта. Идёт чуть позже стыковки, добавляя финальный акцент. */
.splash__ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 167, 38, 0.65);
    opacity: 0;
    animation: ringPulse 900ms ease-out 1250ms both;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(255, 167, 38, 0.28) inset;
    will-change: transform, opacity;
}

@keyframes ringPulse {
    0%   { opacity: 0; transform: scale(0.85); border-color: rgba(255, 167, 38, 0.85); }
    28%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.42); border-color: rgba(255, 167, 38, 0); }
}

/* ---------- BRAND TEXT ---------- */

.splash__brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    line-height: 1.1;
    opacity: 0;
    text-shadow: 0 2px 20px rgba(255, 138, 0, 0.35);
    animation: splashText 520ms cubic-bezier(0.16, 0.84, 0.44, 1) 1700ms both;
}

.splash__tag {
    font-size: 13px;
    font-weight: 500;
    color: #8A8F9C;
    letter-spacing: -0.005em;
    opacity: 0;
    animation: splashText 520ms cubic-bezier(0.16, 0.84, 0.44, 1) 1840ms both;
}

@keyframes splashText {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion: полностью выключаем «выстрел» и просто показываем
   собранный логотип с брэнд-текстом. Пользователи с этим системным
   флагом не должны видеть мельтешение. */

/* ---------- SKIP HINT ---------- */
/* Подсказка «Зер занед барои гузаштан» появляется после основной
   анимации (~2000мс), тонко серым внизу. Клик по splash закрывает
   его через JS (splashEl.addEventListener 'click', hideSplash). */
.splash__skip {
    position: absolute;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.28);
    letter-spacing: 0.01em;
    opacity: 0;
    animation: splashSkipIn 400ms ease 2000ms both;
    pointer-events: none;
    z-index: 2;
}
@keyframes splashSkipIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .splash__bullet-wrap,
    .splash__bullet__trail,
    .splash__muzzle,
    .splash__impact {
        display: none !important;
    }
    .splash__half,
    .splash__ring,
    .splash__brand,
    .splash__tag,
    .splash__skip {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =============================================================
   PAYMENT PICKER + BOTTOM SHEET
   Заменяет длинный список из 4 radio-опций одной компактной
   кнопкой (.pay-picker), которая показывает текущий банк и
   открывает bottom-sheet (.pay-sheet) с выбором.
   Компактнее по вертикали → CTA-кнопка «Пардохт» видна без скролла.
   ============================================================= */

/* ---- Picker button (single row, similar dimensions to old .option) ---- */

.pay-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--inset-hi);
    transition:
        border-color 180ms var(--ease-swift),
        background 180ms ease,
        transform 100ms ease;
}
.pay-picker:active {
    transform: scale(0.995);
    background: var(--surface-hi);
    border-color: var(--brand-line);
}
.pay-picker:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.pay-picker__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid var(--brand-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 220ms ease, color 220ms ease;
}
.pay-picker__icon [data-lucide],
.pay-picker__icon svg {
    width: 20px;
    height: 20px;
}

.pay-picker__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pay-picker__hint {
    font-size: var(--fs-label);
    font-weight: var(--fw-label);
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    line-height: 1;
}
.pay-picker__title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-picker__chev {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--surface-hi);
    border: 1px solid var(--line);
    color: var(--fg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        transform 260ms var(--ease-smooth),
        background 200ms ease,
        color 200ms ease;
}
.pay-picker__chev [data-lucide],
.pay-picker__chev svg {
    width: 16px;
    height: 16px;
}
.pay-picker[aria-expanded="true"] .pay-picker__chev {
    transform: rotate(180deg);
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--brand-line);
}

/* ---- Bottom-sheet ---- */

.pay-sheet {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: auto;
}
.pay-sheet[hidden] {
    display: none !important;
}

.pay-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 16, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 240ms var(--ease-swift);
    cursor: pointer;
}
.pay-sheet--open .pay-sheet__backdrop {
    opacity: 1;
}

.pay-sheet__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: linear-gradient(180deg, #141928 0%, #0E121C 100%);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-top: 1px solid var(--line-strong);
    padding: 8px 16px calc(20px + var(--safe-bottom));
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
    transform: translateY(105%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 82vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.pay-sheet--open .pay-sheet__panel {
    transform: translateY(0);
}

/* Верхняя «ручка» — визуальный намёк, что это bottom-sheet */
.pay-sheet__handle {
    width: 44px;
    height: 4px;
    background: var(--line-strong);
    border-radius: 4px;
    margin: 10px auto 6px;
    opacity: 0.9;
}

.pay-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
}
.pay-sheet__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.01em;
}
.pay-sheet__close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--fg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 100ms ease;
}
.pay-sheet__close:active {
    background: var(--surface-hi);
    transform: scale(0.94);
}
.pay-sheet__close [data-lucide],
.pay-sheet__close svg {
    width: 16px;
    height: 16px;
}

.pay-sheet__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pay-sheet__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    text-align: left;
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 200ms var(--ease-swift),
        transform 100ms ease;
}
.pay-sheet__opt:active {
    background: var(--surface-hover);
    transform: scale(0.995);
}

.pay-sheet__opt--active {
    background: var(--brand-softer);
    border-color: var(--brand-line);
    box-shadow: 0 0 0 1px var(--brand-line) inset;
}

.pay-sheet__opt__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid var(--brand-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pay-sheet__opt__icon [data-lucide],
.pay-sheet__opt__icon svg {
    width: 18px;
    height: 18px;
}

/* ---------- Логотипы банков (заменяют линейные иконки) ----------
   Контейнеры picker'а и опций sheet теперь всегда содержат PNG-логотип.
   Даём им светлый фон, чтобы разноцветные логотипы читались на тёмной
   теме, скругление и внутренний отступ. Логотип вписываем через
   object-fit: contain — не искажается независимо от пропорций. */
.pay-picker__icon,
.pay-sheet__opt__icon {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
    overflow: hidden;
    padding: 4px;
}
.pay-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.pay-sheet__opt__body {
    flex: 1;
    min-width: 0;
}
.pay-sheet__opt__title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.pay-sheet__opt__sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--fg-3);
    line-height: 1.35;
    letter-spacing: -0.005em;
    /* Многострочный sub может быть длинным — ограничиваем 2 строки. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Круглый check-индикатор справа: тускло-пустой у неактивного,
   заполненный брэндом у активного. */
.pay-sheet__opt__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-hi);
    border: 1.5px solid var(--line-strong);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 200ms var(--ease-swift);
}
.pay-sheet__opt__check [data-lucide],
.pay-sheet__opt__check svg {
    width: 14px;
    height: 14px;
    stroke-width: 3 !important;
}
.pay-sheet__opt--active .pay-sheet__opt__check {
    background: var(--brand);
    border-color: var(--brand);
    color: #1a0f00;
}

/* Reduced motion — убираем slide-up у панели, оставляем opacity fade. */
@media (prefers-reduced-motion: reduce) {
    .pay-sheet__panel {
        transition: none;
        transform: none;
    }
    .pay-sheet--open .pay-sheet__panel {
        transform: none;
    }
}


/* =============================================================
   ORDER FORM — компактная вёрстка экрана заказа.
   Всё умещается в один экран без пустого пространства:
     • компактная summary-карточка (меньше padding, 36px иконка)
     • сгруппированные поля с тонкими inline-label
     • без дублирующих заголовков секций
     • компактный consent
   ============================================================= */

.order-form {
    padding: 14px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Компактная версия order-summary — 20px padding → 14px, 44px иконка → 36px,
   22px цена → 20px. Всё умещается в 62–66px высоты вместо 84px. */
.order-summary--compact {
    padding: 14px 14px;
    gap: 12px;
    border-radius: var(--r);
}
.order-summary--compact .order-summary__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.order-summary--compact .order-summary__icon [data-lucide],
.order-summary--compact .order-summary__icon svg {
    width: 18px;
    height: 18px;
}
.order-summary--compact .order-summary__label {
    font-size: 10px;
    margin-bottom: 2px;
}
.order-summary--compact .order-summary__name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    /* Ограничиваем одной строкой с ellipsis — длинные ваучеры не
       разваливают карточку. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.order-summary--compact .order-summary__body {
    min-width: 0;
    flex: 1;
}
.order-summary--compact .order-summary__price {
    font-size: 20px;
    letter-spacing: -0.02em;
}

/* Field-обёртка — компактная альтернатива .section-у.
   Небольшой inline-label над контролом, без .section__hint. */
.order-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.order-field__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-left: 4px;
}

/* Компактный input в order-form: меньше padding по вертикали */
.order-form .input-wrap {
    padding: 0 14px;
    border-radius: var(--r);
}
.order-form .input {
    padding: 13px 0;
    font-size: 15px;
}
.order-form .input-wrap__icon {
    margin-right: 10px;
}

/* Компактный picker: меньше padding, чем стандартный .pay-picker */
.pay-picker--compact {
    padding: 12px 12px;
    gap: 10px;
}
.pay-picker--compact .pay-picker__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.pay-picker--compact .pay-picker__icon [data-lucide],
.pay-picker--compact .pay-picker__icon svg {
    width: 18px;
    height: 18px;
}
/* В compact-варианте hint скрыт (label уже сверху) */
.pay-picker--compact .pay-picker__hint { display: none; }
.pay-picker--compact .pay-picker__title {
    font-size: 15px;
    font-weight: 600;
}
.pay-picker--compact .pay-picker__chev {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

/* Компактный consent: меньше padding + меньше текст */
.consent--compact {
    padding: 10px 12px;
    gap: 10px;
    border-radius: var(--r-sm);
}
.consent--compact .consent__box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
}
.consent--compact .consent__text {
    font-size: 12.5px;
    line-height: 1.4;
}

/* CTA-бар специально для order-экрана: чуть меньше отступов */
.cta-bar--order {
    padding: 8px 16px 10px;
}

/* Убираем "прыжки" input-status в компактной форме — он появляется
   ниже инпута и не должен ломать сетку gap:14px формы. */
.order-form .input-status {
    margin-top: 0;
    padding: 8px 12px;
    font-size: 12px;
}

/* На маленьких экранах (iPhone SE ~ 568px) ещё чуть плотнее */
@media (max-height: 620px) {
    .order-form {
        gap: 10px;
        padding-top: 10px;
    }
    .order-summary--compact {
        padding: 12px;
    }
    .order-field {
        gap: 6px;
    }
    .order-field__label {
        font-size: 10px;
    }
}


/* =============================================================
   ORDERS — banking statement rows
   Одна строка = [иконка] [название + время + банк] [сумма + статус].
   Сгруппировано по датам (заголовки .order-group). Разделители —
   тонкие 1px линии, без «карточка на карточке». Статус — цветная
   точка + короткое слово, никаких больших бейджей.
   ============================================================= */

/* Контейнер со всей выпиской — вместо card-per-row стелем плоский
   surface на всю ширину и группируем по датам. */
#orders-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Заголовок группы: uppercase, мелкий, серый — как sticky-headers
   в iOS Wallet / Revolut. */
.order-group {
    padding: 18px 4px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.order-group:first-child {
    padding-top: 4px;
}

.order-group__list {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.order-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 14px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, transform 100ms ease;
    /* Разделитель между строками — тонкая 1px линия. Не рисуем на
       последней строке, чтобы не было двойной с border-снизу-контейнера. */
    border-bottom: 1px solid var(--line-2);
}
.order-row:last-child {
    border-bottom: none;
}
.order-row:active {
    background: var(--surface-hi);
    transform: scale(0.997);
}

/* Иконка категории в мягком круге — акцентный цвет с низкой alpha,
   тонкая 1px обводка того же тона. */
.order-row__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-softer);
    color: var(--brand);
    border: 1px solid var(--brand-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.order-row__icon [data-lucide],
.order-row__icon svg {
    width: 18px;
    height: 18px;
}

.order-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.order-row__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.005em;
    line-height: 1.25;
    /* Ограничиваем одной строкой — cart-заказы (items_note) могут быть
       длинные, ellipsis лучше чем wrap в списке. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-row__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-row__meta .dot {
    background: var(--fg-dim);
    margin: 0 2px;
}

.order-row__amount {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.order-row__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
}
.order-row__price__unit {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--fg-3);
}

/* Статус: цветная точка + короткое слово. Не «badge», а inline-строка. */
.order-row__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
}
.order-row__status .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Семантические цвета для статуса. Одна палитра для всех состояний
   заказов + любых будущих статусов (выплаты, реферал и т.д.). */
.order-row__status--success { color: var(--success); }
.order-row__status--success .status-dot { background: var(--success); box-shadow: 0 0 6px rgba(34, 197, 94, 0.55); }

.order-row__status--warning { color: var(--warning); }
.order-row__status--warning .status-dot { background: var(--warning); box-shadow: 0 0 6px rgba(245, 183, 64, 0.55); }

.order-row__status--error { color: var(--error); }
.order-row__status--error .status-dot { background: var(--error); box-shadow: 0 0 6px rgba(239, 68, 68, 0.55); }

.order-row__status--info { color: var(--info); }
.order-row__status--info .status-dot { background: var(--info); box-shadow: 0 0 6px rgba(59, 130, 246, 0.55); }

.order-row__status--muted { color: var(--fg-3); }
.order-row__status--muted .status-dot { background: var(--fg-muted); }

/* Skeleton-строчка — та же геометрия, что настоящая .order-row.
   Так UI не «прыгает» при загрузке. */
.order-row--skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border-bottom: 1px solid var(--line-2);
    background: transparent;
    cursor: default;
    pointer-events: none;
}
.order-row--skeleton:last-child { border-bottom: none; }


/* =============================================================
   ICON HIERARCHY OVERRIDES
   Правило: оранжевый (--brand) — только для hero-элементов
   (wallet-card, CTA-кнопки, active tab, primary-иконки).
   Вторичные декоративные иконки (trust-chip, stat-grid, tier-list
   в референсе, order-row иконки категории) переводим на --fg-2,
   чтобы иерархия читалась и один акцент не «размазывался» по 20+
   местам на одном экране.
   ============================================================= */

/* Trust-chips: 3 плитки внизу wallet — это факты о магазине,
   не CTA. Убираем оранжевый, оставляем нейтральный. */
.trust-chip [data-lucide],
.trust-chip svg {
    color: var(--fg-2);
}

/* Stat-grid (профиль, реферал): 2×2 плитки с иконками. Иконка =
   декоративный маркер категории, а не акцент. */
.stat__icon {
    background: var(--surface-hi);
    color: var(--fg-2);
    border-color: var(--line-strong);
}

/* Tier-list в референсе: 3 ряда «Ҷанговар / Қаҳрамон / Афсонавӣ».
   Оранжевый оставим только для .tier-row--current (см. ниже, для
   подсветки текущего уровня юзера); базовые — нейтральные. */
.tier-row__icon {
    background: var(--surface-hi);
    color: var(--fg-2);
    border-color: var(--line-strong);
}

/* Order-row: иконка категории — визуальный маркер, не CTA. */
.order-row__icon {
    background: var(--surface-hi);
    color: var(--fg-2);
    border-color: var(--line-strong);
}

/* FAQ chev: нейтральный по умолчанию, brand — только когда открыто
   (already in original CSS). */

/* =============================================================
   MEMBER-CARD dedup username
   Флаг .member-card--dup-username ставит JS, когда name === @username.
   Тогда мета-строка становится: [id ...] без «@username · dot».
   ============================================================= */

.member-card--dup-username .member-card__meta > :not(:last-child) {
    display: none;
}

/* =============================================================
   CURRENT TIER HIGHLIGHT (referral tier-list)
   Класс .tier-row--current ставится JS для того ряда, где юзер
   сейчас находится. Оранжевая обводка + badge «Ҳозира».
   ============================================================= */

.tier-row--current {
    background: var(--brand-softer);
    border-left: 2px solid var(--brand);
}
.tier-row--current .tier-row__icon {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--brand-line);
}
.tier-row--current .tier-row__title::after {
    content: 'Ҳозира';
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}


/* Bold-white user name inside greeting on wallet-card */
.wallet-card__hi__user {
    color: #FFFFFF;
    font-weight: 700;
}


/* Sub-gate: короткая мотивационная строка ЗАЧЕМ подписываться */
.sub-gate__reason {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: rgba(255, 167, 38, 0.08);
    border: 1px solid var(--brand-line);
    border-radius: 12px;
    color: var(--brand-hi);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
}

/* Stacked CTA-bar (order-detail) — две кнопки друг под другом */
.cta-bar--stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}