/* Десктоп-фронт away from anime. Дизайн-токены — из Mini App (изумруд, Manrope, звёзды). */
:root {
  --bg: #ffffff; --surface: #f2f3f5; --surface-2: #e8e9ec;
  --text: #16171a; --text-2: #5f636b; --muted: #8d9199;
  --accent: #12b76a; --accent-fill: var(--accent); --accent-rgb: 18 183 106; --on-accent: #06231a; --accent-soft: rgb(var(--accent-rgb) / .12);
  --star: #f5a623; --divider: rgba(0,0,0,.08); --poster-bg: #e3e4e8;
  --grid-line: rgba(0,0,0,.022); --grid-glow: rgb(var(--accent-rgb) / .10);
  --sidebar: 66px; --topbar: 58px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121316; --surface: #1e2024; --surface-2: #2a2d32;
  --text: #eceef1; --text-2: #a9adb5; --muted: #7d828b;
  --accent: #34d98a; --accent-fill: var(--accent); --accent-rgb: 52 217 138; --on-accent: #06231a; --accent-soft: rgb(var(--accent-rgb) / .16);
  --star: #ffb938; --divider: rgba(255,255,255,.08); --poster-bg: #2a2d32;
  --grid-line: rgba(255,255,255,.025); --grid-glow: rgb(var(--accent-rgb) / .22);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* класс с display не должен перебивать атрибут hidden */
html, body { height: 100%; }
body {
  margin: 0; background: transparent; color: var(--text);
  font-family: Manrope, -apple-system, "Segoe UI", sans-serif; font-size: 14px;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
/* фоновая сетка со свечением — как в Mini App */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(135% 60% at 50% -20%, var(--grid-glow), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 56px 56px, 56px 56px;
  background-position: center top;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 6px; }

.app {
  display: grid;
  grid-template-columns: auto 1fr; /* ширину задаёт сам сайдбар (плавно меняется при сворачивании) */
  grid-template-rows: var(--topbar) 1fr;
  /* топбар во всю ширину сверху, сайдбар — под ним слева */
  grid-template-areas: "top top" "side main";
  height: 100vh;
}

/* ---------- сайдбар (в духе shadcn: подписи + сворачивание в иконки) ---------- */
:root { --side-w: 232px; --side-w-icon: 64px; }
.sidebar {
  grid-area: side; width: var(--side-w); overflow: hidden; transition: width .2s ease;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border-right: 1px solid var(--divider);
  display: flex; flex-direction: column; padding: 10px 10px 12px;
}
.app.side-collapsed .sidebar { width: var(--side-w-icon); }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.side-label {
  padding: 12px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; transition: opacity .15s ease;
}
.side-nav .side-label:first-child { padding-top: 4px; }
.app.side-collapsed .side-label { opacity: 0; }
.side-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px;
  color: var(--text-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-align: left;
  transition: background .15s ease, color .15s ease, transform .15s var(--spring, ease);
}
.side-item svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.side-item:hover { background: var(--surface-2); color: var(--text); }
.side-item:active { transform: scale(.97); }
.side-item.is-active { background: var(--accent-soft); color: var(--accent); }
.side-text { transition: opacity .15s ease; }
.app.side-collapsed .side-text { opacity: 0; }
.side-bottom { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--divider); }
/* карточка пользователя внизу */
.side-user {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; margin-top: 2px; border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-align: left; transition: background .15s ease;
}
.side-user:hover, .side-user.is-active { background: var(--surface-2); }
.side-ava {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; overflow: hidden;
  background: var(--accent-fill); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.side-ava img { width: 100%; height: 100%; object-fit: cover; }
.side-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; transition: opacity .15s ease; }
.side-user-text b { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.side-user-text small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.app.side-collapsed .side-user-text { opacity: 0; }
.side-toggle { margin-right: -8px; }
/* подсказка у иконки в свёрнутом режиме */
.side-tip {
  position: fixed; z-index: 300; padding: 6px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap;
  background: var(--text); color: var(--bg); font-size: 12.5px; font-weight: 600;
  opacity: 0; transform: translate(-4px, -50%); transition: opacity .12s ease, transform .12s ease;
}
.side-tip.show { opacity: 1; transform: translate(0, -50%); }

/* ---------- топбар ---------- */
.topbar {
  grid-area: top; background: color-mix(in srgb, var(--surface) 80%, transparent); border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; gap: 18px; padding: 0 18px;
}
.brand { font-weight: 800; font-size: 15px; letter-spacing: .2px; white-space: nowrap; }
.brand-beta {
  font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-soft);
  padding: 2px 6px; border-radius: 6px; margin-left: 4px; text-transform: uppercase; letter-spacing: .5px;
}
.top-search {
  flex: 1; max-width: 520px; margin: 0 0 0 8px; position: relative; display: flex; align-items: center;
}
.top-search > svg { position: absolute; left: 12px; width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.top-search input {
  width: 100%; height: 38px; padding: 0 40px 0 36px; border-radius: 11px;
  background: var(--bg); border: 1px solid var(--divider); color: var(--text); outline: none;
}
.top-search input:focus { border-color: var(--accent); }
.top-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-clear { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: background .14s, color .14s; }
.search-clear:hover { background: var(--surface-2); color: var(--text); }
.search-clear svg { position: static; left: auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--text-2); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- контент ---------- */
.content { grid-area: main; overflow-y: auto; padding: 0 26px 40px; }
/* сетка/вкладки/полки — на всю ширину (тянутся с экраном).
   центрируем только узкие страницы, чтобы они не липли к левому краю на широком экране */
#page-settings { max-width: 640px; margin: 0 auto; }
#page-profile { max-width: 1180px; margin: 0 auto; }
#page-detail { max-width: 1160px; margin: 0 auto; }
.page-head h2 { margin: 0 0 16px; font-size: 22px; font-weight: 800; }
/* страницы без липких вкладок получают верхний отступ */
.page-head, #page-detail, #page-profile, #page-friend { padding-top: 20px; }

/* вкладки — отдельные кнопки-чипы прямо на фоне, без сплошной панели (везде одинаково) */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 16px 0 0; }
/* если над вкладками есть заголовок (Закладки) — верхний отступ уже дал заголовок */
.page-head + .tabs { padding-top: 0; }
.tab {
  padding: 8px 15px; border-radius: 11px; background: var(--surface); color: var(--text-2); font-weight: 600; white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab:active { transform: scale(.94); }
.tab.is-active { background: var(--accent-fill); color: #fff; }

/* сетка постеров */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 22px 20px; }
.card { text-align: left; display: flex; flex-direction: column; }
.poster {
  position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: var(--poster-bg);
  box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .16s, box-shadow .16s;
}
/* пропорция 2:3 через распорку: aspect-ratio на flex-элементе не даёт высоту, если внутри нет картинки */
.poster::after { content: ''; display: block; padding-top: 150%; }
.card:hover .poster { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.32); }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.poster .rate {
  position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 9px; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 700;
}
.card-title { margin: 10px 2px 3px; font-weight: 700; font-size: 14px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-meta { margin: 0 2px; color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-meta .dot { opacity: .5; }

/* звёзды AniXart (из 5) */
.stars5 { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.stars5-track { position: relative; display: inline-block; line-height: 1; }
.stars5-track i { font-style: normal; }
.stars5-bg { color: color-mix(in srgb, var(--star) 26%, transparent); }
.stars5-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--star); }
.stars5-track i, .stars5-num { font-size: 12px; letter-spacing: 1px; }
.stars5-num { font-weight: 700; color: var(--text); }
.poster .rate .stars5-num { color: #fff; }
.poster .rate .stars5-bg { color: rgba(255,255,255,.34); }
.poster .rate .rate-scale { opacity: .7; font-weight: 600; margin-left: 1px; }
.meta-scale { color: var(--muted); font-weight: 600; }

.grid-status, .soon { color: var(--muted); text-align: center; padding: 30px; }
.page-soon { display: grid; place-items: center; height: 60vh; }
.soon { font-size: 16px; }

/* ---------- обзор: полки ---------- */
.shelf { margin-bottom: 26px; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.shelf-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.shelf-all { display: inline-flex; align-items: center; gap: 1px; color: var(--muted); font-weight: 600; font-size: 13px; transition: color .14s; }
.shelf-all:hover { color: var(--accent); }
.shelf-all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shelf-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.shelf-row::-webkit-scrollbar { height: 8px; }
.shelf-row .card { flex: 0 0 152px; width: 152px; scroll-snap-align: start; }
.shelf-row .card-title { font-size: 13px; min-height: 2.4em; }

/* ---------- действия с закладками в модалке ---------- */
.md-actions { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.md-lists { display: flex; flex-wrap: wrap; gap: 6px; }
.md-list { padding: 7px 12px; border-radius: 10px; background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13px; transition: background .14s, color .14s; }
.md-list:hover { background: var(--surface-2); color: var(--text); }
.md-list.is-active { background: var(--accent-fill); color: #fff; }
.md-fav { width: 40px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 17px; display: grid; place-items: center; transition: background .14s, color .14s; }
.md-fav:hover { background: var(--surface-2); }
.md-fav.is-active { background: rgba(255,77,109,.16); color: #ff4d6d; }

/* ---------- настройки ---------- */
.settings-card { max-width: none; }
.s-label { color: var(--accent); font-weight: 600; font-size: 13px; margin: 22px 0 8px; }
.s-theme { display: flex; gap: 8px; }
.s-theme button { padding: 10px 18px; border-radius: 11px; background: var(--surface); color: var(--text-2); font-weight: 600; }
.s-theme button.is-active { background: var(--accent-fill); color: #fff; }
/* карточка аккаунта: аватар, имя, кнопка выхода; подтверждение выезжает поверх */
.s-account { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 16px;
  background: var(--surface); overflow: hidden; }
.s-acc-ava { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 800; font-size: 19px; overflow: hidden; }
.s-acc-ava img { width: 100%; height: 100%; object-fit: cover; }
.s-acc-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.s-acc-text b { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-acc-text small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-logout { display: flex; align-items: center; gap: 8px; flex: none; height: 38px; padding: 0 14px; border-radius: 11px;
  font-weight: 700; font-size: 14px; color: #ff6b6b; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,107,107,.35);
  transition: background .15s, box-shadow .15s, transform .15s; }
.s-logout svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-logout:hover { background: rgba(255,107,107,.1); box-shadow: inset 0 0 0 1px rgba(255,107,107,.6); }
.s-logout-confirm { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 18px;
  background: color-mix(in srgb, #ff5a5f 10%, var(--surface)); opacity: 0; transform: translateX(12px);
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.s-logout-confirm.open { opacity: 1; transform: none; }
.s-logout-confirm[hidden] { display: none; }
.s-logout-confirm span { flex: 1; font-weight: 600; font-size: 14px; color: var(--text); }
.s-lc-no, .s-lc-yes { height: 36px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 13px; transition: background .14s, transform .14s; }
.s-lc-no { background: var(--surface-2); color: var(--text-2); }
.s-lc-no:hover { color: var(--text); }
.s-lc-yes { background: #ff5a5f; color: #fff; }
.s-lc-yes:hover { background: #ff7478; }
.s-lc-no:active, .s-lc-yes:active { transform: scale(.95); }
.s-hint { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* ---------- модалка ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); }
.modal-card {
  position: relative; width: min(760px, 92vw); max-height: 86vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--divider); border-radius: 18px; padding: 0;
}
.md-hero { display: flex; gap: 20px; padding: 22px; }
.md-poster { width: 190px; flex-shrink: 0; aspect-ratio: 2/3; border-radius: 14px; overflow: hidden; background: var(--poster-bg); }
.md-poster img { width: 100%; height: 100%; object-fit: cover; }
.md-info h2 { margin: 2px 0 6px; font-size: 24px; font-weight: 800; line-height: 1.2; }
.md-orig { color: var(--muted); margin: 0 0 12px; }
.md-facts { color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.md-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.md-rating .stars5-track i, .md-rating .stars5-num { font-size: 20px; letter-spacing: 3px; }
.md-rating .stars5-num { font-size: 22px; }
.md-alt { color: var(--muted); font-size: 13px; }
.md-genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.md-genre { padding: 4px 10px; border-radius: 9px; background: var(--surface); color: var(--text-2); font-size: 12px; }
.md-desc { padding: 0 22px 24px; color: var(--text-2); line-height: 1.6; }
.md-close { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; font-size: 20px; z-index: 2; }

/* ---------- страница деталей ---------- */
.d-back { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--text-2); font-weight: 600; }
.d-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-back:hover { color: var(--text); }
.d-hero { display: flex; gap: 30px; align-items: flex-start; max-width: 1120px; }
.d-poster-col { width: 270px; flex: 0 0 270px; }
.d-poster { aspect-ratio: 2/3; border-radius: 16px; overflow: hidden; background: var(--poster-bg); box-shadow: 0 12px 34px rgba(0,0,0,.34); }
.d-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-play { margin-top: 14px; width: 100%; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--on-accent); background: var(--accent-fill); }
.d-play svg { width: 18px; height: 18px; fill: currentColor; }
.d-play:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.d-info { flex: 1; min-width: 0; }
.d-title { font-size: 30px; font-weight: 800; margin: 0 0 4px; line-height: 1.15; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.d-age { font-size: 12px; font-weight: 700; color: #ff6b6b; background: rgba(255,107,107,.15); padding: 3px 8px; border-radius: 7px; }
.d-orig { color: var(--muted); margin: 0 0 14px; font-size: 15px; }
.d-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.d-rating .stars5-track i, .d-rating .stars5-num { font-size: 24px; letter-spacing: 3px; }
.d-rating small { color: var(--muted); }
.d-r10 { font-size: 26px; font-weight: 800; }
.d-actions { display: flex; gap: 8px; margin: 8px 0 0; position: relative; z-index: 20; } /* выше постеров франшизы (у их img z-index: 1) и стрелок ленты */
.d-listwrap { position: relative; flex: 1; min-width: 0; }
/* вторичные кнопки — спокойные; статус списка — мягкий оттенок своего цвета (--lc) */
.d-listbtn { --lc: var(--text-2); display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 14px; border-radius: 12px; width: 100%; min-width: 0;
  font-weight: 650; font-size: 14px; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.d-listbtn.has { color: var(--lc); background: color-mix(in srgb, var(--lc) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 35%, transparent); }
.d-listbtn svg:first-of-type { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.d-listbtn.has svg:first-of-type { fill: currentColor; }
.d-listbtn svg:last-of-type { width: 16px; height: 16px; margin-left: auto; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.d-listbtn .d-listlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-listbtn:hover { background: var(--surface-2); }
.d-listbtn.has:hover { background: color-mix(in srgb, var(--lc) 22%, var(--surface)); }
/* меню списка — «жидкое стекло», как быстрое меню */
.d-listmenu { position: absolute; top: 48px; left: 0; z-index: 10; min-width: 240px;
  background: color-mix(in srgb, var(--surface) 93%, transparent); /* почти непрозрачное: под ним текст, а не картинки */
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 16px; padding: 8px; box-shadow: 0 18px 46px rgba(0,0,0,.5);
  transform-origin: top left; opacity: 0; transform: scale(.95); pointer-events: none;
  transition: opacity .14s ease, transform .16s cubic-bezier(.34,1.56,.64,1); }
.d-listmenu.open { opacity: 1; transform: none; pointer-events: auto; }
.d-listmenu[hidden] { display: none; }
.d-menuitem { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: 10px; font-weight: 600; color: var(--text-2); transition: background .12s, color .12s; }
.d-menuitem i { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.d-menuitem:hover { background: var(--surface-2); color: var(--text); }
.d-menuitem.is-active { color: var(--text); background: var(--surface-2); }
.d-menuremove { color: #ff6b6b; margin-top: 4px; }
.d-menuremove:hover { color: #ff6b6b; background: rgba(255,107,107,.12); }
.d-fav { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); color: var(--muted); display: grid; place-items: center; transition: background .14s, color .14s; }
.d-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.d-fav:hover { background: var(--surface-2); color: var(--text); }
.d-fav.is-active { background: rgba(255,77,109,.14); box-shadow: inset 0 0 0 1px rgba(255,77,109,.35); color: #ff4d6d; }
.d-fav.is-active svg { fill: currentColor; }
/* единый блок фактов: 1px-зазор на фоне-разделителе + overflow:hidden — как в Mini App */
.d-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-bottom: 20px; max-width: 560px;
  border-radius: 12px; overflow: hidden; background: var(--divider); }
.d-fact { background: var(--surface); padding: 11px 14px; min-width: 0; }
.d-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.d-fact-k { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.d-fact-v { font-weight: 700; overflow-wrap: anywhere; }
.d-genres { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.d-genre { padding: 5px 12px; border-radius: 9px; background: var(--surface); color: var(--text-2); font-size: 13px; }
.d-desc h3 { font-size: 16px; margin: 0 0 8px; }
.d-desc p { color: var(--text-2); line-height: 1.65; margin: 0; max-width: 760px; }
.d-block { margin-top: 30px; }
.d-block h3 { font-size: 18px; font-weight: 800; margin: 0 0 14px; }
.d-shots { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.d-shots::-webkit-scrollbar { height: 8px; }
.d-shot { flex: 0 0 262px; height: 147px; border-radius: 12px; overflow: hidden; background: var(--poster-bg); }
.d-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s; }
.d-shot:hover img { transform: scale(1.06); }

/* ---------- лайтбокс кадров ---------- */
.modal-card.lb { background: transparent; border: 0; width: auto; max-width: 92vw; max-height: 90vh; padding: 0; overflow: visible; }
.lb-img { max-width: 92vw; max-height: 82vh; border-radius: 12px; display: block; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb-count { text-align: center; color: #fff; margin-top: 12px; font-weight: 600; }
.modal-card.lb .md-close { background: rgba(0,0,0,.55); }

/* ---------- горизонтальные ленты со стрелками (вместо полосы прокрутки) ---------- */
.hstrip { position: relative; }
.hscroll { scrollbar-width: none; -ms-overflow-style: none; }
.hscroll::-webkit-scrollbar { display: none; height: 0; }
.hstrip-arrow {
  position: absolute; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; background: rgba(20, 21, 24, 0.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transform: translateY(-50%);
  opacity: 0; transition: opacity .15s, transform .15s, background .15s;
}
.hstrip:hover .hstrip-arrow { opacity: 1; }
.hstrip-arrow:hover { background: rgba(20, 21, 24, 0.82); transform: translateY(-50%) scale(1.07); }
.hstrip-arrow:active { transform: translateY(-50%) scale(0.95); }
.hstrip-arrow[hidden] { display: none; }
.hstrip-arrow.is-prev { left: -6px; }
.hstrip-arrow.is-next { right: -6px; }
.hstrip-arrow svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
/* полоса больше не нужна */
.shelf-row, .d-shots { padding-bottom: 4px; }

/* стрелки в лайтбоксе кадра */
.modal-card.lb { position: relative; }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(20,21,24,.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: background .15s, transform .15s; }
.lb-arrow:hover { background: rgba(20,21,24,.85); transform: translateY(-50%) scale(1.06); }
.lb-arrow svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }

/* ---------- быстрое меню (долгое нажатие / правый клик) ---------- */
.lp-menu { position: fixed; z-index: 60; min-width: 244px; max-width: 300px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 16px; padding: 8px; box-shadow: 0 18px 46px rgba(0,0,0,.5);
  transform-origin: top left; opacity: 0; transform: scale(.95); pointer-events: none;
  transition: opacity .14s ease, transform .16s cubic-bezier(.34,1.56,.64,1); }
.lp-menu.open { opacity: 1; transform: none; pointer-events: auto; } /* плавное открытие/закрытие */
.lp-menu[hidden] { display: none; }
.lp-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 12px; border-bottom: 1px solid var(--divider); margin-bottom: 6px; }
.lp-head img { width: 40px; height: 54px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.lp-head span { font-weight: 700; font-size: 14px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: 10px; font-weight: 600; color: var(--text-2); transition: background .12s, color .12s; }
.lp-item i { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.lp-item:hover { background: var(--surface-2); color: var(--text); }
.lp-item.is-active { color: var(--text); background: var(--surface-2); }

/* ---------- плавность и скелетоны загрузки ---------- */
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page:not([hidden]) { animation: pageIn .24s ease both; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card--enter { animation: cardIn .28s ease both; }
@keyframes cardOut { to { opacity: 0; transform: scale(.94); } }
.card--leave { animation: cardOut .2s ease both; pointer-events: none; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sk { display: block; background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 62%, #fff 38%) 50%, var(--surface) 100%);
  background-size: 200% 100%; animation: shimmer 1.25s linear infinite; }
.sk-poster { position: relative; width: 100%; border-radius: 14px; }
.sk-poster::after { content: ''; display: block; padding-top: 150%; }
.sk-line { height: 12px; border-radius: 6px; margin-top: 10px; }
.sk-line.short { width: 58%; }
.card.skeleton { pointer-events: none; }

/* ---------- фильтры ---------- */
/* панель фильтров — в топбаре, справа от поиска */
.filter-bar { display: flex; align-items: center; gap: 8px; }
.filter-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 11px; background: var(--surface); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.filter-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.filter-btn:hover { background: var(--surface-2); color: var(--text); }
.filter-btn.on { background: var(--accent-soft); color: var(--accent); }
.filter-count { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--accent-fill); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.filter-reset { height: 38px; padding: 0 11px; border-radius: 11px; color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.filter-reset:hover { color: var(--text); background: var(--surface); }
/* выпадающее меню фильтров — фиксированное, под топбаром у кнопки */
.filter-panel {
  position: fixed; top: calc(var(--topbar) + 8px); right: 16px; z-index: 60;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - var(--topbar) - 24px); overflow-y: auto;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 14px; padding: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  transform-origin: top right; opacity: 0; transform: translateY(-8px) scale(.97);
  transition: opacity .16s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.filter-panel.open { opacity: 1; transform: none; } /* плавное открытие/закрытие */
.f-group { margin-bottom: 14px; }
.f-group:last-child { margin-bottom: 0; }
.f-label { display: block; color: var(--muted); font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.f-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.f-chip { padding: 7px 13px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); color: var(--text-2); font-weight: 600; font-size: 13px; transition: background .14s, border-color .14s, color .14s; }
.f-chip:hover { background: color-mix(in srgb, var(--text) 11%, transparent); border-color: color-mix(in srgb, var(--text) 16%, transparent); color: var(--text); }
.f-chip.on { background: var(--accent-fill); border-color: var(--accent); color: var(--on-accent); }
/* скрытый жанр: красный, зачёркнутый, с минусом */
.f-chip.off { background: rgba(255,90,95,.12); border-color: rgba(255,90,95,.45); color: #ff6b6b; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.f-chip.off::before { content: '−'; margin-right: 5px; text-decoration: none; display: inline-block; font-weight: 800; }
.f-chip.off:hover { border-color: #ff6b6b; color: #ff6b6b; }
.f-hint { font-weight: 500; font-size: 12px; color: var(--muted); margin-left: 8px; text-transform: none; letter-spacing: 0; }
.f-year { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.f-year option { background: var(--surface); color: var(--text); }

/* ---------- профиль ---------- */
.pf-head { display: flex; align-items: center; gap: 18px; margin: 4px 0 22px; }
.pf-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); display: grid; place-items: center; font-size: 34px; font-weight: 800; overflow: hidden; flex-shrink: 0; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-id { flex: 1; }
.pf-id h2 { margin: 0; font-size: 26px; font-weight: 800; }
.pf-id span { color: var(--muted); }
.pf-gear { width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--text-2); display: grid; place-items: center; }
.pf-gear:hover { background: var(--surface-2); color: var(--text); }
.pf-gear svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 26px; max-width: 900px; }
.pf-stat { background: var(--surface); border-radius: 14px; padding: 14px 12px; text-align: left; transition: background .14s; }
.pf-stat:hover { background: var(--surface-2); }
.pf-stat-n { display: block; font-size: 26px; font-weight: 800; }
.pf-stat-l { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.pf-stat-l i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pf-section { margin-bottom: 26px; max-width: 640px; }
.pf-section h3 { font-size: 16px; font-weight: 800; margin: 0 0 12px; }
.pf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pf-tile { background: var(--surface); border-radius: 14px; padding: 16px; }
.pf-tile b { display: block; font-size: 26px; font-weight: 800; }
.pf-tile span { color: var(--muted); font-size: 13px; }
.pf-bars { display: flex; flex-direction: column; gap: 10px; }
.pf-bar { display: grid; grid-template-columns: 130px 1fr 36px; align-items: center; gap: 12px; }
.pf-bar-l { color: var(--text-2); font-size: 13px; font-weight: 600; }
.pf-bar-track { height: 10px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.pf-bar-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), #0ea5a3); }
.pf-bar-n { color: var(--muted); font-size: 13px; text-align: right; }
.pf-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-kind { padding: 8px 14px; border-radius: 11px; background: var(--surface); color: var(--text-2); font-size: 13px; }
.pf-kind b { color: var(--text); }

/* ---------- плавный скролл Lenis ---------- */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- кнопка возврата в Обзор ---------- */
.cat-back { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 600; padding: 16px 0 0; }
.cat-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cat-back:hover { color: var(--text); }

/* ---------- строки настроек (уведомления/анонсы) ---------- */
.s-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; padding: 13px 0; border-bottom: 1px solid var(--divider); }
.s-row-text { display: flex; flex-direction: column; gap: 2px; }
.s-row-text small { color: var(--muted); font-size: 12.5px; }
.s-switch { -webkit-appearance: none; appearance: none; width: 44px; height: 25px; border-radius: 20px; background: var(--surface-2); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
.s-switch:checked { background: var(--accent-fill); }
.s-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .2s; }
.s-switch:checked::after { transform: translateX(19px); }
.s-radio-row { cursor: pointer; }
.s-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface-2); flex-shrink: 0; position: relative; transition: border-color .2s; }
.s-radio.on { border-color: var(--accent); }
.s-radio.on::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent-fill); }

/* ---------- заглушка постера (нет/битая картинка) — рисуем ПОД картинкой через ::before ---------- */
.poster, .d-poster { position: relative; }
.poster::before, .d-poster::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C13 9 15 11 22 12C15 13 13 15 12 22C11 15 9 13 2 12C9 11 11 9 12 2Z' fill='%2334d98a' fill-opacity='0.45'/%3E%3C/svg%3E") center / 34% no-repeat,
    linear-gradient(140deg, var(--surface-2), var(--surface) 60%, var(--surface-2));
}
.d-poster img { position: relative; z-index: 1; } /* картинка поверх заглушки */
.poster .rate, .poster .disc-marks { z-index: 2; }

/* ---------- микро-анимации кнопок: плавное переключение и нажатие ---------- */
:root { --spring: cubic-bezier(.34,1.56,.64,1); }

/* плавное переключение состояний там, где раньше срабатывало мгновенно */
.filter-btn, .filter-reset, .s-theme button, .md-list, .md-fav, .shelf-all, .pf-stat {
  transition: background .18s ease, color .18s ease, transform .18s var(--spring);
}
.d-play, .d-listbtn { transition: background .16s ease, filter .16s ease, transform .18s var(--spring); }
.d-fav { transition: background .18s ease, color .18s ease, transform .18s var(--spring); }
.s-radio { transition: border-color .2s ease, transform .18s var(--spring); }

/* тактильное «нажатие» — лёгкий отскок */
.d-play:active, .d-listbtn:active, .filter-btn:active, .filter-reset:active,
.s-theme button:active, .s-logout:active, .md-list:active, .md-fav:active,
.pf-stat:active, .shelf-all:active { transform: scale(.95); }
.d-fav:active { transform: scale(.88); }
.s-radio-row:active .s-radio { transform: scale(.9); }

/* избранное: сердечко «пыхает» при включении */
@keyframes favPop { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 62% { transform: scale(.93); } 100% { transform: scale(1); } }
.d-fav.is-active { animation: favPop .34s var(--spring); }

/* пункт меню списка: активный подсвечивается и чуть съезжает */

/* радио в настройках: точка плавно вырастает */
@keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } }
.s-radio.on::after { animation: dotIn .2s var(--spring); }

/* ---------- расписание серий ---------- */
.sch-toolbar { grid-column: 1 / -1; margin: 2px 0 -8px; }
.sch-mine { padding: 8px 15px; border-radius: 11px; background: var(--surface); color: var(--text-2); font-weight: 600; transition: background .18s ease, color .18s ease, transform .18s var(--spring); }
.sch-mine:hover { background: var(--surface-2); color: var(--text); }
.sch-mine:active { transform: scale(.95); }
.sch-mine.on { background: var(--accent-soft); color: var(--accent); }
.sch-day { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 20px 0 2px; font-size: 17px; font-weight: 800; }
.sch-day small { color: var(--muted); font-weight: 600; font-size: 13px; }
.card-when { display: block; margin-top: 5px; color: var(--accent); font-weight: 700; font-size: 12.5px; }

/* ---------- select часового пояса в настройках ---------- */
.s-tz-row { align-items: center; }
.s-select { padding: 9px 36px 9px 12px; border-radius: 10px; border: 1px solid var(--divider); color: var(--text); font: inherit; font-weight: 600; max-width: 260px; cursor: pointer;
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
  /* своя стрелка вместо системной — с отступом от края */
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8f98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; }
.s-select option { background: var(--surface); color: var(--text); }
.s-select:focus { outline: none; border-color: var(--accent); }

/* ---------- встроенный плеер (AniLibria) ---------- */
.player { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 200; background: #05070a;
  opacity: 0; transform-origin: 0 0; transition: opacity .2s ease, border-radius .32s, box-shadow .32s, transform .32s cubic-bezier(.2,.8,.2,1); }
.player.open { opacity: 1; }
.player[hidden] { display: none; }
.pl-stage { position: absolute; inset: 0; overflow: hidden; }
.pl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #05070a; }
.pl-stage.idle { cursor: none; }

/* верхняя/нижняя панели с градиентом, плавно скрываются */
.pl-top, .pl-bottom { position: absolute; left: 0; right: 0; padding: 16px 20px; z-index: 3;
  opacity: 1; transition: opacity .25s ease, transform .25s ease; }
.pl-top { top: 0; display: flex; align-items: flex-start; gap: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.72), transparent); }
.pl-bottom { bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,.78), transparent); padding-top: 40px; }
.pl-stage.idle .pl-top { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.pl-stage.idle .pl-bottom { opacity: 0; transform: translateY(8px); pointer-events: none; }

.pl-title { flex: 1; min-width: 0; color: #fff; font-weight: 800; font-size: 17px; line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.pl-top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* кнопки-иконки плеера */
.pl-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  transition: background .16s ease, transform .16s var(--spring); }
.pl-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-icon:hover { background: rgba(255,255,255,.14); }
.pl-icon:active { transform: scale(.9); }

/* дропдауны серии/качества */
.pl-drop { position: relative; }
.pl-drop-btn { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px 0 13px;
  border-radius: 11px; background: rgba(14,17,21,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.pl-drop-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pl-drop-btn:hover { background: rgba(14,17,21,.82); }
.pl-drop-menu { position: absolute; top: 46px; right: 0; z-index: 5; min-width: 180px; max-height: 360px; overflow-y: auto;
  background: rgba(22,26,32,.5); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 6px;
  box-shadow: 0 16px 44px rgba(0,0,0,.45); }
.pl-drop-menu[hidden] { display: none; }
.pl-menu-label { padding: 8px 11px 4px; color: rgba(255,255,255,.5); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pl-drop-item { display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: 9px;
  color: #dfe3e9; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.pl-drop-item:hover { background: rgba(255,255,255,.12); color: #fff; }
.pl-drop-item.on { color: var(--accent); }
.pl-drop-item.pl-dim { opacity: .5; } /* режим неактивен, пока апскейл выключен */

/* центр: большая кнопка play и загрузка */
.pl-bigplay { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; z-index: 2;
  background: rgba(0,0,0,.42); color: #fff; display: grid; place-items: center; backdrop-filter: blur(2px);
  transition: transform .16s var(--spring); }
.pl-bigplay svg { width: 40px; height: 40px; }
.pl-bigplay:hover { transform: scale(1.06); }
.pl-bigplay[hidden] { display: none; }
.pl-loading { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; z-index: 2; pointer-events: none; }
.pl-loading[hidden] { display: none; }
.pl-spin { position: absolute; inset: 0; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent); border-radius: 50%; animation: plspin .8s linear infinite; }
@keyframes plspin { to { transform: rotate(360deg); } }
.pl-status { position: absolute; inset: 0; margin: auto; z-index: 4; height: fit-content; max-width: 460px; text-align: center;
  color: #d6d9df; font-weight: 600; font-size: 15px; line-height: 1.5; white-space: pre-line; padding: 20px; }
.pl-status[hidden] { display: none; }

/* полоса перемотки */
.pl-seek { position: relative; height: 16px; display: flex; align-items: center; cursor: pointer; margin-bottom: 4px; }
.pl-seek::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 3px; background: rgba(255,255,255,.22); }
.pl-buffered, .pl-played { position: absolute; left: 0; height: 4px; border-radius: 3px; }
.pl-buffered { background: rgba(255,255,255,.3); width: 0; }
.pl-played { background: var(--accent-fill); width: 0; z-index: 1; }
.pl-knob { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%); z-index: 2; opacity: 0; transition: opacity .15s ease; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.pl-seek:hover .pl-knob { opacity: 1; }
.pl-seek:hover::before, .pl-seek:hover .pl-buffered, .pl-seek:hover .pl-played { height: 6px; }

/* нижний ряд управления */
.pl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pl-bar-l, .pl-bar-r { display: flex; align-items: center; gap: 4px; }
.pl-time { color: #e7e9ee; font-weight: 600; font-size: 13px; margin-left: 6px; white-space: nowrap; }
.pl-time i { color: rgba(255,255,255,.45); font-style: normal; margin: 0 2px; }
.pl-vol { display: flex; align-items: center; }
.pl-vol-range { width: 0; opacity: 0; transition: width .2s ease, opacity .2s ease; height: 4px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.3); border-radius: 3px; cursor: pointer; }
.pl-vol:hover .pl-vol-range { width: 78px; opacity: 1; margin-left: 2px; }
.pl-vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer; }
.pl-srclabel { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 11px; background: rgba(14,17,21,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #e7e9ee; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
/* апскейл: canvas поверх видео + подсветка активной кнопки */
.pl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #05070a; z-index: 1; transition: opacity .16s ease; }
.pl-canvas[hidden] { display: none; }
.pl-drop-btn.pl-up-on { background: var(--accent-fill); color: var(--on-accent); }

/* ---------- франшиза в карточке тайтла ---------- */
/* запас 8px по краям под обводку текущей части (она выходит на 4px за постер) и подъём при наведении;
   отрицательный margin возвращает ленту на линию заголовка */
.d-fr { display: flex; gap: 14px; overflow-x: auto; padding: 8px 8px 4px; margin: -2px -8px 0; scroll-padding-inline: 8px; scroll-snap-type: x proximity; }
.d-fr::-webkit-scrollbar { height: 8px; }
.fr-item { flex: 0 0 150px; width: 150px; display: flex; flex-direction: column; text-align: left; scroll-snap-align: start; }
.fr-item .poster { outline: 2px solid transparent; outline-offset: 2px; transition: transform .16s, box-shadow .16s, outline-color .16s; }
.fr-item:not(:disabled):hover .poster { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.32); }
.fr-item--current { cursor: default; }
.fr-item--current .poster { outline-color: var(--accent); }
.fr-name { margin-top: 8px; font-weight: 700; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fr-meta { margin-top: 3px; color: var(--muted); font-size: 12px; }
.fr-item--current .fr-meta { color: var(--accent); font-weight: 700; }

/* ---------- плавная смена разделов (View Transitions) ---------- */
.vt .content { view-transition-name: content; }
.vt .page:not([hidden]) { animation: none; } /* кроссфейд делает браузер — своя анимация не нужна */
::view-transition-old(content) { animation: vtOut .14s ease-in both; }
::view-transition-new(content) { animation: vtIn .3s cubic-bezier(.2,.8,.2,1) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- постер на весь экран ---------- */
.d-poster--zoom { cursor: pointer; }
.d-poster--zoom img { transition: transform .25s ease, filter .25s ease; }
.d-poster--zoom:hover img { transform: scale(1.03); filter: brightness(1.05); }
.lb--poster .lb-img { max-height: 90vh; }

/* ---------- плавная смена темы ---------- */
/* на время смены темы весь экран — одним слоем, чтобы круг раскрывался по всему окну */
html.theme-vt .content { view-transition-name: none; }
html.theme-vt::view-transition-old(root) { animation: none; }
html.theme-vt::view-transition-new(root) { animation: themeReveal .55s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes themeReveal {
  from { clip-path: circle(0 at var(--tx) var(--ty)); }
  to { clip-path: circle(var(--tr) at var(--tx) var(--ty)); }
}
/* запасной вариант без View Transitions — перелив цветов */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important;
}

/* ---------- сворачивание сайдбара: карточки плавно переезжают при смене числа колонок ---------- */
html.side-vt .content { view-transition-name: none; }
html.side-vt::view-transition-group(*) { animation-duration: .34s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html.side-vt::view-transition-old(root), html.side-vt::view-transition-new(root) { animation: none; }

/* ---------- выбор серии по кнопке «Смотреть» ---------- */
.d-playwrap { position: relative; z-index: 30; } /* выше кнопок списка и постеров франшизы */
.ep-pop { position: absolute; top: calc(100% + 8px); left: 0; width: 340px; padding: 10px;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 16px; box-shadow: 0 18px 46px rgba(0,0,0,.5);
  transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
  transition: opacity .14s ease, transform .16s cubic-bezier(.34,1.56,.64,1); }
.ep-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.ep-pop[hidden] { display: none; }
.ep-resume { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 14px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; transition: background .14s; }
.ep-resume:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ep-resume svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.ep-resume span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-head { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 4px 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ep-head small { font-weight: 500; font-size: 12px; }
.ep-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-height: 262px; overflow-y: auto; padding: 2px; margin: -2px; }
.ep-tile { position: relative; height: 40px; border-radius: 10px; overflow: hidden; background: var(--surface-2); color: var(--text);
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: background .12s, color .12s, box-shadow .12s; }
.ep-tile:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* просмотрена: приглушённая, с зелёной галочкой в углу */
.ep-tile.is-seen { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--muted); }
.ep-tile.is-seen::after { content: ''; position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2306231a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat; }
/* начатая: обводка, досмотренная часть плитки подсвечена, снизу заметная полоска прогресса на треке */
.ep-tile.is-cur { --p: 0%; box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, var(--surface-2)) var(--p), var(--surface-2) var(--p)); }
.ep-tile i { position: absolute; left: 5px; right: 5px; bottom: 5px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--p), color-mix(in srgb, var(--text) 18%, transparent) var(--p)); }
/* и в выпадающем списке серий плеера */
.pl-drop-item.seen { opacity: .6; }
.pl-drop-item.seen::after { content: ' ✓'; color: var(--accent); }

/* ---------- плеер: автопереход на следующую серию ---------- */
.pl-autonext { position: absolute; right: 24px; bottom: 96px; z-index: 6; display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 14px; border-radius: 16px; color: #fff;
  background: rgba(16,17,20,.72); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 40px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1); }
.pl-autonext.open { opacity: 1; transform: none; }
.pl-an-ring { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.pl-an-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pl-an-ring circle { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3; }
.pl-an-ring .pl-an-prog { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; animation: anRing 5s linear forwards; }
@keyframes anRing { to { stroke-dashoffset: 119.4; } }
.pl-an-ring b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-an-text { display: flex; flex-direction: column; min-width: 120px; }
.pl-an-text small { font-size: 12px; color: rgba(255,255,255,.65); font-weight: 600; }
.pl-an-text span { font-size: 15px; font-weight: 800; }
.pl-an-go, .pl-an-x { height: 36px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 13px; transition: background .14s, transform .14s; }
.pl-an-go { background: var(--accent-fill); color: var(--on-accent); }
.pl-an-go:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
.pl-an-x { background: rgba(255,255,255,.1); color: #fff; }
.pl-an-x:hover { background: rgba(255,255,255,.18); }
.pl-an-go:active, .pl-an-x:active { transform: scale(.95); }

/* ---------- плеер: «перенести в Просмотрено» после последней серии ---------- */
.pl-complete { position: absolute; left: 50%; top: 84px; z-index: 6; display: flex; align-items: center; gap: 18px;
  padding: 14px 14px 14px 18px; border-radius: 16px; color: #fff; max-width: min(640px, calc(100% - 40px));
  background: rgba(16,17,20,.78); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 40px rgba(0,0,0,.45);
  opacity: 0; transform: translate(-50%, -10px); transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1); }
.pl-complete.open { opacity: 1; transform: translate(-50%, 0); }
.pl-cp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-cp-text b { font-size: 15px; }
.pl-cp-text span { font-size: 13px; color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cp-btns { display: flex; gap: 8px; flex: none; }
.pl-cp-yes, .pl-cp-no { height: 36px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 13px; transition: background .14s; }
.pl-cp-yes { background: #ff6bd6; color: #2a0722; } /* цвет списка «Просмотрено» */
.pl-cp-yes:hover { background: #ff8ae0; }
.pl-cp-no { background: rgba(255,255,255,.1); color: #fff; }
.pl-cp-no:hover { background: rgba(255,255,255,.18); }

/* ---------- профиль: история просмотра ---------- */
.hist-day + .hist-day { margin-top: 14px; }
.hist-date { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 6px 4px; }
.hist-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 7px 10px 7px 7px; border-radius: 12px; transition: background .14s; }
.hist-row:hover { background: var(--surface); }
.hist-poster { width: 38px; height: 54px; flex: none; border-radius: 8px; overflow: hidden; background: var(--poster-bg); }
.hist-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hist-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-main small { font-size: 13px; color: var(--text-2); }
.hist-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.hist-more { margin-top: 10px; padding: 9px 16px; border-radius: 10px; background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13px; }
.hist-more:hover { background: var(--surface-2); color: var(--text); }
.hist-empty { color: var(--muted); font-size: 14px; padding: 4px; }

/* ---------- сайдбар: «Продолжить» ---------- */
.side-nav { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.side-nav::-webkit-scrollbar { display: none; }
.side-cont { display: flex; flex-direction: column; gap: 2px; }
.side-cont-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border-radius: 10px; text-align: left;
  color: var(--text-2); overflow: hidden; transition: background .15s ease, color .15s ease, transform .15s var(--spring, ease); }
.side-cont-item:hover { background: var(--surface-2); color: var(--text); }
.side-cont-item:active { transform: scale(.97); }
.side-cont-poster { position: relative; flex: 0 0 28px; width: 28px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--poster-bg); }
.side-cont-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-cont-poster i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent-fill); }
.side-cont-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.side-cont-text b { font-size: 13px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-cont-text small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.side-cont-text small.is-next { color: var(--accent); }
/* ПКМ-меню у «Продолжить» — на базе быстрого меню */
.cont-menu { min-width: 230px; }
.cont-menu .lp-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cont-menu .cont-menu-rm { color: #ff6b6b; }
.cont-menu .cont-menu-rm:hover { color: #ff6b6b; background: rgba(255,107,107,.12); }
.side-cont-item { max-height: 60px; }
.side-cont-item.is-leaving { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transform: translateX(-12px);
  transition: opacity .18s ease, max-height .2s ease, padding .2s ease, transform .18s ease; }

/* ---------- друзья ---------- */
.side-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ff5a5f; color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.side-badge[hidden] { display: none; }
.app.side-collapsed .side-badge { position: absolute; margin: 0; transform: translate(12px, -10px); min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.side-item { position: relative; }
.side-fr { display: flex; flex-direction: column; gap: 2px; }
.side-fr-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border-radius: 10px; text-align: left; overflow: hidden;
  transition: background .15s ease, transform .15s var(--spring, ease); }
.side-fr-item:hover { background: var(--surface-2); }
.side-fr-item:active { transform: scale(.97); }

.fr-ava { position: relative; width: var(--s); height: var(--s); flex: 0 0 var(--s); border-radius: 50%; background: var(--accent-fill); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 800; font-size: calc(var(--s) * .42); }
.fr-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fr-dot { position: absolute; right: -1px; bottom: -1px; width: 26%; height: 26%; min-width: 9px; min-height: 9px; border-radius: 50%;
  background: #2fd67b; box-shadow: 0 0 0 2.5px var(--bg); animation: frPulse 2s ease-in-out infinite; }
@keyframes frPulse { 50% { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 6px rgba(47,214,123,.18); } }

.fr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fr-invite-btn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 11px; font-weight: 700; font-size: 14px;
  background: var(--accent-fill); color: var(--on-accent); transition: background .14s, transform .14s; }
.fr-invite-btn:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.fr-invite-btn:active { transform: scale(.96); }
.fr-invite-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fr-invite-box { margin: 0 0 18px; padding: 14px; border-radius: 14px; background: var(--surface); max-width: 640px; }
.fr-invite-box small { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.fr-invite-row { display: flex; gap: 8px; }
.fr-invite-input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--divider); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
.fr-btn { height: 34px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 13px; background: var(--surface-2); color: var(--text-2); transition: background .14s, color .14s; flex: none; }
.fr-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 12%, var(--surface)); }
.fr-btn--ok { background: var(--accent-fill); color: var(--on-accent); }
.fr-btn--ok:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); color: var(--on-accent); }
.fr-btn:disabled { opacity: .5; pointer-events: none; }

.fr-section { margin-bottom: 22px; max-width: 640px; }
.fr-section h3 { font-size: 15px; font-weight: 800; margin: 0 0 10px; }
.fr-req { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.fr-req + .fr-req { margin-top: 8px; }
.fr-req-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fr-req-text small { color: var(--muted); font-size: 12px; }

.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.fr-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--surface); cursor: pointer;
  transition: background .14s, transform .16s var(--spring, ease); }
.fr-card:hover { background: var(--surface-2); }
.fr-card:active { transform: scale(.985); }
.fr-card.is-now { box-shadow: inset 0 0 0 1px rgba(47,214,123,.35); }
.fr-card-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.fr-card-main b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-card-main small { color: var(--muted); font-size: 12px; }
.fr-card-status { margin-top: 4px; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.fr-card-status.is-now { color: #2fd67b; font-weight: 600; }
.fr-card-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2fd67b; margin-right: 6px; vertical-align: 1px; }
.fr-card-poster { flex: 0 0 44px; width: 44px; height: 62px; border-radius: 8px; overflow: hidden; background: var(--poster-bg); transition: transform .16s; }
.fr-card-poster:hover { transform: scale(1.06); }
.fr-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-empty { max-width: 520px; padding: 22px; border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.fr-empty span { color: var(--text-2); line-height: 1.5; }
.fr-privacy { margin-top: 20px; color: var(--muted); font-size: 13px; }
.fr-link { color: var(--accent); font-weight: 600; font-size: 13px; }
.fr-link:hover { text-decoration: underline; }

/* профиль друга */
.fr-remove { margin-left: auto; }
.frp-status { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 560px; padding: 12px; margin: 0 0 22px; border-radius: 16px;
  background: var(--surface); text-align: left; transition: background .14s; }
button.frp-status:hover { background: var(--surface-2); }
.frp-status.is-now { box-shadow: inset 0 0 0 1px rgba(47,214,123,.35); }
.frp-status--empty { color: var(--muted); font-size: 14px; padding: 16px; }
.frp-poster { flex: 0 0 60px; width: 60px; height: 86px; border-radius: 10px; overflow: hidden; background: var(--poster-bg); }
.frp-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frp-st-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.frp-st-text small { color: var(--muted); font-size: 12px; font-weight: 600; }
.frp-status.is-now .frp-st-text small { color: #2fd67b; }
.frp-st-text small i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2fd67b; margin-right: 6px; vertical-align: 1px; }
.frp-st-text b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frp-st-text span { color: var(--text-2); font-size: 13px; }
.frp-bar { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; margin-top: 4px; max-width: 280px; }
.frp-bar i { display: block; height: 100%; background: var(--accent-fill); }
.frp-tabs { margin-bottom: 16px; }
.frp-n { opacity: .6; font-weight: 600; margin-left: 2px; }

/* ---------- фильтры: сворачиваемые разделы ---------- */
.f-group--fold { margin-bottom: 6px; border-bottom: 1px solid var(--divider); padding-bottom: 6px; }
.f-group--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; padding: 4px 4px 10px; border-bottom: 1px solid var(--divider); }
.f-group--row .f-label { margin: 0; }
.f-fold-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 4px; border-radius: 8px; text-align: left; transition: background .14s; }
.f-fold-head:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.f-fold-head .f-label { margin: 0; flex: none; }
.f-sum { flex: 1; min-width: 0; text-align: right; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-chev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.f-group--fold.is-collapsed .f-chev { transform: rotate(-90deg); }
/* плавное сворачивание: grid 1fr → 0fr */
.f-fold-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease; }
.f-group--fold.is-collapsed .f-fold-body { grid-template-rows: 0fr; opacity: 0; }
.f-fold-inner { overflow: hidden; min-height: 0; padding: 4px 2px 6px; }
.f-group--fold.is-collapsed .f-fold-inner { padding-bottom: 0; }
.f-fold-inner .f-hint { margin: 0 0 8px 2px; font-size: 12px; color: var(--muted); }
.f-group--fold:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* ---------- профиль (переделка): шапка с постером, постеры вместо цифр, вкус словами ---------- */
.pfx-hero { position: relative; margin: -4px 0 26px; padding: 26px 26px 18px; border-radius: 22px; overflow: hidden; background: var(--surface); isolation: isolate; }
.pfx-backdrop { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center 30%;
  filter: blur(34px) saturate(1.4); opacity: .9; transform: scale(1.1); }
.pfx-hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 10%, transparent), color-mix(in srgb, var(--surface) 82%, transparent) 85%); }
.pfx-hero-row { display: flex; align-items: center; gap: 20px; }
.pfx-avatar { width: 96px; height: 96px; flex: none; border-radius: 50%; overflow: hidden; background: var(--accent-fill); color: var(--on-accent);
  display: grid; place-items: center; font-size: 38px; font-weight: 800; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 60%, transparent), 0 10px 30px rgba(0,0,0,.3); }
.pfx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pfx-id { flex: 1; min-width: 0; }
.pfx-id h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.pfx-handle { color: var(--text-2); font-size: 14px; }
.pfx-line { margin: 10px 0 0; color: var(--text); font-size: 15px; font-weight: 600; opacity: .9; }
.pfx-hero .pf-gear { align-self: flex-start; background: color-mix(in srgb, var(--bg) 45%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pfx-lists { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 20px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.pfx-list { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; color: var(--text-2); font-size: 14px; font-weight: 600; transition: background .14s, color .14s; }
.pfx-list:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.pfx-list i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pfx-list b { color: var(--text); font-weight: 800; }

.pfx-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; }
@media (max-width: 1080px) { .pfx-cols { grid-template-columns: minmax(0, 1fr); } }
.pfx-sec { margin-bottom: 30px; }
.pfx-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.pfx-sec-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.pfx-more { font-size: 13px; font-weight: 700; color: var(--accent); }
.pfx-more:hover { text-decoration: underline; }
.pfx-card { padding: 18px; border-radius: 18px; background: var(--surface); margin-bottom: 18px; }
.pfx-muted { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.pfx-now-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 16px; }
.pfx-now { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.pfx-now-poster { position: relative; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--poster-bg); transition: transform .18s var(--spring, ease), box-shadow .18s; }
.pfx-now:hover .pfx-now-poster { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.pfx-now-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfx-now-bar { position: absolute; left: 7px; right: 7px; bottom: 7px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.pfx-now-bar i { display: block; height: 100%; background: var(--accent-fill); }
.pfx-now-name { margin-top: 8px; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfx-now-sub { font-size: 12.5px; color: var(--muted); }

/* календарь активности */
.hm { display: inline-flex; flex-direction: column; gap: 6px; max-width: 100%; overflow-x: auto; }
.hm-months, .hm-grid { display: grid; grid-template-columns: repeat(26, 15px); gap: 4px; }
.hm-months span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: visible; }
.hm-col { display: grid; grid-template-rows: repeat(7, 15px); gap: 4px; }
.hm i, .hm-legend i { display: block; width: 15px; height: 15px; border-radius: 4px; }
.hm-0 { background: color-mix(in srgb, var(--text) 7%, transparent); }
.hm-1 { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.hm-2 { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.hm-3 { background: color-mix(in srgb, var(--accent) 80%, transparent); }
.hm-4 { background: var(--accent-fill); }
.hm-x { background: transparent; }
.hm-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--text-2); max-width: 470px; }
.pfx-streak { color: var(--accent); }
.hm-legend { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.hm-legend i { width: 11px; height: 11px; border-radius: 3px; }

/* вкус */
.pfx-taste { margin: 0; font-size: 16px; line-height: 1.45; }
.pfx-taste b { color: var(--accent); }
.pfx-taste-sub { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.pfx-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pfx-tag { padding: 5px 11px; border-radius: 999px; font-weight: 700;
  font-size: calc(12px + var(--w) * 3px); background: color-mix(in srgb, var(--accent) calc(8% + var(--w) * 16%), transparent);
  color: color-mix(in srgb, var(--accent) calc(55% + var(--w) * 45%), var(--text-2)); }

/* досмотрено */
.pfx-done { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pfx-done-item { aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--poster-bg); transition: transform .16s; }
.pfx-done-item:hover { transform: scale(1.04); }
.pfx-done-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pfx-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 14px;
  background: var(--surface); color: var(--text-2); font-size: 14px; }
.pfx-cta { height: 36px; padding: 0 14px; border-radius: 10px; background: var(--accent-fill); color: var(--on-accent); font-weight: 700; font-size: 13px; }
.pfx-cta:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }

/* профиль: сворачиваемая история */
.pfx-fold-head { width: 100%; justify-content: flex-start; gap: 8px; align-items: center; padding: 4px 6px; margin: 0 -6px 8px; border-radius: 8px; text-align: left; transition: background .14s; }
.pfx-fold-head:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pfx-fold-head .f-chev { width: 18px; height: 18px; }
.pfx-fold.is-collapsed .f-chev { transform: rotate(-90deg); }
.pfx-fold-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease; }
.pfx-fold.is-collapsed .pfx-fold-body { grid-template-rows: 0fr; opacity: 0; }
.pfx-fold-inner { overflow: hidden; min-height: 0; }

/* ---------- любимый тайтл в шапке профиля ---------- */
.pfx-pin { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; max-width: 260px; text-align: left; }
.pfx-pin-poster { width: 70px; height: 100px; flex: none; border-radius: 10px; overflow: hidden; background: var(--poster-bg);
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent); transform: rotate(3deg);
  transition: transform .2s var(--spring, ease); }
.pfx-pin-poster:hover { transform: rotate(0deg) scale(1.04); }
.pfx-pin-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfx-pin-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pfx-pin-text small { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }
.pfx-pin-text b { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pfx-pin-edit { align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.pfx-pin-edit:hover { color: var(--text); text-decoration: underline; }
.pfx-pin--empty .pfx-pin-poster { display: grid; place-items: center; transform: none; box-shadow: none; background: transparent;
  border: 2px dashed color-mix(in srgb, var(--text) 22%, transparent); color: var(--text-2); }
.pfx-pin--empty .pfx-pin-poster svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pfx-pin--empty:hover .pfx-pin-poster { border-color: var(--accent); color: var(--accent); }
.pfx-pin--empty b { color: var(--text-2); font-weight: 600; }
.pfx-hero .pfx-pin + .pf-gear { margin-left: 8px; }
@media (max-width: 900px) { .pfx-pin-text { display: none; } }

/* окно выбора */
.pin-picker { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; }
.pin-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .18s ease; }
.pin-panel { position: relative; width: min(720px, calc(100vw - 48px)); max-height: calc(100vh - 80px); display: flex; flex-direction: column;
  padding: 20px; border-radius: 20px; background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 24px 60px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); }
.pin-picker.open .pin-backdrop { opacity: 1; }
.pin-picker.open .pin-panel { opacity: 1; transform: none; }
.pin-head { display: flex; align-items: center; justify-content: space-between; }
.pin-head h3 { margin: 0; font-size: 19px; font-weight: 800; }
.pin-x { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--text-2); }
.pin-x:hover { background: var(--surface-2); color: var(--text); }
.pin-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pin-sub { margin: 4px 0 14px; color: var(--muted); font-size: 13px; }
.pin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; overflow-y: auto; padding: 4px; margin: -4px; }
.pin-item { display: flex; flex-direction: column; gap: 6px; text-align: left; min-width: 0; }
.pin-item img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; display: block; transition: transform .16s, box-shadow .16s; }
.pin-item span { display: block; width: 100%; font-size: 12px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-item:hover img { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.pin-item.is-on img { box-shadow: 0 0 0 3px var(--accent); }
.pin-item.is-on span { color: var(--accent); }
.pin-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--divider); }
.pin-foot[hidden] { display: none; }
.pin-clear { font-size: 13px; font-weight: 700; color: #ff6b6b; }
.pin-clear:hover { text-decoration: underline; }
.pf-head .pfx-pin + .fr-remove { margin-left: 18px; }

/* ---------- профиль друга: совпадение вкусов ---------- */
.frp-remove { margin-left: auto; color: var(--muted); font-weight: 600; }
.frp-remove:hover { color: #ff6b6b; }
#frp-status-slot:empty { display: none; }
#frp-status-slot .frp-status { margin-bottom: 18px; }
.mt-card { margin-bottom: 28px; }
.mt-head { display: flex; align-items: center; gap: 18px; }
.mt-ring { --p: 0; flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 10%, transparent) 0); position: relative; }
.mt-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.mt-ring b { position: relative; font-size: 24px; font-weight: 800; }
.mt-ring b small { font-size: 13px; font-weight: 700; margin-left: 1px; color: var(--text-2); }
.mt-ring--empty { background: color-mix(in srgb, var(--text) 10%, transparent); font-size: 26px; font-weight: 800; color: var(--muted); }
.mt-ring--empty::before { display: none; }
.mt-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mt-text b { font-size: 20px; font-weight: 800; }
.mt-text span { color: var(--text-2); font-size: 14px; }
.mt-sub { margin: 18px 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.mt-row { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.mt-poster { display: flex; flex-direction: column; gap: 6px; text-align: left; min-width: 0; }
.mt-poster img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; display: block; transition: transform .16s, box-shadow .16s; }
.mt-poster:hover img { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.mt-poster span { display: block; width: 100%; font-size: 12px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* окно «Все досмотренные» — на базе окна выбора любимого */
.tm-panel { width: min(900px, calc(100vw - 48px)); }
.tm-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); margin-top: 12px; }
.tm-more { grid-column: 1 / -1; justify-self: center; }

/* ---------- этап 3: «Отправить другу», друзья на карточке, советы и лента ---------- */
.d-sharewrap { position: relative; flex: 0 0 auto; }
.d-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-sharemenu { position: absolute; top: 48px; right: -50px; z-index: 12; width: 290px; padding: 12px;
  background: color-mix(in srgb, var(--surface) 93%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 16px; box-shadow: 0 18px 46px rgba(0,0,0,.5);
  transform-origin: top right; opacity: 0; transform: scale(.95); pointer-events: none; transition: opacity .14s ease, transform .16s cubic-bezier(.34,1.56,.64,1); }
.d-sharemenu.open { opacity: 1; transform: none; pointer-events: auto; }
.d-sharemenu[hidden] { display: none; }
.sh-title { margin: 2px 4px 8px; font-weight: 800; font-size: 14px; }
.sh-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.sh-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 6px 8px 6px 6px; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 14px; transition: background .14s; }
.sh-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.sh-row input { position: absolute; opacity: 0; pointer-events: none; }
.sh-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 22%, transparent); transition: background .14s, box-shadow .14s, transform .18s var(--spring, ease); }
.sh-check svg { width: 14px; height: 14px; fill: none; stroke: var(--on-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .14s, transform .18s var(--spring, ease); }
.sh-row:has(input:checked) { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.sh-row:has(input:checked) .sh-check { background: var(--accent-fill); box-shadow: none; }
.sh-row:has(input:checked) .sh-check svg { opacity: 1; transform: none; }
.sh-note { width: 100%; margin-top: 10px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); font: inherit; font-size: 13px; outline: none; transition: border-color .14s; }
.sh-note:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.sh-send { width: 100%; margin-top: 10px; height: 38px; border-radius: 10px; background: var(--accent-fill); color: var(--on-accent); font-weight: 700; font-size: 14px; transition: opacity .14s, background .14s; }
.sh-send:disabled { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); cursor: default; }
.sh-empty { margin: 0 4px 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.sh-done { margin: 8px 4px; font-weight: 700; color: var(--accent); }

.d-friends { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 18px; }
.d-friends[hidden] { display: none; }
.dfr-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.dfr-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--text-2); }
.dfr-chip b { color: var(--text); font-weight: 700; }
.dfr-chip--rec { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }

.fr-recs, .fr-feed { max-width: none; }
.recs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.rec-card { display: flex; flex-direction: column; gap: 4px; text-align: left; min-width: 0; }
.rec-poster { position: relative; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--poster-bg); transition: transform .16s, box-shadow .16s; }
.rec-card:hover .rec-poster { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.rec-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-new { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); font-style: normal; font-size: 11px; font-weight: 800; }
.rec-name { margin-top: 4px; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-from { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; }
.rec-note { font-size: 12.5px; color: var(--text-2); font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.fr-feed { margin-top: 26px; max-width: 720px; }
.feed-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--divider); }
.feed-row:last-child { border-bottom: 0; }
.feed-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 14px; color: var(--text-2); }
.feed-main b { color: var(--text); cursor: pointer; }
.feed-main b:hover { text-decoration: underline; }
.feed-title { align-self: flex-start; max-width: 100%; text-align: left; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-title:hover { color: var(--accent); }
.feed-main small { font-size: 12px; color: var(--muted); }
.feed-poster { flex: 0 0 38px; width: 38px; height: 54px; border-radius: 7px; overflow: hidden; background: var(--poster-bg); }
.feed-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- совместный просмотр ---------- */
.pl-party-wrap { position: relative; }
.pl-party { position: relative; }
.pl-party.is-on { color: var(--accent); background: rgb(var(--accent-rgb) / .16); }
.pl-party-n { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent-fill); color: var(--on-accent); font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.pl-party-n[hidden] { display: none; }
.pl-party-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 8; width: 300px; padding: 12px; border-radius: 16px; color: #fff; text-align: left;
  background: rgba(20,21,24,.78); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 46px rgba(0,0,0,.5); }
.pl-party-panel[hidden] { display: none; }
.pp-title { margin: 2px 4px 6px; font-weight: 800; font-size: 15px; }
.pp-sub { margin: 0 4px 10px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.65); }
.pp-members { display: flex; align-items: center; gap: 4px; margin: 4px 4px 10px; }
.pp-mem .fr-ava { box-shadow: 0 0 0 2px rgba(20,21,24,.9); }
.pp-mem + .pp-mem { margin-left: -10px; }
.pp-mem-text { margin-left: 8px; font-size: 13px; color: rgba(255,255,255,.75); }
.pp-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.pp-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; }
.pp-row:hover { background: rgba(255,255,255,.06); }
.pp-row > span:not(.fr-ava) { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-row .fr-dot { box-shadow: 0 0 0 2px rgba(20,21,24,.9); }
.pp-inv { flex: none; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--accent-fill); color: var(--on-accent); font-weight: 700; font-size: 12.5px; }
.pp-inv.is-done, .pp-inv:disabled { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.pp-leave { width: 100%; margin-top: 10px; height: 34px; border-radius: 10px; background: rgba(255,107,107,.14); color: #ff8a8a; font-weight: 700; font-size: 13px; }
.pl-ptoast { position: absolute; left: 24px; bottom: 96px; z-index: 7; padding: 9px 14px; border-radius: 12px; color: #fff; font-weight: 600; font-size: 14px;
  background: rgba(20,21,24,.75); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.1);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .24s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.pl-ptoast.open { opacity: 1; transform: none; }
.pl-ptoast + .pl-ptoast { bottom: 140px; }

/* приглашение — плашка поверх приложения */
.party-invite { position: fixed; right: 20px; bottom: 20px; z-index: 250; display: flex; align-items: center; gap: 14px; width: min(460px, calc(100vw - 40px));
  padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 22px 60px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(14px); transition: opacity .22s, transform .26s cubic-bezier(.2,.8,.2,1); }
.party-invite.open { opacity: 1; transform: none; }
.pi-poster { flex: none; width: 54px; height: 78px; border-radius: 9px; object-fit: cover; }
.pi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pi-text small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; min-width: 0; }
.pi-text small b { color: var(--text); font-weight: 700; flex: none; }
.pi-text > b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-text span { font-size: 12.5px; color: var(--muted); }
.pi-btns { display: flex; flex-direction: column; gap: 6px; flex: none; }
.pi-join { height: 34px; padding: 0 14px; border-radius: 10px; background: var(--accent-fill); color: var(--on-accent); font-weight: 700; font-size: 13px; }
.pi-no { height: 30px; padding: 0 14px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: 12.5px; }
.pi-no:hover { background: var(--surface-2); color: var(--text); }

/* в плеере — сверху справа, чтобы не закрывать управление */
.player:not([hidden]) ~ .party-invite { bottom: auto; top: 76px; }

/* плашка приглашения: по строкам, без наезда на кнопки */
.pi-text { gap: 1px; }
.pi-text small { overflow: hidden; }
.pi-text small b { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.pi-text em { font-style: normal; font-size: 12.5px; color: var(--accent); font-weight: 600; }
/* ручная синхронизация */
.pp-sync { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.pp-sync button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; font-weight: 700; font-size: 12.5px; }
.pp-sync button:hover { background: rgba(255,255,255,.16); }
.pp-sync svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- чат комнаты ---------- */
.pl-chat-btn { position: relative; }
.pl-chat-btn[hidden] { display: none; }
.pl-chat-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pl-chat { position: absolute; right: 16px; top: 76px; bottom: 96px; z-index: 7; width: 320px; display: flex; flex-direction: column; color: #fff;
  border-radius: 18px; background: rgba(16,17,20,.72); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 46px rgba(0,0,0,.45);
  opacity: 0; transform: translateX(14px); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); }
.pl-chat.open { opacity: 1; transform: none; }
.pc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 8px 16px; }
.pc-head b { font-size: 15px; }
.pc-x { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: rgba(255,255,255,.75); }
.pc-x:hover { background: rgba(255,255,255,.1); color: #fff; }
.pc-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.pc-empty { margin: auto 8px; text-align: center; font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.45; }
.pc-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 100%; }
.pc-msg.is-mine { justify-content: flex-end; }
.pc-bubble { display: flex; flex-direction: column; gap: 1px; max-width: 230px; padding: 7px 10px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.1); }
.pc-msg.is-mine .pc-bubble { border-radius: 14px 14px 4px 14px; background: rgb(var(--accent-rgb) / .2); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .35); color: #f2fff8; }
.pc-bubble b { font-size: 12px; color: var(--accent); }
.pc-bubble span { font-size: 14px; line-height: 1.35; word-wrap: break-word; overflow-wrap: anywhere; }
.pc-bubble small { align-self: flex-end; font-size: 10.5px; opacity: .55; }
.pc-form { display: flex; gap: 8px; padding: 6px 10px 12px; }
.pc-form input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: 14px; outline: none; }
.pc-form input:focus { border-color: rgb(var(--accent-rgb) / .6); }
.pc-form button { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-fill); color: var(--on-accent); display: grid; place-items: center; }
.pc-form button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* закреплённый чат: колонка справа, видео и управление сжимаются */
.pl-video, .pl-canvas, .pl-top, .pl-bottom, .pl-bigplay, .pl-loading, .pl-status { transition: right .26s cubic-bezier(.2,.8,.2,1), width .26s cubic-bezier(.2,.8,.2,1); }
/* у видео width:auto = родной размер ролика, поэтому ширину задаём явно */
.pl-stage.chat-docked .pl-video, .pl-stage.chat-docked .pl-canvas { right: 340px; width: calc(100% - 340px); }
.pl-stage.chat-docked .pl-top, .pl-stage.chat-docked .pl-bottom { right: 340px; }
.pl-stage.chat-docked .pl-bigplay, .pl-stage.chat-docked .pl-loading, .pl-stage.chat-docked .pl-status { right: 340px; }
.pl-stage.chat-docked .pl-chat { top: 0; right: 0; bottom: 0; width: 340px; border-radius: 0; border: 0; border-left: 1px solid rgba(255,255,255,.1);
  background: #0e0f12; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transform: translateX(100%); }
.pl-stage.chat-docked .pl-chat.open { transform: none; }
.pl-stage.chat-docked .pc-head { padding-top: 16px; }
.pl-stage.chat-docked .pl-ptoast { left: 24px; }
.pc-head { gap: 4px; }
.pc-head b { flex: 1; }
.pc-pin svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pc-pin.is-on { color: var(--accent); background: rgb(var(--accent-rgb) / .14); }

/* плавающий чат: тянуть за шапку, размер — за уголок */
.pl-chat:not(.is-dragging) { transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); }
.pl-chat.is-dragging { transition: none; user-select: none; }
.pl-stage:not(.chat-docked) .pc-head { cursor: grab; }
.pl-chat.is-dragging .pc-head { cursor: grabbing; }
.pc-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; opacity: .5;
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.55) 58%, transparent 58%, transparent 70%, rgba(255,255,255,.55) 70%, rgba(255,255,255,.55) 78%, transparent 78%); border-radius: 0 0 14px 0; }
.pc-resize:hover { opacity: .9; }
.pl-stage.chat-docked .pc-resize { display: none; }

/* кнопки в шапке чата — только при наведении на чат */
.pc-head .pc-x { opacity: 0; transition: opacity .16s ease, background .14s, color .14s; }
.pl-chat:hover .pc-head .pc-x, .pc-head .pc-x:focus-visible { opacity: 1; }
/* заголовок чата — тоже только при наведении (место остаётся: за шапку можно тянуть) */
.pc-head b { opacity: 0; transition: opacity .16s ease; }
.pl-chat:hover .pc-head b { opacity: 1; }

/* свои сообщения — справа, тот же серый пузырь */
.pc-msg.is-mine { flex-direction: row; justify-content: flex-end; } /* свои — справа (аватара у своих нет) */
.pc-msg.is-mine .pc-bubble { border-radius: 14px 14px 4px 14px; background: rgba(255,255,255,.1); box-shadow: none; color: #fff; align-items: flex-end; text-align: right; }
.pc-msg.is-mine .pc-bubble small { align-self: flex-end; }

.pp-return { width: 100%; margin: 0 0 10px; height: 36px; border-radius: 10px; background: rgb(var(--accent-rgb) / .16); color: var(--accent); font-weight: 700; font-size: 13px; }
.pp-return:hover { background: rgb(var(--accent-rgb) / .24); }
/* поле и кнопка чата — без зелёного, чтобы не отвлекать от видео */
.pc-form input:focus { border-color: rgba(255,255,255,.22); }
.pc-form button { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); transition: background .14s, color .14s; }
.pc-form button:hover { background: rgba(255,255,255,.18); color: #fff; }

.pp-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 34px; margin-bottom: 8px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-weight: 600; font-size: 12.5px; }
.pp-link:hover { background: rgba(255,255,255,.14); }
.pp-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* «Друзья»: заголовок и «Пригласить друга» на одной линии */
.fr-head { margin-bottom: 16px; }
.fr-head h2 { margin: 0; }

/* чат: зрители и синхронизация сверху (как в Mini App) */
.pc-room { padding: 0 12px 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pc-room:empty { display: none; }
.pc-room-head { display: flex; align-items: center; gap: 8px; }
.pc-mems { display: flex; }
.pc-mems .fr-ava + .fr-ava { margin-left: -8px; }
.pc-mems .fr-ava { box-shadow: 0 0 0 2px #121316; }
.pc-room-head small { font-size: 13px; color: rgba(255,255,255,.7); }
.pc-sync { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.pc-sync button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.08); color: #fff; font-weight: 600; font-size: 12.5px; transition: background .14s; }
.pc-sync button:hover { background: rgba(255,255,255,.14); }
.pc-sync svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* строка зрителей и синхронизации в чате — только при наведении на чат */
.pc-room { opacity: 0; transition: opacity .16s ease; }
.pl-chat:hover .pc-room { opacity: 1; }

/* «Зовут смотреть вместе» */
.fr-invites { max-width: 720px; }
.fr-inv { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.fr-inv + .fr-inv { margin-top: 8px; }
.fr-inv > img { flex: none; width: 44px; height: 62px; border-radius: 8px; object-fit: cover; }
.fr-inv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-inv-text small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.fr-inv-text small b { color: var(--text); }
.fr-inv-text > b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-inv-text span { font-size: 12.5px; color: var(--muted); }

/* ---------- обновление программы: карточка слева снизу ---------- */
.upd-card { position: fixed; left: calc(var(--sidebar) + 16px); bottom: 20px; z-index: 240; width: min(340px, calc(100vw - var(--sidebar) - 32px));
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 22px 60px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(14px); transition: opacity .22s, transform .26s cubic-bezier(.2,.8,.2,1); }
.upd-card.open { opacity: 1; transform: none; }
.upd-head { display: flex; flex-direction: column; gap: 3px; }
.upd-head b { font-size: 14.5px; }
.upd-head span { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.upd-notes summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent); list-style: none; }
.upd-notes summary::-webkit-details-marker { display: none; }
.upd-notes p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); max-height: 160px; overflow: auto; }
.upd-btns { display: flex; gap: 6px; }
.upd-go { height: 34px; padding: 0 16px; border-radius: 10px; background: var(--accent-fill); color: var(--on-accent); font-weight: 700; font-size: 13px; }
.upd-go:hover { filter: brightness(1.08); }
.upd-no { height: 34px; padding: 0 14px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: 13px; }
.upd-no:hover { background: var(--surface-2); color: var(--text); }
.upd-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.upd-bar i { display: block; height: 100%; background: var(--accent-fill); transition: width .3s; }
.player:not([hidden]) ~ .upd-card { display: none; } /* в плеере не мешаем */

/* шапка и зрители — слоем поверх ленты: без наведения лента занимает весь чат и не обрывается посередине */
.pl-chat { overflow: hidden; }
.pc-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; border-radius: 18px 18px 0 0;
  background: rgba(16,17,20,.92); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  opacity: 0; transition: opacity .16s ease; }
/* держит открытой только клавиатура (Tab) — клик мышью по кнопке в шапке не должен оставлять её висеть */
.pl-chat:hover .pc-top, .pc-top:has(:focus-visible) { opacity: 1; }
.pc-top .pc-head b, .pc-top .pc-head .pc-x, .pc-top .pc-room { opacity: 1; } /* прячем весь слой целиком */
.pl-stage.chat-docked .pc-top { border-radius: 0; background: #0e0f12; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pc-list { padding-top: 14px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }

.upd-go.upd-alt { background: var(--surface-2); color: var(--text); }
.upd-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
/* пока шапка видна (наведение / фокус в ней) — лента начинается под ней; лента прижата к низу, поэтому ничего не прыгает */
.pc-list { transition: padding-top .16s ease; }
.pl-chat:hover .pc-list, .pl-chat:has(.pc-top :focus-visible) .pc-list { padding-top: calc(var(--pc-top-h, 110px) + 6px); }
.pc-list > .pc-msg:first-child { margin-top: auto; } /* сообщения прижаты к низу, как в мессенджерах */

/* ---------- голос в комнате ---------- */
.pl-mic-btn[hidden] { display: none; }
.pl-mic-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-mic-btn.is-on { color: var(--accent); background: rgb(var(--accent-rgb) / .14); }
.pl-mic-btn.is-muted { color: #ff7b7b; background: rgba(255,107,107,.14); }
.pl-speakers { position: absolute; left: 20px; bottom: 110px; z-index: 6; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.pl-speakers[hidden] { display: none; }
.pl-spk { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(12,13,16,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 13px; }
.pl-spk .fr-ava { box-shadow: 0 0 0 2px var(--accent); }
.pl-stage.chat-docked .pl-speakers { left: 24px; }
.pc-voice { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 6px; }
.pc-v-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-v-head b { font-size: 13px; }
.pc-v-head button { height: 28px; padding: 0 12px; border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; font-weight: 600; font-size: 12.5px; }
.pc-v-head button:hover { background: rgba(255,255,255,.14); }
.pc-v-head .pc-v-join { background: rgb(var(--accent-rgb) / .18); color: var(--accent); }
.pc-v-head .pc-v-join:hover { background: rgb(var(--accent-rgb) / .26); }
.pc-v-row { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.pc-v-row .fr-ava { transition: box-shadow .12s; }
.pc-v-row.is-speaking .fr-ava { box-shadow: 0 0 0 2px var(--accent); }
.pc-v-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-v-muted svg { width: 14px; height: 14px; fill: none; stroke: #ff7b7b; stroke-width: 2; stroke-linecap: round; }
.pc-v-wait { font-size: 11.5px; color: rgba(255,255,255,.5); }
.pc-v-vol { width: 70px; accent-color: var(--accent); }
.pc-v-duck { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.75); cursor: pointer; }
.pc-v-duck input { accent-color: var(--accent); }
.pc-v-note { font-size: 12px; color: rgba(255,255,255,.55); }

/* меню «Смотреть вместе»: ссылка-приглашение не липнет к списку друзей */
.pp-link { margin-top: 10px; }
/* голос: иконка вместо эмодзи и переключатель вместо системной галочки */
.pc-v-head b { display: flex; align-items: center; gap: 6px; }
.pc-v-head b svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.pc-v-duck { justify-content: space-between; padding: 2px 0; }
.pc-switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 34px; height: 20px; margin: 0; border-radius: 10px;
  background: rgba(255,255,255,.16); cursor: pointer; transition: background .18s; }
.pc-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.pc-switch:checked { background: var(--accent-fill); }
.pc-switch:checked::after { transform: translateX(14px); }
/* «Подключиться» к голосу — нейтральная, не отвлекает от видео */
.pc-v-head .pc-v-join { background: rgba(255,255,255,.08); color: #fff; }
.pc-v-head .pc-v-join:hover { background: rgba(255,255,255,.14); }

/* ---------- пропуск опенинга / эндинга ---------- */
.pl-skip { position: absolute; right: 24px; bottom: 96px; z-index: 6; }
.pl-skip[hidden] { display: none; }
.pl-stage.chat-docked .pl-skip { right: 364px; }
.pl-skip-btn { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 14px;
  background: rgba(16,17,20,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.18); transition: background .15s; }
.pl-skip-btn:hover { background: rgba(255,255,255,.18); }
.pl-skip-btn svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pl-skip-cd { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 12px; color: #fff; font-size: 14px;
  background: rgba(16,17,20,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); }
.pl-skip-cd b { display: inline-block; min-width: 12px; text-align: center; }
.pl-skip-cd button { height: 32px; padding: 0 14px; border-radius: 9px; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: 13px; }
.pl-skip-cd button:hover { background: rgba(255,255,255,.24); }
.pl-skip-cd i { position: absolute; left: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.55); transition: width .25s linear; }

/* ---------- плашки статуса на постере ---------- */
.pmarks { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* над картинкой постера (у неё z-index: 1) */
.pmarks .pb { position: absolute; left: 8px; bottom: 9px; max-width: calc(100% - 16px); display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.2; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(12,14,16,.62); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.pmarks .pb i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pb-c); box-shadow: 0 0 8px var(--pb-c); }
.pmarks .pb-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.45); }
.pmarks .pb-line i { display: block; height: 100%; background: #4f9bff; box-shadow: 0 0 8px #4f9bff; }
.pmarks .pb-fav { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  font-size: 13px; color: #ff5d8f; background: rgba(12,14,16,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.16); }
/* брошенное — приглушено, чтобы не отвлекало */
.card[data-list="dropped"] .poster img { filter: saturate(.45) brightness(.8); }

/* ---------- поддержка проекта ---------- */
.sup-badge { display: inline-block; margin-left: 8px; font-size: .75em; vertical-align: 2px; filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / .55)); }
.pfx-support { margin-top: 10px; height: 32px; padding: 0 14px; border-radius: 10px; background: rgb(var(--accent-rgb) / .12); color: var(--accent); font-weight: 700; font-size: 13px;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .3); transition: background .15s; }
.pfx-support:hover { background: rgb(var(--accent-rgb) / .2); }

/* «Поддержать» в боковом меню — зелёное сердце, ненавязчиво */
.side-support { color: var(--accent); }
.side-support svg { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.side-support:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* голос: вход — вся строка «Голосовой чат», выход — круглая красная «трубка» */
.pc-vbar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; text-align: left; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); transition: background .15s, border-color .15s; }
.pc-vbar:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); }
.pc-vbar-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); }
.pc-vbar-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-vbar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-vbar-t b { font-size: 13px; }
.pc-vbar-t small { font-size: 11.5px; color: rgba(255,255,255,.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-vbar-faces { display: flex; flex: none; }
.pc-vbar-faces .fr-ava + .fr-ava { margin-left: -7px; }
.pc-vbar-faces .fr-ava { box-shadow: 0 0 0 2px #15161a; }
.pc-v-hang { flex: none; width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: 50% !important; display: grid; place-items: center;
  background: rgba(255,90,90,.16) !important; color: #ff6b6b !important; }
.pc-v-hang:hover { background: rgba(255,90,90,.28) !important; }
.pc-v-hang svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- настройки блоками ---------- */
#page-settings.is-grouped { max-width: 1120px; }
.s-groups { columns: 2 460px; column-gap: 16px; }
.s-group { break-inside: avoid; margin: 0 0 16px; padding: 16px 18px 6px; border-radius: 18px; background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); }
.s-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.s-group-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--sg-c);
  background: color-mix(in srgb, var(--sg-c) 15%, transparent); }
.s-group-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.s-group-head b { display: block; font-size: 15px; }
.s-group-head small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.s-group .s-row:last-child { border-bottom: 0; }
.s-sublabel { margin: 14px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.s-group .s-theme { margin: 10px 0 12px; }
.s-group .s-account { margin: 10px 0 8px; }
.s-group .s-hint { margin: 0 0 10px; }

/* настройки: слева разделы, справа выбранный — ровно, без «натыканных» колонок */
#page-settings.is-grouped { max-width: 980px; }
.s-groups { columns: auto; display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: start; }
.s-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 18px; background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); }
.s-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 11px; text-align: left; color: var(--text-2);
  font-weight: 600; font-size: 14px; transition: background .14s, color .14s; }
.s-nav-item:hover { background: var(--surface-2); color: var(--text); }
.s-nav-item.is-active { background: color-mix(in srgb, var(--sg-c) 14%, transparent); color: var(--text); }
.s-nav-ic { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--sg-c);
  background: color-mix(in srgb, var(--sg-c) 15%, transparent); }
.s-nav-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.s-pane .s-group { margin: 0; padding: 22px 24px 10px; }
.s-pane .s-group[hidden] { display: none; }
.s-pane .s-group-head { margin-bottom: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--divider); }
.s-pane .s-group-ic { width: 42px; height: 42px; border-radius: 13px; }
.s-pane .s-group-ic svg { width: 21px; height: 21px; }
.s-pane .s-group-head b { font-size: 18px; }
@media (max-width: 860px) { .s-groups { grid-template-columns: 1fr; } .s-nav { position: static; flex-direction: row; flex-wrap: wrap; } .s-nav-item { width: auto; } }

/* устройства */
.s-sess-tag { flex: none; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.s-sess-all { margin: 12px 0 8px; height: 36px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 13px; color: #ff6b6b; background: rgba(255,90,90,.1); }
.s-sess-all:hover { background: rgba(255,90,90,.18); }
/* устройства: «Завершить» и «Это устройство» одной ширины — ровная колонка справа */
.s-sess .fr-btn, .s-sess-tag { flex: none; width: 128px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }

/* «Видео пока нет» — неактивная кнопка вместо «Смотреть» */
.d-play.is-off { background: var(--surface-2); color: var(--muted); cursor: default; box-shadow: none; filter: none; transform: none; }
.d-play.is-off svg { opacity: .5; }

/* низкое окно: пункты меню не сжимаются (раньше сплющивались до полоски) — место уступает список «Продолжить», он прокручивается */
.side-nav > *, .side-bottom > *, .side-cont > * { flex-shrink: 0; }
.side-nav { overflow-y: auto; scrollbar-width: none; } /* не влезает — прокручивается всё верхнее меню, низ (поддержать, настройки, профиль) закреплён */
.side-nav::-webkit-scrollbar { display: none; }
.sidebar { min-height: 0; }

/* режим фокуса выключен — шапка чата видна всегда, сообщения под ней */
.pl-chat.focus-off .pc-top { opacity: 1; }
.pl-chat.focus-off .pc-top .pc-head b, .pl-chat.focus-off .pc-top .pc-head .pc-x, .pl-chat.focus-off .pc-top .pc-room { opacity: 1; }
.pl-chat.focus-off .pc-list { padding-top: calc(var(--pc-top-h, 110px) + 6px); }
.pc-focus svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-focus.is-on { color: var(--accent); background: rgb(var(--accent-rgb) / .14); }

/* апскейл рисуется на холсте поверх видео — клики проходят насквозь к видео (пауза, двойной клик — полный экран) */
.pl-canvas { pointer-events: none; }
.pl-status { pointer-events: none; } /* текст статуса (в т.ч. про апскейл) не мешает паузе по клику */

/* бинды и выбор микрофона */
.s-bind { flex: none; min-width: 110px; height: 34px; padding: 0 14px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 13px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); transition: background .14s, box-shadow .14s; }
.s-bind:hover { background: color-mix(in srgb, var(--text) 10%, var(--surface-2)); }
.s-bind.is-wait { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); animation: sBindPulse 1s ease-in-out infinite; }
@keyframes sBindPulse { 50% { box-shadow: inset 0 0 0 1px transparent; } }
.s-mic { max-width: 260px; }
.s-hint.s-bind-hint, .s-group .s-hint.s-bind-hint { margin: 14px 0 2px; line-height: 1.45; }

.s-duck { display: flex; align-items: center; gap: 10px; flex: none; }
.s-duck input { width: 150px; accent-color: var(--accent); }
.s-duck b { min-width: 72px; text-align: right; font-size: 13px; color: var(--text-2); }

/* «Смотрят вместе» в карточке друга — текст сжимается, кнопка «Войти» всегда внутри карточки */

/* шумоподавление: выбор режима плитками + проверка микрофона с индикатором уровня */
.s-row-ns { flex-wrap: wrap; }
.s-mictest { display: flex; align-items: center; gap: 10px; flex: none; }
.s-mictest i { --lvl: 0; position: relative; width: 120px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.s-mictest i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--lvl)); background: var(--accent-fill); border-radius: inherit; transition: transform .06s linear; }
.s-bind.is-on { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* настройки голоса в плеере: кнопки в чате + панель справа (в стиле чата) */
.pc-v-btns { display: flex; align-items: center; gap: 6px; }
.pc-v-head .pc-v-set { width: 28px; padding: 0; display: grid; place-items: center; }
.pc-v-set svg, .pc-v-setlink svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-v-setlink { display: flex; align-items: center; gap: 7px; align-self: flex-start; padding: 4px 2px; font-size: 12px; color: rgba(255,255,255,.6); transition: color .14s; }
.pc-v-setlink:hover { color: #fff; }

.pl-vset { position: absolute; right: 16px; top: 76px; z-index: 12; width: 340px; max-height: calc(100% - 172px); display: flex; flex-direction: column; color: #fff;
  border-radius: 18px; background: rgba(16,17,20,.94); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07);
  opacity: 0; transform: translateX(16px); transition: opacity .18s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.pl-vset.open { opacity: 1; transform: none; }
.pl-stage.chat-docked .pl-vset { top: 16px; max-height: calc(100% - 112px); }
.vp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 4px 18px; }
.vp-head b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.vp-head b svg { width: 17px; height: 17px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vp-body { min-height: 0; overflow-y: auto; padding: 0 18px 14px; scrollbar-width: none; }
.vp-sec { padding: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.vp-sec + .vp-sec { border-top: 1px solid rgba(255,255,255,.07); }
.vp-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); }

.vp-select { width: 100%; height: 38px; padding: 0 36px 0 12px; border-radius: 10px; border: 0; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a7b0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; }
.vp-select:hover { background-color: rgba(255,255,255,.09); }
.vp-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.vp-select option { background: #1b1d22; color: #fff; }

.vp-meter-row { display: flex; align-items: center; gap: 10px; }
.vp-meter { --lvl: 0; position: relative; flex: 1; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.07);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); }
.vp-meter::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--lvl));
  background: linear-gradient(90deg, var(--accent) 0 70%, #f5c542 85%, #ff6b6b 100%); background-size: 100% 100%; }
.vp-listen { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); transition: background .14s, color .14s; }
.vp-listen:hover { background: rgba(255,255,255,.12); color: #fff; }
.vp-listen.is-on { color: var(--accent); background: rgb(var(--accent-rgb) / .16); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .5); }
.vp-listen svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vp-meter-note:empty { display: none; }
.vp-meter-note { font-size: 12px; color: #ff8a8a; }


.vp-row { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.vp-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; cursor: default; }
.vp-row-t b { font-size: 13.5px; font-weight: 600; }
.vp-row-t small { font-size: 11.5px; color: rgba(255,255,255,.45); }
/* клавиши — как настоящие кнопки клавиатуры */
.vp-key { flex: none; min-width: 36px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(#3b3e46, #2b2e35); box-shadow: inset 0 -2px 0 rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.4); transition: transform .08s, filter .14s; }
.vp-key:hover { filter: brightness(1.15); }
.vp-key:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1); }
.vp-key.is-empty { color: rgba(255,255,255,.55); font-weight: 600; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); border: 0; outline: 1px dashed transparent; }
.vp-key.is-wait { color: var(--accent); background: rgb(var(--accent-rgb) / .12); box-shadow: inset 0 0 0 1.5px var(--accent); animation: sBindPulse 1s ease-in-out infinite; }
.vp-duck-box { display: flex; flex-direction: column; gap: 6px; }
.vp-duck input { flex: 0 1 120px; min-width: 0; accent-color: var(--accent); }
.vp-duck .vp-duck-val { width: 36px; text-align: right; font-size: 12.5px; color: rgba(255,255,255,.8); }
.vp-duck.is-off { opacity: .4; }
.vp-duck.is-off input { cursor: not-allowed; }
/* микрофона нет — индикатор и «послушать себя» неактивны */
.pl-vset.no-mic .vp-meter { opacity: .35; }
.pl-vset.no-mic .vp-listen { opacity: .35; pointer-events: none; }
.vp-select:disabled { opacity: .6; cursor: default; }
.s-select:disabled { opacity: .6; cursor: default; }
.vp-meter-note.is-hint { color: #f5c542; line-height: 1.4; }
/* друг в комнате: одна плашка-кнопка «В комнате · N зрителей  [Войти]» вместо текста с эмодзи и отдельной кнопки */
.fr-room { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 34px; margin-top: 8px; padding: 0 5px 0 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent); font-size: 12.5px; font-weight: 600; transition: background .14s, box-shadow .14s; }
.fr-room:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.fr-room svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fr-room span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-room b { flex: none; height: 24px; padding: 0 12px; display: grid; place-items: center; border-radius: 7px; background: var(--accent-fill); color: #0d1a13; font-size: 12px; font-weight: 700; }
.side-party { display: inline-grid; place-items: center; margin-left: 5px; vertical-align: -2px; color: var(--accent); font-style: normal; }
.side-party svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* шумоподавление: общий блок для «Настроек» (цвета темы) и панели в плеере (тёмный) */
.nsc { --nsc-bg: var(--surface-2); --nsc-text: var(--text); --nsc-muted: var(--muted); --nsc-on-text: #0d1a13;
  width: 100%; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; color: var(--nsc-text); }
.pl-vset .nsc { --nsc-bg: rgba(255,255,255,.06); --nsc-text: #fff; --nsc-muted: rgba(255,255,255,.55); margin-top: 0; }
.nsc-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: 11px; background: var(--nsc-bg); }
.nsc-seg button { height: 30px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--nsc-muted); transition: background .14s, color .14s; }
.nsc-seg button:hover { color: var(--nsc-text); }
.nsc-seg button.is-on { color: var(--nsc-on-text); background: var(--accent-fill); }
.nsc-desc { font-size: 12px; line-height: 1.4; color: var(--nsc-muted); }
.nsc-ai { display: flex; flex-direction: column; gap: 8px; }
.nsc-ai[hidden], .nsc-thr[hidden] { display: none; }
.nsc-row { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.nsc-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; cursor: default; }
.nsc-row input[type="range"] { flex: 0 1 140px; min-width: 0; accent-color: var(--accent); }
.nsc-val { flex: none; width: 72px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--nsc-muted); }
.s-row-ns .nsc { max-width: 520px; }
/* индикатор в панели: белая черта — порог отсечки; закрыта отсечка — полоска гаснет */
.vp-meter-wrap { position: relative; flex: 1; display: flex; }
.vp-thr { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
.vp-thr[hidden] { display: none; }
.vp-meter.is-gated::after { opacity: .35; }
/* панель голоса: ровная сетка (название слева, управление справа), карточки с разделителями, свои ползунки */
.pl-vset { width: 360px; }
.vp-sec { gap: 10px; }
.pl-vset .nsc { gap: 10px; }
.vp-card, .pl-vset .nsc-card { display: flex; flex-direction: column; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.045); overflow: hidden; }
.pl-vset .nsc-card .nsc-ai { gap: 0; }
/* разделитель — тенью над строкой: у первой строки он обрезается краем карточки, даже если часть строк скрыта */
.vp-card .vp-row, .pl-vset .nsc-card .nsc-row { min-height: 44px; margin: 0; box-shadow: 0 -1px 0 rgba(255,255,255,.07); }
.vp-card .vp-duck-box { gap: 0; }
.pl-vset .vp-row, .pl-vset .nsc-row { gap: 10px; }
.pl-vset .nsc-t, .vp-row-t b { font-size: 13.5px; font-weight: 600; }
.pl-vset .nsc-t { color: #fff; }
.vp-row-t small { margin-top: 1px; }
/* колонка значений одной ширины — ползунки встают строго друг под другом */
.pl-vset .nsc-val, .pl-vset .vp-duck-val { flex: none; width: 64px; text-align: right; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.7); }
.pl-vset input[type="range"] { --p: 50%; flex: none; width: 112px; height: 20px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pl-vset input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) 0 var(--p), rgba(255,255,255,.16) var(--p) 100%); }
.pl-vset input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: transform .12s; }
.pl-vset input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.pl-vset input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); }
.pl-vset input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent-fill); }
.pl-vset input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.pl-vset input[type="range"]:disabled { cursor: not-allowed; }
.pl-vset input[type="range"]:focus-visible { outline: none; }
.pl-vset input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .45); }
.vp-duck input { flex: none; }
.vp-meter-note { margin-top: -2px; }
/* на странице «Настройки» — те же карточки в цветах темы */
.s-row-ns .nsc-card { display: flex; flex-direction: column; padding: 0 12px; border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.s-row-ns .nsc-card .nsc-ai { gap: 0; }
.s-row-ns .nsc-card .nsc-row { min-height: 42px; box-shadow: 0 -1px 0 var(--divider); }
/* «Настройки» → Голос: шумоподавление обычными строками */
.s-nsc { --nsc-bg: var(--surface-2); --nsc-text: var(--text); --nsc-muted: var(--muted); --nsc-on-text: #0d1a13; }
.s-nsc .s-seg { flex: none; width: 300px; }
.s-group .s-nsc .s-row { border-bottom: 1px solid var(--divider); } /* строки внутри обёртки — с разделителем и последняя */
.s-nsc .nsc-ai[hidden], .s-nsc .nsc-thr[hidden] { display: none; }
/* панель голоса: воздух между строками, шире колонка названий, подписи в одну строку */
.pl-vset { width: 380px; }
.vp-card .vp-row, .pl-vset .nsc-card .nsc-row { min-height: 48px; padding: 9px 0; }
.vp-row-t { gap: 2px; }
.vp-row-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-card .vp-row + .vp-row, .vp-card .vp-duck-box { margin-top: 0; }
/* кнопки в шапке голоса: одинаковые круги 30px, значки 16px с одной толщиной линии */
.pc-v-btns { gap: 8px; }
.pc-v-head .pc-v-set { width: 30px; height: 30px; padding: 0; border-radius: 50%; color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); transition: background .14s, color .14s; }
.pc-v-head .pc-v-set:hover { color: #fff; background: rgba(255,255,255,.15); }
.pc-v-set svg, .pc-v-setlink svg { width: 16px; height: 16px; stroke-width: 1.9; }
.pc-v-hang { transition: background .14s; }
.pc-v-hang svg { width: 18px; height: 18px; }
.pc-v-muted { display: grid; place-items: center; }
.pc-v-muted svg { width: 15px; height: 15px; stroke-width: 1.9; stroke-linejoin: round; }
/* своя кнопка микрофона в списке голоса — круг 30px в одной колонке с «положить трубку» */
.pc-v-mute { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); transition: background .14s, color .14s; }
.pc-v-mute:hover { background: rgba(255,255,255,.15); }
.pc-v-mute.is-off { color: #ff6b6b; background: rgba(255,90,90,.16); }
.pc-v-mute.is-off:hover { background: rgba(255,90,90,.28); }
.pc-v-mute svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* «Вернуться в комнату» в сайдбаре */
.side-room[hidden] { display: none; }
.side-room-item .side-cont-poster { overflow: visible; }
.side-room-item .side-cont-poster img { border-radius: 6px; }
.side-room-live { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-fill);
  box-shadow: 0 0 0 2px var(--bg); animation: sideRoomLive 1.6s ease-in-out infinite; }
@keyframes sideRoomLive { 50% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); } }
.side-room-item .side-cont-text small { overflow: hidden; text-overflow: ellipsis; }
/* ---------- окно «Смотреть»: продолжить, озвучка, серии ---------- */
.ep-pop { width: 360px; padding: 12px; }
.ep-resume { position: relative; height: auto; min-height: 54px; padding: 8px 14px 8px 8px; gap: 12px; overflow: hidden; border-radius: 12px; }
.ep-resume-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-fill); color: #0d1a13; }
.ep-resume-ic svg { width: 16px; height: 16px; margin-left: 2px; }
.ep-resume-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.ep-resume-t b { font-size: 14.5px; font-weight: 700; color: var(--accent); }
.ep-resume-t small { font-size: 12.5px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-resume > i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--accent) var(--p), color-mix(in srgb, var(--accent) 18%, transparent) var(--p)); }
/* озвучка: строка-кнопка и раскрывающийся список */
.ep-dub-wrap { margin-top: 8px; }
.ep-dub { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border-radius: 11px; background: var(--surface-2); color: var(--text); text-align: left; transition: background .14s; }
.ep-dub:not([disabled]):hover, .ep-dub.is-open { background: color-mix(in srgb, var(--text) 8%, var(--surface-2)); }
.ep-dub[disabled] { cursor: default; }
.ep-dub-k { flex: none; font-size: 12.5px; color: var(--muted); }
.ep-dub-v { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-dub-n { flex: none; font-size: 12px; font-weight: 600; color: #f5b342; }
.ep-dub svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s; }
.ep-dub.is-open svg { transform: rotate(180deg); }
.ep-dub.is-loading .ep-dub-v { color: var(--muted); font-weight: 500; }
.ep-dub-list { margin-top: 6px; max-height: 232px; overflow-y: auto; padding: 4px; border-radius: 11px; background: var(--surface-2); scrollbar-width: thin; }
.ep-dub-list[hidden] { display: none; }
.ep-dub-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px; border-radius: 8px; text-align: left; color: var(--text); font-size: 13px; }
.ep-dub-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.ep-dub-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-dub-item small { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ep-dub-item.is-on { color: var(--accent); font-weight: 650; background: var(--accent-soft); }
/* серии: сетка поровнее, нет в озвучке — пунктир и тусклая */
.ep-head { margin: 14px 2px 8px; }
.ep-grid { gap: 6px; }
.ep-tile { height: 42px; border-radius: 10px; }
.ep-tile.is-na { background: transparent; color: color-mix(in srgb, var(--text) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); cursor: not-allowed; }
.ep-tile.is-na:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.ep-dub-item small.is-few { color: #f5b342; }
/* окно «Смотреть»: непрозрачное (текст страницы не просвечивает) и ужимается под экран — серии прокручиваются внутри */
.ep-pop { display: flex; flex-direction: column; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; }
.ep-pop[hidden] { display: none; }
.ep-pop > * { flex: none; }
.ep-pop .ep-grid { flex: 0 1 auto; min-height: 96px; max-height: 262px; }
.ep-pop .ep-dub-wrap { flex: 0 1 auto; min-height: 40px; display: flex; flex-direction: column; }
.ep-pop .ep-dub-list { flex: 0 1 auto; min-height: 80px; }
.ep-pop .ep-dub { flex: none; }
/* экран выбора озвучки внутри окна «Смотреть» */
.ep-dub svg { transform: none; }
.ep-pop.is-dubs .ep-dub-list { flex: 1 1 auto; min-height: 0; max-height: none; margin-top: 8px; padding: 0; background: none; border-radius: 0; }
.ep-dubs-head { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.ep-dubs-head b { font-size: 15px; font-weight: 700; }
.ep-dubs-head small { margin-left: auto; font-size: 12px; color: var(--muted); }
.ep-back { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--text); transition: background .14s; }
.ep-back:hover { background: color-mix(in srgb, var(--text) 8%, var(--surface-2)); }
.ep-back svg, .ep-dub-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ep-dub-item { min-height: 40px; padding: 8px 12px; border-radius: 10px; }
.ep-dub-item + .ep-dub-item { margin-top: 2px; }
.ep-dub-item svg { flex: none; color: var(--accent); margin-left: -2px; }
.ep-pop.is-film.is-dubs .ep-dub-list { max-height: 320px; }
/* тонкие полосы прокрутки в окне «Смотреть» вместо системных со стрелками */
.ep-pop .ep-grid, .ep-pop .ep-dub-list { scrollbar-width: auto; scrollbar-color: auto; } /* иначе Chrome игнорирует ::-webkit-scrollbar и рисует стрелки */
.ep-pop .ep-grid::-webkit-scrollbar, .ep-pop .ep-dub-list::-webkit-scrollbar { width: 6px; }
.ep-pop .ep-grid::-webkit-scrollbar-button, .ep-pop .ep-dub-list::-webkit-scrollbar-button { display: none; height: 0; }
.ep-pop .ep-grid::-webkit-scrollbar-track, .ep-pop .ep-dub-list::-webkit-scrollbar-track { background: transparent; }
.ep-pop .ep-grid::-webkit-scrollbar-thumb, .ep-pop .ep-dub-list::-webkit-scrollbar-thumb { border-radius: 3px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.ep-pop .ep-grid::-webkit-scrollbar-thumb:hover, .ep-pop .ep-dub-list::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 38%, transparent); }
/* ровный правый край: полоса прокрутки — в поле окна (место под неё всегда оставлено), содержимое — вровень с «Продолжить» */
.ep-pop .ep-grid { padding: 2px; margin: -2px -8px -2px -2px; scrollbar-gutter: stable; }
.ep-pop.is-dubs .ep-dub-list { margin-right: -10px; padding-right: 4px; scrollbar-gutter: stable; }
/* затухание у края, за которым ещё есть содержимое */
.ep-pop .fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.ep-pop .fade-t { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 20px), transparent); }
.ep-pop .fade-t.fade-b { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 28px), transparent); }
/* колёсико над окном «Смотреть» листает серии/озвучки, а не страницу (Lenis пропускает [data-lenis-prevent]);
   долистали до конца — прокрутка не перетекает на страницу */
.ep-pop .ep-grid, .ep-pop .ep-dub-list { overscroll-behavior: contain; }
/* «Оформление»: тема и иконка — одинаковые строки, справа плитки одного размера */
.s-group .s-theme.s-tiles { margin: 0; }
.s-row-tiles { align-items: center; }
.s-tiles { display: flex; gap: 10px; flex: none; }
.s-tiles .s-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; width: 92px; padding: 10px 8px 9px; border-radius: 14px;
  background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .14s, background .14s, color .14s; }
.s-tiles .s-tile:hover { background: color-mix(in srgb, var(--text) 6%, var(--surface-2)); }
.s-tiles .s-tile.is-on, .s-tiles .s-tile.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.s-tiles .s-tile img { width: 56px; height: 56px; display: block; }
/* мини-превью темы: боковая панель, шапка и карточки в цветах темы */
.s-theme-prev { position: relative; display: block; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(127,127,127,.25); }
.s-theme-prev.is-dark { background: #0f1113; } .s-theme-prev.is-light { background: #f3f4f6; }
.s-theme-prev b { position: absolute; border-radius: 3px; }
.s-theme-prev .tp-side { left: 0; top: 0; bottom: 0; width: 14px; border-radius: 0; }
.s-theme-prev .tp-top { left: 19px; right: 5px; top: 6px; height: 6px; }
.s-theme-prev .tp-c1, .s-theme-prev .tp-c2, .s-theme-prev .tp-c3 { top: 17px; width: 9px; height: 13px; }
.s-theme-prev .tp-c1 { left: 19px; } .s-theme-prev .tp-c2 { left: 30px; } .s-theme-prev .tp-c3 { left: 41px; }
.s-theme-prev.is-dark .tp-side { background: #17191c; } .s-theme-prev.is-dark .tp-top { background: #23262a; } .s-theme-prev.is-dark .tp-c1, .s-theme-prev.is-dark .tp-c2, .s-theme-prev.is-dark .tp-c3 { background: #2b2f34; }
.s-theme-prev.is-light .tp-side { background: #ffffff; } .s-theme-prev.is-light .tp-top { background: #e2e5e9; } .s-theme-prev.is-light .tp-c1, .s-theme-prev.is-light .tp-c2, .s-theme-prev.is-light .tp-c3 { background: #d5d9de; }
.s-theme-prev .tp-c1 { background: var(--accent-fill) !important; opacity: .85; } /* акцент — как выделение в интерфейсе */

/* «Вернуться в комнату»: мигающая точка — внутри угла постера, пульсации не обрезаются краем строки */
.side-cont-item.side-room-item { overflow: visible; }
.side-room-live { top: 2px; right: 2px; width: 9px; height: 9px; }
/* ---------- настройки: спокойное меню (без карточки и цветных плашек), разделы по смыслу ---------- */
.s-nav { padding: 0; gap: 1px; background: none; border: 0; box-shadow: none; border-radius: 0; }
.s-nav-sec { margin: 18px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.s-nav-sec:first-child { margin-top: 2px; }
.s-nav .s-nav-item { position: relative; gap: 11px; padding: 8px 12px; border-radius: 9px; color: var(--text-2); font-size: 14px; font-weight: 600; background: none; }
.s-nav .s-nav-item svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: opacity .14s, color .14s; }
.s-nav .s-nav-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.s-nav .s-nav-item:hover svg { opacity: 1; }
.s-nav .s-nav-item.is-active { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.s-nav .s-nav-item.is-active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--accent-fill); }
.s-nav .s-nav-item.is-active svg { color: var(--accent); opacity: 1; }
/* шапка раздела — крупный заголовок, без цветного квадрата */
.s-pane .s-group-ic { display: none; }
.s-pane .s-group-head { padding-bottom: 16px; margin-bottom: 6px; }
.s-pane .s-group-head b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.s-pane .s-group-head small { font-size: 13.5px; margin-top: 3px; }
@media (max-width: 860px) { .s-nav-sec { display: none; } }
/* правая часть настроек — мягче: почти прозрачный фон без рамки, чтобы не выпирала рядом с «плоским» меню */
.s-pane .s-group { background: color-mix(in srgb, var(--surface) 42%, transparent); border: 0; box-shadow: none; }
.s-pane .s-group-head { border-bottom-color: color-mix(in srgb, var(--divider) 70%, transparent); }
.s-pane .s-group .s-row { border-bottom-color: color-mix(in srgb, var(--divider) 70%, transparent); }
/* ---------- «Продолжить» + кнопка серий; окно серий по центру ---------- */
.d-playwrap { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.d-playwrap .d-play { flex: 1; min-width: 0; margin-top: 0; }
.d-playwrap .d-play span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-eps-btn { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); color: var(--text-2); transition: background .14s, color .14s; }
.d-eps-btn[hidden] { display: none; }
.d-eps-btn:hover { background: var(--surface-2); color: var(--text); }
.d-eps-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.eps-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 32px;
  background: rgba(6, 8, 10, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .16s ease; }
.eps-modal.open { opacity: 1; }
.eps-dialog { width: min(640px, 100%); max-height: min(720px, 100%); display: flex; flex-direction: column; padding: 18px 20px 16px; border-radius: 20px;
  background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent);
  transform: translateY(10px) scale(.98); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.eps-modal.open .eps-dialog { transform: none; }
.eps-dialog > * { flex: none; }
.eps-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.eps-head b { font-size: 19px; font-weight: 700; }
.eps-head small { font-size: 14px; color: var(--muted); font-weight: 600; }
.eps-x { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.eps-x:hover { background: var(--surface-2); color: var(--text); }
.eps-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.eps-back { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text); }
.eps-back svg, .eps-dubrow svg, .eps-dub svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.eps-dubrow { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-align: left; margin-bottom: 12px; transition: background .14s; }
.eps-dubrow:hover { background: color-mix(in srgb, var(--text) 8%, var(--surface-2)); }
.eps-dubrow-k { flex: none; font-size: 13px; color: var(--muted); }
.eps-dubrow-v { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eps-dubrow-n { flex: none; font-size: 12.5px; font-weight: 600; color: #f5b342; }
.eps-dubrow svg { flex: none; color: var(--muted); }
.eps-ranges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.eps-ranges button { height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.eps-ranges button:hover, .eps-ranges button.is-on { background: var(--surface-2); color: var(--text); }
.eps-grid { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; padding: 2px; margin: -2px; overscroll-behavior: contain; }
.eps-grid .ep-tile { height: 44px; }
.eps-hint { margin: 12px 2px 0; font-size: 12px; color: var(--muted); }
.eps-dubs { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; }
.eps-dub { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 12px; border-radius: 10px; text-align: left; color: var(--text); font-size: 14px; }
.eps-dub:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.eps-dub span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eps-dub small { flex: none; font-size: 12.5px; color: var(--muted); }
.eps-dub small.is-few { color: #f5b342; }
.eps-dub.is-on { color: var(--accent); font-weight: 650; background: var(--accent-soft); }
.eps-dub svg { flex: none; color: var(--accent); }
.eps-foot { margin-top: 14px; }
.eps-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border-radius: 13px; background: var(--accent-fill); color: #0d1a13; font-weight: 700; font-size: 15px; }
.eps-go svg { width: 16px; height: 16px; fill: currentColor; }
.eps-grid, .eps-dubs { scrollbar-width: auto; scrollbar-color: auto; }
.eps-grid::-webkit-scrollbar, .eps-dubs::-webkit-scrollbar { width: 6px; }
.eps-grid::-webkit-scrollbar-button, .eps-dubs::-webkit-scrollbar-button { display: none; height: 0; }
.eps-grid::-webkit-scrollbar-thumb, .eps-dubs::-webkit-scrollbar-thumb { border-radius: 3px; background: color-mix(in srgb, var(--text) 22%, transparent); }

/* ---------- кнопки под постером: две цельные панели вместо россыпи плашек ----------
   [▶ Продолжить | ⊞]  и  [🔖 Статус ▾ | ➤ | ♡] — общая рамка у панели, внутри тонкие разделители */
.d-playwrap { gap: 0; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); }
.d-playwrap .d-play { height: 42px; font-size: 14.5px; font-weight: 700; color: var(--accent); background: none; box-shadow: none; border-radius: 12px 0 0 12px; }
.d-playwrap .d-play:only-of-type, .d-playwrap .d-play:has(+ .d-eps-btn[hidden]) { border-radius: 12px; }
.d-playwrap .d-play:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.d-playwrap .d-play.is-off { color: var(--muted); }
.d-playwrap:has(.d-play.is-off) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.d-playwrap .d-eps-btn { width: 46px; height: 42px; border-radius: 0 12px 12px 0; background: none; box-shadow: none; color: var(--accent);
  border-left: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.d-playwrap .d-eps-btn:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }

.d-actions { gap: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.d-actions .d-listbtn, .d-actions .d-listbtn.has { background: none; box-shadow: none; border-radius: 12px 0 0 12px; color: var(--text); }
.d-actions .d-listbtn.has svg:first-of-type { color: var(--lc); }
.d-actions .d-listbtn:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.d-actions .d-fav { flex-basis: 46px; width: 46px; background: none; box-shadow: none; border-radius: 0; border-left: 1px solid var(--divider); }
.d-actions > .d-fav:last-child { border-radius: 0 12px 12px 0; }
.d-actions .d-fav:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.d-actions .d-fav.is-active { background: none; color: #ff4d6d; }
.d-actions .d-fav:active { transform: none; }
.d-actions .d-fav:active svg { transform: scale(.86); }
.d-actions .d-fav.is-active { animation: none; }
.d-actions .d-fav.is-active svg { animation: favPop .34s var(--spring); }
/* ---------- окно «Серии»: шапка с постером, панель озвучки, живые плитки ---------- */
.eps-dialog { padding: 0; overflow: hidden; }
.eps-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 16px 20px 16px; }
.eps-body > * { flex: none; }
.eps-body > .eps-grid, .eps-body > .eps-dubs { flex: 0 1 auto; min-height: 0; }
.eps-hero { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 20px 18px; isolation: isolate; overflow: hidden; }
.eps-hero::before { content: ''; position: absolute; inset: -40px -40px 0; z-index: -2; background: var(--bg, none) center 30% / cover; filter: blur(28px) saturate(1.6); opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.eps-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 15%, transparent), color-mix(in srgb, var(--surface) 55%, transparent) 60%, var(--surface)); }
.eps-hero-img { flex: none; width: 58px; aspect-ratio: 2/3; object-fit: cover; border-radius: 9px; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.eps-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.eps-hero-info > small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.eps-hero-info > b { font-size: 19px; font-weight: 750; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eps-meta { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; font-size: 13px; color: var(--text-2); }
.eps-prog { display: block; width: min(260px, 100%); height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.eps-prog > i { display: block; height: 100%; border-radius: inherit; background: var(--accent-fill); }
.eps-hero .eps-x { position: absolute; top: 12px; right: 12px; background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--text-2); }
.eps-hero .eps-x:hover { background: var(--surface-2); color: var(--text); }

.eps-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.eps-dubpick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border-radius: 11px; background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 650; text-align: left; transition: background .14s; }
.eps-dubpick:hover { background: color-mix(in srgb, var(--text) 8%, var(--surface-2)); }
.eps-dubpick svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eps-dubpick span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eps-dubpick em { flex: none; font-style: normal; font-size: 12px; font-weight: 650; color: #f5b342; }
.eps-resume { flex: none; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px 0 13px; border-radius: 11px; background: var(--accent-fill); color: var(--on-accent); font-size: 14px; font-weight: 700; transition: filter .14s; }
.eps-resume:hover { filter: brightness(1.08); }
.eps-resume svg { width: 14px; height: 14px; fill: currentColor; }

.eps-grid { gap: 7px; }
.eps-grid .ep-tile { height: 46px; border-radius: 11px; font-size: 14.5px; font-weight: 650; background: var(--surface-2); box-shadow: none;
  transition: transform .14s var(--spring), background .14s, box-shadow .14s, color .14s; }
.eps-grid .ep-tile:not(:disabled):hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--text); }
.eps-grid .ep-tile.is-seen { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: color-mix(in srgb, var(--text) 45%, transparent); }
.eps-grid .ep-tile.is-seen::after { content: ''; position: absolute; top: 5px; right: 5px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2306231a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat; }
.eps-grid .ep-tile.is-cur { color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent);
  background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 24%, var(--surface-2)) var(--p), var(--surface-2) var(--p)); }
.eps-grid .ep-tile.is-next { color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.eps-grid .ep-tile.is-na { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent); color: color-mix(in srgb, var(--text) 28%, transparent); }

.eps-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin: 14px 2px 0; font-size: 12px; color: var(--muted); }
.eps-legend span { display: inline-flex; align-items: center; gap: 6px; }
.eps-legend i { width: 10px; height: 10px; border-radius: 3px; }
.eps-legend .lg-seen { background: var(--accent-fill); }
.eps-legend .lg-cur { box-shadow: inset 0 0 0 2px var(--accent); }
.eps-legend .lg-na { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
.eps-legend .eps-rc { margin-left: auto; }
.eps-loading { margin: 18px 2px 8px; font-size: 14px; color: var(--muted); }

/* ---------- отзыв / баг-репорт ---------- */
#btn-feedback svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fb-dialog { width: min(560px, 100%); }
.fb-kinds { display: flex; gap: 6px; margin-bottom: 12px; }
.fb-kinds button { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 650; color: var(--text-2); background: var(--surface-2); transition: background .14s, color .14s; }
.fb-kinds button.is-on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.fb-text { width: 100%; resize: vertical; min-height: 110px; max-height: 320px; padding: 12px 14px; border-radius: 12px; border: 0; outline: 0; font: inherit; font-size: 14.5px; line-height: 1.45;
  color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--divider); }
.fb-text:focus { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.fb-shot { position: relative; margin-top: 10px; min-height: 76px; border-radius: 12px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
  color: var(--muted); border: 1.5px dashed color-mix(in srgb, var(--text) 16%, transparent); transition: border-color .14s, background .14s; }
.fb-shot:hover, .fb-shot.drag { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.fb-shot > svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fb-shot span { display: flex; flex-direction: column; gap: 2px; }
.fb-shot b { font-size: 14px; font-weight: 650; color: var(--text-2); }
.fb-shot small { font-size: 12.5px; }
.fb-shot u { color: var(--accent); text-decoration: none; }
.fb-shot.has { padding: 8px; cursor: default; border-style: solid; border-color: var(--divider); justify-content: center; }
.fb-shot.has img { display: block; max-width: 100%; max-height: 240px; border-radius: 8px; }
.fb-shot-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: rgba(10,12,14,.72); }
.fb-shot-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.fb-err { margin: 10px 2px 0; font-size: 13px; color: #ff6b6b; }
.fb-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.fb-foot small { flex: 1; font-size: 12.5px; color: var(--muted); }
.fb-send { height: 40px; padding: 0 20px; border-radius: 11px; background: var(--accent-fill); color: var(--on-accent); font-weight: 700; font-size: 14px; }
.fb-send:disabled { opacity: .6; }
.fb-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 10px 8px; }
.fb-done > span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); margin-bottom: 6px; }
.fb-done > span svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fb-done b { font-size: 18px; }
.fb-done small { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
/* несколько скриншотов (до 5) — миниатюры в ряд + плитка «ещё» */
.fb-shots.has { margin-top: 10px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fb-shots.has.drag { outline: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 4px; border-radius: 12px; }
.fb-thumb { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--divider); }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-thumb .fb-shot-x { top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 7px; }
.fb-thumb .fb-shot-x svg { width: 13px; height: 13px; }
.fb-add { aspect-ratio: 4/3; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 24px; line-height: 1; color: var(--muted);
  border: 1.5px dashed color-mix(in srgb, var(--text) 18%, transparent); transition: border-color .14s, color .14s; }
.fb-add small { font-size: 11px; font-weight: 600; }
.fb-add:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
/* ---------- профили: спокойнее — без размытой цветной плашки, цифры вместо строки, компактные блоки ---------- */
.pfx-hero-row { gap: 22px; }
.pfx-id h2 { font-size: 28px; }
.pfx-handle { color: var(--muted); }
.pfx-stats { display: flex; gap: 26px; margin-top: 12px; }
.pfx-stats span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pfx-stats b { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.01em; line-height: 1.15; }
/* списки — строка ссылок под шапкой */
.pfx-list { padding: 6px 10px; font-size: 13.5px; }
.pfx-list i { width: 7px; height: 7px; }
/* карточки справа — без заливки, тонкая рамка */
.pfx-card { background: none; box-shadow: inset 0 0 0 1px var(--divider); border-radius: 16px; padding: 16px; }
.pfx-sec-head h3 { font-size: 16px; }
.pfx-n { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 4px; }
/* постеры меньше */
.pfx-now-row { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; }
.pfx-now-name { font-size: 13px; }
.mt-row { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
#frp-grid.grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* у друга: «смотрит сейчас» и совпадение — две компактные карточки рядом */
.frp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 0 0 30px; }
.frp-top .frp-status { max-width: none; margin: 0; height: 100%; background: none; box-shadow: inset 0 0 0 1px var(--divider); border-radius: 16px; }
.frp-top .frp-status.is-now { box-shadow: inset 0 0 0 1px rgba(47,214,123,.4); }
.frp-top .frp-poster { flex-basis: 48px; width: 48px; height: 68px; border-radius: 8px; }
.frp-top .frp-st-text b { font-size: 15px; }
.frp-top .frp-status--empty { display: flex; align-items: center; }
.frp-top .mt-card { margin: 0; padding: 12px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--divider); display: flex; align-items: center; }
.frp-top .mt-head { gap: 14px; }
.frp-top .mt-ring { width: 64px; height: 64px; }
.frp-top .mt-ring::before { inset: 6px; background: var(--bg); }
.frp-top .mt-ring b { font-size: 18px; }
.frp-top .mt-ring b small { font-size: 11px; }
.frp-top .mt-text b { font-size: 16px; }
.frp-top .mt-text span { font-size: 13px; line-height: 1.4; }
.mt-wait { color: var(--muted); font-size: 14px; }
@media (max-width: 980px) { .frp-top { grid-template-columns: 1fr; } }
/* баннер с размытием вернули; «Любимое» — как было: наклонённый постер на баннере */
.pfx-avatar { width: 88px; height: 88px; font-size: 34px; }
.pfx-hero .pfx-stats span { color: color-mix(in srgb, var(--text) 70%, transparent); }
.pfx-lists { gap: 2px; }
/* «Вкус»: без зелёного облака — жанры в тексте просто жирным, топ-5 списком с тонкими полосками */
.pfx-taste b { color: var(--text); font-weight: 750; }
.pfx-taste { font-size: 15px; }
.pfx-taste-sub { font-size: 13.5px; color: var(--muted); }
.pfx-genres { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pfx-genres li { display: grid; grid-template-columns: minmax(0, 146px) 1fr 22px; align-items: center; gap: 10px; font-size: 13.5px; }
.pfx-genres span { color: var(--text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfx-genres i { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.pfx-genres u { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.pfx-genres li:first-child u { background: var(--accent-fill); }
.pfx-genres em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: right; }
/* «← Профиль» на закладках — тот же отступ сверху, что у «← Друзья» */
#bm-back { margin-top: 20px; }

/* свёрнутый сайдбар: на месте заголовков разделов — короткая черта (кроме самого верхнего) */
.side-label { position: relative; }
.side-label::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; margin: 0 0 0 -11px; border-radius: 1px;
  background: color-mix(in srgb, var(--text) 16%, transparent); opacity: 0; transition: opacity .15s ease; }
.app.side-collapsed .side-label:not(:first-child)::after { opacity: 1; }
.app.side-collapsed .side-label { color: transparent; opacity: 1; }

/* вкладки — отдельные кнопки в стиле панелей под постером: тонкая рамка, активная — мягкий зелёный оттенок */
.tab { box-shadow: inset 0 0 0 1px var(--divider); }
.tab:active { transform: scale(.96); }
.tab.is-active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); }
.tab.is-active:hover { background: color-mix(in srgb, var(--accent) 17%, var(--surface)); color: var(--accent); }
.tab.is-active .frp-n, .tab.is-active .count { color: inherit; opacity: .75; }

/* шумоподавление в бете: плашка у заголовка + пояснение */
.beta-tag { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #f5b342; background: color-mix(in srgb, #f5b342 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f5b342 35%, transparent); }
.nsc-beta { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: color-mix(in srgb, #f5b342 80%, var(--text-2)); }
.nsc > .nsc-beta { margin: 2px 0 8px; }
.s-row-text small.nsc-beta { color: color-mix(in srgb, #f5b342 80%, var(--text-2)); margin-top: 6px; }

/* чат комнаты: блок комнаты не закрывает сообщения в маленьком окне */
.pl-chat { container: pchat / size; }
.pc-room { max-height: 50cqh; overflow-y: auto; scrollbar-width: none; }
.pc-room::-webkit-scrollbar { display: none; }
@container pchat (max-height: 360px) {
  .pc-room-head, .pc-sync, .pc-v-row { display: none; } /* зрители, синхронизация и список в голосе — прячем; строка «Голос · N» с кнопками остаётся */
  .pc-voice { margin-top: 0; padding-top: 0; border-top: 0; }
}
/* …и не в голосе: «Голосовой чат» — одна компактная строка, ссылка на настройки голоса прячется */
@container pchat (max-height: 360px) {
  .pc-v-setlink, .pc-vbar-t small { display: none; }
  .pc-vbar { padding: 5px 8px; gap: 8px; }
  .pc-vbar-ic { width: 24px; height: 24px; }
  .pc-vbar-ic svg { width: 13px; height: 13px; }
}

/* постоянный фокус: шапки чата нет совсем — только сообщения и поле ввода; вернуть — значком в углу при наведении */
.pc-hide svg, .pc-unhide svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-hide.is-on { color: var(--accent); background: rgb(var(--accent-rgb) / .14); }
.pl-chat.head-hidden .pc-top { display: none; }
.pl-chat.head-hidden .pc-list { padding-top: 14px !important; }
.pc-unhide { display: none; position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; border-radius: 9px; place-items: center;
  color: rgba(255,255,255,.75); background: rgba(16,17,20,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pc-unhide svg { width: 16px; height: 16px; }
.pc-unhide:hover { color: #fff; background: rgba(40,42,48,.9); }
.pl-chat.head-hidden:hover .pc-unhide { display: grid; }
/* лента чата — без полосы прокрутки (она сдвигала сообщения), листать колесом/тачпадом можно как раньше */
.pc-list { scrollbar-width: none; }
.pc-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* значок «показать шапку» — слева сверху и почти прозрачный, чтобы не закрывать сообщения */
.pc-unhide { right: auto; left: 8px; width: 28px; height: 28px; color: rgba(255,255,255,.6); background: rgba(16,17,20,.28); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pc-unhide:hover { background: rgba(16,17,20,.6); color: #fff; }

/* ---------- мягкое появление панели настроек ---------- */
@keyframes softIn { from { opacity: 0; transform: translateY(8px); } }
.s-pane .s-group:not([hidden]) { animation: softIn .24s cubic-bezier(.2,.8,.2,1) both; }
/* настройки: правая часть не короче окна — при переключении разделов страница не меняет высоту и меню не прыгает */
.s-pane { min-height: calc(100vh - 150px); }
/* место под полосу прокрутки зарезервировано — контент не сдвигается вбок, когда она появляется/исчезает */
.content { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { .s-pane .s-group { animation: none !important; } }
/* закладки: карточки встают на место скелетонов/кэша сразу — без «проявления с нуля» (оно давало мигание) */
#bm-grid .card--enter { animation: none; }
/* скелетон профиля */
.pfx-skel .sk { display: block; }
.pfx-skel .pfx-hero { background: var(--surface); }
/* скелетон растворяется поверх готового содержимого */
.skel-host { position: relative; }
.skel-fade { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--bg); animation: skelOut .35s ease forwards; }
.grid > .skel-fade { display: grid; grid-template-columns: inherit; gap: inherit; align-content: start; }
@keyframes skelOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .skel-fade { display: none; } }

/* ---------- фон: «Созвездие» (canvas), «Сетка» (прежний, сохранён как есть), «Без узора» ---------- */
/* сетка — только в режиме «Сетка»; в остальных — фон и мягкое свечение сверху, как было */
html:not([data-bg="grid"]) body::before { background-image: radial-gradient(135% 60% at 50% -20%, var(--grid-glow), transparent 60%); background-size: 100% 100%; }
#bg-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* превью в плитках настроек */
.s-bg-prev { display: block; width: 72px; height: 46px; border-radius: 9px; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1px var(--divider); color: var(--text-2); }
.s-bg-prev svg { width: 100%; height: 100%; display: block; }
.bgp-stars { background: radial-gradient(120% 90% at 50% -30%, var(--accent-soft), transparent 70%), var(--bg); }
.bgp-grid { background-color: var(--bg); background-image: linear-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 12%, transparent) 1px, transparent 1px); background-size: 12px 12px; }
.bgp-none { background: radial-gradient(120% 90% at 50% -30%, var(--accent-soft), transparent 70%), var(--bg); }
.s-tile.is-on .s-bg-prev { color: var(--accent); }

/* ---------- «стекло» у сайдбара и верхней панели: созвездие мягко просвечивает под ними ---------- */
html[data-bg="stars"] .sidebar, html[data-bg="stars"] .topbar {
  background: color-mix(in srgb, var(--surface) 38%, transparent);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}
/* вариант «Стекло»: матовое размытие — звёзды под панелями превращаются в мягкое свечение */
html[data-bg="stars"][data-panels="glass"] .sidebar, html[data-bg="stars"][data-panels="glass"] .topbar {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
/* вариант «Обычные»: как раньше — плотные, звёзды под ними не видны */
html[data-bg="stars"][data-panels="solid"] .sidebar, html[data-bg="stars"][data-panels="solid"] .topbar {
  background: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--divider);
}
/* выбор панелей имеет смысл только при «Созвездии» */
html:not([data-bg="stars"]) #s-panels-row { display: none; }
html[data-bg="stars"] .topbar { border-bottom-color: color-mix(in srgb, var(--text) 7%, transparent); }
html[data-bg="stars"] .sidebar { border-right-color: color-mix(in srgb, var(--text) 7%, transparent); }

/* ---------- живой поиск ---------- */
.top-search { transition: max-width .32s cubic-bezier(.2,.8,.2,1); }
.top-search:has(input:focus) { max-width: 600px; }
.top-search input { transition: border-color .2s, box-shadow .25s, background .2s; }
.top-search:has(input:focus) input { border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), 0 6px 24px -10px color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg)); }
.top-search > svg { transition: stroke .2s, transform .3s cubic-bezier(.34,1.56,.64,1), opacity .15s; }
.top-search:has(input:focus) > svg { stroke: var(--accent); transform: scale(1.12) rotate(-8deg); }
.top-search input::placeholder { color: var(--muted); }
/* загрузка: лупа → крутилка */
.search-spin { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent); opacity: 0; pointer-events: none; }
.top-search.is-loading .search-spin { opacity: 1; animation: sSpin .7s linear infinite; }
.top-search.is-loading > svg { opacity: 0; }
@keyframes sSpin { to { transform: rotate(360deg); } }
/* крестик «очистить» выпрыгивает */
.search-clear:not([hidden]) { animation: sPop .26s cubic-bezier(.34,1.56,.64,1); }
@keyframes sPop { from { opacity: 0; transform: translateY(-50%) scale(.4); } to { opacity: 1; transform: translateY(-50%) scale(1); } }

/* ---------- фильтры — внутри поля поиска (иконка справа), «Сбросить» — в шапке панели ---------- */
.top-search .filter-bar { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; }
.top-search .filter-bar[hidden] { display: none; }
.top-search .filter-btn { position: relative; width: 30px; height: 30px; padding: 0; border-radius: 8px; justify-content: center; background: none; color: var(--muted); gap: 0; }
.top-search .filter-btn:hover { background: var(--surface-2); color: var(--text); }
.top-search .filter-btn.on { background: var(--accent-soft); color: var(--accent); }
.top-search .filter-btn svg { position: static; width: 18px; height: 18px; }
.top-search .filter-count { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px; font-size: 10px; line-height: 15px; border-radius: 8px; box-shadow: 0 0 0 2px var(--bg); }
/* когда видна кнопка фильтров — место под неё: крестик левее, текст не заезжает */
.top-search:has(.filter-bar:not([hidden])) input { padding-right: 76px; }
.top-search:has(.filter-bar:not([hidden])) .search-clear { right: 40px; }
.fp-head { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 12px; }
.fp-head b { font-size: 15px; font-weight: 800; }
.fp-head .filter-reset { height: 28px; padding: 0 10px; font-size: 13px; }

/* смена раздела: без «призрака» прошлого — сайдбар/шапка/фон мгновенно, старый контент сразу исчезает, новый мягко проявляется */
html:not(.theme-vt):not(.side-vt)::view-transition-old(root) { animation: none; opacity: 0; }
html:not(.theme-vt):not(.side-vt)::view-transition-new(root) { animation: none; }
::view-transition-old(content) { animation: vtOut2 .15s ease-out both; }
::view-transition-new(content) { animation: vtIn2 .4s cubic-bezier(.2,.8,.2,1) .07s both; }
@keyframes vtOut2 { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn2 { from { opacity: 0; transform: translateY(14px) scale(.992); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(content) { animation: vtOut2 .12s both; } ::view-transition-new(content) { animation: vtIn .2s both; } }
/* плиток иконок стало больше — переносим на новую строку, а не вылезаем за край */
#s-appicon .s-tiles { flex-wrap: wrap; justify-content: flex-end; max-width: 420px; }

/* скорость — в нижней панели: меню открывается вверх */
.pl-drop.up .pl-drop-menu { top: auto; bottom: 46px; min-width: 140px; }
.pl-speed-btn { min-width: 52px; justify-content: center; padding: 0 10px; font-variant-numeric: tabular-nums; }

/* звук: эквалайзер и обработка */
.pl-aud svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pl-aud.is-on { color: var(--accent); }
.pl-aset { width: 380px; }
.ae-head-r { display: flex; align-items: center; gap: 8px; }
.ae-spec { width: 100%; height: 75px; border-radius: 12px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); display: block; }
.ae-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ae-chip { height: 28px; padding: 0 11px; border-radius: 14px; border: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); cursor: pointer; transition: background .15s, color .15s; }
.ae-chip:hover:not(:disabled) { background: rgba(255,255,255,.12); color: #fff; }
.ae-chip.on { color: var(--on-accent); background: var(--accent-fill); }
.ae-chip:disabled { cursor: default; opacity: .5; }
.ae-chip:disabled.on { opacity: 1; }
.ae-bands { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 6px 0 2px; }
.ae-band { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.ae-band b { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; min-height: 14px; }
.ae-band span { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.45); }
.ae-slot { position: relative; display: block; width: 24px; height: 120px; }
.pl-aset .ae-slot input[type="range"] { position: absolute; left: 50%; top: 50%; width: 116px; transform: translate(-50%, -50%) rotate(-90deg); }
.ae-slot::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: rgba(255,255,255,.18); pointer-events: none; } /* отметка 0 дБ */
.pl-aset .vp-row-t small { white-space: normal; }
.pl-aset .ae-range { width: 104px; }
.ae-val { width: 48px; text-align: right; font-size: 12.5px; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.ae-reset { align-self: flex-start; margin-top: 4px; padding: 7px 12px; border-radius: 10px; border: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); cursor: pointer; }
.ae-reset:hover { color: #fff; background: rgba(255,255,255,.11); }
.pl-aset.is-off .ae-bands, .pl-aset.is-off .ae-presets, .pl-aset.is-off .vp-card { opacity: .45; }

/* ---------- мини-плеер ---------- */
.player.mini { top: var(--mini-top); left: var(--mini-left); width: var(--mini-w, 420px); height: var(--mini-h, 236px); z-index: 150; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.player.mini.dragging { transition: opacity .2s ease; cursor: grabbing; }
.player.mini .pl-top, .player.mini .pl-bottom, .player.mini .pl-bigplay, .player.mini .pl-skip, .player.mini .pl-chat,
.player.mini .pl-vset, .player.mini .pl-party-panel, .player.mini .pl-ptoast, .player.mini .pl-status { display: none !important; }
.player.mini .pl-stage.idle { cursor: default; }
.player.mini .pl-stage.chat-docked .pl-video, .player.mini .pl-stage.chat-docked .pl-canvas { right: 0 !important; width: 100% !important; }
.player.mini .pl-speakers { top: auto; bottom: 14px; left: 10px; transform: scale(.8); transform-origin: left bottom; }
.pl-mini { display: none; }
.player.mini .pl-mini { display: block; position: absolute; inset: 0; z-index: 9; cursor: grab; }
.pm-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 8px 8px 22px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.72), transparent); opacity: 0; transition: opacity .18s; }
.pm-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-chips { display: flex; gap: 4px; flex: none; }
.pm-chip { padding: 3px 7px; border-radius: 9px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); white-space: nowrap; }
.pm-chip--new { background: var(--accent-fill); color: var(--on-accent); }
.pm-chip--talk { background: rgb(var(--accent-rgb) / .25); max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.pm-btn { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); flex: none; }
.pm-btn:hover { background: rgba(255,255,255,.22); }
.pm-btn svg, .pm-pp svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-pp { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: scale(.9); transition: opacity .18s, transform .18s; }
.pm-pp svg { width: 22px; height: 22px; }
.pl-mini:hover .pm-top, .pl-mini:hover .pm-pp { opacity: 1; transform: none; }
.pm-chips:not(:empty) { opacity: 1; }
.pl-mini .pm-top:has(.pm-chip) { opacity: 1; }
.pm-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); }
.pm-bar b { display: block; height: 100%; width: 0; background: var(--accent-fill); }
/* «заменить видео?» */
.mini-ask { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .16s; }
.mini-ask.open { opacity: 1; }
.mini-ask-card { width: 360px; padding: 20px; border-radius: 18px; background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px var(--line, rgba(255,255,255,.08));
  display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.mini-ask-card b { font-size: 16px; }
.mini-ask-card span { font-size: 14px; color: var(--muted, #8a9199); line-height: 1.4; }
.mini-ask-card div { display: flex; gap: 8px; margin-top: 8px; }
.mini-ask-card button { flex: 1; height: 40px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; border: 0; }
.mini-ask-go { background: var(--accent-fill); color: var(--on-accent); }
.mini-ask-no { background: rgba(127,127,127,.14); color: var(--text); }

/* мини-плеер — свой слой в анимациях смены раздела/темы: поверх контента, без растворения (иначе видео на миг просвечивает) */
.player.mini { view-transition-name: afa-mini; }
::view-transition-group(afa-mini) { animation: none; z-index: 50; }
::view-transition-old(afa-mini) { display: none; }
::view-transition-new(afa-mini) { animation: none; opacity: 1; }

/* ручка размера мини-плеера — в углу, обращённом к центру экрана */
.pm-resize { position: absolute; width: 22px; height: 22px; z-index: 2; opacity: 0; transition: opacity .18s; }
.pm-resize::before { content: ''; position: absolute; inset: 5px; border: 0 solid rgba(255,255,255,.85); }
.pl-mini:hover .pm-resize, .player.resizing .pm-resize { opacity: 1; }
.player[data-corner="br"] .pm-resize { left: 0; top: 0; cursor: nwse-resize; } .player[data-corner="br"] .pm-resize::before { border-left-width: 2.5px; border-top-width: 2.5px; border-top-left-radius: 4px; }
.player[data-corner="bl"] .pm-resize { right: 0; top: 0; cursor: nesw-resize; } .player[data-corner="bl"] .pm-resize::before { border-right-width: 2.5px; border-top-width: 2.5px; border-top-right-radius: 4px; }
.player[data-corner="tr"] .pm-resize { left: 0; bottom: 0; cursor: nesw-resize; } .player[data-corner="tr"] .pm-resize::before { border-left-width: 2.5px; border-bottom-width: 2.5px; border-bottom-left-radius: 4px; }
.player[data-corner="tl"] .pm-resize { right: 0; bottom: 0; cursor: nwse-resize; } .player[data-corner="tl"] .pm-resize::before { border-right-width: 2.5px; border-bottom-width: 2.5px; border-bottom-right-radius: 4px; }
/* ручка сверху слева — заголовок и кнопки чуть сдвигаем, чтобы не мешали */
.player[data-corner="br"] .pm-top, .player[data-corner="bl"] .pm-top { padding-left: 24px; }
.player.resizing, .player.resizing * { cursor: nwse-resize !important; }
.player.resizing[data-corner="bl"], .player.resizing[data-corner="bl"] *, .player.resizing[data-corner="tr"], .player.resizing[data-corner="tr"] * { cursor: nesw-resize !important; }

/* качество связи в голосе: точка у каждого участника, подробности — при наведении */
.pc-v-q { flex: none; width: 8px; height: 8px; border-radius: 50%; margin: 0 2px; cursor: help; box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.pc-v-q.q-good { background: var(--accent-fill); }
.pc-v-q.q-mid { background: #f5c451; }
.pc-v-q.q-bad { background: #ff5a5a; box-shadow: 0 0 8px rgba(255,90,90,.6); }
.pc-v-q.q-wait { background: rgba(255,255,255,.3); }

/* «только по приглашению» в панели «Смотреть вместе» */
.pp-invonly { display: flex; align-items: center; gap: 10px; padding: 10px 2px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.07); cursor: pointer; }
.pp-invonly span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-invonly b { font-size: 13.5px; font-weight: 700; }
.pp-invonly small { font-size: 11.5px; color: rgba(255,255,255,.5); line-height: 1.35; }

/* офлайн: плашка «Нет связи — показываю сохранённое» */
.off-bar { position: fixed; left: 50%; top: calc(var(--topbar, 64px) + 10px); z-index: 140; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text);
  background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(127,127,127,.18);
  opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.off-bar.open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.off-bar[hidden] { display: none; }
.off-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a524; flex: none; box-shadow: 0 0 0 4px rgba(245,165,36,.18); }
.off-dot.is-sync { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.18); animation: offPulse 1s ease-in-out infinite; }
.off-dot.is-ok { background: var(--accent-fill); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .2); }
@keyframes offPulse { 50% { opacity: .35; } }
.off-bar button { padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); background: rgba(127,127,127,.14); cursor: pointer; }
.off-bar button:hover { background: rgba(127,127,127,.24); }

/* ---------- загрузки ---------- */
/* кнопка «Скачать» — третьей в связке [▶ Смотреть | ⊞ | ⬇] */
.d-playwrap .d-eps-btn:not(:last-child) { border-radius: 0; }
.d-playwrap .d-play:has(+ .d-eps-btn[hidden] + .d-dl-btn) { border-radius: 12px 0 0 12px; }
.d-dl-btn svg, .dl-head svg, .dl-empty svg, .dl-go svg, .dl-ep svg, .dl-btn svg, .dl-folder svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.d-dl-btn svg { width: 19px; height: 19px; }

/* окно «Скачать» */
.dl-modal { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .18s; }
.dl-modal.open { opacity: 1; }
.dl-card { width: 480px; max-width: calc(100vw - 32px); padding: 22px; border-radius: 22px; background: var(--bg); color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px var(--divider); display: flex; flex-direction: column; gap: 18px;
  transform: translateY(10px) scale(.98); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.dl-modal.open .dl-card { transform: none; }
.dl-head { display: flex; align-items: center; gap: 14px; }
.dl-thumb { flex: none; width: 46px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--surface); }
.dl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-head b { display: block; font-size: 19px; line-height: 1.2; }
.dl-head span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-2); }
.dl-field { display: flex; flex-direction: column; gap: 8px; }
.dl-field > label { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dl-field > label em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); margin-left: 6px; }
.dl-field select { height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--divider); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.dl-seg { display: grid; gap: 6px; padding: 4px; border-radius: 14px; background: var(--surface); }
.dl-seg--3 { grid-template-columns: repeat(3, 1fr); } .dl-seg--4 { grid-template-columns: repeat(4, 1fr); } .dl-seg--5 { grid-template-columns: repeat(5, 1fr); }
.dl-seg button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; padding: 6px 4px; border-radius: 10px; font: inherit; cursor: pointer; color: var(--text-2); background: none; transition: background .15s, color .15s; }
.dl-seg button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.dl-seg button b { font-size: 15px; font-weight: 800; }
.dl-seg button small { font-size: 11px; font-weight: 600; opacity: .75; white-space: nowrap; }
.dl-seg button.on { color: var(--on-accent); background: var(--accent-fill); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.dl-range { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.dl-step { display: flex; align-items: center; height: 38px; border-radius: 11px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); overflow: hidden; }
.dl-step button { width: 32px; height: 100%; font: inherit; font-size: 17px; font-weight: 700; color: var(--text-2); background: none; cursor: pointer; }
.dl-step button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.dl-step input { width: 44px; height: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; text-align: center; -moz-appearance: textfield; }
.dl-step input::-webkit-inner-spin-button, .dl-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dl-of { margin-left: 2px; }
.dl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--divider); }
.dl-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-sum b { font-size: 14.5px; }
.dl-sum small { font-size: 12.5px; color: var(--text-2); }
.dl-sum small.dl-warn { color: #ff6b6b; font-weight: 700; }
.dl-btns { display: flex; gap: 8px; flex: none; }
.dl-btns button { height: 42px; padding: 0 16px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 14px; color: var(--text); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.dl-btns .dl-go { color: var(--on-accent); background: var(--accent-fill); }
.dl-btns .dl-go svg { width: 17px; height: 17px; }
.dl-btns .dl-go:disabled { opacity: .45; cursor: default; }
.dl-muted { color: var(--text-2); }

/* папка загрузок */
.dl-folder { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 6px 0 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.dl-folder svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.dl-folder span { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
.dl-folder small { flex: none; font-size: 12px; color: var(--text-2); }
.dl-folder button { flex: none; height: 30px; padding: 0 10px; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--bg); box-shadow: inset 0 0 0 1px var(--divider); cursor: pointer; }
.dl-folder button:hover { color: var(--accent); }
#dl-folder { max-width: 720px; margin-bottom: 16px; }
.dl-note { font-size: 13px; color: var(--text-2); }

/* раздел «Загрузки» */
#page-downloads .page-head { display: flex; align-items: baseline; gap: 12px; }
.dl-meta { font-size: 13.5px; color: var(--text-2); margin-bottom: 16px; }
.dl-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 40px; max-width: 980px; }
.dl-empty { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 540px; padding: 28px; border-radius: 18px; background: var(--surface); }
.dl-empty b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.dl-empty b svg { width: 19px; height: 19px; }
.dl-empty span { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.dl-empty span svg { width: 15px; height: 15px; vertical-align: -2px; }
.dl-item { display: flex; gap: 16px; padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.dl-poster { flex: none; width: 88px; height: 124px; border-radius: 11px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.dl-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dl-top b { display: block; font-size: 16.5px; cursor: pointer; }
.dl-top span { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); }
/* текущая загрузка */
.dl-cur { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 13px; background: var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.dl-cur-top { display: flex; justify-content: space-between; align-items: baseline; }
.dl-cur-top b { font-size: 13.5px; }
.dl-cur-top span { font-size: 14px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.dl-cur-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.dl-cur-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent-fill); transition: width .5s ease; }
.dl-cur small { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* серии */
.dl-eps { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-ep { height: 32px; padding: 0 10px 0 8px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-2); background: var(--bg); box-shadow: inset 0 0 0 1px var(--divider); font-variant-numeric: tabular-nums; }
.dl-ep svg { width: 15px; height: 15px; flex: none; }
.dl-ep.is-done { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.dl-ep.is-loading { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent); }
.dl-ep.is-loading svg { color: var(--accent); animation: dlBob 1s ease-in-out infinite; }
@keyframes dlBob { 50% { transform: translateY(2px); } }
.dl-ep.is-paused { opacity: .65; }
.dl-ep.is-error { color: #ff6b6b; box-shadow: inset 0 0 0 1px rgba(255,107,107,.5); }
.dl-acts { display: flex; gap: 8px; margin-top: auto; }
.dl-btn { height: 34px; padding: 0 13px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); background: var(--bg); box-shadow: inset 0 0 0 1px var(--divider); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.dl-btn svg { width: 15px; height: 15px; }
.dl-btn--main { color: var(--on-accent); background: var(--accent-fill); box-shadow: none; }
.dl-btn--main svg { fill: currentColor; stroke: none; }
.dl-btn--del { color: #ff6b6b; }

/* своё окно вопроса (вместо системного) */
.ui-ask { position: fixed; inset: 0; z-index: 270; display: grid; place-items: center; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .16s; }
.ui-ask.open { opacity: 1; }
.ui-ask-card { width: 380px; max-width: calc(100vw - 32px); padding: 24px 22px 20px; border-radius: 22px; background: var(--bg); color: var(--text); text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px var(--divider); display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translateY(8px) scale(.97); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.ui-ask.open .ui-ask-card { transform: none; }
.ui-ask-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 6px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ui-ask-ic.is-danger { color: #ff6b6b; background: rgba(255,107,107,.13); }
.ui-ask-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-ask-card b { font-size: 17px; line-height: 1.3; }
.ui-ask-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ui-ask-btns { display: flex; gap: 8px; width: 100%; margin-top: 14px; }
.ui-ask-btns button { flex: 1; height: 44px; border-radius: 13px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; color: var(--text); background: var(--surface); }
.ui-ask-btns button:hover { filter: brightness(1.1); }
.ui-ask-btns .is-main { color: var(--on-accent); background: var(--accent-fill); }
.ui-ask-btns .is-danger { color: #fff; background: #e5484d; }
.ui-ask-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* окно «Скачать»: ровные отступы */
.dl-card { width: 500px; padding: 24px; gap: 20px; }
.dl-field { gap: 10px; }
.dl-field > label { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.dl-field > label em { margin-left: 0; }
.dl-range { justify-content: flex-end; gap: 8px; padding: 2px 0 0; }
.dl-range .dl-range-t { margin-right: auto; font-weight: 600; color: var(--text-2); }
.dl-of { min-width: 38px; text-align: right; }
.dl-folder { min-height: 52px; padding: 0 8px 0 14px; gap: 12px; }
.dl-folder-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; direction: ltr; }
.dl-folder-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-folder-t small { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-foot { margin-top: 2px; padding-top: 18px; }
/* кнопка «Продолжить» + серии + загрузка: иконки поуже, подписи больше места */
.d-playwrap .d-eps-btn { width: 40px; flex: none; }
.d-playwrap .d-play { gap: 7px; padding: 0 10px; }
.d-playwrap .d-play svg { flex: none; }
/* плеер: метка «Скачано» — серия играет с диска */
.pl-local { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 700; white-space: nowrap;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, rgba(0,0,0,.55)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); backdrop-filter: blur(10px); }
.pl-local[hidden] { display: none; }
.pl-local svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* скачанные серии: значок в сетке серий и в списке серий плеера */
.ep-tile.is-dl::before { content: ''; position: absolute; left: 4px; bottom: 4px; width: 12px; height: 12px; border-radius: 4px; background: var(--accent) center / 10px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.ep-tile.is-cur.is-dl::before { bottom: 12px; }
.eps-legend .lg-dl { display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 4px; background: var(--accent-fill); color: #000; vertical-align: -1px; }
.eps-legend .lg-dl svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.pl-drop-item .pl-dl-mark { display: inline-grid; place-items: center; margin-left: 8px; color: var(--accent); vertical-align: -2px; }
.pl-drop-item .pl-dl-mark svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* кадр без интерфейса */
.pl-shot-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pl-shot-btn.is-busy { opacity: .5; pointer-events: none; }
.pl-shot-flash { position: absolute; inset: 0; z-index: 30; background: #fff; pointer-events: none; animation: pl-shot-flash .45s ease-out forwards; }
@keyframes pl-shot-flash { from { opacity: .55; } to { opacity: 0; } }
.pl-shot-pill { position: absolute; z-index: 12; left: 20px; bottom: 96px; display: inline-flex; align-items: center; gap: 6px; padding: 5px; border-radius: 14px;
  color: #fff; font-size: 13.5px; font-weight: 700; background: rgba(12, 16, 20, .72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s, bottom .2s; pointer-events: none; }
.pl-shot-pill.open { opacity: 1; transform: none; pointer-events: auto; }
.pl-shot-go { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 9px; border-radius: 10px; border: 0; font: inherit; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; }
.pl-shot-go:hover { background: rgb(var(--accent-rgb) / .2); color: var(--accent); }
.pl-shot-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pl-shot-go kbd { font: inherit; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.pl-shot-q { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(255,255,255,.06); }
.pl-shot-q button { height: 30px; padding: 0 9px; border-radius: 8px; border: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.7); background: none; cursor: pointer; }
.pl-shot-q button:hover { color: #fff; }
.pl-shot-q button.on { color: var(--on-accent); background: var(--accent-fill); }
.mini .pl-shot-pill { opacity: 0; pointer-events: none; }
.pl-stage.idle .pl-shot-pill { bottom: 24px; }
.pl-shot-done { position: absolute; z-index: 31; left: 50%; top: 88px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 13px;
  color: #fff; font-size: 13.5px; font-weight: 700; background: rgba(12, 16, 20, .86); box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(10px);
  opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s, transform .2s; }
.pl-shot-done.open { opacity: 1; transform: translate(-50%, 0); }
.pl-shot-done svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-shot-done button { height: 30px; padding: 0 12px; border-radius: 9px; border: 0; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--on-accent); background: var(--accent-fill); cursor: pointer; }
/* компактно: видна только кнопка [📸 4K], выбор качества выезжает при наведении */
.pl-shot-pill { gap: 0; padding: 3px; border-radius: 12px; }
.pl-shot-go { height: 32px; padding: 0 9px 0 8px; gap: 6px; background: none; font-size: 12.5px; }
.pl-shot-go b { font-weight: 800; color: var(--accent); }
.pl-shot-q { max-width: 0; overflow: hidden; padding: 0; opacity: 0; background: none; transition: max-width .25s ease, opacity .2s, margin .25s; }
.pl-shot-pill:hover .pl-shot-q { max-width: 260px; opacity: 1; margin-left: 4px; }
.pl-shot-q button { height: 28px; padding: 0 8px; }
/* 📸 в панели: значок качества в уголке, меню выбора над кнопкой при наведении */
.pl-shot-wrap { position: relative; display: inline-grid; }
.pl-shot-btn { position: relative; }
.pl-shot-badge { position: absolute; right: 1px; bottom: 3px; padding: 0 3px; border-radius: 4px; font-style: normal; font-size: 8.5px; font-weight: 800; line-height: 12px;
  color: var(--on-accent); background: var(--accent-fill); pointer-events: none; }
.pl-shot-badge[hidden] { display: none; }
.pl-shot-menu { position: absolute; right: -8px; bottom: calc(100% + 10px); width: 250px; padding: 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 9px;
  background: rgba(14, 18, 22, .94); box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .16s, transform .16s; }
.pl-shot-menu::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; } /* мостик, чтобы меню не пропадало по дороге */
.pl-shot-wrap:hover .pl-shot-menu, .pl-shot-menu:hover { opacity: 1; transform: none; pointer-events: auto; }
.pl-shot-menu b { font-size: 13px; font-weight: 800; color: #fff; }
.pl-shot-menu small { font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.55); }
.pl-shot-menu .pl-shot-q { max-width: none; opacity: 1; margin: 0; display: grid; grid-auto-flow: column; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.07); }
.pl-shot-menu .pl-shot-q button { height: 30px; padding: 0 6px; }
.pl-shot-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgb(var(--accent-rgb) / .3); border-top-color: var(--accent); animation: pl-shot-spin .8s linear infinite; }
@keyframes pl-shot-spin { to { transform: rotate(360deg); } }
/* кадр → Telegram */
.pl-shot-tg { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.06); cursor: pointer; }
.pl-shot-tg .s-switch { margin-left: auto; width: 38px; height: 22px; background: rgba(255,255,255,.16); }
.pl-shot-tg .s-switch::after { width: 16px; height: 16px; }
.pl-shot-tg .s-switch:checked { background: var(--accent-fill); }
.pl-shot-tg .s-switch:checked::after { transform: translateX(16px); }
.pl-shot-tg span { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; font-weight: 700; color: #fff; }
.pl-shot-tg small { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5); }
/* плашка кадра: всё в одну строку */
.pl-shot-done { white-space: nowrap; gap: 8px; padding: 6px 6px 6px 12px; }
.pl-shot-done span { margin-right: 4px; }
.pl-shot-done button { flex: none; white-space: nowrap; }
.pl-shot-done button.is-ghost { color: #fff; background: rgba(255,255,255,.12); }
.pl-shot-done button.is-ghost:hover { background: rgba(255,255,255,.2); }
/* ---------- акцентный цвет ---------- */
.s-accents { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.s-acc-sw { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: var(--c); cursor: pointer; position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform .15s; }
.s-acc-sw:hover { transform: scale(1.1); }
.s-acc-sw.is-on { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--c); }
.s-acc-custom { background: conic-gradient(#ff5a5f, #facc15, #34d98a, #22d3ee, #4f8cff, #a78bfa, #f472b6, #ff5a5f); display: grid; place-items: center; }
.s-acc-custom[style] { background: var(--c); }
.s-acc-custom.is-on[style] { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--c); }
.s-acc-custom svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.acc-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .18s; }
.acc-modal.open { opacity: 1; }
.acc-card { width: 560px; max-width: calc(100vw - 32px); padding: 22px; border-radius: 22px; background: var(--bg); color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px var(--divider); display: flex; flex-direction: column; gap: 18px; transform: translateY(8px) scale(.98); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.acc-modal.open .acc-card { transform: none; }
.acc-head b { display: block; font-size: 18px; font-weight: 800; }
.acc-head small { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); }
.acc-body { display: flex; gap: 22px; align-items: center; }
.acc-wheel { position: relative; width: 220px; height: 220px; flex: none; }
.acc-wheel canvas { width: 100%; height: 100%; border-radius: 50%; cursor: crosshair; touch-action: none; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.acc-knob { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); pointer-events: none; }
.acc-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.acc-lbl { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.acc-lbl input[type=range] { accent-color: var(--c); }
.acc-lbl input[type=text] { height: 36px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--divider); background: var(--surface); color: var(--text); font: 700 14px monospace; text-transform: none; }
.acc-prev { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.acc-prev-row { display: flex; align-items: center; gap: 8px; }
.acc-p-btn { height: 34px; padding: 0 14px; border-radius: 10px; border: 0; font: inherit; font-size: 13px; font-weight: 800; color: var(--on-accent); background: var(--accent-fill); }
.acc-p-sw { margin-left: auto; width: 40px; height: 23px; border-radius: 12px; background: var(--accent-fill); position: relative; }
.acc-p-sw i { position: absolute; right: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; }
.acc-p-chip { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.acc-p-chip.is-on { color: var(--on-accent); background: var(--accent-fill); }
.acc-p-link { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent); }
.acc-p-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.acc-p-bar i { display: block; width: 62%; height: 100%; border-radius: 3px; background: var(--accent-fill); }
.acc-p-side { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.acc-p-side i { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; }
.acc-foot { display: flex; align-items: center; gap: 8px; }
.acc-foot span { flex: 1; }
.acc-foot button { height: 38px; padding: 0 16px; border-radius: 11px; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--text); background: var(--surface); cursor: pointer; }
.acc-foot .acc-ok { color: var(--on-accent); background: var(--accent-fill); }
.acc-foot .acc-reset { background: none; color: var(--text-2); padding: 0 6px; }
/* «Радуга» в выборе акцентного цвета */
.s-acc-rainbow { background: conic-gradient(#ff5a5f, #fb923c, #facc15, #34d98a, #22d3ee, #4f8cff, #a78bfa, #f472b6, #ff5a5f); animation: s-rb-spin 4s linear infinite; }
.s-acc-rainbow.is-on { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--accent); }
@keyframes s-rb-spin { to { transform: rotate(360deg); } }
.s-acc-rainbow:hover { animation-duration: 1.5s; }
.s-rb-speed { display: flex; align-items: center; gap: 8px; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.s-rb-speed input { width: 110px; accent-color: var(--accent); }

/* градиенты акцента: вторая строка выбора */
.s-acc-br { flex-basis: 100%; height: 0; }
.s-grad { width: 46px; height: 26px; border-radius: 13px; border: 0; padding: 0; background: var(--g); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform .15s; }
.s-grad:hover { transform: scale(1.08); }
.s-grad.is-on { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--accent); }
/* иконки вместо эмодзи */
.sup-badge svg { width: 14px; height: 14px; vertical-align: -2px; fill: var(--accent); }
.pl-up-ic { width: 14px; height: 14px; flex: none; fill: currentColor; margin-right: 2px; }
.pm-chip { display: inline-flex; align-items: center; gap: 4px; }
.pm-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pp-lock { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.pl-seek-dub { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: 3px; background: rgb(var(--accent-rgb) / .35); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .7); pointer-events: none; }
/* градиент акцента: текст на светлых кнопках «Продолжить» — самим переходом */
/* градиент акцента: «Продолжить» на странице тайтла — залит переходом целиком (как в окне серий), текст и иконки тёмные */
.acc-grad .d-playwrap:not(:has(.d-play.is-off)) { background: var(--accent-fill); box-shadow: none; }
.acc-grad .d-playwrap:not(:has(.d-play.is-off)) .d-play, .acc-grad .d-playwrap:not(:has(.d-play.is-off)) .d-eps-btn { color: var(--on-accent); }
.acc-grad .d-playwrap:not(:has(.d-play.is-off)) .d-eps-btn { box-shadow: inset 1px 0 0 rgba(0,0,0,.14); }
.acc-grad .d-playwrap:not(:has(.d-play.is-off)) .d-play:hover, .acc-grad .d-playwrap:not(:has(.d-play.is-off)) .d-eps-btn:hover { background: rgba(255,255,255,.18); color: var(--on-accent); }
/* градиент акцента: выбранные вкладки, пункты меню, метки — подложка приглушённым переходом, текст переходом (иконки — средним цветом) */
.acc-grad :is(.tab.is-active, .filter-btn.on, .brand-beta, .sch-mine.on, .ep-resume, .ep-dub-item.is-on, .eps-dub.is-on, .acc-p-chip, .acc-p-side, .pfx-support, .pp-return) {
  position: relative; isolation: isolate; box-shadow: none;
  background: var(--accent-text, var(--accent-fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc-grad :is(.side-item.is-active, .tab.is-active, .filter-btn.on, .brand-beta, .sch-mine.on, .ep-resume, .ep-dub-item.is-on, .eps-dub.is-on, .acc-p-chip, .acc-p-side, .pfx-support, .pp-return)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent-fill); opacity: .22; pointer-events: none; }
.acc-grad :is(.side-item.is-active, .tab.is-active, .filter-btn.on, .sch-mine.on, .ep-resume, .ep-dub-item.is-on, .eps-dub.is-on, .acc-p-side, .pfx-support, .pp-return) svg { color: var(--accent); }
.acc-grad .tab.is-active:hover::before { opacity: .24; }
/* только текст: «Поддержать», «▶ N серия» в «Продолжить», ссылки */
/* пункты меню: переход — по самой подписи, а не по всей ширине пункта */
.acc-grad .side-item.is-active { position: relative; isolation: isolate; background: none; color: var(--accent); }
.acc-grad :is(.side-item.is-active, .side-support) .side-text { flex: 0 1 auto; width: fit-content; }
.acc-grad :is(.side-item.is-active .side-text, .side-support .side-text, .side-cont-text small.is-next, .fr-link, .acc-p-link) { background: var(--accent-text, var(--accent-fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc-grad .side-support svg { color: var(--accent); }
/* градиент акцента: плитки серий — рамка и подложка переходом (слои фона: сплошной верх, вуаль, переход под рамкой) */
.acc-grad .ep-tile { border: 2px solid transparent; }
.acc-grad .ep-tile:not(:disabled):hover, .acc-grad .eps-grid .ep-tile:not(:disabled):hover { box-shadow: none;
  background: linear-gradient(color-mix(in srgb, var(--surface-2) 86%, transparent), color-mix(in srgb, var(--surface-2) 86%, transparent)) padding-box, var(--accent-fill) border-box; }
.acc-grad .ep-tile.is-seen, .acc-grad .eps-grid .ep-tile.is-seen {
  background: linear-gradient(color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)) padding-box, var(--accent-fill) padding-box; }
.acc-grad .ep-tile.is-seen::after, .acc-grad .eps-grid .ep-tile.is-seen::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2306231a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat, var(--accent-fill); }
.acc-grad .ep-tile.is-cur, .acc-grad .eps-grid .ep-tile.is-cur { box-shadow: none; color: var(--text);
  background: linear-gradient(0deg, transparent var(--p), var(--surface-2) var(--p)) padding-box,
    linear-gradient(color-mix(in srgb, var(--surface-2) 72%, transparent), color-mix(in srgb, var(--surface-2) 72%, transparent)) padding-box,
    var(--accent-fill) border-box; }
.acc-grad .ep-tile.is-cur { background: linear-gradient(90deg, transparent var(--p), var(--surface-2) var(--p)) padding-box,
    linear-gradient(color-mix(in srgb, var(--surface-2) 72%, transparent), color-mix(in srgb, var(--surface-2) 72%, transparent)) padding-box,
    var(--accent-fill) border-box; }
.acc-grad .eps-grid .ep-tile.is-next { box-shadow: none; color: var(--text);
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(color-mix(in srgb, var(--surface-2) 45%, transparent), color-mix(in srgb, var(--surface-2) 45%, transparent)) border-box, var(--accent-fill) border-box; }
.acc-grad .ep-tile i { background: linear-gradient(90deg, transparent var(--p), color-mix(in srgb, var(--text) 18%, var(--surface-2)) var(--p)), var(--accent-fill); }
.acc-grad .ep-tile.is-dl::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / 10px no-repeat, var(--accent-fill); }
.acc-grad .eps-legend .lg-cur { box-shadow: none; border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--accent-fill) border-box; }
.acc-grad .eps-hero-info > small { width: fit-content; background: var(--accent-text, var(--accent-fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* свой градиент: кнопка «+» в строке и окно редактора */
.s-grad-add { display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--divider); color: var(--text-2); }
.s-grad-add svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.s-grad-add:hover { color: var(--text); }
.grad-card { gap: 16px; }
.gr-strip { height: 54px; border-radius: 14px; background: var(--g); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.gr-stops { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-stop { position: relative; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 6px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); cursor: pointer; }
.gr-stop:hover { box-shadow: inset 0 0 0 1.5px var(--text-2); }
.gr-stop i { width: 30px; height: 30px; border-radius: 9px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.gr-stop input { position: absolute; left: 6px; top: 6px; width: 30px; height: 30px; opacity: 0; cursor: pointer; }
.gr-stop span { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2); }
.gr-del { width: 22px; height: 22px; margin-right: -4px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); }
.gr-del:hover { background: var(--surface-2); color: var(--text); }
.gr-del svg, .gr-add svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.gr-add { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--divider); }
.gr-add:hover { color: var(--text); }
.gr-add svg { width: 16px; height: 16px; }
.gr-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.gr-row span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gr-row b { font-size: 14px; }
.gr-row small { font-size: 12px; color: var(--text-2); }
.gr-tpls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.gr-tpls small { margin-right: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.gr-tpl { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 5px; border-radius: 15px; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.gr-tpl:hover { background: var(--surface-2); }
.gr-tpl i { width: 20px; height: 20px; border-radius: 50%; background: var(--g); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
/* ---------- «Вместе»: страница комнаты ---------- */
.side-badge--live { background: var(--accent-fill); color: var(--on-accent); }
#page-together { max-width: 1180px; }
.tg-hero { position: relative; overflow: hidden; padding: 34px 36px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider);
  background-image: radial-gradient(120% 140% at 100% 0%, rgb(var(--accent-rgb) / .18), transparent 60%); }
.tg-hero h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.tg-hero p { margin: 10px 0 0; max-width: 560px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.tg-steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 22px; padding: 0; list-style: none; }
.tg-steps li { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 6px; border-radius: 12px; font-weight: 700; font-size: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--divider); }
.tg-steps b { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: var(--on-accent); background: var(--accent-fill); }
.tg-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 800; font-size: 15px; color: var(--on-accent); background: var(--accent-fill); transition: filter .15s, transform .18s var(--spring); }
.tg-primary:hover { filter: brightness(1.07); }
.tg-primary:active { transform: scale(.96); }
.tg-primary svg, .tg-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.tg-primary svg path[d^="M7 5v14"] { fill: currentColor; stroke: none; }
.tg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 11px; font-weight: 700; font-size: 13.5px; color: var(--text); background: var(--surface-2); transition: background .15s, transform .18s var(--spring); }
.tg-btn:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--text) 10%); }
.tg-btn:active { transform: scale(.96); }
.tg-btn--ok { color: var(--on-accent); background: var(--accent-fill); }
.tg-btn--ok:hover { background: var(--accent-fill); filter: brightness(1.07); }
.tg-btn.is-done { color: var(--accent); background: var(--accent-soft); }
.tg-btn--wide { width: 100%; margin-top: 10px; }
.tg-sec { margin-top: 22px; }
.tg-sec h3 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tg-rcard { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.tg-rcard + .tg-rcard { margin-top: 8px; }
.tg-rcard > img, .tg-rcard-empty { width: 44px; height: 62px; flex: none; border-radius: 9px; object-fit: cover; background: var(--surface-2); }
.tg-rcard-empty { display: grid; place-items: center; color: var(--muted); }
.tg-rcard-empty svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.tg-rcard > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tg-rcard b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-rcard small { font-size: 13px; color: var(--muted); }
.tg-from { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.tg-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* в комнате: слева — что смотрим, люди, позвать; справа — голос и чат (тёмное стекло, как панели плеера) */
.tg-room { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.tg-now { display: flex; gap: 20px; padding: 18px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider);
  background-image: radial-gradient(120% 140% at 100% 0%, rgb(var(--accent-rgb) / .14), transparent 60%); }
.tg-now > img, .tg-now-ph { width: 128px; height: 182px; flex: none; border-radius: 14px; object-fit: cover; background: var(--surface-2); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.tg-now-ph { display: grid; place-items: center; color: var(--muted); }
.tg-now-ph svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tg-now-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.tg-now-text small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tg-now-text b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.tg-now-text span { font-size: 14px; color: var(--text-2); }
.tg-now-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tg-now--empty .tg-now-ph { box-shadow: inset 0 0 0 1.5px var(--divider); background: transparent; }
.tg-members { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-mem { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.tg-mem span { display: flex; flex-direction: column; gap: 1px; }
.tg-mem b { font-size: 14px; }
.tg-host { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: var(--star); }
.tg-host svg { width: 12px; height: 12px; fill: currentColor; }
.tg-invite { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.tg-inv-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: 12px; }
.tg-inv-row:hover { background: var(--surface); }
.tg-inv-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-switch-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); cursor: pointer; }
.tg-switch-row span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tg-switch-row b { font-size: 14px; }
.tg-switch-row small { font-size: 12.5px; color: var(--muted); }
.tg-switch-row .pc-switch { background: color-mix(in srgb, var(--text) 18%, transparent); }
.tg-switch-row .pc-switch:checked { background: var(--accent-fill); }
.tg-leave { margin-top: 22px; height: 38px; padding: 0 16px; border-radius: 11px; font-weight: 700; font-size: 13.5px; color: #ff7b7f; background: var(--surface); }
.tg-leave:hover { background: color-mix(in srgb, #ff5a5f 12%, var(--surface)); }
.tg-side { position: sticky; top: 12px; display: flex; flex-direction: column; height: min(640px, calc(100vh - 120px)); border-radius: 20px; color: #fff; overflow: hidden;
  background: rgba(16,17,20,.94); box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.07); }
.tg-voice { padding: 10px 12px 0; }
.tg-voice .pc-voice { margin-top: 0; padding-top: 0; border-top: 0; }
.tg-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.07); margin-top: 10px; }
.tg-chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; scrollbar-width: none; }
.tg-chat-form { padding: 8px 12px 12px; }
.tg-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-ptoast--page { position: fixed; left: 50%; bottom: 28px; z-index: 300; transform: translate(-50%, 8px); }
.pl-ptoast--page.open { transform: translate(-50%, 0); }
@media (max-width: 1100px) { .tg-room { grid-template-columns: 1fr; } .tg-side { position: static; height: 520px; } }

/* окно выбора аниме */
.tp-card { width: min(860px, calc(100vw - 48px)); max-height: calc(100vh - 80px); display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 22px; background: var(--bg); color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px var(--divider); transform: translateY(8px) scale(.98); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.mini-ask.open .tp-card { transform: none; }
.tp-head { display: flex; align-items: center; justify-content: space-between; }
.tp-head b { font-size: 20px; font-weight: 800; }
.tp-head .pc-x { color: var(--text-2); }
.tp-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.tp-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.tp-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; }
.tp-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; }
.tp-body { min-height: 200px; overflow-y: auto; scrollbar-width: thin; }
.tp-label { margin: 4px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tp-label:not(:first-child) { margin-top: 18px; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.tp-item { display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--text); }
.tp-poster { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--poster-bg); aspect-ratio: 2 / 3; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .16s, box-shadow .16s; }
.tp-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-item:hover .tp-poster { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--accent), 0 10px 24px rgba(0,0,0,.3); }
.tp-item b { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-item small { font-size: 12px; color: var(--muted); }
.tp-note { margin: 40px 0; text-align: center; color: var(--muted); }
.tp-foot { font-size: 12px; color: var(--muted); text-align: center; }
#together-body { padding-top: 18px; }
.mini-ask-card:has(.tg-ask-btns) { width: 400px; }
.tg-ask-btns { flex-direction: column; }
.tg-ask-btns button { width: 100%; height: 40px; }
/* «Вместе»: кнопки рядом одной высоты, аватарки не растягиваются и не прилипают к краю */
.tg-now-btns .tg-btn { height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14.5px; background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: inset 0 0 0 1px var(--divider); }
.tg-now-btns .tg-btn:hover { background: color-mix(in srgb, var(--text) 13%, transparent); }
.tg-mem { padding: 8px 16px 8px 8px; }
.tg-mem .fr-ava, .tg-inv-row .fr-ava, .tg-from .fr-ava { flex: none; }
/* окно выбора аниме: ровная рамка поиска (целые пиксели) и без прыжков ширины от полосы прокрутки */
.tp-search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.tp-search input, .tp-search input:focus, .tp-search input:focus-visible { outline: none; box-shadow: none; border: 0; }
.tp-body { scrollbar-gutter: stable; }
.tp-head, .tp-search, .tp-foot { flex: none; }
.tp-body { flex: 1 1 auto; min-height: 0; }
/* обводка постера при наведении не обрезается краем прокручиваемого списка */
.tp-body { padding: 6px 8px 6px 6px; margin: 0 -8px 0 -6px; }
.tp-item:hover .tp-poster { transform: translateY(-2px); }
/* ведущий — корона на аватарке вместо подписи */
.tg-mem { gap: 10px; }
.tg-mem-ava { position: relative; display: inline-flex; flex: none; }
.tg-crown { position: absolute; left: 50%; top: -9px; transform: translateX(-50%) rotate(-12deg); width: 18px; height: 18px; display: grid; place-items: center; color: var(--star); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); cursor: help; }
.tg-crown svg { width: 16px; height: 16px; fill: currentColor; }
.tg-mem.is-host .fr-ava { box-shadow: 0 0 0 2px var(--star); }
.tg-members { padding-top: 8px; }
.tg-crown { top: -15px; left: 62%; width: 22px; height: 22px; transform: translateX(-50%) rotate(16deg); }
.tg-crown svg { width: 20px; height: 20px; }
.tg-members { padding-top: 12px; }
.tg-crown { top: -17px; left: 50%; width: 26px; height: 26px; transform: translateX(-50%) rotate(-8deg); }
.tg-crown svg { width: 24px; height: 24px; }
.tg-members { padding-top: 16px; }
/* обводка постера при наведении — внутри по краю картинки (ровная при любом масштабе экрана, ничем не обрезается) */
.tp-item:hover .tp-poster { transform: none; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.tp-poster::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--accent); opacity: 0; transition: opacity .14s; pointer-events: none; }
.tp-item:hover .tp-poster::after, .tp-item:focus-visible .tp-poster::after { opacity: 1; }
/* окно выбора аниме: тонкая полоса прокрутки без стрелок, видна только при наведении (как в остальном приложении) */
.tp-body { scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; transition: scrollbar-color .2s; }
.tp-body:hover { scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
.tp-body::-webkit-scrollbar { width: 6px; }
.tp-body::-webkit-scrollbar-button { display: none; height: 0; }
.tp-body::-webkit-scrollbar-track { background: transparent; }
.tp-body::-webkit-scrollbar-thumb { border-radius: 3px; background: transparent; }
.tp-body:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); }
/* франшиза: под название всегда место на 2 строки — подписи «ТВ · 2017» в ряд на одном уровне */
.fr-name { min-height: 2.6em; }
/* франшиза: пометки ролей, «Только основное», персонажи */
.d-fr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.d-fr-head h3 { margin: 0; }
.fr-main-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); transition: background .14s, color .14s; }
.fr-main-btn:hover { color: var(--text); background: var(--surface-2); }
.fr-main-btn i { position: relative; width: 26px; height: 16px; border-radius: 8px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background .18s; }
.fr-main-btn i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.fr-main-btn.is-on { color: var(--text); }
.fr-main-btn.is-on i { background: var(--accent-fill); }
.fr-main-btn.is-on i::after { transform: translateX(10px); }
.d-fr.only-main .fr-item:not([data-role="main"]):not(.fr-item--current) { display: none; }
.fr-role { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 800; vertical-align: 1px; color: var(--text-2); background: var(--surface-2); }
.fr-role--recap { color: #f5a623; background: rgba(245,166,35,.14); }
.fr-role--spinoff { color: #a78bfa; background: rgba(167,139,250,.15); }
.fr-role--alt { color: #22d3ee; background: rgba(34,211,238,.13); }
.d-chars { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.d-chars::-webkit-scrollbar { display: none; }
.d-char { flex: 0 0 112px; width: 112px; display: flex; flex-direction: column; gap: 6px; }
.d-char-img { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--poster-bg); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.d-char-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-char b { font-size: 13px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-char small { margin-top: -3px; font-size: 11.5px; font-weight: 700; color: var(--accent); }
/* подпись под постером франшизы — в одну строку, с пометкой роли */
.fr-meta { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-meta .fr-role { flex: none; }
/* персонажи: пометка «Главный» на портрете, имя на 2 строки (ровно); у картинок Shikimori бывает белая кромка — чуть обрезаем */
.d-char-img { position: relative; }
.d-char-img img { transform: scale(1.06); }
.d-char b { min-height: 2.6em; }
.d-char-main { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 7px; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--on-accent); background: var(--accent-fill); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.fr-meta-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fr-role { margin-right: 5px; padding: 1px 5px; font-size: 10px; }
/* кнопка «Все» и окна со всей франшизой / всеми персонажами */
.d-fr-tools { display: inline-flex; align-items: center; gap: 8px; }
.d-all-btn { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px 0 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--accent); background: none; transition: background .14s; }
.d-all-btn:hover { background: var(--accent-soft); }
.d-all-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.all-card { width: min(1040px, calc(100vw - 48px)); }
.all-head-r { display: inline-flex; align-items: center; gap: 10px; }
.all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; padding: 4px 2px 10px; }
.all-grid .fr-item { width: auto; flex: none; }
.all-grid.only-main .fr-item:not([data-role="main"]):not(.fr-item--current) { display: none; }
.all-grid--chars { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.all-grid .d-char { width: auto; flex: none; }
/* карточка персонажа */
button.d-char { padding: 0; text-align: left; color: var(--text); cursor: pointer; }
button.d-char:hover .d-char-img { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.d-char-img { transition: transform .16s, box-shadow .16s; }
.ch-card.ch-solo { width: min(820px, calc(100vw - 48px)); }
.ch-back { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0 6px 0 -6px; border-radius: 9px; vertical-align: -6px; color: var(--text-2); }
.ch-back:hover { background: var(--surface); color: var(--text); }
.ch-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ch-top { position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 22px; align-items: center; padding: 18px; border-radius: 20px; background: var(--surface); }
.ch-top-bg { position: absolute; inset: -40px; z-index: -2; background-size: cover; background-position: center 25%; filter: blur(38px) saturate(1.25); opacity: .55; }
.ch-top::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 10%, transparent), color-mix(in srgb, var(--bg) 62%, transparent) 60%); }
.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.ch-chips i { font-style: normal; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-2); background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px); }
.ch-chips i.is-acc { color: var(--accent); background: var(--accent-soft); }
.ch-img { flex: none; width: 150px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--poster-bg); box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.ch-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.ch-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ch-name { font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.ch-jp { font-size: 14px; color: var(--muted); }
.ch-seyu { font-size: 14px; font-weight: 600; color: var(--text-2); }
.ch-seyu small { margin-right: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ch-desc { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.ch-link { color: var(--accent); font-weight: 600; cursor: pointer; }
.ch-link:hover { text-decoration: underline; }
.ch-spoiler { display: inline; }
.ch-spoiler summary { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin: 2px 0; border-radius: 8px; list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--surface-2); }
.ch-spoiler summary::-webkit-details-marker { display: none; }
.ch-spoiler summary::before { content: "Спойлер ·"; margin-right: 5px; color: var(--muted); }
.ch-spoiler[open] summary { background: var(--accent-soft); color: var(--accent); }
.ch-spoiler > div { margin: 6px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.ch-empty { margin: 18px 0 0; color: var(--muted); }
.ch-card .tp-label { margin-top: 22px; }
.ch-animes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 12px; padding-bottom: 6px; }
.ch-anime { display: flex; flex-direction: column; gap: 5px; text-align: left; color: var(--text); padding: 0; }
.ch-anime-p { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--poster-bg); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.ch-anime-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-anime:hover .ch-anime-p::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--accent); }
.ch-anime b { min-height: 2.6em; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-anime small { font-size: 12px; color: var(--muted); }

/* окна «Все» и карточка персонажа — без полосы прокрутки */
.all-modal .tp-body { scrollbar-width: none; }
.all-modal .tp-body::-webkit-scrollbar { display: none; }
.ch-modal .tp-head b { display: inline-flex; align-items: center; }
.ch-modal .ch-back { vertical-align: 0; margin-top: 1px; }

/* плавное появление окон (вход мягче, выход быстрее) */
.mini-ask.tp-modal.open { transition: opacity .3s ease; }
.tp-modal .tp-card { opacity: 0; transform: translateY(16px) scale(.965); transition: transform .18s ease-in, opacity .16s ease-in; }
.tp-modal.open .tp-card { opacity: 1; transform: none; transition: transform .46s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.ch-modal [data-all-inner] > * { animation: ch-in .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes ch-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* плавная обводка при наведении — везде */
.ch-anime-p { transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease; }
.ch-anime-p::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--accent); opacity: 0; transition: opacity .26s ease; pointer-events: none; }
.ch-anime:hover .ch-anime-p { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.ch-anime:hover .ch-anime-p::after { opacity: 1; }
.tp-poster { transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease; }
.tp-poster::after { transition: opacity .26s ease; }
.ep-tile { transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.2,1); }
.fr-item .poster, .card .poster, .d-char-img, .rec-poster, .mt-poster img { transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, outline-color .26s ease; }
.fr-room, .d-all-btn, .tab { transition: background-color .22s ease, box-shadow .22s ease, color .22s ease; }
.eps-grid .ep-tile { transition: transform .24s cubic-bezier(.2,.8,.2,1), background-color .22s ease, box-shadow .22s ease, color .22s ease; }

/* «Об аниме» в плеере */
.pl-info { width: 400px; }
.pl-info .vp-head b .ch-back { color: rgba(255,255,255,.7); margin: 0 2px 0 -8px; }
.pl-info .vp-head b .ch-back svg { width: 18px; height: 18px; color: inherit; }
.pli-note { margin: 14px 0; color: rgba(255,255,255,.55); font-size: 13.5px; }
.pli-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; padding: 8px 0 12px; background: linear-gradient(rgba(16,17,20,.98) 70%, transparent); }
.pli-tab { height: 32px; padding: 0 13px; border-radius: 10px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); transition: background-color .2s ease, color .2s ease; }
.pli-tab:hover { background: rgba(255,255,255,.1); color: #fff; }
.pli-tab.on { color: var(--accent); background: rgb(var(--accent-rgb) / .16); }
.pl-info .vp-label { margin: 4px 0 8px; }
.pli-chars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin-bottom: 14px; }
.pli-char { display: flex; flex-direction: column; gap: 5px; padding: 0; text-align: left; color: #fff; min-width: 0; }
.pli-char .d-char-img { border-radius: 10px; transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease; }
.pli-char:hover .d-char-img { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.pli-char .d-char-main { font-size: 9.5px; padding: 2px 6px; }
.pli-char b { font-size: 11.5px; font-weight: 600; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pli-fr { display: flex; flex-direction: column; gap: 4px; }
.pli-fr-row { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; text-align: left; color: #fff; transition: background-color .2s ease; }
.pli-fr-row:not(:disabled):hover { background: rgba(255,255,255,.07); }
.pli-fr-row.is-cur { background: rgb(var(--accent-rgb) / .12); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .4); cursor: default; }
.pli-fr-p { flex: none; width: 40px; aspect-ratio: 2 / 3; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.06); }
.pli-fr-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pli-fr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pli-fr-t b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pli-fr-t small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.5); }
.pli-fr-row.is-cur small { color: var(--accent); }
.pli-fr-go { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: rgb(var(--accent-rgb) / .14); opacity: 0; transition: opacity .2s ease; }
.pli-fr-go svg { width: 13px; height: 13px; fill: currentColor; }
.pli-fr-row:hover .pli-fr-go { opacity: 1; }
/* карточка персонажа внутри панели — компактнее, цвета плеера */
.pli-card { color: #fff; padding-top: 6px; }
.pli-card .ch-top { flex-direction: row; gap: 14px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.05); }
.pli-card .ch-top::after { background: linear-gradient(90deg, rgba(16,17,20,.1), rgba(16,17,20,.7) 60%); }
.pli-card .ch-img { width: 96px; border-radius: 12px; }
.pli-card .ch-name { font-size: 18px; }
.pli-card .ch-jp, .pli-card .ch-seyu small { color: rgba(255,255,255,.5); }
.pli-card .ch-seyu { font-size: 12.5px; color: rgba(255,255,255,.75); }
.pli-card .ch-chips i { font-size: 11px; color: rgba(255,255,255,.8); background: rgba(0,0,0,.35); }
.pli-card .ch-desc { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.8); }
.pli-card .ch-spoiler summary { color: #fff; background: rgba(255,255,255,.08); }
.pli-card .ch-spoiler summary::before { color: rgba(255,255,255,.5); }
.pli-card .ch-spoiler > div { background: rgba(255,255,255,.05); }
.pli-card .tp-label { margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.pli-card .ch-animes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.pli-card .ch-anime { color: #fff; }
.pli-card .ch-anime b { font-size: 12px; }
.pli-card .ch-anime small { font-size: 11px; color: rgba(255,255,255,.5); }
.pli-card .ch-anime .d-char-main { font-size: 9.5px; padding: 2px 6px; }
.pli-main { margin-left: auto; height: 32px; }
.pli-main { color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); box-shadow: none; }
.pli-main:hover { color: #fff; background: rgba(255,255,255,.1); }
.pli-main:not(.is-on) i { background: rgba(255,255,255,.2); }
.pl-info { width: 420px; }
.pli-tab { white-space: nowrap; padding: 0 11px; }
.pli-main { flex: none; white-space: nowrap; padding: 0 10px 0 8px; }
/* «Об аниме» — слева: кнопка перед названием, панель выезжает слева */
.pl-info-btn { flex: none; margin: -9px -8px 0 -10px; }
.pl-info { left: 16px; right: auto; transform: translateX(-16px); }
.pl-info.open { transform: none; }
/* вкладки «Об аниме» при прокрутке: сплошной фон во всю ширину и мягкий край снизу */
.pli-tabs { margin: 0 -18px; padding: 8px 18px 10px; background: rgb(18,19,22); }
.pli-tabs::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(rgb(18,19,22), rgba(18,19,22,0)); pointer-events: none; }
.pli-card:not(.show-an) .ch-animes { display: none; }
.pli-card.show-an .ch-animes { animation: ch-in .32s cubic-bezier(.16,1,.3,1) both; }
.pli-an-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 42px; margin: 16px 0 10px; padding: 0 12px 0 14px; border-radius: 12px; color: #fff; background: rgba(255,255,255,.06); transition: background-color .2s ease; }
.pli-an-btn:hover { background: rgba(255,255,255,.1); }
.pli-an-btn span { flex: 1; text-align: left; font-size: 13px; font-weight: 700; }
.pli-an-btn b { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.pli-an-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.pli-card.show-an .pli-an-btn svg { transform: rotate(180deg); }
/* без мигания: пока грузится следующий персонаж — прежняя карточка чуть приглушена; панель плеера постоянной высоты */
.ch-modal [data-all-inner].is-loading, .pl-info .vp-body.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.pl-info { height: calc(100% - 172px); }
.pl-stage.chat-docked .pl-info { height: calc(100% - 112px); }
@keyframes ch-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pli-card { animation: ch-in .26s cubic-bezier(.16,1,.3,1) both; }
.pli-fr { padding-top: 4px; }
.pli-tabs::after { opacity: 0; transition: opacity .2s ease; }
.pl-info .vp-body.is-scrolled .pli-tabs::after { opacity: 1; }
/* вкладки «Об аниме» — вне прокрутки: без своего фона, список плавно уходит под край */
.pli-tabbar { flex: none; padding: 8px 18px 8px; }
.pli-tabbar[hidden] { display: none; }
.pli-tabs-in { display: flex; gap: 6px; }
.pl-info .vp-body { padding-top: 4px; }
.pl-info .vp-body.is-scrolled { -webkit-mask-image: linear-gradient(transparent, #000 18px); mask-image: linear-gradient(transparent, #000 18px); }
/* озвучка не запустилась — включили другую: плашка с «Вернуть» */
.pl-fb { position: absolute; left: 50%; top: 76px; z-index: 13; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 40px); padding: 8px 8px 8px 16px; border-radius: 14px;
  color: #fff; font-size: 13.5px; background: rgba(16,17,20,.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 14px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
  opacity: 0; transform: translate(-50%, -8px); pointer-events: none; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.pl-fb.open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pl-fb b { font-weight: 700; }
.pl-fb [data-fb-back] { flex: none; height: 32px; padding: 0 12px; border-radius: 10px; font-weight: 700; color: var(--accent); background: rgb(var(--accent-rgb) / .16); }
.pl-fb [data-fb-back]:hover { background: rgb(var(--accent-rgb) / .26); }
.pl-fb-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: rgba(255,255,255,.6); }
.pl-fb-x:hover { color: #fff; background: rgba(255,255,255,.08); }
.pl-fb-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* пустые состояния со Сэем */
.sei-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; max-width: 420px; margin: 24px auto; padding: 24px 24px 26px; border-radius: 22px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); color: var(--text); animation: sei-in .45s cubic-bezier(.16,1,.3,1) both; }
.sei-empty img { width: 132px; height: 132px; margin-bottom: 2px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.3)); }
.sei-empty b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.sei-empty span { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.sei-empty-row { display: flex; gap: 8px; margin-top: 10px; }
.sei-empty .sei-go { height: 38px; padding: 0 16px; border-radius: 11px; font-size: 13.5px; font-weight: 700; color: var(--on-accent); background: var(--accent-fill); transition: transform .16s var(--spring); }
.sei-empty .sei-go:active { transform: scale(.96); }
@keyframes sei-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.grid-status:has(.sei-empty), #bm-status:has(.sei-empty) { padding: 0; }
.pfx .sei-empty, .pfx-col .sei-empty { margin: 8px 0; max-width: none; }
/* ошибка в плеере — Сэй над текстом */
.pl-status { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pl-status-sei { width: 104px; height: 104px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); }

/* страница аниме: полоска разделов */
.d-secnav { position: sticky; top: 0; z-index: 6; display: flex; gap: 6px; margin: 22px -26px 4px; padding: 10px 26px; background: transparent;
  transition: background-color .2s ease, box-shadow .2s ease; }
.d-secnav.is-stuck { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--divider); }
.d-secnav button { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--text-2); transition: background-color .2s ease, color .2s ease; }
.d-secnav button:hover { color: var(--text); background: var(--surface); }
.d-secnav button.on { color: var(--accent); background: var(--accent-soft); }
.d-secnav button small { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.d-secnav + .d-block { margin-top: 10px; }
.pl-status:not([hidden]) { width: fit-content; padding: 20px 26px 22px; border-radius: 20px; background: rgba(16,17,20,.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); }
/* без «пустой карточки»: Сэй и текст прямо на фоне */
.sei-empty { background: none; box-shadow: none; padding: 36px 24px 30px; max-width: 460px; }
.sei-empty img { width: 150px; height: 150px; }
.dl-list:has(> .sei-empty) { max-width: none; min-height: calc(100vh - 260px); justify-content: center; }
#bm-status:has(.sei-empty), .grid-status:has(.sei-empty) { min-height: calc(100vh - 300px); display: flex; align-items: center; justify-content: center; }
.sei-empty img { transform: translateX(9%); } /* котик на стикере левее центра (справа — сердечко/zZ) — выравниваем по самому котику */
/* сдвиг по каждому стикеру: котик на картинке левее центра (справа — сердечко, zZ, лупа) — выравниваем по самому котику */
.sei-empty img[src$="/search.webp"] { transform: translateX(15.4%); }
.sei-empty img[src$="/sad.webp"] { transform: translateX(15.1%); }
.sei-empty img[src$="/shock.webp"] { transform: translateX(14.0%); }
.sei-empty img[src$="/popcorn.webp"] { transform: translateX(17.5%); }
.sei-empty img[src$="/sleep.webp"] { transform: translateX(12.4%); }
.sei-empty img[src$="/point.webp"] { transform: translateX(13.6%); }
.pl-stage:has(#pl-status:not([hidden])) .pl-bigplay { display: none; } /* ошибка — «Play» не прячется под карточкой: при ошибке она бесполезна */
/* полоска разделов — плавающая «пилюля» по ширине кнопок, а не полоса во всю ширину (у той был виден край) */
.d-secnav { top: 10px; width: max-content; margin: 22px 0 4px; padding: 6px; border-radius: 14px; }
.d-secnav.is-stuck { background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px var(--divider); }
.d-secnav.is-stuck { background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
/* навигация по разделам — вертикальная, у правого края окна */
.d-secnav, .d-secnav.is-stuck { position: fixed; top: 50%; right: 14px; left: auto; width: auto; z-index: 40; flex-direction: column; gap: 2px; margin: 0; padding: 6px;
  border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 12px 34px rgba(0,0,0,.35), inset 0 0 0 1px var(--divider);
  opacity: 0; transform: translate(12px, -50%); pointer-events: none; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.d-secnav.is-shown { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.d-secnav button { position: relative; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 9px; background: none; }
.d-secnav button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.d-secnav button i { width: 7px; height: 7px; border-radius: 4px; background: var(--muted); transition: height .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease; }
.d-secnav button.on { background: none; }
.d-secnav button.on i { height: 18px; background: var(--accent); }
.d-secnav button span { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); white-space: nowrap; padding: 6px 11px; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px var(--divider);
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.d-secnav button:hover span { opacity: 1; transform: translate(0, -50%); }
.d-secnav button.on span { color: var(--accent); }
.d-secnav button span small { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.d-secnav:hover button span { opacity: 1; transform: translate(0, -50%); } /* навёл на столбик — видны все подписи сразу */
#page-detail:has(.d-hero) { padding-right: 44px; } /* постоянное поле под вертикальную навигацию — ничего не закрывает и не прыгает */
.d-secnav, .d-secnav.is-stuck { right: 10px; }
.d-secnav button span { width: 148px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; text-align: left; } /* все подписи одной ширины */
.d-secnav, .d-secnav.is-stuck { right: 22px; } /* отступ от полосы прокрутки */
#page-detail:has(.d-hero) { padding-right: 56px; }

/* главная каталога: баннер «Популярное на этой неделе» */
#home-top[hidden], #home-hero[hidden], #home-cont[hidden] { display: none; }
.ht { position: relative; height: 340px; margin: 22px 0 26px; border-radius: 22px; overflow: hidden; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); cursor: pointer; }
.ht-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.ht-slide.on { opacity: 1; pointer-events: auto; }
.ht-bg { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); object-fit: cover; z-index: -2; transform: scale(1.02); transition: transform 7s linear; }
.ht-slide.on .ht-bg { transform: scale(1.07); } /* лёгкий наезд камеры, пока слайд показан */
.ht-slide::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(12,13,16,.86) 0%, rgba(12,13,16,.55) 34%, rgba(12,13,16,.12) 58%, rgba(12,13,16,0) 72%), linear-gradient(0deg, rgba(12,13,16,.45), transparent 38%); }
.ht-in { position: absolute; left: 36px; bottom: 34px; max-width: 470px; display: flex; flex-direction: column; gap: 12px; color: #fff; }
.ht-slide.on .ht-in > * { animation: ht-in .6s cubic-bezier(.16,1,.3,1) both; }
.ht-slide.on .ht-in > *:nth-child(2) { animation-delay: .05s; }
.ht-slide.on .ht-in > *:nth-child(3) { animation-delay: .1s; }
.ht-slide.on .ht-in > *:nth-child(4) { animation-delay: .15s; }
.ht-slide.on .ht-in > *:nth-child(5) { animation-delay: .2s; }
@keyframes ht-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ht-tag { align-self: flex-start; height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--accent); background: rgb(var(--accent-rgb) / .16); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ht h2 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,0,.35); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ht-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.78); }
.ht-meta b { color: var(--star); }
.ht p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.74); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ht-btns { display: flex; gap: 10px; margin-top: 4px; }
.ht-btns button { height: 44px; padding: 0 20px; border-radius: 12px; font-size: 14.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; transition: transform .16s var(--spring), background-color .2s ease; }
.ht-btns button:active { transform: scale(.96); }
.ht-go { color: var(--on-accent); background: var(--accent-fill); }
.ht-go:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.ht-go svg { width: 16px; height: 16px; fill: currentColor; }
.ht-more { color: #fff; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ht-more:hover { background: rgba(255,255,255,.2); }
.ht-thumbs { position: absolute; right: 26px; top: 26px; z-index: 2; display: flex; gap: 8px; }
.ht-thumbs button { width: 54px; aspect-ratio: 2/3; padding: 0; border-radius: 9px; overflow: hidden; opacity: .55; box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.ht-thumbs button:hover { opacity: .9; transform: translateY(-2px); }
.ht-thumbs button.on { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(0,0,0,.4); }
.ht-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ht-dots { position: absolute; right: 26px; bottom: 26px; z-index: 2; display: flex; gap: 6px; pointer-events: none; }
.ht-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.4); transition: width .3s cubic-bezier(.2,.8,.2,1), background-color .3s ease; }
.ht-dots i.on { width: 22px; background: #fff; }

/* «Продолжить» с кадром */
.ht-h { margin: 0 0 12px; font-size: 19px; font-weight: 800; }
.hc-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.hc { display: flex; flex-direction: column; gap: 8px; padding: 0; text-align: left; color: var(--text); min-width: 0; }
.hc-f { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: var(--poster-bg); box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease; }
.hc:hover .hc-f { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.hc-f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 45%); }
.hc-play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; background: rgba(14,17,21,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: scale(.9); transition: opacity .22s ease, transform .22s var(--spring); }
.hc:hover .hc-play { opacity: 1; transform: none; }
.hc-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.hc-ep { position: absolute; left: 10px; bottom: 12px; z-index: 1; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; }
.hc-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 4px; background: rgba(255,255,255,.18); }
.hc-bar i { display: block; height: 100%; background: var(--accent-fill); }
.hc b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc small { margin-top: -5px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 1100px) {
  .hc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hc-row .hc:nth-child(4) { display: none; }
  .ht { height: 300px; }
  .ht h2 { font-size: 32px; }
}
/* плашка на баннере — всегда белый текст на тёмном стекле (кадр тёмный в любой теме), акцент — точкой */
.ht-tag { gap: 7px; color: #fff; background: rgba(14,17,21,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.ht-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .25); }

/* плеер: одна боковая панель — столбик вкладок + окно одной ширины на всю высоту */
.pl-rail { position: absolute; right: 392px; top: 76px; bottom: 96px; z-index: 13; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0;
  border-radius: 18px 0 0 18px; background: rgba(12,13,16,.94); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.07);
  opacity: 0; transform: translateX(16px); pointer-events: none; transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
.pl-rail.open { opacity: 1; transform: none; pointer-events: auto; }
.pl-rail button { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: rgba(255,255,255,.6); transition: background-color .2s ease, color .2s ease; }
.pl-rail button:hover { color: #fff; background: rgba(255,255,255,.08); }
.pl-rail button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-rail button.on { color: var(--accent); background: rgb(var(--accent-rgb) / .16); }
.pl-rail button.on::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--accent); }
.pl-vset.pl-docked { left: auto; right: 16px; top: 76px; bottom: 96px; height: auto; max-height: none; width: 376px; border-radius: 0 18px 18px 0; transform: translateX(16px); background: rgba(16,17,20,.94); }
.pl-vset.pl-docked.open { transform: none; }
.pl-docked .vp-head b svg, .pl-docked .vp-head .pc-x, .pl-docked [data-pli-close] { display: none; }
.pl-docked-out { transition: none !important; } /* соседняя вкладка исчезает сразу — без «двух окон» на миг */
.pl-stage.chat-docked .pl-rail, .pl-stage.chat-docked .pl-vset.pl-docked { top: 16px; bottom: 96px; }
.pl-stage.idle .pl-rail.open { opacity: 1; }
/* панель — слева и единым целым: общий фон у столбика, окна вкладок прозрачные поверх; при переключении меняется только содержимое */
.pl-rail { left: 16px; right: auto; width: 432px; align-items: flex-start; padding: 10px 8px; border-radius: 18px;
  background: rgba(14,15,18,.94); box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07);
  transform: translateX(-14px) scale(.985); transform-origin: left center; transition: opacity .28s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.pl-rail::after { content: ""; position: absolute; left: 56px; top: 12px; bottom: 12px; width: 1px; background: rgba(255,255,255,.07); }
.pl-rail.open { transform: none; }
.pl-rail button.on::before { left: -8px; }
.pl-vset.pl-docked { left: 72px; right: auto; z-index: 14; width: 376px; border-radius: 0 18px 18px 0;
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: none; opacity: 0; transition: opacity .26s ease .04s; }
.pl-vset.pl-docked.open { opacity: 1; transform: none; }
.pl-vset.pl-docked .vp-body { animation: dock-in .34s cubic-bezier(.16,1,.3,1) both; }
@keyframes dock-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pl-stage.chat-docked .pl-rail { top: 16px; }
/* «Об аниме»: вкладки в строку, «Основное» — своей строкой под ними (в одну не помещается) */
.pli-tabs-in { flex-wrap: wrap; }
.pli-tabs-in .pli-main { order: 3; flex-basis: 100%; margin: 4px 0 0; justify-content: flex-start; background: none; padding: 0 2px; height: 28px; color: rgba(255,255,255,.65); }
.pli-tabs-in .pli-main:hover { background: none; color: #fff; }
.pl-docked .vp-head b .ch-back svg { display: block; } /* «назад» в карточке персонажа — видна (прятали только иконку вкладки) */
.pl-docked .vp-head b .ch-back { width: 30px; height: 30px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); }
.pl-docked .vp-head b .ch-back:hover { color: #fff; background: rgba(255,255,255,.14); }
.pli-skel { display: block; height: 12px; margin: 8px 0; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 75%); background-size: 200% 100%; animation: pliSh 1.2s linear infinite; }
.pli-skel.short { width: 60%; }
@keyframes pliSh { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pl-docked .vp-head b .ch-back { background: none; margin-left: -8px; } /* без подложки — просто стрелка */
.pl-docked .vp-head b .ch-back:hover { background: rgba(255,255,255,.08); }

/* «перелёт» постера на страницу аниме */
.poster-flight { position: fixed; z-index: 500; object-fit: cover; pointer-events: none; box-shadow: 0 18px 50px rgba(0,0,0,.45); will-change: left, top, width, height; }
.poster-flight.fly { transition: left .52s cubic-bezier(.2,.85,.25,1), top .52s cubic-bezier(.2,.85,.25,1), width .52s cubic-bezier(.2,.85,.25,1), height .52s cubic-bezier(.2,.85,.25,1), border-radius .52s ease, box-shadow .52s ease; }
.poster-flight.landed { box-shadow: 0 12px 34px rgba(0,0,0,.34); }
.poster-flight.out { opacity: 0; transition: opacity .25s ease; }
.poster-flight { aspect-ratio: auto; }
body.poster-flying #detail-body .d-poster-col > .sk, body.poster-flying #detail-body .d-poster { opacity: 0; }
#detail-body .d-poster { transition: opacity .2s ease; }
body.poster-flying #detail-body .d-poster-col > .sk, body.poster-flying #detail-body .d-poster { opacity: 0; }
#detail-body .d-poster { transition: opacity .2s ease; }

/* ---------- праздничное оформление ---------- */
.ss-layer { position: fixed; inset: 0; z-index: 58; pointer-events: none; overflow: hidden; }
:root[data-season="halloween"] body::before, :root[data-season="winter"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
:root[data-season="halloween"] body::before { background-color: var(--bg); background-size: auto; background-image: radial-gradient(60% 45% at 85% -10%, rgba(255,120,30,.16), transparent 70%), radial-gradient(50% 50% at 10% 110%, rgba(140,70,220,.18), transparent 70%); }
:root[data-season="winter"] body::before { background-color: var(--bg); background-size: auto; background-image: radial-gradient(70% 50% at 50% -15%, rgba(120,190,255,.16), transparent 70%); }
.ss-mark { display: inline-block; width: 17px; height: 17px; margin: 0 6px 0 -2px; vertical-align: -3px; }
.ht-tag::before { transition: background-color .3s ease; }
:root[data-season="halloween"] .ht-tag::before { background: #ff8a1f; box-shadow: 0 0 10px #ff8a1f; }
:root[data-season="winter"] .ht-tag::before { background: #9fd8ff; box-shadow: 0 0 10px #9fd8ff; }
/* летучие мыши: медленно перелетают и чуть покачиваются */
.ss-bat { position: absolute; filter: drop-shadow(0 0 6px rgba(255,138,31,.35)); animation: ss-bat 18s ease-in-out infinite; }
@keyframes ss-bat { 0% { transform: translate(0, 0) rotate(-8deg); } 25% { transform: translate(-90px, 18px) rotate(6deg) scaleY(.8); } 50% { transform: translate(-40px, -14px) rotate(-4deg); } 75% { transform: translate(60px, 10px) rotate(8deg) scaleY(.8); } 100% { transform: translate(0, 0) rotate(-8deg); } }
.ss-web { position: absolute; right: 0; top: 56px; width: 120px; height: 120px; opacity: .2; }
/* зима */
.ss-snow { position: absolute; inset: 0; }
.ss-lights { position: absolute; left: 0; right: 0; top: 52px; height: 24px; }
.ss-lights i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px 2px var(--c); animation: ss-twinkle 3s ease-in-out infinite; }
@keyframes ss-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ht-cap { position: absolute; left: -4px; right: -4px; top: -10px; height: 26px; z-index: 5; pointer-events: none; }
:root[data-season="winter"] .ht { overflow: visible; -webkit-mask-image: none; }
:root[data-season="winter"] .ht-slide { border-radius: 22px; overflow: hidden; }
/* Сэй в шапке с облачком */
.ss-sei { position: fixed; right: 26px; bottom: 18px; z-index: 60; width: 150px; height: 150px; padding: 0; filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); animation: ss-in .6s cubic-bezier(.34,1.56,.64,1) both; cursor: pointer; }
.ss-sei img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-hat { position: absolute; overflow: visible; }
.ss-bubble { position: fixed; right: 172px; bottom: 120px; z-index: 60; display: flex; align-items: flex-start; gap: 6px; max-width: 240px; padding: 10px 8px 10px 13px; border-radius: 14px 14px 4px 14px; font-size: 13px; font-weight: 700; line-height: 1.35; color: #fff;
  background: rgba(16,17,20,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.1); animation: ss-in .5s .25s cubic-bezier(.16,1,.3,1) both; }
.ss-bubble button { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: rgba(255,255,255,.55); }
.ss-bubble button:hover { color: #fff; background: rgba(255,255,255,.1); }
.ss-bubble button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ss-sei.out, .ss-bubble.out { opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; animation: none; }
@keyframes ss-in { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
body:has(#player:not([hidden])) .ss-sei, body:has(#player:not([hidden])) .ss-bubble { display: none; } /* в плеере Сэй не мешает */
.ss-mark { margin: 0 8px 0 6px; }
.ss-bat path { fill: #3a2350; stroke: rgba(255,170,90,.8); stroke-width: 1; }
.ss-bat { filter: drop-shadow(0 0 8px rgba(255,138,31,.55)); }
/* зима: шапка — на всю ширину баннера, с тенью; гирлянда — лампочки со свечением */
.ht-cap { left: -6px; right: auto; width: calc(100% + 12px); top: -14px; height: 34px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.ss-lights { top: 50px; height: 56px; overflow: visible; }
.ss-lights i { display: none; }
.ss-bulb { animation: ss-glow 2.6s ease-in-out infinite; }
.ss-bulb .ss-glow { filter: url(#ss-blur); opacity: .55; }
@keyframes ss-glow { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 55% { opacity: .5; } }
.ss-bulb path { filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 10px var(--c)); }
.ss-lights { top: 55px; right: 0; height: 40px; }
.ht-cap { top: -7px; height: 20px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.22)); opacity: .96; }
.ss-bulb .ss-glow { opacity: .45; }
/* зима: вместо снежной шапки — иней по верхнему краю кадра (внутри баннера, а не поверх) */
.ht-cap { display: none; }
:root[data-season="winter"] .ht { overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
:root[data-season="winter"] .ht::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(1.4px 1.4px at 12% 14%, rgba(255,255,255,.8), transparent), radial-gradient(1.2px 1.2px at 27% 7%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.6px 1.6px at 44% 11%, rgba(255,255,255,.75), transparent), radial-gradient(1.2px 1.2px at 61% 6%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.75), transparent), radial-gradient(1.2px 1.2px at 91% 8%, rgba(255,255,255,.7), transparent),
    linear-gradient(180deg, rgba(220,238,255,.30), rgba(220,238,255,.08) 16%, transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 10px 24px -12px rgba(200,230,255,.55); }
/* зима: шары, морозные узоры, сугроб */
.ss-ball { position: absolute; top: 55px; width: 2px; transform-origin: top center; animation: ss-sway 5s ease-in-out infinite; }
.ss-ball i { display: block; width: 1px; height: var(--len); margin: 0 auto; background: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.45)); }
.ss-ball b { position: absolute; left: 50%; top: var(--len); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin-left: calc(var(--r) * -1); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), transparent 28%), radial-gradient(circle at 50% 50%, var(--c), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.ss-ball b::before { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 4px; margin-left: -3px; border-radius: 1px; background: #c9ced6; }
@keyframes ss-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.ss-frost { position: absolute; width: 190px; height: 190px; opacity: .16; filter: drop-shadow(0 0 3px rgba(200,230,255,.6)); }
.ss-frost-bl { left: 232px; bottom: 0; transform: rotate(-90deg); }
.ss-frost-tr { right: 0; top: 56px; transform: rotate(90deg); opacity: .12; }
.ss-drift { position: fixed; left: 0; right: 0; bottom: -18px; height: 70px; z-index: -1; opacity: .5;
  background: radial-gradient(60px 26px at 8% 70%, #eaf4ff, transparent), radial-gradient(90px 30px at 24% 80%, #eaf4ff, transparent), radial-gradient(70px 24px at 41% 74%, #eaf4ff, transparent),
    radial-gradient(110px 32px at 60% 82%, #eaf4ff, transparent), radial-gradient(80px 26px at 78% 74%, #eaf4ff, transparent), radial-gradient(100px 30px at 95% 80%, #eaf4ff, transparent); filter: blur(6px); }
.ss-layer:has(.ss-drift) { z-index: 58; }
/* зима: снег лежит на верхнем крае кадра — мягкими сугробиками внутри баннера, без резких краёв */
:root[data-season="winter"] .ht::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 4; pointer-events: none;
  background:
    radial-gradient(38px 11px at 4% 0, #f6faff 60%, transparent 62%), radial-gradient(60px 14px at 13% 0, #f6faff 60%, transparent 62%), radial-gradient(44px 10px at 22% 0, #f6faff 60%, transparent 62%),
    radial-gradient(70px 15px at 32% 0, #f6faff 60%, transparent 62%), radial-gradient(40px 10px at 41% 0, #f6faff 60%, transparent 62%), radial-gradient(64px 13px at 50% 0, #f6faff 60%, transparent 62%),
    radial-gradient(46px 11px at 59% 0, #f6faff 60%, transparent 62%), radial-gradient(72px 15px at 69% 0, #f6faff 60%, transparent 62%), radial-gradient(40px 10px at 78% 0, #f6faff 60%, transparent 62%),
    radial-gradient(62px 14px at 87% 0, #f6faff 60%, transparent 62%), radial-gradient(44px 11px at 96% 0, #f6faff 60%, transparent 62%),
    linear-gradient(#f6faff 3px, transparent 3px);
  filter: blur(.6px) drop-shadow(0 2px 3px rgba(20,40,70,.35)); }
/* шары — в поле у правого края, не на постерах */
.ss-ball { top: 55px; }
/* снег на крае баннера — сплошным слоем: плотная полоса + сливающиеся бугорки */
:root[data-season="winter"] .ht::before { height: 18px;
  background:
    radial-gradient(70px 12px at 3% 2px, #eef5ff 70%, transparent 72%), radial-gradient(90px 13px at 11% 2px, #eef5ff 70%, transparent 72%), radial-gradient(80px 11px at 19% 2px, #eef5ff 70%, transparent 72%),
    radial-gradient(100px 14px at 28% 2px, #eef5ff 70%, transparent 72%), radial-gradient(80px 12px at 37% 2px, #eef5ff 70%, transparent 72%), radial-gradient(95px 13px at 46% 2px, #eef5ff 70%, transparent 72%),
    radial-gradient(85px 12px at 55% 2px, #eef5ff 70%, transparent 72%), radial-gradient(100px 14px at 64% 2px, #eef5ff 70%, transparent 72%), radial-gradient(80px 11px at 73% 2px, #eef5ff 70%, transparent 72%),
    radial-gradient(95px 13px at 82% 2px, #eef5ff 70%, transparent 72%), radial-gradient(85px 12px at 91% 2px, #eef5ff 70%, transparent 72%), radial-gradient(80px 12px at 99% 2px, #eef5ff 70%, transparent 72%),
    linear-gradient(#eef5ff 6px, transparent 6px);
  filter: blur(.8px) drop-shadow(0 2px 3px rgba(20,40,70,.4)); }
/* меню: морозный узор в нижнем углу и сугроб под «Поддержать» */
.ss-frost-bl { left: 0; bottom: 0; transform: rotate(-90deg); opacity: .22; }
.ss-side-drift { position: absolute; left: -10px; bottom: -14px; width: 250px; height: 60px; opacity: .35; filter: blur(5px);
  background: radial-gradient(80px 26px at 22% 70%, #eaf4ff, transparent), radial-gradient(100px 30px at 62% 78%, #eaf4ff, transparent), radial-gradient(60px 22px at 92% 74%, #eaf4ff, transparent); }
.ss-lights { top: 54px; }
:root[data-holiday="newyear"] .side-nav { padding-top: 14px; } /* место под гирлянду — она не задевает «АНИМЕ» */
/* Хэллоуин: пауки, привидения, тыквы-фонари, туман */

.ss-spider { position: absolute; top: 55px; width: 22px; animation: ss-drop 7s ease-in-out infinite; }
.ss-spider i { display: block; width: 1px; height: var(--len); margin: 0 auto; background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.4)); transform-origin: top; animation: ss-thread 7s ease-in-out infinite; animation-delay: inherit; }
.ss-spider svg { display: block; width: 22px; margin-top: -2px; filter: drop-shadow(0 0 6px rgba(176,107,255,.5)); }
@keyframes ss-drop { 0%, 100% { transform: translateY(-40px); } 50% { transform: translateY(0); } }
@keyframes ss-thread { 0%, 100% { transform: scaleY(.7); } 50% { transform: scaleY(1); } }
.ss-ghost { position: absolute; left: -60px; opacity: .2; filter: drop-shadow(0 0 12px rgba(220,200,255,.6)); animation: ss-ghost 46s linear infinite; }
@keyframes ss-ghost { 0% { transform: translate(0, 0); } 25% { transform: translate(28vw, -24px); } 50% { transform: translate(56vw, 10px); } 75% { transform: translate(84vw, -18px); } 100% { transform: translate(115vw, 0); } }
.ss-pumpkins { position: absolute; right: 190px; bottom: 6px; display: flex; align-items: flex-end; gap: 4px; }
.ss-pumpkins-side { right: auto; left: 150px; bottom: 132px; }
.ss-jack { filter: drop-shadow(0 0 10px rgba(255,140,40,.55)); animation: ss-jack 3.4s ease-in-out infinite; }
.ss-flame { animation: ss-flicker 1.6s steps(1) infinite; }
@keyframes ss-flicker { 0%, 100% { opacity: 1; } 20% { opacity: .75; } 40% { opacity: .95; } 60% { opacity: .7; } 80% { opacity: .9; } }
@keyframes ss-jack { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255,140,40,.45)); } 50% { filter: drop-shadow(0 0 16px rgba(255,160,60,.75)); } }
.ss-fog { position: absolute; left: 0; right: 0; bottom: -10px; height: 110px; opacity: .45; filter: blur(14px);
  background: radial-gradient(160px 40px at 12% 70%, rgba(150,90,220,.55), transparent), radial-gradient(220px 46px at 40% 80%, rgba(120,70,200,.45), transparent),
    radial-gradient(180px 40px at 68% 72%, rgba(150,90,220,.5), transparent), radial-gradient(220px 46px at 92% 80%, rgba(120,70,200,.45), transparent); animation: ss-fog 14s ease-in-out infinite alternate; }
@keyframes ss-fog { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
.ss-web-l { right: auto; left: 0; top: auto; bottom: 0; transform: rotate(180deg) scaleX(-1); opacity: .16; }
.ss-pumpkins-side { left: 158px; bottom: 58px; }
/* Хэллоуин: слизь по краю панели и тыквы-фонарики на нитке */
.ss-slime { position: absolute; left: 0; right: 0; top: 56px; height: 60px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.ss-slime svg { display: block; }
.ss-drip { animation: ss-drip 6s ease-in infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ss-drip { 0%, 55% { transform: translateY(0) scale(.6); opacity: 0; } 62% { opacity: 1; transform: translateY(0) scale(1); } 100% { transform: translateY(46px) scale(.8); opacity: 0; } }
:root[data-season="halloween"] .ss-lights { top: 58px; }
.ss-pbulb .ss-glow { opacity: .4; }
:root[data-season="halloween"] .side-nav { padding-top: 16px; }
/* Хэллоуин: глаза в темноте */
:root[data-season="halloween"] .side-nav { padding-top: 0; }
.ss-eye { position: absolute; display: flex; gap: calc(9px * var(--s)); transform: translate(-50%, -50%); animation: ss-eye 4.2s ease both; }
.ss-eye i { width: calc(9px * var(--s)); height: calc(6px * var(--s)); border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 55%, #fff 0 18%, var(--c) 32%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  box-shadow: 0 0 8px 2px var(--c), 0 0 22px 4px color-mix(in srgb, var(--c) 45%, transparent); transform-origin: center; animation: ss-blink 4.2s ease both; }
.ss-eye i:last-child { transform: rotate(8deg); }
.ss-eye i:first-child { transform: rotate(-8deg); }
@keyframes ss-eye { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ss-blink { 0%, 8% { scale: 1 .05; } 16% { scale: 1 1; } 40% { scale: 1 1; } 44% { scale: 1 .05; } 48% { scale: 1 1; } 62% { scale: 1 1; } 65% { scale: 1 .05; } 68% { scale: 1 1; } 88% { scale: 1 1; } 100% { scale: 1 .05; } }

/* осень и весна: тёплое или розовое свечение, ветка в углу, листья или лепестки у нижнего края, бабочка весной */
:root[data-season="autumn"] body::before, :root[data-season="spring"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
:root[data-season="autumn"] body::before { background-color: var(--bg); background-size: auto; background-image: radial-gradient(60% 45% at 80% -10%, rgba(240,140,50,.16), transparent 70%), radial-gradient(50% 45% at 5% 110%, rgba(200,70,40,.14), transparent 70%); }
:root[data-season="spring"] body::before { background-color: var(--bg); background-size: auto; background-image: radial-gradient(60% 45% at 80% -10%, rgba(255,150,200,.16), transparent 70%), radial-gradient(50% 45% at 5% 110%, rgba(150,220,140,.10), transparent 70%); }
:root[data-season="autumn"] .ht-tag::before { background: #f2a03a; box-shadow: 0 0 10px #f2a03a; }
:root[data-season="spring"] .ht-tag::before { background: #ff9ec4; box-shadow: 0 0 10px #ff9ec4; }
.ss-branch { position: absolute; width: 260px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.ss-branch-tr { right: -6px; top: 52px; animation: ss-branch 8s ease-in-out infinite; transform-origin: right top; }
@keyframes ss-branch { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }
.ss-pile { position: absolute; left: 232px; right: 0; bottom: -6px; height: 34px; opacity: .55; filter: blur(.4px); }
:root[data-season="autumn"] .ss-pile { background:
  radial-gradient(9px 5px at 4% 70%, #e8662a 90%, transparent), radial-gradient(8px 5px at 7% 80%, #f2b33d 90%, transparent), radial-gradient(9px 5px at 11% 74%, #c9472a 90%, transparent),
  radial-gradient(8px 5px at 52% 78%, #e8932a 90%, transparent), radial-gradient(9px 5px at 55% 70%, #c9472a 90%, transparent), radial-gradient(8px 5px at 58% 80%, #f2b33d 90%, transparent),
  radial-gradient(9px 5px at 88% 74%, #e8662a 90%, transparent), radial-gradient(8px 5px at 91% 80%, #f2b33d 90%, transparent), radial-gradient(9px 5px at 95% 72%, #b5532a 90%, transparent); }
:root[data-season="spring"] .ss-pile { background:
  radial-gradient(6px 3px at 5% 74%, #ffc6dc 90%, transparent), radial-gradient(5px 3px at 8% 80%, #ffb0cf 90%, transparent), radial-gradient(6px 3px at 13% 72%, #ffc6dc 90%, transparent),
  radial-gradient(6px 3px at 50% 78%, #ffb0cf 90%, transparent), radial-gradient(5px 3px at 54% 72%, #ffc6dc 90%, transparent),
  radial-gradient(6px 3px at 86% 76%, #ffc6dc 90%, transparent), radial-gradient(5px 3px at 90% 80%, #ffb0cf 90%, transparent), radial-gradient(6px 3px at 95% 72%, #ffc6dc 90%, transparent); }
.ss-fly { position: absolute; width: 28px; left: 0; top: 40%; animation: ss-fly 38s linear infinite; filter: drop-shadow(0 2px 6px rgba(255,150,200,.5)); }
.ss-wing { transform-origin: 15px 12px; animation: ss-wing .35s ease-in-out infinite alternate; }
@keyframes ss-wing { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes ss-fly { 0% { transform: translate(-40px, 0); } 20% { transform: translate(20vw, -60px); } 40% { transform: translate(42vw, 30px); } 60% { transform: translate(64vw, -40px); } 80% { transform: translate(86vw, 20px); } 100% { transform: translate(110vw, -20px); } }
.ss-branch-tr { top: auto; bottom: 120px; right: -10px; width: 200px; transform-origin: right center; } /* в поле справа — не на мини-постерах баннера */

/* лето: солнечные блики сверху, светлячки (canvas), зелёная ветка */
:root[data-season="summer"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg); background-size: auto; background-image: radial-gradient(55% 45% at 88% -12%, rgba(255,205,80,.20), transparent 70%), radial-gradient(45% 40% at 0% 110%, rgba(40,200,180,.12), transparent 70%); }
:root[data-season="summer"] .ht-tag::before { background: #ffd25a; box-shadow: 0 0 10px #ffd25a; }
.ss-sun { position: absolute; right: 8%; top: 40px; width: 300px; height: 300px; pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,215,110,.16) 10% 12%, transparent 14% 30%, rgba(255,215,110,.12) 32% 33%, transparent 35% 55%, rgba(255,215,110,.14) 57% 59%, transparent 61% 80%, rgba(255,215,110,.12) 82% 83%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 70%); mask-image: radial-gradient(circle, #000 0, transparent 70%); animation: ss-sun 60s linear infinite; }
@keyframes ss-sun { to { transform: rotate(360deg); } }

/* весна: несколько бабочек, луг с цветами, радуга, тюльпаны в меню */
.ss-fly { left: 0; }
.ss-meadow { position: absolute; left: 232px; right: 0; bottom: 0; width: calc(100% - 232px); height: 60px; opacity: .85; }
.ss-stem { transform-box: fill-box; transform-origin: bottom center; animation: ss-stem 4s ease-in-out infinite alternate; }
@keyframes ss-stem { from { rotate: -4deg; } to { rotate: 4deg; } }
.ss-rainbow { position: absolute; right: -140px; top: 160px; width: 360px; height: 360px; border-radius: 50%; opacity: .14; filter: blur(2px);
  background: radial-gradient(circle, transparent 54%, #ff6b6b 55% 58%, #ffb347 58% 61%, #ffd166 61% 64%, #6cc070 64% 67%, #5cc8ff 67% 70%, #8f7bff 70% 73%, transparent 74%);
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 70%); mask-image: linear-gradient(90deg, #000 40%, transparent 70%); }
.ss-tulips, .ss-beach { position: absolute; left: 160px; bottom: 54px; width: 62px; animation: ss-jack 4s ease-in-out infinite; }
.ss-tulips svg, .ss-beach svg { display: block; width: 100%; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
:root[data-season="spring"] .ss-pile { display: none; }
/* лето: чайки, море с корабликом, зонтик и арбуз */
.ss-gull { position: absolute; animation: ss-gull 24s linear infinite; }
.ss-gull-w { animation: ss-flap .9s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
@keyframes ss-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes ss-gull { 0% { transform: translate(-40vw, 0); } 50% { transform: translate(10vw, -20px); } 100% { transform: translate(70vw, 10px); } }
.ss-sea { position: absolute; left: 232px; right: 0; bottom: -6px; height: 44px; }
.ss-wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 40px; }
.ss-wave1 { opacity: .35; animation: ss-wave 14s linear infinite; }
.ss-wave2 { opacity: .45; animation: ss-wave 10s linear infinite reverse; }
@keyframes ss-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ss-boat { position: absolute; bottom: 14px; width: 34px; left: 0; animation: ss-boat 70s linear infinite, ss-bob 3s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
@keyframes ss-boat { from { left: -40px; } to { left: 100%; } }
@keyframes ss-bob { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -3px; rotate: 3deg; } }
:root[data-season="summer"] .ss-branch-tr { bottom: 140px; }
.ss-meadow { height: 34px; opacity: .7; }
.ss-sea { height: 26px; bottom: -8px; opacity: .8; }
.ss-wave { height: 26px; }
.ss-boat { width: 24px; bottom: 8px; }
.ss-meadow { display: none; } /* луг у нижнего края — убран: лишний */
.ss-rainbow { display: none; } /* радуга — убрана: ложится на баннер */
/* весна: ласточки, лепестки на кромке баннера */
.ss-swallow { position: absolute; left: 0; animation: ss-swallow 9s cubic-bezier(.4,0,.6,1) infinite; opacity: .85; }
.ss-sw-w { transform-origin: 24px 12px; animation: ss-flap .22s ease-in-out infinite alternate; }
@keyframes ss-swallow { 0% { transform: translate(-80px, 40px) rotate(-6deg); } 18% { transform: translate(110vw, -30px) rotate(4deg); } 100% { transform: translate(110vw, -30px); } }
.ss-ledge { position: absolute; height: 0; pointer-events: none; }
.ss-ledge i { position: absolute; top: -4px; width: 9px; height: 6px; border-radius: 60% 60% 50% 50% / 80% 80% 40% 40%; background: #ffc6dc; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.ss-ledge i:nth-child(odd) { background: #ffb0cf; width: 7px; height: 5px; }
.ss-ledge i.slide { animation: ss-slide 3.2s ease-in forwards; }
@keyframes ss-slide { 0% { transform: translate(0, 0); opacity: 1; } 30% { transform: translate(14px, 4px) rotate(30deg); } 100% { transform: translate(40px, 220px) rotate(260deg); opacity: 0; } }
#home-top { position: relative; }

/* осень: листья на кромке, дождь, лампа, чай, грибы */
.ss-ledge.is-leaves i { width: 12px; height: 9px; top: -6px; background: var(--c); border-radius: 50% 0 50% 0; }
.ss-ledge.is-leaves i:nth-child(odd) { width: 10px; height: 8px; background: var(--c); }
.ss-rain { position: absolute; inset: 0; }
.ss-lamp { position: absolute; left: 232px; bottom: -120px; width: 420px; height: 320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,190,90,.20), rgba(255,160,60,.08) 55%, transparent); animation: ss-lamp 6s ease-in-out infinite; }
@keyframes ss-lamp { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.ss-tea { position: absolute; left: 160px; bottom: 52px; width: 50px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.ss-tea svg { display: block; width: 100%; }
.ss-steam path { opacity: 0; animation: ss-steam 3.2s ease-in-out infinite; }
.ss-steam path:nth-child(2) { animation-delay: 1s; }
.ss-steam path:nth-child(3) { animation-delay: 2s; }
@keyframes ss-steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .55; } 100% { opacity: 0; transform: translateY(-8px); } }
.ss-forest { position: absolute; right: 168px; bottom: 4px; width: 104px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); }
.ss-forest svg { display: block; width: 100%; overflow: visible; }

/* зима: северное сияние за содержимым, сосульки, снеговик; Новый год: ёлочка, подарки */
:root[data-season="winter"] body::after { content: ""; position: fixed; left: 232px; right: 0; top: 40px; height: 260px; z-index: 0; pointer-events: none; opacity: .5; filter: blur(30px);
  background: linear-gradient(100deg, transparent 5%, rgba(80,230,170,.35) 25%, rgba(90,170,255,.30) 45%, rgba(170,120,255,.28) 65%, transparent 90%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  animation: ss-aurora 18s ease-in-out infinite alternate; }
@keyframes ss-aurora { 0% { transform: translateX(-6%) skewX(-8deg); opacity: .35; } 50% { opacity: .6; } 100% { transform: translateX(6%) skewX(8deg); opacity: .4; } }
.ss-icicles { position: absolute; left: 0; right: 0; top: 56px; height: 40px; }
.ss-icicles i { position: absolute; top: 0; width: var(--w); height: var(--h); clip-path: polygon(0 0, 100% 0, 55% 100%, 45% 100%);
  background: linear-gradient(180deg, rgba(235,246,255,.9), rgba(180,220,255,.55)); filter: drop-shadow(0 0 3px rgba(180,220,255,.5)); }
.ss-icicles b { position: absolute; left: 50%; top: var(--h); width: 3px; height: 4px; margin-left: -1.5px; border-radius: 50%; background: rgba(200,230,255,.9); animation: ss-icedrip 7s ease-in infinite; }
@keyframes ss-icedrip { 0%, 70% { transform: translateY(0) scale(.4); opacity: 0; } 76% { opacity: 1; transform: translateY(0) scale(1); } 100% { transform: translateY(120px) scale(.8); opacity: 0; } }
.ss-snowman, .ss-tree { position: absolute; left: 160px; bottom: 50px; width: 52px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.ss-snowman svg, .ss-tree svg, .ss-gifts svg { display: block; width: 100%; }
.ss-tree-lights circle { animation: ss-twinkle 2.4s ease-in-out infinite; }
.ss-tree-lights circle:nth-child(2n) { animation-delay: -1.2s; }
.ss-gifts { position: absolute; right: 168px; bottom: 4px; width: 92px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.ss-icicles i { opacity: .8; }

/* красивая ёлка: крупнее, мигающая гирлянда, покачивающиеся шары, сияющая звезда */
.ss-tree { width: 70px; left: 152px; bottom: 44px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.ss-tl { animation: ss-twinkle 1.8s ease-in-out infinite; filter: drop-shadow(0 0 3px currentColor); }
.ss-orn { transform-box: fill-box; transform-origin: top center; animation: ss-orn 3.6s ease-in-out infinite; }
@keyframes ss-orn { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.ss-star-glow { animation: ss-star 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ss-star { 0%, 100% { opacity: .55; scale: .9; } 50% { opacity: 1; scale: 1.15; } }

/* зима: следы на сугробе, снегирь на кромке баннера, иней при простое; Новый год: мандарины, салют */
.ss-steps { position: absolute; left: 300px; right: 0; bottom: 0; height: 30px; }
.ss-steps i { position: absolute; width: 7px; height: 9px; opacity: 0; animation: ss-step 16s linear infinite;
  background: radial-gradient(circle at 50% 70%, rgba(150,175,205,.65) 0 2.6px, transparent 3px), radial-gradient(circle at 20% 22%, rgba(150,175,205,.6) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 50% 12%, rgba(150,175,205,.6) 0 1.1px, transparent 1.4px), radial-gradient(circle at 80% 22%, rgba(150,175,205,.6) 0 1.1px, transparent 1.4px); rotate: 90deg; }
@keyframes ss-step { 0% { opacity: 0; } 2% { opacity: 1; } 55% { opacity: .9; } 75%, 100% { opacity: 0; } }
.ss-bird { position: absolute; width: 34px; z-index: 6; pointer-events: none; transition: left 1s cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.ss-bird svg { display: block; width: 100%; animation: ss-peck 5s ease-in-out infinite; transform-origin: bottom center; }
.ss-bird.flip svg { scale: -1 1; }
.ss-bird.hop { animation: ss-hop .9s ease-in-out; }
@keyframes ss-hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -26px; } }
@keyframes ss-peck { 0%, 80%, 100% { rotate: 0deg; } 85% { rotate: 14deg; } 90% { rotate: 0deg; } 95% { rotate: 12deg; } }
.ss-frostidle { position: absolute; inset: 0; opacity: 0; transition: opacity 6s ease; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(210,232,255,.10) 75%, rgba(225,240,255,.32) 100%);
  box-shadow: inset 0 0 80px 10px rgba(215,235,255,.18); }
.ss-frostidle.on { opacity: 1; }
.ss-frostidle:not(.on) { transition: opacity .8s ease; }
.ss-mandarins { position: absolute; right: 270px; bottom: 4px; width: 64px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.ss-mandarins svg { display: block; width: 100%; }
.ss-fireworks { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
/* иней при простое — заметнее: матовое стекло по краям + морозные узоры в углах */
.ss-frostidle { background: radial-gradient(130% 100% at 50% 50%, transparent 50%, rgba(215,235,255,.16) 72%, rgba(230,243,255,.42) 100%);
  box-shadow: inset 0 0 120px 24px rgba(220,238,255,.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: radial-gradient(120% 95% at 50% 50%, transparent 55%, #000 85%); mask-image: radial-gradient(120% 95% at 50% 50%, transparent 55%, #000 85%); }
.ss-fi { position: absolute; width: 320px; height: 320px; opacity: .55; filter: drop-shadow(0 0 4px rgba(220,240,255,.9)); }
.ss-fi path { stroke-width: 1.6; }
.ss-fi-tl { left: 0; top: 0; }
.ss-fi-tr { right: 0; top: 0; transform: scaleX(-1); }
.ss-fi-bl { left: 0; bottom: 0; transform: scaleY(-1); }
.ss-fi-br { right: 0; bottom: 0; transform: scale(-1, -1); }
/* снегирь — крупнее и заметнее */
.ss-bird { width: 50px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(255,255,255,.15)); }
.ss-mark-tree { width: 22px; height: 26px; margin-top: -6px; vertical-align: -7px; filter: drop-shadow(0 0 6px rgba(255,209,102,.35)); }
/* иней при простое — ещё заметнее */
.ss-fi { opacity: .85; width: 380px; height: 380px; }
.ss-frostidle { box-shadow: inset 0 0 140px 34px rgba(225,240,255,.38); }
:root[data-season="winter"] .ht { margin-top: 46px; } /* место над баннером — снегирь сидит на кромке целиком, не уходит под шапку */

/* иней на canvas: проявление и уход — плавные; Сэй мёрзнет и отряхивается */
#ss-frostidle.ss-frostidle { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
#ss-frostidle.ss-frostidle.on { opacity: 1; }
.ss-sei.cold img { animation: ss-shiver .12s linear infinite; }
.ss-sei.cold::after { content: ""; position: absolute; left: 30%; top: 2%; width: 40%; height: 12%; border-radius: 50% 50% 30% 30%; background: #f4f8ff; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.ss-sei.cold { filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)) saturate(.6) hue-rotate(10deg) brightness(1.05); }
@keyframes ss-shiver { 0% { translate: -1px 0; } 50% { translate: 1px 0; } 100% { translate: -1px 0; } }
.ss-sei.shake img { animation: ss-shake .6s ease; }
@keyframes ss-shake { 0%, 100% { rotate: 0deg; } 20% { rotate: -8deg; } 40% { rotate: 7deg; } 60% { rotate: -5deg; } 80% { rotate: 3deg; } }

/* иней при простое: баннер и обложки подмерзают — холоднее, бледнее, с изморозью по краю; оттаивают быстро */
.ht, .hc-f, .card .poster, .fr-item .poster, .d-poster { transition: filter 1s ease; }
.ht::after, .hc-f::before, .card .poster::before { transition: opacity 1s ease; }
:root.ss-frozen .ht, :root.ss-frozen .hc-f, :root.ss-frozen .card .poster, :root.ss-frozen .fr-item .poster, :root.ss-frozen .d-poster {
  filter: saturate(.45) brightness(1.06) contrast(.92) hue-rotate(-12deg); transition: filter 25s ease-in; }
.hc-f::before, .card .poster::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(130% 120% at 50% 50%, transparent 55%, rgba(225,240,255,.45) 100%), linear-gradient(160deg, rgba(220,238,255,.22), transparent 40%);
  box-shadow: inset 0 0 18px rgba(225,240,255,.55); }
:root.ss-frozen .hc-f::before, :root.ss-frozen .card .poster::before { opacity: 1; transition: opacity 25s ease-in; }
:root.ss-frozen .ht::after { opacity: 1; transition: opacity 25s ease-in; box-shadow: inset 0 0 50px rgba(225,240,255,.45), inset 0 1px 0 rgba(255,255,255,.4); }

/* весна: сакура в меню; лето: пальма в меню, зонтик с арбузом — внизу у Сэя */
.ss-sakura, .ss-palm { position: absolute; left: 134px; bottom: 40px; width: 96px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.ss-sakura svg, .ss-palm svg { display: block; width: 100%; overflow: visible; }
.ss-bloom { animation: ss-bloom 5s ease-in-out infinite; }
.ss-bloom:nth-of-type(2n) { animation-delay: -2s; }
@keyframes ss-bloom { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(1.5deg) scale(1.03); } }
.ss-sakura-fall { position: absolute; left: 0; right: 0; top: 30%; height: 80px; pointer-events: none; }
.ss-sakura-fall i { position: absolute; top: 0; width: 6px; height: 4px; border-radius: 60% 60% 50% 50% / 80% 80% 40% 40%; background: #ffc6dc; opacity: 0; animation: ss-sk-fall 6s ease-in infinite; }
@keyframes ss-sk-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(18px, 90px) rotate(280deg); } }
.ss-frond { animation: ss-frond 4.5s ease-in-out infinite; }
@keyframes ss-frond { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
.ss-tulips { display: none; }
.ss-beach { left: auto; right: 168px; bottom: 4px; width: 58px; animation: none; }
.ss-sakura, .ss-palm { left: 150px; bottom: 30px; width: 80px; }

/* весна: новая сакура, ветка в шапке, птичка; лето: фурин, стрекозы, ракушки, краб */
.ss-sakura, .ss-palm { left: 140px; bottom: 26px; width: 92px; }
.ss-uguisu { animation: ss-peck 6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
.ss-hbranch { position: absolute; right: 70px; top: 4px; width: 560px; height: 96px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); animation: ss-branch 9s ease-in-out infinite; transform-origin: right top; }
.ss-furin { position: absolute; top: 0; width: 26px; transform-origin: top center; animation: ss-furin 3.4s ease-in-out infinite; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.ss-furin svg { display: block; width: 100%; }
.ss-tanzaku { transform-box: fill-box; transform-origin: top center; animation: ss-furin 2.2s ease-in-out infinite reverse; }
@keyframes ss-furin { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
.ss-dfly { position: absolute; left: 0; width: 40px; animation: ss-dfly 26s linear infinite; }
.ss-dwing { animation: ss-dwing .08s linear infinite alternate; transform-origin: 23px 15px; }
@keyframes ss-dwing { from { opacity: .9; } to { opacity: .45; } }
@keyframes ss-dfly { 0% { transform: translate(-60px, 0); } 30% { transform: translate(35vw, -40px); } 34% { transform: translate(37vw, -40px); } 60% { transform: translate(64vw, 30px); } 64% { transform: translate(65vw, 28px); } 100% { transform: translate(110vw, -10px); } }
.ss-shore { position: absolute; right: 250px; bottom: 2px; width: 120px; }
.ss-shore svg { display: block; width: 100%; }
.ss-crab { position: absolute; bottom: 3px; width: 34px; left: 0; animation: ss-crab 40s linear infinite; }
.ss-crab-legs { animation: ss-crab-legs .25s steps(2) infinite; }
@keyframes ss-crab-legs { 50% { transform: translateY(1px); } }
@keyframes ss-crab { 0% { left: 260px; } 45% { left: calc(100% - 420px); } 50% { left: calc(100% - 420px); } 95% { left: 260px; } 100% { left: 260px; } }
.ss-furin { width: 34px; } .ss-dfly { width: 52px; }
/* стрекоза: крылья не мигают — лёгкое дрожание вверх-вниз */
.ss-dwing { animation: ss-dwing2 .14s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes ss-dwing2 { from { transform: scaleY(1); } to { transform: scaleY(.82); } }
.ss-hbranch { right: 0; top: 0; width: 600px; overflow: visible; }

/* лето: волна набегает, пальмовые листья из правого края, облака в шапке */
.ss-surge { opacity: 0; animation: ss-surge 11s ease-in-out infinite; }
@keyframes ss-surge { 0%, 55% { opacity: 0; transform: translateY(14px); } 65% { opacity: .55; transform: translateY(-8px); } 78% { opacity: .35; transform: translateY(2px); } 90%, 100% { opacity: 0; transform: translateY(14px); } }
.ss-wet { position: absolute; left: 0; right: 0; bottom: 18px; height: 14px; opacity: 0; background: linear-gradient(0deg, rgba(37,201,180,.18), transparent); animation: ss-wet 11s ease-in-out infinite; }
@keyframes ss-wet { 0%, 62% { opacity: 0; } 72% { opacity: 1; } 100% { opacity: 0; } }
.ss-fronds { position: absolute; right: 0; top: 0; width: 310px; height: 130px; overflow: visible; filter: drop-shadow(0 5px 10px rgba(0,0,0,.45)); }
.ss-pfrond { transform-origin: 300px 8px; animation: ss-pfrond 5s ease-in-out infinite; }
@keyframes ss-pfrond { 0%, 100% { rotate: 0deg; } 50% { rotate: -3deg; } }
.ss-cloud { position: absolute; left: 0; opacity: .14; filter: blur(.5px); animation: ss-cloud 100s linear infinite; }
@keyframes ss-cloud { from { transform: translateX(-160px); } to { transform: translateX(110vw); } }
.ss-fronds { width: 320px; height: 70px; }
.ss-pfrond { transform-origin: 312px 48px; }
.ss-fronds { height: 96px; }

/* тематический декор и свёрнутое меню: то, что стоит в меню, прячется; то, что начиналось от края меню, — сдвигается */
.ss-sakura, .ss-palm, .ss-tree, .ss-snowman, .ss-tea, .ss-pumpkins-side, .ss-tulips, .ss-side-drift { transition: opacity .25s ease; }
:root:has(.app.side-collapsed) :is(.ss-sakura, .ss-palm, .ss-tree, .ss-snowman, .ss-tea, .ss-pumpkins-side, .ss-tulips, .ss-side-drift) { opacity: 0; pointer-events: none; }
:root:has(.app.side-collapsed) :is(.ss-pile, .ss-sea, .ss-meadow, .ss-lamp, .ss-frost-bl) { left: var(--side-w-icon); }
:root:has(.app.side-collapsed)[data-season="winter"] body::after { left: var(--side-w-icon); }
:root:has(.app.side-collapsed) .ss-steps { left: calc(var(--side-w-icon) + 68px); }
.ss-pile, .ss-sea, .ss-meadow, .ss-lamp, .ss-frost-bl, .ss-steps { transition: left .25s ease; }
/* поздравление с Новым годом поверх салюта */
.ss-ny-greet { position: fixed; left: 50%; top: 38%; z-index: 71; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; cursor: pointer;
  transform: translate(-50%, -50%) scale(.9); opacity: 0; transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.ss-ny-greet.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ss-ny-greet.out { opacity: 0; transform: translate(-50%, -54%) scale(1.02); transition: opacity .9s ease, transform .9s ease; }
.ss-ny-greet b { font-size: 64px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  background: linear-gradient(90deg, #ffe08a, #fff, #9fd8ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 12px rgba(255,210,120,.45)); }
.ss-ny-greet span { font-size: 40px; font-weight: 800; color: #ffd166; letter-spacing: .08em; }
.ss-ny-greet small { margin-top: 10px; max-width: 460px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.85); }
/* поздравление — на стеклянной плашке */
.ss-ny-greet { padding: 30px 46px 28px; border-radius: 26px; background: rgba(14,16,22,.72); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.14); text-shadow: none; }
.ss-ny-greet::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: radial-gradient(60% 80% at 50% 0%, rgba(255,209,102,.18), transparent 70%); }
.ss-ny-greet { cursor: default; }
.ss-ny-ok { margin-top: 18px; height: 42px; padding: 0 26px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 700; color: #241500; cursor: pointer;
  background: linear-gradient(135deg, #ffe08a, #ffb84d); box-shadow: 0 8px 22px rgba(255,180,70,.35); transition: transform .16s var(--spring), filter .2s ease; }
.ss-ny-ok:hover { filter: brightness(1.06); }
.ss-ny-ok:active { transform: scale(.96); }
/* переключатель «Тематический / Мой» */
.s-seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-2); }
.s-seg button { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); transition: background-color .2s ease, color .2s ease; }
.s-seg button.on { color: var(--on-accent); background: var(--accent-fill); }
/* гирлянда: лампочки нажимаются — меняется режим */
.ss-lights .ss-bulb:not(.ss-pbulb) { pointer-events: auto; cursor: pointer; }
.ss-lights .ss-hit { pointer-events: all; }
/* гирлянда: лампочка всегда непрозрачная — гаснет только свет (яркость колбы и ореол), сквозь неё ничего не видно.
   Ритм задаёт сама лампочка (длительность и задержка), колба и ореол берут его по наследству */
.ss-bulb:not(.ss-pbulb) { animation: none; animation-duration: 2.6s; }
.ss-bulb:not(.ss-pbulb) > .ss-b, .ss-bulb:not(.ss-pbulb) > .ss-glow { animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: inherit; animation-delay: inherit; }
.ss-bulb:not(.ss-pbulb) > .ss-b { animation-name: ss-on-b; }
.ss-bulb:not(.ss-pbulb) > .ss-glow { animation-name: ss-on-glow; }
@keyframes ss-on-b { 0%, 100% { filter: drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 9px var(--c)); } 50% { filter: brightness(.55) saturate(.75); } }
@keyframes ss-on-glow { 0%, 100% { opacity: .55; } 50% { opacity: .05; } }
/* режимы (нажатие на лампочку) */
:root[data-garland="rainbow"] .ss-bulb:not(.ss-pbulb) { animation: ss-g-rainbow 5s linear infinite; }
@keyframes ss-g-rainbow { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
:root[data-garland="blink"] .ss-bulb:not(.ss-pbulb) { animation-duration: 1.4s !important; animation-delay: 0s !important; }
:root[data-garland="blink"] .ss-bulb:not(.ss-pbulb):nth-of-type(even) { animation-delay: -.7s !important; }
:root[data-garland="blink"] .ss-bulb:not(.ss-pbulb) > .ss-b { animation-name: ss-blink-b; animation-timing-function: linear; }
:root[data-garland="blink"] .ss-bulb:not(.ss-pbulb) > .ss-glow { animation-name: ss-blink-glow; animation-timing-function: linear; }
@keyframes ss-blink-b { 0%, 49% { filter: drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 9px var(--c)); } 50%, 100% { filter: brightness(.45) saturate(.7); } }
@keyframes ss-blink-glow { 0%, 49% { opacity: .6; } 50%, 100% { opacity: 0; } }
:root[data-garland="warm"] .ss-bulb:not(.ss-pbulb) { --c: #ffc768 !important; animation-duration: 4s !important; animation-delay: 0s !important; }
:root[data-garland="warm"] .ss-bulb:not(.ss-pbulb) > :is(.ss-glow, .ss-b) { fill: var(--c); }
:root[data-garland="warm"] .ss-bulb:not(.ss-pbulb) > .ss-b { animation-name: ss-warm-b; }
@keyframes ss-warm-b { 0%, 100% { filter: drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 10px var(--c)); } 50% { filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 5px var(--c)); } }
/* акцентный цвет: обводка выбранного — внутри кружка, размер у всех одинаковый, ряд ровный */
.s-acc-sw.is-on, .s-acc-custom.is-on[style] { box-shadow: none; padding: 3px; background-clip: content-box; border: 2px solid var(--c, var(--accent)); }
.s-acc-rainbow.is-on { border-color: var(--accent); }
/* шапка темы на аватарке внизу меню и ободок — и в свёрнутом, и в развёрнутом меню */
.side-user:has(.ss-ava) { position: relative; overflow: visible; }
.side-user:has(.ss-ava) .side-user-text { overflow: hidden; }
.ss-ava { display: block; position: absolute; left: 6px; top: 6px; width: 32px; height: 32px; pointer-events: none; animation: ss-ava-in .45s cubic-bezier(.3,1.5,.5,1) .15s both; }
@keyframes ss-ava-in { from { opacity: 0; transform: translateY(-8px) rotate(-10deg); } }
.ss-ava .ss-hat { left: -3px !important; top: -15px !important; width: 38px !important; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.ss-ava-summer .ss-hat { left: -9px !important; top: -11px !important; width: 50px !important; }
.ss-ava-spring .ss-hat { left: -5px !important; top: -7px !important; width: 42px !important; }
.ss-ava-halloween .ss-hat { left: -7px !important; top: -27px !important; width: 46px !important; }
.ss-ava-newyear .ss-hat { left: -2px !important; top: -14px !important; width: 40px !important; }
.side-user:has(.ss-ava) .side-ava { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
/* Новый год: ободок переливается цветами гирлянды */
:root[data-holiday="newyear"] .side-user:has(.ss-ava) .side-ava { box-shadow: none; outline: none; }
:root[data-holiday="newyear"] .ss-ava::before { content: ""; position: absolute; inset: -3.5px; border-radius: 12px; padding: 1.5px;
  background: conic-gradient(#ff4d5e, #ffc93c, #5ce37a, #4fc3ff, #c58bff, #ff4d5e); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 3px rgba(255,220,120,.6)); animation: ss-ava-ring 3s linear infinite; }
@keyframes ss-ava-ring { to { filter: drop-shadow(0 0 3px rgba(255,220,120,.6)) hue-rotate(360deg); } }
/* Хэллоуин: тёплый отсвет тыквы снизу */
:root[data-season="halloween"] .side-user:has(.ss-ava) .side-ava { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px #ff8a1f, 0 4px 14px rgba(255,138,31,.45); }
/* снег у низа окна и меню — сплошной до края, только вокруг аватарки мягко расступается (иначе аватарка и шапка бледные) */
.ss-drift { -webkit-mask-image: radial-gradient(circle at 32px 18px, transparent 19px, #000 32px); mask-image: radial-gradient(circle at 32px 18px, transparent 19px, #000 32px); }
.ss-side-drift { -webkit-mask-image: radial-gradient(circle at 42px 12px, transparent 19px, #000 32px); mask-image: radial-gradient(circle at 42px 12px, transparent 19px, #000 32px); }
/* главная: заглушки, пока баннер и «Продолжить» грузятся, и плавное появление */
.ht-skel { position: absolute; inset: 0; padding: 0 0 46px 36px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.25s linear infinite; }
.ht-skel i { display: block; height: 14px; width: 120px; border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.ht-skel i:nth-child(2) { height: 34px; width: 46%; }
.ht-skel i:nth-child(3) { width: 30%; }
.ht-skel i:nth-child(4) { height: 40px; width: 230px; border-radius: 12px; margin-top: 8px; }
.hc-skel { pointer-events: none; }
.hc-skel .hc-f, .hc-skel b, .hc-skel small { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.25s linear infinite; box-shadow: none; }
.hc-skel b { height: 14px; width: 70%; border-radius: 7px; }
.hc-skel small { height: 11px; width: 40%; border-radius: 6px; }
.ht-fade { animation: htFade .45s ease both; }
@keyframes htFade { from { opacity: 0; } to { opacity: 1; } }
/* кадры проявляются, когда загрузились, — под ними пока тёмная подложка, а не пустота */
.ht { background: var(--surface); }
.ht-bg, .hc-f img { opacity: 0; transition: opacity .5s ease; }
.ht-bg.ld, .hc-f img.ld { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ht-skel, .hc-skel * { animation: none; } .ht-fade { animation: none; } }
.hc-skel .hc-f::after, .hc-skel .hc-f::before { display: none; }
/* градиентный цвет (свой градиент, радуга, тема): при наведении градиент остаётся и плавно светлеет — раньше он резко сменялся сплошным цветом, кнопка мигала */
.ht-btns button { transition: transform .16s var(--spring), background-color .2s ease, filter .2s ease; }
.acc-grad :is(.ht-go, .pl-an-go, .fr-invite-btn, .fr-btn--ok, .pfx-cta) { transition: filter .2s ease, transform .16s var(--spring); }
.acc-grad :is(.ht-go, .pl-an-go, .fr-invite-btn, .fr-btn--ok, .pfx-cta):hover { background: var(--accent-fill); filter: brightness(1.1) saturate(1.05); }
/* заглушки страницы аниме и «Друзей» — той же формы, что настоящие блоки */
.d-skel { display: flex; flex-direction: column; gap: 10px; }
.d-skel-row { display: flex; gap: 10px; flex-wrap: nowrap; overflow: hidden; margin: 6px 0; }
.d-skel-row .sk { flex: none; }
.d-skel-facts { display: grid; grid-template-columns: repeat(4, max-content); gap: 18px 34px; margin: 8px 0 10px; }
.d-skel-facts span { display: flex; flex-direction: column; gap: 7px; }
.d-skel-sec { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.fr-skel-card { cursor: default; pointer-events: none; }
.fr-skel-card > span, .fr-skel-item > span { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.fr-skel-card > .sk, .fr-skel-item > .sk { flex: none; }
.fr-skel-feed { display: flex; flex-direction: column; gap: 6px; }
.fr-skel-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.fr-skel-item > .sk:first-child, .fr-skel-card > .sk:first-child { min-width: var(--w, 36px); aspect-ratio: 1; }
.fr-skel-card > .sk:first-child { --w: 52px; }
/* шумоподавление в настройках: три варианта поровну на всю ширину (общее правило .s-seg делало ряд по ширине текста — справа оставалась пустота) */
.s-nsc .nsc-seg.s-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }