/* ============================================================
   Liquid Glass — стеклянный слой интерфейса. v3: вернули разделение.
   Урок двух предыдущих версий: поверхности, почти равные фону, сливаются
   в один лист (v2), а серая полупрозрачность с крупными пятнами читается
   как дешёвый пластик (v1). Здесь: карточка заметно СВЕТЛЕЕ фона, под
   ней мягкая тень, контур и светлый верхний край — слои читаются; цветные
   пятна живут по краям экрана и не трогают шапку.
   Подключается после style.css и уточняет его правила.
   ============================================================ */
:root {
  --glass-bg: rgba(26, 23, 17, .68);
  --glass-bg-strong: rgba(16, 14, 10, .88);
  --glass-line: rgba(255, 255, 255, .16);
  --glass-hi: rgba(255, 255, 255, .1);
  --glass-blur: 18px;
  --glass-sat: 1.35;
  --radius-lg: 24px;
  --glow-soft: 0 12px 32px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, .66);
  --glass-bg-strong: rgba(255, 255, 255, .85);
  --glass-line: rgba(66, 52, 20, .12);
  --glass-hi: rgba(255, 255, 255, .9);
  --glow-soft: 0 10px 26px rgba(90, 70, 20, .12);
}
/* клиенты без backdrop-filter получают плотное стекло без размытия */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgb(24, 22, 17); --glass-bg-strong: rgba(16, 14, 10, .98); }
}

/* Цветовое поле: только по краям и снизу — шапка остаётся чистой. */
body::before {
  content: ''; position: fixed; inset: -38%; z-index: 0; pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(52rem 36rem at 112% 112%, rgba(86, 138, 255, .08), transparent 58%),
    radial-gradient(56rem 42rem at -18% 88%, rgba(233, 191, 102, .08), transparent 56%),
    radial-gradient(42rem 32rem at 44% 132%, rgba(47, 213, 117, .05), transparent 60%);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(52rem 36rem at 112% 112%, rgba(86, 138, 255, .06), transparent 58%),
    radial-gradient(56rem 42rem at -18% 88%, rgba(233, 191, 102, .08), transparent 56%);
}

/* ---------- шапка: тёмное стекло ---------- */
.app-header {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* ---------- док вкладок: компактный, с чёткой поверхностью ---------- */
@media (max-width: 899.98px) {
  .tabbar {
    margin: 5px calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(10px + var(--safe-left));
    /* safe-bottom учтён в отступе снаружи (bottom/margin): второй платёж
       раздувал док на высоту «домашней полосы» iPhone, иконки уезжали вверх */
    padding: 4px;
    border: 1px solid var(--glass-line); border-radius: 24px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  }
  .tab { border-radius: 15px; }
  .tab.active::before { display: none; }
  .tab.active { background: var(--gold-soft); }
}
@media (min-width: 900px) {
  .tabbar {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border-right: 1px solid var(--glass-line);
  }
  .tab.active { background: var(--gold-soft); }
}

/* ---------- кнопки: капсула, чуть светлее карточки ---------- */
.btn {
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--glass-line);
}
.btn:hover { border-color: rgba(255, 255, 255, .17); }
.btn-primary {
  background: linear-gradient(160deg, #F3D78E 0%, #E9BF66 30%, #D8A744 65%, #C08B2E 100%);
  border-color: rgba(243, 215, 142, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 6px 18px rgba(233, 191, 102, .22);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-success {
  background: #49ce94;
  border-color: rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px rgba(73, 206, 148, .18);
}

/* ---------- поля: чуть темнее карточки, с внутренним краем ---------- */
.select, .input {
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--glass-line);
  border-radius: 13px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
}
.search {
  border-radius: 999px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--glass-line);
}
.filter-panel { border-radius: 16px; background: rgba(0, 0, 0, .2); border-color: var(--glass-line); }
.pay-input, .pay-row { background: rgba(0, 0, 0, .25); border-color: var(--glass-line); border-radius: 13px; }
:root[data-theme="light"] .select,
:root[data-theme="light"] .input,
:root[data-theme="light"] .search,
:root[data-theme="light"] .filter-panel,
:root[data-theme="light"] .pay-input,
:root[data-theme="light"] .pay-row { background: rgba(255, 255, 255, .75); }

/* ---------- карточки: светлее фона, с тенью — слои читаются ---------- */
.tcard, .advice-card, .hist-card, .rating-row, .form-card, .confirm-card,
.pay-card, .lock-card, .sessbar, .wslide {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glow-soft);
}
.tcard:hover { border-color: rgba(255, 255, 255, .17); }
.chart-box { background: rgba(0, 0, 0, .22); border-color: var(--glass-line); border-radius: var(--radius-lg); }
.locked-peek { background: rgba(0, 0, 0, .22); }

/* внутренние сетки: плитки чуть темнее карточки, швы волосяные */
.facts, .sh-stats, .ac-stats, .hc-tables { background: rgba(0, 0, 0, .3); border-radius: 16px; }
.facts > div, .sh-stats > div, .ac-stats > div, .hc-tables > div { background: rgba(0, 0, 0, .24); }

/* ---------- мягкие вставки ---------- */
.ac-bet {
  border-radius: 14px; background: rgba(0, 0, 0, .24);
}
.howto:not(.compact) { background: rgba(0, 0, 0, .2); border: 1px solid var(--glass-line); border-radius: 14px; }
.confirm-more .more-body { border-color: var(--glass-line); }
.confirm-warn, .offer-state.stale, .access-row, .auth-row, .pay-warn { border-radius: 14px; }
.seg { background: rgba(0, 0, 0, .28); border: 1px solid var(--glass-line); border-radius: 999px; padding: 3px; }
.seg button { border-radius: 999px; }
.seg button.on { background: rgba(255, 255, 255, .1); }
.strat-toggle, .cur-btn, .lang-btn, .theme-btn { border-radius: 14px; }
.pay-plan { border-radius: 16px; }
.chip { background: rgba(0, 0, 0, .22); border-color: var(--glass-line); }

/* ---------- рейтинги: полоса с мягким свечением ---------- */
.rating-row { border-radius: 18px; }
.rating-bar { border-radius: 999px; }
.rating-bar i { border-radius: 999px; box-shadow: 0 0 10px rgba(233, 191, 102, .3); }

/* ---------- числа-фишки: объём ---------- */
.numchip.red { background: linear-gradient(180deg, #d3495b, #a81e2f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.numchip.black { background: linear-gradient(180deg, #2b2b33, #16161a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.numchip.green { background: linear-gradient(180deg, #24a764, #14703e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }

/* ---------- тосты и оверлеи ---------- */
.toast {
  border-radius: 16px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-line);
}
.overlay-head {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom-color: rgba(255, 255, 255, .06);
}
.overlay-body {
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(233, 191, 102, .04), transparent 60%),
    var(--bg2);
}

/* миниатюра стола: оправа */
.tc-thumb { border-radius: 14px; border-color: var(--glass-line); }

/* уважение к системной настройке «меньше прозрачности» */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--card-solid); --glass-bg-strong: var(--card-solid); }
  .app-header, .tabbar, .toast, .tcard, .advice-card, .hist-card, .rating-row,
  .form-card, .confirm-card, .pay-card, .lock-card, .sessbar {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ============================================================
   Светлая тема: все тёмные вставки v3 получают тёплые светлые
   аналоги — иначе «стекло» выглядит как серая плёнка, а график
   как выключенный (случай 18.09: chart-box серел на белой карточке).
   ============================================================ */
:root[data-theme="light"] .chart-box { background: rgba(64, 50, 20, .05); }
:root[data-theme="light"] .locked-peek { background: rgba(64, 50, 20, .05); }
:root[data-theme="light"] .seg { background: rgba(46, 36, 16, .10); }
:root[data-theme="light"] .seg button.on { background: rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66); }
:root[data-theme="light"] .chip { background: rgba(64, 50, 20, .045); }
:root[data-theme="light"] .ac-bet { background: rgba(64, 50, 20, .05); }
:root[data-theme="light"] .howto { background: rgba(64, 50, 20, .045); }
:root[data-theme="light"] .dd-btn { background: rgba(64, 50, 20, .05); }
:root[data-theme="light"] .dd-menu { background: rgba(255, 255, 255, .94); }
:root[data-theme="light"] .tab.active { background: var(--gold-soft); }
:root[data-theme="light"] .facts,
:root[data-theme="light"] .sh-stats,
:root[data-theme="light"] .ac-stats,
:root[data-theme="light"] .hc-tables { background: rgba(25, 27, 33, .1); }
:root[data-theme="light"] .facts > div,
:root[data-theme="light"] .sh-stats > div,
:root[data-theme="light"] .ac-stats > div,
:root[data-theme="light"] .hc-tables > div { background: #fffdf9; }

/* ============================================================
   Premium pass («дороже»): глубина, сатин, тёплые отсветы.
   Слой поверх системы Codex: их токены не меняем — добавляем материал.
   ============================================================ */
body::before {
  background:
    radial-gradient(60rem 40rem at 112% 108%, rgba(233, 191, 102, .16), transparent 60%),
    radial-gradient(54rem 40rem at -14% -12%, rgba(233, 191, 102, .07), transparent 55%),
    radial-gradient(46rem 34rem at 45% 132%, rgba(73, 206, 148, .05), transparent 60%),
    radial-gradient(50rem 36rem at 70% -20%, rgba(72, 159, 255, .06), transparent 55%);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(60rem 40rem at 112% 108%, rgba(233, 191, 102, .18), transparent 60%),
    radial-gradient(54rem 40rem at -14% -12%, rgba(233, 191, 102, .08), transparent 55%),
    radial-gradient(46rem 34rem at 45% 132%, rgba(18, 116, 71, .05), transparent 60%);
}

/* карточки: сатиновый верх, глубже тень; hover — тёплая кайма и лёгкий подъём
   (только на устройствах с hover: урок со звездой избранного) */
.tcard, .advice-card, .hist-card, .rating-row, .form-card, .confirm-card,
.pay-card, .lock-card, .sessbar, .wslide {
  border-color: rgba(255, 255, 255, .10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 42%),
    var(--glass-bg);
}
:root[data-theme="light"] .tcard, :root[data-theme="light"] .advice-card,
:root[data-theme="light"] .hist-card, :root[data-theme="light"] .rating-row,
:root[data-theme="light"] .form-card, :root[data-theme="light"] .confirm-card,
:root[data-theme="light"] .pay-card, :root[data-theme="light"] .lock-card,
:root[data-theme="light"] .sessbar, :root[data-theme="light"] .wslide {
  border-color: rgba(46, 36, 16, .10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 40%),
    var(--glass-bg);
}
@media (hover: hover) {
  .tcard {
    transition: transform .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  }
  .tcard:hover {
    transform: translateY(-2px);
    border-color: rgba(233, 191, 102, .32);
    box-shadow:
      inset 0 1px 0 var(--glass-hi),
      0 16px 36px rgba(0, 0, 0, .5),
      0 0 0 1px rgba(233, 191, 102, .08);
  }
  :root[data-theme="light"] .tcard:hover {
    border-color: rgba(128, 91, 22, .30);
    box-shadow:
      inset 0 1px 0 var(--glass-hi),
      0 16px 34px rgba(90, 70, 20, .16);
  }
}

/* главное действие: глубже сатин и свечение */
.btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(111, 77, 18, .35),
    0 8px 26px rgba(233, 191, 102, .30);
}
.btn-primary:hover { filter: brightness(1.07) saturate(1.04); }

/* корона в шапке: мягкое свечение */
.app-logo { filter: drop-shadow(0 1px 6px rgba(233, 191, 102, .28)); }

/* баланс сессии — золотом */
.sb-bal { color: var(--gold); }
:root[data-theme="light"] .sb-bal { color: var(--gold-deep); }

/* активная вкладка: тёплое свечение подложки */
.tab.active { box-shadow: 0 0 20px rgba(233, 191, 102, .12); }

/* ============================================================
   Шапка-оверлей: контент прокручивается под полупрозрачным стеклом,
   лого крупнее. Слой поверх Codex.
   ============================================================ */
:root { --header-h: 58px; }

.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  background:
    linear-gradient(180deg, rgba(12, 10, 7, .58), rgba(12, 10, 7, .30)),
    transparent;
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border-bottom: 1px solid rgba(233, 191, 102, .10);
}
:root[data-theme="light"] .app-header {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, .88), rgba(255, 252, 245, .62)),
    transparent;
  border-bottom: 1px solid rgba(128, 91, 22, .16);
}

/* логотип заметнее */
.app-logo { height: 30px; width: auto; aspect-ratio: 310.23 / 80; }

/* контент начинается ниже шапки, но при скролле уходит под неё */
#views { padding-top: calc(var(--header-h) + var(--safe-top) + 8px); }

@media (min-width: 900px) {
  :root { --header-h: 64px; }
  .app-header {
    padding: var(--safe-top) calc(24px + var(--safe-right)) 0 calc(24px + var(--safe-left));
  }
  .app { grid-template-rows: minmax(0, 1fr); }
  .tabbar { grid-row: 1; padding-top: calc(var(--header-h) + var(--safe-top) + 12px); }
  #views { grid-column: 2; grid-row: 1; padding-top: calc(var(--header-h) + var(--safe-top) + 12px); }
}

/* уважение к «меньше прозрачности»: шапка становится плотной */
@media (prefers-reduced-transparency: reduce) {
  .app-header { background: var(--card-solid); }
  :root[data-theme="light"] .app-header { background: var(--card-solid); }
}

/* ============================================================
   Стекло для дока и карточек: всё — один материал.
   ============================================================ */

/* карточки: более прозрачное дымчатое стекло — тёплые поля фона
   дышат сквозь них */
:root { --glass-bg: rgba(26, 23, 17, .46); }
:root[data-theme="light"] { --glass-bg: rgba(255, 253, 248, .55); }

/* плавающий док на мобиле: стекло поверх контента, как шапка */
@media (max-width: 899.98px) {
  .tabbar {
    position: fixed;
    left: calc(10px + var(--safe-left));
    right: calc(10px + var(--safe-right));
    bottom: calc(8px + var(--safe-bottom));
    z-index: 45;
    margin: 0;
    border: 1px solid var(--glass-line);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(233, 191, 102, .07), rgba(26, 23, 17, .55) 40%),
      rgba(20, 18, 14, .55);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    box-shadow: inset 0 1px 0 var(--glass-hi), 0 12px 30px rgba(0, 0, 0, .5);
  }
  :root[data-theme="light"] .tabbar {
    background:
      linear-gradient(180deg, rgba(233, 191, 102, .10), rgba(255, 253, 248, .60) 40%),
      rgba(255, 253, 248, .55);
    box-shadow: inset 0 1px 0 var(--glass-hi), 0 12px 30px rgba(90, 70, 20, .16);
  }
  #views { padding-bottom: calc(86px + var(--safe-bottom)); }
}

/* десктопный сайдбар: то же стекло, но спокойнее */
@media (min-width: 900px) {
  .tabbar {
    background: linear-gradient(180deg, rgba(233, 191, 102, .05), rgba(16, 14, 10, .55) 45%);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
  }
  :root[data-theme="light"] .tabbar {
    background: linear-gradient(180deg, rgba(255, 253, 248, .55), rgba(255, 253, 248, .75) 45%);
  }
}

/* меньше прозрачности: док и сайдбар плотные */
@media (prefers-reduced-transparency: reduce) {
  .tabbar { background: var(--card-solid); }
}

/* ============================================================
   Переливающийся фон: медленный дрейф цветовых полей.
   Стекло (шапка, док, карточки) размывает его — прозрачность
   становится видимой. Дёшево для GPU: только transform.
   ============================================================ */
body { background: var(--bg); }

body::before {
  inset: -38%;
  z-index: 0;
  background:
    radial-gradient(44rem 30rem at 20% 24%, rgba(233, 191, 102, .30), transparent 64%),
    radial-gradient(36rem 26rem at 76% 10%, rgba(255, 105, 125, .15), transparent 62%),
    radial-gradient(44rem 30rem at 82% 76%, rgba(72, 159, 255, .17), transparent 62%),
    radial-gradient(40rem 28rem at 24% 82%, rgba(192, 139, 46, .26), transparent 64%);
  animation: ambient-a 44s ease-in-out infinite alternate;
  will-change: transform;
}
body::after {
  content: ''; position: fixed; inset: -32%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(30rem 22rem at 62% 30%, rgba(243, 215, 142, .16), transparent 60%),
    radial-gradient(26rem 20rem at 28% 62%, rgba(255, 96, 121, .11), transparent 60%);
  mix-blend-mode: screen;
  animation: ambient-b 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ambient-a {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(7deg) scale(1.10) translate3d(2%, -1.5%, 0); }
  100% { transform: rotate(-6deg) scale(1.06) translate3d(-2%, 2%, 0); }
}
@keyframes ambient-b {
  0%   { transform: rotate(0deg) scale(1) translate3d(0, 0, 0); }
  100% { transform: rotate(8deg) scale(1.12) translate3d(-3%, 2%, 0); }
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(40rem 28rem at 20% 24%, rgba(217, 166, 46, .20), transparent 62%),
    radial-gradient(34rem 24rem at 76% 10%, rgba(233, 19, 64, .06), transparent 60%),
    radial-gradient(42rem 28rem at 82% 76%, rgba(0, 107, 239, .08), transparent 60%),
    radial-gradient(38rem 26rem at 24% 82%, rgba(192, 139, 46, .16), transparent 62%);
}
:root[data-theme="light"] body::after {
  mix-blend-mode: normal; opacity: .7;
  background:
    radial-gradient(30rem 22rem at 62% 30%, rgba(243, 215, 142, .20), transparent 60%),
    radial-gradient(26rem 20rem at 28% 62%, rgba(255, 150, 165, .07), transparent 60%);
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* ============================================================
   Фильтры: окно-карточка поверх контента (как деталь стола).
   ============================================================ */
.overlay #filterPanel {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  background: none; border: none; padding: 0; margin: 0;
}
.fp-group { display: grid; gap: 8px; }
@media (min-width: 900px) {
  .overlay #filterPanel { gap: 22px; }
  .overlay .fp-group {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 6px 16px; align-items: start;
  }
  .fp-label { padding-top: 6px; }
  .overlay #filterPanel .chips { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
}

/* ============================================================
   Окно фильтров: отделка. Карточка = материал бренда:
   тёплая кайма шапки, золотые тики у групп, сатин на чипах.
   ============================================================ */
#filterOverlay .overlay-head {
  border-bottom: 1px solid rgba(233, 191, 102, .22);
  padding-bottom: 12px;
}
#filterOverlay .overlay-title { gap: 10px; color: var(--text); }
#filterOverlay .overlay-title .ico { color: var(--gold); filter: drop-shadow(0 1px 4px rgba(233, 191, 102, .3)); }
#filterOverlay .overlay-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 26%),
    var(--bg2);
  padding: 22px 26px 30px;
  gap: 0;
}
#filterOverlay .fp-group {
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
}
#filterOverlay .fp-group:first-child { border-top: none; padding-top: 2px; }
#filterOverlay .fp-label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 550;
}
#filterOverlay .fp-label::before {
  content: ''; width: 3px; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  opacity: .85;
}
#filterOverlay .chip { min-height: 36px; }
#filterOverlay .chip.on {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    0 2px 10px rgba(233, 191, 102, .14);
}
:root[data-theme="light"] #filterOverlay .overlay-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6), transparent 26%),
    var(--bg2);
}
:root[data-theme="light"] #filterOverlay .chip.on {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 2px 10px rgba(90, 70, 20, .12);
}
@media (max-width: 899.98px) {
  #filterOverlay .overlay-body { padding: 18px 16px 30px; }
}

/* ============================================================
   Окно фильтров: анимации. Карточка всплывает, группы —
   каскадом, чипы отвечают на курсор. reduced-motion — без них.
   ============================================================ */
@keyframes filterCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes filterGroupIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
#filterOverlay .overlay-head,
#filterOverlay .overlay-body {
  animation: filterCardIn .28s var(--ease-out) both;
}
#filterOverlay .fp-group {
  animation: filterGroupIn .32s var(--ease-out) both;
}
#filterOverlay .fp-group:nth-child(2) { animation-delay: .07s; }
#filterOverlay .fp-group:nth-child(3) { animation-delay: .14s; }
#filterOverlay .chip {
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
#filterOverlay .chip:hover { transform: translateY(-1px); }
#filterOverlay .chip:active { transform: scale(.96); }
#filterOverlay .overlay-head .btn { transition: transform .25s var(--ease-out); }
#filterOverlay .overlay-head .btn:hover { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  #filterOverlay .overlay-head, #filterOverlay .overlay-body, #filterOverlay .fp-group { animation: none !important; }
}

/* Дропдауны выбора в профиле: валюта и язык — как «По перевесу» */
.choice-dd { min-width: 240px; }
.choice-dd .dd-btn { justify-content: flex-start; }
.choice-dd .dd-menu {
  min-width: 100%; width: max-content;
  max-width: min(420px, calc(100vw - 64px));
  text-align: left;
}
.dd-opt { display: flex; align-items: center; gap: 10px; color: var(--text); }
.dd-opt .dd-opt-label {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.dd-opt .cur-sym, .dd-opt .lang-flag {
  flex: 0 0 34px; text-align: center; display: inline-block;
  font-size: 1.0625rem; line-height: 1;
}
.dd-opt .cur-name, .dd-opt .lang-name {
  flex: 1; color: var(--text); font-size: 0.875rem; white-space: nowrap;
}
.choice-dd .dd-btn .cur-sym, .choice-dd .dd-btn .lang-flag {
  display: inline-block; margin-right: 7px; font-size: 1.0625rem; line-height: 1;
}
.dd-opt .cur-name, .dd-opt .lang-name { flex: 1; }

/* Поля фона — слой 0, весь интерфейс — слой 1: видно в любом движке,
   включая Safari/WebView, где отрицательный z прячется за фон body. */
#app { position: relative; z-index: 1; }

/* ============================================================
   Десктоп: шапка — плотная стеклянная полоса во всю ширину,
   контент и рельс — под ней. Никаких прозрачных пустот.
   ============================================================ */
@media (min-width: 900px) {
  .app-header {
    height: 64px; padding: 0 24px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    backdrop-filter: blur(18px) saturate(1.35);
    border-bottom: 1px solid rgba(233, 191, 102, .16);
  }
  .app-title { position: static; }
  .app-logo { height: 26px; }
  #views { padding-top: 64px; }
  .tabbar { padding-top: 76px; }
}