/* ============================================================
   Agua · слой «27» — стекло, жидкие переключатели, движение
   Подключается ПОСЛЕ styles.css и только уточняет его.
   ============================================================ */

/* ---------- Обои: слой всегда есть (его преломляет стекло) ---------- */
#skin-bg { display: block; background-color: var(--bg-solid, #000); background-size: cover; background-position: center; }
[data-theme="light"] #skin-bg { background-color: var(--bg-solid, #eef0f2); }
:root { --bg-solid: #000; }
[data-theme="light"] { --bg-solid: #eef0f2; }
#skin-bg > img.skin-img,
#skin-bg > video.skin-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}

/* ============================================================
   СТЕКЛО (LiquidGlass) — подложки в слое обоев под окошками
   ============================================================ */
/* подложки живут в #skin-bg (под интерфейсом), координаты — экранные */
#skin-bg > .lgx { position: absolute; z-index: 1; pointer-events: none; }  /* z-index: холст стекла (z -1 внутри) не уходит под картинку/видео обоев */
/* Окошко над liquid-подложкой: своего фона и блюра нет (их рисует стекло),
   остаётся тонкая кромка — стекло само рисует блик и тень. */
.lgx-host-liquid {
  /* без молочной плёнки: стекло ничего не высветляет */
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: none !important;
}
/* Окошко над frosted-подложкой: лёгкая молочная плёнка для читаемости */
.lgx-host-frost {
  background: var(--frost-fill) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-hi) 50%, transparent) !important;
}
[data-theme="light"] .lgx-host-liquid { border-color: rgba(255, 255, 255, .6) !important; }

/* ============================================================
   CSS-СТЕКЛО — там, где под панелью едет контент (шапки, вкладки),
   и у карточек. Тот же «обычный» (regular) материал, что у liquidGL:
   светлая прозрачная плёнка + размытие + блик по кромке.
   ============================================================ */
:root {
  --glass-fill: rgba(255, 255, 255, .06);
  --glass-fill-strong: rgba(255, 255, 255, .09);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-hi: rgba(255, 255, 255, .26);
  --glass-blur: blur(22px) saturate(1.8) brightness(1.04);
}
[data-theme="light"] {
  --glass-fill: rgba(255, 255, 255, .55);
  --glass-fill-strong: rgba(255, 255, 255, .68);
  --glass-edge: rgba(255, 255, 255, .8);
  --glass-hi: rgba(255, 255, 255, .95);
  --glass-blur: blur(22px) saturate(1.8);
}
/* Шапки страниц и вкладки ленты: висят чуть ниже края и плавают над
   лентой — посты видно сквозь стекло, когда они уезжают под шапку. */
.topbar, .feed-tabs {
  top: 10px;
  background: var(--glass-fill-strong) !important;
  border: 1px solid var(--glass-edge) !important;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px -14px rgba(0, 0, 0, .55) !important;
  backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important;
  transition: background-color .35s var(--ease-smooth), border-color .35s var(--ease-smooth);
}
.topbar { margin-top: 10px; }
.feed-tabs { margin-top: 2px; }
/* Карточки (посты, секции настроек, правая колонка без WebGL) — тот же
   материал, но спокойнее: без сильной тени, с тонкой светлой кромкой. */
:is(.post, .settings-section, .side-card, .online-card, .profile-header, .composer, .ww-card, .notice-card) {
  border-color: var(--glass-edge) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-hi) 60%, transparent);
}
[data-skin] :is(.post, .settings-section, .side-card, .online-card, .profile-header, .composer) {
  background: color-mix(in srgb, var(--card-2) 70%, var(--glass-fill)) ;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
/* смена темы: панели перетекают в новый цвет вместе со страницей, а не щёлкают */
.post, .settings-section, .side-card, .online-card, .nav-item, .tab, .set-tab, .btn, .icon-btn {
  transition-property: background-color, border-color, color, transform, box-shadow;
  transition-duration: .35s;
  transition-timing-function: var(--ease-smooth);
}

/* ============================================================
   СКОЛЬЗЯЩАЯ ПЛАШКА ВКЛАДОК (agua-glass.js → .seg-glider)
   Плашка одна на группу и едет к выбранной вкладке по пружине,
   а не перескакивает. У самих вкладок своя заливка снимается.
   ============================================================ */
/* :where() — нулевая специфичность: не перебивает sticky у вкладок ленты */
:where(.has-glider) { position: relative; }
.has-glider { isolation: isolate; }
.seg-glider {
  position: absolute; left: 0; top: 0; z-index: 0;
  border-radius: 999px; pointer-events: none;
  background: var(--accent-dark);
  transition: transform .55s var(--ease-snappy), width .55s var(--ease-snappy), height .3s var(--ease-smooth), opacity .2s ease;
  will-change: transform, width;
}
.set-tabs .seg-glider {
  background: var(--card);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
}
:root:not([data-theme="light"]) .set-tabs .seg-glider { background: color-mix(in srgb, var(--text) 20%, var(--card)); }
.has-glider > :not(.seg-glider) { position: relative; z-index: 1; }
.has-glider > .active:not(.nav-create) { background: transparent !important; box-shadow: none !important; }
.has-glider > .tab, .has-glider > .ptab, .has-glider > .set-tab, .has-glider > button {
  transition: color .3s var(--ease-smooth), transform .3s var(--ease-snappy) !important;
}
@media (prefers-reduced-motion: reduce) { .seg-glider { transition: none; } }

/* ============================================================
   LIQUID TOGGLE — переключатель с «жидкой» каплей
   Капля едет CSS-переходом (translate от --complete) по пружине,
   без пересчёта в JS каждый кадр — поэтому без рывков.
   ============================================================ */
.lt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.switch.liquid-toggle {
  --border: 2.5px;
  --width: 54;
  --height: 32;
  --complete: 0;
  --lt-t: .5s;
  --lt-off: color-mix(in srgb, var(--text) 16%, var(--card));
  --checked: color-mix(in oklab, var(--accent) calc(var(--complete) * 1%), var(--lt-off));
  position: relative; display: inline-block; flex: 0 0 auto;
  width: calc(var(--width) * 1px); height: calc(var(--height) * 1px);
  border-radius: 100px; cursor: pointer;
  background: var(--checked);
  transition: background-color .35s var(--ease-smooth);
  container-type: inline-size;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.switch.liquid-toggle > *:not(input) { pointer-events: none; }
.switch.liquid-toggle > .slider { display: none; }
.switch.liquid-toggle > input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 30;
}
.switch.liquid-toggle:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.switch.liquid-toggle:has(input:disabled) { opacity: .45; cursor: default; }

.lt-liquid {
  position: absolute; top: 50%; left: var(--border);
  width: calc(60% - (2 * var(--border)));
  height: calc(100% - (2 * var(--border)));
  border-radius: 100px;
  container-type: inline-size;
  translate: calc((var(--complete) / 100) * (100cqi - 100% - (2 * var(--border)))) -50%;
  transition: translate var(--lt-t) var(--ease-bouncy), scale .42s var(--ease-bouncy);
  will-change: translate, scale;
}
.lt-wrapper {
  position: absolute; inset: 0; border-radius: 100px;
  clip-path: inset(0 0 0 0 round 100px);
  filter: blur(6px);
  transition: filter .3s var(--ease-smooth);
}
.lt-liquids {
  position: absolute; inset: 0; border-radius: 100px; overflow: hidden;
  transform: translate3d(0, 0, 0);
  filter: url(#lt-goo);
}
.lt-liquid-shadow {
  position: absolute; inset: 0; border-radius: 100px;
  box-shadow: inset 0 0 3px 4px var(--checked),
    inset calc(((var(--complete) / 100) * 8px) - 4px) 0 3px 4px var(--checked);
}
.lt-track {
  position: absolute; top: 50%; left: 0;
  width: calc(var(--width) * 1px); height: calc(var(--height) * 1px);
  border-radius: 100px; background: var(--checked);
  translate: calc((var(--complete) / 100) * (100cqi - 100% - (6 * var(--border)))) -50%;
  transition: translate var(--lt-t) var(--ease-bouncy), height .42s var(--ease-bouncy), left .42s var(--ease-bouncy);
}
.switch.liquid-toggle:has(input:checked):not([data-active="true"]) .lt-track { left: calc(var(--border) * 6); }
.lt-shadow {
  position: absolute; inset: 0; border-radius: 100px; opacity: 0; z-index: 20;
  box-shadow: 1px -1px 2px hsl(0 0% 100% / .5) inset,
    0 -1px 2px hsl(0 0% 100% / .5) inset,
    -1px -1px 2px hsl(0 0% 100% / .5) inset,
    1px 1px 2px hsl(0 0% 30% / .5) inset,
    -8px 4px 10px -6px hsl(0 0% 30% / .25) inset,
    -1px 1px 6px hsl(0 0% 30% / .25) inset,
    -1px -1px 8px hsl(0 0% 60% / .15), 1px 1px 2px hsl(0 0% 30% / .15),
    2px 2px 6px hsl(0 0% 30% / .15),
    -2px -1px 2px hsl(0 0% 100% / .25) inset,
    3px 6px 16px -6px hsl(0 0% 30% / .5);
  transition: opacity .3s var(--ease-smooth);
}
.lt-cover {
  position: absolute; inset: 0; border-radius: 100px; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .04);
  transition: opacity .3s var(--ease-smooth);
}
/* нажали или тянем: капля раздувается и становится прозрачной линзой */
.switch.liquid-toggle[data-active="true"] .lt-liquid { scale: 1.5 1.42; }
.switch.liquid-toggle[data-active="true"] .lt-wrapper { filter: blur(0); }
.switch.liquid-toggle[data-active="true"] .lt-shadow { opacity: 1; }
.switch.liquid-toggle[data-active="true"] .lt-cover { opacity: 0; }
.switch.liquid-toggle[data-active="true"] .lt-track {
  left: calc(var(--border) * 3);
  height: calc((var(--height) * 1px) - (6 * var(--border)));
}
/* тянем пальцем — капля идёт 1:1 без запаздывания */
.switch.liquid-toggle[data-drag="true"] { --lt-t: 0s; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .switch.liquid-toggle { --lt-t: 0s; }
  .switch.liquid-toggle .lt-liquid { transition: none; }
}

/* ============================================================
   СЕГМЕНТ — выбор из 2–4 вариантов (тема и т.п.)
   ============================================================ */
.ios-seg {
  --i: 0; --n: 3;
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr);
  padding: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.ios-seg .seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform var(--dur-smooth) var(--ease-snappy);
}
[data-theme="dark"] .ios-seg .seg-thumb { background: color-mix(in srgb, var(--text) 20%, var(--card)); }
.ios-seg .seg-opt {
  position: relative; z-index: 1;
  min-height: 38px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2);
  font-family: var(--font-bold); font-weight: 800; font-size: .92rem;
  transition: color .25s var(--ease-smooth);
}
.ios-seg .seg-opt.on { color: var(--text); }
.ios-seg .seg-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ============================================================
   МОИ ОФОРМЛЕНИЯ — сетка до 10 штук
   ============================================================ */
.cskin-count { margin-left: 6px; color: var(--text-3); font-weight: 700; font-size: .85em; }
.cskin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.cskin-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 7px; border: 0; padding: 0; background: transparent; color: var(--text); text-align: center; }
.cskin-pick { display: contents; color: inherit; border: 0; background: none; padding: 0; }
.cskin-wall {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 9 / 16; width: 100%; border-radius: 18px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--border-soft);
  transition: transform .35s var(--ease-snappy), box-shadow .25s var(--ease-smooth);
  cursor: pointer;
}
.cskin-tile:active .cskin-wall { transform: scale(.96); }
.cskin-tile.active .cskin-wall { box-shadow: 0 0 0 2.5px var(--card), 0 0 0 5px var(--accent); }
.cskin-new .cskin-wall { color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--border); background: transparent; }
.cskin-new .cskin-wall .ic { width: 28px; height: 28px; }
.cskin-badge {
  position: absolute; left: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(0, 0, 0, .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cskin-badge .ic { width: 11px; height: 11px; margin-left: 1px; }
.cskin-dot { position: absolute; right: 8px; bottom: 8px; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.cskin-tile .skin-name { font-weight: 800; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cskin-edit {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(0, 0, 0, .42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .3s var(--ease-snappy);
}
.cskin-edit:active { transform: scale(.95); }
.cskin-edit .ic { width: 15px; height: 15px; }

/* редактор оформления */
.cskin-modal { display: flex; flex-direction: column; gap: 12px; }
.cskin-modal h3 { margin-bottom: 2px; }
.cskin-modal .cs-wall {
  position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.cskin-modal .cs-wall img, .cskin-modal .cs-wall video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-wall-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-3); font-weight: 700; }
.cs-wall-empty .ic { width: 30px; height: 30px; }
.cs-pals:empty { display: none; }
.cs-pal-more {
  border: 1.5px dashed var(--border); background: transparent; color: var(--text-2);
  align-items: center; justify-content: center; text-align: center; min-height: 86px;
  font-weight: 800; font-size: .88rem;
}
.cs-pal-more .ic { width: 20px; height: 20px; }
.cs-name-row { display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font-weight: 700; font-size: .9rem; }
.cskin-modal .modal-actions { margin-top: 4px; align-items: center; }
.danger-text { color: var(--danger) !important; }

/* ============================================================
   ДВИЖЕНИЕ — меньше «появлений», больше физики
   Раньше каждая карточка, строка и секция въезжала снизу при
   любом показе — это и давало ощущение «сгенерированного» UI.
   Оставляем анимацию только там, где она отвечает на действие.
   ============================================================ */
.feed-list > .post, .feed-list > .pinned-label,
.notif, .user-row, .song-row,
.settings-section, .right .side-card, .right .online-card, .side-card,
.trend-list > *, .follow-list > *,
#notif-list .notif, .gcp-list .gcp-row, .poll-opt { animation: none !important; }

/* окна: появление пружиной, уход — быстрым затуханием с лёгким уменьшением */
.modal { animation: modalIn27 var(--dur-smooth) var(--ease-snappy) both; transform-origin: 50% 60%; }
.sheet { animation: sheetIn27 .5s var(--ease-smooth) both; }
@keyframes modalIn27 { from { opacity: 0; transform: scale(.9); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes sheetIn27 { from { opacity: .4; transform: translateY(40px); } to { opacity: 1; transform: none; } }
#modal-host.closing .modal-backdrop { animation: backdropOut27 .23s ease-out both; }
/* уход — без «разгона» (ease-in ощущается вязким): сильный ease-out, быстрее появления */
#modal-host.closing .modal, #modal-host.closing .sheet { animation: modalOut27 .2s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes modalOut27 { to { opacity: 0; transform: scale(.94); } }
@keyframes backdropOut27 { to { opacity: 0; } }
@media (max-width: 680px) {
  #modal-host.bottom .modal, #modal-host.bottom .sheet { animation: sheetUp27 .55s var(--ease-smooth) both; }
  /* шторка уезжает вниз по кривой шторки iOS (UISheet), а не разгоняясь */
  #modal-host.bottom.closing .modal, #modal-host.bottom.closing .sheet { animation: sheetDown27 .3s cubic-bezier(.32, .72, 0, 1) both; }
  @keyframes sheetUp27 { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes sheetDown27 { to { transform: translateY(100%); } }
}

/* нажатие = лёгкое «проседание» с пружинным возвратом (как у кнопок iOS) */
.btn, .icon-btn, .act, .pill, .tab, .ptab, .feed-filter, .nav-item, .skin-card, .cs-pal, .seg-opt {
  transition-timing-function: var(--ease-snappy);
}
.btn:active, .act:active, .pill:active, .feed-filter:active, .skin-card:active { transform: scale(.96); transition-duration: .12s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============================================================
   ИСПРАВЛЕНИЯ ИНТЕРФЕЙСА
   ============================================================ */

/* Вкладки настроек: раньше это была лента пилюль, которая на телефоне
   обрезала «Безопасность» и «Оформление» по краям. Теперь — сегмент
   во всю ширину, все вкладки видны сразу. */
.set-tabs {
  display: flex; gap: 0; overflow: visible;
  padding: 3px; margin-bottom: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.set-tab {
  flex: 1 1 0; min-width: 0; min-height: 38px; padding: 0 8px;
  background: transparent; color: var(--text-2);
  font-family: var(--font-bold); font-weight: 800; font-size: .92rem;
  overflow: hidden; text-overflow: ellipsis;
  transition: background .35s var(--ease-snappy), color .25s var(--ease-smooth);
}
.set-tab.active { background: var(--card); color: var(--text); box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
:root:not([data-theme="light"]) .set-tab.active { background: color-mix(in srgb, var(--text) 20%, var(--card)); }
@media (max-width: 420px) { .set-tab { font-size: .8rem; padding: 0 4px; } }

/* заголовки секций и окон — плотнее, но не «чёрным маркером» */
.settings-section :is(h2, h4) { font-weight: 800; font-size: 1.08rem; letter-spacing: -.005em; }
.modal h3 { font-weight: 800; letter-spacing: -.01em; }
.topbar h1 { font-weight: 800; letter-spacing: -.02em; }

/* Одиночное фото/видео в ленте: рамка обнимает сам кадр. Раньше ячейка
   тянулась на всю ширину карточки, а узкое (особенно вертикальное) видео
   стояло посередине с чёрными полями слева и справа. */
.media-grid.m1 { width: fit-content; max-width: 100%; }
.media-grid.m1 .cell { background: transparent; }
.media-grid.m1:has(.cell-reserve), .media-grid.m1:has(.cell-3d) { width: 100%; }
.media-grid.m1:has(.cell-reserve) .cell { background: #141414; }
.media-grid.m1 .cell img, .media-grid.m1 .cell video { border-radius: 0; }

/* ПК: меню слева — одна стеклянная панель, а не стопка отдельных плашек */
@media (min-width: 681px) {
  .left .nav {
    padding: 10px; gap: 4px; border-radius: 32px;
    border: 1px solid var(--border-soft);
  }
  .left .nav-item { min-height: 52px; background: transparent; }
  @media (hover: hover) and (pointer: fine) { .left .nav-item:hover { background: color-mix(in srgb, var(--text) 7%, transparent); } }
  .left .nav-item.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
  .left .nav-item.nav-create { margin-top: 8px; }
}

/* Декоративное движение, которое не отвечает на действие человека:
   каскады комментариев и сторис, «дышащий» орб, прыгающая аватарка,
   съезжающий заголовок, блик по кнопке, тренды «к курсору». Убираем. */
.comment, .stories-rail .story-item, .empty, .empty-orb, .profile-avatar,
.topbar h1, .gif-cell, .cm-more { animation: none !important; }
@media (hover: hover) and (pointer: fine) { .trend:hover { transform: none !important; } }
@media (hover: hover) and (pointer: fine) { .nav-item:hover .ic { transform: none !important; } }
.btn.primary::after { content: none !important; }

/* ПК + обои: подложку даёт стеклянная панель меню, отдельные плашки не нужны */
@media (min-width: 681px) {
  .lg-on [data-skin="custom"] .left .nav-item:not(.nav-create),
  [data-skin="custom"].lg-on .left .nav-item:not(.nav-create) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lg-on [data-skin="custom"] .left .nav-item.active:not(.nav-create),
  [data-skin="custom"].lg-on .left .nav-item.active:not(.nav-create) { background: color-mix(in srgb, var(--accent) 22%, transparent); }
}

/* Плёнка на ПК: вокруг кадра 9:16 вся колонка была залита чёрным — по бокам
   от вертикального видео стояли чёрные полосы. Теперь колонка прозрачная,
   чёрный остаётся только у самого кадра, а кадр берёт пропорции ролика
   (--reel-ar ставит agua-glass.js по метаданным видео). */
@media (min-width: 681px) {
  .reels { background: transparent; }
  .reel-stage {
    aspect-ratio: var(--reel-ar, 9 / 16);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
  }
  .reels .empty, .reels .loading { color: var(--text); }
}

/* редактор оформления: две равные кнопки и «удалить» отдельной строкой */
.cs-actions { justify-content: stretch; }
.cs-actions .btn { flex: 1 1 0; }
.cs-del {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: -2px auto 0; padding: 10px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--danger); font-weight: 800; font-size: .92rem;
}
.cs-del .ic { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .cs-del:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } }

/* Светлая тема со своими обоями: акцент с фото часто светлый (мята, беж),
   и текст этим цветом на светлых плашках не читался. Для текста берём
   акцент, притемнённый к цвету текста; заливки остаются прежними. */
[data-theme="light"][data-skin="custom"] {
  --accent-text: color-mix(in oklab, var(--accent) 45%, var(--text));
}
[data-theme="light"][data-skin="custom"] :is(.tab.active, .ptab.active, .feed-filter.active, .ai-orig-btn, .profile-uname, .seg button.active, .mention, .hashtag, .t-tag, .online-card .lbl, .online-card b) {
  color: var(--accent-text);
}
@media (max-width: 680px) {
  [data-theme="light"][data-skin="custom"] .nav-item.active { color: var(--accent-text); }
}

/* Новый пост: поля ввода лежали прямо на обоях — на пёстром фото текст
   не читался. Даём им карточку; заголовок на телефоне не обрезается. */
.composer {
  padding: 16px 16px 18px; border-radius: var(--radius);
  background: var(--card-2); border: 1px solid var(--border-soft);
}
[data-skin="custom"] .composer { backdrop-filter: var(--win-blur); -webkit-backdrop-filter: var(--win-blur); }
.composer-head > :not(.avatar):not(.ava-ring) { min-width: 0; flex: 1 1 auto; }
.composer-title { font-weight: 800; text-overflow: ellipsis; }
@media (max-width: 680px) {
  .composer-title { font-size: 1.2rem; }
  #composer-text { font-size: 1.08rem; }
}

/* светлая тема: иконки на стеклянном меню — темнее, чтобы читались на любых обоях */
@media (max-width: 680px) {
  [data-theme="light"] .lgx-host .nav-item:not(.active):not(.nav-create) { color: #1f2327; }
}

/* ============================================================
   FROSTED GLASS — посты и блоки с переключателями
   Матовое стекло: молочная плёнка + сильное размытие того, что под ним.
   ============================================================ */
:root {
  --frost-fill: rgba(255, 255, 255, .055);
  --frost-blur: blur(30px) saturate(1.6);
}
[data-theme="light"] {
  --frost-fill: rgba(255, 255, 255, .62);
  --frost-blur: blur(30px) saturate(1.5);
}
.post, .settings-section, .pinned-frame {
  background: color-mix(in srgb, var(--card-2) 45%, var(--frost-fill)) !important;
  backdrop-filter: var(--frost-blur) !important; -webkit-backdrop-filter: var(--frost-blur) !important;
  border: 1px solid var(--glass-edge) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-hi) 70%, transparent), 0 10px 30px -18px rgba(0, 0, 0, .5);
}
/* на чистом чёрном фоне размывать нечего — чтобы карточки не терялись, плёнка плотнее */
:root:not([data-skin]):not([data-theme="light"]) :is(.post, .settings-section) {
  background: color-mix(in srgb, #fff 6%, var(--card-2)) !important;
}

/* ============================================================
   LIQUID GLASS — сами переключатели
   Дорожка — прозрачное стекло с бликом по кромке (видно фон под ней),
   включённый — то же стекло, подкрашенное акцентом. Капля — белая,
   при нажатии превращается в линзу (см. выше).
   ============================================================ */
.switch.liquid-toggle {
  --lt-off: rgba(255, 255, 255, .14);
  background: color-mix(in oklab, var(--accent) calc(var(--complete) * .92%), rgba(255, 255, 255, .14));
  backdrop-filter: blur(8px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.1);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .45),
    inset 0 -1px 1px rgba(255, 255, 255, .12),
    inset 0 0 0 .5px rgba(255, 255, 255, .22),
    0 1px 3px rgba(0, 0, 0, .25);
}
[data-theme="light"] .switch.liquid-toggle {
  --lt-off: rgba(120, 128, 140, .22);
  background: color-mix(in oklab, var(--accent) calc(var(--complete) * .95%), rgba(120, 128, 140, .22));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .9),
    inset 0 0 0 .5px rgba(0, 0, 0, .08),
    0 1px 3px rgba(0, 0, 0, .12);
}
/* капля в покое — глянцевая: белая с мягким бликом сверху, как стеклянная бусина */
.lt-cover {
  background:
    radial-gradient(120% 90% at 50% 0%, #fff 0%, #fff 45%, #eef1f4 100%);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .25), inset 0 -1px 1px rgba(0, 0, 0, .06), inset 0 1px 0 #fff;
}

/* текст на liquid glass: акцентный цвет подмешиваем к цвету текста, иначе
   на стекле того же оттенка (мятные обои + мятный акцент) он сливался */
.lgx-host :is(.t-tag, .t-count, .lbl) { color: color-mix(in oklab, var(--accent) 50%, var(--text)); }
.lgx-host .t-count { opacity: .75; }

/* ============================================================
   ТЕЛЕФОН: лента уходит ПОД нижнее меню (как в iOS), а не
   обрезается линией над ним. Меню — стекло, сквозь него видно посты.
   ============================================================ */
@media (max-width: 680px) {
  .feed:not(.reels-col) {
    height: 100dvh;
    /* скругление только сверху: снизу лента уходит под меню до края экрана */
    clip-path: inset(0 14px 0 14px round var(--radius) var(--radius) 0 0);
    padding-bottom: calc(var(--mobile-nav-clearance) + 14px);
    scroll-padding-bottom: calc(var(--mobile-nav-clearance) + 14px);
  }
  .left .nav {
    background: transparent !important;
    backdrop-filter: blur(22px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .35),
      inset 0 -1px 0 rgba(255, 255, 255, .08),
      inset 0 0 18px rgba(255, 255, 255, .05),
      0 16px 40px -10px rgba(0, 0, 0, .55) !important;
  }
  [data-theme="light"] .left .nav {
    background: rgba(255, 255, 255, .58) !important;
    border-color: rgba(255, 255, 255, .85) !important;
    box-shadow: inset 0 1px 0 #fff, 0 14px 34px -12px rgba(20, 30, 40, .3) !important;
  }
}

/* плашка выбранного раздела в меню: едет к новому пункту при переходе */
.left .nav > .mobile-nav-indicator { display: none !important; }
.left .nav > .seg-glider {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .5s var(--ease-snappy), width .5s var(--ease-snappy), height .3s var(--ease-smooth), opacity .2s ease;
}
@media (max-width: 680px) {
  .left .nav > .seg-glider { background: var(--accent-dark); }
  [data-theme=light] .left .nav > .seg-glider {
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    box-shadow: 0 6px 18px var(--accent-glow);
  }
}
/* пункты меню без своей заливки — её даёт плашка */
.left .nav.has-glider > .nav-item.active:not(.nav-create) { background: transparent !important; }

/* ============================================================
   ПЕРЕХОД МЕЖДУ СТРАНИЦАМИ — перетекание
   Старая колонка («призрак», app.js → withTransition) гаснет поверх,
   новая проявляется под ней. Короткая и мягкая кривая, без прыжков.
   ============================================================ */
.page-ghost {
  position: fixed !important; margin: 0 !important; z-index: 6;
  overflow: hidden !important; pointer-events: none !important;
  animation: none !important;
  transition: opacity .26s var(--ease-smooth), transform .26s var(--ease-smooth);
}
.page-ghost.out { opacity: 0; transform: scale(.985); }
@media (prefers-reduced-motion: no-preference) {
  .feed, .right { animation: colIn27 .34s var(--ease-smooth) both; }
  @keyframes colIn27 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* активный пункт меню: текст читается на любом акценте (тёмный акцент скина сливался) */
.left .nav.has-glider > .nav-item.active:not(.nav-create) { color: color-mix(in oklab, var(--accent) 55%, var(--text)) !important; }

/* вкладки настроек: на узком экране — короткие подписи, все видны целиком */
.set-tab .st-short { display: none; }
@media (max-width: 520px) {
  .set-tab .st-full { display: none; }
  .set-tab .st-short { display: inline; }
  .set-tab { font-size: .88rem; padding: 0 6px; }
}
/* выбранная вкладка: подпись читается и на тёмном акценте скина */
.has-glider > .active:not(.nav-create) { color: color-mix(in oklab, var(--accent) 50%, var(--text)) !important; }
/* …кроме вкладок настроек: там серый iOS-сегмент, и подпись на нём — обычным
   цветом текста (как и задумано в .set-tab.active), а не зелёным */
.set-tabs.has-glider > .set-tab.active { color: var(--text) !important; }

/* Второстепенные (ghost) кнопки — «Добавить песню», «Отмена» и т.п. — были
   совсем прозрачными: на обоях кнопка терялась. Теперь у них матовая подложка. */
.btn.ghost {
  /* от цвета текста, а не карточки: на тёмной карточке подложка цвета
     карточки была невидимой — кнопка выглядела как голая надпись */
  background: color-mix(in srgb, var(--text) 9%, transparent);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-color: var(--glass-edge);
}
@media (hover: hover) and (pointer: fine) { .btn.ghost:hover { background: color-mix(in srgb, var(--text) 14%, transparent); } }

/* Еле заметная тень у текста и иконок: если обои того же цвета, что текст,
   он не сливается с фоном. На обычном фоне её почти не видно. */
body { text-shadow: 0 1px 2px rgba(0, 0, 0, .28); }
.ic { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
[data-theme="light"] body { text-shadow: 0 1px 2px rgba(255, 255, 255, .5); }
[data-theme="light"] .ic { filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .45)); }
/* в полях ввода и на цветных кнопках тень не нужна */
input, textarea, .btn.primary, .nav-create, .lt-cover { text-shadow: none; }
.btn.primary .ic, .nav-create .ic { filter: none; }

/* закреплённые посты: стекло и скругление — у общей рамки; посты внутри — просто
   список с разделителем (у второго поста углы квадратные по замыслу) */
.pinned-frame .post {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.pinned-frame .post + .post { border-top: 1px solid var(--border-soft) !important; }

/* ============================================================
   БЕЗ ОСВЕТЛЕНИЯ: стекло ничего не высветляет — ни молочной заливки,
   ни белой плёнки. Размытие и линза остаются.
   ============================================================ */
:root:not([data-theme="light"]) {
  --glass-fill: transparent;
  --glass-fill-strong: transparent;
  --frost-fill: transparent;
  --glass-blur: blur(22px) saturate(1.5);
  --frost-blur: blur(30px) saturate(1.4);
}
[data-theme="light"] {
  --glass-fill: transparent;
  --glass-fill-strong: transparent;
  --frost-fill: transparent;
}
.lgx-host-frost { background: transparent !important; }
/* на чистом фоне без обоев карточкам всё же нужна своя заливка — иначе их не видно */
:root:not([data-skin]) :is(.post, .settings-section, .pinned-frame) { background: var(--card-2) !important; }

/* Блик для объёма — тихий и только сверху: тонкая светлая кромка по верхнему
   краю и мягкий «скат» света, который тает к середине. Снизу ничего нет. */
.lgx-host { position: relative; }
.lgx-host::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: -1; /* под текстом окошка, над стеклом */
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),            /* светлая кромка сверху */
    inset 1px 0 0 rgba(255, 255, 255, .05), inset -1px 0 0 rgba(255, 255, 255, .05),
    inset 0 -1px 0 rgba(0, 0, 0, .22),                  /* тёмный край снизу — толщина */
    inset 0 -14px 24px -18px rgba(0, 0, 0, .35),        /* тень внутри у низа — объём */
    0 14px 34px -16px rgba(0, 0, 0, .5);                /* окошко «парит» над фоном */
}
.lgx-host-frost::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, 0) 24%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
[data-theme="light"] .lgx-host::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }

/* ПК: плашка выбранного раздела — стеклянная (видна на любом акценте скина) */
@media (min-width: 681px) {
  .left .nav > .seg-glider {
    background: color-mix(in srgb, var(--text) 13%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 14px -6px rgba(0, 0, 0, .35);
  }
  .left .nav.has-glider > .nav-item.active:not(.nav-create) { color: var(--text) !important; }
}

/* содержимое вкладки настроек мягко проявляется при переключении */
@media (prefers-reduced-motion: no-preference) {
  #set-content.set-swap { animation: setSwap27 .28s var(--ease-smooth) both; }
  @keyframes setSwap27 { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* Поиск: список хештегов в ленте лежал прямо на обоях — даём ему карточку */
#main-col .trend-list {
  padding: 6px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--card-2) 55%, transparent);
  border: 1px solid var(--glass-edge);
  backdrop-filter: var(--frost-blur); -webkit-backdrop-filter: var(--frost-blur);
}
#main-col .trend-list .trend { border-radius: 14px; }

/* Телефон: лента теперь уходит под нижнее меню — всё, что липнет к низу
   ленты, поднимаем над меню (иначе поле комментария пряталось под ним). */
@media (max-width: 680px) {
  /* sticky считает отступ от КОНТЕНТНОЙ области .feed, а у неё уже есть
     padding-bottom = nav-clearance + 14px. Прибавлять сюда nav-clearance ещё
     раз нельзя: поле висело на ~126px выше меню и наезжало на «Пока нет
     комментариев». −14px = ровно 10px зазора над верхом меню. */
  .comment-dock { bottom: -14px; }
  /* в чатах и активности меню спрятано — лишний отступ снизу не нужен */
  body.hide-nav .feed:not(.reels-col) { padding-bottom: 18px; scroll-padding-bottom: 18px; }
  body.hide-nav .comment-dock { bottom: 10px; }
}

/* светлая тема: «опасная» кнопка — мягкая красная, а не бордовая плашка */
[data-theme="light"] .btn.danger { background: rgba(229, 57, 53, .12); color: #d32f2f; border-color: transparent; }
@media (hover: hover) and (pointer: fine) { [data-theme="light"] .btn.danger:hover { background: rgba(229, 57, 53, .18); } }

/* ============================================================
   СИСТЕМНЫЕ НАСТРОЙКИ ДОСТУПНОСТИ
   «Уменьшить прозрачность» (iOS/macOS/Windows): стекло и матовые карточки
   становятся плотными — текст поверх обоев и ленты читается всегда.
   WebGL-стекло (agua-glass.js) при этой настройке и так не включается.
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-theme="light"]), [data-theme="light"] {
    --win-blur: none; --glass-blur: none; --frost-blur: none;
    --glass: var(--card);
  }
  .left .nav, .topbar, .feed-tabs, .miniplayer, .modal, .sheet, .comments-sheet,
  .feed-search-fab, .chat-head, .side-card, .dm-drawer, .gc-here-pill, .call-mini,
  .post, .settings-section, .pinned-frame, .btn.ghost {
    background: var(--card) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}
/* «Увеличить контраст»: рамки и второстепенный текст заметнее */
@media (prefers-contrast: more) {
  :root:not([data-theme="light"]) {
    --border: rgba(255, 255, 255, .30); --border-soft: rgba(255, 255, 255, .20);
    --text-2: #dcdce0; --text-3: #b4b4b9;
  }
  [data-theme="light"] {
    --border: rgba(0, 0, 0, .34); --border-soft: rgba(0, 0, 0, .22);
    --text-2: #2c3035; --text-3: #4a4f55;
  }
}

/* Масштаб страницы щипком снова разрешён (maximum-scale=1 убран из viewport —
   это требование доступности). Чтобы взамен не появились задержка тапа и
   случайный зум двойным тапом по кнопкам — manipulation на всё нажимаемое.
   Поля ввода и так ≥16px, iOS при фокусе не приближает. */
button, a, label, summary, select, [role="button"], [role="link"], .act, .post, .notif, .trend {
  touch-action: manipulation;
}

/* ============================================================
   ДЛИННЫЕ ДАННЫЕ (стресс-тест: имя 35 символов с эмодзи, юзернейм
   на 31 символ без пробелов, ссылка в «о себе», ширина 320–380px)
   ============================================================ */
/* шапка: заголовок и @ник в одну строку с многоточием, не вылезают за край */
.topbar > div:not(.spacer) { min-width: 0; }
.topbar h1, .topbar .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* имя в профиле: значки идут сразу за последним словом, а не отрываются
   вправо к краю карточки, когда имя переносится на 2–3 строки */
.profile-name-row { display: block; }
.profile-name-row h2 { display: inline; overflow-wrap: anywhere; }
.profile-name-row > :not(h2) { margin-left: 7px; vertical-align: .2em; }
.profile-uname { overflow-wrap: anywhere; }
/* ссылки и длинные слова в «о себе» и местоположении переносятся, а не режутся краем */
.profile-bio, .profile-meta, .user-row .grow { overflow-wrap: anywhere; }
/* строка в поиске/списках: «о себе» — две строки, дальше многоточие */
.user-row .grow .desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* кнопки профиля: «⋯» никогда не выталкивается за край. На 360–380px ряд
   помещается за счёт чуть меньших полей и кнопок; на совсем узких (≤340px)
   весь ряд кнопок переносится под аватар, а не режется краем карточки */
.profile-top { gap: 10px; }
@media (max-width: 380px) {
  .profile-body { padding: 0 18px 20px; }
  .profile-actions { gap: 6px; }
  .profile-actions .btn { padding: 0 12px; }
  .profile-actions .icon-btn { width: 36px; height: 36px; }
}
@media (max-width: 340px) {
  .profile-top { flex-wrap: wrap; }
  .profile-actions { margin-left: auto; padding-top: 10px; }
}

/* ============================================================
   ИКОНКИ В СТИЛЕ iOS (Framework7 Icons ≈ SF Symbols), см. ICONS7 в app.js.
   Символы залитые, обводка не нужна. Внутри SVG лежат контур (.i-o) и
   заливка (.i-f): обычное состояние — контур, активное — заливка, как в iOS.
   ============================================================ */
.ic.i7 { fill: currentColor; stroke: none !important; }
.ic.i7 .i-f { opacity: 0; }
:is(.act.liked, .act.fav-on, .reel-heart, .sv-like.on, .nav-item.active, .ptab.active) .ic.i7 .i-o { opacity: 0; }
:is(.act.liked, .act.fav-on, .reel-heart, .sv-like.on, .nav-item.active, .ptab.active) .ic.i7 .i-f { opacity: 1; }
/* лайк и избранное: символ «заменяется» — заливка вырастает из размытия.
   Вкладки меню и профиля меняются мгновенно: их жмут десятки раз в день */
.act .ic.i7 :is(.i-o, .i-f), .sv-like .ic.i7 :is(.i-o, .i-f) {
  transform-box: fill-box; transform-origin: center;
  transition: opacity .3s cubic-bezier(.2, 0, 0, 1), transform .3s cubic-bezier(.2, 0, 0, 1), filter .3s cubic-bezier(.2, 0, 0, 1);
}
.act .ic.i7 .i-f, .sv-like .ic.i7 .i-f { transform: scale(.25); filter: blur(4px); }
:is(.act.liked, .act.fav-on, .sv-like.on) .ic.i7 .i-f { transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .act .ic.i7 :is(.i-o, .i-f), .sv-like .ic.i7 :is(.i-o, .i-f) { transition: opacity .15s ease; transform: none !important; filter: none !important; }
}

/* «Рекомендуем» и списки подписок: длинный @ник больше не заезжает под
   кнопку — колонка текста может сжиматься (minmax(0,1fr)), ник с многоточием */
.follow { grid-template-columns: 46px minmax(0, 1fr) auto; }
.follow-handle, .follow-row .dname, .follow-row .uname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Производительность прокрутки: без обоев (тема по умолчанию) под карточками
   сплошной фон — размытие 30px ничего не меняет на картинке, но пересчитывается
   на каждом кадре прокрутки под каждым постом. Включаем его только с обоями. */
:root:not([data-skin]) :is(.post, .settings-section, .pinned-frame) {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* Язычок-граббер у шторки снизу (телефон) — подсказка, что её можно смахнуть вниз */
@media (max-width: 680px) {
  #modal-host.bottom > :is(.modal, .sheet)::before {
    content: ""; display: block; flex: none; align-self: center;
    width: 36px; height: 5px; border-radius: 3px; margin: -4px auto 10px;
    background: color-mix(in srgb, var(--text) 26%, transparent);
  }
}
/* лист «Отправить» раньше не уходил вовсе: замирал на время закрытия и пропадал
   рывком. Теперь уезжает вниз тем же движением, что и шторки */
#modal-host.closing .send-sheet { animation: sendSheetOut27 .3s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes sendSheetOut27 { to { transform: translateY(100%); } }

/* Контраст «почти по норме» (4.4:1 при требуемых 4.5:1) у мелкого текста:
   зелёные плашки «Плёнка» / «это устройство» и красная кнопка «Удалить».
   В светлой теме зелёный на светло-зелёном был вовсе ~2.5:1. */
:root:not([data-theme="light"]) :is(.video-chip, .dev-badge) { color: color-mix(in oklab, var(--accent) 72%, #fff); }
[data-theme="light"] :is(.video-chip, .dev-badge) { color: color-mix(in oklab, var(--accent) 55%, #000); }
:root:not([data-theme="light"]) .btn.danger { color: #ff6b6b; }
/* плейсхолдеры полей — цветом третьего текста, а не серым браузера (4.3:1) */
::placeholder { color: var(--text-3); opacity: 1; }

/* версия сайта внизу настроек: мелко и полупрозрачно, как «Версия 26.1 (23B85)» в iOS */
.app-version {
  margin: 28px 0 6px; text-align: center;
  font-family: var(--font-bold); font-weight: 700; font-size: .78rem; letter-spacing: .01em;
  color: var(--text-3); opacity: .85; font-variant-numeric: tabular-nums;
}
.app-version:empty { display: none; }