/* ============================================================
   LEVEL UP STORE — дизайн-система мини-аппа (liquid glass, light/dark)
   Бренд: Level Indigo #5946FF · Coral #FF6B73 · Ice Blue #65D9FF · Purple #9B5CFF
   Темы: html[data-theme=light|dark], акцент: html[data-accent=…]
   ============================================================ */
:root {
  --font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Unbounded", "Source Sans 3", system-ui, sans-serif;

  --primary: #5946FF; --primary-2: #8E6BFF; --primary-rgb: 89, 70, 255; --primary-600: #4A37F0; --on-primary: #fff;
  --grad-btn: linear-gradient(95deg, #5946FF 0%, #7B4DFF 45%, #B45CFF 78%, #FF7A9A 110%);
  --grad-text: linear-gradient(95deg, #3D6BFF 0%, #6A4BFF 35%, #B04DFF 65%, #FF6B8A 100%);
  --grad-brand: linear-gradient(100deg, #3D5AFE 0%, #5946FF 28%, #9B5CFF 62%, #FF6B73 100%);

  --violet: #9B5CFF; --coral: #FF6B73; --cyan: #65D9FF; --blue: #3D7BFF; --pink: #FF5FA2;
  --green: #18B26B; --amber: #F5A524; --danger: #FF4D5E;

  --bg: #F4F5FB; --bg-2: #FFFFFF;
  --surface: rgba(255, 255, 255, .74); --surface-solid: #FFFFFF; --surface-2: rgba(255, 255, 255, .5); --surface-3: rgba(21, 22, 42, .045);
  --ink: #15162A; --ink-2: #3B3D55; --muted: #767A95; --muted-2: #A3A6BD;
  --line: rgba(21, 22, 42, .07); --line-2: rgba(21, 22, 42, .12);
  --glass-border: rgba(255, 255, 255, .92); --glass-hl: rgba(255, 255, 255, .85);
  --field-bg: rgba(255, 255, 255, .85); --bubble-them: #FFFFFF; --code-bg: #15162A; --code-ink: #E9E8FF;
  --shadow-sm: 0 2px 10px rgba(50, 40, 150, .07);
  --shadow: 0 12px 34px rgba(60, 45, 190, .10), 0 2px 6px rgba(60, 45, 190, .05);
  --shadow-lg: 0 26px 70px rgba(60, 45, 190, .22);
  --shadow-btn: 0 10px 26px rgba(var(--primary-rgb), .34);
  --blob-op: .6; --wave-op: .7; --media-bg: linear-gradient(140deg, #F1EEFF 0%, #EAF3FF 55%, #FFEEF4 100%);
  --skel-a: rgba(21, 22, 42, .05); --skel-b: rgba(21, 22, 42, .1);
  --tab-h: 66px; --safe-b: env(safe-area-inset-bottom, 0px); --maxw: 560px;
  --r-sm: 12px; --r: 18px; --r-lg: 24px; --r-xl: 30px;
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.4, .64, 1);
  color-scheme: light;
}
html[data-theme="dark"] {
  --primary: #8577FF; --primary-2: #B29DFF; --primary-rgb: 133, 119, 255; --primary-600: #9C8FFF;
  --grad-text: linear-gradient(95deg, #7FA0FF 0%, #A08BFF 35%, #D18BFF 65%, #FF8DA8 100%);
  --bg: #0C0D19; --bg-2: #15172A;
  --surface: rgba(30, 32, 58, .62); --surface-solid: #1A1C32; --surface-2: rgba(255, 255, 255, .05); --surface-3: rgba(255, 255, 255, .07);
  --ink: #F2F3FA; --ink-2: #C6C8DE; --muted: #8E92AF; --muted-2: #5E6284;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  --glass-border: rgba(255, 255, 255, .11); --glass-hl: rgba(255, 255, 255, .16);
  --field-bg: rgba(255, 255, 255, .06); --bubble-them: #22243F; --code-bg: #06070F; --code-ink: #E9E8FF;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .3);
  --shadow: 0 12px 34px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .25);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, .6);
  --shadow-btn: 0 10px 26px rgba(var(--primary-rgb), .3);
  --blob-op: .42; --wave-op: .15; --media-bg: linear-gradient(140deg, #23254A 0%, #1C2440 55%, #2B1E3C 100%);
  --skel-a: rgba(255, 255, 255, .06); --skel-b: rgba(255, 255, 255, .12);
  --green: #34D399; --amber: #FFC14D; --danger: #FF6B78;
  color-scheme: dark;
}
html[data-accent="violet"] { --primary: #9B5CFF; --primary-2: #C49BFF; --primary-rgb: 155, 92, 255; --primary-600: #8A48F0; --grad-btn: linear-gradient(95deg, #8A48F5 0%, #B45CFF 55%, #FF6FB1 110%); --grad-text: linear-gradient(95deg, #7A4DFF, #C25CFF 60%, #FF6B8A); }
html[data-accent="coral"] { --primary: #FF5F6D; --primary-2: #FF9A7A; --primary-rgb: 255, 95, 109; --primary-600: #F0455A; --grad-btn: linear-gradient(95deg, #FF4F67 0%, #FF7A6B 55%, #FFB24D 110%); --grad-text: linear-gradient(95deg, #FF4F67, #FF8E53 60%, #FFC14D); }
html[data-accent="cyan"] { --primary: #1F9BE8; --primary-2: #65D9FF; --primary-rgb: 31, 155, 232; --primary-600: #1B86CC; --grad-btn: linear-gradient(95deg, #2F8DFF 0%, #38C6FF 60%, #7CF0D8 110%); --grad-text: linear-gradient(95deg, #2F6BFF, #22B8FF 60%, #4FE3C4); }
html[data-accent="pink"] { --primary: #F0479B; --primary-2: #FF8ACB; --primary-rgb: 240, 71, 155; --primary-600: #DB3689; --grad-btn: linear-gradient(95deg, #F0479B 0%, #C94DFF 60%, #7B6CFF 110%); --grad-text: linear-gradient(95deg, #F0479B, #B04DFF 60%, #5946FF); }
html[data-accent="green"] { --primary: #12B76A; --primary-2: #5BE89A; --primary-rgb: 18, 183, 106; --primary-600: #0F9E5B; --grad-btn: linear-gradient(95deg, #12B76A 0%, #2DD08A 55%, #65D9FF 110%); --grad-text: linear-gradient(95deg, #12B76A, #22C7A6 60%, #38B6FF); }
html[data-theme="dark"][data-accent="cyan"] { --primary: #4FC3FF; --primary-rgb: 79, 195, 255; }
html[data-theme="dark"][data-accent="green"] { --primary: #34D399; --primary-rgb: 52, 211, 153; }
html[data-theme="dark"][data-accent="coral"] { --primary: #FF7B86; --primary-rgb: 255, 123, 134; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.42;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; min-height: 100vh;
  transition: background-color .3s ease, color .3s ease;
}
img { max-width: 100%; display: block; }
svg { flex-shrink: 0; }
.chev { width: 18px; height: 18px; color: var(--muted-2); flex-shrink: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0; }
::selection { background: rgba(var(--primary-rgb), .22); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Фон: мягкие цветные пятна ----------
   Раньше это были четыре размытых (blur 70px) блока с бесконечной анимацией и слой «зерна» с наложением:
   телефон пересчитывал размытие и стеклянные панели над ними 60 раз в секунду даже в простое.
   Теперь те же пятна — статичные радиальные градиенты: рисуются один раз и ничего не стоят. */
:root { --g1: rgba(199, 181, 255, .6); --g2: rgba(169, 230, 255, .6); --g3: rgba(255, 194, 208, .6); --g4: rgba(183, 195, 255, .6); }
html[data-theme="dark"] { --g1: rgba(91, 63, 232, .42); --g2: rgba(30, 111, 214, .42); --g3: rgba(200, 58, 110, .42); --g4: rgba(58, 43, 179, .42); }
.bg-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(circle min(76vw, 560px) at 88% 7%, var(--g1) 0%, transparent 70%),
    radial-gradient(circle min(64vw, 470px) at 98% 45%, var(--g2) 0%, transparent 70%),
    radial-gradient(circle min(70vw, 520px) at 5% 94%, var(--g3) 0%, transparent 70%),
    radial-gradient(circle min(58vw, 420px) at 1% 21%, var(--g4) 0%, transparent 70%); }
.blob, .grain { display: none; }

#app { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; min-height: 100vh; }
.view { position: relative; min-height: 60vh; }
.page { padding: 0 16px calc(var(--tab-h) + 30px + var(--safe-b)); min-height: 60vh; }
.page.no-tabbar { padding-bottom: calc(112px + var(--safe-b)); }
.page.enter { animation: pageIn .26s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* страница, которая ещё собирается: невидима и не занимает места; её анимации стартуют, когда она появится */
.page.page-pending { position: absolute; top: 0; left: 0; right: 0; height: 0; min-height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.page-pending *, .page-pending *::before, .page-pending *::after { animation-play-state: paused !important; }
.fade-in { animation: fadeIn .35s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* открыта шторка — страница под ней не листается (js/core/ui.js) */
html.scroll-locked, html.scroll-locked body { overflow: hidden; }
html.scroll-locked body { padding-right: var(--sbw, 0px); }

/* ---------- Стекло ---------- */
.glass, .card, .chip, .search-pill, .icon-btn, .balance-chip, .quick, .stat-tile, .rev-card, .kpi, .admin-tile, .promo-foot, .stat-pill {
  background: var(--surface); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hl);
}
/* Карточки — без backdrop-filter: под ними и так сильно размытый фон, разница не видна (проверено попиксельно),
   а размытие десятков карточек на каждом кадре движения фона перегружало видеокарту телефона.
   Настоящее стекло оставлено там, где под ним проезжает контент: верхняя и нижняя панели, шторки. */

/* ---------- Логотип ---------- */
.logo-img { position: relative; display: inline-block; line-height: 0; cursor: pointer; transition: transform .25s var(--spring); }
.logo-img:active { transform: scale(.96); }
/* если в шапке тесно, логотип уменьшается целиком (contain), а не сплющивается */
.logo-img img { display: block; height: 46px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.logo-img.logo-big img { height: 96px; }
/* стрелка над надписью «тянет» центр рисунка вверх: чуть поднимаем, чтобы LEVEL UP стояла вровень с балансом */
.topbar .logo-img { top: -2px; }
.logo-img.logo-big { margin: 4px auto 2px; }
/* Плавное появление: картинка проявляется из лёгкого размытия, как только загрузилась (класс is-in ставит js/boot.js),
   затем по буквам один раз пробегает блик — он вырезан по форме самого логотипа (mask = та же картинка). */
.logo-img .logo-anim { opacity: 0; }
.logo-img.is-in .logo-anim { animation: logoIn .9s cubic-bezier(.2, .85, .25, 1.12) both; }
.logo-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; }
.logo-img.is-in::after { animation: logoShine 1.3s .55s ease-in-out both; }
@keyframes logoIn { 0% { opacity: 0; transform: translateY(6px) scale(.88); filter: blur(8px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes logoShine { 0% { opacity: 1; background-position: 160% 0; } 100% { opacity: 1; background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) {
  .logo-img.is-in .logo-anim { animation: logoFade .3s ease both; }
  .logo-img.is-in::after { animation: none; }
}
@keyframes logoFade { from { opacity: 0; } to { opacity: 1; } }
.logo-mini { width: 38px; height: 38px; border-radius: 12px; box-shadow: var(--shadow-sm); cursor: pointer; }
.brand-glow { filter: drop-shadow(0 10px 24px rgba(120, 80, 255, .35)); }

/* ---------- Заставка ---------- */
.splash { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; transition: opacity .4s ease, visibility .4s; }
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash.hide .splash-bar i, .splash.gone .splash-bar i { animation: none; }
.splash.gone { display: none; }
.splash-logo { display: flex; flex-direction: column; align-items: center; }
.logo-img.logo-splash { cursor: default; filter: drop-shadow(0 16px 26px rgba(120, 80, 255, .28)); }
.logo-img.logo-splash img { width: 270px; height: auto; }
.splash-bar { width: 120px; height: 4px; border-radius: 4px; background: rgba(var(--primary-rgb), .14); overflow: hidden; }
.splash-bar i { display: block; width: 40%; height: 100%; border-radius: 4px; background: var(--grad-btn); animation: load 1.1s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Верхняя панель ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 8px;
  background: linear-gradient(180deg, var(--bg) 55%, transparent); }
.topbar::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask-image: linear-gradient(180deg, #000 60%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); z-index: -1; }
.topbar.hidden { display: none; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.tb-left { display: flex; align-items: center; min-width: 0; }
.tb-part { display: contents; }
.balance-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 5px 0 12px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink); }
.balance-chip span { white-space: nowrap; }
.balance-chip .plus { width: 28px; height: 28px; border-radius: 50%; background: var(--grad-btn); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(var(--primary-rgb), .35); }
.balance-chip svg { width: 16px; height: 16px; color: var(--primary); }
.balance-chip .plus svg { color: #fff; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--grad-btn); color: #fff; font-weight: 800; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-sm); font-size: 15px; font-family: var(--display); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 68px; height: 68px; font-size: 26px; }
.avatar.xl { width: 96px; height: 96px; font-size: 36px; }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); position: relative; transition: transform .2s var(--spring); }
.icon-btn:active { transform: scale(.9); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .dot { position: absolute; top: 6px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); border: 2px solid var(--surface-solid); }

/* ---------- Нижняя навигация ---------- */
.tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + var(--safe-b)); z-index: 30; width: calc(100% - 24px); max-width: calc(var(--maxw) - 24px);
  height: var(--tab-h); display: flex; align-items: stretch; padding: 6px; border-radius: 26px; isolation: isolate;
  background: var(--surface); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hl); transition: transform .3s var(--ease), opacity .25s; }
.tabbar.hidden { transform: translate(-50%, 150%); opacity: 0; pointer-events: none; }
.tab-ind { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n, 5)); border-radius: 20px; background: rgba(var(--primary-rgb), .12);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .35s var(--spring); z-index: -1; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); position: relative; padding: 4px 0; border-radius: 20px; transition: color .25s; }
.tab svg { width: 23px; height: 23px; transition: transform .35s var(--spring); }
.tab:active svg { transform: scale(.88); }
.tab.active { color: var(--primary); }
.tab.active svg { transform: translateY(-1px) scale(1.08); }
.tab .badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--coral); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface-solid); animation: pop .4s var(--spring); }
.tabbar.admin .tab-ind { background: rgba(255, 107, 115, .14); }
.tabbar.admin .tab.active { color: var(--coral); }

/* ---------- Типографика и секции ---------- */
.h-display { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-title { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; margin: 8px 0 14px; line-height: 1.15; }
.page-sub { color: var(--muted); margin: -8px 0 16px; font-size: 14px; }
.section { margin-top: 24px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.section-head h2 { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.section-head .more { font-size: 13px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.section-head .more svg { width: 15px; height: 15px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.bold { font-weight: 700; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr { height: 1px; background: var(--line); margin: 14px 0; }

/* ---------- Карточки ---------- */
.card { border-radius: var(--r-lg); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hl); }
.card.pad { padding: 16px; }
.card.pad-lg { padding: 20px; }
.card + .card { margin-top: 12px; }
.tap { transition: transform .18s var(--spring), box-shadow .25s; cursor: pointer; }
.tap:active { transform: scale(.975); }

/* ---------- Кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 16px; font-weight: 700; font-size: 15.5px; transition: transform .18s var(--spring), opacity .2s, box-shadow .25s, background .2s; white-space: nowrap; user-select: none; position: relative; overflow: hidden; }
.btn:active { transform: scale(.96); }
.btn svg { width: 19px; height: 19px; }
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.btn-primary:active::after { transform: translateX(120%); }
.btn-dark { background: var(--ink); color: var(--bg); box-shadow: 0 8px 20px rgba(0, 0, 0, .22); }
.btn-ghost { background: rgba(var(--primary-rgb), .1); color: var(--primary); }
.btn-white { background: var(--surface-solid); color: var(--ink); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.btn-danger { background: rgba(255, 77, 94, .12); color: var(--danger); }
.btn-success { background: linear-gradient(95deg, #12B76A, #34D399); color: #fff; box-shadow: 0 10px 24px rgba(18, 183, 106, .28); }
.btn-glass { background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(8px); }
.btn-onbrand { background: #fff; color: #4A37F0; }
.btn-block { width: 100%; }
.btn-sm { height: 38px; padding: 0 14px; border-radius: 12px; font-size: 13.5px; }
.btn-xs { height: 30px; padding: 0 11px; border-radius: 10px; font-size: 12.5px; }
.btn[disabled], .btn.loading { opacity: .55; pointer-events: none; }
.btn.loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* ---------- Поиск ---------- */
.search-pill { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 16px; color: var(--muted); font-size: 14.5px; cursor: pointer; }
.search-pill svg { width: 19px; height: 19px; color: var(--primary); flex-shrink: 0; }
.search-input { flex: 1; border: 0; outline: 0; background: transparent; height: 100%; font-size: 15px; color: var(--ink); min-width: 0; }
.search-input::placeholder { color: var(--muted); }

/* ---------- Баннеры ---------- */
/* соседние баннеры выглядывают по краям (на 14px) — уменьшенные и притемнённые, см. --p в pages/home.js */
.carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; margin: 0 -16px; padding: 4px 24px 6px; scrollbar-width: none; }
.carousel::-webkit-scrollbar, .hscroll::-webkit-scrollbar { display: none; }
.banner { --p: 0; transform: scale(calc(1 - var(--p) * .08)); will-change: transform; scroll-snap-align: center; flex: 0 0 100%; min-height: 196px; border-radius: var(--r-xl); position: relative; overflow: hidden; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; box-shadow: var(--shadow); border: 1px solid var(--glass-border); isolation: isolate; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -2; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 10% 0%, rgba(255, 255, 255, .55), transparent 60%); pointer-events: none; }
.banner > * { position: relative; z-index: 1; }
.banner .b-tag { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .8); color: #4A37F0; backdrop-filter: blur(6px); }
.banner .b-title { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.12; letter-spacing: -.02em; max-width: 60%; margin-top: 10px; }
.banner .b-sub { font-size: 13px; color: var(--ink-2); max-width: 58%; margin-top: 7px; line-height: 1.32; }
.banner .b-btn { align-self: flex-start; margin-top: 14px; height: 40px; padding: 0 16px; border-radius: 13px; font-size: 13.5px; }
.banner .b-img { position: absolute; right: -14px; bottom: -10px; height: 100%; max-width: 50%; width: auto; object-fit: contain; z-index: 0; filter: drop-shadow(0 14px 24px rgba(80, 50, 200, .22)); animation: float 6s ease-in-out infinite; }
.banner.g-light::before { background: linear-gradient(120deg, #FFFFFF 0%, #F1EEFF 55%, #E3F2FF 100%); }
.banner.g-violet::before { background: linear-gradient(125deg, #F4EEFF 0%, #E2D6FF 45%, #F9E0F4 100%); }
.banner.g-cyan::before { background: linear-gradient(125deg, #EEFAFF 0%, #D4F0FF 50%, #E9E6FF 100%); }
.banner.g-pink::before { background: linear-gradient(125deg, #FFF0F4 0%, #FFDDE8 45%, #ECE4FF 100%); }
.banner.g-indigo::before { background: linear-gradient(125deg, #5946FF 0%, #8B5CFF 60%, #C27BFF 100%); }
.banner.g-dark::before { background: linear-gradient(125deg, #171821 0%, #2C2560 100%); }
.banner.g-indigo, .banner.g-dark { color: #fff; }
.banner.g-indigo .b-sub, .banner.g-dark .b-sub { color: rgba(255, 255, 255, .85); }
.banner.g-indigo .b-tag, .banner.g-dark .b-tag { background: rgba(255, 255, 255, .22); color: #fff; }
html[data-theme="dark"] .banner.g-light::before { background: linear-gradient(120deg, #1F2140 0%, #282A55 55%, #1C2C48 100%); }
html[data-theme="dark"] .banner.g-violet::before { background: linear-gradient(125deg, #2A2150 0%, #3A2A6E 45%, #4A2358 100%); }
html[data-theme="dark"] .banner.g-cyan::before { background: linear-gradient(125deg, #15304A 0%, #1B3F62 50%, #27295A 100%); }
html[data-theme="dark"] .banner.g-pink::before { background: linear-gradient(125deg, #3E1F33 0%, #52223F 45%, #2E2558 100%); }
html[data-theme="dark"] .banner.g-light, html[data-theme="dark"] .banner.g-violet, html[data-theme="dark"] .banner.g-cyan, html[data-theme="dark"] .banner.g-pink { color: #fff; }
html[data-theme="dark"] .banner .b-sub { color: rgba(255, 255, 255, .78); }
html[data-theme="dark"] .banner .b-tag { background: rgba(255, 255, 255, .16); color: #fff; }
html[data-theme="dark"] .banner::after { background: radial-gradient(120% 80% at 10% 0%, rgba(255, 255, 255, .12), transparent 60%); }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(var(--primary-rgb), .22); transition: width .3s var(--ease), background .3s; }
.dots i.on { width: 20px; background: var(--primary); }

/* ---------- Быстрые категории ---------- */
/* компактные плитки разделов: 4 в ряд, небольшие иконки */
.quick-grid, .quick-grid.compact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quick { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 12px 2px 10px; min-width: 0; min-height: 0; border-radius: 20px; text-align: center; position: relative;
  background: #fff; border: 1px solid #fff; color: #242636; box-shadow: 0 8px 24px rgba(34, 42, 68, .055), inset 0 1px 0 rgba(255, 255, 255, .95); }
.quick::after { display: none; }
.quick .quick-media { display: grid; place-items: center; width: 100%; height: 54px; flex-shrink: 0; }
.quick .quick-icon { width: 52px; height: 52px; object-fit: contain; object-position: center; filter: drop-shadow(0 5px 8px rgba(47, 43, 76, .10)); transition: transform .25s var(--ease); }
.quick .quick-label { display: block; width: 100%; min-height: 28px; font-family: var(--font); font-weight: 700; font-size: 12px; line-height: 1.15; letter-spacing: -.01em; text-transform: none; color: #242636; text-wrap: balance; overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }
.quick .emoji.quick-icon { display: grid; place-items: center; font-size: 34px; line-height: 1; filter: none; }
.quick:active .quick-icon { transform: scale(.97); }
.quick:focus-visible, .cat-card:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .45); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .quick:hover { box-shadow: 0 12px 28px rgba(34, 42, 68, .09), inset 0 1px 0 #fff; }
  .quick:hover .quick-icon { transform: translateY(-3px); }
}
.brand-strip-wrap { margin-top: 14px; }
.brand-strip { display: flex; gap: 10px; overflow-x: auto; scroll-padding-inline: 16px; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.brand-strip::-webkit-scrollbar { display: none; }
.brand-tile { flex: 0 0 64px; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; scroll-snap-align: start; }
.brand-tile img { width: 58px; height: 58px; border-radius: 15px; object-fit: cover; box-shadow: 0 4px 12px rgba(40, 30, 120, .16); transition: transform .3s var(--spring); }
.brand-tile:active img { transform: scale(.92); }
.brand-tile span { width: 100%; font-size: 11px; font-weight: 600; line-height: 1.15; color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-more { position: relative; width: 58px; height: 58px; border-radius: 15px; padding: 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 4px 12px rgba(40, 30, 120, .14); }
.brand-more img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; box-shadow: none; }
.brand-more b { position: absolute; right: -5px; bottom: -5px; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  background: var(--grad-btn); color: #fff; font-size: 10px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(89, 70, 255, .35); }
.brand-group { margin-top: 14px; }
.brand-group-title { font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.brand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
.brand-grid .brand-tile { width: auto; min-width: 0; flex: none; }

/* ---------- Преимущества ---------- */
/* Преимущества: карточки с эмодзи в светящемся кружке, цветной окантовкой и пробегающим бликом */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.benefit { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 4px 7px; border-radius: 16px; text-align: center; color: var(--ink);
  border: 1.5px solid transparent; background: linear-gradient(180deg, #fff, var(--bf-soft)) padding-box, var(--bf-grad) border-box; box-shadow: 0 10px 22px var(--bf-glow); }
.benefit .bf-ic { width: 28px; height: 28px; margin-bottom: 3px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--bf-soft) 70%); box-shadow: 0 0 0 1.5px var(--bf-ring), 0 6px 16px var(--bf-glow); }
.benefit .bf-ic .animoji { margin: 0; }
.benefit b { font-family: var(--display); font-size: 11.5px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.benefit small { max-width: 100%; font-size: 9.5px; line-height: 1.25; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.benefit.b-fast { --bf-grad: linear-gradient(135deg, #6A4BFF, #B05CFF); --bf-soft: #F1ECFF; --bf-ring: rgba(120, 80, 255, .28); --bf-glow: rgba(110, 75, 255, .14); }
.benefit.b-safe { --bf-grad: linear-gradient(135deg, #FF5A7A, #FF9A6B); --bf-soft: #FFEEF1; --bf-ring: rgba(255, 90, 122, .28); --bf-glow: rgba(255, 90, 122, .13); }
.benefit.b-profit { --bf-grad: linear-gradient(135deg, #2F8BFF, #4FD6FF); --bf-soft: #E9F6FF; --bf-ring: rgba(47, 160, 255, .3); --bf-glow: rgba(47, 160, 255, .14); }

/* ---------- Карточки категорий ---------- */
.hscroll { display: flex; gap: 10px; overflow-x: auto; scroll-padding-inline: 16px; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; scroll-snap-type: x proximity; }
.hscroll > * { scroll-snap-align: start; }
.cat-card { flex: 0 0 180px; min-height: 264px; border-radius: 26px; padding: 18px 14px 14px; background: #fff; border: 1px solid #fff; color: #242636; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 8px 24px rgba(34, 42, 68, .055), inset 0 1px 0 #fff; transition: transform .25s var(--ease), box-shadow .25s; }
.cat-card::before, .cat-card::after { display: none; }
.cat-card:active { transform: scale(.975); box-shadow: 0 5px 16px rgba(34, 42, 68, .07); }
.cat-card .cc-media { display: grid; place-items: center; width: 100%; height: 108px; flex-shrink: 0; }
.cat-card .cc-icon { width: 104px; height: 104px; object-fit: contain; object-position: center; filter: drop-shadow(0 5px 8px rgba(47, 43, 76, .10)); }
.cat-card .emoji.cc-icon { display: grid; place-items: center; font-size: 56px; line-height: 1; filter: none; }
.cat-card .cc-title { width: 100%; font-family: var(--font); font-weight: 800; font-size: 19px; letter-spacing: -.025em; text-transform: none; line-height: 1.18; margin-top: 12px; text-wrap: balance; overflow-wrap: break-word; }
.cat-card .cc-sub { font-size: 12px; color: #737588; margin-top: 5px; line-height: 1.3; }
.cat-card .cc-count { width: 100%; font-size: 11px; font-weight: 600; color: #737588; margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.cat-card .cc-arrow { width: 28px; height: 28px; border-radius: 50%; background: #F1F2F8; color: #343848; display: grid; place-items: center; transition: transform .25s var(--ease), background .25s; }
.cat-card .cc-arrow svg { width: 14px; height: 14px; }
.cat-card:active .cc-arrow { transform: translateX(2px); background: #E9EBF4; }
.g-indigo { background: linear-gradient(150deg, #5B4BFF 0%, #7A5CFF 55%, #9A7BFF 100%); }
.g-violet { background: linear-gradient(150deg, #9B5CFF 0%, #B86BFF 55%, #D59BFF 100%); }
.g-coral { background: linear-gradient(150deg, #FF6B73 0%, #FF8A7A 55%, #FFB199 100%); }
.g-cyan { background: linear-gradient(150deg, #2FB4FF 0%, #4FCBFF 55%, #8BE3FF 100%); }
.g-pink { background: linear-gradient(150deg, #FF5FA2 0%, #FF7FB5 55%, #C58BFF 100%); }
.g-blue { background: linear-gradient(150deg, #3D6BFF 0%, #4F8BFF 55%, #7FB1FF 100%); }
.g-green { background: linear-gradient(150deg, #12B76A 0%, #2DD08A 55%, #7AE6B5 100%); }
.g-dark { background: linear-gradient(150deg, #2A2C48 0%, #4A4C78 100%); }
.cat-icon-plain { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(80, 50, 200, .2)); }
.cat-tile { width: 64px; height: 64px; flex-shrink: 0; border-radius: 15px; object-fit: cover; box-shadow: 0 6px 14px -4px rgba(60, 40, 180, .35); }
.pf-icon-plain { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(80, 50, 200, .2)); }
.pf-tile { width: 52px; height: 52px; flex-shrink: 0; border-radius: 13px; object-fit: cover; box-shadow: 0 6px 14px -4px rgba(60, 40, 180, .35); }
.cat-thumb { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.cat-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 55%); }
.cat-thumb img { width: 50px; height: 46px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .18)); position: relative; z-index: 1; }
.cat-row-title { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }

/* ---------- Товары ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-card { background: var(--surface-solid); border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; }
html[data-theme="dark"] .p-card { background: var(--surface-solid); }
.hscroll .p-card { flex: 0 0 154px; }
.p-media { position: relative; aspect-ratio: 1 / .86; display: grid; place-items: center; overflow: hidden; background: var(--media-bg); }
.p-media::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(155, 92, 255, .26), transparent 70%); filter: blur(10px); }
.p-media img { position: relative; width: 58%; height: 58%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(60, 40, 160, .25)); transition: transform .4s var(--spring); }
.p-card:active .p-media img { transform: scale(1.06) translateY(-2px); }
.p-fallback { position: relative; display: grid; place-items: center; color: #fff; border-radius: 24%; box-shadow: 0 10px 18px rgba(60, 40, 160, .2); }
.p-media .p-fallback { width: 56%; aspect-ratio: 1; }
.p-fallback svg { width: 50%; height: 50%; }
.p-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; z-index: 2; max-width: 75%; }
.badge-pill { font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 4px 7px; border-radius: 8px; color: #fff; display: inline-flex; align-items: center; gap: 3px; line-height: 1; box-shadow: 0 3px 8px rgba(0, 0, 0, .15); }
.badge-pill svg { width: 10px; height: 10px; }
.bp-hit { background: linear-gradient(95deg, #FF6B73, #FF8E53); }
.bp-new { background: linear-gradient(95deg, #2FB4FF, #5946FF); }
.bp-sale { background: linear-gradient(95deg, #FF4D8B, #FF6B73); }
.bp-instant { background: linear-gradient(95deg, #5946FF, #9B5CFF); }
.bp-out { background: rgba(23, 24, 33, .7); }
.fav-btn { position: absolute; top: 7px; right: 7px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-solid); display: grid; place-items: center; color: var(--muted-2); box-shadow: var(--shadow-sm); border: 1px solid var(--glass-border); transition: transform .3s var(--spring); }
.fav-btn svg { width: 17px; height: 17px; transition: transform .3s var(--spring); }
.fav-btn.on { color: var(--coral); }
.fav-btn.on svg { fill: currentColor; animation: heart .4s var(--spring); }
@keyframes heart { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.p-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.p-title { font-weight: 700; font-size: 14px; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.44em; }
.p-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-price { display: flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.p-price b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.p-price s { font-size: 12px; color: var(--muted-2); }
.p-price .from { font-size: 12px; color: var(--muted); font-weight: 600; }
.p-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.p-meta .star { color: var(--amber); }
.p-card.out .p-media img, .p-card.out .p-fallback { filter: grayscale(.7) opacity(.6); }

/* ---------- Список-строки ---------- */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; transition: background .15s; }
.list-item:active { background: var(--surface-3); }
.list-item:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.list-item:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.list-item + .list-item { border-top: 1px solid var(--line); }
.list-item .li-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; background: rgba(var(--primary-rgb), .1); color: var(--primary); }
.list-item .li-icon svg { width: 20px; height: 20px; }
.list-item .li-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.list-item .li-title { font-weight: 700; font-size: 14.5px; }
.list-item .li-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.list-item .li-right { margin-left: auto; text-align: right; flex-shrink: 0; font-weight: 700; }
.li-icon.c-coral { background: rgba(255, 107, 115, .14); color: #FF5F6D; }
.li-icon.c-cyan { background: rgba(47, 180, 255, .14); color: #1A9BE6; }
.li-icon.c-green { background: rgba(18, 183, 106, .14); color: var(--green); }
.li-icon.c-amber { background: rgba(245, 165, 36, .16); color: #D98B00; }
.li-icon.c-violet { background: rgba(155, 92, 255, .14); color: var(--violet); }
.li-icon.c-dark { background: var(--surface-3); color: var(--ink); }
.li-icon.c-pink { background: rgba(255, 95, 162, .14); color: var(--pink); }

/* ---------- Чипы и табы ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; height: 36px; padding: 0 14px; border-radius: 12px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s, transform .2s var(--spring); }
.chip:active { transform: scale(.95); }
.chip img { width: 20px; height: 20px; object-fit: contain; border-radius: 6px; }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip .cnt { font-size: 11px; opacity: .6; }
.seg { display: flex; padding: 4px; border-radius: 14px; background: var(--surface-3); gap: 4px; }
.seg button { flex: 1; height: 36px; border-radius: 11px; font-weight: 600; font-size: 13.5px; color: var(--muted); white-space: nowrap; padding: 0 8px; transition: background .2s, color .2s, box-shadow .2s; }
.seg button.active { background: var(--surface-solid); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- Формы ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--muted); }
.input, .textarea, .select { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--field-bg); outline: none; font-size: 15px; color: var(--ink); transition: border-color .15s, box-shadow .15s, background .2s; }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14); }
.input.error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(255, 77, 94, .12); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7D96' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.input-wrap { position: relative; }
.input-wrap .suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; pointer-events: none; }
.amount-input { font-family: var(--display); font-weight: 700; font-size: 26px; height: 68px; text-align: center; letter-spacing: -.02em; }
.switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 28px; background: var(--line-2); transition: background .25s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .22); transition: transform .3s var(--spring); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(20px); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.toggle-row + .toggle-row { border-top: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid .field { margin-bottom: 4px; }

/* ---------- Карточка товара (страница) ---------- */
.pd-hero { position: relative; margin: 0 -16px; padding: 8px 16px 0; }
.pd-media { position: relative; height: 250px; border-radius: 30px; display: grid; place-items: center; overflow: hidden; background: var(--media-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.pd-media::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(155, 92, 255, .35), transparent 65%); filter: blur(14px); }
.pd-media .orbit { position: absolute; inset: 0; pointer-events: none; }
.pd-media .orbit i { position: absolute; border-radius: 50%; background: var(--primary); opacity: .35; }
.pd-media img.main { position: relative; width: 156px; height: 156px; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(60, 40, 160, .32)); }
.pd-media .p-fallback { position: relative; width: 150px; height: 150px; border-radius: 38px; }
.pd-media .fav-btn { top: 14px; right: 14px; width: 40px; height: 40px; }
.pd-media .share-btn { position: absolute; top: 14px; right: 62px; z-index: 2; }
.pd-head { margin-top: 16px; }
.pd-crumbs { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-crumbs a { color: var(--muted); font-weight: 600; }
.pd-title { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; line-height: 1.18; }
.pd-sub { color: var(--muted); margin-top: 4px; }
.pd-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.stat-pill { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.stat-pill svg { width: 14px; height: 14px; }
.stat-pill.ok { color: var(--green); }
.stat-pill.warn { color: #D98B00; }
.stat-pill.bad { color: var(--danger); }
.stat-pill.brand { color: var(--primary); }
.variants { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.variant { padding: 12px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--field-bg); text-align: left; transition: border-color .2s, box-shadow .2s, transform .2s var(--spring), background .2s; position: relative; color: var(--ink); }
.variant:active { transform: scale(.97); }
.variant .v-title { font-weight: 700; font-size: 14px; }
.variant .v-price { font-weight: 800; font-size: 15px; margin-top: 4px; }
.variant .v-price s { font-weight: 500; font-size: 12px; color: var(--muted-2); margin-left: 4px; }
.variant .v-stock { font-size: 11px; color: var(--muted); margin-top: 2px; }
.variant.active { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14); background: var(--surface-solid); }
.variant.active::after { content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; animation: pop .3s var(--spring); }
.variant.disabled { opacity: .45; pointer-events: none; }
.qty { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-3); }
.qty button { width: 36px; height: 36px; border-radius: 11px; background: var(--surface-solid); box-shadow: var(--shadow-sm); display: grid; place-items: center; font-size: 20px; font-weight: 700; color: var(--ink); }
.qty span { min-width: 34px; text-align: center; font-weight: 800; font-size: 16px; }
.rich { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; word-break: break-word; }
.rich b { color: var(--ink); }
.info-steps { display: grid; gap: 10px; }
.info-step { display: flex; gap: 12px; align-items: flex-start; }
.info-step .num { width: 28px; height: 28px; border-radius: 10px; background: rgba(var(--primary-rgb), .12); color: var(--primary); font-weight: 800; display: grid; place-items: center; flex-shrink: 0; font-size: 13px; }
.calc { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(var(--primary-rgb), .08); margin-top: 10px; font-size: 14px; }
.calc b { font-size: 17px; }

/* ---------- Нижняя плашка покупки ---------- */
.buybar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 25; width: 100%; max-width: var(--maxw); padding: 12px 16px calc(12px + var(--safe-b)); display: flex; align-items: center; gap: 12px;
  background: var(--surface); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-top: 1px solid var(--glass-border); box-shadow: 0 -10px 30px rgba(60, 45, 180, .08); animation: slideUp .35s var(--ease); }
@keyframes slideUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.buybar .bb-price { display: flex; flex-direction: column; line-height: 1.1; }
.buybar .bb-price small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.buybar .bb-price b { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.buybar .bb-price s { font-size: 12px; color: var(--muted-2); }
.buybar .btn { flex: 1; }
/* если на странице видна нижняя навигация — плашка «парит» над ней, а не прячется под ней */
.page:not(.no-tabbar) .buybar { bottom: calc(var(--tab-h) + 18px + var(--safe-b)); width: calc(100% - 24px); max-width: calc(var(--maxw) - 24px); padding: 8px; border-radius: 22px; border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hl); }
.page:not(.no-tabbar):has(.buybar) { padding-bottom: calc(var(--tab-h) + 104px + var(--safe-b)); }

/* ---------- Отзывы ---------- */
.rev-card { flex: 0 0 260px; padding: 14px; border-radius: 20px; }
.rev-head { display: flex; align-items: center; gap: 10px; }
.rev-head .avatar { width: 34px; height: 34px; font-size: 13px; }
.rev-name { font-weight: 700; font-size: 14px; }
.rev-product { font-size: 11.5px; color: var(--muted); }
.stars { color: var(--amber); letter-spacing: 1px; font-size: 13px; }
.stars .off { color: var(--line-2); }
.rev-text { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.45; }
.rev-reply { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--primary-rgb), .08); font-size: 13px; }
.rev-reply b { color: var(--primary); }
.rating-big { display: flex; align-items: center; gap: 16px; }
.rating-big .num { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.rating-bars { flex: 1; display: grid; gap: 4px; }
.rating-bar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.rating-bar .track { flex: 1; height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.rating-bar .track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #F5A524, #FFC14D); }
.star-input { display: flex; justify-content: center; gap: 8px; }
.star-input button { font-size: 38px; color: var(--line-2); transition: transform .2s var(--spring), color .15s; }
.star-input button.on { color: var(--amber); }
.star-input button:active { transform: scale(1.2); }

/* ---------- Профиль ---------- */
.profile-card { position: relative; overflow: hidden; border-radius: 28px; padding: 20px; color: #fff; background: linear-gradient(135deg, #4B3BFF 0%, #7A4DFF 45%, #B45CFF 75%, #FF7A9A 120%); box-shadow: 0 20px 44px rgba(90, 60, 255, .32); isolation: isolate; }
.profile-card::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .14); top: -90px; right: -60px; z-index: -1; }
.profile-card::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .1); bottom: -80px; left: -40px; z-index: -1; }
.profile-card .avatar { background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .55); }
.profile-card .pc-name { font-weight: 800; font-size: 18px; }
.profile-card .pc-id { font-size: 12.5px; opacity: .85; }
.profile-card .pc-balance-label { font-size: 12.5px; opacity: .85; margin-top: 18px; font-weight: 600; }
.profile-card .pc-balance { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.profile-card .pc-actions { display: flex; gap: 8px; margin-top: 16px; }
.profile-card .pc-actions .btn { flex: 1; height: 44px; font-size: 14px; }
.profile-card > .row, .profile-card > .pc-balance-label, .profile-card > .pc-balance, .profile-card > .pc-actions { position: relative; z-index: 1; }
@keyframes nekoIn { from { opacity: 0; transform: translate(40px, 10px) scale(.6) rotate(8deg); } to { opacity: 1; transform: none; } }
.sticker { pointer-events: none; }
.ref-hero .referral-hero-image, .support-hero-image { animation: nekoIn .9s .1s cubic-bezier(.2, 1.3, .45, 1) both; }
.ref-hero .referral-hero-image { position: absolute; right: 2px; top: 6px; filter: drop-shadow(0 10px 16px rgba(80, 50, 200, .22)); }
.success-burst.neko, .sh-illustration.neko { width: 150px; height: 150px; }
.sh-illustration.neko { width: 140px; height: 140px; }
.empty .sticker.empty-anim { animation: nekoIn .9s cubic-bezier(.2, 1.3, .45, 1) both; }
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-wrap .avatar-edit { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #4A37F0; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.avatar-wrap .avatar-edit svg { width: 14px; height: 14px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
/* плашки статистики профиля: по центру, с живым эмодзи в стеклянном кружке */
.stat-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; min-height: 104px; padding: 12px 6px; border-radius: 20px; }
.stat-tile .st-ic { width: 38px; height: 38px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(124, 88, 255, .14) 75%); box-shadow: inset 0 0 0 1px rgba(124, 88, 255, .16), 0 6px 14px rgba(124, 88, 255, .16); }
.stat-tile .st-ic .animoji { margin: 0; }
.stat-tile .st-val { max-width: 100%; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile .st-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--field-bg); font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: border-color .2s, box-shadow .2s, transform .2s var(--spring); }
.theme-opt:active { transform: scale(.96); }
.theme-opt svg { width: 15px; height: 15px; }
.theme-opt .tp { width: 100%; height: 44px; border-radius: 10px; position: relative; overflow: hidden; border: 1px solid var(--line); }
.theme-opt .tp::before { content: ""; position: absolute; left: 8px; top: 8px; width: 40%; height: 8px; border-radius: 4px; background: var(--grad-btn); }
.theme-opt .tp::after { content: ""; position: absolute; left: 8px; top: 22px; width: 70%; height: 14px; border-radius: 5px; opacity: .5; }
.theme-opt .tp.light { background: #F4F5FB; } .theme-opt .tp.light::after { background: #fff; opacity: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.theme-opt .tp.dark { background: #0D0E1A; } .theme-opt .tp.dark::after { background: #22243F; opacity: 1; }
.theme-opt .tp.auto { background: linear-gradient(100deg, #F4F5FB 50%, #0D0E1A 50%); } .theme-opt .tp.auto::after { background: linear-gradient(100deg, #fff 50%, #22243F 50%); opacity: 1; }
.theme-opt.active { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14); color: var(--primary); }
.accent-row { display: flex; gap: 10px; flex-wrap: wrap; }
.accent-dot { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; box-shadow: var(--shadow-sm); transition: transform .2s var(--spring), border-color .2s; }
.accent-dot:active { transform: scale(.9); }
.accent-dot.active { border-color: var(--ink); }

/* ---------- Заказы ---------- */
.order-row { display: flex; gap: 12px; align-items: center; padding: 12px; }
.order-row + .order-row { border-top: 1px solid var(--line); }
.order-thumb { width: 52px; height: 52px; border-radius: 15px; background: var(--media-bg); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.order-thumb img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(60, 40, 160, .2)); }
.order-thumb .p-fallback { width: 38px; height: 38px; border-radius: 11px; }
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 8px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-processing { color: #C27A00; background: rgba(245, 165, 36, .16); }
.st-completed { color: var(--green); background: rgba(18, 183, 106, .14); }
.st-refunded { color: var(--muted); background: var(--surface-3); }
.st-active { color: var(--primary); background: rgba(var(--primary-rgb), .12); }
.st-paid { color: var(--green); background: rgba(18, 183, 106, .14); }
.st-expired, .st-canceled { color: var(--muted); background: var(--surface-3); }
.st-open { color: var(--primary); background: rgba(var(--primary-rgb), .12); }
.st-closed { color: var(--muted); background: var(--surface-3); }
html[data-theme="dark"] .st-processing { color: #FFC14D; }
.status-hero { text-align: center; padding: 24px 16px 18px; }
.status-hero .sh-icon { width: 76px; height: 76px; border-radius: 26px; margin: 0 auto 14px; display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-lg); animation: pop .5s var(--spring); }
.status-hero .sh-icon svg { width: 38px; height: 38px; }
.sh-completed { background: linear-gradient(135deg, #12B76A, #4ADE80); }
.sh-processing { background: linear-gradient(135deg, #F5A524, #FFC14D); }
.sh-refunded { background: linear-gradient(135deg, #7A7D96, #A4A7BD); }
.status-hero h2 { font-family: var(--display); font-size: 19px; }
.content-box { position: relative; background: var(--code-bg); color: var(--code-ink); border-radius: 16px; padding: 14px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.content-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px 0; }
.content-line + .content-line { border-top: 1px dashed rgba(255, 255, 255, .12); }
.copy-btn { flex-shrink: 0; height: 28px; padding: 0 10px; border-radius: 9px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 12px; font-weight: 700; font-family: var(--font); display: inline-flex; align-items: center; gap: 4px; }
.copy-btn svg { width: 13px; height: 13px; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 14px; }
.kv + .kv { border-top: 1px solid var(--line); }
.kv .k { color: var(--muted); flex-shrink: 0; }
.kv .v { font-weight: 600; text-align: right; word-break: break-word; }
.timeline { display: grid; gap: 0; }
.tl-item { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--line-2); display: grid; place-items: center; flex-shrink: 0; position: relative; z-index: 1; color: #fff; }
.tl-dot svg { width: 12px; height: 12px; }
.tl-item.done .tl-dot { background: var(--green); }
.tl-item.now .tl-dot { background: var(--amber); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, .5); } 50% { box-shadow: 0 0 0 8px rgba(245, 165, 36, 0); } }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 10.5px; top: 22px; bottom: 0; width: 1.5px; background: var(--line-2); }

/* ---------- Чат ---------- */
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.chat-head .ch-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-btn); color: #fff; box-shadow: 0 6px 14px rgba(var(--primary-rgb), .3); flex-shrink: 0; }
.chat-head .ch-icon svg { width: 20px; height: 20px; }
.online { display: inline-flex; align-items: center; gap: 5px; }
.online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(18, 183, 106, .2); }
.chat-wrap { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 14px; }
.chat-day { align-self: center; font-size: 11.5px; color: var(--muted); font-weight: 600; margin: 12px 0 8px; padding: 4px 12px; border-radius: 999px; background: var(--surface-3); }
.msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; animation: msgIn .28s var(--ease); }
.msg-row.me { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.them { align-self: flex-start; }
.msg-row + .msg-row { margin-top: 2px; }
.msg-row.first { margin-top: 10px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.msg-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--grad-btn); color: #fff; overflow: hidden; box-shadow: var(--shadow-sm); visibility: hidden; }
.msg-avatar svg { width: 15px; height: 15px; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-row.last .msg-avatar { visibility: visible; }
.bubble { position: relative; padding: 8px 12px 6px; border-radius: 18px; font-size: 14.5px; line-height: 1.38; white-space: pre-wrap; word-break: break-word; box-shadow: var(--shadow-sm); min-width: 70px; }
.msg-row.me .bubble { background: var(--grad-btn); color: #fff; border-bottom-right-radius: 6px; }
.msg-row.them .bubble { background: var(--bubble-them); color: var(--ink); border-bottom-left-radius: 6px; border: 1px solid var(--line); }
.msg-row.them.first .bubble { border-top-left-radius: 18px; }
.msg-row.me .bubble a { color: #fff; text-decoration: underline; }
.bubble img { border-radius: 12px; margin: -3px -6px 6px; max-width: calc(100% + 12px); min-width: 180px; cursor: zoom-in; }
.bubble .m-author { font-size: 11.5px; font-weight: 800; color: var(--primary); margin-bottom: 2px; }
.bubble .m-time { font-size: 10.5px; opacity: .6; margin-top: 2px; text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 3px; }
.bubble .m-time svg { width: 13px; height: 13px; }
.msg.system { align-self: center; background: var(--surface-3); color: var(--muted); font-size: 12px; border-radius: 999px; padding: 6px 14px; margin: 10px 0; text-align: center; max-width: 90%; }
.chat-empty { text-align: center; padding: 28px 16px 20px; color: var(--muted); font-size: 13.5px; }
.chat-empty .ce-icon { width: 64px; height: 64px; border-radius: 22px; margin: 0 auto 12px; display: grid; place-items: center; background: rgba(var(--primary-rgb), .1); color: var(--primary); }
.chat-empty .ce-icon svg { width: 30px; height: 30px; }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.composer { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 25; width: 100%; max-width: var(--maxw); padding: 10px 12px calc(10px + var(--safe-b)); display: flex; align-items: flex-end; gap: 8px; background: var(--surface); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-top: 1px solid var(--glass-border); }
.composer textarea { flex: 1; min-height: 44px; max-height: 130px; resize: none; border-radius: 22px; padding: 11px 16px; border: 1.5px solid var(--line-2); outline: none; background: var(--field-bg); color: var(--ink); font-size: 15px; line-height: 1.35; transition: border-color .15s; }
.composer textarea:focus { border-color: var(--primary); }
.composer .c-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; transition: transform .2s var(--spring); }
.composer .c-btn:active { transform: scale(.9); }
.composer .c-attach { background: rgba(var(--primary-rgb), .1); color: var(--primary); }
.composer .c-send { background: var(--grad-btn); color: #fff; box-shadow: 0 6px 16px rgba(var(--primary-rgb), .3); }
.composer svg { width: 20px; height: 20px; }
.composer .preview-img { position: absolute; bottom: 100%; left: 12px; margin-bottom: 8px; width: 74px; height: 74px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); border: 2px solid var(--surface-solid); }
.composer .preview-img img { width: 100%; height: 100%; object-fit: cover; }
.composer .preview-img button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; line-height: 20px; }
.quick-replies { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 2px; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.quick-replies::-webkit-scrollbar { display: none; }
.quick-replies .chip { height: 32px; font-size: 12.5px; padding: 0 12px; }

/* ---------- Шторка (bottom sheet) ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; touch-action: none; overscroll-behavior: contain; background: rgba(10, 10, 25, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.sheet-backdrop.open { opacity: 1; }
.sheet { position: fixed; left: 50%; bottom: 0; z-index: 61; width: 100%; max-width: var(--maxw); max-height: 90vh; overflow-y: auto; transform: translate(-50%, 105%); transition: transform .38s var(--ease);
  background: var(--surface-solid); border-radius: 28px 28px 0 0; padding: 10px 18px calc(20px + var(--safe-b)); box-shadow: 0 -20px 60px rgba(30, 20, 90, .25); overscroll-behavior: contain; border-top: 1px solid var(--glass-border); }
html[data-theme="dark"] .sheet { background: #181A2E; }
.sheet.open { transform: translate(-50%, 0); }
.sheet.sheet-tall { height: 88vh; }
.sheet .grab { width: 40px; height: 5px; border-radius: 5px; background: var(--line-2); margin: 0 auto 14px; }
.sheet h3 { font-family: var(--display); font-size: 17px; margin-bottom: 4px; }
.sheet .sheet-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 18px; }
.sheet-actions .btn { flex: 1; }
.summary { background: rgba(var(--primary-rgb), .07); border-radius: 18px; padding: 4px 14px; }
.summary .kv { font-size: 14px; }
.summary .kv.total .k { color: var(--ink); font-weight: 700; }
.summary .kv.total .v { font-family: var(--display); font-size: 18px; font-weight: 700; }
.promo-row { display: flex; gap: 8px; margin-top: 12px; }
.promo-row .input { min-height: 46px; text-transform: uppercase; }
.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; align-items: flex-start; }
.notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.notice.warn { background: rgba(245, 165, 36, .14); color: #9A6200; }
.notice.info { background: rgba(var(--primary-rgb), .09); color: var(--primary-600); }
.notice.ok { background: rgba(18, 183, 106, .12); color: #0B8A4F; }
.notice.bad { background: rgba(255, 77, 94, .1); color: #C92A3A; }
html[data-theme="dark"] .notice.warn { color: #FFC14D; } html[data-theme="dark"] .notice.ok { color: #4ADE80; } html[data-theme="dark"] .notice.bad { color: #FF7A85; } html[data-theme="dark"] .notice.info { color: var(--primary-2); }

/* ---------- Тосты ---------- */
#toast-root { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 90; width: calc(100% - 32px); max-width: 420px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(21, 22, 42, .92); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); animation: toastIn .35s var(--spring); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); }
html[data-theme="dark"] .toast { background: rgba(40, 42, 70, .95); }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.ok svg { color: #4ADE80; }
.toast.err svg { color: #FF7A85; }
.toast.info svg { color: #8FB4FF; }
.toast.out { animation: toastOut .25s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

/* ---------- Скелетоны / пустые состояния ---------- */
.skel { background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 37%, var(--skel-a) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 14px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.empty { text-align: center; padding: 40px 20px; }
.empty img.still { animation: none; }
.empty img { width: 110px; margin: 0 auto 14px; filter: drop-shadow(0 14px 20px rgba(80, 50, 200, .22)); }
.empty .e-icon { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 26px; display: grid; place-items: center; background: rgba(var(--primary-rgb), .1); color: var(--primary); }
.empty .e-icon svg { width: 36px; height: 36px; }
.empty h3 { font-family: var(--display); font-size: 16px; margin-bottom: 6px; }
.empty p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }

/* ---------- Пополнение ---------- */
.amount-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.amount-presets button { height: 44px; border-radius: 13px; background: var(--field-bg); border: 1.5px solid var(--line-2); font-weight: 700; font-size: 14.5px; color: var(--ink); transition: all .2s; }
.amount-presets button.active { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb), .08); }
.pay-method { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; border: 1.5px solid var(--primary); background: rgba(var(--primary-rgb), .06); }
.pay-method .pm-icon { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #2AABEE, #229ED9); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.pay-method .pm-icon svg { width: 24px; height: 24px; }
.coins { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.coin { font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 7px; background: var(--surface-3); color: var(--ink-2); }
.pay-wait { text-align: center; padding: 10px 0; }
.pay-wait .ring { width: 86px; height: 86px; margin: 6px auto 16px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--primary), var(--violet), var(--coral), var(--primary)); animation: spin 2.4s linear infinite; }
.pay-wait .ring > div { width: 74px; height: 74px; border-radius: 50%; background: var(--surface-solid); display: grid; place-items: center; animation: spin 2.4s linear infinite reverse; }
.pay-wait .ring svg { width: 32px; height: 32px; color: var(--primary); }
.success-burst { width: 96px; height: 96px; margin: 6px auto 16px; border-radius: 32px; background: linear-gradient(135deg, #12B76A, #4ADE80); display: grid; place-items: center; color: #fff; box-shadow: 0 18px 40px rgba(18, 183, 106, .35); animation: pop .5s var(--spring); }
.success-burst svg { width: 48px; height: 48px; }

/* ---------- Рефералы ---------- */
.ref-hero { position: relative; overflow: hidden; border-radius: 28px; padding: 20px; background: linear-gradient(135deg, #FFF0F4 0%, #F1EAFF 50%, #E6F4FF 100%); border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
html[data-theme="dark"] .ref-hero { background: linear-gradient(135deg, #3A2140 0%, #2A2355 50%, #1C2C48 100%); }
.ref-hero img { position: absolute; right: 14px; top: 22px; width: 96px; filter: drop-shadow(0 10px 16px rgba(80, 50, 200, .22)); }
.ref-hero h2 { font-family: var(--display); font-size: 18px; max-width: 64%; line-height: 1.15; }
.ref-hero p { color: var(--ink-2); font-size: 13.5px; max-width: 64%; margin-top: 8px; }
.link-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--surface-solid); border: 1.5px dashed rgba(var(--primary-rgb), .4); margin-top: 16px; }
.link-box span { flex: 1; font-size: 13px; font-weight: 600; color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; font-weight: 700; font-size: 14.5px; text-align: left; color: var(--ink); }
.faq-q svg { width: 18px; height: 18px; color: var(--muted); transition: transform .3s var(--spring); flex-shrink: 0; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.faq-a > div { overflow: hidden; white-space: pre-line; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a > div { padding-bottom: 14px; }

/* ---------- Подвал главной ---------- */
.promo-foot { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; }
.promo-foot .pf-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--grad-btn); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 8px 18px rgba(var(--primary-rgb), .3); }
.promo-foot .pf-icon svg { width: 26px; height: 26px; }
.promo-foot .pf-text { font-weight: 700; font-size: 15px; line-height: 1.3; border-left: 1.5px solid var(--line-2); padding-left: 14px; }
.foot-note { text-align: center; color: var(--muted-2); font-size: 12px; margin-top: 22px; }
.foot-note img { width: 110px; margin: 0 auto 8px; opacity: .8; }

/* ---------- Админка ---------- */
.admin-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 14px; gap: 10px; }
.admin-head h1 { font-family: var(--display); font-size: 20px; letter-spacing: -.02em; }
.admin-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 5px 9px; border-radius: 8px; background: linear-gradient(95deg, #171821, #34365A); color: #fff; }
.admin-badge svg { width: 12px; height: 12px; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { padding: 14px; border-radius: 20px; position: relative; overflow: hidden; }
.kpi .k-label { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi .k-label svg { width: 15px; height: 15px; }
.kpi .k-val { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
.kpi .k-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.kpi.hero { grid-column: span 2; color: #fff; background: linear-gradient(135deg, #171821 0%, #2E2A66 60%, #5946FF 130%); border: 0; }
.kpi.hero .k-label, .kpi.hero .k-sub { color: rgba(255, 255, 255, .7); }
.kpi.hero .k-val { font-size: 26px; }
.kpi.alert { border: 1.5px solid rgba(255, 107, 115, .45); }
.kpi.alert .k-val { color: var(--coral); }
.chart { width: 100%; height: 104px; margin-top: 12px; }
.chart .bar { fill: url(#barGrad); }
.chart text { font-size: 9px; fill: rgba(255, 255, 255, .6); font-family: var(--font); }
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.admin-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 20px; text-align: center; font-weight: 700; font-size: 12.5px; position: relative; color: var(--ink); }
.admin-tile .at-icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; }
.admin-tile .at-icon svg { width: 22px; height: 22px; }
.admin-tile .badge { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--coral); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 6px; }
.table-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.table-row + .table-row { border-top: 1px solid var(--line); }
.thumb-sm { width: 44px; height: 44px; border-radius: 13px; overflow: hidden; background: var(--media-bg); display: grid; place-items: center; flex-shrink: 0; }
.thumb-sm img { width: 34px; height: 34px; object-fit: contain; }
.thumb-sm .p-fallback { width: 34px; height: 34px; border-radius: 10px; }
.tag svg { width: 12px; height: 12px; margin-right: 3px; }
.tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 7px; background: var(--surface-3); color: var(--ink-2); }
.tag.green { background: rgba(18, 183, 106, .14); color: var(--green); }
.tag.red { background: rgba(255, 77, 94, .12); color: var(--danger); }
.tag.violet { background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.tag.amber { background: rgba(245, 165, 36, .16); color: #B47400; }
html[data-theme="dark"] .tag.amber { color: #FFC14D; }
.fab { position: fixed; right: max(16px, calc(50% - var(--maxw) / 2 + 16px)); bottom: calc(var(--tab-h) + 24px + var(--safe-b)); z-index: 26; width: 56px; height: 56px; border-radius: 18px; background: var(--grad-btn); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px rgba(var(--primary-rgb), .4); transition: transform .2s var(--spring); }
.fab:active { transform: scale(.9); }
.fab svg { width: 26px; height: 26px; }
.editor-row { display: grid; grid-template-columns: 1fr 96px 86px 34px; gap: 6px; align-items: center; margin-bottom: 8px; }
.editor-row .input { min-height: 42px; padding: 9px 10px; font-size: 14px; border-radius: 11px; }
.editor-row .rm, .field-row .rm { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 77, 94, .12); color: var(--danger); display: grid; place-items: center; }
.editor-row .rm svg, .field-row .rm svg { width: 16px; height: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 6px; align-items: center; margin-bottom: 8px; }
.field-row .input { min-height: 42px; padding: 9px 10px; font-size: 14px; border-radius: 11px; }
.img-picker { display: flex; align-items: center; gap: 12px; }
.img-picker .ip-preview { width: 84px; height: 84px; border-radius: 22px; background: var(--media-bg); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; border: 1.5px dashed rgba(var(--primary-rgb), .35); color: var(--muted); position: relative; }
.img-picker .ip-preview.required { border-color: var(--coral); background: rgba(255, 107, 115, .08); }
.img-picker .ip-preview img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(60, 40, 160, .2)); }
.img-picker .ip-preview svg { width: 28px; height: 28px; }
.img-picker .ip-preview .ip-plus { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--grad-btn); color: #fff; display: grid; place-items: center; }
.img-picker .ip-preview .ip-plus svg { width: 12px; height: 12px; }
.lib-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 10px; padding: 0 18px; }
.lib-tabs::-webkit-scrollbar { display: none; }
.lib-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lib-grid button { aspect-ratio: 1; border-radius: 16px; background: var(--surface-3); display: grid; place-items: center; padding: 8px; border: 2px solid transparent; position: relative; transition: transform .2s var(--spring), border-color .2s; }
.lib-grid button:active { transform: scale(.92); }
.lib-grid button.active { border-color: var(--primary); }
.lib-grid button img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.lib-grid button .emo { font-size: 30px; line-height: 1; }
.lib-grid button span.t { position: absolute; left: 0; right: 0; bottom: -16px; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-grid.labeled { row-gap: 26px; }
.lib-group { font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--muted); margin: 16px 0 8px; letter-spacing: .04em; text-transform: uppercase; }
.grad-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.grad-picker button { width: 38px; height: 38px; border-radius: 12px; border: 3px solid transparent; box-shadow: var(--shadow-sm); transition: transform .2s var(--spring); }
.grad-picker button:active { transform: scale(.9); }
.grad-picker button.active { border-color: var(--ink); }
.font-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--field-bg); margin-bottom: 8px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.font-opt.active { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14); }
.font-opt svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
.font-opt .fo-name { font-weight: 700; font-size: 16px; }
.font-opt .fo-sample { font-size: 12px; color: var(--muted); }
.mini-bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--grad-btn); border-radius: 6px; }
.demo-warning { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: linear-gradient(120deg, rgba(255, 196, 77, .18), rgba(255, 107, 115, .16)); border: 1px solid rgba(255, 180, 60, .4); margin-bottom: 12px; }
.demo-warning svg { width: 22px; height: 22px; color: #D98B00; flex-shrink: 0; }

@media (min-width: 600px) {
  .page { padding-left: 20px; padding-right: 20px; }
  .quick-grid, .quick-grid.compact { gap: 10px; }
  .quick { padding: 14px 6px 12px; }
  .quick .quick-media { height: 64px; }
  .quick .quick-icon { width: 62px; height: 62px; }
  .quick .quick-label { font-size: 14px; min-height: 32px; }
  .grid-2 { grid-template-columns: repeat(3, 1fr); }
  .lib-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 360px) {
  .banner .b-title { font-size: 17px; }
  .quick-grid, .quick-grid.compact { gap: 6px; }
  .quick { padding: 10px 2px 8px; border-radius: 18px; }
  .quick .quick-media { height: 46px; }
  .quick .quick-icon { width: 44px; height: 44px; }
  .quick .quick-label { font-size: 11.5px; }
  .benefit small { font-size: 9px; }
  .page-title { font-size: 20px; }
}

/* ---------- анимированные эмодзи (Lottie, набор Statet) ---------- */
.animoji { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; vertical-align: middle; }
.animoji svg { width: 100% !important; height: 100% !important; }
.animoji .af { font-style: normal; visibility: hidden; }
.animoji.fb .af { visibility: visible; }
.section-head h2 .animoji, .pc-balance-label .animoji { margin-right: 6px; }
.section-head h2 { display: inline-flex; align-items: center; }
.pc-balance-label { display: flex; align-items: center; }
.coin.coin-anim { display: inline-flex; align-items: center; gap: 3px; padding-left: 3px; }
.success-burst.anim { background: none; box-shadow: none; }
.sh-anim { width: 84px; height: 84px; margin: 0 auto 10px; }

/* ---------- видеобаннер: видео на весь фон, первый кадр сразу, плавное проявление ---------- */
.banner.banner-video { background: #F6F4F1; }
.banner.banner-video::before { display: none; }
.banner > .bv-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; opacity: 0; transform: scale(1.06);
  transition: opacity .9s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.banner-video.in > .bv-media { opacity: 1; transform: none; }
.bv-media img, .bv-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.bv-media .bv-video { opacity: 0; transition: opacity 1s ease; }
.banner-video.is-playing .bv-video { opacity: 1; }
.banner > .bv-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(249, 248, 255, .94) 0%, rgba(249, 248, 255, .78) 30%, rgba(249, 248, 255, .2) 52%, rgba(249, 248, 255, 0) 64%),
              radial-gradient(90% 80% at 0% 100%, rgba(155, 92, 255, .14), transparent 62%); }
.banner-video .b-title { max-width: 54%; }
.banner-video .b-sub { max-width: 50%; }
.banner-video .b-tag, .banner-video .b-title, .banner-video .b-sub, .banner-video .b-btn { opacity: 0; transform: translateY(10px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.banner-video.in .b-tag, .banner-video.in .b-title, .banner-video.in .b-sub, .banner-video.in .b-btn { opacity: 1; transform: none; }
.banner-video.in .b-tag { transition-delay: .15s; }
.banner-video.in .b-title { transition-delay: .25s; }
.banner-video.in .b-sub { transition-delay: .35s; }
.banner-video.in .b-btn { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .quick, .quick .quick-icon, .cat-card, .cat-card .cc-arrow { transition: none; transform: none !important; }
  .banner > .bv-media, .banner-video .b-tag, .banner-video .b-title, .banner-video .b-sub, .banner-video .b-btn { transition: none; opacity: 1; transform: none; }
}

/* ---------- BRIX: единый набор растровых иллюстраций и смысловых иконок ---------- */
.brix-icon { display: inline-block; width: var(--brix-size, 28px); height: var(--brix-size, 28px); object-fit: contain; object-position: center; vertical-align: middle; flex-shrink: 0; }
.btn .brix-icon, .icon-btn .brix-icon { width: 28px; height: 28px; }
.btn-xs .brix-icon, .btn-sm .brix-icon { width: 24px; height: 24px; }
.balance-chip > .brix-icon { width: 24px; height: 24px; }
.tab .brix-icon { width: 30px; height: 30px; transition: transform .35s var(--spring); }
.tab:active .brix-icon { transform: scale(.88); }
.tab.active .brix-icon { transform: translateY(-1px) scale(1.08); }
.section-head h2 .brix-icon, .pc-balance-label .brix-icon { margin-right: 6px; }
.benefit .brix-icon { width: 24px; height: 24px; }
.list-item .li-icon.brix-tile, .admin-tile .at-icon.brix-tile { background: none; box-shadow: none; }
.list-item .li-icon .brix-icon, .admin-tile .at-icon .brix-icon { width: 34px; height: 34px; border-radius: 0; }
.chat-head .ch-icon { background: none; }
.chat-head .ch-icon .brix-icon { width: 34px; height: 34px; }
.chat-empty > .chat-empty-image { display: block; margin: 0 auto 12px; filter: drop-shadow(0 8px 12px rgba(80, 50, 200, .14)); }
.stat-pill .brix-icon, .tag .brix-icon { width: 18px; height: 18px; }
.badge-pill .brix-icon { width: 16px; height: 16px; }
.p-media .badge-pill .brix-icon { width: 16px; height: 16px; filter: none; }
.notice > .brix-icon { width: 24px; height: 24px; margin-top: -1px; }
.chip .brix-icon { width: 22px; height: 22px; }
.admin-badge .brix-icon { width: 18px; height: 18px; }
.kpi .k-label .brix-icon { width: 24px; height: 24px; }
.brix-fallback { background: none; box-shadow: none; border-radius: 0; }
.p-fallback.brix-fallback > .brix-icon { width: 100%; height: 100%; filter: drop-shadow(0 10px 16px rgba(60, 40, 160, .18)); }
.empty > .empty-illustration { display: block; width: 110px; height: 110px; }
.support-hero-image { position: absolute; right: -2px; top: -2px; filter: drop-shadow(0 10px 16px rgba(80, 50, 200, .2)); pointer-events: none; }
.category-hero-image { position: absolute; right: 12px; bottom: 12px; width: 110px; height: 100px; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .22)); }
.sh-illustration { width: 96px; height: 96px; margin: 0 auto 14px; animation: pop .5s var(--spring); }
.pay-wait .ring .brix-icon { width: 52px; height: 52px; }
.success-burst .brix-icon { width: 96px; height: 96px; }
.img-picker .ip-preview .brix-icon { width: 40px; height: 40px; }
@media (prefers-reduced-motion: reduce) {
  .tab .brix-icon, .category-hero-image, .sh-illustration, .empty > .empty-illustration, .pay-wait .ring, .pay-wait .ring > div { animation: none; transition: none; }
}

/* ---------- Баннеры со стикерами (главная) ---------- */
.banner.sb { min-height: 192px; padding: 16px 15px 15px; color: #fff; border: 0; justify-content: flex-start; }
.banner.sb::after { background: radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, .28), transparent 60%), radial-gradient(60% 60% at 100% 100%, rgba(255, 255, 255, .18), transparent 70%); }
.banner.sb.g-grape::before { background: linear-gradient(135deg, #5B37FF 0%, #8E46FF 55%, #D95BFF 100%); }
.banner.sb.g-ocean::before { background: linear-gradient(135deg, #1D4FFF 0%, #2F86FF 50%, #2FCBFF 100%); }
.banner.sb.g-night::before { background: linear-gradient(135deg, #17123D 0%, #34207A 55%, #7A2FB8 100%); }
.banner.sb.g-mint::before { background: linear-gradient(135deg, #0B9A73 0%, #1FC08A 50%, #6CDD6A 100%); }
.banner.sb.g-candy::before { background: linear-gradient(135deg, #FF3D86 0%, #FF6FA3 50%, #FFAE6B 100%); }
.banner.sb.g-sunset::before { background: linear-gradient(135deg, #FF7B39 0%, #FF4C6B 55%, #B248FF 100%); }
.banner.sb .sb-text { position: relative; z-index: 4; max-width: 56%; margin-bottom: 12px; }
.banner.sb .b-tag { font-size: 9.5px; padding: 4px 9px; background: rgba(255, 255, 255, .22); color: #fff; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.banner.sb .b-title { max-width: none; font-size: 17px; line-height: 1.12; margin-top: 8px; text-shadow: 0 2px 12px rgba(20, 10, 60, .22); }
.banner.sb .b-sub { max-width: none; color: rgba(255, 255, 255, .88); font-size: 12px; line-height: 1.32; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.banner.sb .sb-btn { position: relative; z-index: 4; margin-top: auto; align-self: flex-start; overflow: hidden; height: 36px; padding: 0 15px; font-size: 13.5px; background: #fff; color: var(--sb-ink, #24165E); font-weight: 800; box-shadow: 0 8px 20px rgba(20, 10, 60, .25); }
.banner.sb .sb-btn svg { width: 16px; height: 16px; }
/* блик на кнопке — в цвет своего баннера */
.banner.sb .sb-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 28%, var(--sb-tint, rgba(160, 120, 255, .35)) 50%, transparent 72%); transform: translateX(-120%); }
.banner.sb.g-grape { --sb-ink: #4B23D6; --sb-tint: rgba(150, 80, 255, .32); } .banner.sb.g-ocean { --sb-ink: #1747D8; --sb-tint: rgba(47, 134, 255, .32); }
.banner.sb.g-night { --sb-ink: #3A1F86; --sb-tint: rgba(140, 80, 230, .32); } .banner.sb.g-mint { --sb-ink: #087755; --sb-tint: rgba(31, 192, 138, .34); }
.banner.sb.g-candy { --sb-ink: #D42A6E; --sb-tint: rgba(255, 90, 140, .32); } .banner.sb.g-sunset { --sb-ink: #D9383F; --sb-tint: rgba(255, 110, 80, .32); }
/* стикер и иконки — справа, за текстом */
.banner.sb > .sb-sticker { position: absolute; z-index: 2; right: -10px; bottom: -14px; width: 154px; height: 154px; filter: drop-shadow(0 12px 18px rgba(20, 10, 60, .28)); }
.banner.sb .sb-lottie { width: 100% !important; height: 100% !important; }
.banner.sb > .sb-glow { position: absolute; z-index: 0; right: -24px; bottom: -34px; width: 215px; height: 215px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 65%); }
/* иконки — за персонажем (если он на них наплывёт, он будет сверху) */
.banner.sb > .sb-icons { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sb-ic { position: absolute; width: 32px; height: 32px; border-radius: 10px; object-fit: cover; box-shadow: 0 6px 14px rgba(20, 10, 60, .26); --r: 0deg; }
/* иконки сервисов — рядом над персонажем: он их не закрывает, а на текст они не заходят */
.sb-ic0 { top: 10px; right: 8px; --r: 10deg; }
.sb-ic1 { top: 16px; right: 46px; --r: -8deg; }
.sb-ic2 { top: 8px; right: 84px; --r: 7deg; }
.sb-ic3 { top: 15px; right: 122px; --r: -10deg; }
.sb-ic4, .sb-ic5 { display: none; }
/* объёмные 3D-иконки (без фона) — без плашки, только тень по контуру */
.sb-ic[src*="/img/icons/"] { border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(20, 10, 60, .3)); }
/* затемнение боковых баннеров карусели */
.banner > .b-dim { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: rgba(14, 10, 34, .55); opacity: calc(var(--p) * .85); }
.banner.sb > .sb-spark { position: absolute; z-index: 1; width: 10px; height: 10px; background: #fff; opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.sb-spark.sp1 { top: 18px; right: 70px; } .sb-spark.sp2 { top: 120px; right: 168px; width: 8px; height: 8px; } .sb-spark.sp3 { bottom: 24px; right: 150px; width: 12px; height: 12px; }
/* до показа элементы спрятаны, при показе — «впрыгивают» по очереди */
.banner.sb .sb-text > *, .banner.sb .sb-btn { opacity: 0; transform: translateY(12px); }
.banner.sb > .sb-sticker { opacity: 0; transform: translate(34px, 26px) scale(.55) rotate(10deg); }
.banner.sb .sb-ic { opacity: 0; transform: scale(.3) rotate(calc(var(--r) - 30deg)); }
.banner.sb > .sb-glow { opacity: 0; transform: scale(.6); }
.banner.sb.in .sb-text > *, .banner.sb.in .sb-btn { animation: sbUp .55s cubic-bezier(.2, .9, .3, 1) both; }
.banner.sb.in .sb-text > :nth-child(1) { animation-delay: .05s; }
.banner.sb.in .sb-text > :nth-child(2) { animation-delay: .13s; }
.banner.sb.in .sb-text > :nth-child(3) { animation-delay: .21s; }
.banner.sb.in .sb-btn { animation-delay: .3s; }
.banner.sb.in .sb-btn::after { animation: sbShine 1.2s 1s ease-in-out both; }
.banner.sb.in > .sb-sticker { animation: sbSticker .85s .08s cubic-bezier(.2, 1.35, .45, 1) both; }
.banner.sb.in > .sb-glow { animation: sbGlowIn .7s both; }
.banner.sb.in .sb-ic { animation: sbIcon .6s var(--d) cubic-bezier(.2, 1.4, .45, 1) both; }
/* всё на баннере срабатывает один раз при показе слайда и застывает */
.banner.sb.in > .sb-spark { animation: sbTwinkle 1.6s .5s ease-in-out both; }
.banner.sb.in > .sp2 { animation-delay: .9s; } .banner.sb.in > .sp3 { animation-delay: 1.3s; }
@keyframes sbUp { to { opacity: 1; transform: none; } }
@keyframes sbSticker { to { opacity: 1; transform: none; } }
@keyframes sbGlowIn { to { opacity: 1; transform: scale(1); } }
@keyframes sbIcon { to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes sbTwinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: .95; transform: scale(1) rotate(45deg); } }
@keyframes sbShine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@media (max-width: 360px) {
  .banner.sb .b-title { font-size: 16.5px; }
  .banner.sb > .sb-sticker { width: 132px; height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .banner.sb .sb-text > *, .banner.sb .sb-btn, .banner.sb > .sb-sticker, .banner.sb .sb-ic, .banner.sb > .sb-glow { opacity: 1; transform: none; animation: none !important; }
  .banner.sb .sb-ic { transform: rotate(var(--r)); }
}

/* живые эмодзи в заголовках, плашках и пустых состояниях */
.page-title-anim { display: flex; align-items: center; gap: 8px; }
.empty .empty-anim { margin: 0 auto 14px; }
.stat-pill .animoji { margin-right: 4px; }
.notice > .animoji, .section-head h2 .animoji { flex-shrink: 0; }
/* образцы ярких фонов баннеров со стикерами в админке */
.grad-picker .g-grape { background: linear-gradient(135deg, #5B37FF, #D95BFF); } .grad-picker .g-ocean { background: linear-gradient(135deg, #1D4FFF, #2FCBFF); }
.grad-picker .g-night { background: linear-gradient(135deg, #17123D, #7A2FB8); } .grad-picker .g-mint { background: linear-gradient(135deg, #0B9A73, #6CDD6A); }
.grad-picker .g-candy { background: linear-gradient(135deg, #FF3D86, #FFAE6B); } .grad-picker .g-sunset { background: linear-gradient(135deg, #FF7B39, #B248FF); }

/* ---------- «Жидкое стекло» на карточках: полупрозрачная заливка, блик в углу и светящийся край ---------- */
.card, .quick, .p-card, .stat-tile, .rev-card, .promo-foot, .search-pill, .pay-method, .cat-row {
  border: 1px solid transparent;
  background:
    radial-gradient(120% 75% at 0% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 52%) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62)) padding-box,
    linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, .3) 34%, rgba(196, 184, 255, .55) 66%, rgba(255, 255, 255, .95) 100%) border-box;
  box-shadow: 0 10px 28px rgba(70, 50, 170, .08), 0 2px 6px rgba(70, 50, 170, .04), inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -10px 18px -14px rgba(120, 100, 255, .22);
}
.tap:active { transition: transform .15s var(--ease); }

/* ---------- Каталог ---------- */
.cat-hero { position: relative; display: flex; align-items: center; min-height: 96px; margin: 2px 0 6px; }
.cat-hero .ch-text { position: relative; z-index: 1; max-width: 68%; }
.cat-hero .page-title { margin: 6px 0 4px; font-size: 26px; background: linear-gradient(100deg, #2A1C7A, #6A3BFF 55%, #C04DFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cat-hero p { font-size: 13px; color: var(--muted); }
.cat-hero p b { color: var(--ink); }
.cat-hero .ch-neko { position: absolute; right: -6px; top: -6px; filter: drop-shadow(0 10px 16px rgba(120, 60, 200, .22)); animation: nekoIn .9s .1s cubic-bezier(.2, 1.3, .45, 1) both; }
.cat-list { display: flex; flex-direction: column; gap: 10px; }
.cat-row { --acc: 91, 75, 255; position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; cursor: pointer; animation: crIn .5s calc(var(--i) * 60ms) cubic-bezier(.2, .9, .3, 1) both; }
.cat-row::before { content: ""; position: absolute; z-index: -1; left: -40px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--acc), .22), transparent 68%); pointer-events: none; }
.cat-row:active { transform: scale(.98); }
.cr-main { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 12px; }
.cr-ic { width: 58px; height: 58px; flex-shrink: 0; border-radius: 18px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #fff, rgba(var(--acc), .14) 75%); box-shadow: inset 0 0 0 1px rgba(var(--acc), .18), 0 8px 18px rgba(var(--acc), .18); }
.cr-ic img, .cr-ic .brix-icon { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(var(--acc), .25)); transition: transform .3s var(--spring); }
.cat-row:active .cr-ic img { transform: scale(1.08) rotate(-4deg); }
.cr-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cr-count { flex-shrink: 0; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: rgb(var(--acc)); background: rgba(var(--acc), .1); }
.cr-go { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgba(var(--acc), .85), rgba(var(--acc), 1)); box-shadow: 0 6px 14px rgba(var(--acc), .3); transition: transform .3s var(--spring); }
.cr-go svg { width: 16px; height: 16px; }
.cat-row:active .cr-go { transform: translateX(3px); }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px 82px; }
.cr-chips .chip { height: 28px; font-size: 12px; padding: 0 10px; }
.cr-chips .chip img { width: 18px; height: 18px; border-radius: 5px; }
/* иконки разделов фиолетовые — подсветка тоже в фиолетовой гамме, у разделов лишь разные оттенки */
.cat-row.g-indigo { --acc: 98, 76, 255; } .cat-row.g-cyan { --acc: 110, 92, 255; } .cat-row.g-coral { --acc: 168, 84, 247; }
.cat-row.g-pink { --acc: 192, 82, 230; } .cat-row.g-violet { --acc: 140, 82, 255; } .cat-row.g-blue { --acc: 84, 96, 255; }
.cat-row.g-green { --acc: 124, 88, 250; } .cat-row.g-dark { --acc: 92, 66, 200; }
@keyframes crIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cat-row, .cat-hero .ch-neko { animation: none; } }

/* ---------- Колесо удачи ---------- */
.wheel-entry { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; cursor: pointer; color: #fff;
  background: linear-gradient(120deg, #5B37FF 0%, #A24DFF 55%, #FF5FA2 100%); box-shadow: 0 12px 26px rgba(110, 60, 255, .28); }
.wheel-entry::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 120% at 0% 0%, rgba(255, 255, 255, .28), transparent 55%); }
.wheel-entry .we-wheel { position: relative; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: 3px solid #FFD66B;
  background: conic-gradient(#5A2FE0 0 45deg, #A63FF0 0 90deg, #D23CA6 0 135deg, #5A2FE0 0 180deg, #F2A33A 0 225deg, #A63FF0 0 270deg, #D23CA6 0 315deg, #5A2FE0 0 360deg);
  box-shadow: 0 6px 14px rgba(40, 10, 90, .3), inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.wheel-entry.ready .we-wheel { animation: spin 7s linear infinite; }
.wheel-entry .we-wheel i { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6D6, #FFC94D 60%, #D98B1C); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.wheel-entry .we-title { font-family: var(--display); font-weight: 700; font-size: 16px; }
.wheel-entry .we-sub { font-size: 12.5px; opacity: .9; margin-top: 2px; }
.wheel-entry .we-go { flex-shrink: 0; height: 32px; padding: 0 14px; border-radius: 999px; display: grid; place-items: center; background: #fff; color: #4B23D6; font-weight: 800; font-size: 13px; }
.wheel-entry .we-go svg { width: 16px; height: 16px; }
.wheel-entry:not(.ready) .we-go { width: 32px; padding: 0; background: rgba(255, 255, 255, .22); color: #fff; }
.wheel-entry:active { transform: scale(.985); }

.wheel-hero { position: relative; display: flex; align-items: center; min-height: 84px; }
.wheel-hero > div { max-width: 70%; position: relative; z-index: 1; }
.wheel-hero .page-title { margin: 6px 0 4px; }
.wheel-hero .wh-neko { position: absolute; right: -4px; top: -8px; }
/* сцена: фиолетовая «студия» с лучами и звёздами, на ней — колесо с золотым ободом и гирляндой */
.card.wheel-card { position: relative; overflow: hidden; isolation: isolate; padding: 14px 14px 12px; border-radius: 28px; color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  background: radial-gradient(130% 78% at 50% 44%, #B06BFF 0%, #8A3CF0 32%, #5E1FC0 63%, #3B1088 100%);
  box-shadow: 0 24px 50px rgba(120, 40, 220, .32), inset 0 1px 0 rgba(255, 255, 255, .24); }
.wheel-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wheel-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8); opacity: .2; animation: wTwinkle 2.8s ease-in-out infinite; }
@keyframes wTwinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.25); } }
.wheel-stage { position: relative; padding: 20px 0 4px; }
.wheel-stage::before { content: ""; position: absolute; left: 50%; top: 52%; width: 86%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(225, 160, 255, .55), rgba(190, 110, 255, .2) 60%, transparent); }
.wheel-rays { position: absolute; left: 50%; top: 52%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .075) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent);
  animation: wRays 70s linear infinite; }
@keyframes wRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.wheel-empty { position: relative; padding: 70px 0; text-align: center; color: rgba(255, 255, 255, .75); }
.wheel-status { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 10px; }
.ws-pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .14); }
.ws-pill svg { width: 14px; height: 14px; color: #FFD66B; }
.ws-pill.ok { background: rgba(52, 211, 153, .22); color: #D9FFEE; border-color: rgba(52, 211, 153, .4); }
.ws-pill .animoji { margin: 0; }

.wheel-wrap { position: relative; width: min(100%, 330px); margin: 0 auto; aspect-ratio: 1; animation: wIn .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wIn { from { opacity: 0; transform: scale(.94); } }
.wheel-wrap > svg, .wheel-disc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wheel-frame { filter: drop-shadow(0 18px 26px rgba(30, 4, 60, .55)); }
.wheel-disc { will-change: transform; transform: rotate(0deg); }
.wheel-disc svg { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; animation: wDiscIn 1.1s cubic-bezier(.16, .84, .24, 1) both; }
/* сектора проявляются поверх фиолетовой заготовки и мягко доворачиваются на место */
@keyframes wDiscIn { from { opacity: 0; transform: rotate(-40deg) scale(.92); } }
.wheel-fx { pointer-events: none; }
.wl-text { font-family: var(--font); font-weight: 800; letter-spacing: -.01em; fill: #fff; paint-order: stroke; stroke: rgba(40, 6, 90, .3); stroke-width: 2px; }
.wl-letter { font-family: var(--display); font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(40, 6, 90, .32); stroke-width: 2.5px; }
.wl-text.dark, .wl-letter.dark { fill: #6B3500; stroke: rgba(255, 246, 214, .7); }
.wl-seps line { stroke: rgba(255, 255, 255, .55); stroke-width: 1.3; }
.wl-edge { fill: none; stroke: rgba(40, 4, 80, .32); stroke-width: 4; }
.wl-pegs circle { stroke: rgba(120, 66, 0, .55); stroke-width: .8; }

/* гирлянда: тихо мерцает, на прокруте бежит по кругу, при выигрыше вспыхивает */
.wheel-bulbs { position: absolute; inset: 0; pointer-events: none; }
.wheel-bulbs i { position: absolute; left: 48.4%; top: 3.82%; width: 3.2%; height: 46.18%; transform: rotate(var(--a)); transform-origin: 50% 100%; }
.wheel-bulbs b { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); will-change: opacity;
  background: radial-gradient(circle at 38% 34%, #fff 0 22%, #FFF1B0 42%, #FFB938 100%);
  box-shadow: 0 0 5px 2px rgba(255, 214, 107, .85), 0 0 12px 3px rgba(255, 170, 40, .45); opacity: .5; animation: wBulb 1.8s ease-in-out infinite; }
.wheel-bulbs i:nth-child(2n) b { animation-delay: -.9s; }
@keyframes wBulb { 0%, 100% { opacity: .38; } 50% { opacity: 1; } }
.wheel-wrap.is-spinning .wheel-bulbs b { animation: wChase .48s linear infinite; animation-delay: calc((8 - var(--k)) * -.06s); }
@keyframes wChase { 0%, 18% { opacity: 1; } 40%, 100% { opacity: .28; } }
.wheel-wrap.is-win .wheel-bulbs b { animation: wFlash .36s steps(1, end) infinite; }
.wheel-wrap.is-win .wheel-bulbs i:nth-child(2n) b { animation-delay: -.18s; }
@keyframes wFlash { 0% { opacity: 1; } 50% { opacity: .22; } }

/* выпавший сектор светится, остальные притухают */
.wf-win { opacity: 0; transition: opacity .35s ease; }
.wheel-wrap.is-win .wf-win { opacity: 1; }
.wf-dim { fill: rgba(30, 4, 60, .52); }
.wf-hl { fill: rgba(255, 255, 255, .14); stroke: #FFF6D6; stroke-width: 3.5; stroke-linejoin: round; }
.wheel-wrap.is-win .wf-hl { animation: wHl .7s ease-in-out infinite alternate; }
@keyframes wHl { from { fill: rgba(255, 255, 255, .04); stroke: #FFC94D; } to { fill: rgba(255, 255, 255, .24); stroke: #FFFFFF; } }

/* язычок: ось — центр золотой заклёпки, его отгибают штырьки (js/pages/wheel.js) */
.wheel-pointer { position: absolute; z-index: 4; left: 50%; top: -4.3%; width: 12.4%; transform: translateX(-50%); transform-origin: 50% 33.33%; will-change: transform;
  filter: drop-shadow(0 4px 5px rgba(30, 2, 60, .45)); pointer-events: none; }
.wheel-pointer svg { display: block; width: 100%; height: auto; }

.wheel-go { position: relative; margin-top: 14px; white-space: nowrap; }
.wheel-go.wheel-cta { color: #3A1600; font-family: var(--display); font-size: 15px; letter-spacing: .01em;
  background: linear-gradient(180deg, #FFEBA8 0%, #FFC94D 50%, #F5A524 100%);
  box-shadow: 0 10px 24px rgba(255, 170, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -2px 0 rgba(170, 90, 0, .3); }
.wheel-go.wheel-cta svg { width: 18px; height: 18px; }
.wheel-go.wheel-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  transform: translateX(-120%); animation: wShine 3.2s ease-in-out infinite; }
.wheel-go.wheel-cta:disabled::after { animation: none; }
@keyframes wShine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.wheel-ghost { margin-top: 8px; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .14); }
.wheel-ghost svg { width: 17px; height: 17px; }
.confetti-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; }
.letters-card { padding: 14px; }
.wl-tiles { display: flex; justify-content: center; gap: 6px; }
.wl-tile { width: 38px; height: 46px; border-radius: 12px; display: grid; place-items: center; font: 800 20px var(--display); color: rgba(91, 75, 255, .25);
  background: rgba(124, 88, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(124, 88, 255, .18); }
.wl-tile.on { color: #fff; background: linear-gradient(135deg, #6A4BFF, #C04DFF); box-shadow: 0 6px 14px rgba(110, 75, 255, .3); }
.wl-tile.new { animation: wTile .8s var(--spring); }
@keyframes wTile { 0% { transform: scale(.4) rotate(-12deg); box-shadow: 0 0 0 0 rgba(255, 201, 77, .9); } 60% { transform: scale(1.18) rotate(3deg); box-shadow: 0 0 0 8px rgba(255, 201, 77, 0); } 100% { transform: none; } }
.wt-card { padding: 12px 14px; border-radius: 18px; transition: opacity .3s, filter .3s, box-shadow .3s; }
.wt-row { gap: 12px; align-items: center; }
.wt-ic { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; }
.wt-ic .brix-icon { width: 38px; height: 38px; }
.wt-bar { height: 6px; border-radius: 6px; background: rgba(124, 88, 255, .12); overflow: hidden; margin-top: 10px; }
.wt-bar i { display: block; height: 100%; border-radius: 6px; background: var(--grad-btn); transition: width .4s var(--ease); }
.wt-reward { flex-shrink: 0; padding: 5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; color: var(--primary); background: rgba(var(--primary-rgb), .1); }
.wt-card.ready { box-shadow: 0 0 0 1.5px rgba(var(--primary-rgb), .35), 0 10px 24px rgba(var(--primary-rgb), .16); }
.wt-card.claimed { opacity: .55; filter: saturate(.55); box-shadow: none; }
.wt-card.claimed .bold { font-weight: 600; }
.wt-sep { display: flex; align-items: center; gap: 10px; margin: 6px 4px 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.wt-sep::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
/* буква в списке выигрышей и мини-колесо в меню профиля */
.mini-letter { width: 30px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 800 16px var(--display); color: #fff;
  background: linear-gradient(135deg, #6A4BFF, #C04DFF); box-shadow: 0 4px 10px rgba(110, 75, 255, .3); }
.mini-wheel { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid #FFD66B;
  background: conic-gradient(#5A2FE0 0 45deg, #A63FF0 0 90deg, #D23CA6 0 135deg, #5A2FE0 0 180deg, #F2A33A 0 225deg, #A63FF0 0 270deg, #D23CA6 0 315deg, #5A2FE0 0 360deg);
  box-shadow: 0 4px 10px rgba(90, 40, 200, .3); }
.mini-wheel i { position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6D6, #FFC94D 60%, #D98B1C); }
.wt-done { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #0B7F4C; }
.wt-done svg { width: 14px; height: 14px; }
.win-sheet { padding: 4px 4px 6px; }
/* приз на фоне медленно вращающихся лучей */
.win-art { position: relative; display: grid; place-items: center; min-height: 150px; margin-bottom: 8px; }
.win-art::before { content: ""; position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(var(--primary-rgb), .16) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(closest-side, #000 22%, transparent); mask: radial-gradient(closest-side, #000 22%, transparent); animation: spin 18s linear infinite; }
.win-sheet.big .win-art::before { background: repeating-conic-gradient(rgba(245, 165, 36, .32) 0 9deg, transparent 9deg 22.5deg); }
.win-art > * { position: relative; animation: pop .55s var(--spring); }
.win-title { font-size: 22px; }
.win-sheet.big .win-title { background: linear-gradient(95deg, #E08A00, #F5A524 40%, #FF6B73); -webkit-background-clip: text; background-clip: text; color: transparent; }
.win-letter { width: 96px; height: 110px; border-radius: 24px; display: grid; place-items: center; font: 800 56px var(--display); color: #fff;
  background: linear-gradient(135deg, #6A4BFF, #C04DFF); box-shadow: 0 14px 30px rgba(110, 75, 255, .35); }
.win-coupon { width: 160px; padding: 20px 0 16px; border-radius: 22px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #5946FF, #B45CFF 60%, #FF6B8A); box-shadow: 0 14px 30px rgba(110, 75, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.win-coupon::after { content: ""; position: absolute; inset: 6px; border-radius: 17px; border: 1.5px dashed rgba(255, 255, 255, .55); pointer-events: none; }
.win-coupon b { display: block; font: 800 42px/1 var(--display); letter-spacing: -.02em; }
.win-coupon span { display: block; margin-top: 7px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.odds-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--grad-btn); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .win-art > *, .wheel-wrap, .wl-tile.new { animation: none; } }


/* ---------- Экономный режим (html.lite): слабые телефоны и «меньше движения» ----------
   Включается в boot.js: класс производительности Telegram LOW (Android), мало ядер/памяти
   или системная настройка «уменьшить движение». Убираем всё, что нагружает видеочип постоянно:
   размытие подложки у панелей и шторок, бесконечные декоративные анимации. Вид остаётся тем же, только «плотнее». */
html.lite *, html.lite *::before, html.lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.lite .tabbar, html.lite .composer { background: var(--surface-solid); }
html.lite .topbar::before { display: none; }
html.lite .sheet-backdrop { background: rgba(10, 10, 25, .55); }
html.lite .banner .b-img, html.lite .wheel-entry.ready .we-wheel, html.lite .sb-spark, html.lite .wheel-stars i,
html.lite .wheel-rays, html.lite .tl-item.now .tl-dot, html.lite .wheel-go.wheel-cta::after { animation: none !important; }
/* гирлянда колеса в простое горит ровно; бег огней на прокруте и вспышка выигрыша остаются — они короткие */
html.lite .wheel-wrap:not(.is-spinning):not(.is-win) .wheel-bulbs b { animation: none; opacity: .8; will-change: auto; }

/* ---------- Тени без обрезки ----------
   1) Safari на iPhone обрезает тень filter: drop-shadow у картинок по рамке самой картинки (особенно когда у неё анимируется размер):
      снизу и по бокам появлялись «квадратные» края. Даём тени место — прозрачные поля вокруг картинки, компенсированные
      отрицательным отступом: размер и положение иконки не меняются, а тени есть куда растечься.
   2) Горизонтальные ленты (overflow-x: auto) режут всё, что выходит за их край, — в том числе тени карточек.
      Увеличиваем поля ленты сверху и снизу и компенсируем их отступом, чтобы вёрстка не сдвинулась. */
.p-media img, .quick .quick-icon, .cat-card .cc-icon, .cat-icon-plain, .pf-icon-plain, .cat-thumb img, .pd-media img.main,
.order-thumb img, .cr-ic img, .cr-ic .brix-icon, .img-picker .ip-preview img, .category-hero-image, .sb-ic[src*="/img/icons/"],
.p-fallback.brix-fallback > .brix-icon, .support-hero-image, .ref-hero img, .ref-hero .referral-hero-image, .banner .b-img {
  --room: 16px; box-sizing: content-box; padding: var(--room); margin: calc(-1 * var(--room));
}
.order-thumb img, .cr-ic img, .cr-ic .brix-icon, .quick .quick-icon, .cat-card .cc-icon { --room: 10px; }
.empty img { box-sizing: content-box; padding: 18px; margin: -18px auto -4px; }
.chat-empty > .chat-empty-image { box-sizing: content-box; padding: 14px; margin: -14px auto -2px; }
.hscroll, .carousel, .brand-strip, .chips { padding-top: 14px; padding-bottom: 36px; margin-top: -10px; margin-bottom: -24px; }

/* ---------- Поддержка: быстрые вопросы до обращения ---------- */
.help-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.help-topic { display: flex; align-items: center; gap: 8px; text-align: left; padding: 11px 10px; border-radius: 18px; cursor: pointer;
  font: inherit; color: var(--ink); border: 1px solid transparent; min-width: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62)) padding-box,
              linear-gradient(135deg, #fff, rgba(196, 184, 255, .55)) border-box;
  box-shadow: 0 8px 22px rgba(70, 50, 170, .07); transition: transform .2s var(--ease); }
.help-topic:active { transform: scale(.97); }
.help-topic .brix-icon { flex-shrink: 0; }
.help-topic span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-topic b { font-size: 13.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.help-topic small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.help-topic[data-topic="other"] { grid-column: 1 / -1; justify-content: center; }
html[data-theme="dark"] .help-topic { background: var(--surface-solid); border-color: var(--line); }
.help-answer { margin: 4px 0 16px; }
.help-actions { display: grid; gap: 8px; }

/* ---------- Чат: аватар поддержки и шаблоны ответов оператора ---------- */
.msg-avatar.support-avatar { background: linear-gradient(145deg, #F1EBFF, #DCD0FF); box-shadow: 0 4px 10px rgba(110, 70, 230, .22); }
.msg-avatar.support-avatar .brix-icon { width: 24px; height: 24px; }
html[data-theme="dark"] .msg-avatar.support-avatar { background: linear-gradient(145deg, #3A2E66, #261E45); }
.tpl-sheet .sheet-body { display: grid; gap: 14px; }
.tpl-group { display: grid; gap: 6px; }
.tpl-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tpl-item { text-align: left; font: inherit; font-size: 14px; line-height: 1.4; color: var(--ink); padding: 11px 13px; border-radius: 14px;
  background: var(--surface-solid); border: 1px solid var(--line); cursor: pointer; }
.tpl-item:active { background: rgba(var(--primary-rgb), .08); }
.chat-head .ch-icon.support-avatar { border-radius: 50%; background: linear-gradient(145deg, #F1EBFF, #DCD0FF); box-shadow: 0 6px 14px rgba(110, 70, 230, .22); }
.chat-head .ch-icon.support-avatar .brix-icon { width: 30px; height: 30px; }
html[data-theme="dark"] .chat-head .ch-icon.support-avatar { background: linear-gradient(145deg, #3A2E66, #261E45); }

/* ---------- Экран согласия и документы ---------- */
.page.consent { display: grid; gap: 14px; padding-top: calc(28px + var(--safe-t, 0px)); padding-bottom: calc(40px + var(--safe-b)); }
.consent-hero { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 8px 6px 4px; }
.consent-hero h1 { font-family: var(--font-display, inherit); font-size: 24px; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.consent-hero p { color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 34ch; }
.consent-note { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.consent-note.center { text-align: center; }
.legal-links .list-item .li-title { font-weight: 700; }
.legal-sheet .legal-text { font-size: 14px; line-height: 1.55; }
.legal-links .list-item > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted-2, var(--muted)); }