/* =====================================================================
   x-live · theme.css
   Темы оформления (светлая / полночь / моно / золото), TikTok-визуал
   ленты с видео, полировка компонентов. Загружается после style.css
   и extra.css, поэтому переопределяет их.
   ===================================================================== */

/* ---------- Поверхности и палитры тем ---------- */
:root { color-scheme: light; }
html[data-theme="midnight"] { color-scheme: dark; }

:root, html[data-theme="light"] {
  --bg: #f2f2ee; --bg2: #e6e6e1; --ink: #0a0a0a; --muted: #71716c;
  --line: rgba(20,20,20,.12); --panel: rgba(255,255,255,.66);
  --glass: rgba(255,255,255,.5); --accent: #0a0a0a; --accent-ink: #fff;
}
html[data-theme="midnight"] {
  --bg: #0b0b0d; --bg2: #151519; --ink: #f2f2ef; --muted: #9b9ba2;
  --line: rgba(255,255,255,.13); --panel: rgba(26,26,31,.74);
  --glass: rgba(42,42,49,.55); --accent: #f2f2ef; --accent-ink: #0b0b0d;
}
html[data-theme="gold"] {
  --bg: #f6f1e6; --bg2: #ece3d1; --ink: #221a0e; --muted: #8a7a5e;
  --line: rgba(122,92,32,.24); --panel: rgba(255,255,255,.66);
  --glass: rgba(255,248,230,.55); --accent: #221a0e; --accent-ink: #f6f1e6;
}
html[data-theme="neon"], html[data-theme="berry"] { color-scheme: dark; }
html[data-theme="neon"] {
  --bg: #07070f; --bg2: #12122a; --ink: #eafcff; --muted: #8d9fd0;
  --line: rgba(120,235,255,.18); --panel: rgba(14,16,38,.76);
  --glass: rgba(34,40,84,.55); --accent: #25f4ee; --accent-ink: #06121a;
}
html[data-theme="berry"] {
  --bg: #140611; --bg2: #22101f; --ink: #ffeef7; --muted: #b48ba3;
  --line: rgba(255,80,150,.2); --panel: rgba(30,10,26,.76);
  --glass: rgba(60,20,50,.5); --accent: #ff2d77; --accent-ink: #fff2f7;
}

body { background: var(--bg); color: var(--ink); transition: background .35s ease, color .35s ease; }

/* ---------- Тема-зависимые поверхности ---------- */
.sidebar, .topbar { background: var(--panel); border-color: var(--line); box-shadow: 0 8px 32px rgba(0,0,0,.06); }
.nav-item { color: var(--muted); }
/* Наведение — только там, где есть курсор: на тач-экранах «залипший» hover
   перебивал прозрачную подложку нижней навигации. */
@media (hover: hover) {
  .nav-item:hover { background: var(--glass); color: var(--ink); }
}
/* Активная вкладка: подложка — поверхность темы (--bg2), а не полупрозрачная
   белая «пилюля» (--glass), которая на тёмном фоне давала светлое пятно с
   нечитаемым белым текстом. Индикатор — тонкая акцентная полоса слева. */
.nav-item.active { background: var(--bg2); color: var(--ink); box-shadow: inset 3px 0 var(--accent); }
.switch { color: var(--muted); }
.switch.active { color: var(--ink); }
.switch.active:after { background: var(--accent); }
.search { border-bottom-color: var(--muted); color: var(--muted); }
.search input { color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.profile-dot { background: var(--accent); color: var(--accent-ink); }
.create-button, .publish, .start-live, .set-danger { background: var(--accent); color: var(--accent-ink); }
.create-button:hover, .publish:hover { filter: brightness(1.2); }
.follow-banner, .trend, .suggest-card, .sound-card, .fx-card, .stat-card,
.chart-card, .set-row, .notice, .dm-side, .conv-pane, .live-room { background: var(--glass); border-color: var(--line); }
.action { color: var(--muted); }
.action:hover, .action.liked, .action.saved { color: var(--ink); background: var(--glass); }
.view-heading p, .inbox-panel > p, .modal-card > p, .comments-card > p, .dm-head p { color: var(--muted); }
.post-head span { color: var(--muted); }
.profile-tabs button { color: var(--muted); }
.profile-tabs .active { color: var(--ink); border-color: var(--accent); }

/* ---------- TikTok-стиль: лента как видео ---------- */
.feed { max-width: 620px; }
.post-main { min-width: 0; }
.media {
  height: clamp(480px, 68vw, 720px);
  border-radius: 16px; box-shadow: 0 18px 48px rgba(0,0,0,.28);
  background: #000;
}
.media:after { background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.28), transparent 22%); }
.media-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #000; }
.media.has-video:before { transform: none !important; }
.media.has-video .play { z-index: 3; }
.media .play { z-index: 2; border: 1.5px solid rgba(255,255,255,.8); background: rgba(10,10,10,.3); backdrop-filter: blur(6px); }
.post:hover .media:before { transform: scale(1.03); }
.media-footer { position: absolute; left: 16px; right: 84px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.media-footer .views { font: 11px "DM Mono","JetBrains Mono"; color: #fff; text-shadow: 0 1px 5px #000; letter-spacing: .4px; }
.sound-chip { border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.42); backdrop-filter: blur(10px); color: #fff; border-radius: 99px; font-size: 10.5px; }
.sound-chip .mini-disc { font-size: 12px; }
.rail { position: absolute; right: 8px; bottom: 92px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rail-btn { border: 0; background: transparent; color: #fff; display: grid; justify-items: center; gap: 3px; font: 10px "DM Mono","JetBrains Mono"; text-shadow: 0 1px 4px #000; }
.rail-btn b { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #fff; border-radius: 50%; background: rgba(20,20,20,.42); font-size: 13px; backdrop-filter: blur(6px); }
.rail-btn > b { font-size: 13px; }
.rail-btn .saved { background: #fff; color: #000; }
.rail-btn .liked { color: #ff4d5a; }
.rail-btn small { font-size: 9.5px; color: #fff; }
.rail-btn:hover b { transform: scale(1.08); }
.post-copy { font-size: 12.5px; line-height: 1.55; padding: 8px 2px 2px; }
.post-copy b { color: var(--ink); }
.actions { gap: 2px; flex-wrap: wrap; }
.action { padding: 9px 13px; font-size: 11px; font-weight: 700; border-radius: 10px; }
.action i { font-style: normal; }
.action.liked i { color: #ff4d5a; }
.follow-banner { border-radius: 12px; }
.badge { font-style: normal; color: var(--ink); }

/* ---------- Плеер с реальным видео ---------- */
#player-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#player-art .player-hearts { z-index: 3; }
#player-progress { transition: width .12s linear; }

/* Перемотка видео в плеере */
.player-top-actions { display: flex; align-items: center; gap: 8px; }
.player-more { display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255,255,255,.16); color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; cursor: pointer; line-height: 1; }
.player-more:hover { background: rgba(255,255,255,.32); }
.player-scrub { display: flex; align-items: center; gap: 10px; }
.player-progress { flex: 1; cursor: pointer; position: relative; }
.player-progress:hover span { filter: brightness(1.15); }
.player-time { font-size: 11px; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Кнопка «ещё» (⋯) у своих публикаций и мини-постов */
.more-btn { border: 0; background: none; color: var(--muted); font-size: 17px; font-weight: 800; line-height: 1; padding: 0 3px; cursor: pointer; }
.more-btn:hover { color: var(--ink); }
.mini-del { position: absolute; top: 6px; right: 6px; z-index: 2; border: 0; background: rgba(0,0,0,.55); color: #fff; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; }
.mini-del:hover { background: rgba(255,59,92,.9); }

/* ---------- Переключатель темы в шапке ---------- */
.theme-toggle {
  border: 1px solid var(--line); background: var(--glass); color: var(--ink);
  width: 34px; height: 34px; border-radius: 50%; font-size: 15px;
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.theme-toggle svg { width: 17px; height: 17px; display: block; }

/* ---------- Выбор темы в настройках ---------- */
.theme-row { align-items: flex-start; flex-wrap: wrap; }
.theme-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-swatch {
  border: 1px solid var(--line); background: transparent; padding: 6px; text-align: center;
  width: 68px; border-radius: 10px; cursor: pointer; transition: .18s;
}
.theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.theme-swatch .sw { display: block; width: 100%; height: 36px; border-radius: 7px; margin-bottom: 4px; }
.theme-swatch small { font-size: 9px; color: var(--muted); font-weight: 700; }
.theme-swatch.light .sw { background: linear-gradient(135deg, #f2f2ee, #d8d8d2); }
.theme-swatch.midnight .sw { background: linear-gradient(135deg, #0b0b0d, #2e2e36); }
.theme-swatch.gold .sw { background: linear-gradient(135deg, #f6f1e6, #c9a86a); }
.theme-swatch.neon .sw { background: linear-gradient(135deg, #07070f, #25f4ee 60%, #ff2d55); }
.theme-swatch.berry .sw { background: linear-gradient(135deg, #140611, #ff2d77); }

/* ---------- Тематические акценты (#7) ----------
   Каждая тема красит интерактив своим акцентом: hover-свечение, градиент
   обложки эфира и «живой» пульс индикатора. Перебиваем только то, что
   держит читаемость, — базовые поверхности остаются из палитры темы. */
.publish, .follow:not(.following) {
  background: var(--accent); color: var(--accent-ink);
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.publish:hover, .follow:not(.following):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--accent) 35%, transparent);
}
.nav-item.active { color: var(--accent); }
/* Кнопка эфира с включённым фильтром — подсвечивается акцентом темы */
.live-control.on { border-color: var(--accent); color: var(--ink); }
.live-control.on span { color: var(--accent); font-weight: 700; }
/* Индикатор «LIVE»: красная точка дышит — и в списке комнат, и в самом эфире. */
.live-pill::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #ff3232; margin-right: 6px; vertical-align: middle;
  animation: xlive-pulse 1.9s ease-out infinite;
}
@keyframes xlive-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 50, 50, .55); }
  70% { box-shadow: 0 0 0 11px rgba(255, 50, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 50, 50, 0); }
}
/* Неоновая и «ягодная» темы: стеклянные поверхности светятся изнутри */
html[data-theme="neon"] .sidebar, html[data-theme="neon"] .topbar,
html[data-theme="berry"] .sidebar, html[data-theme="berry"] .topbar {
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 10px 40px color-mix(in oklab, var(--accent) 18%, transparent);
}
html[data-theme="neon"] .nav-item.active { text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 70%, transparent); }
html[data-theme="berry"] .publish:hover, html[data-theme="neon"] .publish:hover { filter: brightness(1.06); }
/* Светлым темам — мягкая тень вместо свечения, чтобы не «кричало» */
html[data-theme="light"] .publish:hover, html[data-theme="gold"] .publish:hover {
  filter: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

@media (prefers-reduced-motion: reduce) {
  .live-pill::before, .rec-btn.recording { animation: none; }
  .publish, .follow { transition: none; }
  body { transition: none; }
}

/* ---------- Мини-видео в профиле ---------- */
.mini-post { position: relative; overflow: hidden; }
.mini-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Мелкая полировка ---------- */
.view h1 { letter-spacing: -.5px; }
.trend, .suggest-card, .stat-card, .chart-card, .set-row { border-radius: 14px; }
.notice { border-radius: 0; }
.modal-card, .comments-card, .share-card, .sound-card, .fx-modal, .user-card { border-radius: 16px; }
.dropzone { border-radius: 12px; }
.icon-close:hover { color: var(--accent); }
dialog::backdrop { background: rgba(6,6,8,.55); backdrop-filter: blur(6px); }

/* =====================================================================
   Адаптивность: гриды, топбар, мобильная навигация
   ===================================================================== */

/* Гриды карточек: треки сжимаются ниже min-content (не вылезают за экран),
   количество колонок задаётся брейкпоинтами: 3 → 2 → 1 */
.trend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.live-grid, .sound-grid, .effect-grid, .suggest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trend, .suggest-card, .live-room, .stat-card, .sound-card, .fx-card { min-width: 0; }
.trend b, .trend small, .suggest-card b, .suggest-card small,
.live-room b, .live-room small, .sound-card b, .sound-card small, .fx-card b { overflow-wrap: anywhere; }
@media (max-width: 1024px) and (min-width: 761px) {
  .trend-grid, .live-grid, .sound-grid, .effect-grid, .suggest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .trend-grid, .live-grid, .sound-grid, .effect-grid, .suggest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
  .trend-grid, .suggest-grid { grid-template-columns: 1fr; }
}

/* Мобильный топбар: поиск сжимается, кнопка темы в потоке (не наезжает) */
@media (max-width: 760px) {
  .media { height: calc(100vw - 16px); border-radius: 14px; }
  .media-footer { right: 70px; }
  .rail { right: 4px; bottom: 76px; gap: 12px; }
  .rail-btn b { width: 36px; height: 36px; font-size: 11px; }
  .theme-pick { width: 100%; }
  .theme-toggle { position: static; flex: none; }
  .topbar { gap: 8px; }
  .feed-switch { flex: none; }
  .search { flex: 1 1 auto; min-width: 0; max-width: 150px; }
  .profile-dot { flex: none; }
}

/* =====================================================================
   Мобильная нижняя навигация (9 вкладок):
   — вкладки делят ширину равномерно (flex 1 1 0), горизонтального скролла
     и min-width нет → подписи не обрезаются и не наезжают друг на друга;
   — у неактивных вкладок показана только иконка, у активной — иконка,
     контрастная подпись и тонкая акцентная плашка-подчёркивание снизу;
   — safe-area: панель ниже не залезает под системный жест iPhone.
   ===================================================================== */
@media (max-width: 760px) {
  .sidebar { height: calc(62px + env(safe-area-inset-bottom)); padding: 2px 2px calc(2px + env(safe-area-inset-bottom)); }
  .content { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  #toast { bottom: calc(28px + env(safe-area-inset-bottom)); }
  .nav { display:flex; gap:0; overflow:visible; }
  .nav-item { flex:1 1 0; min-width:0; display:grid; justify-items:center; align-content:center; gap:2px; padding:7px 2px 5px; border-radius:0; background:transparent; font-size:9px; }
  .nav-item svg { width:20px; height:20px; }
  .nav-label { display:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Активной вкладке — бо́льшая доля ширины (2.2 против 1), чтобы подпись
     (макс. ~56 px у «Интересное») помещалась на 320 px без обрезки:
     316/(8+2.2)*2.2 ≈ 68 px на слот активной вкладки. */
  .nav-item.active { flex:2.2 1 0; background:transparent; color:var(--ink); box-shadow: inset 0 -2px var(--accent); }
  .nav-item.active .nav-label { display:block; font-weight:800; }
}
@media (max-width: 380px) {
  .topbar { padding: 0 10px; gap: 6px; }
  .feed-switch { gap: 8px; }
  .search { max-width: 118px; }
  .dm-wrap { padding: 12px 8px; }
  .view-heading, .inbox-panel, .profile-panel, .empty-view { padding: 28px 12px; }
}
@media (max-width: 340px) {
  .trend-grid, .suggest-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* Планшет (слева сайдбар 244px → контент узкий): live и чаты в одну колонку */
@media (max-width: 900px) {
  .live-bottom { grid-template-columns: 1fr; }
  .live-actions { flex-wrap: wrap; }
  .live-chat { order: 2; }
}
@media (max-width: 860px) {
  .dm-wrap { grid-template-columns: 1fr; }
  .dm-wrap.chat-open .dm-side { display: none; }
  .dm-wrap:not(.chat-open) .conv-pane { display: none; }
}

/* Сообщения: список чатов не расширяет страницу на мобильных */
.dm-side { min-width: 0; overflow: hidden; }
@media (max-width: 760px) {
  .dm-item b, .dm-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* =====================================================================
   Модальные окна под темы (тёмные в «Полночь», тёплые в «Золото» и т.д.)
   ===================================================================== */
.modal-card, .comments-card, .share-card, .fx-modal, .user-card {
  background: var(--panel); color: var(--ink); border-color: var(--line);
}
/* Класс .sound-card служит и строкой каталога (рядком, extra.css:31), и
   содержимым модалки. Внутри диалога рядная раскладка превращает карточку в
   бесконечную строку с горизонтальным скроллом — переопределяем на колонку. */
#sound-modal .sound-card {
  display: block; width: min(460px, calc(100vw - 32px)); padding: 28px 26px;
  background: var(--panel); color: var(--ink); overflow-x: hidden;
}
#sound-modal .sound-card > * { min-width: 0; }
#sound-modal .sound-card p { margin: 0; }
#sound-modal .sound-hero { align-items: center; }
#sound-modal .sound-hero > div { min-width: 0; }
#sound-modal .sound-hero h2 { overflow-wrap: anywhere; }
.modal-card textarea, .comment-input input, .field, .set-select,
.modal-card input:not([type="hidden"]):not([type="file"]) {
  background: var(--bg2); border-color: var(--line); color: var(--ink);
}
.modal-card textarea::placeholder, .comment-input input::placeholder { color: var(--muted); }
.comment { border-bottom-color: var(--line); }
.c-body small { color: var(--muted); }
.c-like, .c-del { color: var(--muted); }
.c-like.liked { color: #ff4d5a; }
.icon-close { color: var(--muted); }
.dropzone { border-color: var(--muted); }
.dropzone small { color: var(--muted); }
.dropzone b { color: var(--ink); }
.tag { border-color: var(--line); color: var(--ink); }
.comment-input button { background: var(--accent); color: var(--accent-ink); }
.share-opt { color: var(--muted); }
.share-opt i { background: var(--accent); color: var(--accent-ink); }
.share-opt.alt i { background: var(--glass); color: var(--ink); }
.qr-box { border-top-color: var(--line); }
.qr-canvas .on { background: var(--ink); }
.qr-canvas .off { background: var(--bg2); }
.sound-card h2 { color: var(--ink); }
.sound-hero small, #sound-author, #sound-plays { color: var(--muted); }
.wave span { background: var(--accent); }
.sound-actions button { border-color: var(--line); color: var(--ink); }
.sound-actions button:first-child { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fx-item { border-color: var(--line); }
.fx-item b { color: var(--ink); }
.user-card p { color: var(--muted); }
.ustats { color: var(--muted); }
.ustats b { color: var(--ink); }
.sound-posts { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* =====================================================================
   Фикс цвета текста во всех темах.
   Проблема: в тёмных темах (color-scheme: dark) кнопки и поля получали
   белый UA-цвет (buttontext), а полупрозрачные светлые поверхности в
   «Полночи» давали светлый текст на светлом фоне → текст не читался.
   Здесь кнопки/поля наследуют цвет, а все «жёсткие» цвета заменены
   на переменные темы. Загружается последним → переопределяет всё.
   ===================================================================== */

/* Кнопки и поля: наследуют цвет текста (а не белый UA-цвет в тёмных схемах) */
button, input, select, textarea { color: inherit; }

/* Диалоги: style.css задаёт dialog { color:#111 } (чёрный). В тёмных темах это
   даёт тёмный текст на тёмном фоне (например «Жалоб нет — всё чисто.» в админке).
   Переопределяем цвет диалогов на цвет темы, а пустые состояния — на muted. */
dialog { color: var(--ink); }
.saved-empty { color: var(--muted); }

/* Вкладки «Интересное» и «Входящие» */
.xtab, .ntab { color: var(--muted); }
.xtab.active, .ntab.active { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }

/* Уведомления: имена и описания */
.notice b, .notice.unread b { color: var(--ink); }
.notice span, .notice .mark { color: var(--muted); }

/* Кнопка подписки */
.follow { border-color: var(--muted); }
.follow.following { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Сообщения */
.dm-item span, .dm-item .dm-time, .conv-empty, .conv-empty b, .conv-empty small,
.conv-head .online, .typing { color: var(--muted); }
.conv-input input { background: var(--bg2); border-color: var(--line); color: var(--ink); }

/* Live-студия: поверхности и текст под тему */
.stage { background: var(--panel); border-color: var(--line); box-shadow: 0 25px 70px rgba(0,0,0,.18); }
.live-chat { background: var(--glass); border-color: var(--line); color: var(--ink); }
.live-chat-input { border-top-color: var(--line); }
.live-chat-input input { color: var(--ink); }
.live-chat-input input::placeholder { color: var(--muted); }
.live-chat-input button { background: var(--accent); color: var(--accent-ink); }
.live-control, .invite-guest { background: var(--glass); border-color: var(--line); color: var(--ink); }
.live-control span, .live-control.off { color: var(--muted); }
.gift-btn { background: var(--glass); border-color: var(--line); color: var(--ink); }
.gift-btn small { color: var(--muted); }
.coin-chip { background: var(--glass); color: var(--ink); }
.live-heading p, .live-status small { color: var(--muted); }

/* Сцена эфира: сетка подстраивается под число участников (1 = весь экран) */
.stage { border-radius: 20px; overflow: hidden; }
.stream-frame { border-radius: 14px; }
.stage-grid.g1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.stage-grid.g2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
.stage-grid.g3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
.stage-grid.g4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.stage-grid.g6 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
.stage-grid.g7, .stage-grid.g8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
.stage-grid.g9 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

/* Раскладка «Один крупно» (как в TikTok LIVE): выбранный участник большой слева */
.stage-grid.featured { grid-template-columns: 2.2fr 1fr; grid-auto-rows: 1fr; }
.stage-grid.featured > .stream-frame.big { grid-column: 1; grid-row: span 2; box-shadow: 0 0 0 2px var(--accent); }
.stage-grid.featured > .stream-frame.pinned-big { box-shadow: 0 0 0 2px #ffd60a; }

@media (max-width: 760px) {
  .stage-grid.g2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
  .stage-grid.g3 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; }
  .stage-grid.g3 .stream-frame:last-child { grid-column: 1 / -1; }
  .stage-grid.g7, .stage-grid.g8 { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; }
  .stage-grid.g9 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto auto auto; }
  .stage-grid.featured { grid-template-columns: 1fr; grid-auto-rows: minmax(130px, auto); }
  .stage-grid.featured > .stream-frame.big { grid-column: 1; grid-row: auto; }
}

/* Панель подарков — отдельный ряд, больше кнопки, читаемо */
.gift-bar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px;
  padding: 10px 0 2px; margin-top: 10px; border-top: 1px solid var(--line);
  max-height: 216px; overflow-y: auto; overscroll-behavior: contain; }
.gift-group { display: grid; gap: 4px; }
.gift-group-title { font: 9px "DM Mono","JetBrains Mono"; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; padding-left: 2px; }
.gift-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.gift-btn { flex: none; min-width: 48px; height: 50px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; font-size: 18px; cursor: pointer; }
.gift-btn.fx { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.gift-btn small { font-size: 9px; font-weight: 700; color: var(--muted); }
.gift-btn:hover { background: var(--bg2); transform: translateY(-1px); }
.coin-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 7px 12px; margin-left: auto; white-space: nowrap; }

/* Анимация дорогих подарков (#21) */
.gift-float.big { font-size: 104px; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .45)); animation-duration: 3.4s; }
.gift-float.trail { opacity: .8; font-size: 62px; }
.gift-banner { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 99px;
  background: var(--panel); border: 1px solid var(--accent); color: var(--ink);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28); animation: giftBanner 3.2s ease both; pointer-events: none; }
.gift-banner span { font-size: 26px; }
.gift-banner b { font-size: 15px; font-weight: 800; }
.gift-banner small { font: 10px "DM Mono","JetBrains Mono"; color: var(--muted); }
@keyframes giftBanner {
  0% { opacity: 0; transform: translateX(-50%) scale(.86); }
  14%, 76% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-float.big, .gift-float.trail, .gift-banner { animation: none; }
  .gift-banner { opacity: 1; }
}

/* Удалённое видео участника: слой над заглушкой. Заглушка (аватар и имя)
   остаётся видимой, пока поток реально не подключён — об этом говорит data-state. */
.guest-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; background: #000; opacity: 0; transition: opacity .3s ease; }
.guest-video[data-state="live"] { opacity: 1; }
.stream-frame:has(.guest-video[data-state="live"]) .guest-art { display: none; }

/* Кнопки служебной панели (#20) */
.staff-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.staff-tools .outline { position: static; padding: 7px 12px; font-size: 11px; border-radius: 10px; }
.staff-tools .outline.danger { border-color: #ff4d5a; color: #ff4d5a; }
.staff-tools .outline.danger:hover { background: #ff4d5a; color: #fff; }

/* Кнопки управления эфиром — вертикальная стопка, компактные */
.live-actions { flex-direction: column; }
.live-control { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; cursor: pointer; }
.live-control span { margin: 0; }
.invite-guest, .start-live { border-radius: 12px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.live-chat { border-radius: 16px; }
.chat-list { height: 132px; line-height: 1.55; }
.chat-list p { margin: 0 0 6px; }
.chat-list p b { color: var(--accent); }
.chat-list p.mod-msg b { color: #ffd60a; }
.live-chat-input button { border-radius: 10px; }

/* Раскладка эфира: переключатель поверх сцены */
.live-layout-tools { position: absolute; z-index: 7; top: 12px; right: 12px; display: flex; gap: 6px; }
.layout-btn { border: 0; background: rgba(0, 0, 0, .55); color: #fff; width: 32px; height: 32px; border-radius: 9px; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); }
.layout-btn:hover { background: rgba(0, 0, 0, .75); }
.layout-btn.active { background: #fe2c55; color: #fff; }

/* Меню управления участником (⋮) */
.frame-menu { position: absolute; z-index: 6; top: 8px; right: 8px; border: 0; background: rgba(0, 0, 0, .5); color: #fff; width: 26px; height: 26px; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: .9; backdrop-filter: blur(4px); }
.frame-menu:hover { background: #fe2c55; }
.mod-badge { position: absolute; z-index: 5; bottom: 8px; right: 8px; font-style: normal; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.mute-badge { position: absolute; z-index: 5; bottom: 8px; left: 8px; font-style: normal; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }

/* Контекстное меню участника */
.guest-menu { position: fixed; z-index: 80; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); padding: 6px; min-width: 205px; }
.guest-menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; color: var(--ink); font-size: 12.5px; font-weight: 600; padding: 9px 11px; border-radius: 9px; cursor: pointer; text-align: left; }
.guest-menu button span { font-size: 14px; }
.guest-menu button:hover { background: var(--glass); }
.guest-menu button.danger { color: #ff5252; }


/* Второстепенные подписи */
.suggest-card small, .sound-card small, .stat-card small,
.studio-head p, .set-row small, .studio-post-row .row-metrics { color: var(--muted); }

/* Строки с постами в студии: фон под тему (иначе светлый в «Полночи» → невидимый текст) */
.studio-post-row { background: var(--glass); }

/* Пузыри сообщений: раньше светлый фон + светлый текст в «Полночи» → нечитаемо.
   Теперь входящие — поверхность темы, исходящие — акцент с контрастным текстом. */
.msg { background: var(--bg2); color: var(--ink); }
.msg.me { background: var(--accent); color: var(--accent-ink); }
.msg .t { opacity: .6; }

/* Карточки LIVE в «Интересном»: это тёмные «превью эфиров» (как в TikTok),
   theme.css случайно делал их фон светлым при белом тексте → текст исчезал.
   Возвращаем тёмную карточку с белым текстом во всех темах. */
.live-room { background: #111; color: #fff; border-color: rgba(255,255,255,.16); }
.live-room b { color: #fff; }
.live-room small { color: #bbb; }
.live-room .live-pill { color: #fff; }
.live-room .avatars span { border-color: #111; }

/* «+рост» в статистике: читаемый зелёный в тёмных темах */
.stat-card span, .chart-head span { color: var(--pos, #2c7a2c); }
html[data-theme="midnight"] .stat-card span, html[data-theme="midnight"] .chart-head span { --pos: #4caf50; }
/* в «Моно» тема ч/б (grayscale), тёмно-зелёный даёт читаемый серый после фильтра */

/* Рамка большой аватарки в профиле под тему */
.avatar.large { border-color: var(--bg); }

/* Кнопка «Сменить» в редакторе профиля: класс .outline задаёт absolute-позицию
   для кнопки на странице профиля, из-за чего в модалке кнопка улетала в правый
   верхний угол поверх заголовка. Здесь возвращаем её в поток рядом с аватаром. */
.avatar-pick .outline { position: static; }

/* Кнопки .outline в общем случае должны быть в потоке. style.css задаёт
   .outline { position:absolute; right:26px; top:20px } — из-за этого кнопки
   «Прочитано» (входящие), «Обновить» (студия), «Управление/Открыть/Выйти»
   (настройки) улетали в правый верхний угол и накладывались друг на друга
   и на аватарку. Возвращаем в поток, absolute оставляем только в профиле. */
.outline { position: static; }
.profile-info > .outline, .profile-actions .outline { position: static; }

/* =====================================================================
   Фичи в стиле TikTok: двойное касание-лайк, списки подписчиков,
   хэштеги/упоминания, поиск с результатами, ответы на комментарии,
   вкладка «Эфиры» в профиле, deep-ссылки.
   ===================================================================== */

/* Двойное касание по видео — сердце-лайк */
.media-heart {
  position: absolute; left: 50%; top: 50%; z-index: 6;
  transform: translate(-50%, -50%) scale(0); font-size: 84px; color: #ff2d55;
  pointer-events: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
  animation: mediaHeart .9s ease-out forwards;
}
@keyframes mediaHeart {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* Статистика профиля — кликабельна */
.stats b { cursor: pointer; transition: opacity .15s; }
.stats b:hover { opacity: .7; }

/* Списки подписчиков / подписок */
.relations-card {
  width: min(420px, calc(100vw - 32px)); background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px; padding: 28px; position: relative;
}
.relations-card h2 { margin: 0 0 16px; font-size: 22px; }
.relations-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.rtab { border: 0; background: none; padding: 9px 2px; font: 11px "DM Mono","JetBrains Mono"; color: var(--muted); }
.rtab.active { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }
.relation-list { max-height: 330px; overflow: auto; display: grid; gap: 2px; }
.relation-item { display: flex; gap: 12px; align-items: center; padding: 10px 6px; border-radius: 10px; }
.relation-item:hover { background: var(--glass); }
.relation-item .avatar { width: 40px; height: 40px; font-size: 11px; flex: none; }
.relation-item b { flex: 1; font-size: 13px; }
.relation-item small { display: block; color: var(--muted); font-size: 10px; }
.relation-item .follow { margin-left: 0; flex: none; }

/* Хэштеги и упоминания в подписи */
.hashtag { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 800; cursor: pointer; font: inherit; }
.mention { border: 0; background: none; padding: 0; color: var(--ink); font-weight: 800; cursor: pointer; font: inherit; }
.mention:hover { text-decoration: underline; }

/* Результаты поиска */
.search-results { display: grid; gap: 22px; max-width: 760px; margin: 0 auto; padding: 24px; }
.search-results h3 { margin: 0 0 10px; font-size: 15px; }
.sresult-row {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line);
  background: var(--glass); border-radius: 12px; text-align: left; font: inherit; color: var(--ink);
  cursor: pointer; width: 100%;
}

/* ================== Аккаунты: экран входа / регистрации ================== */
.auth-gate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; overflow: auto; }
.auth-gate.hidden { display: none; }
.auth-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 32px 28px 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); text-align: center; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 22px; letter-spacing: .18em; }
.auth-brand span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.auth-brand b { color: var(--ink); font-weight: 800; }
.auth-tag { color: var(--muted); margin: 8px 0 22px; font-size: 12px; letter-spacing: .08em; }
.auth-tabs { display: flex; gap: 6px; background: var(--bg2); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.auth-tab { flex: 1; border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 13px; padding: 9px 0; border-radius: 9px; cursor: pointer; }
.auth-tab.active { background: var(--accent); color: var(--accent-ink); }
.auth-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.auth-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.auth-field.hidden { display: none; }
.auth-field input { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--ink); font-size: 14px; font-weight: 600; outline: none; }
.auth-field input:focus { border-color: var(--accent); }
.auth-submit { margin-top: 6px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 14px; padding: 13px 0; cursor: pointer; }
.auth-submit:hover { opacity: .9; }
.auth-quick { margin-top: 8px; border: 1px dashed var(--line); background: none; color: var(--muted); border-radius: 12px; padding: 10px 0; font-size: 12px; font-weight: 600; cursor: pointer; }
.auth-quick:hover { color: var(--ink); border-color: var(--accent); }
.auth-error { color: #ff5252; font-size: 12px; font-weight: 600; min-height: 16px; margin: 12px 0 0; }
.auth-foot { color: var(--muted); font-size: 11px; margin: 16px 0 0; }

/* ================== Меню аккаунтов ================== */
.account-menu { position: fixed; z-index: 90; width: 272px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); padding: 8px; }
.account-menu.hidden { display: none; }
.acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acct-head b { display: block; font-size: 14px; color: var(--ink); }
.acct-head small { color: var(--muted); font-size: 12px; }
.acct-sub { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--muted); padding: 4px 10px 6px; }
.acct-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--ink); padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; }
.acct-item:hover { background: var(--glass); }
.acct-item.active { background: var(--glass); }
.acct-item .acct-mid { flex: 1; min-width: 0; }
.acct-item .acct-mid b { display: block; font-size: 13px; }
.acct-item .acct-mid small { color: var(--muted); font-size: 11px; font-weight: 500; }
.acct-item > i { color: var(--accent); font-style: normal; font-weight: 800; }
.acct-divider { height: 1px; background: var(--line); margin: 6px 0; }
.avatar.small { width: 34px; height: 34px; font-size: 13px; flex: none; display: grid; place-items: center; border-radius: 50%; }

/* ================== Админ-панель ================== */
.admin-card { width: min(680px, 92vw); max-height: 82vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg2); border-radius: 18px; padding: 26px 24px; }
.admin-card > p { color: var(--muted); margin: 0; }
.admin-card > h2 { margin: 2px 0 16px; color: var(--ink); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.atab { border: 0; background: var(--bg); color: var(--muted); font-weight: 700; font-size: 12px; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.atab.active { background: var(--accent); color: var(--accent-ink); }
.admin-list { overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.admin-row { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; }
.admin-row .thumb { width: 46px; height: 58px; border-radius: 8px; flex: none; }
.admin-mid { flex: 1; min-width: 0; }
.admin-mid b { display: block; font-size: 13px; color: var(--ink); }
.admin-mid small { color: var(--muted); font-size: 11px; }
.admin-acts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.a-mini { border: 1px solid var(--line); background: var(--glass); color: var(--ink); font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 8px; cursor: pointer; }
.a-mini:hover { border-color: var(--accent); }
.a-mini.warn { color: #e8a13a; }
.a-mini.danger { color: #ff5252; }
.a-mini.static { cursor: default; color: var(--muted); border-style: dashed; }
.admin-search { display: flex; margin-bottom: 10px; }
.admin-search input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 13px; padding: 9px 12px; }
.admin-search input:focus { outline: none; border-color: var(--accent); }
.admin-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.afilter { border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.afilter.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.stat-cell { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.stat-cell b { font-size: 20px; color: var(--ink); }
.stat-cell span { font-size: 11px; color: var(--muted); }
.stat-cell small { font-size: 10px; color: var(--accent); }
.admin-section { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 10px 0 0; }
.admin-num { width: 84px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 12px; padding: 6px 8px; }
.avatar.small img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.admin-thumb { width: 46px; height: 58px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg2); }

/* ================== Верификация аккаунта (18+ и видеозвонок) ================== */
.profile-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.verify-btn { border-color: var(--line); }
.verify-btn:hover { border-color: var(--accent); }

.age-check { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.age-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.age-hint { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; margin-top: 4px; }

/* Модалка заявки на верификацию */
#verify-modal .verify-card { width: min(440px, 92vw); background: var(--bg2); color: var(--ink); border-radius: 18px; padding: 26px 24px; }
#verify-modal .verify-card > p { color: var(--muted); margin: 0; }
#verify-modal .verify-card > h2 { margin: 2px 0 16px; color: var(--ink); }
.verify-body { font-size: 13px; color: var(--ink); line-height: 1.55; }
.verify-intro { margin: 0 0 6px; }
.verify-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.verify-state > span { font-size: 34px; }
.verify-state b { font-size: 15px; color: var(--ink); }
.verify-state small { color: var(--muted); font-size: 12px; max-width: 300px; }
.verify-state.ok > span { color: #2fb45f; }
.verify-state.wait > span { color: #e8a13a; }
.verify-state.bad > span { color: #ff5252; }
.verify-age { margin: 14px 0 4px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: var(--bg); }
.verify-age small { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; line-height: 1.45; }
#verify-modal .publish { margin-top: 10px; width: 100%; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 14px; padding: 13px 0; cursor: pointer; }

/* Видеозвонок администратора */
#verify-call { position: fixed; inset: 0; z-index: 95; background: rgba(5, 5, 7, .96); backdrop-filter: blur(16px); display: grid; place-items: center; padding: 20px; }
#verify-call.hidden { display: none; }
.vc-card { width: min(720px, 100%); background: #0e0e11; border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; padding: 20px; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.vc-head { text-align: center; color: #fff; margin-bottom: 16px; }
.vc-head .live-pill { margin-bottom: 8px; }
.vc-head b { display: block; font-size: 19px; margin: 8px 0 2px; }
.vc-head small { color: #b9b9c0; font-size: 12px; }
.vc-stage { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.vc-main { position: relative; border-radius: 16px; overflow: hidden; background: #1a1a20; aspect-ratio: 16/10; display: grid; place-items: center; }
.vc-main video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.vc-fallback { text-align: center; color: #fff; }
.vc-fallback b { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, #222, #888); font-size: 28px; margin: 0 auto 10px; }
.vc-fallback span { color: #ccc; font-size: 13px; }
.vc-tag { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 99px; }
.vc-guest { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #1a1a20, #2c2c35); display: grid; place-items: center; aspect-ratio: 4/5; }
.vc-guest-art { text-align: center; color: #fff; animation: vcPulse 1.8s infinite; }
.vc-guest-art b { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #333, #777); font-size: 32px; margin: 0 auto 10px; border: 2px solid rgba(255, 255, 255, .4); }
.vc-guest-art span { font-size: 13px; color: #ddd; }
.vc-cam { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .65); color: #ff3b5c; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
@keyframes vcPulse { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }
.vc-note { margin: 16px auto 0; max-width: 560px; text-align: center; color: #ffd166; font-size: 12.5px; line-height: 1.5; }
.vc-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.vc-buttons button { border: 0; border-radius: 12px; font-weight: 800; font-size: 13px; padding: 12px 18px; cursor: pointer; }
.vc-approve { background: #2fb45f; color: #fff; }
.vc-approve:hover { filter: brightness(1.1); }
.vc-reject { background: #ff3b5c; color: #fff; }
.vc-reject:hover { filter: brightness(1.1); }
.vc-end { background: rgba(255, 255, 255, .14); color: #fff; }
.vc-end:hover { background: rgba(255, 255, 255, .24); }

@media (max-width: 640px) {
  .vc-stage { grid-template-columns: 1fr; }
  .vc-guest { aspect-ratio: 16/9; }
}
.sresult-row + .sresult-row { margin-top: 6px; }
.sresult-row .avatar { width: 40px; height: 40px; font-size: 11px; flex: none; }
.sresult-row b { font-size: 13px; display: block; }
.sresult-row small { font-size: 10px; color: var(--muted); display: block; }
.sresult-row .disc { flex: none; }
.sresult-row .thumb { width: 44px; height: 58px; background: var(--bg); background-size: cover; background-position: center; border-radius: 8px; flex: none; }
.sresult-row .row-metrics { margin-left: auto; font: 10px "DM Mono","JetBrains Mono"; color: var(--muted); flex: none; }
.sresult-row .follow { flex: none; margin-left: 0; }

/* Ответы на комментарии */
.c-reply-btn { border: 0; background: none; font-size: 10px; color: var(--muted); padding: 4px 0; cursor: pointer; }
.c-replies { margin: 8px 0 2px 14px; padding-left: 12px; border-left: 2px solid var(--line); display: grid; gap: 8px; }
.c-reply { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; }
.c-reply .c-avatar { width: 22px; height: 22px; font-size: 8px; }
.c-reply-form { display: flex; gap: 6px; margin: 6px 0 2px 14px; }
.c-reply-form input { flex: 1; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); padding: 6px 9px; font-size: 11px; border-radius: 99px; outline: none; }
.c-reply-form input::placeholder { color: var(--muted); }
.c-reply-form button { border: 0; background: var(--accent); color: var(--accent-ink); width: 26px; border-radius: 50%; font-size: 13px; }
.c-reply-form.hidden { display: none; }
/* Уведомления — кликабельные */
.notice { cursor: pointer; }
.notice .mark { cursor: pointer; }

/* Вкладка «Эфиры» в профиле */
.mini-post .live-badge { position: absolute; z-index: 3; left: 6px; bottom: 6px; font: 9px "DM Mono","JetBrains Mono"; background: rgba(0,0,0,.55); color: #fff; padding: 3px 6px; border-radius: 6px; letter-spacing: .5px; }
.profile-live-cta { text-align: center; padding: 50px 20px; border: 1px dashed var(--line); border-radius: 16px; background: var(--glass); }
.profile-live-cta span { font-size: 38px; display: block; margin-bottom: 10px; }
.profile-live-cta b { font-size: 15px; display: block; }
.profile-live-cta small { color: var(--muted); display: block; margin: 6px 0 16px; }
.profile-live-cta .start-live { max-width: none; }
.profile-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 14px; }
.profile-live-grid .mini-post { position: relative; border-radius: 12px; overflow: hidden; }
.profile-live-grid .mini-live-views { position: absolute; z-index: 3; right: 6px; top: 6px; font: 9px "DM Mono","JetBrains Mono"; background: rgba(0,0,0,.55); color: #fff; padding: 3px 6px; border-radius: 6px; }

/* Уведомления кликабельны */
.notice { cursor: pointer; }
.notice:hover { background: var(--glass); }
.notice .mark { cursor: pointer; }

/* Компактные вкладки профиля на узких экранах (4 вкладки не должны ломать вёрстку) */
@media (max-width: 420px) {
  .profile-tabs { gap: 14px; overflow-x: auto; }
  .profile-tabs button { font-size: 11px; padding: 11px 0; white-space: nowrap; }
}
/* На мобильных не даём сетке постов (отрицательные поля) создавать горизонтальную прокрутку */
@media (max-width: 760px) {
  .content { overflow-x: clip; }
}

/* ---------- Служебное присутствие в эфире (#16) ---------- */
.staff-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:14px; padding:10px 14px;
  background:linear-gradient(135deg, rgba(255,45,85,.10), rgba(37,244,238,.08)); }
.staff-bar.hidden { display:none; }
.staff-title { display:inline-flex; align-items:center; gap:7px; font-size:12px; letter-spacing:.04em; }
.staff-title svg { width:15px; height:15px; }
.staff-bar small { color:var(--muted); font-size:11.5px; }
.staff-tools { display:inline-flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.staff-tools button { font:600 11.5px "DM Mono","JetBrains Mono"; color:var(--ink); background:var(--glass);
  border:1px solid var(--line); border-radius:9px; padding:7px 11px; cursor:pointer; }
.staff-tools button:hover { border-color:var(--accent); color:var(--accent); }
.staff-tools button.danger:hover { border-color:#ff5252; color:#ff5252; }
.stage.spectating .stream-frame.host video { display:none; }
.stream-frame.guest.is-hidden { outline:1px dashed rgba(37,244,238,.65); outline-offset:-4px; }
.hidden-badge { position:absolute; z-index:5; top:8px; left:8px; font-style:normal;
  font:9px "DM Mono","JetBrains Mono"; letter-spacing:.05em; background:rgba(0,0,0,.6); color:#25f4ee;
  padding:3px 6px; border-radius:6px; }
/* Личное обращение: чип над полем ввода и отдельный стиль реплики */
.whisper-tag { display:inline-flex; align-items:center; gap:6px; margin:8px 12px 0;
  font:11px "DM Mono","JetBrains Mono"; color:var(--accent); background:var(--glass);
  border:1px solid var(--line); border-radius:20px; padding:5px 10px; }
.whisper-tag.hidden { display:none; }
.whisper-tag svg { width:13px; height:13px; }
.whisper-tag button { border:0; background:none; color:inherit; font-size:14px; cursor:pointer; line-height:1; }
.chat-list p.whisper { color:#8ff6ef; border-left:2px solid rgba(37,244,238,.6); padding-left:8px; }
/* Выбор прав модератора (#13) */
.perm-head { font:11px "DM Mono","JetBrains Mono"; color:var(--muted); padding:6px 8px 8px; letter-spacing:.04em; }
.perm-chip { display:inline-flex !important; width:auto !important; margin:2px 4px 2px 0 !important;
  border:1px solid var(--line) !important; border-radius:20px !important; padding:6px 10px !important;
  font-size:11px !important; color:var(--muted); }
.perm-chip.on { border-color:var(--accent) !important; color:var(--accent); background:rgba(255,45,85,.10); }
.perm-save { margin-top:6px; justify-content:center !important; background:var(--accent) !important;
  color:var(--accent-ink, #fff) !important; }

/* =====================================================================
   Низкие и альбомные экраны, iOS-адресная строка (#14)
   — 100dvh вместо 100vh: на iPhone и Android браузер «прячет» адресную
     строку при скролле, и vh считает высоту по максимально видимой области,
     из-за чего нижняя навигация уплывает под палец. dvh держит текущую.
   — Всё строго внутри desktop-брейкпоинта: ниже 761px `.sidebar` — это
     нижняя панель высотой 62px, и любое правило без медиа-запроса перебивает
     её по каскаду (theme.css подключается последним), раздувая панель до
     полного экрана.
   ===================================================================== */
@media (min-width: 761px) {
  @supports (height: 100dvh) {
    .app-shell { min-height: 100dvh; }
    .sidebar { height: 100dvh; }
    .dm-wrap { height: calc(100dvh - 120px); }
  }
  .dm-wrap { min-height: min(480px, calc(100dvh - 120px)); }
}

/* Модалки режем по высоте экрана на всех размерах — переполнение скроллом,
   а не растягиванием за пределы вьюпорта. */
.modal-card, .comments-card { max-height: calc(100dvh - 24px); overflow: auto; }
@supports not (height: 100dvh) {
  .modal-card, .comments-card { max-height: calc(100vh - 24px); }
}
@media (min-width: 761px) {
  .comments-list, .relation-list { max-height: min(330px, calc(100dvh - 260px)); }
}

@media (min-width: 761px) and (orientation: landscape) and (max-height: 620px) {
  .stage-grid { height: min(75vw, calc(100dvh - 150px)); min-height: 0; }
  .multi-stage { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .live-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .topbar { height: 52px; }
  .sidebar { padding-top: 12px; }
  .brand { margin-bottom: 16px; }
  .modal-card, .comments-card { padding: 18px 20px; }
  .dropzone { min-height: 92px; }
}

/* Экран «сервер не отвечает» и метка демо-режима (#23) */
.gate-title { margin: 6px 0 0; font-size: 19px; }
.gate-text { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted, #a5a5a5); }
.gate-addr { margin: 8px 0 0; font-size: 12px; color: #8a8a8a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
#server-gate .auth-submit { margin-top: 18px; }
.gate-demo { margin-top: 10px; width: 100%; padding: 10px 12px; font-size: 12px; border-radius: 12px; }
.demo-ribbon {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(8px + env(safe-area-inset-top)); z-index: 120;
  padding: 6px 14px; border-radius: 999px; font-size: 11px; letter-spacing: .3px;
  background: rgba(255, 178, 0, .14); color: #ffc24d; border: 1px solid rgba(255, 178, 0, .4);
  backdrop-filter: blur(8px); pointer-events: none;
}

/* «Запомнить меня» в форме входа (#24) */
.remember-row { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; margin: 2px 0 4px; }
.remember-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }