/* ═══════════════════════════════════════════════════════════════════════
   ALICE — CHERRY NOIR: тёплый графит, вишня, шампань-золото

   Общий визуальный слой всех страниц мини-аппа. Стилизует только
   существующие семантические классы: разметка, обработчики и API-запросы
   страниц не меняются.

   Материалы:
   — титан: глубокие графитовые поверхности #241419…#331C24,
     тонкая светлая грань сверху, мягкая ambient-тень;
   — рубин: ЕДИНСТВЕННЫЙ акцент (#B3244A / #D6335F) — кнопки,
     активные состояния, цена, бейджи. Никогда — заливка всего экрана;
   — стекло: только там, где оно улучшает интерфейс — нижняя навигация,
     плавающие элементы, поля ввода. Информационные карточки — плотные.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* титановая шкала */
  --bg:#171114; --bg2:#1B1216; --bg3:#211419;
  --surface:#241419; --surface2:#2A181F; --surface3:#331C24;
  --input:#1B1216;
  --line:rgba(255,255,255,.07); --hairline:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.12);
  /* рубин */
  --ruby:#B3244A; --ruby-deep:#7E1C38; --ruby-light:#D6335F;
  --ruby-tint:rgba(211,51,95,.12); --ruby-glow:rgba(179,36,74,.30);
  /* металл */
  --metal:#B79BA0; --metal-light:#D8C3C7;
  /* текст */
  --text:#F5ECEC; --text-muted:#C4A6AD;
  --dim:#C4A6AD; --dim2:#96757F;
  /* функциональные цвета — приглушённые, чтобы рубин остался
     единственным loud-акцентом интерфейса */
  --gold:#D9B98A; --green:#5BBE8C; --red:#E15D75;
  --ember:#D9B98A; --moss:#5BBE8C;
  /* легаси-имена акцентов: страницы используют --cyan/--magenta
     как «цвет действия» — теперь это рубин */
  --cyan:#D6335F; --magenta:#A11E41;
  --glow-cyan:rgba(211,51,95,.26); --glow-mag:rgba(179,36,74,.26);
  --card:#241419; --card-raised:#2A181F;
  --am-shadow:0 18px 44px -24px rgba(0,0,0,.9);
  --am-panel:rgba(30,17,22,.82); --am-panel-strong:rgba(36,20,25,.92);
  --am-line:rgba(255,255,255,.08);
  --am-text:#F5ECEC; --am-muted:#C4A6AD;
  --font:'Manrope',system-ui,-apple-system,sans-serif;
  --disp:'Unbounded','Manrope',sans-serif;
}

:root[data-theme="light"]{
  /* светлая тема — тот же рубин на светлом титане */
  --bg:#FAF5F0; --bg2:#FDF9F4; --bg3:#FFFFFF;
  --surface:#FFFFFF; --surface2:#F8EFE7; --surface3:#F3E6DA;
  --input:#FFFFFF;
  --line:rgba(64,24,36,.09); --hairline:rgba(64,24,36,.10);
  --line-strong:rgba(64,24,36,.15);
  --text:#2E1B20; --text-muted:#8A6A72;
  --dim:#8A6A72; --dim2:#AC939B;
  --ruby:#B3244A; --ruby-deep:#7E1C38; --ruby-light:#B3244A;
  --ruby-tint:rgba(179,36,74,.08); --ruby-glow:rgba(179,36,74,.18);
  --cyan:#B3244A; --magenta:#7E1C38;
  --glow-cyan:rgba(179,36,74,.16); --glow-mag:rgba(179,36,74,.14);
  --card:#FFFFFF; --card-raised:#FDF8F2;
  --am-shadow:0 16px 36px -22px rgba(64,24,36,.28);
  --am-panel:rgba(255,255,255,.82); --am-panel-strong:rgba(255,255,255,.95);
  --am-line:rgba(64,24,36,.10);
  --am-text:#2E1B20; --am-muted:#8A6A72;
  --gold:#A9834F; --green:#3E9E6F; --red:#C64B62;
}

/* ── Сцена ──────────────────────────────────────────────────────────
   Почти чёрный фон с двумя очень мягкими рубиновыми утечками света
   по углам и лёгкой зернистостью. Свечение существует, чтобы у стекла
   было что преломлять — не как декорация. */
html{background:#171114}
body{
  min-height:100vh;
  color:var(--text);
  font-family:var(--font);
  background:
    radial-gradient(38rem 24rem at 108% -8%, rgba(179,36,74,.16), transparent 62%),
    radial-gradient(30rem 22rem at -14% 30%, rgba(126,28,56,.12), transparent 64%),
    radial-gradient(44rem 30rem at 50% 116%, rgba(179,36,74,.07), transparent 66%),
    linear-gradient(180deg,#1D1418 0%,#171114 60%) !important;
  -webkit-font-smoothing:antialiased;
}
/* тонкая металлическая зернистость в верхней трети — уходит в ноль,
   чтобы не шуметь под текстом */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.17) .5px,transparent .7px);
  background-size:7px 7px;
  mask-image:linear-gradient(to bottom,black,transparent 68%);
}
/* виньетка: края чуть темнее центра — глубина без затемнения контента */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.34) 100%);
}
.wrap,.page,main,.app,.screen{position:relative;z-index:1}

/* ── Титановые поверхности ───────────────────────────────────────────
   Один материал на все карточки приложения: диагональный градиент от
   #2C1A21 к #1E1116, светлая грань по верхней кромке (инсет 1px),
   тёмная по нижней и мягкая ambient-тень под объектом. */
.card,.tile,.bal,.phero,.hero-card,.tier-card,.locked-card,
.row-card,.review-card,.ref-card,.user-card,.about-card,.deal-card,
.listing-card,.market-card,.panel,.empty,.head,.hero,.section-card,
.summary-card,.calc,.role-card,.rep-card,.tx,.cmt,
.balc,.cc,.row,.hist-card,.result-card,.ask-row,.cmd-row{
  border:1px solid var(--line) !important;
  background:linear-gradient(165deg,#2C1A21 0%,#241419 55%,#1E1116 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 18px 44px -24px rgba(0,0,0,.9) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
:root[data-theme="light"] .card,:root[data-theme="light"] .tile,
:root[data-theme="light"] .bal,:root[data-theme="light"] .phero,
:root[data-theme="light"] .hero-card,:root[data-theme="light"] .tier-card,
:root[data-theme="light"] .locked-card,:root[data-theme="light"] .row-card,
:root[data-theme="light"] .review-card,:root[data-theme="light"] .ref-card,
:root[data-theme="light"] .user-card,:root[data-theme="light"] .about-card,
:root[data-theme="light"] .deal-card,:root[data-theme="light"] .listing-card,
:root[data-theme="light"] .market-card,:root[data-theme="light"] .panel,
:root[data-theme="light"] .empty,:root[data-theme="light"] .head,
:root[data-theme="light"] .hero,:root[data-theme="light"] .section-card,
:root[data-theme="light"] .summary-card,:root[data-theme="light"] .calc,
:root[data-theme="light"] .role-card,:root[data-theme="light"] .rep-card,
:root[data-theme="light"] .tx,:root[data-theme="light"] .cmt,
:root[data-theme="light"] .balc,:root[data-theme="light"] .cc,
:root[data-theme="light"] .row,:root[data-theme="light"] .hist-card,
:root[data-theme="light"] .result-card,:root[data-theme="light"] .ask-row,
:root[data-theme="light"] .cmd-row{
  background:linear-gradient(165deg,#FFFFFF 0%,#FFFCF7 55%,#F8EFE7 100%) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 14px 32px -22px rgba(64,24,36,.3) !important;
}
.card,.deal-card,.listing-card,.market-card{border-radius:22px !important}
.empty{color:var(--dim) !important;border-radius:22px !important}
.empty b{color:var(--text) !important}

/* ── Кнопки: три уровня ──────────────────────────────────────────────
   Primary — рубин: вертикальный градиент со светлой верхней гранью.
   Secondary — титан. Tertiary — прозрачное стекло (см. .chip/.opt).
   Нажатие везде одинаковое: осадка до .97, без подпрыгивания. */
button,.submit,.buy-btn,.add,.snd,.primary,.action-btn,.btn-primary,
.btn-secondary,.tile,.card,.main-feature,.cta-card{
  transition:transform .18s cubic-bezier(.22,.9,.3,1),
             filter .18s cubic-bezier(.22,.9,.3,1),
             box-shadow .18s cubic-bezier(.22,.9,.3,1) !important;
}
button:active,.submit:active,.buy-btn:active,.add:active,.snd:active,
.primary:active,.action-btn:active,.btn-primary:active,.btn-secondary:active,
.cta-card:active,.tile:active,.card:active,.main-feature:active{
  transform:scale(.97) !important; filter:brightness(1.07);
}
.submit,.buy-btn,.add,.snd,.primary,.action-btn,.btn-primary,.grant-btn{
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:linear-gradient(180deg,#D6335F 0%,#B3244A 52%,#7E1C38 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 12px 28px -12px rgba(211,51,95,.5) !important;
}
.submit:disabled,.buy-btn:disabled,.btn-primary:disabled,.snd:disabled{
  opacity:.45; filter:saturate(.6); box-shadow:none; cursor:default;
}
.btn-secondary{
  color:var(--text) !important;
  border:1px solid var(--line-strong) !important;
  background:linear-gradient(180deg,#2E1B23 0%,#21131A 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px -16px rgba(0,0,0,.8) !important;
}
.submit,.btn-primary{min-height:52px;border-radius:16px !important;font-weight:800 !important}
.add{border-radius:14px !important}

/* ── Поля ввода: тёмные титановые «колодцы» ────────────────────────── */
input,textarea,select,.srch input,.bar input,.field-input{
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  background:linear-gradient(180deg,#180E12,#1B1216) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 2px 6px rgba(0,0,0,.35) !important;
}
:root[data-theme="light"] input,:root[data-theme="light"] textarea,
:root[data-theme="light"] select,:root[data-theme="light"] .srch input,
:root[data-theme="light"] .bar input,:root[data-theme="light"] .field-input{
  background:#FDF9F3 !important;
  box-shadow:inset 0 1px 2px rgba(64,24,36,.06) !important;
}
input:focus,textarea:focus,select:focus,.srch input:focus,.bar input:focus,
.field-input:focus{
  border-color:rgba(211,51,95,.62) !important;
  box-shadow:0 0 0 4px rgba(211,51,95,.12),inset 0 2px 6px rgba(0,0,0,.3) !important;
  outline:none;
}

/* ── Чипы и сегменты: tertiary-стекло ──────────────────────────────── */
.chip,.opt,.sortb,.seg-item,.catchip,.chat-pick-btn,.cbtn{
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
  background:rgba(255,255,255,.035) !important;
}
.chip.on,.opt.on,.sortb.on,.seg-item.active,.catchip.on{
  color:#fff !important;
  border-color:rgba(211,51,95,.5) !important;
  background:linear-gradient(180deg,rgba(211,51,95,.2),rgba(179,36,74,.12)) !important;
  box-shadow:inset 0 0 0 1px rgba(211,51,95,.12),0 6px 18px -10px rgba(211,51,95,.35) !important;
}

/* ── Нижняя навигация: плавающее стекло ────────────────────────────── */
.nav{
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:26px !important;
  background:rgba(24,14,18,.78) !important;
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06) !important;
}
:root[data-theme="light"] .nav{
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 18px 40px -20px rgba(64,24,36,.35),inset 0 1px 0 #fff !important;
}
.nav a,.nav-item{color:var(--dim2) !important}
.nav a.on,.nav a.active,.nav-item.active{color:var(--ruby-light) !important}
.nav a.on .ni,.nav-item.active .ni{
  filter:drop-shadow(0 2px 8px rgba(211,51,95,.45));
}
.nav .plus .ni,.nav a.plus{
  background:linear-gradient(180deg,#D6335F,#7E1C38) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 12px 26px -10px rgba(211,51,95,.55) !important;
  color:#fff !important;
}

/* ── Статусы сделок (deals.html): понятность без палитры ─────────────
   active — рубин, pending — латунь, completed — приглушённый изумруд,
   cancelled/draft — графит. Форма бейджа одинаковая, меняется только цвет. */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--font) !important;
  border:1px solid transparent}
.badge.ember{background:rgba(217,185,138,.13) !important;color:#D9BC85 !important;
  border-color:rgba(217,185,138,.32) !important}
.badge.moss{background:rgba(91,190,140,.11) !important;color:#83D6AF !important;
  border-color:rgba(91,190,140,.3) !important}
.badge.red{background:rgba(225,93,117,.12) !important;color:#EA8397 !important;
  border-color:rgba(225,93,117,.32) !important}
.badge.muted{background:rgba(196,166,173,.1) !important;color:#9BA0A8 !important;
  border-color:rgba(196,166,173,.22) !important}

/* шаги визарда и прогресс */
.step-dot,.step-dot.done,.step-dot.active{background:var(--ruby) !important;
  box-shadow:0 0 12px rgba(211,51,95,.5) !important}
.step-line{background:var(--line) !important}
.step-line.done{background:var(--ruby) !important}
.progress-seg{background:var(--line) !important}
.progress-seg.done,.progress-seg.final{background:linear-gradient(90deg,#B3244A,#D6335F) !important}
.seg{border:1px solid var(--line) !important;background:#1B1216 !important}
.role-card.active{border-color:rgba(211,51,95,.55) !important;
  background:linear-gradient(165deg,rgba(211,51,95,.13),#1E1116 70%) !important}
.role-icon,.i,.av,.row .ic,.row-icon{
  color:var(--ruby-light) !important;
  background:linear-gradient(180deg,rgba(211,51,95,.2),rgba(211,51,95,.06)) !important;
  border:1px solid rgba(211,51,95,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* ── Чат (chat.html): рубин — свои сообщения, титан — чужие ────────── */
.head{background:rgba(24,14,18,.92) !important;border-bottom:1px solid var(--line) !important}
.msgs{background:transparent !important}
.msg.bot{border:1px solid var(--line) !important;background:#241419 !important}
.msg.user{background:linear-gradient(180deg,#A11E41,#7E1C38) !important;color:#fff}
.bar{background:rgba(23,13,17,.94) !important;border-top:1px solid var(--line) !important}
.bar .snd{width:48px !important;height:48px !important;border-radius:15px !important;display:grid !important;place-items:center}

/* ── Профиль / статистика: цифры — главный элемент ─────────────────── */
.stats-row,.pstats{gap:8px !important}
.stat,.pstats>div{background:linear-gradient(170deg,#28161D,#1D1015) !important;
  border:1px solid var(--line) !important;border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important}
.stat-value,.pstats b{color:#fff !important}
.stat-value strong,.pos,.rank{color:var(--ruby-light) !important}
.hero-tier,.hero-value,.tier-price{color:var(--ruby-light) !important}
.tier-card:has(.buy-btn){border-color:rgba(211,51,95,.3) !important}
.locked-emoji{filter:grayscale(1) brightness(1.5)}

/* служебные ссылки и подписи */
.sub,.subtitle,.hero-sub,.row-hint,.field-label,.hint,.muted{color:var(--dim) !important}
.title{font-size:27px !important;line-height:1.05 !important;font-weight:800 !important;
  letter-spacing:-.03em !important}
.subtitle{font-size:13px !important;line-height:1.45 !important}
.glabel,.group-label{color:var(--dim2) !important;font-size:10px !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;margin:20px 4px 10px !important}
.row-arrow,.parr,.ar,.balc .ar{color:var(--ruby-light) !important}
.balc .v,.cc .t{color:var(--text) !important}
.deal-amount,.total .v{color:var(--ruby-light) !important}
.save-btn,.slider-btn{border-radius:14px !important;
  background:rgba(211,51,95,.13) !important;color:#E4536C !important;
  border:1px solid rgba(211,51,95,.3) !important}
.period-btn.active{background:rgba(211,51,95,.14) !important;color:#fff !important;
  border-color:rgba(211,51,95,.5) !important}
.row{min-height:64px !important;padding:12px 14px !important;margin-bottom:9px !important}
.cc .i{width:48px !important;height:48px !important;border-radius:15px !important;margin-bottom:14px !important}
.balc{display:flex !important;align-items:center;justify-content:space-between;
  padding:16px 18px !important;margin:16px 0 !important;text-decoration:none;
  color:var(--text) !important;border-radius:19px !important}
.balc .l{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.balc .v{font-size:18px;font-weight:800;margin-top:5px}
.cta-card{border-radius:22px !important;padding:20px !important}
.cta-plus{width:46px !important;height:46px !important;border-radius:15px !important;
  background:rgba(255,255,255,.08) !important;color:#fff !important}
.ov-back,.back,.ic button,.hd .back{
  border:1px solid var(--line-strong) !important;
  background:linear-gradient(180deg,#2A181F,#241419) !important;
  color:var(--text) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 20px -14px rgba(0,0,0,.9) !important;
}
.ui-icon{width:24px;height:24px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── Появление экранов: спокойный подъём ───────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .screen.on .hero,.screen.on .bal,.screen.on .tile,.screen.on .card,
  .screen.on .main-feature,.screen.on .pro-feature{
    animation:ti-rise .32s cubic-bezier(.22,.9,.3,1) both;
  }
  .screen.on .bal{animation-delay:.05s}
  .screen.on .tile{animation-delay:.08s}
  .screen.on .main-feature{animation-delay:.06s}
  @keyframes ti-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* светлая тема: белый логотип на светлом фоне нечитаем */
:root[data-theme="light"] .brand b{
  color:var(--text) !important;-webkit-text-fill-color:var(--text) !important}
:root[data-theme="light"] .head{background:rgba(255,255,255,.94) !important}
:root[data-theme="light"] .toast{background:rgba(255,255,255,.94)}
:root[data-theme="light"] .msg.user{color:#fff}
.msg.user{color:#fff}

/* ── Выбранные состояния на остальных страницах: единый рубиновый выбор ── */
.chip.selected,.fbtab.on,.filter-tab.active,.select-toggle.on,
.role-card.selected,.cat-card.selected,.model-chip.selected{
  color:#fff !important;
  border-color:rgba(211,51,95,.55) !important;
  background:linear-gradient(180deg,rgba(211,51,95,.2),rgba(179,36,74,.1)) !important;
  box-shadow:inset 0 0 0 1px rgba(211,51,95,.12) !important;
}
.tpl.on{color:#fff !important;border-color:transparent !important;
  background:linear-gradient(180deg,#D6335F,#7E1C38) !important}
.sw.on{background:linear-gradient(90deg,#B3244A,#D6335F)}

/* ── 3D-иконки из спрайта: тень под объектом даёт CSS ──────────────── */
.i3d{width:26px;height:26px;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.tile .ti .i3d{width:27px;height:27px}
.nav a .ni .i3d{width:23px;height:23px}
.nav a.on .ni .i3d{filter:drop-shadow(0 3px 9px rgba(211,51,95,.5))}
.nav .plus .i3d{width:26px;height:26px}
.lk.on .ico{color:var(--ruby-light) !important;fill:currentColor}

/* ── Узкие экраны ──────────────────────────────────────────────────── */
@media (max-width:360px){
  .wrap,.page{padding-left:12px !important;padding-right:12px !important}
  .tile{min-height:100px}
}

/* ═══════════════════════════════════════════════════════════════════════
   ОБЩИЕ КОМПОНЕНТЫ МАРКЕТ-СТРАНИЦ (index.html / market.html)
   Раскладка и внутренняя типографика поверх материала из секций выше.
   ═══════════════════════════════════════════════════════════════════════ */

.top{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 18px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.05em;
  color:#fff !important;-webkit-text-fill-color:#fff !important;background:none !important}
.brand span{font-size:10px;color:var(--dim2);letter-spacing:.24em;text-transform:uppercase;margin-top:5px;font-weight:600}
.ic{display:flex;gap:8px}
.ic button{width:42px;height:42px;border:none;border-radius:13px;color:var(--metal-light);
  display:grid;place-items:center;cursor:pointer}
.ic button svg{width:20px;height:20px}

/* шапка-баннер: фото под рубиново-титановой вуалью */
.hero{position:relative;height:186px;border-radius:26px !important;overflow:hidden;margin-bottom:18px}
.hero>img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;
  filter:saturate(.8) contrast(1.06) brightness(.85)}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,11,16,.06) 22%,rgba(24,11,16,.5) 68%,rgba(24,11,16,.9) 100%)}
.hero .cap{position:absolute;left:18px;bottom:16px;right:18px}
.hero .cap h2{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.01em;color:#fff}
.hero .cap p{font-size:12.5px;color:#DEC9CD;margin-top:4px}
.hero .tag{position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:700;padding:5px 11px;
  border-radius:999px;color:#F5ECEC;letter-spacing:.06em;display:inline-flex;align-items:center;gap:5px;
  background:rgba(23,13,17,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

/* premium balance card: матовый титан, крупная цифра, рубиновая утечка света
   в правом верхнем углу. Не красная плашка — тёмная карта с характером. */
.bal{border-radius:26px !important;padding:22px !important;position:relative;overflow:hidden;
  background:linear-gradient(155deg,#2D1B22 0%,#2A181F 48%,#1E1116 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.45),
    0 24px 50px -26px rgba(0,0,0,.95),0 0 44px -28px rgba(211,51,95,.4) !important}
.bal:after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(211,51,95,.22),transparent 65%)}
.bal .lbl{font-size:10px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase;font-weight:700}
.bal .amt{font-family:var(--disp);font-weight:300;font-size:50px;line-height:1;margin:12px 0 2px;
  display:flex;align-items:flex-start;gap:3px;color:#fff;letter-spacing:-.02em}
.bal .amt .cur{font-size:26px;font-weight:400;margin-top:7px;color:var(--ruby-light)}
.bal .amt .dec{font-size:20px;color:var(--dim);margin-top:9px}
.bal .id{font-size:11.5px;color:var(--dim2);margin-top:10px}
.bal .add{position:absolute;right:18px;bottom:18px;z-index:3;height:40px;padding:0 16px;
  border:none;border-radius:13px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px}

/* плитки-шорткаты: тёмный титан, объёмная иконка-чип */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
.gamerail{display:flex;gap:10px;overflow-x:auto;margin:0 -16px 18px;padding:0 16px 4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.gamerail::-webkit-scrollbar{display:none}
.gcard{flex:0 0 148px;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:210px;padding:12px;border-radius:22px;text-decoration:none;color:#fff;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#1E1116 center/cover no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 16px 28px -20px rgba(0,0,0,.9)}
.gcard:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.82))}
.gcard b,.gcard span{position:relative;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.gcard b{font-size:16px;font-weight:800;letter-spacing:-.03em}
.gcard span{margin-top:2px;font-size:11px;color:rgba(255,255,255,.82);font-weight:600}
.gcard:active{transform:scale(.97)}
.tile{border-radius:20px !important;padding:14px 6px 12px;text-align:center;cursor:pointer;
  position:relative;overflow:hidden}
.tile span{font-size:11.5px;color:var(--text);font-weight:600}
.tile .ti{width:46px;height:46px;margin:0 auto 9px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(180deg,#2E1B23,#20131A);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.45),
    0 8px 16px -10px rgba(0,0,0,.7)}

.sec{display:flex;align-items:center;justify-content:space-between;margin:0 2px 13px}
.sec h3{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:700}
.sec a{font-size:12.5px;color:var(--ruby-light);text-decoration:none;font-weight:600;cursor:pointer}

.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:12px;
  cursor:pointer;white-space:nowrap;min-height:38px;display:inline-flex;align-items:center}

.list{display:flex;flex-direction:column;gap:12px}
.card{cursor:pointer;position:relative;overflow:hidden;padding:15px 16px}
.card .cat{font-size:10.5px;font-weight:700;color:var(--ruby-light);letter-spacing:.08em;
  margin-bottom:7px;display:inline-flex;align-items:center;gap:5px;text-transform:uppercase}
.card h4{font-size:15.5px;font-weight:700;line-height:1.25;margin-bottom:8px;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.3em*2)}
.card .price{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ruby-light);
  margin-bottom:11px;letter-spacing:-.01em}
.card .foot{display:flex;align-items:center;justify-content:space-between;padding-top:11px;
  border-top:1px solid var(--line)}
.au{display:flex;align-items:center;gap:8px;min-width:0}
.au .av{width:30px;height:30px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#F5ECEC;
  background:linear-gradient(160deg,#3B242D,#331C24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.06)}
.au .nm{display:flex;flex-direction:column;min-width:0}
.au .nm b{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au .rep{font-size:11px;color:var(--dim);display:flex;gap:7px;margin-top:1px}
.au .rep .p{color:var(--green);font-weight:700}.au .rep .m{color:var(--red);font-weight:700}
.meta{display:flex;gap:12px;font-size:12px;color:var(--dim);flex:0 0 auto}
.meta span{display:flex;align-items:center;gap:4px}
.tbadge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:7px;font-size:9.5px;
  font-weight:700;letter-spacing:.4px;text-transform:uppercase;vertical-align:middle;white-space:nowrap}

/* заголовки экранов и поля */
.hd{display:flex;align-items:center;gap:12px;margin:6px 0 20px}
.hd .back{width:42px;height:42px;border-radius:13px;font-size:18px;display:grid;place-items:center;cursor:pointer}
.hd h2{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:.01em}
.field{margin-bottom:16px}
.field label{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px;font-weight:600}
.field input,.field textarea{width:100%;border-radius:14px;padding:14px;font-size:15px;
  outline:none;font-family:var(--font)}
.field textarea{min-height:90px;resize:vertical}
.row{display:flex;gap:10px}.row>*{flex:1}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{padding:10px 14px;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer}
.catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.catgrid .opt{text-align:center}
.submit{width:100%;margin-top:8px}
.err{color:var(--red);font-size:13px;margin-top:10px;text-align:center;min-height:18px}

/* детали объявления */
.dcat{font-size:11px;font-weight:700;color:var(--ruby-light);letter-spacing:.08em;
  margin-bottom:10px;text-transform:uppercase}
.dtitle{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1.2;margin-bottom:12px}
.dprice{font-family:var(--disp);font-weight:700;font-size:27px;color:var(--ruby-light);margin-bottom:16px}
.ddesc{font-size:14.5px;line-height:1.55;color:var(--text);opacity:.92;margin-bottom:20px;white-space:pre-wrap}
.dauthor{border-radius:20px;padding:16px;margin-bottom:18px;display:flex;align-items:center;gap:12px;
  border:1px solid var(--line) !important;
  background:linear-gradient(165deg,#2C1A21,#1E1116) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 14px 36px -24px rgba(0,0,0,.9) !important}
.dauthor .av{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-weight:800;font-size:19px;color:#F5ECEC;
  background:linear-gradient(160deg,#3B242D,#331C24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.06)}
.dauthor .info b{font-size:16px}.dauthor .info .rep{font-size:13px;margin-top:3px;display:flex;gap:10px}
.dact{display:flex;gap:10px}
.dact button{flex:1;height:50px;border:none;border-radius:16px;font-weight:700;font-size:14px;cursor:pointer}
.dact .msg{color:#fff !important;border:1px solid rgba(255,255,255,.14) !important;
  background:linear-gradient(180deg,#D6335F,#7E1C38) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -12px rgba(211,51,95,.5) !important}
.dact .deal{color:var(--text) !important;border:1px solid var(--line-strong) !important;
  background:linear-gradient(180deg,#2E1B23,#21131A) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07) !important}
.dextra{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dextra button{flex:1;min-width:calc(50% - 4px);height:44px;border:none;border-radius:13px;
  font-size:12.5px;font-weight:600;cursor:pointer;color:var(--text);
  border:1px solid var(--line) !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important}
.dextra button:active{transform:scale(.97)}
.dextra .del{color:var(--red) !important;border-color:rgba(225,93,117,.35) !important}
.dextra button.faved,.dextra button.promo{color:var(--gold) !important;border-color:rgba(217,185,138,.35) !important}
.dextra button.bump{color:var(--ruby-light) !important;border-color:rgba(211,51,95,.35) !important}

/* пустые состояния и поиск */
.empty{text-align:center;padding:40px 16px}
.empty b{display:block;font-size:15px;margin-bottom:6px}
.empty span{font-size:13px;color:var(--dim2)}
.srch{position:relative;margin-bottom:12px}
.srch input{width:100%;height:48px;padding:0 40px 0 16px;border:none;border-radius:15px;
  font-family:var(--font);font-size:14.5px;outline:none}
.srch input::placeholder{color:var(--dim2)}
.srch button{position:absolute;right:6px;top:6px;width:36px;height:36px;border:none;border-radius:12px;
  cursor:pointer;background:transparent;color:var(--dim2);display:none}
.srch.has button{display:grid;place-items:center}

/* тосты */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(16px);
  background:rgba(30,17,22,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:var(--text);padding:12px 20px;border-radius:15px;font-size:14px;font-weight:600;
  border:1px solid var(--line-strong);
  box-shadow:0 16px 40px -16px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transition:.22s;z-index:50;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.t-ok{box-shadow:0 16px 40px -16px rgba(0,0,0,.8),0 0 0 1px var(--line-strong),inset 3px 0 0 var(--green)}
.toast.t-err{box-shadow:0 16px 40px -16px rgba(0,0,0,.8),0 0 0 1px var(--line-strong),inset 3px 0 0 var(--red)}

/* нижняя навигация: раскладка; материал — в секии выше */
.nav{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);width:min(430px,94%);display:flex;justify-content:space-around;
  padding:10px 8px;z-index:20}
.nav a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:600;
  text-decoration:none;flex:1;cursor:pointer;position:relative;min-height:46px;justify-content:center}
.nav a .ni{font-size:19px;display:grid;place-items:center}
.nav .plus{margin-top:-24px}
.nav .plus .ni{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:26px}
.ndot{position:absolute;top:2px;right:calc(50% - 18px);width:8px;height:8px;border-radius:50%;
  background:var(--ruby-light);box-shadow:0 0 10px rgba(211,51,95,.8);border:2px solid rgba(24,14,18,.95)}

/* ═══════════════════════════════════════════════════════════════════════
   СВЕТЛАЯ ТЕМА — СЦЕНА И ДОБОР КОМПОНЕНТОВ (фикс «кусками»)
   Раньше у светлой темы не было своей сцены: body/html оставались
   тёмными (!important выше), белые карточки плавали на чёрном,
   а текст вне карточек (--text тёмный) на чёрном не читался.
   Здесь: мягкая светло-серая сцена с теми же рубиновыми утечками
   света (на порядок тише), плюс светлые версии компонентов,
   которые были зашиты тёмными без light-варианта.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"]{background:#FAF5F0}
:root[data-theme="light"] body{
  background:
    radial-gradient(38rem 24rem at 108% -8%, rgba(179,36,74,.05), transparent 62%),
    radial-gradient(30rem 22rem at -14% 30%, rgba(126,28,56,.035), transparent 64%),
    radial-gradient(44rem 30rem at 50% 116%, rgba(179,36,74,.025), transparent 66%),
    linear-gradient(180deg,#FDF8F2 0%,#FAF5F0 60%) !important;
}
:root[data-theme="light"] body::before{
  background:radial-gradient(ellipse at center,transparent 55%,rgba(64,24,36,.05) 100%)}
:root[data-theme="light"] body::after{opacity:.05;
  background-image:radial-gradient(rgba(64,24,36,.4) .5px,transparent .7px)}

/* вторичные кнопки, «Сделка», кнопки «назад» и иконки шапки:
   светлый титан вместо чёрных плашек */
:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .dact .deal,
:root[data-theme="light"] .ov-back,:root[data-theme="light"] .back,
:root[data-theme="light"] .ic button{
  background:linear-gradient(180deg,#FFFFFF 0%,#F3E6DA 100%) !important;
  box-shadow:inset 0 1px 0 #fff,0 10px 24px -16px rgba(64,24,36,.35) !important;
}
/* продавец в деталях объявления — был тёмной плашкой с тёмным текстом */
:root[data-theme="light"] .dauthor{
  background:linear-gradient(165deg,#FFFFFF 0%,#F8EFE7 100%) !important;
  box-shadow:inset 0 1px 0 #fff,0 14px 32px -22px rgba(64,24,36,.3) !important;
}
/* статистика и баланс: светлые плашки, тёмные цифры
   (сумма баланса была белой на белой карточке) */
:root[data-theme="light"] .stat,:root[data-theme="light"] .pstats>div{
  background:linear-gradient(170deg,#FFFFFF,#FAF5F0) !important;
  box-shadow:inset 0 1px 0 #fff,0 10px 24px -18px rgba(64,24,36,.3) !important;
}
:root[data-theme="light"] .stat-value,:root[data-theme="light"] .pstats b{
  color:var(--text) !important}
:root[data-theme="light"] .bal .amt{color:var(--text) !important}
/* сегменты, активная роль, иконка-чип плиток, мелочи */
:root[data-theme="light"] .seg{background:#F3E6DA !important}
:root[data-theme="light"] .role-card.active{
  background:linear-gradient(165deg,rgba(211,51,95,.10),rgba(211,51,95,.03) 70%) !important}
:root[data-theme="light"] .tile .ti{
  background:linear-gradient(180deg,#FFFFFF,#F1E4D8);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(64,24,36,.05),
    0 8px 16px -10px rgba(64,24,36,.25)}
:root[data-theme="light"] .cta-plus{background:rgba(179,36,74,.10) !important;
  color:var(--ruby) !important}
:root[data-theme="light"] .period-btn.active{color:#7E1C38 !important}
:root[data-theme="light"] .save-btn,:root[data-theme="light"] .slider-btn{
  color:#B3244A !important}
:root[data-theme="light"] .ndot{border-color:#fff}
:root[data-theme="light"] .locked-emoji{filter:grayscale(1);opacity:.55}
:root[data-theme="light"] .toast{
  box-shadow:0 16px 40px -16px rgba(64,24,36,.35),inset 0 1px 0 #fff}
/* чат: светлый пузырь собеседника и светлая панель ввода */
:root[data-theme="light"] .msg.bot{background:#FFFFFF !important}
:root[data-theme="light"] .bar{background:rgba(255,255,255,.92) !important}
/* бейджи статусов: тёмный текст на усиленных тинтах — читаемо на белом */
:root[data-theme="light"] .badge.ember{background:rgba(217,185,138,.18) !important;
  color:#8A6D35 !important;border-color:rgba(169,131,79,.45) !important}
:root[data-theme="light"] .badge.moss{background:rgba(91,190,140,.16) !important;
  color:#2F8F62 !important;border-color:rgba(62,158,111,.4) !important}
:root[data-theme="light"] .badge.red{background:rgba(225,93,117,.14) !important;
  color:#B23A50 !important;border-color:rgba(198,75,98,.4) !important}
:root[data-theme="light"] .badge.muted{background:rgba(196,166,173,.14) !important;
  color:#5F636E !important;border-color:rgba(150,117,127,.35) !important}

/* ═══ CHERRY NOIR · состояния кнопок и мелочи (волна дизайна 1) ═══
   Единые интерактивные состояния: нажатие, отключённость, загрузка.
   Haptic-отклик навешивается скриптом hap.js-логики на страницах. */
::selection{background:#B3244A;color:#fff}
button,[class*="btn"],.submit,.chip,.tile,.navb,.tab-b,.obtn,.snd{
  -webkit-tap-highlight-color:transparent;
}
button:active,[class*="btn"]:active,.submit:active,.chip:active,.tile:active,
.navb:active,.tab-b:active,.obtn:active,.snd:active{
  transform:scale(.975);
  transition:transform .08s ease;
}
button,[class*="btn"],.submit,.chip,.tile,.navb,.tab-b,.obtn,.snd{
  transition:transform .12s ease, filter .15s ease, opacity .15s ease;
}
button:hover,[class*="btn"]:hover,.submit:hover{filter:brightness(1.06)}
button[disabled],[class*="btn"][disabled],.submit[disabled],
button.disabled,[class*="btn"].disabled,.submit.disabled{
  opacity:.5;pointer-events:none;
}
:focus-visible{outline:2px solid #D9B98A;outline-offset:2px}
/* состояние загрузки для главных кнопок: <button class="is-loading"> */
.is-loading{position:relative !important;color:transparent !important;pointer-events:none}
.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:cn-spin .7s linear infinite;
}
@keyframes cn-spin{to{transform:rotate(360deg)}}
/* золотая волосная линия — премиальный разделитель в баннерах */
.gold-hair{height:1px;background:linear-gradient(90deg,transparent,rgba(217,185,138,.65),transparent)}
/* пустое состояние с действием (единый компонент) */
.empty .eact{margin-top:14px}
:root[data-theme="light"] .tile .ti{color:#B3244A}
:root[data-theme="light"] .navb .ni,:root[data-theme="light"] .nav a .ni{color:#8A6A72}

/* ── премиум-иконки (пак «Алиса • иконки») ── */
.icn{width:20px;height:20px;object-fit:contain;vertical-align:-5px;margin-right:3px;flex:none}
img.i3d{object-fit:contain}
.ni img.i3d{width:24px;height:24px}
.eic img.ico{width:52px;height:52px;object-fit:contain}
.empty img.eicp{width:74px;height:74px;object-fit:contain;display:block;margin:2px auto 8px}
button img.icn{filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}

/* ═══════════════════════════════════════════════════════════════════════
   СТЕКЛО — деликатный гласс-слой поверх титана (волна glass, 2026-10-24)
   Только крупные неподвижные поверхности: нижняя навигация, тосты,
   модалки и шиты, плавающие плашки, hero-карточка PRO, чипы поверх
   фото баннеров, кнопки шапки. Карточки ленты и списков остаются
   плотными (у них выше явный backdrop-filter:none) — стекла «чуть».
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --glass-bg:linear-gradient(165deg,rgba(52,29,37,.62),rgba(29,16,21,.72));
  --glass-bg-strong:linear-gradient(165deg,rgba(58,32,41,.84),rgba(31,18,23,.90));
  --glass-line:rgba(233,205,150,.18);
  --glass-hi:inset 0 1px 0 rgba(245,236,236,.13);
  --glass-shadow:0 24px 54px -22px rgba(0,0,0,.85);
  --glass-blur:blur(18px) saturate(1.3);
  --glass-blur-sm:blur(12px) saturate(1.3);
}
:root[data-theme="light"]{
  --glass-bg:linear-gradient(165deg,rgba(255,255,255,.62),rgba(253,243,233,.58));
  --glass-bg-strong:linear-gradient(165deg,rgba(255,255,255,.86),rgba(253,246,238,.90));
  --glass-line:rgba(169,131,79,.22);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.8);
  --glass-shadow:0 22px 48px -22px rgba(64,24,36,.32);
}
/* утилитарное стекло: .glass — панели, .glass-strong — модалки/навигация */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:var(--glass-shadow),var(--glass-hi);
}
.glass-strong{
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-line);
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:var(--glass-shadow),var(--glass-hi);
}
/* нижняя навигация и тосты — главное стекло приложения */
.nav{
  background:var(--glass-bg) !important;
  border-color:var(--glass-line) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  box-shadow:var(--glass-shadow),var(--glass-hi) !important;
}
:root[data-theme="light"] .nav{
  background:var(--glass-bg) !important;
  border-color:var(--glass-line) !important;
  box-shadow:var(--glass-shadow),var(--glass-hi) !important;
}
.toast{
  background:var(--glass-bg-strong) !important;
  border-color:var(--glass-line) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  box-shadow:var(--glass-shadow),var(--glass-hi) !important;
}
/* плавающая плашка pull-to-refresh (index) */
.ptr{
  background:var(--glass-bg-strong) !important;
  border:1px solid var(--glass-line) !important;
  backdrop-filter:var(--glass-blur-sm) !important;
  -webkit-backdrop-filter:var(--glass-blur-sm) !important;
  box-shadow:var(--glass-shadow),var(--glass-hi) !important;
}
/* шапка главной: круглые кнопки действий — стекло */
.ic button{
  background:rgba(36,20,25,.55) !important;
  border:1px solid rgba(245,236,236,.10) !important;
  backdrop-filter:var(--glass-blur-sm) !important;
  -webkit-backdrop-filter:var(--glass-blur-sm) !important;
  box-shadow:var(--glass-hi) !important;
}
:root[data-theme="light"] .ic button{
  background:rgba(255,255,255,.6) !important;
  border-color:rgba(169,131,79,.18) !important;
}
/* модалка подтверждения (index) и карточка онбординга: шит — стекло,
   подложка — блюр */
#cfm{
  background:rgba(12,6,9,.55) !important;
  backdrop-filter:blur(9px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(9px) saturate(1.2) !important;
}
#cfm .box,.onb-card{
  background:var(--glass-bg-strong) !important;
  border:1px solid var(--glass-line) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  box-shadow:var(--glass-shadow),var(--glass-hi) !important;
}
:root[data-theme="light"] body #cfm .box{
  background:var(--glass-bg-strong) !important;
}
/* веб-вход: шторка и карточка — стекло (в Telegram гейт скрыт) */
.wl{
  background:rgba(23,15,18,.80) !important;
  backdrop-filter:blur(14px) saturate(1.25) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25) !important;
}
:root[data-theme="light"] .wl{background:rgba(250,245,240,.78) !important}
.wl-card{
  background:var(--glass-bg-strong) !important;
  border-color:var(--glass-line) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  box-shadow:var(--glass-shadow),var(--glass-hi) !important;
}
/* hero: ALICE PRO — стекло вместо плотной заливки; блик и рамка целы */
.pro-feature{
  background:var(--glass-bg) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
}
/* чипы поверх фото баннеров */
.hero .tag{
  background:rgba(23,13,17,.52) !important;
  border-color:rgba(245,236,236,.18) !important;
  backdrop-filter:var(--glass-blur-sm) !important;
  -webkit-backdrop-filter:var(--glass-blur-sm) !important;
}
.hero.ad-offer .ad-kicker{
  background:rgba(23,13,17,.50) !important;
  border-color:rgba(233,205,150,.35) !important;
  backdrop-filter:var(--glass-blur-sm) !important;
  -webkit-backdrop-filter:var(--glass-blur-sm) !important;
}
/* фолбэк: браузер без backdrop-filter — плотная заливка палитры */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nav,.toast,.ptr,#cfm .box,.onb-card,.wl-card,.pro-feature,.glass,.glass-strong{
    background:var(--surface2) !important;
  }
  .ic button{background:var(--surface2) !important}
  #cfm{background:rgba(0,0,0,.66) !important}
  .wl{background:var(--bg) !important}
}
/* уважаем системную «уменьшенную прозрачность» */
@media (prefers-reduced-transparency:reduce){
  .nav,.toast,.ptr,#cfm,#cfm .box,.onb-card,.wl,.wl-card,.pro-feature,.glass,.glass-strong,
  .hero .tag,.hero.ad-offer .ad-kicker,.ic button{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .nav,.toast,.ptr,#cfm .box,.onb-card,.wl-card,.pro-feature,.ic button,.glass,.glass-strong{
    background:var(--surface2) !important;
  }
  #cfm{background:rgba(0,0,0,.78) !important}
  .wl{background:var(--bg) !important}
}