/* Главная и /chat — редизайн 2026.
   Подключается последним и работает только на токенах pz-tokens.css, поэтому
   одно правило годится для всех тем. Префикс html[data-theme] уравнивает
   специфичность с theme.css (html[data-theme="light"] .x): при равенстве
   побеждает этот файл. На этапе F старые слои сливаются сюда и удаляются. */

/* ============ основа ============ */
html[data-theme] body {
  background: var(--pz-canvas);
  color: var(--pz-text);
  font-family: var(--pz-font);
}
html[data-theme] ::selection { background: rgb(var(--accent-rgb) / 0.32); color: var(--pz-text); }
html[data-theme] :focus-visible { outline: 2px solid var(--pz-focus); outline-offset: 2px; }
html[data-theme] .chat,
html[data-theme] .chat *,
html[data-theme] .chat-settings { scrollbar-width: thin; scrollbar-color: var(--pz-pressed) transparent; }

/* Иконки интерфейса — маски из одного набора (обводка 1.8, как в шапке) */
:root {
  --i-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.6 21 12 3.4 3.4l2.4 7.1L14 12l-8.2 1.5z'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3l6 6-3 1-3.5 3.5L15 18l-1.5 1.5L10 16l-5 5-1-1 5-5-3.5-3.5L7 10l4.5.5L15 7z'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 9.3 12 14.6l5.3-5.3 1.4 1.4L12 17.4l-6.7-6.7z'/%3E%3C/svg%3E");
}

/* ============ раскладка: сцена + чат-панель ============ */
html[data-theme] .layout { background: var(--pz-canvas); }
html[data-theme] .stage {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: var(--pz-canvas);
}
html[data-theme] .stage > .player {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  background: #000;
}
:root { --sb-h: 76px; --stage-gap: 16px; }
@media (min-width: 801px) {
  /* Главная на компьютере — это видео: кадр на всю сцену, без отступов и
     полосы под ним. Шапка разделов и статус эфира лежат поверх верхней
     кромки и прячутся вместе с панелью плеера. */
  html[data-theme]:not(.chat-only) .stage { position: relative; }
  html[data-theme]:not(.chat-only) .stage > .player { flex: 1 1 0; min-height: 0; height: auto; }
  html[data-theme]:not(.chat-only) .layout:not(.chat-hidden) .chat { border-left: 1px solid var(--pz-line); }
  html[data-theme].chat-left:not(.chat-only) body:not(.cinema-mode) .layout:not(.chat-hidden) .chat { border-left: 0; border-right: 1px solid var(--pz-line); }
  html[data-theme].chat-below:not(.chat-only) body:not(.cinema-mode) .layout:not(.chat-hidden) .chat { border-left: 0; border-top: 1px solid var(--pz-line); }
  /* шапка больше не занимает высоту — «Снизу» считает кадр без неё */
  html[data-theme].chat-below:not(.chat-only) body:not(.cinema-mode) .layout:not(.chat-hidden) {
    grid-template-rows: min(56.25vw, calc(100dvh - var(--chat-below-h, 300px))) minmax(0, 1fr);
  }

  html[data-theme]:not(.chat-only) .stage > .pz-top-main,
  html[data-theme]:not(.chat-only) .stage > .stream-bar {
    position: absolute;
    z-index: 8;
    top: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) ease;
  }
  html[data-theme]:not(.chat-only) .stage > .pz-top-main {
    left: 0;
    right: 0;
    height: 56px;
    padding-right: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 60%, rgba(0, 0, 0, 0) 100%);
  }
  html[data-theme]:not(.chat-only) .stage > .stream-bar {
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 0;
    height: 52px;
    padding: 0 var(--s-4);
    background: none;
    color: #fff;
  }
  /* видно: при движении мыши, на паузе, без эфира, при фокусе с клавиатуры */
  html[data-theme]:not(.chat-only) .stage:has(.player:is(.show-controls, .paused, .offline)) > :is(.pz-top-main, .stream-bar),
  html[data-theme]:not(.chat-only) .stage > :is(.pz-top-main, .stream-bar):focus-within {
    opacity: 1;
    pointer-events: auto;
  }
  /* в кинотеатре чат лежит справа поверх сцены — статус не уходит под него */
  html[data-theme]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .stage > .stream-bar { right: min(var(--chat-width), 85vw); }
  html[data-theme]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .stage > .pz-top-main { right: min(var(--chat-width), 85vw); }
}
html[data-theme] .stage > .player:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
html[data-theme] .stage > .player:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }

/* ============ шапка ============ */
html[data-theme] .pz-top-main { flex: 0 0 auto; border-bottom: 0; }
html[data-theme] .pz-top .pz-brand span { letter-spacing: -0.02em; font-weight: 800; }
html[data-theme] .pz-top .pz-brand b { color: var(--pz-accent-text); }
html[data-theme] .pz-top .pz-nav { gap: 2px; }
html[data-theme] .pz-top .pz-nav a {
  position: relative;
  border-radius: var(--r-md);
  color: var(--pz-text-2);
  font-weight: 550;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
html[data-theme] .pz-top .pz-nav a:hover { background: var(--pz-raised); color: var(--pz-text); }
html[data-theme] .pz-top .pz-nav a[aria-current="page"] { background: var(--pz-raised); color: var(--pz-text); box-shadow: none; }
@media (min-width: 801px) {
  html[data-theme]:not(.chat-only) .player .brand { display: none; }
  /* разделы есть в шапке — кнопка меню в чате на десктопе лишняя */
  html[data-theme]:not(.chat-only) .chat-header-actions .pz-chat-menu { display: none; }
}

/* ============ полоса канала под кадром ============ */
.stream-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  min-height: var(--sb-h);
  padding: var(--s-4) var(--stage-gap) var(--s-3);
  background: var(--pz-canvas);
  color: var(--pz-text);
}
.chat-only .stream-bar { display: none; }
.sb-channel {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pz-raised);
  box-shadow: 0 0 0 2px var(--pz-canvas), 0 0 0 4px var(--pz-live);
}
.stage:has(.player.offline) .sb-channel { box-shadow: 0 0 0 2px var(--pz-canvas), 0 0 0 4px var(--pz-line-strong); }
.sb-channel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-main { display: grid; gap: 4px; min-width: 0; }
.sb-head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.sb-name { color: var(--pz-text); font-size: var(--t-18); font-weight: 800; letter-spacing: -0.015em; text-decoration: none; }
.sb-name:hover { color: var(--pz-accent-text); }
.sb-motto { margin: 0; color: var(--pz-text-2); font-size: var(--t-14); }
.stream-title-wrap:not(.hidden) ~ .sb-motto { display: none; }
.sb-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 var(--s-2) 0 7px;
  border-radius: var(--r-xs);
  background: #d92d2d; /* --pz-live темнее: белый текст и время эфира читаются (≥ 4,5:1) */
  color: #fff;
  font-size: var(--t-11);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sb-live strong { color: #fff; font-weight: 650; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sb-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.sb-live-off { display: none; }
.stage:has(.player.offline) .sb-live { background: var(--pz-raised); color: var(--pz-text-2); }
.stage:has(.player.offline) .sb-live strong { display: none; }
.stage:has(.player.offline) .sb-live-dot { background: var(--pz-text-3); }
.stage:has(.player.offline) .sb-live-on { display: none; }
.stage:has(.player.offline) .sb-live-off { display: inline; }

html[data-theme] .stream-bar .stream-title-wrap {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  max-width: none;
  pointer-events: auto;
}
html[data-theme] .stream-bar .stream-title-wrap.hidden { display: none; }
html[data-theme] .stream-bar .stream-title-col { flex-direction: row; align-items: center; gap: var(--s-3); min-width: 0; }
html[data-theme] .stream-bar .stream-title {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--pz-text);
  font-size: var(--t-14);
  font-weight: 500;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-decoration: none;
}
html[data-theme] .stream-bar .stream-title[href]:hover { filter: none; transform: none; color: var(--pz-accent-text); }
html[data-theme] .stream-bar .stream-kino {
  flex: 0 1 auto;
  max-width: 300px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--r-md);
  background: var(--pz-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--pz-text);
}
html[data-theme] .stream-bar .stream-kino:hover { border-color: var(--pz-accent-line); transform: none; }
html[data-theme] .stream-bar .stream-kino-poster { width: 28px; height: 42px; border-radius: var(--r-xs); }
html[data-theme] .stream-bar .stream-kino-eyebrow,
html[data-theme] .stream-bar .stream-kino-cta { color: var(--pz-accent-text); }
html[data-theme] .stream-bar .stream-title-close {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--pz-text-3);
  line-height: 24px;
  opacity: 1;
}
html[data-theme] .stream-bar .stream-title-close:hover { background: var(--pz-raised); color: var(--pz-text); }

/* онлайн: одна «панель приборов» с площадками и суммой */
html[data-theme] .stream-bar .online-stats {
  position: static;
  display: flex;
  align-items: stretch;
  max-width: none;
  padding: 0;
  border: 1px solid var(--pz-line);
  border-radius: var(--r-md);
  background: var(--pz-surface);
  opacity: 1;
  pointer-events: auto;
  overflow: hidden;
  color: var(--pz-text-2);
  font-size: var(--t-13);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme] .stream-bar .online-stats > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--s-3);
}
html[data-theme] .stream-bar .online-stats > * + * { border-left: 1px solid var(--pz-line); }
html[data-theme] .stream-bar .online-stats img { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }
html[data-theme] .stream-bar .online-stats strong { color: var(--pz-text); font-weight: 650; font-variant-numeric: tabular-nums; }
html[data-theme] .stream-bar .online-stats .os-total span { color: var(--pz-text-3); font-weight: 700; }
html[data-theme] .stream-bar .online-stats .os-total strong { font-size: var(--t-14); font-weight: 750; }
html[data-theme] .stream-bar .online-stats .os-stats { color: var(--pz-text-2); text-decoration: none; }
html[data-theme] .stream-bar .online-stats .os-stats:hover { background: var(--pz-raised); color: var(--pz-text); }

/* таймкоды эфира: лента переходов под полосой канала */
.sb-chapters { grid-column: 1 / -1; display: grid; gap: var(--s-2); min-width: 0; padding-top: var(--s-2); }
.sb-chapters[hidden] { display: none; }
.sb-chapters h2 { margin: 0; color: var(--pz-text-3); font-size: var(--t-12); font-weight: 650; }
.sb-chapters-list { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--pz-pressed) transparent; }
.sb-chapter {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  width: 200px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--r-md);
  background: var(--pz-surface);
  color: var(--pz-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.sb-chapter:hover { border-color: var(--pz-accent-line); background: var(--pz-raised); }
.sb-chapter-time { color: var(--pz-accent-text); font-size: var(--t-12); font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-chapter-title { overflow: hidden; font-size: var(--t-13); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) {
  .sb-chapters h2 { display: none; }
  .sb-chapter { width: 168px; padding: 6px var(--s-2); }
}

/* ============ плеер ============ */
html[data-theme] .player .controls {
  display: grid;
  grid-template-columns: auto auto auto auto minmax(0, 1fr) auto auto auto auto auto auto;
  grid-template-rows: auto 44px;
  align-items: center;
  column-gap: 2px;
  height: auto;
  padding: 0 var(--s-3) var(--s-2);
  background: none;
  /* явно над <video>: без этого Safari на старых iPhone (iOS 16) рисовал панель
     под видео — кнопки появлялись только после «картинки в картинке» */
  z-index: 1;
}
/* Подложка — без отрицательного z-index и isolation: в Safari на iOS такой слой
   поверх <video> рисовался ПОД видео, и кнопки пропадали (появлялись только после
   «картинки в картинке»). Порядок отрисовки — по разметке: ::before первым, кнопки
   (position: relative) поверх. */
html[data-theme] .player .controls::before {
  content: "";
  position: absolute;
  inset: -56px 0 0;
  background: var(--pz-video-scrim);
  pointer-events: none;
}
html[data-theme] .player .controls > * { position: relative; grid-row: 2; }
/* открыто меню настроек (оно внутри панели на ПК и в полном экране) — панель над
   слоями плеера («Включить звук» 5, OSD 6, статистика 12), иначе они закрывают меню */
html[data-theme] .player .controls:has(.player-settings-menu:not(.hidden)) { z-index: 13; }
html[data-theme] .player #btn-play { grid-column: 1; }
html[data-theme] .player .vol { grid-column: 2; }
html[data-theme] .player #btn-live { grid-column: 3; }
html[data-theme] .player #behind { grid-column: 4; }
html[data-theme] .player #btn-ll { grid-column: 6; }
html[data-theme] .player .quality { grid-column: 7; }
html[data-theme] .player .player-settings { grid-column: 8; }
html[data-theme] .player #btn-pip { grid-column: 9; }
html[data-theme] .player #cinema-toggle { grid-column: 10; }
html[data-theme] .player #btn-fs { grid-column: 11; }
/* группы: звук и эфир | поток (LL, качество, настройки) | вид (PiP, кинотеатр, экран) */
html[data-theme] .player #btn-pip { position: relative; margin-left: 13px; }
html[data-theme] .player #btn-pip::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
}
html[data-theme] .player #cinema-toggle.active,
html[data-theme] .player #cinema-toggle[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); color: var(--pz-accent-text); }
/* звук: на десктопе ползунок выезжает вбок при наведении, как в привычных плеерах */
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .player .vol { gap: 0; }
  html[data-theme] .player .vol-popup {
    position: static;
    display: flex;
    align-items: center;
    width: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: width var(--dur-2) var(--ease-out);
  }
  html[data-theme] .player .vol-popup::after { display: none; }
  html[data-theme] .player .vol:hover .vol-popup,
  html[data-theme] .player .vol:focus-within .vol-popup,
  html[data-theme] .player .vol.volume-open .vol-popup { width: 84px; }
  html[data-theme] .player .vol.volume-closed:not(:focus-within) .vol-popup { width: 0; }
  html[data-theme] .player .vol-range {
    -webkit-appearance: auto;
    appearance: auto;
    writing-mode: horizontal-tb;
    direction: ltr;
    width: 72px;
    height: 16px;
    margin: 0 6px 0 2px;
    accent-color: var(--pz-accent);
  }
}
/* width: auto — старое мобильное правило (style.css) даёт width: 100%, и вместе с
   отступами полоса вылезала вправо: бегунок «прямого эфира» упирался в край */
html[data-theme] .player .seek { grid-row: 1; grid-column: 1 / -1; width: auto; height: 26px; margin: 0 6px; }

html[data-theme] .player .ctl {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--r-md);
  color: var(--pz-video-fg);
  transition: background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
html[data-theme] .player .ctl:hover { background: rgba(255, 255, 255, 0.14); }
html[data-theme] .player .ctl:active { transform: scale(0.96); }
html[data-theme] .player .ctl svg { width: 20px; height: 20px; }
html[data-theme] .player #btn-live {
  gap: 7px;
  margin-left: 4px;
  padding: 0 10px;
  color: var(--pz-video-fg-2);
  font-size: var(--t-12);
  font-weight: 800;
  letter-spacing: 0.05em;
}
html[data-theme] .player .live-dot { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.45); box-shadow: none; animation: none; }
html[data-theme] .player.at-live #btn-live { color: var(--pz-video-fg); }
html[data-theme] .player.at-live .live-dot { background: var(--pz-live); box-shadow: 0 0 0 3px rgba(255, 74, 74, 0.25); animation: none; }
html[data-theme] .player .behind { color: var(--pz-video-fg-2); font-size: var(--t-12); padding: 0 4px; }
html[data-theme] .player .ll-btn,
html[data-theme] .player .q-btn { font-size: var(--t-12); font-weight: 750; letter-spacing: 0.02em; }
html[data-theme] .player .ll-btn.active { background: var(--pz-accent); color: var(--pz-on-accent); }

/* таймлайн во всю ширину, тепло чата в цвет акцента — фирменная деталь */
html[data-theme] .player .seek-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.24);
  transition: height var(--dur-1) var(--ease-out);
}
html[data-theme] .player .seek:hover .seek-track { height: 6px; }
html[data-theme] .player .seek-fill { background: var(--pz-accent); box-shadow: none; border-radius: 2px; }
html[data-theme] .player .seek-knob { width: 14px; height: 14px; background: var(--pz-accent); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35); }
html[data-theme] .player .seek-heat { bottom: calc(50% + 4px); height: 16px; color: var(--pz-accent-text); opacity: 0.9; }
html[data-theme] .player .seek-mark { width: 2px; margin-left: -1px; background: var(--pz-video-fg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
html[data-theme] .player .seek-tip { padding: 6px 9px; border-radius: var(--r-sm); background: rgba(12, 12, 12, 0.94); font-size: var(--t-12); }
/* превью анонса: обложка ролика, который шёл в этот момент эфира */
html[data-theme] .player .seek-tip-thumb { display: block; width: 192px; height: 108px; margin: 0 auto 4px; border-radius: 4px; background: #222; object-fit: cover; }
html[data-theme] .player .seek-tip .seek-tip-chapter { max-width: 192px; color: var(--pz-accent-on-dark); }
html[data-theme] .player .seek-tip:has(.seek-tip-thumb) { padding: 5px 5px 6px; }
html[data-theme] .player .vol-popup { border-radius: var(--r-md); background: rgba(16, 16, 16, 0.96); }

/* меню плеера: непрозрачное (iOS: без backdrop-filter под анимацией) */
html[data-theme] .player-settings-menu {
  min-width: 268px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  background: #141414;
  box-shadow: var(--pz-shadow-pop);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #f2f2f2;
}
html[data-theme] .player-settings-row,
html[data-theme] .player-settings-back,
html[data-theme] .settings-options > button { min-height: 36px; border-radius: var(--r-md); color: #f2f2f2; font-size: var(--t-13); }
html[data-theme] .player-settings-row:hover,
html[data-theme] .player-settings-back:hover,
html[data-theme] .settings-options > button:hover { background: rgba(255, 255, 255, 0.08); }
html[data-theme] .player-settings-row > span:first-child { font-weight: 550; }
html[data-theme] .player-settings-tail { color: rgba(255, 255, 255, 0.58); font-weight: 500; }
/* вкл/выкл — тумблер, как в настройках чата; состояние — aria-pressed строки,
   текст «Вкл/Выкл» остаётся в разметке, но не виден */
html[data-theme] .player-settings-row.ps-switch .player-settings-tail {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  color: transparent;
  font-size: 0;
  overflow: hidden;
  transition: background-color var(--dur-2) ease;
}
html[data-theme] .player-settings-row.ps-switch .player-settings-tail::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) ease;
}
html[data-theme] .player-settings-row.ps-switch[aria-pressed="true"] .player-settings-tail { background: var(--pz-accent); }
html[data-theme] .player-settings-row.ps-switch[aria-pressed="true"] .player-settings-tail::after { transform: translateX(14px); background: var(--pz-on-accent); }
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .player-settings-row.ps-switch .player-settings-tail,
  html[data-theme] .player-settings-row.ps-switch .player-settings-tail::after { transition: none; }
}
html[data-theme] .settings-options .settings-note { margin: 4px 10px 6px; color: rgba(255, 255, 255, 0.58); font-size: var(--t-12); line-height: 1.4; }
html[data-theme] .settings-options > button.active { background: rgb(var(--accent-rgb) / 0.16); color: var(--pz-accent-text); }
html[data-theme] .player-settings-menu .ps-label {
  padding: 10px 10px 4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--t-11);
  font-weight: 650;
}
html[data-theme] .player-settings-menu .ps-label:first-child { padding-top: 4px; }
/* тема — в настройках над чатом (раздел «Оформление»), здесь не дублируем */
html[data-theme] .player-settings-menu .ps-theme { display: none; }

/* состояния кадра */
html[data-theme] .player .status {
  border-radius: var(--r-md);
  background: var(--pz-video-chip);
  color: var(--pz-video-fg);
  font-size: var(--t-13);
  font-weight: 550;
}
html[data-theme] .player .unmute {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pz-accent);
  color: var(--pz-on-accent);
  font-size: var(--t-13);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
html[data-theme] .player .bigplay { border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: var(--pz-video-fg); }

/* ============ чат ============ */
html[data-theme] .chat {
  border-left: 0;
  background: var(--pz-surface);
  font-family: var(--pz-font);
}
html[data-theme] .chat-tabs {
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--pz-line);
  background: transparent;
}
.chat-title { margin: 0 var(--s-1) 0 0; color: var(--pz-text); font-size: var(--t-14); font-weight: 750; letter-spacing: -0.005em; }
html[data-theme] .chat-source-filters { gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
html[data-theme] .source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 26px;
  min-height: 0;
  padding: 0 9px 0 7px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--pz-text-2);
  font-size: var(--t-12);
  font-weight: 650;
  opacity: 1;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
html[data-theme] .source-toggle img { width: 13px; height: 13px; border-radius: 3px; object-fit: contain; }
html[data-theme] .source-toggle + .source-toggle { border-left: 1px solid var(--pz-line-strong); }
html[data-theme] .source-toggle.active { border-color: transparent; background: var(--pz-hover); color: var(--pz-text); box-shadow: none; }
html[data-theme] .source-toggle:not(.active) { opacity: 1; color: var(--pz-text-3); text-decoration: line-through; }
html[data-theme] .source-toggle:not(.active) img { filter: grayscale(1); opacity: 0.6; }

html[data-theme] .chat-header-actions { gap: 0; opacity: 1; }
html[data-theme] .chat-header-btn,
html[data-theme] .chat-hide-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--pz-text-2);
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
html[data-theme] .chat-header-btn { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 0; min-height: 0; padding: 0; }
html[data-theme] .chat-header-btn svg { width: 18px; height: 18px; fill: currentColor; }
html[data-theme] .chat-header-btn:hover,
html[data-theme] .chat-hide-btn:hover { background: var(--pz-raised); color: var(--pz-text); }
html[data-theme] .chat-header-btn[aria-pressed="true"],
html[data-theme] .chat-header-btn[aria-expanded="true"] { background: var(--pz-accent-wash); color: var(--pz-accent-text); }
html[data-theme] .tab-forme { height: 26px; border-radius: var(--r-pill); }
/* аккаунт: гостю — «Войти» словом, вошедшему — иконка с точкой */
.account-label { display: none; }
html[data-theme].pz-guest .account-btn {
  display: inline-flex;
  gap: 5px;
  width: auto;
  padding: 0 10px 0 8px;
  border: 1px solid var(--pz-accent-line);
  color: var(--pz-accent-text);
  font-size: var(--t-12);
  font-weight: 700;
}
html[data-theme].pz-guest .account-btn svg { width: 15px; height: 15px; }
html[data-theme].pz-guest .account-label { display: inline; }
html[data-theme] .account-btn.connected { position: relative; color: var(--pz-text); }
html[data-theme] .account-btn.connected::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--pz-surface);
  border-radius: 50%;
  background: var(--pz-success);
}
html[data-theme] .chat-hide-btn svg { width: 18px; height: 18px; fill: currentColor; }
html[data-theme] .chat-hide-btn svg path + path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* вернуть скрытый чат — подписанная кнопка у правого края */
html[data-theme] .chat-show-btn {
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--r-md);
  background: var(--pz-surface);
  color: var(--pz-text);
  font-size: var(--t-13);
  font-weight: 650;
  box-shadow: var(--pz-shadow-pop);
}
html[data-theme] .chat-show-btn.hidden { display: none; }
html[data-theme] .chat-show-btn svg { width: 16px; height: 16px; fill: var(--pz-accent); }
html[data-theme] .chat-show-btn:hover { background: var(--pz-raised); }

html[data-theme] .chat-online-stats {
  border-bottom: 1px solid var(--pz-line);
  background: transparent;
  color: var(--pz-text-2);
  font-size: var(--t-12);
}
html[data-theme] .chat-online-stats strong,
html[data-theme] .chat-online-stats span:nth-child(2) strong,
html[data-theme] .chat-online-stats span:nth-child(3) strong { color: var(--pz-text); font-variant-numeric: tabular-nums; }

/* закреп: свёрнут — одна строка с булавкой; развёрнут — текст и кошельки */
html[data-theme] .pinned {
  position: relative;
  display: block;
  max-height: min(40vh, 340px);
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--pz-line);
  border-radius: 0;
  background: linear-gradient(var(--pz-accent-wash), var(--pz-accent-wash)), var(--pz-surface);
  color: var(--pz-text);
  font-size: var(--t-13);
  overflow: auto;
}
html[data-theme] .pinned-title {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  padding: 0;
  background: none;
}
html[data-theme] .pinned-title > span { display: none; }
html[data-theme] .pinned-title button {
  height: 26px;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--pz-text-2);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-theme] .pinned-title button:hover { background: rgb(var(--accent-rgb) / 0.14); color: var(--pz-text); }
/* «Установить» (PWA) — рядом с «Свернуть»; текст закрепа под них не залезает */
html[data-theme] .pinned-title-actions { display: flex; align-items: center; gap: var(--s-1); }
html[data-theme] .pwa-install-offer {
  height: 26px;
  border: 1px solid var(--pz-line);
  border-radius: var(--r-sm);
  background: var(--pz-surface);
}
html[data-theme] .pinned-title .pwa-install {
  display: grid;
  place-items: center;
  width: 26px;
  height: 24px;
  padding: 0;
  border-radius: 0;
  color: var(--pz-accent-text);
}
html[data-theme] .pinned-title .pwa-install svg { width: 15px; height: 15px; }
html[data-theme] .pinned-title .pwa-install-close {
  width: 24px;
  height: 24px;
  padding: 0;
  border-left: 1px solid var(--pz-line);
  border-radius: 0;
  color: var(--pz-text-2);
  font-size: 15px;
}
html[data-theme] .pinned.collapsed:has(.pwa-install-offer:not(.hidden)) .pinned-scroll { padding-right: 154px; }
html[data-theme] .pinned:not(.collapsed):has(.pwa-install-offer:not(.hidden)) p::before { width: 144px; }
html[data-theme] .pinned-scroll,
html[data-theme] .pinned.collapsed .pinned-scroll {
  display: block;
  padding: 10px 96px 10px 40px;
  overflow: visible;
}
html[data-theme] .pinned-scroll::before {
  content: "";
  position: absolute;
  top: 12px;
  left: var(--s-4);
  width: 16px;
  height: 16px;
  background: var(--pz-accent);
  -webkit-mask: var(--i-pin) center / contain no-repeat;
  mask: var(--i-pin) center / contain no-repeat;
}
html[data-theme] .pinned p { margin: 0; line-height: 1.45; }
html[data-theme] .pinned p strong { font-weight: 750; }
html[data-theme] .pinned.collapsed p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
html[data-theme] .pinned.collapsed .wallets-box { display: none; }
html[data-theme] .pinned:not(.collapsed) .pinned-scroll { padding-right: var(--s-4); }
/* развёрнут: место под кнопки «Свернуть» (и «Установить») — только в первой строке,
   дальше текст идёт на всю ширину (иначе в узком чате он сжимался в столбик) */
html[data-theme] .pinned:not(.collapsed) p::before { content: ""; float: right; width: 84px; height: 24px; } /* по высоте кнопок (26 px от верха с отступом 6) */
/* на таче кнопки 44 px высотой (touch.css) — место под ними выше */
@media (pointer: coarse) { html[data-theme] .pinned:not(.collapsed) p::before { height: 42px; } }
.wallets-box { margin-top: var(--s-2); }
.wallets-box summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--pz-text-2);
  font-size: var(--t-12);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.wallets-box summary::-webkit-details-marker { display: none; }
.wallets-box summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--i-chevron) center / contain no-repeat;
  mask: var(--i-chevron) center / contain no-repeat;
  transition: transform var(--dur-1) var(--ease-out);
}
.wallets-box[open] summary::after { transform: rotate(180deg); }
.wallets-box summary:hover { color: var(--pz-text); }
.wallets-box .wallets { margin-top: var(--s-2); gap: 2px; }
html[data-theme] .wallets div { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; padding: 3px 0; }
html[data-theme] .wallets strong { min-width: 0; color: var(--pz-accent-text); font-size: var(--t-11); font-weight: 750; }
html[data-theme] .wallets code { color: var(--pz-text-2); font-family: var(--pz-mono); font-size: var(--t-12); user-select: all; }

/* лента: строки без карточек, ник цветом пользователя */
html[data-theme] #messages { padding: var(--s-2) 0 var(--s-3); }
html[data-theme] .msg {
  position: relative;
  padding: 3px var(--s-4);
  border-radius: 0;
  color: var(--pz-text);
  font-size: var(--chat-font-size);
  line-height: 1.5;
}
html[data-theme] .msg:hover { background: var(--pz-raised); }
html[data-theme] .msg .who { font-weight: 700; letter-spacing: -0.005em; }
html[data-theme] .msg .badge img { width: 1.05em; height: 1.05em; margin-right: 1px; border-radius: 3px; vertical-align: -0.17em; box-shadow: none; filter: none; }
html[data-theme] .msg-time { color: var(--pz-text-3); font-size: 0.82em; font-variant-numeric: tabular-nums; }
html[data-theme] .msg.system,
html[data-theme] .msg.system .text { color: var(--pz-text-2); font-size: 0.92em; }
html[data-theme] .msg .reply {
  margin-bottom: 1px;
  border-left: 0;
  color: var(--pz-text-3);
  font-size: 0.86em;
}
html[data-theme] .msg .reply::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 8px;
  margin: 0 5px 0 4px;
  border: solid var(--pz-line-strong);
  border-width: 1.5px 0 0 1.5px;
  border-top-left-radius: 6px;
  vertical-align: -0.1em;
}
html[data-theme] .msg .reply-label { color: var(--pz-text-3); }
html[data-theme] .msg .reply-name { color: var(--pz-text-2); font-weight: 650; }
html[data-theme] .msg .reply-text { color: var(--pz-text-3); }
html[data-theme] .msg .mention { border-radius: var(--r-xs); }
html[data-theme] .msg-reply-btn {
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--r-sm);
  background: var(--pz-surface);
  color: var(--pz-text-2);
  box-shadow: var(--pz-shadow-pop);
}
html[data-theme] .msg-reply-btn:hover { color: var(--pz-text); }
html[data-theme] .chat-jump-latest {
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pz-accent);
  color: var(--pz-on-accent);
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

/* композер: смайлы, капсула ввода с кнопкой отправки, строка «Поддержать · площадка» */
html[data-theme] .chat-composer {
  gap: 6px;
  padding: var(--s-2) var(--s-3) var(--s-2);
  border-top: 1px solid var(--pz-line);
  background: transparent;
}
html[data-theme] #chat-send-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 0;
  align-items: stretch;
}
html[data-theme] .quick-emotes { gap: 2px; padding: 0 2px; }
html[data-theme] .quick-emotes button { width: 32px; height: 32px; border-radius: var(--r-md); }
html[data-theme] .quick-emotes button:hover { background: var(--pz-raised); }
html[data-theme] .chat-input-wrap {
  grid-column: 1;
  grid-row: 2;
  min-height: 42px;
  border: 1px solid var(--pz-line-strong);
  border-right: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: var(--pz-canvas);
  transition: border-color var(--dur-1) ease;
}
html[data-theme] .chat-input-render { padding-top: 11px; padding-bottom: 11px; color: var(--pz-text); font-size: var(--t-14); }
html[data-theme] .chat-input-render.empty::before { color: var(--pz-text-3); }
html[data-theme] #chat-send-form:focus-within .chat-input-wrap,
html[data-theme] #chat-send-form:focus-within #chat-send-button { border-color: var(--pz-accent-line); }
html[data-theme] #chat-emote-toggle { bottom: 8px; right: 6px; width: 28px; height: 28px; color: var(--pz-text-2); border-radius: var(--r-md); }
html[data-theme] #chat-emote-toggle:hover,
html[data-theme] #chat-emote-toggle.active { color: var(--pz-text); background: var(--pz-raised); }
html[data-theme] #chat-send-button {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  align-self: stretch;
  width: 48px;
  min-height: 42px;
  height: auto;
  padding: 0;
  border: 1px solid var(--pz-line-strong);
  border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--pz-canvas);
  color: var(--pz-accent-text);
  font-size: 0;
  box-shadow: none;
  transition: border-color var(--dur-1) ease;
}
html[data-theme] #chat-send-button::before {
  content: "";
  position: absolute;
  inset: 5px 6px 5px 4px;
  border-radius: var(--r-md);
  background: var(--pz-accent);
  transition: transform var(--dur-1) var(--ease-out), filter var(--dur-1) ease;
}
html[data-theme] #chat-send-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -10px;
  background: var(--pz-on-accent);
  -webkit-mask: var(--i-send) center / contain no-repeat;
  mask: var(--i-send) center / contain no-repeat;
}
html[data-theme] #chat-send-button:hover::before { filter: brightness(1.07); }
html[data-theme] #chat-send-button:active::before { transform: scale(0.94); }
html[data-theme] #chat-send-button:disabled::before { filter: saturate(0.4) brightness(0.8); }
html[data-theme] .chat-compose-row {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 30px;
}
html[data-theme] .send-targets.hidden { display: none; }

html[data-theme] .platform-switch {
  height: 28px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--pz-text-2);
  font-size: var(--t-12);
}
html[data-theme] .platform-switch:hover { background: var(--pz-raised); color: var(--pz-text); }

/* «Поддержать» — тихая кнопка слева под полем, меню вверх */
html[data-theme] .chat-compose-row .chat-support { position: relative; flex: 0 0 auto; }
html[data-theme] .chat-support-summary {
  justify-content: flex-start;
  gap: 6px;
  height: 28px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--pz-text-2);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
html[data-theme] .chat-support-summary svg { width: 14px; height: 14px; flex-basis: 14px; color: var(--pz-live); fill: currentColor; }
html[data-theme] .chat-support-summary:hover,
html[data-theme] .chat-support[open] .chat-support-summary { background: var(--pz-raised); color: var(--pz-text); }
html[data-theme] .chat-support-caret { display: none; }
html[data-theme] .chat-compose-row .chat-support-menu {
  right: auto;
  left: 0;
  bottom: calc(100% + 6px);
  width: 240px;
  padding: 6px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--r-lg);
  background: var(--pz-raised);
  box-shadow: var(--pz-shadow-pop);
}
html[data-theme] .chat-support-item { height: 40px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--pz-text); font-size: var(--t-13); }
html[data-theme] .chat-support-item:hover { background: var(--pz-hover); }
html[data-theme] .chat-support-item small { color: var(--pz-text-3); }

/* ============ панель настроек: выезжает справа, разделы с заголовками ============ */
html[data-theme] #chat-settings-backdrop { background: rgba(0, 0, 0, 0.45); }
html[data-theme] .chat-settings {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 40;
  display: block;
  width: min(400px, 100vw);
  max-height: none;
  padding: 0 0 var(--s-6);
  border: 0;
  border-left: 1px solid var(--pz-line-strong);
  border-radius: 0;
  background: var(--pz-surface);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
  color: var(--pz-text);
  font-size: var(--t-13);
  overflow-y: auto;
  transform: none;
  animation: pz-sheet-in var(--dur-3) var(--ease-out);
}
html[data-theme] .chat-settings.hidden { display: none; }
@keyframes pz-sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-theme] .settings-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  margin: 0;
  padding: 0 var(--s-2) 0 var(--s-5);
  border-bottom: 1px solid var(--pz-line);
  background: var(--pz-surface);
}
html[data-theme] .settings-head strong { font-size: var(--t-16); font-weight: 750; }
html[data-theme] .settings-head button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--pz-text-2);
  font-size: 22px;
}
html[data-theme] .settings-head button:hover { background: var(--pz-raised); color: var(--pz-text); }
.set-group { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--pz-line); }
.set-group h3 { margin: 0 0 2px; color: var(--pz-text-3); font-size: var(--t-12); font-weight: 650; }

/* строка «подпись — сегменты» */
html[data-theme] .chat-settings .theme-setting { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--s-3); }
html[data-theme] .chat-settings .theme-setting > span { color: var(--pz-text-2); }
html[data-theme] .chat-settings .theme-picker {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--pz-canvas);
}
html[data-theme] .chat-settings .theme-picker button {
  height: 30px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--pz-text-2);
  font-size: var(--t-12);
  font-weight: 600;
  box-shadow: none;
}
html[data-theme] .chat-settings .theme-picker button + button { border-left: 0; }
html[data-theme] .chat-settings .theme-picker button:hover { color: var(--pz-text); }
html[data-theme] .chat-settings .theme-picker button.active { background: var(--pz-hover); color: var(--pz-text); box-shadow: none; }

/* палитры */
html[data-theme] .accent-setting { gap: var(--s-3); padding-top: var(--s-2); border-top: 0; }
html[data-theme] .accent-head { color: var(--pz-text-2); font-size: var(--t-13); font-weight: 500; }
html[data-theme] .accent-current { gap: var(--s-3); }
html[data-theme] .accent-current output { color: var(--pz-text); font-family: var(--pz-font); font-size: var(--t-13); font-weight: 600; text-transform: none; }
html[data-theme] .accent-swatches { grid-template-columns: repeat(auto-fill, 36px); gap: var(--s-2); }
html[data-theme] .accent-swatch { width: 36px; height: 36px; border-radius: 50%; }
html[data-theme] .accent-swatch.active { box-shadow: 0 0 0 2px var(--pz-surface), 0 0 0 4px var(--pz-text); }
html[data-theme] .custom-palette summary { color: var(--pz-text-2); font-weight: 600; cursor: pointer; }

/* ползунки: подпись слева, значение справа, трек на всю ширину под ними */
html[data-theme] .chat-settings .set-group > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name value" "range range";
  gap: 4px var(--s-2);
  align-items: center;
}
html[data-theme] .chat-settings .set-group > label > span { grid-area: name; color: var(--pz-text-2); }
html[data-theme] .chat-settings .set-group > label > output { grid-area: value; color: var(--pz-text); font-variant-numeric: tabular-nums; font-weight: 600; }
html[data-theme] .chat-settings .set-group > label > input[type="range"] { grid-area: range; width: 100%; height: 20px; margin: 0; accent-color: var(--pz-accent); }

/* тумблеры: состояние — aria-pressed/.active, подпись постоянная */
html[data-theme] .chat-settings .set-switch {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 56px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pz-text);
  font-size: var(--t-13);
  font-weight: 500;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}
html[data-theme] .chat-settings .set-switch.hidden { display: none; }
html[data-theme] .chat-settings .set-switch::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 38px;
  height: 22px;
  margin-top: -11px;
  border-radius: var(--r-pill);
  background: var(--pz-pressed);
  transition: background-color var(--dur-2) ease;
}
html[data-theme] .chat-settings .set-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 19px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--pz-text-2);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) ease;
}
html[data-theme] .chat-settings .set-switch:is(.active, [aria-pressed="true"])::before { background: var(--pz-accent); }
html[data-theme] .chat-settings .set-switch:is(.active, [aria-pressed="true"])::after { transform: translateX(16px); background: var(--pz-on-accent); }
html[data-theme] .chat-settings .set-switch:hover { color: var(--pz-text); background: transparent; }
html[data-theme] .chat-settings .set-switch:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }

/* чёрный список */
html[data-theme] .chat-settings .chat-blocks { margin: 0; border: 0; border-bottom: 1px solid var(--pz-line); border-radius: 0; background: none; }
html[data-theme] .chat-blocks-head { display: flex; align-items: center; }
html[data-theme] .chat-blocks-head strong { color: var(--pz-text-3); font-size: var(--t-12); font-weight: 650; }
html[data-theme] .chat-blocks-head button { height: 28px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: var(--pz-raised); color: var(--pz-text-2); font-size: var(--t-12); }
html[data-theme] .chat-blocks-empty { color: var(--pz-text-3); }

/* низ панели: служебные действия и разделы сайта */
.set-footer { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5) 0; }
html[data-theme] .set-footer > button,
html[data-theme] .set-footer > .chat-popout {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--pz-text);
  font-size: var(--t-13);
  font-weight: 550;
  text-align: left;
  text-decoration: none;
}
html[data-theme] .set-footer > button:hover,
html[data-theme] .set-footer > .chat-popout:hover { background: var(--pz-raised); }
html[data-theme] .set-footer .pz-sections { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: var(--s-2); }
html[data-theme] .set-footer .pz-sections a { color: var(--pz-text-2); font-size: var(--t-12); text-decoration: none; }
html[data-theme] .set-footer .pz-sections a:hover { color: var(--pz-text); text-decoration: underline; }
html[data-theme] .set-footer .build-version { color: var(--pz-text-3); font-size: var(--t-11); }

/* ============ меню ника и модальные окна чата ============ */
html[data-theme] .ctx-menu {
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--r-lg);
  background: var(--pz-raised);
  box-shadow: var(--pz-shadow-pop);
  color: var(--pz-text);
}
html[data-theme] .ctx-item { min-height: 36px; border-radius: var(--r-md); color: var(--pz-text); font-size: var(--t-13); }
html[data-theme] .ctx-item:hover { background: var(--pz-hover); }
html[data-theme] .ctx-danger { color: var(--pz-danger); }
html[data-theme] .user-history-card {
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--r-lg);
  background: var(--pz-surface);
  box-shadow: var(--pz-shadow-pop);
  color: var(--pz-text);
}

/* ============ телефон и узкое окно ============ */
@media (max-width: 800px) {
  html[data-theme] .stage > .player { flex: 0 0 auto; border-radius: 0; }
  .stream-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2);
    min-height: 44px;
    padding: 6px var(--s-3);
    border-bottom: 1px solid var(--pz-line);
  }
  .sb-channel, .sb-name, .sb-motto { display: none; }
  .sb-main { display: flex; align-items: center; gap: var(--s-2); }
  .sb-live { height: 20px; }
  .sb-live-on, .sb-live-off { display: none !important; }
  html[data-theme] .stream-bar .stream-title { font-size: var(--t-13); -webkit-line-clamp: 1; line-clamp: 1; }
  html[data-theme] .stream-bar .stream-kino { display: none; }
  html[data-theme] .stream-bar .online-stats { border: 0; background: none; }
  html[data-theme] .stream-bar .online-stats > * { height: 26px; padding: 0 6px; gap: 4px; }
  html[data-theme] .stream-bar .online-stats > * + * { border-left: 0; }
  html[data-theme] .stream-bar .online-stats .os-site,
  html[data-theme] .stream-bar .online-stats .os-stats { display: none; }
  html[data-theme] .stream-bar .online-stats .os-total { margin-left: 2px; border-left: 1px solid var(--pz-line-strong); }
  html[data-theme] .stream-bar .online-stats { font-size: var(--t-12); }

  html[data-theme] .player .controls {
    grid-template-rows: auto 44px;
    padding: 0 max(6px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  html[data-theme] .player .ctl { min-width: 40px; height: 40px; }
  html[data-theme] .player #btn-pip { display: none; }
  html[data-theme] .player #btn-fs { margin-left: 0; }

  html[data-theme] .chat { border: 0; border-radius: 0; margin: 0; }
  html[data-theme] .chat-tabs { min-height: 48px; padding: 6px 4px 6px var(--s-3); }
  .chat-title { display: none; }
  html[data-theme] .source-toggle { height: 32px; padding: 0 11px 0 9px; background: transparent; color: var(--pz-text-2); font-size: var(--t-13); }
  html[data-theme] .source-toggle.active { background: var(--pz-hover); color: var(--pz-text); }
  html[data-theme] .chat-header-btn,
  html[data-theme] .chat-hide-btn { width: 38px; height: 38px; }
  html[data-theme] .pinned { max-height: 45vh; }
  html[data-theme] .chat-composer { padding-bottom: max(var(--s-2), env(safe-area-inset-bottom)); }
  html[data-theme] .chat-input-render { font-size: 16px; } /* iOS не зумит поле */

  /* настройки на телефоне — лист снизу */
  html[data-theme] .chat-settings {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 88dvh;
    border-left: 0;
    border-top: 1px solid var(--pz-line-strong);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: max(var(--s-6), env(safe-area-inset-bottom));
    animation-name: pz-sheet-up;
  }
  @keyframes pz-sheet-up { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
  html[data-theme] .set-switch { min-height: 44px; }
  /* расположение чата и кинотеатр — только для десктопа, как и раньше */
  html[data-theme] .chat-settings .chat-pos-setting,
  html[data-theme] .chat-settings .set-group > label:has(#cinema-chat-opacity) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .player .ctl,
  html[data-theme] #chat-send-button::before,
  html[data-theme] .player .seek-track,
  html[data-theme] .chat-settings .set-switch::before,
  html[data-theme] .chat-settings .set-switch::after { transition: none; }
  html[data-theme] .chat-settings { animation: none; }
}

/* ============ «Включить звук»: иконка + действие ============ */
html[data-theme] .player .unmute { display: inline-flex; align-items: center; gap: 7px; }
html[data-theme] .player .unmute.hidden { display: none; }
html[data-theme] .player .unmute svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

/* ============ НИЗ ЧАТА: поле, отправка, вход ============
   Поле видно сразу (своя подложка и рамка), фокус — рамка акцента.
   Отправка нейтральная, пока поле пустое; акцентная — когда есть что
   отправить. Гостю вместо поля — две явные кнопки входа. */
html[data-theme] .chat-input-wrap,
html[data-theme] #chat-send-button {
  background: var(--pz-raised);
  border-color: color-mix(in srgb, var(--pz-text-2) 30%, transparent);
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
html[data-theme] .chat-input-render.empty::before { color: var(--pz-text-2); }
html[data-theme] .chat-input-render:focus-visible { outline: none; }
html[data-theme] #chat-send-form:focus-within .chat-input-wrap,
html[data-theme] #chat-send-form:focus-within #chat-send-button { border-color: var(--pz-accent); background: var(--pz-hover); }
html[data-theme] #chat-send-form:has(.chat-input-render.empty) #chat-send-button::before { background: var(--pz-pressed); }
html[data-theme] #chat-send-form:has(.chat-input-render.empty) #chat-send-button::after { background: var(--pz-text-2); }
html[data-theme] #chat-emote-toggle { color: var(--pz-text-2); }

.guest-login { display: none; grid-column: 1 / -1; grid-row: 2; gap: var(--s-2); }
html.pz-guest .guest-login { display: grid; grid-template-columns: 1fr 1fr; }
html.pz-guest #chat-send-form .chat-input-wrap,
html.pz-guest #chat-send-form #chat-send-button,
html.pz-guest #chat-send-form .quick-emotes,
html.pz-guest #chat-emote-picker,
html.pz-guest #mention-suggest { display: none; }
.guest-login button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 42px;
  padding: 0 var(--s-3);
  border: 1px solid color-mix(in srgb, var(--pz-text-2) 30%, transparent);
  border-radius: var(--r-lg);
  background: var(--pz-raised);
  color: var(--pz-text);
  font-size: var(--t-13);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.guest-login button:hover { border-color: var(--pz-accent); background: var(--pz-hover); }
.guest-login button:disabled { opacity: 0.5; cursor: not-allowed; }
.guest-login img { width: 16px; height: 16px; border-radius: 3px; }

html[data-theme] .chat-support-summary { color: var(--pz-text-2); }
html[data-theme] .chat-support-summary:hover { color: var(--pz-text); }

/* закреп раскрыт — ограниченная высота с прокруткой, кошельки в одну строку */
html[data-theme] .pinned:not(.collapsed) { max-height: 260px; }
.wallets-hint { margin: var(--s-2) 0 2px; color: var(--pz-text-2); font-size: var(--t-12); }
html[data-theme] .wallets div { grid-template-columns: 48px minmax(0, 1fr); padding: 2px 0; }
html[data-theme] .wallets code {
  overflow: hidden;
  color: var(--pz-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  cursor: copy;
}
html[data-theme] .wallets code:hover { color: var(--pz-accent-text); }

/* меню разделов в строке эфира — только на телефоне */
.sb-menu { display: none; }

/* ============ ТЕЛЕФОН ============
   Одна строка статуса с меню разделов, шапка чата с подписанными фильтрами,
   закреп строкой, понятный низ: смайлы, поле, отправка; гостю — вход. */
:root { --m-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.7 9.4 1.5 12c1.2 2.6 5 7 10.5 7s9.3-4.4 10.5-7C21.3 9.4 17.5 5 12 5zm0 11a4 4 0 110-8 4 4 0 010 8z'/%3E%3C/svg%3E"); }
@media (max-width: 800px) {
  html[data-theme] .player .unmute {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    right: auto;
    min-height: 34px;
    padding: 0 12px 0 10px;
    transform: none;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: var(--t-13);
    font-weight: 650;
    box-shadow: none;
  }

  /* строка статуса: меню · эфир · название · зрители */
  .stream-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3) 0 4px; }
  .sb-menu {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--pz-text);
  }
  .sb-menu svg { width: 22px; height: 22px; fill: currentColor; }
  .sb-menu[aria-expanded="true"] { color: var(--pz-accent-text); }
  .sb-live { height: auto; padding: 0; gap: 7px; background: none; color: var(--pz-text); font-size: var(--t-13); font-weight: 650; letter-spacing: 0; text-transform: none; }
  .sb-live strong { color: var(--pz-text); font-weight: 650; }
  .sb-live-dot { width: 7px; height: 7px; background: var(--pz-live); }
  .stage:has(.player.offline) .sb-live { background: none; }
  html[data-theme] .stream-bar .stream-title { color: var(--pz-text-2); font-weight: 500; }
  html[data-theme] .stream-bar .stream-title-close { display: none; }
  html[data-theme] .stream-bar .online-stats .os-kick,
  html[data-theme] .stream-bar .online-stats .os-vk { display: none; }
  html[data-theme] .stream-bar .online-stats .os-total { margin: 0; padding: 0; border: 0; gap: 6px; height: auto; }
  html[data-theme] .stream-bar .online-stats .os-total span { display: none; }
  html[data-theme] .stream-bar .online-stats .os-total::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--pz-text-2);
    -webkit-mask: var(--m-eye) center / contain no-repeat;
    mask: var(--m-eye) center / contain no-repeat;
  }
  html[data-theme] .stream-bar .online-stats .os-total strong { color: var(--pz-text); font-size: var(--t-13); font-weight: 650; }

  /* шапка чата: фильтры подписаны, иконки — только общепонятные (поиск, настройки) */
  html[data-theme] .chat-tabs { min-height: 48px; gap: 4px; padding: 6px 6px 6px var(--s-3); border-bottom: 1px solid var(--pz-line); }
  html[data-theme] .source-toggle { height: 32px; padding: 0 12px 0 9px; border: 1px solid transparent; background: var(--pz-raised); color: var(--pz-text); font-size: var(--t-13); }
  html[data-theme] .source-toggle.active { border-color: color-mix(in srgb, var(--pz-text-2) 30%, transparent); background: var(--pz-hover); }
  html[data-theme] .source-toggle:not(.active) { background: transparent; color: var(--pz-text-2); }
  html[data-theme] .chat-header-btn { width: 40px; height: 40px; min-width: 0; min-height: 0; flex-basis: auto; background: transparent; color: var(--pz-text); }
  html[data-theme] .chat-header-btn svg { width: 21px; height: 21px; }
  html[data-theme] .chat-header-btn[aria-expanded="true"],
  html[data-theme] .chat-header-btn[aria-pressed="true"] { background: var(--pz-raised); color: var(--pz-accent-text); }
  html[data-theme] .chat-hide-btn { display: none; }

  /* закреп строкой; раскрытый — не выше трети экрана */
  html[data-theme] .pinned { background: linear-gradient(var(--pz-accent-wash), var(--pz-accent-wash)), var(--pz-surface); }
  html[data-theme] .pinned:not(.collapsed) { max-height: 34dvh; }
  html[data-theme] .pinned-scroll,
  html[data-theme] .pinned.collapsed .pinned-scroll { padding: 10px 48px 10px 38px; }
  html[data-theme] .pinned-scroll::before { left: var(--s-4); top: 12px; width: 14px; height: 14px; }
  html[data-theme] .pinned p { font-size: var(--t-13); }
  /* развёрнутый текст идёт почти до края — место под стрелку (40 px) и «Установить» */
  html[data-theme] .pinned:not(.collapsed) p::before { width: 40px; height: 30px; }
  html[data-theme] .pinned:not(.collapsed):has(.pwa-install-offer:not(.hidden)) p::before { width: 92px; }
  html[data-theme] .pinned-title { top: 4px; right: 4px; }
  html[data-theme] .pinned-title button#pinned-toggle { position: relative; width: 40px; height: 34px; padding: 0; font-size: 0; }
  html[data-theme] .pinned-title button#pinned-toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background: var(--pz-text);
    -webkit-mask: var(--i-chevron) center / contain no-repeat;
    mask: var(--i-chevron) center / contain no-repeat;
  }
  html[data-theme] .pinned-title button#pinned-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

  /* лента */
  html[data-theme] #messages { padding-top: 4px; }
  html[data-theme] .msg { padding: 3px var(--s-4); line-height: 1.45; }
  html[data-theme] .msg .badge img { width: 0.9em; height: 0.9em; vertical-align: -0.08em; }
  html[data-theme] .msg:hover { background: transparent; }

  /* низ: смайлы — поле с отправкой — «Поддержать» и выбор площадки */
  html[data-theme] .chat-composer { gap: 0; padding: 6px var(--s-3) max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--pz-line); }
  html[data-theme] .quick-emotes button { width: 36px; height: 36px; }
  html[data-theme] .chat-input-wrap { min-height: 46px; border-radius: 23px 0 0 23px; padding-left: 4px; }
  html[data-theme] #chat-send-button { width: 52px; min-height: 46px; border-radius: 0 23px 23px 0; }
  html[data-theme] #chat-send-button::before { inset: 6px 7px 6px 5px; border-radius: 50%; }
  html[data-theme] .chat-compose-row { min-height: 0; padding-top: 4px; }
  html[data-theme] .chat-support-summary { height: 32px; padding: 0 8px 0 4px; font-size: var(--t-13); }
  .guest-login button { height: 46px; font-size: var(--t-14); }
}

/* гостю вход — крупными кнопками под лентой; в шапке не дублируем */
html[data-theme].pz-guest .account-btn { display: none; }

/* кнопка смайлов: по центру строки поля (иконка — блок, без базовой линии) */
html[data-theme] #chat-emote-toggle {
  display: grid;
  place-items: center;
  top: auto;
  bottom: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
html[data-theme] #chat-emote-toggle svg { display: block; width: 22px; height: 22px; }
html[data-theme] .chat-input-render { padding-right: 42px; }
@media (max-width: 800px) {
  html[data-theme] #chat-emote-toggle { bottom: 5px; right: 4px; width: 36px; height: 36px; }
  html[data-theme] #chat-emote-toggle svg { width: 24px; height: 24px; }
  html[data-theme] .chat-input-render { padding-right: 46px; }
}

/* точка LIVE — круг, не сплющивается в узкой панели */
html[data-theme] .player .live-dot { flex: none; }

/* смайлы — всплывающая панель над полем ввода, лента не сжимается */
html[data-theme] .chat-emote-picker {
  position: absolute;
  z-index: 25;
  left: var(--s-2);
  right: var(--s-2);
  bottom: calc(100% + 6px);
  max-height: min(360px, 52vh);
  margin: 0;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--r-lg);
  background: var(--pz-raised);
  box-shadow: var(--pz-shadow-pop);
  overflow: hidden auto;
}
html[data-theme] .chat-emote-tabs { position: sticky; top: 0; z-index: 1; background: var(--pz-raised); overflow-x: auto; scrollbar-width: none; }
html[data-theme] .chat-emote-tabs button { border-radius: var(--r-md); color: var(--pz-text-2); white-space: nowrap; }
html[data-theme] .chat-emote-tabs button.active { background: var(--pz-hover); color: var(--pz-text); }

/* низ панели настроек: действия одной ширины, по левому краю */
html[data-theme] .set-footer > button,
html[data-theme] .set-footer > .chat-popout { justify-self: stretch; width: 100%; justify-content: flex-start; }
html[data-theme] .chat-blocks-head { justify-content: space-between; }
html[data-theme] .chat-blocks-head strong { font-size: var(--t-12); }
html[data-theme] .chat-blocks-empty { padding: 4px 0; color: var(--pz-text-2); font-size: var(--t-13); }

/* меню плеера на телефоне — лист снизу: в маленький кадр 12 пунктов не влезают.
   Телефон в альбоме шире 800 px, но кадр низкий — тоже лист (тот же запрос в app.js) */
@media (max-width: 800px), (pointer: coarse) and (max-height: 500px) {
  html[data-theme] .player-settings-menu {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80; /* в <body> (см. app.js): выше чата, ниже шторки меню сайта и модалок */
    width: 100%;
    max-width: none;
    max-height: 72dvh;
    padding: 8px 8px max(12px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.55);
  }
  html[data-theme] .player-settings-row,
  html[data-theme] .player-settings-back,
  html[data-theme] .settings-options > button { min-height: 44px; font-size: var(--t-14); }
  html[data-theme] .chat-emote-picker { max-height: 46dvh; }
}
/* телефон в альбоме: лист справа, поверх колонки чата, а не во всю ширину — кадр
   остаётся открытым (Chrome на Android сам ставит на паузу беззвучное видео,
   которое закрыли целиком) */
@media (min-width: 801px) and (pointer: coarse) and (max-height: 500px) {
  html[data-theme] .player-settings-menu {
    left: auto;
    width: min(380px, 50vw);
    max-height: calc(100dvh - 12px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-lg) 0 0 0;
  }
}
/* телефон: спрятанная панель не глотает первый тап по настройкам и качеству —
   меню открывается сразу (и панель показывается). Остальные кнопки и перемотка
   по-прежнему ждут показа: случайный тап не переключит режим и не перемотает */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 800px) {
  html[data-theme] .player.pointer-idle:not(.paused):not(.offline) .controls :is(#btn-player-settings, #btn-quality, .player-settings-menu) { pointer-events: auto; }
}
@media (max-width: 800px) {
  /* лист меню плеера живёт внутри слоя панели — пока он открыт, сцена выше чата */
  html[data-theme] .stage:has(.player-settings-menu:not(.hidden)) { position: relative; z-index: 50; }
}
html[data-theme] .player-settings-menu .shazam-label { display: inline; }
html[data-theme] .player-settings-menu .shazam-mark { margin-right: 8px; }
/* без колёсика и клавиатуры эти пункты ничего не дают */
@media (hover: none) and (pointer: coarse) {
  html[data-theme] #btn-volume-wheel,
  html[data-theme] #btn-hotkeys { display: none; }
}

/* ============ ДЕСКТОП: шапка и статус поверх кадра ============ */
@media (min-width: 801px) {
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-top-in { height: 52px; padding: 0 var(--s-4); }
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-brand span { color: #fff; }
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-nav a { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-nav a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.16); color: #fff; }
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-current { display: none; }

  /* статус: только живое — LIVE с аптаймом и зрители; имя/девиз/аватар не нужны */
  html[data-theme]:not(.chat-only) .stream-bar .sb-channel,
  html[data-theme]:not(.chat-only) .stream-bar .sb-name,
  html[data-theme]:not(.chat-only) .stream-bar .sb-motto,
  html[data-theme]:not(.chat-only) .stream-bar .sb-chapters { display: none; }
  html[data-theme]:not(.chat-only) .stream-bar .sb-main { display: contents; }
  html[data-theme]:not(.chat-only) .stream-bar .sb-head { order: 1; }
  html[data-theme]:not(.chat-only) .stream-bar .online-stats {
    order: 2;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.75);
  }
  html[data-theme]:not(.chat-only) .stream-bar .online-stats > * { height: 30px; padding: 0 10px; }
  html[data-theme]:not(.chat-only) .stream-bar .online-stats > * + * { border-left: 1px solid rgba(255, 255, 255, 0.14); }
  html[data-theme]:not(.chat-only) .stream-bar .online-stats strong { color: #fff; }
  html[data-theme]:not(.chat-only) .stream-bar .online-stats .os-total span { color: rgba(255, 255, 255, 0.6); }
  html[data-theme]:not(.chat-only) .stream-bar .online-stats .os-stats { color: rgba(255, 255, 255, 0.8); }
  html[data-theme]:not(.chat-only) .stream-bar .online-stats .os-stats:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
  html[data-theme]:not(.chat-only) .stage:has(.player.offline) .stream-bar .sb-live { background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.8); }

  /* название анонса и карточка кино — под статусом справа, как раньше */
  html[data-theme]:not(.chat-only) .stream-bar .stream-title-wrap {
    position: absolute;
    top: 52px;
    right: var(--s-4);
    max-width: min(560px, 60vw);
    justify-content: flex-end;
  }
  html[data-theme]:not(.chat-only) .stream-bar .stream-title-col { flex-direction: column; align-items: flex-end; gap: 6px; }
  html[data-theme]:not(.chat-only) .stream-bar .stream-title {
    padding: 6px 12px;
    border-radius: var(--r-md);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: var(--t-14);
    font-weight: 600;
    text-align: right;
  }
  html[data-theme]:not(.chat-only) .stream-bar .stream-kino { background: rgba(14, 14, 14, 0.85); border-color: rgba(255, 255, 255, 0.12); color: #fff; }
  html[data-theme]:not(.chat-only) .stream-bar .stream-title-close { background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.8); }

  /* «Включить звук» — под шапкой, не на ней */
  html[data-theme]:not(.chat-only) .player .unmute { top: 64px; }
}

/* статус подстраивается под ширину сцены (она зависит от ширины чата) */
@media (min-width: 801px) {
  html[data-theme]:not(.chat-only) .stage { container: pz-stage / inline-size; }
  /* без чата справа вверху его кнопка «Чат» — статус левее */
  html[data-theme]:not(.chat-only) .layout.chat-hidden .stage > .stream-bar { right: 96px; }
}
@container pz-stage (max-width: 1080px) {
  html[data-theme]:not(.chat-only) .stream-bar .online-stats .os-site,
  html[data-theme]:not(.chat-only) .stream-bar .online-stats .os-kick,
  html[data-theme]:not(.chat-only) .stream-bar .online-stats .os-vk,
  html[data-theme]:not(.chat-only) .stream-bar .online-stats .os-stats { display: none; }
  html[data-theme]:not(.chat-only) .stream-bar .online-stats > * + * { border-left: 0; }
}
@container pz-stage (max-width: 760px) {
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-nav a { padding-inline: 8px; font-size: var(--t-13); }
  html[data-theme]:not(.chat-only) .stream-bar .online-stats { display: none; }
}

/* ============ ссылки на разделы поверх видео: можно скрыть ============ */
.overlay-links-btn { display: none; }
#overlay-links-toggle { display: none; }
@media (min-width: 801px) {
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-top-actions { order: 3; margin-left: 2px; gap: 2px; }
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-brand { order: 0; }
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-nav { order: 2; }
  html[data-theme]:not(.chat-only) #overlay-links-toggle { display: flex; }
  html[data-theme]:not(.chat-only) .overlay-links-btn,
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-menu-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
  }
  html[data-theme]:not(.chat-only) .overlay-links-btn:hover,
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-menu-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
  html[data-theme]:not(.chat-only) .overlay-links-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  /* ссылки видны — кнопки меню нет (разделы и так на виду) */
  html[data-theme]:not(.chat-only):not(.overlay-links-off) .stage > .pz-top-main .pz-menu-btn { display: none; }
  /* ссылки скрыты: логотип · ≡ · «показать», справа статистика */
  html[data-theme].overlay-links-off:not(.chat-only) .stage > .pz-top-main .pz-nav { display: none; }
  html[data-theme].overlay-links-off:not(.chat-only) .overlay-links-btn svg { transform: rotate(180deg); }
  html[data-theme].overlay-links-off:not(.chat-only) .stage > .pz-top-main .pz-menu-btn { order: 1; margin-left: 6px; }
  html[data-theme].overlay-links-off:not(.chat-only) .stage > .pz-top-main .pz-top-actions { order: 1; }
}
@media (min-width: 801px) {
  html[data-theme].overlay-links-off:not(.chat-only) .overlay-links-btn { order: 2; }
}
@media (min-width: 801px) {
  /* ссылки по ширине содержимого — кнопка «скрыть» сразу за ними */
  html[data-theme]:not(.chat-only) .stage > .pz-top-main .pz-nav { flex: 0 1 auto; min-width: 0; }
}
/* ссылки видны — справа короткий статус; скрыл ссылки — полная статистика */
@container pz-stage (max-width: 1180px) {
  html[data-theme]:not(.overlay-links-off):not(.chat-only) .stream-bar .online-stats .os-site,
  html[data-theme]:not(.overlay-links-off):not(.chat-only) .stream-bar .online-stats .os-kick,
  html[data-theme]:not(.overlay-links-off):not(.chat-only) .stream-bar .online-stats .os-vk,
  html[data-theme]:not(.overlay-links-off):not(.chat-only) .stream-bar .online-stats .os-stats { display: none; }
  html[data-theme]:not(.overlay-links-off):not(.chat-only) .stream-bar .online-stats > * + * { border-left: 0; }
}

/* ============ разделы сайта на компьютере: компактный выпадающий список ============
   Под кнопкой ≡ в шапке поверх видео, а не шторка во всю ширину экрана.
   Закрывается кликом мимо (прозрачная подложка) и Esc — как раньше. */
@media (min-width: 801px) {
  html[data-theme] .pz-sheet-backdrop { background: transparent; animation: none; }
  html[data-theme] .pz-sheet-card {
    top: 50px;
    left: 12px;
    right: auto;
    width: 288px;
    max-height: calc(100dvh - 64px);
    gap: 1px;
    padding: 6px;
    border: 1px solid var(--pz-line-strong);
    border-radius: var(--r-lg);
    background: var(--pz-raised);
    box-shadow: var(--pz-shadow-pop);
    font-family: var(--pz-font);
    transform-origin: top left;
    animation: pz-menu-in var(--dur-2) var(--ease-out);
  }
  @keyframes pz-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
  html[data-theme] .pz-sheet-head { display: none; }
  html[data-theme] .pz-sheet-row { gap: 10px; min-height: 0; padding: 6px 8px 6px 6px; border-radius: var(--r-md); }
  html[data-theme] .pz-sheet-row:hover { background: var(--pz-hover); }
  html[data-theme] .pz-sheet-row[aria-current="page"] { background: var(--pz-accent-wash); box-shadow: none; }
  html[data-theme] .pz-sheet-icon { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--pz-hover); }
  html[data-theme] .pz-sheet-icon svg { width: 15px; height: 15px; }
  html[data-theme] .pz-sheet-row > span:last-child { gap: 0; }
  html[data-theme] .pz-sheet-row strong { font-size: var(--t-13); font-weight: 650; line-height: 1.25; }
  html[data-theme] .pz-sheet-row small { overflow: hidden; color: var(--pz-text-2); font-size: var(--t-11); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  html[data-theme] .pz-sheet-extra { gap: 4px 12px; margin-top: 4px; padding: 8px 8px 4px; border-top-color: var(--pz-line); }
  html[data-theme] .pz-sheet-extra a { color: var(--pz-text-2); font-size: var(--t-12); }
  html[data-theme] .pz-sheet-extra a:hover { color: var(--pz-text); }
}
@media (min-width: 801px) and (prefers-reduced-motion: reduce) {
  html[data-theme] .pz-sheet-card { animation: none; }
}
@media (min-width: 801px) {
  /* ссылки скрыты — вернуть их можно в настройках; в шапке только логотип, ≡ и статистика */
  html[data-theme].overlay-links-off:not(.chat-only) .overlay-links-btn { display: none; }
}

/* ============ «LIVE · 2 с | Перемотка» — одна пара кнопок ============
   Левая — прямой эфир почти без задержки (LL), правая — обычный поток с
   записью; активная половина подсвечена. Если LL браузеру недоступен — как
   раньше: LIVE и отставание. */
html[data-theme] .player #btn-dvr { display: none; }
html[data-theme] .player.ll-capable #btn-live,
html[data-theme] .player.ll-capable #behind { display: none; }
html[data-theme] .player.ll-capable #btn-ll { grid-column: 3; margin-left: 4px; }
html[data-theme] .player.ll-capable #btn-dvr { grid-column: 4; display: inline-flex; }
html[data-theme] .player.ll-capable #btn-ll,
html[data-theme] .player.ll-capable #btn-dvr {
  height: 30px;
  min-width: 0;
  padding: 0 11px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--t-12);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
html[data-theme] .player.ll-capable #btn-ll { gap: 7px; border-radius: var(--r-pill) 0 0 var(--r-pill); padding-left: 12px; }
html[data-theme] .player.ll-capable #btn-dvr { margin-left: -2px; border-radius: 0 var(--r-pill) var(--r-pill) 0; padding-right: 12px; font-variant-numeric: tabular-nums; }
html[data-theme] .player.ll-capable #btn-ll:hover,
html[data-theme] .player.ll-capable #btn-dvr:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
html[data-theme] .player.ll-capable #btn-ll.active,
html[data-theme] .player.ll-capable #btn-dvr.active { background: var(--pz-accent); color: var(--pz-on-accent); }
html[data-theme] .player #btn-ll .ll-lag { font-weight: 600; opacity: 0.8; }
html[data-theme] .player #btn-ll .live-dot { width: 7px; height: 7px; margin: 0; background: currentColor; opacity: 0.6; }
html[data-theme] .player.rtc-mode:not(.paused) #btn-ll .live-dot { background: var(--pz-live); opacity: 1; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25); }
html[data-theme] .player:not(.ll-capable) #btn-ll { display: none; }

/* полоса в LL видна: мы на краю эфира; подсказка, главы и тепло чата — по
   расчётной шкале эфира, клик уводит в запись ровно на это время */
html[data-theme] .player.rtc-mode .seek { display: flex; }
html[data-theme] .player.rtc-mode .seek-fill { width: 100% !important; }
html[data-theme] .player.rtc-mode .seek-knob { left: 100% !important; }

/* LL-знакомство больше не нужно — режим включён по умолчанию */
html[data-theme] #ll-intro { display: none !important; }
@media (max-width: 800px) {
  /* на телефоне пара компактнее: «● LIVE | Перемотка», без «· 2 с» */
  html[data-theme] .player.ll-capable #btn-ll,
  html[data-theme] .player.ll-capable #btn-dvr { height: 32px; min-height: 0; padding: 0 9px; font-size: var(--t-12); }
  html[data-theme] .player.ll-capable #btn-ll { padding-left: 10px; gap: 6px; }
  html[data-theme] .player #btn-ll .ll-lag { display: none; }
  html[data-theme] .player .q-btn { padding: 0 6px; }
}

/* ============ анонс (тема стрима) и карточка фильма ============ */
@media (min-width: 801px) {
  /* крестик — рядом с названием, а не посреди колонки */
  html[data-theme]:not(.chat-only) .stream-bar .stream-title-wrap { align-items: flex-start; }
  html[data-theme]:not(.chat-only) .stream-bar .stream-title-close { margin-top: 5px; }
  html[data-theme]:not(.chat-only) .stream-bar .stream-kino { max-width: 320px; }
}
html[data-theme] .stream-bar .stream-kino-cta small { display: block; margin-top: 1px; color: rgba(255, 255, 255, 0.6); font-weight: 500; white-space: normal; }
html[data-theme] .stream-bar .stream-kino-cta small code { font-family: var(--pz-mono); font-size: 0.95em; }

@media (max-width: 800px) {
  /* строка статуса — сетка: ≡ · LIVE и время · название · зрители;
     карточка фильма, если анонс про кино, — второй строкой */
  .stream-bar { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: var(--s-2); }
  html[data-theme] .stream-bar .sb-main,
  html[data-theme] .stream-bar .stream-title-wrap:not(.hidden),
  html[data-theme] .stream-bar .stream-title-col { display: contents; }
  html[data-theme] .stream-bar .sb-menu { grid-column: 1; grid-row: 1; }
  html[data-theme] .stream-bar .sb-head { grid-column: 2; grid-row: 1; }
  html[data-theme] .stream-bar .stream-title { grid-column: 3; grid-row: 1; min-width: 0; font-size: var(--t-12); }
  html[data-theme] .stream-bar .online-stats { grid-column: 4; grid-row: 1; }
  html[data-theme] .stream-bar .sb-chapters { display: none; }
  html[data-theme] .stream-bar .stream-kino:not(.hidden) {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    gap: var(--s-2);
    max-width: none;
    margin: 0 0 8px 4px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--pz-line-strong);
    border-radius: var(--r-md);
    background: var(--pz-raised);
    color: var(--pz-text);
  }
  html[data-theme] .stream-bar .stream-kino-poster { width: 24px; height: 36px; }
  html[data-theme] .stream-bar .stream-kino-body { display: flex; flex: 1; align-items: center; gap: var(--s-2); min-width: 0; }
  html[data-theme] .stream-bar .stream-kino-eyebrow,
  html[data-theme] .stream-bar .stream-kino-chips span:not(.sk-zhora):nth-child(n+3) { display: none; }
  html[data-theme] .stream-bar .stream-kino-name { flex: 1; min-width: 0; font-size: var(--t-13); }
  html[data-theme] .stream-bar .stream-kino-chips { flex-wrap: nowrap; }
  html[data-theme] .stream-bar .stream-kino-cta { display: inline; flex: none; font-size: 0; }
  html[data-theme] .stream-bar .stream-kino-chips span:nth-child(2) { display: none; }
  html[data-theme] .stream-bar .stream-kino-cta::before { content: "Оценить"; font-size: var(--t-12); font-weight: 700; color: var(--pz-accent-text); }
}

/* ============ вне эфира: «самое время посмотреть записи» ============
   Картинка OFFLINE — приглушённым фоном, поверх — плашка с последним эфиром,
   заголовок, «Все записи», «Разбудить» и полка последних записей. На телефоне
   плеер растёт по содержимому (кадра всё равно нет). */
html[data-theme] .player.offline .offline-image { filter: brightness(0.32) saturate(0.6); }
html[data-theme] .player .offline-hero,
html[data-theme] .player .offline-peek,
html[data-theme] .player .offline-info { display: none !important; }
.offline-panel { display: none; }
html[data-theme] .player.offline .offline-panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-6);
  padding: 88px var(--s-8) var(--s-8);
  background: linear-gradient(180deg, rgb(0 0 0 / 0.1) 30%, rgb(0 0 0 / 0.72));
  color: #fff;
}
.op-head { display: grid; justify-items: start; gap: var(--s-2); }
.op-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--r-pill); background: rgb(0 0 0 / 0.55); color: rgb(255 255 255 / 0.82); font-size: var(--t-12); font-weight: 650; }
.op-chip[hidden] { display: none; }
.op-title { margin: 0; color: #fff; font-size: clamp(26px, 3.4vw, 44px); font-weight: 850; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.op-sub { margin: 0; color: var(--pz-accent-on-dark); font-size: clamp(16px, 1.6vw, 21px); font-weight: 750; letter-spacing: -0.01em; }
.op-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
html[data-theme] .op-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin: 0; padding: 0 var(--s-5);
  border: 1px solid rgb(255 255 255 / 0.22); border-radius: var(--r-md); background: rgb(0 0 0 / 0.5); box-shadow: none;
  color: #fff; font-size: var(--t-14); font-weight: 700; text-decoration: none; cursor: pointer; filter: none;
  transition: background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
html[data-theme] .op-btn:hover { background: rgb(255 255 255 / 0.12); }
html[data-theme] .op-btn:active { transform: scale(0.97); }
html[data-theme] .op-btn svg { width: 17px; height: 17px; flex: none; fill: currentColor; }
html[data-theme] .op-btn-accent { border-color: transparent; background: #ffb000; background: var(--pz-accent); color: var(--pz-on-accent); }
html[data-theme] .op-btn-accent:hover { background: var(--pz-accent); filter: brightness(1.06); }
html[data-theme] .op-btn-accent svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] .op-btn.offline-wake.active { border-color: rgb(255 255 255 / 0.3); background: rgb(255 255 255 / 0.12); color: #fff; }
html[data-theme] .op-btn.offline-wake.hidden { display: none; }

/* полка: 4 в ряд на широком кадре, дальше — прокрутка вбок */
.op-shelf { display: grid; grid-auto-columns: max(200px, calc((100% - 3 * var(--s-3)) / 4)); grid-auto-flow: column; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.op-shelf::-webkit-scrollbar { display: none; }
.op-shelf[hidden] { display: none; }
.op-card { display: grid; align-content: start; gap: 5px; min-width: 0; color: #fff; text-decoration: none; scroll-snap-align: start; }
.op-card-wrap { position: relative; min-width: 0; scroll-snap-align: start; }
html[data-theme] .op-forget { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; width: 28px; height: 28px; margin: 0; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.66); color: #fff; cursor: pointer; opacity: 0; transition: opacity var(--dur-1) ease; }
html[data-theme] .op-forget svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.op-card-wrap:hover .op-forget, html[data-theme] .op-forget:focus-visible { opacity: 1; }
@media (hover: none) { html[data-theme] .op-forget { opacity: 1; } }
.op-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: rgb(255 255 255 / 0.08); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1); }
.op-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out); }
.op-card:hover .op-thumb img { transform: scale(1.04); }
.op-thumb b { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 5px; background: rgb(0 0 0 / 0.78); font-size: var(--t-11); font-weight: 700; font-variant-numeric: tabular-nums; }
.op-thumb i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(255 255 255 / 0.3); }
.op-thumb i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--pz-accent); }
.op-card small { color: rgb(255 255 255 / 0.65); font-size: var(--t-12); font-weight: 600; }
.op-card small.op-continue { color: var(--pz-accent-on-dark); }
.op-card strong { display: -webkit-box; overflow: hidden; font-size: var(--t-13); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.op-card:hover strong { color: var(--pz-accent-on-dark); }
/* низкий кадр (окно ниже ~640): полка не помещается — только заголовок и кнопки */
@media (min-width: 801px) and (max-height: 640px) { .op-shelf { display: none; } }

@media (max-width: 800px) {
  /* кадра нет — плеер растёт по содержимому, полка листается пальцем */
  html[data-theme] .stage > .player.offline { aspect-ratio: auto; height: auto; min-height: 56.25vw; }
  /* видео в потоке растягивало плеер — вне эфира оно просто лежит под панелью */
  html[data-theme] .player.offline #video { position: absolute; inset: 0; height: 100%; }
  html[data-theme] .player.offline .offline-panel { position: relative; inset: auto; gap: var(--s-4); padding: var(--s-5) var(--s-4) var(--s-4); background: rgb(0 0 0 / 0.55); }
  .op-title { font-size: 26px; }
  .op-sub { font-size: 16px; }
  .op-actions { flex-wrap: nowrap; }
  html[data-theme] .op-btn { min-height: 42px; }
  html[data-theme] .op-btn-accent { flex: 1; justify-content: center; }
  /* «Разбудить» на телефоне — одним колокольчиком рядом с «Все записи» */
  html[data-theme] .op-btn.offline-wake { width: 42px; padding: 0; justify-content: center; }
  .offline-wake #offline-wake-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .op-shelf { grid-auto-columns: 62%; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); scroll-padding: 0 var(--s-4); }
}

/* Поверх видео (плеер; шапка и полоса эфира на ПК лежат на кадре) подложка тёмная
   в любой теме — там «акцент для текста» = вариант, читаемый на тёмном. */
html[data-theme] .player { --pz-accent-text: var(--pz-accent-on-dark); }
@media (min-width: 801px) {
  html[data-theme]:not(.chat-only) .stage > :is(.pz-top-main, .stream-bar) { --pz-accent-text: var(--pz-accent-on-dark); }
}