/* Тёмная тема */
:root {
    --bg: #0f172a;
    --text: #e2e8f0;
    --card-bg: #1e293b;
    --border: #334155;
    --skeleton-base: #1e293b;
    --skeleton-shine: #334155;
    --gray-400: #94a3b8;
    --gray-500: #cbd5e1;
    --sheet-bg: #1e293b;
    /* Подложка под список внутри шторки. Отдельный токен нужен
       потому, что --sheet-bg и --card-bg совпадают, и список
       выбора сливался с фоном шторки в один сплошной цвет. */
    --sheet-inset-bg: #16202f;
    --sheet-inset-border: #334155;
    --sheet-track: rgba(148,163,184,0.22);
    --accent-start: #38BDF8;
    --accent-end: #0EA5E9;
    /* Акцент для ТЕКСТА — отдельно от акцента для заливок:
       на тёмном фоне светлый голубой читается, на белом нет. */
    --accent-text: #38BDF8;
    --accent-soft: #818CF8;
}
/* Светлая тема. Значения серого и акцента подобраны по контрасту:
   прежние #9CA3AF (2.5:1) и #0EA5E9 (2.8:1) на белом не читались —
   норма для текста 4.5:1. Цена и подписи меню были на грани. */
html.light-theme {
    --bg: #FFFFFF;
    --text: #111827;
    --card-bg: #FFFFFF;
    --border: #E5E7EB;
    --skeleton-base: #F3F4F6;
    --skeleton-shine: #E5E7EB;
    --gray-400: #6B7280;   /* было #9CA3AF — 2.5:1, стало 4.8:1 */
    --gray-500: #4B5563;   /* было #6B7280 — 4.8:1, стало 7.6:1 */
    --sheet-bg: #FFFFFF;
    --sheet-inset-bg: #F9FAFB;
    --sheet-inset-border: #E5E7EB;
    --sheet-track: rgba(107,114,128,0.2);
    --accent-text: #0369A1;  /* 5.9:1 на белом вместо 2.8:1 */
    --accent-soft: #4F46E5;
}
/* Градиент кнопок — прежний, фирменный, по решению владельца.
   Контраст белого текста на нём 2.8:1 и 2.1:1 при норме 4.5:1,
   поэтому текст сделан крупнее и жирнее, а тень убрана: так надпись
   читается заметно лучше без изменения цвета. */
:root {
    --btn-a: #0EA5E9;
    --btn-b: #38BDF8;
    --btn-a-hover: #0284C7;
    --btn-b-hover: #0EA5E9;
    /* Цвет сайта выбирается в «Настройках» (07.10.2026). Всё фирменное
       голубое — только через переменные ниже и выше: тени и подсветки
       берут rgba(var(--accent-rgb), …). Значения здесь — цвет «Небо»
       (прежний голубой): для него скрипт в <head> templates/index.html
       ничего не подставляет, и сайт выглядит ровно как раньше. Другой
       цвет скрипт кладёт поверх в style тега <html>.
       Новый голубой в стилях — только через эти переменные, иначе при
       смене цвета он останется голубым. */
    --on-accent: #FFFFFF;              /* текст и иконки на градиенте */
    --accent-rgb: 14, 165, 233;        /* = --btn-a */
    --accent2-rgb: 56, 189, 248;       /* = --btn-b */
    --accent-hover-rgb: 2, 132, 199;   /* = --btn-a-hover */
    --accent-second: #818CF8;          /* второй цвет полосок и заставки */
    --accent-second-rgb: 129, 140, 248;
    --accent-deep: #0369A1;            /* цена в светлой теме, край бегунка */
    --accent-deep-2: #0A79B5;
    --accent-pale: #E0F2FE;            /* блик бегунка прокрутки */
}

/* Перекрываем классы Tailwind, которые не знают о теме.
   !important нужен потому, что стили Tailwind подключаются позже. */
.text-gray-400 { color: var(--gray-400) !important; }
.text-gray-500 { color: var(--gray-500) !important; }
.text-sky-400, .text-blue-400 { color: var(--accent-text) !important; }
.hover\:text-sky-300:hover { color: var(--accent-soft) !important; }
.text-\[\#38BDF8\] { color: var(--accent-text) !important; }
h1.bg-clip-text {
    background-image: linear-gradient(90deg, var(--accent-text), var(--accent-soft)) !important;
}

/* Уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
* { font-family: 'Inter', sans-serif; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg) !important;
    color: var(--text) !important;
    overflow-x: hidden;
    /* Запас под плавающее меню-овал: 66px сам овал + 14px отступ от
       края + полоса жестов iPhone. */
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    margin: 0;
}
.bg-animated {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    overflow: hidden;
    background: var(--bg);
}
.bg-animated span {
    position: absolute;
    display: block;
    width: 40px; height: 40px;
    background: rgba(var(--accent-rgb), 0.12);
    border-radius: 50%;
    filter: blur(20px);
    animation: floatUp 12s infinite ease-in;
}
.bg-animated span:nth-child(odd) { background: rgba(var(--accent2-rgb), 0.08); animation-duration: 15s; }
@keyframes floatUp {
    0% { transform: translateY(110vh) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}
.glass-panel {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.gift-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
}
.gift-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.gift-card:hover {
    transform: translateY(-3px);
    border-color: var(--btn-a);
    box-shadow: 0 8px 25px rgba(var(--accent-rgb),0.3);
}
.btn-primary {
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    color: var(--on-accent);
    font-weight: 700;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.4);
    border-radius: 9999px;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--btn-a-hover), var(--btn-b-hover));
    box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.6);
    transform: scale(1.03);
}
.filter-chip {
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    border: 1px solid var(--btn-a-hover);
    border-radius: 40px;
    padding: 12px 20px;
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.1s;
    cursor: pointer;
    color: var(--on-accent);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-chip.active {
    background: linear-gradient(135deg, var(--btn-a-hover), var(--btn-b-hover));
    box-shadow: 0 0 10px rgba(var(--accent-rgb),0.3);
}
/* Плашки выбранных фильтров (08.10.2026). Были крупные синие «таблетки»
   с текстом и голым «×» — последний старый элемент витрины. Теперь:
   картинка или квадратик цвета фона, подпись в две строки, круглый
   крестик; нажатие на плашку открывает тот же список. */
#activeFiltersContainer { gap: 8px; align-items: center; }
.af-chip {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%;
    padding: 5px 5px 5px 5px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.10);
    box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), 0.35);
    color: var(--text);
    animation: afIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.af-main {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 0 4px 0 0; border: 0; background: none; color: inherit; font: inherit;
    text-align: left; cursor: pointer; border-radius: 999px;
}
.af-main:disabled { cursor: default; }
.af-main:focus-visible, .af-x:focus-visible, .af-reset:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.af-media {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.22), var(--card-bg) 72%);
    box-shadow: inset 0 0 0 1px var(--border);
    color: var(--accent-text);
}
.af-media img { width: 88%; height: 88%; object-fit: contain; }
.af-media svg { width: 18px; height: 18px; }
/* Фон — скруглённый квадратик с градиентом и бликом (не кружок). */
.af-media.af-swatch { border-radius: 11px; position: relative;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25), 0 3px 8px -4px rgba(0, 0, 0, 0.5); }
.af-media.af-swatch::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0)); }
.af-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.af-text small { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-text); }
.af-text b { font-size: 0.95rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.af-x {
    flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center;
    background: rgba(148, 163, 184, 0.18); color: var(--text);
    transition: background 0.15s, color 0.15s, transform 0.12s;
}
.af-x svg { width: 13px; height: 13px; }
.af-x:active { transform: scale(0.9); }
@media (hover: hover) {
    .af-x:hover { background: rgba(239, 68, 68, 0.18); color: #ef4444; }
    .af-main:not(:disabled):hover .af-text b { color: var(--accent-text); }
}
.af-reset {
    border: 0; background: none; cursor: pointer;
    padding: 8px 12px; border-radius: 999px;
    color: var(--gray-400); font: inherit; font-size: 0.9rem; font-weight: 700;
    transition: background 0.15s, color 0.15s;
}
.af-reset:hover { color: var(--text); background: rgba(148, 163, 184, 0.14); }
.af-empty { display: inline-flex; align-items: center; gap: 8px; color: var(--gray-400); font-size: 0.88rem; font-weight: 600; }
.af-empty svg { width: 16px; height: 16px; flex: none; }
@keyframes afIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
/* Кнопки «Выбрать коллекцию / модель / фон» (07.10.2026 — владелец
   попросил покрасивее): иконка в светлом «пузыре», подпись в две строки
   («ВЫБРАТЬ» мелко, что — крупно), стрелка вниз; при наведении кнопка
   приподнимается и по ней пробегает блик. */
.filter-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 8px 14px 8px 8px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    color: var(--on-accent);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.32), inset 0 1px 0 rgba(255,255,255,0.28);
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.filter-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0));
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
@media (hover: hover) {
    .filter-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.28);
    }
    .filter-btn:hover::after { left: 120%; }
}
.filter-btn:active { transform: scale(0.98); }
.filter-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.filter-btn-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(255,255,255,0.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.filter-btn-ico svg { width: 22px; height: 22px; }
.filter-btn-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.12;
}
.filter-btn-text small {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}
.filter-btn-text b {
    font-size: 1.04rem;
    font-weight: 800;
    white-space: nowrap;
}
.filter-btn-chev {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: auto;
    opacity: 0.85;
}
@media (min-width: 641px) {
    .filter-btn { min-width: 220px; }
}
@media (max-width: 400px) {
    .filter-btn { gap: 9px; padding-right: 10px; }
    .filter-btn-ico { width: 38px; height: 38px; border-radius: 12px; }
    .filter-btn-ico svg { width: 20px; height: 20px; }
}
/* Строка поиска юзернеймов и рядом переключатель «Убрать фото».
   Переключатель оформлен как соседнее поле: та же подложка, рамка и
   высота, что у поиска. На телефоне он уходит под поиск отдельной
   строкой на всю ширину — надпись слева, тумблер справа. */
.username-tools {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.username-tools-search { position: relative; flex: 1 1 auto; min-width: 0; }
.photo-toggle {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px 0 16px;
    min-height: 52px;
    background: var(--card-bg);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s;
}
.photo-toggle:hover { border-color: var(--accent-end); }
.photo-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.photo-toggle-track {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 26px;
    border-radius: 9999px;
    background: var(--border);
    transition: background 0.2s, box-shadow 0.2s;
}
.photo-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}
.photo-toggle input:checked + .photo-toggle-track {
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.4);
}
.photo-toggle input:checked + .photo-toggle-track::after { transform: translateX(18px); }
.photo-toggle input:focus-visible + .photo-toggle-track {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}
html.light-theme .photo-toggle-track { background: #D1D5DB; }
@media (max-width: 560px) {
    .username-tools { flex-direction: column; }
}
/* Юзернеймы без фото: вместо плиток — строки «@имя · кнопка с ценой».
   Картинки просто прячутся, карточки не перерисовываются, поэтому
   переключение мгновенное, а лениво загружаемые фото скрытых карточек
   браузер не качает. Имя в плитке не показывается: оно и так
   нарисовано на картинке. На широком экране строки встают в несколько
   колонок, чтобы кнопка не уезжала на другой край монитора.
   С 07.10.2026 «Купить» нет и здесь — как у подарков, одна кнопка с ценой;
   строка — обычная карточка в цветах темы, а не тёмная плитка. */
.username-name { display: none; }
.cards-grid.username-list {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
}
.username-list .gift-card {
    flex-direction: row;
    align-items: center;
    border-radius: 16px;
    background: var(--card-bg);
    border-color: var(--border);
}
.username-list .gift-card::after { display: none; }
.username-list .gift-card:hover { transform: translateY(-2px); }
.username-list .image-container { display: none; }
.cards-grid.username-list .username-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name buy";
    align-items: center;
    column-gap: 14px;
    width: 100%;
    margin: 0;
    padding: 10px 10px 10px 18px;
}
.username-list .username-name {
    display: block;
    grid-area: name;
    min-width: 0;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--text);
    overflow-wrap: anywhere;
}
.username-list .gift-price-btn {
    grid-area: buy;
    width: auto;
    min-height: 42px;
    padding: 10px 20px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}
@media (max-width: 480px) {
    .cards-grid.username-list { grid-template-columns: 1fr; }
    .cards-grid.username-list .username-card-body { padding: 10px 10px 10px 16px; }
    .username-list .username-name { font-size: 1rem; }
}
.checkbox-custom { accent-color: var(--btn-a); width: 1.2rem; height: 1.2rem; }
/* Шторка «Выбрать…» (переделана 08.10.2026). Колонка: ручка, шапка, поиск,
   список (растягивается на всё свободное место и листается сам), кнопки —
   всегда внизу. Раньше вся шторка листалась целиком, а список был
   ограничен 46vh и показывал 4–5 строк. */
.bottom-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; flex-direction: column;
    background: var(--sheet-bg);
    color: var(--text);
    border-radius: 28px 28px 0 0;
    /* 2200 — выше плашки cookie (2000): на первом заходе она закрывала
       «Применить», и выбрать фильтр было нельзя (найдено 08.10.2026). Ниже
       карточки подарка (2500), уведомлений (3500) и окон (4000). */
    z-index: 2200; transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 90vh; max-height: 90dvh;
    overflow: hidden;
    border-top: 1px solid var(--border);
    box-shadow: 0 -12px 40px rgba(0,0,0,0.35);
    padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.bottom-sheet.open { transform: translateY(0); }
/* Идёт поиск (09.10.2026): высоту шторки держит app.js (holdSheetHeight),
   а панель со списком занимает всё место между поиском и кнопками —
   найденные плитки стоят вверху панели, а не съёживаются вместе с ней. */
.bottom-sheet.searching .sheet-list-wrap,
.bottom-sheet.searching .sheet-list { flex: 1 1 auto; }
@media (max-width: 767px) {
    .bottom-sheet.searching {
        transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
.sh-top { flex: none; height: 26px; display: flex; align-items: center; justify-content: center; }
.sh-handle { width: 40px; height: 5px; border-radius: 99px; background: var(--border); }
.sh-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 0 12px; }
.sh-head-text { flex: 1; min-width: 0; }
.sh-title { font-size: 1.25rem; font-weight: 900; line-height: 1.2; color: var(--text); }
.sh-sub { margin-top: 2px; font-size: 0.85rem; font-weight: 600; color: var(--gray-400);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-sub:empty { display: none; }
.sh-close {
    flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center;
    background: rgba(148, 163, 184, 0.16); color: var(--gray-400);
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.sh-close svg { width: 18px; height: 18px; }
.sh-close:hover { background: rgba(148, 163, 184, 0.28); color: var(--text); }
.sh-close:active { transform: scale(0.92); }
.sh-close:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sh-search {
    flex: none; position: relative; display: flex; align-items: center; margin-bottom: 12px;
}
.sh-search-ico { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--gray-400); pointer-events: none; }
.sh-search input {
    width: 100%; height: 46px; padding: 0 44px 0 42px;
    border-radius: 999px; border: 1.5px solid var(--border);
    background: var(--sheet-inset-bg); color: var(--text);
    font: inherit; font-size: 1rem; font-weight: 600;
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none; appearance: none;
}
.sh-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.sh-search input::placeholder { color: var(--gray-400); font-weight: 500; }
.sh-search input:focus { border-color: var(--accent-end); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); }
.sh-search-clear {
    position: absolute; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; background: rgba(148, 163, 184, 0.2); color: var(--text);
}
.sh-search-clear[hidden] { display: none; }
.sh-search-clear svg { width: 14px; height: 14px; }
.sh-foot { flex: none; display: flex; gap: 10px; padding-top: 12px; }
.sh-btn { flex: 1; min-height: 50px; border-radius: 16px; font-weight: 800; font-size: 1rem; }
.sh-apply { box-shadow: 0 10px 22px -10px rgba(var(--accent-rgb), 0.8); }
/* Компьютер и планшет: окно по центру вместо полосы во всю ширину. */
@media (min-width: 768px) {
    .bottom-sheet {
        left: 50%; right: auto; bottom: auto; top: 50%;
        width: min(620px, 92vw);
        max-height: 86vh; max-height: 86dvh;
        border-radius: 28px; border: 1px solid var(--border);
        padding: 18px 22px 20px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
        transform: translate(-50%, -46%) scale(0.97);
        opacity: 0; visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, visibility 0.3s;
    }
    .bottom-sheet.open { transform: translate(-50%, -50%); opacity: 1; visibility: visible; }
    .sh-top { display: none; }
}
.sheet-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    z-index: 2150; opacity: 0; visibility: hidden;   /* под шторкой (2200), над плашкой cookie */
    transition: 0.2s;
}
.sheet-overlay.active { opacity: 1; visibility: visible; }
.sheet-search {
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* Было жёстко #1e293b — тёмно-синий квадрат под каждой картинкой
       на белой странице, пока изображение грузится. */
    background: var(--skeleton-base);
}
.gift-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.gift-image.loaded {
    opacity: 1;
}
.skeleton-img {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
/* Цена — второй по важности элемент после кнопки. На белом фоне
   прежний градиент давал 2.8:1 и читался на грани. */
.price-gradient {
    background: linear-gradient(135deg, var(--accent-text), var(--accent-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--accent-text);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.2;
}
html.light-theme .price-gradient {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deep-2));
    -webkit-background-clip: text;
    background-clip: text;
}
/* Подарок, которого уже нет на маркетплейсе: кнопка гаснет и перестаёт
   нажиматься, чтобы покупатель не оплачивал то, что выдать нельзя. */
.btn-sold, .btn-sold:hover, .btn-sold:active {
    background: #4b5563;
    background-image: none;
    color: #d1d5db;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    opacity: 0.85;
}

/* ---------- Карточка подарка в стиле маркета Tonnel (07.10.2026) ----------
   Владелец попросил как в @Tonnel_Network_bot: фон подарка заливает всю
   карточку, под картинкой — название слева и #номер справа, внизу одна
   широкая кнопка с ценой (отдельной «Купить» нет). Нажатие на картинку,
   как и раньше, открывает характеристики подарка.
   --tile-bg — крайний цвет фона подарка из BACKDROP_COLORS (app.js): им
   продолжается фон под картинкой, стык не виден. Если фон неизвестен —
   нейтральный тёмный, текст на нём такой же белый. */
.gift-tile {
    --tile-bg: #334155;
    background: var(--tile-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
}
html.light-theme .gift-tile { border-color: rgba(15,23,42,0.08); }
/* Низ карточки чуть темнее — на нём лучше читаются текст и кнопка. */
.gift-tile::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.32));
    pointer-events: none;
}
.gift-tile .image-container { background: transparent; }
/* Юзернеймы: картинки Getgems — тёмная плашка, плитка продолжает её низ. */
.username-tile { --tile-bg: #1b2229; }
/* Нижний край картинки растворяется в цвете карточки. */
.gift-tile .image-container::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 22%;
    background: linear-gradient(to bottom, rgba(0,0,0,0), var(--tile-bg));
    pointer-events: none;
}
.gift-tile-info {
    position: relative;
    z-index: 1;                       /* над затемнением ::after */
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: -4px;
    padding: 0 10px 10px;
}
.gift-tile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 0 4px;
    color: #fff;
}
.gift-tile-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 0.95rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.gift-tile-num {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.62);
}
.gift-price-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    color: var(--on-accent);
    font-weight: 800;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.gift-price-btn:hover { transform: scale(1.02); filter: brightness(1.06); }
.gift-price-btn:active { transform: scale(0.96); }
.gift-price-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Со скидкой: обычная цена зачёркнута рядом с новой. */
.gift-price-btn.has-old {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
}
.gift-price-btn .price-old {
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.7;
    text-decoration-thickness: 2px;
}

/* ---------- Избранное (07.10.2026) ----------
   Сердечко в левом верхнем углу карточки, как в маркете Tonnel: тёмный
   полупрозрачный кружок, в избранном — залитое красным сердце. */
.tile-fav {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.tile-fav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}
.tile-fav.on svg { fill: #f43f5e; stroke: #f43f5e; }
.tile-fav:active { transform: scale(0.9); }
@media (hover: hover) {
    .tile-fav:hover { background: rgba(15, 23, 42, 0.55); }
}
.tile-fav.pop svg { animation: heartPop 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes heartPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
/* Значки на карточке избранного: «Продан», «▼ 25 ₽», «▲ 40 ₽». */
.tile-badge {
    position: absolute;
    top: 12px;
    right: 10px;
    z-index: 2;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.tile-badge-sold { background: #475569; }
.tile-badge-down { background: #10b981; }
.tile-badge-up   { background: #f97316; }
.gift-tile.is-sold .image-container img { filter: grayscale(1) brightness(0.75); }
.gift-tile.is-sold .gift-tile-head { opacity: 0.6; }
/* Счётчик избранного на сердечке в меню. */
.nav-badge {
    position: absolute;
    top: 6px;
    right: 5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #f43f5e;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--card-bg);
}
.nav-badge[hidden] { display: none; }
.fav-wrap { padding: 0.5rem 0 1.5rem; }
.fav-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 16px;
}
.fav-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text);
}
.fav-status { margin: 2px 0 0; font-size: 0.85rem; color: var(--gray-400); }
.fav-clear {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}
.fav-clear[hidden] { display: none; }
.fav-empty {
    max-width: 380px;
    margin: 2.5rem auto;
    padding: 28px 22px;
    border-radius: 26px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    text-align: center;
    color: var(--text);
}
.fav-empty[hidden] { display: none; }
.fav-empty-ico {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #f43f5e, #fb7185);
    box-shadow: 0 10px 26px rgba(244,63,94,0.4), 0 0 0 7px rgba(244,63,94,0.12);
}
.fav-empty-ico svg { width: 30px; height: 30px; }
.fav-empty h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; }
.fav-empty p { margin: 0 0 18px; font-size: 0.92rem; line-height: 1.45; color: var(--gray-400); }

/* ---------- Плашка персональной скидки (07.10.2026) ---------- */
.discount-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 12px 10px 10px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(120deg, #f43f5e, #f97316);
    box-shadow: 0 8px 22px rgba(244,63,94,0.32);
    overflow: hidden;
    position: relative;
}
.discount-bar[hidden] { display: none; }
.discount-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,0.28), rgba(255,255,255,0));
    transform: skewX(-18deg);
    animation: barSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes barSweep {
    0%, 55% { left: -40%; }
    100%    { left: 130%; }
}
.discount-bar-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(255,255,255,0.22);
}
.discount-bar-ico svg { width: 22px; height: 22px; }
.discount-bar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.discount-bar-text b { font-size: 0.98rem; font-weight: 800; }
.discount-bar-text small { font-size: 0.78rem; opacity: 0.92; }
.discount-bar-timer {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 6px 11px;
    border-radius: 12px;
    background: rgba(0,0,0,0.2);
    font-weight: 800;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.discount-bar.is-over { background: linear-gradient(120deg, #475569, #64748b); box-shadow: none; }
.discount-bar.is-over::after { display: none; }
.discount-bar.is-over .discount-bar-timer { cursor: pointer; background: rgba(255,255,255,0.22); }

/* «Продан» — как у прежней кнопки (.btn-sold выше перебивается градиентом). */
.gift-price-btn.btn-sold,
.gift-price-btn.btn-sold:hover,
.gift-price-btn.btn-sold:active {
    background: #4b5563;
    color: #d1d5db;
    box-shadow: none;
    transform: none;
    filter: none;
    cursor: not-allowed;
}
@media (max-width: 400px) {
    .gift-tile-name { font-size: 0.88rem; }
    .gift-tile-num { font-size: 0.78rem; }
}
/* Ширина всего каталога.
   Раньше колонка упиралась в max-w-screen-2xl (1536px): на широком
   мониторе в строке всё равно стояло максимум восемь карточек, а по
   бокам оставались пустые поля. Потолок поднят и оставлен только
   затем, чтобы на сверхшироких панелях строка не превращалась в
   бесконечную ленту. */
.app-shell {
    max-width: 2560px;
}
/* Сетка карточек: сколько влезет по ширине, столько и будет — и у
   подарков, и у юзернеймов. Фиксированные брейкпоинты Tailwind
   (2 / 3 / 4 / 5 / 6 / 8 колонок) держали число карточек ступеньками
   и упирались в восемь. Минимальная ширина карточки взята такой же,
   как на nftpodarki.fun, откуда владелец принёс идею. */
/* Плашка «не удалось загрузить» с кнопкой повтора — в каталоге,
   юзернеймах и шторках. Раньше на сбое был вечный скелет или пустота. */
.load-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 16px;
    text-align: center;
    color: var(--gray-500);
    background: var(--card-bg);
    border: 1px dashed var(--border);
    border-radius: 20px;
    font-weight: 600;
}
.load-error-btn {
    min-height: 44px;
    padding: 10px 28px;
    border: none;
    cursor: pointer;
}
.sheet-status {
    padding: 24px 8px;
    text-align: center;
    color: var(--gray-400);
    font-weight: 600;
}
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
/* На узких телефонах 160px дают одну карточку в строке вместо двух —
   там порог ниже. */
@media (max-width: 400px) {
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}
/* Карусель баннеров.
   Раньше картинки сменялись внутри одной скруглённой рамки с тенью:
   рамка читалась как окно, в котором что-то мигает. Теперь баннеры
   стоят в ряд и едут вбок, соседние выглядывают по краям, а скругление
   и тень висят на самих картинках — рамки как объекта больше нет. */
.carousel-container {
    position: relative;
    width: 100%;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    /* Горизонтальный свайп забираем себе, вертикальную прокрутку
       страницы оставляем браузеру — иначе палец по баннеру блокирует
       скролл всего каталога. */
    touch-action: pan-y;
}
.carousel-slides {
    display: flex;
    gap: 16px;
    will-change: transform;
    cursor: grab;
}
.carousel-slides.dragging {
    cursor: grabbing;
}
/* Один баннер на всю ширину — так же, как на nftpodarki.fun. Соседние
   стоят вплотную за краем экрана и въезжают при свайпе. Тени нет
   намеренно: на просвете между баннерами она читалась грязной
   полосой.
   07.10.2026 баннеры-картинки заменены баннерами из разметки
   (templates/index.html, класс promo): текст чёткий на любом экране,
   градиент — цвет сайта из «Настроек», сверху настоящие рендеры
   подарков Telegram (static/banners/). Весь баннер — ссылка на профиль
   FunPay. На телефоне баннер чуть выше прежнего (16:5 вместо 1476:396):
   в 96px текст и подарки рядом не помещались. */
.carousel-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    aspect-ratio: 16 / 5;
    overflow: hidden;
    border-radius: 24px;
}
/* Широкий экран: компактная высота 185px, как у nftpodarki.fun. */
@media (min-width: 768px) {
    .carousel-slide {
        aspect-ratio: auto;
        height: 185px;
    }
}

/* ---------- Баннер ----------
   Все размеры внутри — в cqh (доля высоты баннера): на телефоне
   баннер ~112px, на ПК 185px, и всё масштабируется вместе с ним.
   Подарки прижаты к правому краю, их место задают переменные в
   разметке: --right/--top — отступ от правого/верхнего края, --h —
   высота, --r — наклон, --d — задержка покачивания. Класс wide —
   подарки, которые видны только на широком баннере (ПК). */
.promo {
    position: relative;
    display: block;
    container-type: size;
    /* Белый при любом цвете сайта: левый край баннера затемнён, и даже
       на «Золоте» белый с тенью читается лучше тёмного. */
    color: #fff;
    text-decoration: none;
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    --spot: calc(100% - 62cqh);       /* где за подарками свечение и лучи */
    background:
        radial-gradient(circle at var(--spot) 55%, rgba(255,255,255,0.26) 0, rgba(255,255,255,0) 58cqh),
        linear-gradient(var(--angle, 115deg), rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.1) 42%, rgba(0,0,0,0) 70%),
        linear-gradient(var(--angle, 115deg), var(--btn-a-hover) 0%, var(--btn-a) 55%, var(--btn-b) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
/* Узор из искр — как узоры на фонах подарков в Telegram. */
.promo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M20 8l2.2 7.8L30 18l-7.8 2.2L20 28l-2.2-7.8L10 18l7.8-2.2z' fill='white' fill-opacity='.16'/%3E%3Ccircle cx='61' cy='57' r='2.4' fill='white' fill-opacity='.2'/%3E%3Cpath d='M58 20l1.2 4 4 1.2-4 1.2-1.2 4-1.2-4-4-1.2 4-1.2z' fill='white' fill-opacity='.13'/%3E%3Ccircle cx='30' cy='64' r='1.6' fill='white' fill-opacity='.16'/%3E%3C/svg%3E");
    background-size: 40cqh 40cqh;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.35), #000 60%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.35), #000 60%);
}
/* Лучи за подарками — «приз на витрине». */
.promo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-conic-gradient(from 0deg at var(--spot) 55%,
        rgba(255,255,255,0.13) 0deg 7deg, rgba(255,255,255,0) 7deg 20deg);
    -webkit-mask-image: radial-gradient(circle at var(--spot) 55%, #000 0, transparent 75cqh);
    mask-image: radial-gradient(circle at var(--spot) 55%, #000 0, transparent 75cqh);
}
.promo-text {
    position: absolute;
    top: 50%;
    left: 12cqh;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3cqh;
    transform: translateY(-50%);
}
/* Заголовок и пилюля: на телефоне — друг под другом, на ПК — в строку. */
.promo-head {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 3cqh;
}
.promo-title {
    font-size: 24px;                  /* для браузеров без cqh */
    font-size: 25cqh;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 0.8cqh 2.6cqh rgba(0,0,0,0.22);
}
.promo-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3cqh;
    padding: 2.6cqh 6.5cqh 3cqh;
    border-radius: 999px;
    background: #fff;
    color: var(--btn-a-hover);
    font-size: 20px;
    font-size: 21cqh;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 1.6cqh 4cqh rgba(0,0,0,0.18), inset 0 -1cqh 0 rgba(0,0,0,0.06);
}
.promo-sub { display: none; }
/* Подпись — только там, где хватает высоты (ПК). Надпись «Перейти на
   FunPay» и баннер «Не грузят фото? Включи VPN» владелец убрал 07.10.2026. */
@container (min-height: 150px) {
    .promo-head { flex-direction: row; align-items: center; gap: 4cqh; }
    .promo-text { gap: 4cqh; }
    .promo-sub {
        display: block;
        margin-top: 1cqh;
        font-size: 9cqh;
        font-weight: 600;
        opacity: 0.92;
        white-space: nowrap;
    }
}
.promo-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.promo .g {
    position: absolute;
    top: var(--top, 0);
    right: var(--right, 0);
    height: var(--h, 80cqh);
    width: auto;
    max-width: none;
    transform: rotate(var(--r, 0deg));
    filter: drop-shadow(0 2.4cqh 3cqh rgba(0,0,0,0.3));
    animation: promoFloat 5.5s ease-in-out var(--d, 0s) infinite;
    -webkit-user-drag: none;
}
.promo .g.wide { display: none; }
@container (min-aspect-ratio: 5 / 1) {
    .promo .g.wide { display: block; }
}
@keyframes promoFloat {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(-3.5cqh) rotate(var(--r, 0deg)); }
}
/* ---------- Хэллоуин (09.10.2026) ----------
   Сезонный баннер со своими цветами — ночь, луна, оранжевый свет тыквы —
   при любом цвете сайта. Подарки — те же .g, что у остальных баннеров;
   места луны, мышей — в разметке (--right/--top/--s/--h, в cqh). */
.promo-halloween {
    /* Свечение тыквы — отдельный слой .hw-glow: cqh в фоне самого баннера
       считаются не от баннера, а от экрана, и пятно уезжало в середину. */
    background:
        linear-gradient(100deg, rgba(8,2,18,0.6) 0%, rgba(8,2,18,0.18) 42%, rgba(8,2,18,0) 66%),
        linear-gradient(115deg, #170629 0%, #34104f 46%, #561a6a 76%, #7a2858 100%);
    box-shadow: inset 0 0 0 1px rgba(255,180,90,0.16);
}
/* Звёзды вместо искр. */
.promo-halloween::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Ccircle cx='12' cy='14' r='1.3' fill='white' fill-opacity='.7'/%3E%3Ccircle cx='58' cy='8' r='0.9' fill='white' fill-opacity='.55'/%3E%3Ccircle cx='76' cy='42' r='1.4' fill='white' fill-opacity='.6'/%3E%3Ccircle cx='34' cy='52' r='0.8' fill='white' fill-opacity='.45'/%3E%3Ccircle cx='8' cy='78' r='1' fill='white' fill-opacity='.5'/%3E%3Cpath d='M50 70l.9 3 3 .9-3 .9-.9 3-.9-3-3-.9 3-.9z' fill='white' fill-opacity='.55'/%3E%3C/svg%3E");
    background-size: 46cqh 46cqh;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
/* Туман у земли вместо лучей. */
.promo-halloween::after {
    background: linear-gradient(0deg, rgba(214,190,255,0.2) 0%, rgba(214,190,255,0.06) 22%, rgba(214,190,255,0) 42%);
    -webkit-mask-image: none;
    mask-image: none;
}
.promo-halloween .promo-title {
    text-shadow: 0 0 4cqh rgba(255,140,40,0.55), 0 0.8cqh 2.6cqh rgba(0,0,0,0.4);
}
.promo-halloween .promo-pill {
    background: linear-gradient(180deg, #ffb24a 0%, #ff7b1c 100%);
    color: #2a0b3d;
    box-shadow: 0 0 5cqh rgba(255,122,28,0.55), 0 1.6cqh 4cqh rgba(0,0,0,0.3), inset 0 -1cqh 0 rgba(120,30,0,0.18);
}
.promo-halloween .promo-sub { color: #ffd7a8; opacity: 1; }
/* Оранжевый свет за тыквой. */
.hw-glow {
    position: absolute;
    top: var(--top, 0);
    right: var(--right, 0);
    width: var(--s, 140cqh);
    height: var(--s, 140cqh);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,128,32,0.5) 0%, rgba(255,104,20,0.18) 42%, rgba(255,104,20,0) 70%);
}
/* Самые широкие экраны (ПК от ~1200px): пустую середину баннера
   занимают ещё два подарка, мышь и паучок на нитке. */
.promo .g.xwide, .hw-bat.xwide, .hw-spider { display: none; }
@container (min-aspect-ratio: 13 / 2) {
    .promo .g.xwide, .hw-bat.xwide, .hw-spider { display: block; }
}
.hw-spider {
    position: absolute;
    top: 0;
    right: var(--right, 0);
    height: var(--h, 40cqh);
    width: auto;
    color: #12041c;
    filter: drop-shadow(0 0 0.8cqh rgba(236,200,255,0.35));
    transform-origin: 50% 0;
    animation: hwSway 3.2s ease-in-out infinite alternate;
}
@keyframes hwSway {
    from { transform: rotate(-5deg); }
    to   { transform: rotate(5deg); }
}
/* Луна: тёплый диск со свечением и парой кратеров. */
.hw-moon {
    position: absolute;
    top: var(--top, 0);
    right: var(--right, 0);
    width: var(--s, 80cqh);
    height: var(--s, 80cqh);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 62%, rgba(214,160,80,0.32) 0 7%, transparent 8%),
        radial-gradient(circle at 64% 34%, rgba(214,160,80,0.26) 0 10%, transparent 11%),
        radial-gradient(circle at 58% 74%, rgba(214,160,80,0.22) 0 5%, transparent 6%),
        radial-gradient(circle at 36% 30%, #fffbe6 0%, #ffe8a6 48%, #f4c46c 100%);
    box-shadow: 0 0 5cqh 1cqh rgba(255,222,150,0.5), 0 0 24cqh 8cqh rgba(255,186,90,0.2);
    opacity: 0.95;
}
/* Летучие мыши машут крыльями. */
.hw-bat {
    position: absolute;
    top: var(--top, 0);
    right: var(--right, 0);
    height: var(--h, 8cqh);
    width: auto;
    color: #12041c;
    filter: drop-shadow(0 0 0.8cqh rgba(236,200,255,0.3));
    transform-origin: 50% 40%;
    animation: hwFlap 0.7s ease-in-out var(--d, 0s) infinite alternate;
}
.hw-bat.wide { display: none; }
@container (min-aspect-ratio: 5 / 1) {
    .hw-bat.wide { display: block; }
}
@keyframes hwFlap {
    from { transform: translateY(0) scaleY(1); }
    to   { transform: translateY(-1.5cqh) scaleY(0.55); }
}
/* Паутина в левом верхнем углу — тонкая, под текстом не мешает. */
.hw-web {
    position: absolute;
    top: -2cqh;
    left: -2cqh;
    height: 42cqh;
    width: 42cqh;
    color: rgba(255,255,255,0.2);
}

/* Крупная полупрозрачная иконка за подарками: молния, щит. */
.promo-icon {
    position: absolute;
    top: var(--top, 0);
    right: var(--right, 0);
    height: var(--h, 120cqh);
    width: auto;
    color: #fff;
    opacity: 0.16;
    transform: rotate(var(--r, 0deg));
}
@media (max-width: 640px) {
    .carousel-slides {
        gap: 12px;
    }
    /* На телефоне баннер занимает всю ширину, поэтому крупное
       скругление выглядит тяжело. */
    .carousel-slide {
        border-radius: 18px;
    }
    /* Телефон: «коллекцию» во всю ширину, «модель» и «фон» — пополам
       под ней (раньше три кнопки стояли столбиком). id в селекторе —
       чтобы перебить класс flex от Tailwind, он подключён позже. */
    #filterPanel .filter-chips-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #filterCollectionBtn { grid-column: 1 / -1; }
}
.help-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3); padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; transition: transform 0.2s, box-shadow 0.2s; color: var(--text); }
.help-card:hover { transform: translateY(-2px); box-shadow: 0 15px 30px -8px rgba(0,0,0,0.5); }
.help-icon-num { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; color: var(--on-accent); flex-shrink: 0; box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.4); }
.help-icon-num svg { width: 22px; height: 22px; }
/* Заголовки блоков «Подарки / Юзернеймы / Безопасность» в помощи:
   короткая фирменная черта слева, как у заставки. */
.help-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 0.75rem;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
}
.help-group-title::before {
    content: '';
    width: 4px;
    height: 1.3rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent-end), var(--accent-second));
}
.btn-secondary { background: var(--border); color: var(--text); font-weight: 600; border: 1px solid var(--gray-400); border-radius: 9999px; transition: background 0.2s; }

/* Кнопка «Очистить» в шторке фильтров. Класс sheet-btn-clear был
   в разметке, но стилей для него не существовало — получалось
   просто висящее в воздухе слово без рамки и фона. */
.sheet-btn-clear {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 9999px;
    min-height: 44px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.sheet-btn-clear:hover {
    border-color: var(--accent-text);
    color: var(--accent-text);
    background: rgba(var(--accent-rgb),0.07);
}
.sheet-btn-clear:active { transform: scale(0.98); }

/* Крестик закрытия шторки — тоже был без стилей. */
.closeModalBtn {
    background: transparent;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.closeModalBtn:hover { background: var(--border); color: var(--text); }

/* Список выбора в шторке.
   Раньше строки лежали прямо на фоне шторки, а он совпадает с фоном
   карточек — на телефоне это выглядело как список, висящий на пустом
   белом (в тёмной теме — чёрном) экране, без границ и без понятного
   места, где его можно листать. Теперь список лежит в отдельной
   скруглённой панели со своей подложкой, а справа идёт полоса
   прокрутки с круглым бегунком. */
.sheet-list-wrap {
    position: relative;
    /* 08.10.2026: список занимает всё свободное место шторки (flex),
       а не фиксированные 46vh. */
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--sheet-inset-bg);
    border: 1px solid var(--sheet-inset-border);
    border-radius: 22px;
    padding: 10px 38px 10px 10px;   /* справа — место под капсулу прокрутки */
    overflow: hidden;            /* чтобы строки не вылезали за скругление */
}
.sheet-list {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Родную полосу убираем: на iOS её нельзя показать постоянно,
       поэтому рисуем свою — она видна во всех браузерах одинаково. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sheet-list::-webkit-scrollbar { width: 0; height: 0; }
/* Полоса прокрутки — капсула с овальным бегунком внутри (02.10.2026, по
   просьбе владельца; сперва был кружок 12px — владелец счёл его слишком
   маленьким). Бегунок тянется пальцем/мышью, нажатие по капсуле
   переносит его в это место (app.js, updateSheetScrollbar). Отступ
   бегунка от краёв — 3px, он же SHEET_KNOB_PAD в app.js. */
.sheet-scrollbar {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 8px;
    width: 22px;
    border-radius: 9999px;
    background: var(--sheet-track);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    cursor: pointer;
    touch-action: none;          /* жест по капсуле не листает страницу */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.sheet-scrollbar.visible { opacity: 1; pointer-events: auto; }
/* Зона касания шире самой капсулы — в 22px пальцем попасть трудно.
   Влево не дальше края строк, чтобы не перехватывать выбор строки. */
.sheet-scrollbar::before {
    content: '';
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -6px;
    right: -8px;
}
/* Пролистанная часть подсвечена — от верха капсулы до бегунка. */
.sheet-scrollbar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--fill, 0px);
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(var(--accent2-rgb),0.08), rgba(var(--accent-rgb),0.32));
    pointer-events: none;
}
.sheet-scrollbar-thumb {
    position: absolute;
    z-index: 1;                  /* поверх подсветки ::after */
    top: 3px;
    left: 3px;
    width: 16px;
    height: 48px;
    border-radius: 9999px;
    background: radial-gradient(ellipse at 35% 22%, var(--accent-pale) 0%, var(--accent-start) 34%, var(--accent-end) 70%, var(--accent-deep) 100%);
    box-shadow: 0 1px 3px rgba(var(--accent-hover-rgb),0.5), 0 0 10px rgba(var(--accent2-rgb),0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: grab;
}
@media (hover: hover) {
    .sheet-scrollbar:hover .sheet-scrollbar-thumb { transform: scale(1.08); }
}
.sheet-scrollbar.dragging .sheet-scrollbar-thumb {
    transform: scale(1.12);
    cursor: grabbing;
    box-shadow: 0 0 0 4px rgba(var(--accent2-rgb),0.22), 0 0 12px rgba(var(--accent2-rgb),0.7);
}

/* Плитки шторки (08.10.2026): картинка, название, цена; выбранная — с
   голубой рамкой и галочкой в углу. Радиокнопка внутри скрыта, но
   остаётся рабочей (клавиатура, «Применить»). */
.sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
@media (min-width: 768px) { .sh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 340px) { .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-grid > .sheet-status, .sh-grid > .load-error, .sh-empty { grid-column: 1 / -1; }
.sh-empty { padding: 28px 8px; text-align: center; color: var(--gray-400); font-weight: 600; }
.sh-tile {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 8px 11px;
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: inset 0 0 0 1.5px var(--border);
    cursor: pointer; text-align: center;
    transition: box-shadow 0.15s, background 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.sh-tile[hidden] { display: none; }
.sh-tile:active { transform: scale(0.97); }
@media (hover: hover) { .sh-tile:hover { box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), 0.55); } }
.sh-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sh-tile:has(.sh-radio:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sh-tile:has(.sh-radio:checked) {
    background: rgba(var(--accent-rgb), 0.12);
    box-shadow: inset 0 0 0 2px var(--accent-end), 0 8px 20px -10px rgba(var(--accent-rgb), 0.7);
}
.sh-check {
    position: absolute; top: 7px; right: 7px; z-index: 1;
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--on-accent);
    box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.5);
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.15s, transform 0.15s;
}
.sh-check svg { width: 13px; height: 13px; }
.sh-tile:has(.sh-radio:checked) .sh-check { opacity: 1; transform: scale(1); }
.sh-media {
    position: relative; width: 100%; max-width: 76px; aspect-ratio: 1 / 1; border-radius: 14px;
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0) 68%);
}
.sh-media img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)); }
/* Фон — плашка с градиентом самого фона и бликом сверху. */
.sh-swatch { max-width: none; aspect-ratio: auto; height: 58px; border-radius: 13px;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18), 0 6px 14px -8px rgba(0, 0, 0, 0.6); overflow: hidden; }
.sh-swatch::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)); }
.sh-name {
    width: 100%; font-size: 0.86rem; font-weight: 800; line-height: 1.15; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    /* Слова не рвём посередине («Cappuccin / o») — длинное слово app.js
       ужимает шрифтом (fitSheetNames). */
    overflow-wrap: normal; word-break: normal;
}
.sh-price { font-size: 0.8rem; font-weight: 800; color: var(--accent-text); white-space: nowrap; }
/* Невысокие телефоны (iPhone SE, 360×640): шапка, поиск и картинки
   компактнее — в список влезает 9 плиток, а не 6. */
@media (max-width: 767px) and (max-height: 700px) {
    .sh-top { height: 20px; }
    .sh-head { padding-bottom: 8px; }
    .sh-title { font-size: 1.1rem; }
    .sh-search { margin-bottom: 8px; }
    .sh-search input { height: 40px; }
    .sh-grid { gap: 8px; }
    .sh-tile { padding: 8px 6px 9px; gap: 4px; border-radius: 16px; }
    .sh-media { max-width: 54px; }
    .sh-swatch { height: 44px; }
    .sh-foot { padding-top: 10px; }
    .sh-btn { min-height: 44px; }
}
.btn-secondary:hover { background: var(--gray-400); }
.color-preview { width: 48px; height: 48px; border-radius: 16px; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--gray-400); }
.skeleton { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 24px; }
/* ===== Карточка подарка (переделана 07.10.2026) =====
   Телефон: лист снизу с ручкой, большое фото, табличка характеристик,
   цена и «Купить» закреплены внизу листа. От 768 px — окно по центру,
   от 900 px — фото слева, характеристики справа. Слой 2500: выше плашки
   cookie (2000) — раньше она закрывала кнопки, ниже окон openDialog (4000). */
.detail-sheet-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2500;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(2, 6, 23, 0.58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
    overscroll-behavior: contain;
}
.detail-sheet-overlay.active { opacity: 1; visibility: visible; }
.detail-sheet {
    position: relative;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--sheet-bg);
    color: var(--text);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
    padding: 0 16px;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    outline: none;
}
.detail-sheet.active { transform: translateY(0); }
.gd-top { height: 40px; display: flex; align-items: center; justify-content: center; }
.gd-handle { width: 40px; height: 5px; border-radius: 99px; background: var(--border); }
.gd-close {
    position: absolute; top: 6px; right: 10px; z-index: 4;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    border: 0; cursor: pointer;
    background: rgba(148, 163, 184, 0.16);
    color: var(--gray-400);
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.gd-close svg { width: 18px; height: 18px; }
.gd-close:hover { background: rgba(148, 163, 184, 0.28); color: var(--text); }
.gd-close:active { transform: scale(0.92); }
.gd-close:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Фото: квадрат держится отступом ::before, а не aspect-ratio — тот на
   iPhone до iOS 15 не работает, и квадрат схлопнулся бы в ноль. */
.gd-media { position: relative; display: flex; justify-content: center; }
.gd-glow {
    position: absolute; left: 18%; right: 18%; top: 18%; bottom: 4%;
    border-radius: 50%;
    background: var(--gd-edge, rgb(var(--accent-rgb)));
    filter: blur(44px); opacity: 0.5;
    pointer-events: none;
}
.gd-frame {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-width: min(400px, 44vh);
    max-width: min(400px, 44dvh);
    border-radius: 24px;
    overflow: hidden;
    background: var(--skeleton-base);
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.55);
    transform: translateZ(0);
}
.gd-frame::before { content: ''; display: block; padding-top: 100%; }
/* Пока ничего не загрузилось — перелив поверх цвета фона подарка. */
.gd-frame::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 70%);
    background-size: 220% 100%;
    animation: shimmer 1.4s infinite;
    pointer-events: none;
}
.gd-frame.has-thumb::after, .gd-frame.photo-ready::after { display: none; }
.gd-frame > img, .gd-lottie {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.gd-photo { opacity: 0; transition: opacity 0.25s ease; }
.gd-frame.photo-ready .gd-photo { opacity: 1; }
.gd-lottie { opacity: 0; transition: opacity 0.35s ease; }
.gd-frame.lottie-ready .gd-lottie { opacity: 1; }
.gd-frame .tile-fav { z-index: 3; top: 12px; left: 12px; }

.gd-body { padding-top: 14px; }
.gd-title {
    margin: 0 0 12px;
    text-align: center;
    font-size: 1.35rem; line-height: 1.2; font-weight: 900;
    color: var(--text);
    overflow-wrap: anywhere;
}
.gd-num { color: var(--gray-400); font-weight: 800; }

/* Характеристики — табличкой, как в Telegram: подпись, значение,
   редкость. Строка нажимается — каталог с таким же признаком. */
.gd-attrs {
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(var(--accent-rgb), 0.05);
}
.gd-attr {
    width: 100%;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px 12px 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.gd-attr:last-child { border-bottom: 0; }
.gd-attr:disabled { cursor: default; }
.gd-attr:not(:disabled):active { background: rgba(var(--accent-rgb), 0.12); }
@media (hover: hover) {
    .gd-attr:not(:disabled):hover { background: rgba(var(--accent-rgb), 0.08); }
}
.gd-attr:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.gd-attr-label { color: var(--gray-400); font-size: 0.9rem; font-weight: 600; }
.gd-attr-value { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 800; }
.gd-attr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-swatch {
    flex: none; width: 18px; height: 18px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.gd-rarity {
    padding: 3px 9px; border-radius: 99px;
    font-size: 0.78rem; font-weight: 800; white-space: nowrap;
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--accent-text);
}
.gd-chev { width: 16px; height: 16px; color: var(--gray-400); }
.gd-hint { margin: 8px 0 0; text-align: center; font-size: 0.78rem; color: var(--gray-400); }

/* Цена и «Купить» — прилипают к низу листа, видны без прокрутки. */
.gd-footer {
    position: -webkit-sticky; position: sticky; bottom: 0; z-index: 2;
    display: flex; align-items: center; gap: 14px;
    margin: 12px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--sheet-bg);
    border-top: 1px solid var(--border);
}
.gd-price { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.gd-price-old { font-size: 0.85rem; color: var(--gray-400); }
.gd-price-now {
    font-size: 1.55rem; font-weight: 900; white-space: nowrap;
    background: linear-gradient(90deg, var(--accent-text), var(--accent-soft));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-text);
}
.gd-auto { margin-top: 4px; font-size: 0.74rem; font-weight: 600; color: var(--gray-400); white-space: nowrap; }
.gd-buy {
    flex: 1; min-width: 0; height: 54px;
    border: 0; border-radius: 18px; cursor: pointer;
    font: inherit; font-size: 1.08rem; font-weight: 800;
    color: var(--on-accent);
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb), 0.7);
    transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.gd-buy:active { transform: scale(0.98); }
@media (hover: hover) { .gd-buy:hover { filter: brightness(1.06); } }
.gd-buy:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.gd-buy.btn-sold, .gd-buy.btn-sold:hover, .gd-buy.btn-sold:active {
    background: #4b5563; color: #d1d5db; box-shadow: none; transform: none; filter: none; cursor: default;
}

/* Невысокие телефоны (iPhone SE и т. п.): фото меньше, подсказку прячем —
   «Купить» остаётся на экране без прокрутки. */
@media (max-height: 700px) {
    .gd-frame { max-width: min(400px, 40vh); max-width: min(400px, 40dvh); }
    .gd-hint { display: none; }
    .gd-attr { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
    .gd-title { margin-bottom: 10px; font-size: 1.22rem; }
}

/* Планшет и компьютер: окно по центру. */
@media (min-width: 768px) {
    .detail-sheet-overlay { align-items: center; padding: 24px; }
    .detail-sheet {
        width: 100%; max-width: 440px;
        max-height: 90vh; max-height: 90dvh;
        border-radius: 26px;
        padding: 0 20px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
        transform: translateY(16px) scale(0.97);
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
    }
    .detail-sheet.active { transform: none; opacity: 1; }
    .gd-top { height: 52px; }
    .gd-handle { display: none; }
    .gd-close { top: 10px; right: 12px; }
    .gd-footer { margin: 14px -20px 0; padding: 14px 20px 18px; }
}
/* Широкий экран: фото слева, характеристики и покупка справа. */
@media (min-width: 900px) and (min-height: 560px) {
    .detail-sheet {
        max-width: 820px;
        display: grid;
        grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
        column-gap: 28px;
        align-items: stretch;
        padding: 28px;
    }
    .gd-top { display: none; }
    .gd-close { top: 14px; right: 14px; }
    .gd-media { align-self: center; }
    .gd-frame { max-width: 360px; }
    .gd-body { display: flex; flex-direction: column; padding-top: 6px; min-width: 0; }
    .gd-title { text-align: left; font-size: 1.6rem; margin: 0 44px 16px 0; }
    .gd-hint { text-align: left; }
    .gd-footer {
        position: static;
        margin: auto 0 0;
        padding: 18px 0 0;
        background: transparent;
    }
}
.overflow-hidden { overflow: hidden; }
/* Меню — плавающий овал с иконками (07.10.2026, просьба владельца).
   Раньше это была полоса во всю ширину с подписями под иконками.
   Теперь овал висит над краем экрана, сквозь него слегка видна
   страница (полупрозрачный фон + размытие), подписей нет — они
   остались в aria-label/title кнопок.
   Активный раздел отмечает голубой кружок .nav-indicator: он один
   на всё меню и переезжает под нужную иконку (app.js, setActiveNav).
   Пока скрипт его не поставил, активная иконка просто голубая —
   белой она становится только поверх кружка (правило с «~» ниже).
   При прокрутке вниз скрипт ставит .compact — овал чуть уменьшается
   и меньше заслоняет карточки; при прокрутке вверх возвращается. */
:root {
    --nav-bg: rgba(30, 41, 59, 0.78);
    --nav-border: rgba(148, 163, 184, 0.2);
    --nav-hover: rgba(148, 163, 184, 0.14);
    --nav-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
}
html.light-theme {
    --nav-bg: rgba(255, 255, 255, 0.82);
    --nav-border: rgba(15, 23, 42, 0.09);
    --nav-hover: rgba(15, 23, 42, 0.06);
    --nav-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06);
}
.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: var(--nav-bg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow);
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bottom-nav.compact {
    transform: translateX(-50%) translateY(4px) scale(0.84);
}
.nav-btn {
    position: relative;
    z-index: 1;                  /* поверх кружка .nav-indicator */
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.15s ease;
}
.nav-btn svg { width: 24px; height: 24px; display: block; }
#themeIcon { display: flex; }
.nav-btn:active { transform: scale(0.9); }
.nav-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.nav-btn.active { color: var(--accent-text); }
.nav-indicator.ready ~ .nav-btn.active { color: var(--on-accent); }
/* Подсветка при наведении — только там, где есть мышь: на телефоне
   :hover «залипает» на последней нажатой иконке. Сжатый овал под
   курсором разворачивается обратно. */
@media (hover: hover) {
    .nav-btn:not(.active):hover { color: var(--text); background: var(--nav-hover); }
    .bottom-nav.compact:hover { transform: translateX(-50%); }
}
.nav-indicator {
    position: absolute;
    top: 6px;
    left: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.45);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}
.nav-indicator.ready { opacity: 1; }
/* Шестерёнка «Настроек» доворачивается, когда раздел открыт. */
#navSettings svg { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
#navSettings.active svg { transform: rotate(90deg); }

/* ================= НАСТРОЙКИ (07.10.2026) =================
   Раздел за шестерёнкой в меню: тема и цвет сайта. Повторяет блок
   «Оформление» трекера на nftplayerok.fun — владелец попросил «прям
   как там»: превью, переключатель темы капсулой, круглые образцы
   цвета с кольцом вокруг выбранного. 07.10.2026 «Свой» цвет убран,
   вместо него ещё два готовых — 10 кружков, два ряда по 5.
   Сами цвета считает и применяет скрипт в <head> templates/index.html
   (window.EdayTheme), кнопки раздела оживляет app.js. */
.settings-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 2rem 0;
}
.settings-card {
    margin-top: 0.9rem;
    padding: 1.25rem;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
    color: var(--text);
}
/* Превью собрано из настоящих классов сайта (.filter-chip, .gift-price-btn)
   — значит, показывает ровно то, что будет на витрине. */
.settings-preview {
    padding: 16px;
    border-radius: 20px;
    background: var(--sheet-inset-bg);
    border: 1px solid var(--border);
}
.settings-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    font-weight: 700;
}
.settings-preview-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.settings-preview-row .filter-chip,
.settings-preview-row .gift-price-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    pointer-events: none;
}
.settings-label {
    margin: 20px 2px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gray-400);
}
.seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--sheet-inset-bg);
    border: 1px solid var(--border);
}
.seg button {
    min-height: 44px;
    padding: 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--gray-400);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.seg button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.seg button.on {
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    color: var(--on-accent);
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.4);
}
.seg button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px 8px;
}
.sw {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gray-400);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sw.on { color: var(--text); }
.sw-dot {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px var(--border);
    transition: box-shadow 0.15s, transform 0.1s;
}
.sw.on .sw-dot { box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--btn-a); }
.sw:active .sw-dot { transform: scale(0.92); }
.sw-dot svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.sw .sw-check { display: none; }
.sw.on .sw-check { display: block; }
.sw:focus-visible .sw-dot { outline: 2px solid var(--accent-text); outline-offset: 4px; }
/* Фон: плитка-превью «страница + карточка + рамка» и название под ней.
   Цвета превью ставит app.js — для текущей темы (тёмной или светлой). */
.bgs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.bg-opt {
    padding: 8px 6px 9px;
    border: 1.5px solid var(--border);
    border-radius: 18px;
    background: var(--sheet-inset-bg);
    color: var(--gray-400);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.bg-opt.on {
    border-color: var(--btn-a);
    color: var(--text);
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
}
.bg-opt:active { transform: scale(0.96); }
.bg-opt:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.bg-prev {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    margin-bottom: 7px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(128, 128, 128, 0.25);
}
.bg-prev i { flex: 1; height: 14px; border-radius: 5px; }
.settings-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--gray-400);
}
.settings-foot .sheet-btn-clear {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.85rem;
    font-weight: 600;
}
@media (max-width: 380px) {
    .sw-dot { width: 42px; height: 42px; }
    .settings-card { padding: 1rem; }
}
/* ================= ОКНА САЙТА (07.10.2026) =================
   Все всплывающие окна в одном стиле (app.js, openDialog): затемнение с
   размытием, карточка выезжает снизу и чуть увеличивается, в шапке —
   иконка в светящемся круге цвета сайта, ниже заголовок, текст и кнопки.
   tone-success / tone-danger / tone-muted — зелёный, красный, серый круг. */
.ui-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.ui-dialog-overlay.show { opacity: 1; }
.ui-dialog {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 28px 22px 20px;
    border-radius: 26px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    color: var(--text);
    text-align: center;
    transform: translateY(18px) scale(0.96);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ui-dialog-overlay.show .ui-dialog { transform: none; }
.ui-dialog-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    border-radius: 50%;
    color: var(--on-accent);
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.45), 0 0 0 7px rgba(var(--accent-rgb), 0.12);
}
.ui-dialog-icon svg { width: 32px; height: 32px; }
.ui-dialog-icon.tone-success { color: #fff; background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 10px 26px rgba(16,185,129,0.45), 0 0 0 7px rgba(16,185,129,0.14); }
.ui-dialog-icon.tone-danger  { color: #fff; background: linear-gradient(135deg, #ef4444, #f87171); box-shadow: 0 10px 26px rgba(239,68,68,0.4), 0 0 0 7px rgba(239,68,68,0.12); }
.ui-dialog-icon.tone-muted   { color: #fff; background: linear-gradient(135deg, #475569, #64748b); box-shadow: 0 10px 26px rgba(15,23,42,0.35), 0 0 0 7px rgba(100,116,139,0.14); }
/* Идёт работа: вокруг круга бежит светящаяся дуга. */
.ui-dialog-icon.is-busy::after {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(var(--accent-rgb), 0) 0deg 220deg, var(--accent-end) 320deg, var(--accent-start) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    animation: spin 1.1s linear infinite;
}
.ui-dialog-title {
    margin: 0 0 6px;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.ui-dialog-text {
    margin: 0 auto;
    max-width: 300px;
    font-size: 0.93rem;
    line-height: 1.45;
    color: var(--gray-400);
}
.ui-dialog-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 0;
    font-weight: 800;
    font-size: 0.98rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.ui-btn:active { transform: scale(0.97); }
.ui-btn-primary {
    color: var(--on-accent);
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.38);
}
.ui-btn-ghost {
    color: var(--text);
    background: var(--sheet-inset-bg);
    border: 1px solid var(--border);
    font-weight: 700;
}
@media (hover: hover) {
    .ui-btn-primary:hover { box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.5); }
    .ui-btn-ghost:hover { background: var(--border); }
}
.ui-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
/* Шаги покупки: «Проверяем наличие → Создаём лот → Открываем оплату». */
.ui-steps {
    display: grid;
    gap: 8px;
    margin: 18px 0 2px;
    padding: 12px 14px;
    list-style: none;
    text-align: left;
    border-radius: 16px;
    background: var(--sheet-inset-bg);
    border: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--gray-400);
}
.ui-steps li { display: flex; align-items: center; gap: 10px; }
.ui-steps li.active { color: var(--text); font-weight: 700; }
.ui-steps li.done { color: var(--text); }
.ui-step-dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    box-sizing: border-box;
}
.ui-steps li.active .ui-step-dot {
    border-color: var(--accent-end);
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}
.ui-steps li.done .ui-step-dot {
    border: 0;
    background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* Короткое уведомление над меню-овалом. */
.ui-toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    z-index: 3500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 12px;
    border-radius: 999px;
    background: var(--nav-bg, rgba(30,41,59,0.9));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--nav-border, rgba(148,163,184,0.2));
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    color: var(--text);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity 0.2s, transform 0.25s;
}
.ui-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ui-toast-ico { display: grid; place-items: center; width: 22px; height: 22px; color: #f43f5e; }
.ui-toast-ico svg { width: 18px; height: 18px; }
.spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}
.spinner div {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--border);
    border-top-color: var(--accent-text);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: calc(100% - 2rem);
    max-width: 1200px;
    z-index: 2000;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    padding: 0 1rem 1rem;
}
.cookie-consent-banner.show {
    transform: translateX(-50%) translateY(0);
}
.cookie-consent-banner.hidden {
    display: none !important;
}
/* Плашка cookie в стиле окон сайта (07.10.2026): иконка в круге и те же
   кнопки .ui-btn, что в окнах. */
.cookie-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cookie-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--on-accent);
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
}
.cookie-ico svg { width: 22px; height: 22px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-actions .ui-btn { min-height: 42px; padding: 8px 16px; font-size: 0.9rem; }
.cookie-actions .ui-btn-primary { flex: 1 1 100%; }
.cookie-actions .ui-btn-ghost { flex: 1 1 0; white-space: nowrap; }
@media (min-width: 641px) {
    .cookie-actions .ui-btn-primary { flex: 0 0 auto; }
}
.cookie-banner-content {
    background: var(--card-bg);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 1.25rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    color: var(--text);
}
@media (min-width: 768px) {
    .cookie-consent-banner {
        bottom: 1rem;
        width: calc(100% - 2rem);
        padding: 0;
    }
    .cookie-banner-content {
        border-radius: 24px;
    }
}

/* ================= ЭКРАН ЗАГРУЗКИ =================
   07.10.2026 (просьба владельца «покрасивее»): в центре Plush Pepe,
   вокруг световое кольцо цвета сайта и три подарка на орбите, ниже
   логотип, подпись и полоска с бегущим бликом. Никаких частиц на
   canvas и никаких эмодзи. Анимируются только opacity и transform,
   поэтому всё считает видеокарта.                                  */

#splashScreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.55s ease, visibility 0.55s;
}
/* Отдельный класс, а не .hidden: у Tailwind .hidden — это
   display:none, он подключается позже и обрывал плавное исчезновение. */
#splashScreen.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Одно мягкое пятно света за логотипом — вся «графика» экрана */
#splashScreen::before {
    content: '';
    position: absolute;
    width: 68vmin;
    height: 68vmin;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(var(--accent2-rgb),0.28) 0%,
        rgba(var(--accent-second-rgb),0.14) 45%,
        transparent 70%);
    filter: blur(46px);
    animation: glowBreath 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes glowBreath {
    0%, 100% { transform: scale(1);    opacity: 0.75; }
    50%      { transform: scale(1.12); opacity: 1; }
}

.splash-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
}

/* Орбита: кольцо, крутящаяся дуга, три подарка по кругу, Пепе в центре. */
.splash-orbit {
    position: relative;
    width: 210px;
    height: 210px;
    margin: 0 auto 1.4rem;
    animation: orbitIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
@keyframes orbitIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.splash-glow {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent2-rgb), 0.55), rgba(var(--accent-rgb), 0) 70%);
    filter: blur(14px);
    animation: glowBreath 3.2s ease-in-out infinite;
}
.splash-ring {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--accent2-rgb), 0.22);
}
/* Светящаяся дуга бежит по кольцу — сразу видно, что идёт загрузка. */
.splash-ring--spin {
    border: 0;
    background: conic-gradient(from 0deg, rgba(var(--accent-rgb), 0) 0deg,
        rgba(var(--accent-rgb), 0) 200deg, var(--accent-end) 320deg, var(--accent-start) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    filter: drop-shadow(0 0 6px rgba(var(--accent2-rgb), 0.8));
    animation: spin 1.4s linear infinite;
}
.splash-sats {
    position: absolute;
    inset: 0;
    animation: spin 16s linear infinite;
}
.splash-sat {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    transform: rotate(var(--a)) translateX(91px) rotate(calc(-1 * var(--a)));
}
/* Подарок крутится обратно вместе с орбитой — и потому всегда стоит ровно. */
.splash-sat img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
    animation: spin 16s linear infinite reverse;
}
.splash-hero {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 104px;
    height: auto;
    margin: -55px 0 0 -52px;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.4));
    animation: heroFloat 2.6s ease-in-out infinite;
}
@keyframes heroFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-7px) rotate(2deg); }
}

.splash-logo {
    font-size: clamp(2.6rem, 9vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    background: linear-gradient(100deg,
        var(--accent-end) 0%, var(--accent-start) 25%, var(--accent-second) 50%, var(--accent-start) 75%, var(--accent-end) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: logoSweep 3.4s linear infinite, fadeInUp 0.7s ease backwards 0.1s;
    margin-bottom: 0.6rem;
}
@keyframes logoSweep {
    from { background-position: 0 0; }
    to   { background-position: -250% 0; }
}
.splash-tagline {
    font-size: clamp(0.9rem, 3.4vw, 1.05rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--gray-500);
    margin-bottom: 2.3rem;
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards 0.28s;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Полоска загрузки. Была 240×3px — владелец жаловался, что её почти
   не видно; теперь толще, шире и с лёгким свечением заливки. */
.progress-container {
    width: 300px;
    max-width: 78vw;
    margin: 0 auto;
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards 0.42s;
}
.progress-bar-bg {
    width: 100%;
    height: 10px;
    padding: 2px;
    box-sizing: border-box;
    background: var(--border);
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}
.progress-bar-fill {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-end), var(--accent-start), var(--accent-second));
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(var(--accent2-rgb),0.55);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Блик бежит по заполненной части. */
.progress-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-100%);
    animation: barShine 1.3s ease-in-out infinite;
}
@keyframes barShine {
    to { transform: translateX(100%); }
}

.progress-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-text);
    margin-top: 0.55rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}