/* Liquid Glass — мягкое прозрачное «жидкое стекло» (агент 2, 07.10.2026).

   Стекло — только у плавающего слоя управления: боковые панели, верхняя и нижняя строки, переключатели, меню,
   всплывающие сообщения. Содержимое страниц остаётся на обычных карточках — читаемость важнее.
   - Материал: полупрозрачная заливка, сильное размытие с насыщенностью, блик по верхней кромке, отражение по нижней,
     тонкая светлая кромка, мягкая тень. Прозрачность и размытие — из «Оформления» (--ga, --ga2, --blur).
   - «Линза» выделения в переключателях, вкладках и меню плавно переезжает к новому пункту целиком, не растягиваясь
     (nk-glass.js). Капли и SVG-фильтр слияния убраны по просьбе пользователя (07.10.2026, агент 1): движение спокойное.
   - Меню проявляются у нажатой кнопки коротким сдвигом; в верхней строке телефона при прокрутке появляется мягкий край.
   - «Уменьшить прозрачность» — плотные панели; меньше движения (data-reduce: «Уменьшить движение» в системе или
     выбор в профиле) — без анимаций; «повысить контраст» — плотнее. */

:root {
  --lg-a: calc(var(--ga) * .8);              /* заливка стекла — прозрачнее прежней, читаемость держит размытие */
  --lg-a2: calc(var(--ga2) * .93);           /* плотное стекло: меню, окна */
  --lg-blur: calc(var(--blur) + 8px);
  --lg-sat: 190%;
  --lg-hi: rgb(255 255 255 / .9);            /* блик по верхней кромке */
  --lg-lo: rgb(255 255 255 / .4);            /* отражение по нижней */
  --lg-edge: rgb(255 255 255 / .55);         /* тонкая кромка */
  --lg-glow: rgb(255 255 255 / .5);          /* свет сверху */
  --lg-shade: 0 1px 1px rgb(16 20 30 / .04), 0 14px 34px -14px rgb(16 20 30 / .26);
  --lg-lens: #ffffff;                        /* линза выделения в переключателях */
  --lg-lens-shade: 0 1px 2px rgb(16 20 30 / .1), 0 3px 10px -3px rgb(16 20 30 / .14);
  --lg-tint-a: .11;                          /* линза-подсветка цветом акцента (меню, вкладки) */
  --lg-ease: var(--ease);
  --lg-spring: var(--spring);                /* мягкое замедление без перелёта (прежняя пружина перелетала на 8 %) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-hi: rgb(255 255 255 / .2); --lg-lo: rgb(255 255 255 / .06); --lg-edge: rgb(255 255 255 / .09); --lg-glow: rgb(255 255 255 / .06);
    --lg-shade: 0 1px 1px rgb(0 0 0 / .3), 0 18px 42px -14px rgb(0 0 0 / .72);
    --lg-lens: #2b323f; --lg-lens-shade: 0 1px 2px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .08); --lg-tint-a: .2;
  }
}
:root[data-theme="dark"] {
  --lg-hi: rgb(255 255 255 / .2); --lg-lo: rgb(255 255 255 / .06); --lg-edge: rgb(255 255 255 / .09); --lg-glow: rgb(255 255 255 / .06);
  --lg-shade: 0 1px 1px rgb(0 0 0 / .3), 0 18px 42px -14px rgb(0 0 0 / .72);
  --lg-lens: #2b323f; --lg-lens-shade: 0 1px 2px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .08); --lg-tint-a: .2;
}

/* ---------- материал ---------- */
.glass {
  background: linear-gradient(180deg, var(--lg-glow), transparent 44px), rgb(var(--glass-rgb) / var(--lg-a));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(1.04);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(1.04);
  border-color: transparent;
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), inset 0 0 0 1px var(--lg-edge), var(--lg-shade);
}
/* большие панели с текстом — чуть плотнее */
.side.glass, .adm-side.glass, .vbar.glass { background: linear-gradient(180deg, var(--lg-glow), transparent 64px), rgb(var(--glass-rgb) / calc(var(--lg-a) * 1.12)); }
.popover {
  background: linear-gradient(180deg, var(--lg-glow), transparent 40px), rgb(var(--glass-rgb) / var(--lg-a2));
  -webkit-backdrop-filter: blur(calc(var(--lg-blur) + 8px)) saturate(var(--lg-sat)); backdrop-filter: blur(calc(var(--lg-blur) + 8px)) saturate(var(--lg-sat));
  border-color: transparent; border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), inset 0 0 0 1px var(--lg-edge), var(--shadow-pop);
  animation: none;  /* появление — «вырастание из кнопки» в nk-glass.js */
}
.popover .item { border-radius: calc(var(--r-lg) - 6px); }
.topbar .tb-bell.nk-bell { background: linear-gradient(180deg, var(--lg-glow), transparent 44px), rgb(var(--glass-rgb) / var(--lg-a));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); }

/* окна: фон размывается сильнее; само окно проявляется коротким сдвигом (style.css) */
.modal-bg { background: rgb(8 10 16 / .26); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }

/* фон под стеклом: мягкие цветные пятна — стеклу есть что размывать */
.backdrop::before { content: ""; position: absolute; inset: -20vmax; pointer-events: none;
  background: radial-gradient(38vmax 30vmax at 12% 92%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(30vmax 26vmax at 88% 58%, color-mix(in srgb, #14b8a6 7%, transparent), transparent 70%); }
:root[data-bg-anim="on"] .backdrop::before { animation: lg-drift 60s ease-in-out infinite alternate; }
@keyframes lg-drift { to { transform: translate(6vmax, -5vmax) scale(1.06); } }

/* ---------- нажатие: кнопка чуть утапливается и возвращается без отскока ----------
   Пункты списков и меню (боковое меню, история, пункты меню, вкладки) не сжимаются — у них меняется только фон. */
.seg > button, .tabbar > button, .nk-bell, .tb-bell { transition: transform .16s var(--ease), background-color .2s, color .2s; }
.seg > button:active, .tabbar > button:active, .nk-bell:active, .tb-bell:active { transform: scale(.97); transition-duration: .08s; }
.btn { transition: background-color .18s, transform .16s var(--ease), box-shadow .2s, opacity .2s, color .2s; }
.btn:active { transform: scale(.97); transition-duration: .08s; }

/* ---------- «линза» выделения (nk-glass.js): переезжает целиком, форма не меняется ---------- */
.lg-on { isolation: isolate; }
.lg-layer { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }
.lg-blob { position: absolute; left: 0; top: 0; background: var(--lg-c); transition: opacity .16s var(--ease); }
/* переключатели и подменю: светлая линза с тенью */
.lg-seg { --lg-c: var(--lg-lens); }
.lg-seg .lg-blob { box-shadow: var(--lg-lens-shade); }
/* меню и нижние вкладки: линза-подсветка цветом акцента */
.lg-tint { --lg-c: var(--accent); }
.lg-tint > .lg-layer { opacity: var(--lg-tint-a); }
/* у самих пунктов прежний фон выбранного больше не нужен — его рисует линза */
.seg.lg-on > button.on, .subnav-tabs.lg-on > .sub.on, .tabbar.lg-on > button.on, .lg-on > .nav-item.on, .adm-side.lg-on > .nav.on,
.history.lg-on > .h-item.on { background: transparent; box-shadow: none; }
[data-theme-seg].lg-on .seg-thumb { display: none; }

/* ---------- верхняя строка телефона и планшета: мягкий край вместо полосы ---------- */
@media (max-width: 1024px) {
  .topbar { isolation: isolate; }
  .topbar.scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
  .topbar::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s var(--lg-ease);
    background: linear-gradient(color-mix(in srgb, var(--bg) 86%, transparent) 38%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    -webkit-mask-image: linear-gradient(#000 52%, transparent); mask-image: linear-gradient(#000 52%, transparent); }
  .topbar.scrolled::before { opacity: 1; }
}

/* ---------- доступность ---------- */
@media (prefers-contrast: more) {
  :root { --lg-a: var(--ga); --lg-a2: var(--ga2); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .popover, .side.glass, .adm-side.glass, .vbar.glass, .topbar .tb-bell.nk-bell { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
:root[data-reduce] .backdrop::before { animation: none; }
:root[data-reduce] .lg-blob { transition: none; }