/* Нижняя панель, каркас прокрутки и переход между вкладками.
   Раньше этот CSS вставлял app.js уже после загрузки страницы, и первый кадр
   рисовался без него: без панели, без @view-transition, с другой разметкой.
   Отсюда и «мигание» при переключении вкладок. Подключается в <head>
   каждой страницы последним, чтобы порядок каскада остался прежним. */

:root { --nav-h: 66px; }

/* iPhone не должен сам увеличивать текст - на страницах с ui.css и без него
   это происходило по-разному */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--bg);
}

#vgScroll {
    position: absolute !important;
    inset: 0;
    box-sizing: border-box;
    /* отступ сверху - не здесь, а у .container ниже: Safari считает липкую
       шапку от внутреннего края контейнера прокрутки, и отступ под «чёлку»
       складывался дважды - шапка в PWA съезжала вниз */
    padding: 0 20px !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: block !important; /* Важно для корректного скролла до самого низа */
    /* Место под полосу прокрутки резервируется всегда. Иначе на компьютере
       длинные страницы (расписание) получают полосу, а короткие нет,
       и контент при переключении вкладок прыгает вбок */
    scrollbar-gutter: stable both-edges;
}

/* Открытый пост на форуме и список чатов: панель вкладок уезжает вниз,
   тут своя навигация (назад в шапке). Подложка #vgFade гаснет сама,
   её выключает app.js, когда видит, что панель спряталась */
#vgNav { transition: opacity .2s ease, transform .34s cubic-bezier(.16, 1, .3, 1); }
body.post-mode #vgNav, body.in-dm #vgNav {
    opacity: 0;
    transform: translateY(calc(100% + 16px + env(safe-area-inset-bottom)));
    pointer-events: none;
}
body.post-mode #vgFade, body.in-dm #vgFade { opacity: 0; }
/* и место под неё внизу больше не нужно */
body.post-mode #vgScroll > .container,
body.in-dm #vgScroll > .container {
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}

/* Растягиваем контейнер и задаем реальный нижний отступ */
#vgScroll > .container {
    margin: 0 auto;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: calc(var(--nav-h) + 80px + env(safe-area-inset-bottom)) !important;
}

/* Панель не зависит от стилей страницы: index.html не подключает ui.css,
   поэтому шрифт, размеры и box-sizing задаём явно - иначе панель там
   получается на пару пикселей другой */
#vgNav, #vgNav * {
    box-sizing: border-box;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    font-style: normal;
    text-decoration: none;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#vgNav span {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

/* ======================================================================
   ПЕРЕХОДЫ МЕЖДУ ВКЛАДКАМИ

   Направление знает скрипт в <head> каждой страницы: на событии pagereveal
   он сравнивает номер вкладки, откуда пришли, с текущим, и ставит на <html>
   data-vt="fwd" (вкладка правее), "back" (левее) или ничего (обычный
   переход, например из поста на форуме или из админки).

   Вперёд: старая страница уезжает влево и притухает, новая въезжает справа
   с пружинкой. Назад - зеркально. Без направления - мягкое проявление.
   Никакого blur: на слабых телефонах размытие на весь экран роняло кадры.
   ====================================================================== */
@view-transition { navigation: auto; }

:root {
    --vt-out: cubic-bezier(.4, 0, .6, 1);
    --vt-in: cubic-bezier(.16, 1, .3, 1);      /* быстрый старт, долгий мягкий доезд */
}

/* обычный переход без направления */
::view-transition-old(root) { animation: vgFadeOut .18s var(--vt-out) both; }
::view-transition-new(root) { animation: vgFadeIn .34s var(--vt-in) both; }

/* у всех кадров явные начало и конец: Safari считает такие анимации на
   видеокарте и, если одного края нет, в конце откатывает и играет заново */
@keyframes vgFadeOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.985); } }
@keyframes vgFadeIn  { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

/* вперёд: вправо по панели */
html[data-vt="fwd"]::view-transition-old(root)  { animation: vgOutToLeft .26s var(--vt-out) both; }
html[data-vt="fwd"]::view-transition-new(root)  { animation: vgInFromRight .44s var(--vt-in) both; }
/* назад: влево по панели */
html[data-vt="back"]::view-transition-old(root) { animation: vgOutToRight .26s var(--vt-out) both; }
html[data-vt="back"]::view-transition-new(root) { animation: vgInFromLeft .44s var(--vt-in) both; }

@keyframes vgOutToLeft   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-14%) scale(.97); } }
@keyframes vgOutToRight  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(14%)  scale(.97); } }
@keyframes vgInFromRight { from { opacity: 0; transform: translateX(22%); }  to { opacity: 1; transform: none; } }
@keyframes vgInFromLeft  { from { opacity: 0; transform: translateX(-22%); } to { opacity: 1; transform: none; } }

/* Нижняя панель одна и та же на всех страницах, поэтому в переходе она
   вообще не анимируется. Раньше две полупрозрачные копии панели
   перетекали друг в друга, и посередине перехода стекло на миг
   становилось прозрачнее - ещё одно «мигание». Капсула к этому моменту
   уже стоит на новом месте (см. movePill в app.js). */
#vgNav { view-transition-name: vgnav; }
#vgFade { view-transition-name: vgfade; }
::view-transition-group(vgfade) { animation: none; }
::view-transition-old(vgfade)   { display: none; }
::view-transition-new(vgfade)   { animation: none; }
::view-transition-group(vgnav) { animation: none; }
::view-transition-old(vgnav)   { display: none; }
::view-transition-new(vgnav)   { animation: none; }

/* Firefox и старые браузеры без переходов между страницами: хотя бы
   мягко проявляем содержимое, класс ставит скрипт в <head> */
html.no-vt #vgScroll { animation: vgFadeIn .3s var(--vt-in) both; }

/* ---------- Капсула под активной вкладкой ----------
   Двигает её app.js (Web Animations), здесь только внешний вид.
   Между соседними вкладками по одну сторону от «эвента» она перетекает:
   растягивается до новой вкладки и подтягивает хвост. Через белый круг
   «эвента» она не ездит (под ним это выглядело странно), а гаснет
   и проявляется уже на новом месте. */
#vgNav .nav-pill {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: 99px;
    pointer-events: none;
    opacity: 0;
    transform-origin: center;
    background: var(--glass, rgba(127, 127, 127, .09));
    box-shadow: inset 0 1px 0 var(--glass-highlight, rgba(255, 255, 255, .28));
}
#vgNav .nav-pill.ready { opacity: 1; }

/* У «эвента» своя подсветка: белый круг со звездой. Под ним капсула лишняя */
#vgNav .nav-pill.on-main { opacity: 0; }
#vgNav a { z-index: 1; }

/* иконка новой вкладки коротко «кивает» в момент нажатия */
#vgNav a.vg-pop svg { animation: vgIconPop .46s linear; }
#vgNav a.nav-main.vg-pop svg { animation: none; }
/* в точке разворота скорость нулевая - иконка не дёргается */
@keyframes vgIconPop {
    0%   { transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
    30%  { transform: scale(.82) translateY(1px); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    html.no-vt #vgScroll, #vgNav a.vg-pop svg { animation: none !important; }
}

#vgNav {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 10px;
    line-height: 1.2;
    margin: 0;
    position: fixed !important;
    left: 14px; right: 14px; 
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 900 !important;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    border-radius: 99px;
    background: var(--glass, var(--bg));
    -webkit-backdrop-filter: var(--glass-blur, none);
    backdrop-filter: var(--glass-blur, none);
    border: 1px solid var(--glass-border, var(--card-border));
    box-shadow: inset 0 1px 0 var(--glass-highlight, transparent), 0 10px 25px rgba(0,0,0,0.3);
}

#vgNav a {
    flex: 1 1 0;
    /* min-width: 0 обязателен: по умолчанию у flex-пункта min-width: auto,
       то есть «не уже своей подписи». Жирная подпись активной вкладки
       («расписание» в 800) шире обычной, пункт раздувался и толкал
       соседей - иконки съезжали то вправо, то влево в зависимости от
       того, какая вкладка открыта. Теперь все пункты строго равной ширины */
    min-width: 0;
    max-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 6px;
    border-radius: 99px;
    text-decoration: none;
    color: var(--secondary);
    font-size: 10.25px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, transform 0.12s ease;
}

#vgNav a:active { 
    transform: scale(0.92); 
}

/* Просто выделение цветом текста без закрашивания фоном */
#vgNav a.active {
    color: var(--text);
    font-weight: 750;
}

#vgNav svg {
    display: block;
    flex: none;
    margin: 0;
    padding: 0;
    max-width: none;
    width: 23px; height: 23px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

/* Дуотон: у активной вкладки контур чуть плотнее и появляется мягкая
   заливка. Толщину линии больше не меняем - от этого иконка «дышала»
   и казалась другой. */
#vgNav .ic-fill { fill: currentColor; fill-opacity: 0; stroke: none; transition: fill-opacity .2s ease; }
#vgNav .ic-px   { fill: currentColor; stroke: none; }
#vgNav a.active .ic-fill { fill-opacity: .2; }

/* подпись: чуть разреженнее, вес не прыгает так сильно */
#vgNav a > span:not(.nav-dot) { letter-spacing: .01em; }

/* ---------- Главная вкладка по центру (Эвенты) ----------
   Круг цвета текста «вставлен» в панель: кольцо цвета фона вокруг него
   читается как вырез в стекле. Внутри - пиксельная звезда (тот же язык,
   что пиксельный шрифт заголовков, Светка и пиксель-баттл на этой
   вкладке). Сверху на круге стеклянный блик, снизу - тень объёма. */
#vgNav a.nav-main {
    flex: 0 0 auto;
    min-width: 66px;
    padding-top: 0;
}

#vgNav .nav-orb {
    display: flex !important;
    flex: none;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    margin-top: -21px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--bg);
    background:
        radial-gradient(70% 55% at 50% 8%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 70%),
        var(--text);
    border: 0;
    box-shadow:
        0 0 0 4px var(--bg),                                /* «вырез» в панели */
        0 0 0 5px var(--glass-border, rgba(127, 127, 127, .2)),
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -7px 14px rgba(0, 0, 0, .22),
        0 10px 22px rgba(0, 0, 0, .32);
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}

/* звезда: 11 клеток по 2px, заливкой и без сглаживания - пиксели чёткие */
#vgNav .px-star,
#vgNav a.nav-main svg.px-star {
    width: 34px;
    height: 34px;
    fill: currentColor;
    stroke: none;
    shape-rendering: crispEdges;
    overflow: visible;
}
#vgNav .px-spark { opacity: 0; }

/* иногда подмигивает - даже когда вкладка не открыта */
#vgNav .px-spark.s1 { animation: vgTwinkle 7s steps(1, end) 2.5s infinite; }
#vgNav .px-spark.s2 { animation: vgTwinkle 7s steps(1, end) 2.8s infinite; }
@keyframes vgTwinkle {
    0%   { opacity: 0; }
    90%  { opacity: 1; }
    93%  { opacity: 0; }
    95%  { opacity: 1; }
    98%  { opacity: 0; }
}

/* открыта: круг чуть крупнее, светится, искорки мигают чаще */
#vgNav a.nav-main.active .nav-orb {
    transform: scale(1.05);
    box-shadow:
        0 0 0 4px var(--bg),
        0 0 0 5px var(--glass-border, rgba(127, 127, 127, .2)),
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -7px 14px rgba(0, 0, 0, .22),
        0 0 26px color-mix(in srgb, var(--text) 30%, transparent),
        0 10px 22px rgba(0, 0, 0, .32);
}
#vgNav a.nav-main.active .px-spark.s1 { animation: vgTwinkleOn 1.6s steps(1, end) infinite; }
#vgNav a.nav-main.active .px-spark.s2 { animation: vgTwinkleOn 1.6s steps(1, end) .8s infinite; }
@keyframes vgTwinkleOn {
    0%   { opacity: 1; }
    45%  { opacity: 0; }
}

#vgNav a.nav-main:active { transform: none; }
#vgNav a.nav-main:active .nav-orb { transform: scale(.9); transition-duration: .1s; }

@media (prefers-reduced-motion: reduce) {
    #vgNav .px-spark { animation: none !important; }
    #vgNav a.nav-main.active .px-spark { opacity: 1; }
}

#vgNav .nav-dot {
    position: absolute !important;
    top: 5px;
    right: calc(50% - 18px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 9.5px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    display: none;
}

#vgNav .nav-dot.show { display: block !important; }

/* «!» на круге эвента (вставляет app.js, только когда он нужен).
   Сидит на правом верхнем краю приподнятого круга, с кольцом цвета фона.
   Один раз выпрыгивает при появлении, дальше стоит спокойно */
#vgNav a.nav-main .nav-bang {
    top: -24px;
    right: calc(50% - 30px);
    z-index: 2;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    box-shadow: 0 0 0 2.5px var(--bg);
    animation: vgBangIn .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes vgBangIn { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #vgNav a.nav-main .nav-bang { animation: none; } }

/* ---------- Затухание контента под панелью ----------
   Элемент #vgFade создаёт app.js. Контент мягко уходит в фон за панелью,
   а не торчит из-под неё обрезками. Прячется сам, когда прячется панель
   (класс .off ставит app.js). Светка (z-index 901) остаётся над ним. */
#vgFade {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--nav-h) + 56px + env(safe-area-inset-bottom));
    z-index: 899 !important;
    pointer-events: none;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--bg) 0%, transparent) 0%,
        color-mix(in srgb, var(--bg) 70%, transparent) 30%,
        color-mix(in srgb, var(--bg) 94%, transparent) 50%,
        var(--bg) 100%);
    transition: opacity .2s ease;
}
#vgFade.off { opacity: 0; }

#vgToast {
    position: fixed !important;
    left: 50%;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
    z-index: 1200 !important;
    max-width: 88vw;
    padding: 10px 18px;
    border-radius: 99px;
    background: var(--text);
    color: var(--bg);
    font-size: 0.82rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    /* тост выпрыгивает каплей: с пружинкой и лёгким растяжением */
    transform: translate(-50%, 14px) scale(.86, .8);
    transition: opacity .2s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
#vgToast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ======================================================================
   ДЕСКТОП: от 1000px страница перестаёт быть узкой мобильной колонкой.

   Нижняя панель остаётся внизу, но сжимается до содержимого и встаёт по
   центру - тянуть её через весь монитор смысла нет, пять пунктов просто
   расплывались по краям.

   Сам контент расширяется до 1180px; forum.html внутри этой ширины
   раскладывает ленту в две колонки. Остальные вкладки просто становятся
   шире, ничего не ломая.

   Чтобы вернуть как было - удалить этот блок целиком.
   ====================================================================== */
@media (min-width: 1000px) {
    #vgScroll {
        padding: 0 24px !important;
        scrollbar-gutter: auto;
    }

    #vgScroll > .container {
        max-width: 1180px;
        padding-top: 20px !important;
    }

    /* Панель по центру и по содержимому: left/right из мобильных правил
       перебиваем, иначе она продолжит растягиваться на всю ширину.
       bottom не трогаем - его выставляет VG.fitNav инлайном. */
    #vgNav {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: auto;
        gap: 2px;
    }

    /* flex: 1 1 0 из мобильной версии внутри контейнера по содержимому
       схлопывает пункты, поэтому здесь фиксированная ширина */
    #vgNav a {
        flex: 0 0 auto;
        width: 96px;
        max-width: none;
    }

    #vgNav a:hover { background: var(--glass, rgba(127,127,127,.1)) !important; }
}


/* ======================================================================
   LIQUID GLASS: общие эффекты для любых блоков сайта
   Двигает их VG.liquid в app.js, здесь только вид.
   ====================================================================== */

/* блок, который сейчас перетекает по высоте */
.vg-lq {
    overflow: hidden !important;
    box-sizing: border-box;
    transform-origin: 50% 0;
    will-change: height, transform;
}
@supports (overflow: clip) { .vg-lq { overflow: clip !important; } }

/* блик, пробегающий по стеклу */
.lq-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}
.lq-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg,
        transparent 15%,
        rgba(255, 255, 255, .14) 50%,
        transparent 85%);
    transform: translateX(-130%) skewX(-14deg);
    animation: lqShine .95s cubic-bezier(.3, .7, .2, 1) var(--lq-delay, 0s) forwards;
}
/* на белом белый блик не видно - в светлой теме он холодно-серый */
body:not(.dark-theme) .lq-shine::after {
    background: linear-gradient(100deg,
        transparent 15%,
        rgba(90, 110, 140, .09) 50%,
        transparent 85%);
}
@keyframes lqShine { from { transform: translateX(-130%) skewX(-14deg); } to { transform: translateX(330%) skewX(-14deg); } }

/* «желейная» кнопка: вдавливается и отпружинивает */
.vg-jelly { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.vg-jelly:active {
    transform: scale(.94, .9);
    transition-duration: .1s;
    transition-timing-function: ease-out;
}

/* капля-подсветка, которую двигает VG.liquid.glide */
.lq-blob {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    pointer-events: none;
}

/* всплеск VG.liquid.burst */
.lq-burst {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 3000;
    pointer-events: none;
    color: var(--like, #ff375f);
}
.lq-burst i { position: absolute; left: 0; top: 0; display: block; border-radius: 50%; }
.lq-burst .lq-ring { width: 36px; height: 36px; border: 2px solid currentColor; box-sizing: border-box; }
.lq-burst .lq-dot { background: currentColor; }

@media (prefers-reduced-motion: reduce) {
    .lq-shine { display: none; }
    .vg-jelly:active { transform: none; }
}

/* ---------- iOS 26: PWA с домашнего экрана не доходит до низа ----------
   Баг WebKit: в standalone-режиме с viewport-fit=cover + black-translucent
   100%, 100vh, 100dvh и 100svh короче экрана на высоту статус-бара (~59pt).
   Поэтому #vgScroll (inset: 0 от body) и fixed-панель заканчивались выше
   края, а снизу оставалась пустая чёрная полоса. Надёжно полную высоту
   не отдаёт ни один CSS-юнит. Только для установленного приложения на iOS - вкладки
   Safari и Android не трогаем. */
@media (display-mode: standalone) {
    @supports (-webkit-touch-callout: none) {
        /* Переход между вкладками здесь выключен. Safari снимает страницу
           для перехода снимком по «короткой» высоте вьюпорта (тот же баг,
           что ниже), и на время анимации низ экрана с панелью обрезался
           чёрной полосой. Вкладки в PWA на айфоне просто переключаются.
           В Safari во вкладке и на Android переход остаётся. */
        @view-transition { navigation: none; }

        /* 100lvh на части айфонов наоборот выходит ВЫШЕ экрана, и панель
           уезжает вниз. Поэтому высоту меряем в app.js (screen.height) и
           кладём в --app-h; до запуска скрипта - обычные 100% */
        html { height: var(--app-h, 100%); }
        body {
            height: 100%;
            position: relative !important; /* #vgScroll меряется от body, а не от «короткого» вьюпорта */
        }
        /* fixed считается от того же короткого вьюпорта, поэтому панель
           и тост привязываем к body - он теперь во весь экран */
        #vgNav, #vgToast, #vgFade { position: absolute !important; }
    }
}


/* ======================================================================
   СТЕКЛО ВО ВРЕМЯ ПЕРЕХОДА МЕЖДУ ВКЛАДКАМИ (айфон, Safari)

   Пока идёт переход, Safari показывает не живую страницу, а её снимок,
   и в снимке backdrop-filter не рисуется: стекло становится просто
   прозрачным, сквозь шапку и кнопки видна резкая перфорация обложки.
   Через полсекунды переход кончается, и стекло «включается» - отсюда
   и было «сначала прозрачное, потом как надо».

   Класс vt-run ставят скрипт в <head> (новая страница, pagereveal) и
   app.js (старая страница, pageswap) - только в Safari, Chrome рисует
   стекло и в снимке. На это время у стекла плотнее заливка, а когда
   переход кончился, сразу возвращается обычная.
   ====================================================================== */
/* нейтральная, а не в цвет обложки: у своей фотки на обложке цвет другой,
   и оттенок из ника давал болотную шапку на голубом фото */
html.vt-run body { --vt-tint: rgba(255, 255, 255, .62); }
html.vt-run body.dark-theme { --vt-tint: rgba(36, 36, 42, .82); }

html.vt-run :is(.topbar, .icon-btn, .theme-toggle, .btn.ghost, .chips, .day-chips, .sched-root select,
    .cat-bar, .sort-seg, #composer, .lf-stat, .lf-search, .type-toggle, .upd-badge, .install-card,
    .ed-bar, .tg-head, #vgNav) {
    background-color: var(--vt-tint) !important;
}
/* после перехода заливка сразу становится обычной. Плавный переход цвета
   здесь был дорогим: полсекунды перерисовки размытия у всех стеклянных
   кнопок разом - на айфоне это и давало подлагивание при открытии поста */


/* ======================================================================
   СКОРОСТЬ НА ТЕЛЕФОНАХ

   1) Карточки (пары, посты, объявления, блоки профиля) лежат на ровном
      фоне, а не на обложке: размывать под ними нечего, но каждое такое
      размытие телефон пересчитывает на каждом кадре прокрутки и анимации.
      Именно они и давали лаги. Стекло (заливка, кант, блик) остаётся,
      убирается только невидимое размытие. Плавающее (шапка, панель,
      кнопки и капсулы на обложке, форма поста) размывает как раньше.
   2) Бесконечные анимации (живая точка, блик на полосе пары) не крутятся,
      пока вкладка в фоне.
   ====================================================================== */
/* страница поста лежит прямо на обложке - ей размытие оставлено */
.lesson-card, .empty-state, .post, .item, .block, .stat,
.mini-post, .cm-item, .lf-item, .card:not(#composer), .empty {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
@media (pointer: coarse) {
    body, body.dark-theme, .sched-root, .forum-root, .lf-root, #mainView { --glass-blur: blur(12px) saturate(170%); }
    .topbar { --topbar-blur: blur(14px) saturate(170%); }
}
html.vg-hidden *, html.vg-hidden *::before, html.vg-hidden *::after { animation-play-state: paused !important; }

/* 3) Здесь стоял content-visibility: auto на карточках лент (форум, находки,
      вкладки профиля): браузер не рисовал карточки за экраном, а вместо них
      держал место 280px. На айфоне Safari при этом заново рисует картинки,
      когда карточка возвращается на экран, и не всегда помнит её настоящую
      высоту: листаешь вверх - карточки над экраном вырастают из 280px до
      настоящего размера, а Safari, в отличие от Chrome, не придерживает
      прокрутку (нет scroll anchoring) - лента прыгает. Выгода от него на
      50 постах маленькая, поэтому убран. */


/* ======================================================================
   ЗНАЧОК И ТЕКСТ НА ОДНОЙ ВЫСОТЕ
   В строке «значок + слово» флекс ставит значок по центру строки, а
   середина строчных букв («изменить», «удалить») на ~1px ниже центра
   строки - значок казался приподнятым. У цифр («405», «18:21») наоборот:
   они высокие, и значок рядом казался опущенным. Здесь значки сдвинуты
   на середину букв. Меряли на всех вкладках (иконка vs. x-высота/цифры).
   ====================================================================== */
:is(.btn, .act, .admin-btn, .fact) > svg { position: relative; top: 1px; }
.fab > svg { position: relative; top: 1.5px; }
/* лайки и комменты - значок + число; кнопки в шапке профиля и так ровно */
.hero-actions .btn > svg { top: 0; }
.act:is([data-like], [data-open]) > svg { top: 0; }
/* где рядом бывает и то и другое («Т-22» и «на сайте с…») - посерединке */
:is(.hero-meta span, .tg-hero-sub span) > svg { position: relative; top: .5px; }
:is(.lc-room, .mp-meta span, .tg-time, .tg-meta, .cmt-to) > svg { position: relative; top: -1px; }

/* Айфон и айпад. Шрифт Inter на сайт не подключён, поэтому текст рисуется
   системным: на Windows это Segoe UI (по нему и мерили сдвиги выше), а на
   айфоне - SF, у которого буквы сидят чуть выше в строке. В итоге на
   айфоне все значки оказывались примерно на 1px ниже середины букв
   (мерил по скриншотам: «закрепить», «изменить», лайки и комменты в
   ленте - везде +0.8...1px). Здесь те же правила, на 1px выше.
   -webkit-touch-callout понимает только Safari на iOS / iPadOS. */
@supports (-webkit-touch-callout: none) {
    :is(.btn, .act, .admin-btn, .fact) > svg { top: 0; }
    .fab > svg { top: .5px; }
    .hero-actions .btn > svg { top: -1px; }
    /* Кнопки-«таблетки» под постом (лайк, коммент, «поделиться», «скачать»):
       значок на одной линии во всём ряду. Раньше у лайка и у «поделиться»
       были разные сдвиги, и рядом стоящие значки расходились на ~2px -
       цепочка «поделиться» казалась опущенной. Кнопка из одного значка
       (без подписи) - ровно по центру. */
    .act > svg { top: 0; }
    .act:has(> span) > svg { top: -1px; }
    :is(.hero-meta span, .tg-hero-sub span) > svg { top: -.5px; }
    :is(.lc-room, .mp-meta span, .tg-time, .tg-meta, .cmt-to) > svg { top: -2px; }
}


/* ======================================================================
   КНОПКИ ВНУТРИ СТЕКЛЯННОЙ ШАПКИ
   Тёмное стекло стало плотнее, и кнопка в шапке оказывалась вторым
   плотным стеклом поверх первого - глухой тёмный кружок. Внутри шапки
   кнопке нужен только лёгкий блик, а стеклом работает сама шапка.
   ====================================================================== */
body.dark-theme :is(.topbar, .tg-head, .cg-top) :is(.icon-btn, .theme-toggle:not(.on), .tg-hbtn, .cg-icon) {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .13);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
@media (hover: hover) {
    body.dark-theme :is(.topbar, .tg-head, .cg-top) :is(.icon-btn, .theme-toggle:not(.on), .tg-hbtn, .cg-icon):hover { background: rgba(255, 255, 255, .16); }
}
body:not(.dark-theme) :is(.topbar, .tg-head) :is(.icon-btn, .theme-toggle:not(.on), .tg-hbtn) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}


/* панель и шапка - самое заметное стекло: ещё и кант по кругу */
:is(.topbar, #vgNav) {
    outline: .5px solid var(--lg-edge);
    outline-offset: -1.5px;
}
/* под стеклом сочнее. На телефоне размытие не увеличиваем (оно дорогое),
   только насыщенность - она почти бесплатная */
@media (pointer: fine) {
    body, body.dark-theme { --glass-blur: blur(24px) saturate(200%); }
    .topbar { --topbar-blur: blur(24px) saturate(200%); }
}
@media (pointer: coarse) {
    body, body.dark-theme, .sched-root, .forum-root, .lf-root, #mainView { --glass-blur: blur(12px) saturate(210%); }
    .topbar { --topbar-blur: blur(14px) saturate(210%); }
}

/* ---------- Появление карточек при прокрутке (VG.liquid.reveal) ---------- */
.lq-pre { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lq-pre { opacity: 1; } }