:root {
  color-scheme: dark;
  --primary: #ffffff;
  --primary-glow: rgba(255, 255, 255, 0.2);
  --accent-red: #ef4444;
  --accent-cyan: #06b6d4;
  --accent-gold: #f59e0b;
  --bg-dark: #090b10;
  --panel-bg: rgba(13, 17, 28, 0.92);
  --panel-border: rgba(255, 255, 255, 0.12);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;

  /* Dynamic Accent Theme System (Default: Emerald / Изумруд) */
  --accent-primary: #10b981;
  --accent-secondary: #047857;
  --accent-rgb: 16, 185, 129;
  --accent-glow: rgba(16, 185, 129, 0.35);
  --accent-gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  --border-hover: rgba(16, 185, 129, 0.45);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-dark);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  color: var(--text-main);
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea {
  font-family: inherit;
}

#canvas-container, #canvas-container canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

/* Center Crosshair */
#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  z-index: 10;
  display: block;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.15s ease;
}

#crosshair.crosshair-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Interaction Prompt — styled to match the bottom HUD */
#interaction-prompt {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 14, 26, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: #f1f5f9;
  letter-spacing: 0.2px;
  pointer-events: none;
  z-index: 15;
  display: none;
}

#interaction-prompt kbd {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════
   TOP BAR — YouTube-style gradient overlay
   Matches bottom HUD: gradient, flat buttons
═══════════════════════════════════════════════ */
#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px 20px 20px;
  background: none !important;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 20;
  pointer-events: none;  /* gradient passthrough */
  transition: opacity 0.35s ease;
}

#top-bar > * {
  pointer-events: auto;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-fullscreen-toggle {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: all 0.15s ease;
}

.btn-fullscreen-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-fullscreen-toggle.active {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Brand — no pill, just text */
.brand-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 4px 0;
}

.brand-title {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(212, 175, 100, 0.4));
  flex-shrink: 0;
}

.modal-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(212, 175, 100, 0.45));
  flex-shrink: 0;
  /* Тот же приём, что у логотипа в меню Tab (см. .tablist-brand:hover
     .tablist-logo): при наведении логотип приподнимается и загорается.
     Здесь он появляется на главном экране — первом, куда попадает
     игрок, — и до этого был просто картинкой. */
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.modal-title:hover .modal-logo {
  transform: scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 0 14px rgba(212, 175, 100, 0.95)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

/* Room badge & Access Logs Dropdown */
.room-display-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.room-badge {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
}

.room-badge:hover,
.room-badge.active,
.room-display-wrap:hover .room-badge {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.room-badge-arrow {
  font-size: 10px;
  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
  line-height: 1;
}

.room-display-wrap.open .room-badge-arrow,
.room-display-wrap:hover .room-badge-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* Semi-transparent chat-style dropdown dropping DOWN from top HUD */
.room-logs-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-width: 90vw;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: auto;
  animation: fadeInLogsDropdown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInLogsDropdown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.room-logs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.room-logs-count-badge {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
  padding: 1px 7px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.room-logs-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 2px;
}

.room-logs-list::-webkit-scrollbar {
  width: 4px;
}

.room-logs-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.room-logs-empty {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 12px 6px;
  font-style: italic;
}

/* Individual room log entry in chat-bubble style */
.room-log-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.room-log-item:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
}

.room-log-item.log-join {
  border-left: 3px solid #22c55e;
}

.room-log-item.log-leave {
  border-left: 3px solid #ef4444;
}

.room-log-icon {
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.room-log-body {
  flex: 1;
  min-width: 0;
}

.room-log-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.room-log-user {
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.room-log-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.room-log-text {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  word-break: break-word;
}

.top-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Top bar buttons — flat pill style matching bottom controls */
.btn-icon {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s, border-color 0.15s;
}

.btn-icon:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
}

/* Кнопки верхнего HUD без подписей — только иконка.
   Размеры взяты из #btn-hotkeys-help (min-width 36px, font-size 14px),
   чтобы иконка не «плавала» относительно соседних кнопок. */
.btn-icon-square {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.btn-icon-square:hover {
  transform: scale(1.06);
}

/* Мобильные правила выше (body.is-mobile-device .btn-icon и @media
   max-width: 768px) с !important уменьшают шрифт и отступы до 10.5px/7px.
   Здесь они перебиваются: иначе иконка меньше самой кнопки. */
body.is-mobile-device .btn-icon-square,
body.is-touch-device .btn-icon-square {
  min-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  font-size: 14px !important;
  border-radius: 20px !important;
  gap: 0 !important;
}

@media (max-width: 768px) {
  .btn-icon-square {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 14px !important;
    border-radius: 20px !important;
    gap: 0 !important;
  }
}

.btn-icon.muted {
  border-color: var(--accent-red);
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

.btn-icon.muted:hover {
  border-color: #f87171;
  background: rgba(239, 68, 68, 0.26);
  color: #fee2e2;
}

/* Lights Button State */
#btn-toggle-lights.lights-on {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* Hotkeys help '?' button */
#btn-hotkeys-help {
  font-size: 14px;
  padding: 6px 12px;
  min-width: 36px;
  justify-content: center;
}

/* Mic VAD meter & toggle button */
.mic-meter-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer !important;
  user-select: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  pointer-events: auto !important;
}

.mic-meter-wrap * {
  pointer-events: none;
}

.mic-meter-wrap:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.mic-meter-wrap:active {
  transform: translateY(0) scale(0.97);
}

.mic-meter-wrap.muted {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.mic-meter-wrap.muted:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.65);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}

.mic-meter-wrap.active {
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.mic-meter-wrap.active:hover {
  border-color: rgba(34, 197, 94, 0.65);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}

#btn-mic-toggle {
  display: none !important;
}

.meter-track {
  width: 48px;
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.meter-fill {
  width: 0%;
  height: 100%;
  background: #22c55e;
  border-radius: 4px;
  transition: width 0.08s ease, background 0.15s ease;
}

.vad-threshold-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 2px #000000;
  pointer-events: none;
  z-index: 2;
  transition: left 0.05s ease;
  transform: translateX(-50%);
}

.vad-threshold-marker::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #ffffff;
}

/* ═══════════════════════════════════════════
   FLOATING CHAT — top-left corner
   Styled to match top HUD
═══════════════════════════════════════════ */
#chat-float {
  position: fixed;
  top: 64px;
  left: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#chat-float.visible,
#chat-float.input-active {
  opacity: 1;
  pointer-events: auto;
}

#chat-messages-float {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 2px 2px 8px;
  pointer-events: auto;
  direction: rtl; /* Places scrollbar on the LEFT */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.05);
}

#chat-messages-float > * {
  direction: ltr; /* Keeps message text normal left-to-right */
  text-align: left;
}

#chat-messages-float::-webkit-scrollbar {
  display: block;
  width: 4px;
}

#chat-messages-float::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

#chat-messages-float::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

#chat-messages-float::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.chat-msg-float {
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 5px 12px;
  font-size: 13px;
  color: #f1f5f9;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.7);
  animation: fadeInMsg 0.2s ease;
  word-break: break-word;
  transition: background 0.15s ease;
}

.chat-msg-float:hover {
  background: rgba(0, 0, 0, 0.45);
}

@keyframes fadeInMsg {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-msg-float .chat-sender {
  font-weight: 700;
  font-size: 12px;
  margin-right: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.chat-msg-float .chat-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 4px;
}

#chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 4px 6px 4px 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

#chat-input-row:focus-within {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.55);
}

#chat-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  user-select: text;
  padding: 4px 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

#chat-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  text-shadow: none;
}

#chat-send-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

#chat-send-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  transform: scale(1.08);
}



/* ═══════════════════════════════════════════
   YOUTUBE-STYLE CINEMA HUD — bottom bar
   Auto-hides on mouse inactivity, shows on hover
═══════════════════════════════════════════ */
#cinema-hud {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 0 0 12px 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0) 100%);
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#cinema-hud.hud-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#cinema-hud.hud-fading {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

#cinema-hud.hud-visible > * {
  pointer-events: auto;
}

#cinema-hud:not(.hud-visible) > * {
  pointer-events: none;
}

/* Progress bar row. position: relative остаётся якорем для превью
   и подсказки времени; индикатор синхронизации переехал в верхний худ. */
#hud-progress-row {
  padding: 0 16px 6px;
  position: relative;
}

/* Индикатор синхронизации. Показывает, на сколько секунд наш экран
   отстаёт (позе) или опережает (впереди) остальных зрителей. Включается
   в Настройки → Экран 3D; по умолчанию скрыт, чтобы не мешать картинке. */
.cinema-sync-indicator {
  position: absolute;
  right: 16px;
  bottom: 100%;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 40;
}

.sync-indicator-icon {
  font-size: 12px;
  line-height: 1;
}

.sync-indicator-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #86efac;
}

/* Отстаём: жёлтый. Опережаем: голубой. Сильное расхождение: красный. */
.cinema-sync-indicator.is-late .sync-indicator-value {
  color: #fbbf24;
}

.cinema-sync-indicator.is-ahead .sync-indicator-value {
  color: #7dd3fc;
}

.cinema-sync-indicator.is-critical .sync-indicator-value {
  color: #f87171;
}

.cinema-sync-indicator.is-critical {
  border-color: rgba(248, 113, 113, 0.35);
}

/* В верхнем худе индикатор — обычный элемент ряда кнопок, а не
   плашка над полоской: там нет контекста позиционирования HUD,
   и превью-картинка больше его не перекрывает. */
#top-bar .cinema-sync-indicator,
.top-buttons .cinema-sync-indicator {
  position: static;
  right: auto;
  bottom: auto;
  margin-bottom: 0;
  padding: 5px 11px;
  background: rgba(0, 0, 0, 0.35);
  align-self: center;
}

/* На телефоне цифра важнее подписи — экономим место. */
@media (max-width: 640px) {
  .sync-indicator-label {
    display: none;
  }
  .cinema-sync-indicator,
  #top-bar .cinema-sync-indicator {
    right: 10px;
    padding: 4px 9px;
    font-size: 11px;
  }
  #top-bar .cinema-sync-indicator {
    right: auto;
  }
}

/* Совсем узкий экран: верхний хувд не вмещает и подпись кнопки поиска,
   и иконку индикатора — ряд уезжал за правый край на 37 px. */
@media (max-width: 440px) {
  #btn-open-catalog .btn-catalog-text {
    display: none;
  }
  .cinema-sync-indicator .sync-indicator-icon {
    display: none;
  }
}

/* 360 px: даже с иконкой кнопка поиска и индикатор не влезают в ряд.
   Гардероб убираем — на телефоне он есть в нижней панели. */
@media (max-width: 370px) {
  body.is-mobile-device #top-bar #btn-open-wardrobe,
  body.is-touch-device #top-bar #btn-open-wardrobe {
    display: none;
  }
}

.yt-progress-track {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  cursor: pointer;
  transition: height 0.15s ease;
  touch-action: none;
}

/* Expand touch/hit area so fingers on phones easily grab the track */
.yt-progress-track::before {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: 0;
  right: 0;
}

.yt-progress-track:hover,
.yt-progress-track.is-seeking {
  height: 8px;
}

.yt-progress-buffer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  pointer-events: none;
  transition: width 0.25s ease-out;
  z-index: 1;
}

.yt-progress-hover {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  pointer-events: none;
  transition: width 0.05s linear;
  z-index: 2;
}

.yt-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: #ef4444;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
}

.yt-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%) scale(0);
  width: 14px;
  height: 14px;
  background: #ef4444;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.1s ease;
  z-index: 4;
}

.yt-progress-track:hover .yt-progress-thumb,
.yt-progress-track.is-seeking .yt-progress-thumb {
  transform: translate(-50%, -50%) scale(1);
}

/* Cinema Buffering Spinner Overlay (Theater Mode Only) */
.cinema-buffering-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 57;
  pointer-events: none;
}

/* Center spinner ONLY appears in theater mode */
body:not(.theater-mode) #cinema-buffering-indicator {
  display: none !important;
}

.cinema-spinner-circle {
  width: 54px;
  height: 54px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ef4444;
  border-radius: 50%;
  animation: cinema-spin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}

@keyframes cinema-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* YouTube-style Cinema Tooltips */
.cinema-tooltip {
  position: absolute;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  background: rgba(13, 17, 28, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.2);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 100;
  user-select: none;
}

.cinema-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(13, 17, 28, 0.94);
}

.cinema-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.time-tooltip {
  pointer-events: none;
}

/* Превью кадра при перемотке. Время показывает старая подпись над
   полоской, здесь только картинка — оформлена как сообщение в чате,
   чтобы не спорить с остальным интерфейсом. */
.seek-preview {
  position: absolute;
  /* Позиция не зависит от того, показано превью или нет: раньше высота
     менялась по классу has-preview, и при уходе мыши класс снимался
     мгновенно, а картинка гасла ещё 0.15 с — она визуально падала на
     33 px и в последние мгновения налезала на подпись времени. Теперь
     прыгать нечему: превью всегда стоит над подписью времени. */
  bottom: calc(100% + 42px);
  transform: translateX(-50%);
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: background 0.15s ease, border-color 0.15s ease,
              opacity 0.15s ease, visibility 0.15s ease;
  z-index: 101;
  user-select: none;
  line-height: 0;
}

.seek-preview.visible {
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
}

.seek-preview canvas {
  display: block;
  width: 176px;
  height: 99px;
  border-radius: 6px;
  background: #05070c;
  object-fit: cover;
}

.seek-preview.is-loading canvas {
  opacity: 0.45;
}

/* На сенсорных экранах подпись времени стоит выше (24px + её высота),
   поэтому картинку превью поднимаем ещё выше — иначе она накрыла бы
   время. Позиция задана для самого превью, а не по классу на полоске:
   так картинка не «прыгает» в момент исчезновения. */

/* On mobile phones and touchscreens, lift tooltip higher so the finger/thumb doesn't cover it */
body.is-touch-device .cinema-tooltip.time-tooltip,
body.is-mobile-device .cinema-tooltip.time-tooltip,
body.is-touch-device .cinema-tooltip.volume-tooltip,
body.is-mobile-device .cinema-tooltip.volume-tooltip {
  bottom: calc(100% + 24px);
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75);
}

/* На сенсорных экранах подпись стоит выше (24px + её высота), поэтому
   картинку превью поднимаем ещё выше — иначе она накрыла бы время. */
body.is-touch-device .seek-preview,
body.is-mobile-device .seek-preview {
  bottom: calc(100% + 58px);
}

@media (hover: none) and (pointer: coarse) {
  .cinema-tooltip.time-tooltip,
  .cinema-tooltip.volume-tooltip {
    bottom: calc(100% + 24px);
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75);
  }

  .seek-preview {
    bottom: calc(100% + 58px);
  }
}

/* Controls row */
#hud-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 12px;
}

.hud-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.hud-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* YouTube play button wrapper & buffering ring */
.cinema-play-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.yt-btn-play {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.yt-btn-play:hover { background: rgba(255,255,255,0.15); }

.cinema-play-spinner {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ef4444;
  box-sizing: border-box;
  animation: cinema-spin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
  pointer-events: none;
  display: none;
  z-index: 5;
}

/* Play button spinner never shows in theater mode (center spinner used instead) */
body.theater-mode #cinema-play-spinner {
  display: none !important;
}

/* In hall mode: when buffering, keep the play wrapper and spinner visible regardless of HUD hidden/fading state */
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible),
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading,
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden,
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible),
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading,
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden,
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible),
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading,
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden {
  opacity: 1 !important;
  background: transparent !important;
  transform: translateY(0) !important;
  pointer-events: none !important;
}

body.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible) #hud-progress-row,
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading #hud-progress-row,
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden #hud-progress-row,
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible) .hud-right,
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading .hud-right,
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden .hud-right,
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible) .hud-left > *:not(#cinema-play-wrap),
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading .hud-left > *:not(#cinema-play-wrap),
body.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden .hud-left > *:not(#cinema-play-wrap),
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible) #hud-progress-row,
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading #hud-progress-row,
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden #hud-progress-row,
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible) .hud-right,
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading .hud-right,
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden .hud-right,
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible) .hud-left > *:not(#cinema-play-wrap),
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading .hud-left > *:not(#cinema-play-wrap),
body.is-mobile-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden .hud-left > *:not(#cinema-play-wrap),
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible) #hud-progress-row,
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading #hud-progress-row,
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden #hud-progress-row,
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible) .hud-right,
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading .hud-right,
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden .hud-right,
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud:not(.hud-visible) .hud-left > *:not(#cinema-play-wrap),
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-fading .hud-left > *:not(#cinema-play-wrap),
body.is-touch-device.is-buffering-in-hall:not(.theater-mode) #cinema-hud.hud-hidden .hud-left > *:not(#cinema-play-wrap) {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease;
}

body.is-buffering-in-hall:not(.theater-mode) #cinema-play-wrap {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.is-buffering-in-hall:not(.theater-mode) #cinema-play-spinner {
  display: block !important;
}

.yt-time {
  font-size: 13px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.yt-movie-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.yt-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-rating {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}

.yt-source {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Resume Playback Prompt in Bottom HUD */
.hud-resume-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 440px;
  min-width: 0;
  vertical-align: middle;
}

.btn-hud-resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.38), rgba(147, 51, 234, 0.38));
  border: 1px solid rgba(244, 63, 94, 0.6);
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.btn-hud-resume:hover {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.65), rgba(147, 51, 234, 0.65));
  border-color: #fb7185;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.4);
}

.hud-resume-icon {
  color: #fb7185;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.hud-resume-label {
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.hud-resume-title {
  color: #ffffff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-resume-time {
  color: #f1f5f9;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  margin-left: 3px;
  flex-shrink: 0;
}

.btn-hud-resume-dismiss {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #94a3b8;
  font-size: 11px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-hud-resume-dismiss:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: #ffffff;
}


/* YouTube-style Expandable Volume Control */
.yt-volume {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 34px;
  padding: 0 4px;
  border-radius: 20px;
  transition: background 0.2s ease;
  user-select: none;
}

.yt-volume:hover,
.yt-volume.active,
.yt-volume.interacting {
  background: rgba(255, 255, 255, 0.09);
}

.yt-btn-volume {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease, background 0.15s ease;
  line-height: 1;
}

.yt-btn-volume:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

#cinema-volume-icon {
  font-size: 16px;
  line-height: 1;
  user-select: none;
  display: inline-block;
  transition: transform 0.1s ease;
}

.volume-slider-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  touch-action: none;
  width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.22s ease;
  margin-left: 0;
}

/* Expand smoothly on hover, active state, or while interacting */
.yt-volume:hover .volume-slider-wrap,
.yt-volume.active .volume-slider-wrap,
.yt-volume.interacting .volume-slider-wrap {
  width: 68px;
  max-width: 68px;
  opacity: 1;
  overflow: visible; /* Allows volume percentage tooltip to pop up above the slider */
  pointer-events: auto;
  margin-left: 6px;
  margin-right: 4px;
}

.volume-tooltip {
  bottom: calc(100% + 10px);
  z-index: 200;
  pointer-events: none;
}

#cinema-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 68px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  touch-action: none;
  outline: none;
  transition: height 0.15s ease, background 0.15s ease;
}

#cinema-volume-slider:hover,
.yt-volume.interacting #cinema-volume-slider {
  height: 6px;
  background: rgba(255, 255, 255, 0.45);
}

#cinema-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, background 0.15s ease;
}

#cinema-volume-slider::-webkit-slider-thumb:hover,
.yt-volume.interacting #cinema-volume-slider::-webkit-slider-thumb {
  transform: scale(1.25);
  background: #ff4d4d;
}

#cinema-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, background 0.15s ease;
}

#cinema-volume-slider::-moz-range-thumb:hover,
.yt-volume.interacting #cinema-volume-slider::-moz-range-thumb {
  transform: scale(1.25);
  background: #ff4d4d;
}

.yt-btn-secondary {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
  white-space: nowrap;
}
.yt-btn-secondary:hover { background: rgba(255,255,255,0.22); }

.yt-btn-danger {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.4);
  color: #fca5a5;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
  white-space: nowrap;
}
.yt-btn-danger:hover { background: rgba(239,68,68,0.25); }

/* Audio Track / Three Dots Dropdown */
.cinema-more-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-icon-dots,
.btn-cinema-settings {
  padding: 5px 8px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 32px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.settings-gear-icon {
  font-size: 15px;
  line-height: 1;
}

.hud-quality-pill {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: #fff;
  line-height: 1.1;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cinema-audio-dropdown {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 290px;
  max-height: 480px;
  overflow-y: auto;
  background: rgba(13, 17, 28, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
  animation: audioPopupIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.cinema-audio-dropdown::-webkit-scrollbar {
  width: 5px;
}
.cinema-audio-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.audio-dropdown-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

@keyframes audioPopupIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.audio-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 3px;
}

.audio-tracks-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  color: #fff;
  font-weight: 600;
}

.audio-tracks-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 125px;
  overflow-y: auto;
}

.audio-tracks-list::-webkit-scrollbar {
  width: 5px;
}
.audio-tracks-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.audio-track-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.audio-track-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.audio-track-item.active {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.audio-track-check {
  font-size: 13px;
  font-weight: 700;
  color: #22c55e;
}

/* ──────────────────────────────────────────────
   EPISODES SELECTION & NAVIGATION (HUD)
────────────────────────────────────────────── */
.cinema-episodes-hud-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.yt-btn-ep-nav {
  background: transparent;
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
  outline: none;
}

.yt-btn-ep-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  color: #38bdf8;
  transform: scale(1.08);
}

.yt-btn-ep-nav:active:not(:disabled) {
  transform: scale(0.95);
}

.yt-btn-ep-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cinema-episodes-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.btn-episodes {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-episodes:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

.cinema-episodes-dropdown {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 330px;
  max-width: 92vw;
  background: rgba(13, 17, 28, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 110;
  animation: audioPopupIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.episodes-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.episodes-count-badge {
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: #facc15;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.episodes-seasons-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.episodes-seasons-tabs::-webkit-scrollbar {
  height: 4px;
}
.episodes-seasons-tabs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.season-tab-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 5px 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.season-tab-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.season-tab-btn.active {
  background: linear-gradient(135deg, #e11d48, #be123c);
  border-color: #f43f5e;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.4);
}

.cinema-episodes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px;
  max-height: 250px;
  overflow-y: auto;
  padding: 4px 2px;
}

.cinema-episodes-list::-webkit-scrollbar {
  width: 5px;
}
.cinema-episodes-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.episode-chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.episode-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
}

.episode-chip.active {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-color: #60a5fa;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

/* ──────────────────────────────────────────────
   SOURCES SELECTION DROPDOWN (HUD)
────────────────────────────────────────────── */
.cinema-sources-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.btn-sources {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-sources:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

.cinema-sources-dropdown {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 290px;
  max-width: 92vw;
  background: rgba(13, 17, 28, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 110;
  animation: audioPopupIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sources-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.sources-count-badge {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.cinema-sources-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 250px;
  overflow-y: auto;
  padding: 2px;
}

.cinema-sources-list::-webkit-scrollbar {
  width: 5px;
}
.cinema-sources-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.source-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.source-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.source-item.active {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.45);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.source-item-check {
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
}

/* ──────────────────────────────────────────────
   CINEMA ACTION LOGS / HISTORY DROPDOWN (HUD)
────────────────────────────────────────────── */
.cinema-history-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cinema-info {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}

.btn-cinema-info:hover,
.btn-cinema-info.active {
  color: #38bdf8;
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));
}

.info-circle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-family: 'Segoe UI', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}

.cinema-history-dropdown {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  width: 310px;
  max-width: 90vw;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: auto;
  animation: fadeInHistory 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInHistory {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.history-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

/* ═══════════════════════════════════════════════════════════════════
   РАЗДЕЛИТЕЛИ, КОТОРЫЕ МОЖНО ДВИГАТЬ В 2D HUD
   ═══════════════════════════════════════════════════════════════════
   Раньше черта под заголовком была border-bottom самого заголовка,
   поэтому она была частью блока: в 2D HUD можно было двигать заголовок
   целиком, но не саму черту. Теперь черта — отдельный элемент
   .hud-separator, который редактор видит наравне с остальными:
   его можно взять и перетащить, выровнять по краям окна или удалить.

   border-bottom у заголовков убран, иначе получилось бы две черты.
*/
.hud-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 0;
  cursor: default;
}

.audio-dropdown-header,
.episodes-dropdown-header,
.sources-dropdown-header {
  border-bottom: none;
  padding-bottom: 2px;
}

.history-count-badge {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  padding: 1px 7px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.cinema-history-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}

.cinema-history-list::-webkit-scrollbar {
  width: 4px;
}
.cinema-history-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.history-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.history-item:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
}

.history-item-icon {
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.history-item-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.history-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.history-item-user {
  font-weight: 600;
  color: #38bdf8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-time {
  font-size: 10.5px;
  opacity: 0.55;
  white-space: nowrap;
}

.history-item-text {
  font-size: 11.5px;
  opacity: 0.85;
  word-break: break-word;
}

.history-empty-item {
  padding: 18px 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

/* Space/pause hint flash */
.space-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  border-radius: 50px;
  padding: 14px 28px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.space-hint.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* btn-gold */
.btn-gold {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  font-weight: 600;
}

/* Reactions Dropdown in Cinema HUD */
.cinema-reactions-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-reactions-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-reactions-toggle:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.btn-reactions-toggle.active {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.cinema-reactions-dropdown {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  animation: reactionsPopupIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 220px;
}

@keyframes reactionsPopupIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.reactions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Reaction buttons — matching chat style */
.btn-reaction {
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-reaction:hover {
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-reaction:active {
  transform: scale(0.92);
}

/* Modals — redesigned to match HUD glassmorphism */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 5, 12, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
  display: flex;
  /* Карточка не должна прижиматься к центру, когда она выше окна: иначе
     верх и низ уезжают за края и прокрутить их нечем. Скролл живёт
     здесь, у самой подложки окна. */
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  /* Колёсико мыши прокручивает окно, а не «съедается» подсказками;
     колебания не уносят окно скролла вверх (оттягивание на телефоне). */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 12px;
}

/* Вертикальный отступ между краем окна и полями карточки. */
.modal-card {
  margin-block: auto;
}

.modal-card {
  width: min(520px, 92vw);
  background: rgba(13, 17, 28, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  /* Обводка и свечение берут акцентный цвет из темы (те самые цвета,
     что выбираются в палитре каталога и в выборе цвета аватара).
     Раньше здесь был фиксированный белый, и окно оставалось серым
     при любом выборе цвета. */
  border: 1px solid var(--border-hover, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 26px var(--accent-glow, rgba(255, 255, 255, 0.08));
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.modal-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  margin-top: -6px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.form-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 11px 16px;
  border-radius: 14px;
  color: #fff;
  font-size: 14.5px;
  outline: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.form-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.1);
}

select.form-input {
  color-scheme: dark;
  cursor: pointer;
}

select.form-input option {
  background-color: #111422;
  color: #f1f5f9;
  padding: 10px 14px;
}

.color-options {
  display: flex;
  gap: 12px;
  align-items: center;
}

.color-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.color-dot:hover {
  transform: scale(1.12);
}

.color-dot.active {
  border-color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}

.btn-primary {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  backdrop-filter: blur(12px);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.btn-primary:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: #e2e8f0;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}


/* Chat Box — LEGACY (replaced by #chat-float). Force hidden. */
#chat-container {
  display: none !important;
}


#chat-container.dragging {
  opacity: 0.92;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 15px var(--primary-glow);
}

#chat-header {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
}

#chat-header:active {
  cursor: grabbing;
}

.chat-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: #e2e8f0;
}

.chat-drag-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: normal;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-head-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.15s;
}

.chat-head-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

#chat-body {
  display: flex;
  flex-direction: column;
}

#chat-container.minimized #chat-body {
  display: none;
}

#chat-messages {
  height: 180px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  user-select: text;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-header {
  display: flex;
  gap: 6px;
  font-weight: 600;
  font-size: 12px;
}

.chat-time {
  color: var(--text-muted);
  font-weight: normal;
}

.chat-text {
  word-break: break-word;
  color: #e2e8f0;
}

#chat-input-wrap {
  display: flex;
  border-top: 1px solid var(--panel-border);
}

#chat-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  outline: none;
  user-select: text;
}

/* Floating chat button when hidden */
.floating-chat-bubble {
  position: absolute;
  bottom: 24px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  color: #fff;
  font-size: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 34;
  transition: transform 0.15s;
}

.floating-chat-bubble:hover {
  transform: scale(1.1);
  border-color: var(--primary);
}

/* Notification Toast — styled to match the bottom HUD */
#toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translate(-50%, -10px);
  background: rgba(10, 14, 26, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: #f1f5f9;
  letter-spacing: 0.2px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#toast.show,
#toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ========================================================
   KINOPOISK & KINOKINO.VIP CATALOG STYLES
   ======================================================== */
/* Overlay layout for main catalog modal on key R (Theater mode layout) */
#catalog-modal {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 16px 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.catalog-modal-card {
  width: min(1500px, 95vw) !important;
  margin-top: 50px !important;
  height: calc(100vh - 66px) !important;
  max-height: calc(100vh - 66px) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at 60% 0%, #151b2e 0%, #07090e 55%) !important;
  border: 1.5px solid var(--accent-primary, #10b981) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 35px var(--accent-glow, rgba(16, 185, 129, 0.35)) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Sidebar inside catalog modal (on key R) */
.catalog-modal-card .catalog-sidebar {
  width: 250px;
  min-width: 250px;
  /* На узком экране 250px съедали всё пространство: контент сжимался
     в нечитаемые полоски, а горизонтальные черты уезжали за панель. */
  background: linear-gradient(180deg, #0b101d 0%, #06080e 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  top: auto;
  left: auto;
  z-index: 10;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), min-width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-x: hidden !important;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  flex-shrink: 0;
}

.catalog-modal-card .catalog-sidebar.collapsed {
  width: 76px !important;
  min-width: 76px !important;
}

.catalog-modal-card .sidebar-header {
  height: 68px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.catalog-modal-card .brand-badge {
  display: flex;
  align-items: center;
  width: 100%;
}

.catalog-modal-card .brand-title {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.3px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  user-select: none;
  cursor: default;
}

.catalog-modal-card .brand-title:hover .brand-logo {
  transform: scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 0 14px rgba(212, 175, 100, 0.95)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.catalog-modal-card .brand-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(212, 175, 100, 0.5));
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.catalog-modal-card .brand-name {
  white-space: nowrap;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.4px;
  color: #ffffff;
}

.catalog-modal-card .sidebar-toggle-bar {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.catalog-modal-card .sidebar-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 7px 12px;
  border-radius: 8px;
  transition: all 0.18s ease;
  user-select: none;
}

.catalog-modal-card .sidebar-toggle-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.catalog-modal-card .sidebar-toggle-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.catalog-modal-card .sidebar-toggle-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-modal-card .sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden !important;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.catalog-modal-card .nav-section-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 12px 12px 6px;
}

.catalog-modal-card .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  user-select: none;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.catalog-modal-card .nav-item[hidden],
.catalog-modal-card .nav-item.is-disabled-source {
  display: none !important;
}

.catalog-modal-card .nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(2px);
}

.catalog-modal-card .nav-item.active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(var(--accent-rgb, 16, 185, 129), 0.2) 0%, rgba(var(--accent-rgb, 16, 185, 129), 0.05) 100%) !important;
  border-left: 3px solid var(--accent-primary, #10b981) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 15px rgba(var(--accent-rgb, 16, 185, 129), 0.1) !important;
}

.catalog-modal-card .nav-icon {
  font-size: 18px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.catalog-modal-card .nav-favicon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s;
}

.catalog-modal-card .nav-item:hover .nav-favicon {
  transform: scale(1.18);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.catalog-modal-card .nav-item.active .nav-favicon {
  transform: scale(1.12);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb, 16, 185, 129), 0.7));
}

.catalog-modal-card .nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  white-space: nowrap;
}

.catalog-modal-card .nav-item:hover .nav-badge {
  opacity: 1;
  transform: translateX(0);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
}

.catalog-modal-card .sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.catalog-modal-card .btn-return-cinema {
  width: 100%;
  background: rgba(225, 29, 72, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 0 14px rgba(225, 29, 72, 0.55) !important;
  color: #fff !important;
  padding: 10px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  user-select: none;
}

.catalog-modal-card .btn-return-cinema:hover {
  background: rgba(244, 63, 94, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 0 20px rgba(225, 29, 72, 0.8) !important;
  transform: translateY(-1px) scale(1.02);
}

/* Collapsed sidebar inside catalog modal */
.catalog-modal-card .catalog-sidebar.collapsed .sidebar-header {
  padding: 0;
  justify-content: center;
}
.catalog-modal-card .catalog-sidebar.collapsed .brand-badge {
  justify-content: center;
  width: auto;
}
.catalog-modal-card .catalog-sidebar.collapsed .brand-title {
  gap: 0;
  justify-content: center;
}
.catalog-modal-card .catalog-sidebar.collapsed .brand-name {
  display: none !important;
}
.catalog-modal-card .catalog-sidebar.collapsed .sidebar-toggle-bar {
  padding: 8px 6px;
  justify-content: center;
}
.catalog-modal-card .catalog-sidebar.collapsed .sidebar-toggle-btn {
  width: 44px;
  height: 36px;
  padding: 0;
  justify-content: center;
  margin: 0 auto;
}
.catalog-modal-card .catalog-sidebar.collapsed .sidebar-toggle-label {
  display: none !important;
}
.catalog-modal-card .catalog-sidebar.collapsed .sidebar-nav {
  padding: 14px 6px;
  align-items: center;
}
.catalog-modal-card .catalog-sidebar.collapsed .nav-section-title {
  display: none !important;
}
.catalog-modal-card .catalog-sidebar.collapsed .nav-item {
  width: 48px;
  height: 48px;
  padding: 0;
  justify-content: center;
  border-radius: 12px;
  border-left: none;
}
.catalog-modal-card .catalog-sidebar.collapsed .nav-item:hover {
  transform: none;
}
.catalog-modal-card .catalog-sidebar.collapsed .nav-item.active {
  border-left: none !important;
  border: 1.5px solid var(--accent-primary, #10b981) !important;
  box-shadow: 0 0 12px var(--accent-glow, rgba(16, 185, 129, 0.35)) !important;
}
.catalog-modal-card .catalog-sidebar.collapsed .nav-item > span:not(.nav-icon) {
  display: none !important;
}
.catalog-modal-card .catalog-sidebar.collapsed .nav-badge {
  display: none !important;
}
.catalog-modal-card .catalog-sidebar.collapsed .sidebar-footer {
  padding: 12px 6px;
  justify-content: center;
}
.catalog-modal-card .catalog-sidebar.collapsed .btn-return-cinema {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 16px;
}
.catalog-modal-card .catalog-sidebar.collapsed .btn-return-text {
  display: none !important;
}

/* Right Main Section */
.catalog-modal-card .catalog-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 60% 0%, #151b2e 0%, #07090e 55%) !important;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Горизонтальные полосы каталога держатся ЕДИНОЙ СЕТКИ: одинаковые
   отступы слева/справа и обрезка по границе своей панели. Раньше topbar
   имел padding 28px против 20px у сайдбара, и на узком экране строка
   поиска вылезала за карточку (min-width: auto у flex-элемента). */
.catalog-modal-card .catalog-topbar {
  height: 72px;
  flex-shrink: 0;
  min-width: 0;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  z-index: 20;
}

.catalog-modal-card .search-wrapper {
  flex: 1;
  /* Без min-width: 0 flex-элемент не сжимается ниже своего содержимого
     и поиск выходит за правый край карточки на узких экранах. */
  min-width: 0;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.catalog-modal-card .search-input-box {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 0 16px 0 44px;
  height: 44px;
  transition: all 0.22s ease;
}

.catalog-modal-card .search-input-box:focus-within {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-primary, #10b981);
  box-shadow: 0 0 20px var(--accent-glow, rgba(16, 185, 129, 0.25));
}

.catalog-modal-card .search-history-wrap {
  position: absolute;
  left: 6px;
  display: flex;
  align-items: center;
  z-index: 35;
}

.catalog-modal-card .search-icon-btn {
  background: transparent;
  border: none;
  outline: none;
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #64748b;
  transition: all 0.2s ease;
}

.catalog-modal-card .search-icon-btn .search-icon-left {
  font-size: 16px;
  pointer-events: none;
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
  line-height: 1;
}

.catalog-modal-card .search-history-wrap:hover .search-icon-btn,
.catalog-modal-card .search-icon-btn:hover {
  color: var(--accent-primary, #10b981);
  background: rgba(255, 255, 255, 0.08);
}

.catalog-modal-card .search-history-wrap:hover .search-icon-left {
  transform: scale(1.15);
}

.catalog-modal-card .search-input-box:focus-within .search-icon-left {
  color: var(--accent-primary, #10b981);
}

.catalog-modal-card .search-history-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 290px;
  max-width: 380px;
  background: rgba(11, 15, 26, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1.5px solid var(--accent-primary, #10b981);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 24px var(--accent-glow, rgba(16, 185, 129, 0.35));
  padding: 12px;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
}

.catalog-modal-card .search-history-dropdown::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 20px;
}

.catalog-modal-card .search-history-wrap:hover .search-history-dropdown,
.catalog-modal-card .search-history-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.catalog-modal-card .search-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}

.catalog-modal-card .search-history-title {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
}

.catalog-modal-card .btn-clear-history {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  transition: all 0.18s ease;
}

.catalog-modal-card .btn-clear-history:hover {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.12);
}

.catalog-modal-card .search-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.catalog-modal-card .search-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.catalog-modal-card .search-history-item:hover {
  background: rgba(var(--accent-rgb, 16, 185, 129), 0.16);
  color: #fff;
  transform: translateX(2px);
}

.catalog-modal-card .search-history-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  flex: 1;
}

.catalog-modal-card .history-item-icon {
  font-size: 12px;
  color: var(--accent-primary, #10b981);
  flex-shrink: 0;
}

.catalog-modal-card .search-history-item-query {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.catalog-modal-card .search-history-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.catalog-modal-card .search-history-btn-paste {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.catalog-modal-card .search-history-btn-paste:hover {
  background: var(--accent-primary, #10b981);
  color: #fff;
  border-color: var(--accent-primary, #10b981);
  box-shadow: 0 0 8px var(--accent-glow, rgba(16, 185, 129, 0.4));
}

.catalog-modal-card .search-history-btn-remove {
  background: none;
  border: none;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.catalog-modal-card .search-history-btn-remove:hover {
  color: #f43f5e;
}

.catalog-modal-card .search-history-empty {
  padding: 18px 12px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}

.catalog-modal-card .catalog-search-input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14.5px;
  font-family: inherit;
}

.catalog-modal-card .catalog-search-input::placeholder {
  color: #64748b;
}

.catalog-modal-card .search-clear-btn {
  background: none;
  border: none;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  display: none;
  padding: 4px;
  border-radius: 50%;
}
.catalog-modal-card .search-clear-btn:hover {
  color: #fff;
}

.catalog-modal-card .search-shortcut-badge {
  font-size: 11px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.07);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.catalog-modal-card .search-shortcut-badge:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  transform: scale(1.04);
}

.catalog-modal-card .search-shortcut-badge:active,
.catalog-modal-card .search-shortcut-badge.is-flashing {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
  transform: scale(0.94) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4), 0 0 25px var(--accent-glow, rgba(16, 185, 129, 0.35)) !important;
}

.catalog-modal-card .search-input-box.is-flashing {
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 24px var(--accent-glow, rgba(16, 185, 129, 0.45)) !important;
  transform: scale(0.993) !important;
}

.catalog-modal-card .btn-voice-search {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.catalog-modal-card .btn-voice-search:hover {
  background: rgba(var(--accent-rgb, 16, 185, 129), 0.15);
  border-color: var(--accent-primary, #10b981);
  color: var(--accent-primary, #10b981);
  transform: scale(1.05);
  box-shadow: 0 0 16px var(--accent-glow, rgba(16, 185, 129, 0.3));
}

.catalog-modal-card .btn-voice-search.is-listening {
  background: var(--accent-primary, #10b981);
  border-color: #fff;
  color: #fff;
  animation: pulse-mic 1.2s infinite;
  box-shadow: 0 0 25px var(--accent-glow, rgba(16, 185, 129, 0.8));
}

.catalog-modal-card .mic-svg-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Voice Search Modal Overlay & Card (ported from catalog-test) */
.voice-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeInVoice 0.2s ease;
}

.voice-modal-card {
  background: #0f172a;
  border: 1px solid rgba(var(--accent-rgb, 16, 185, 129), 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px var(--accent-glow, rgba(16, 185, 129, 0.4));
  border-radius: 24px;
  padding: 40px;
  text-align: center;
  max-width: 440px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  user-select: none;
}

.voice-mic-wave {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent-primary, #10b981);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  animation: pulse-mic 1.2s infinite;
  box-shadow: 0 0 30px var(--accent-glow, rgba(16, 185, 129, 0.8));
}

.voice-status-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.voice-transcript-text {
  font-size: 15px;
  color: var(--accent-primary, #10b981);
  font-weight: 600;
  min-height: 24px;
  word-break: break-word;
}

.btn-voice-cancel {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 10px 24px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s ease;
}

.btn-voice-cancel:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

@keyframes pulse-mic {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 16, 185, 129), 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 14px rgba(var(--accent-rgb, 16, 185, 129), 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 16, 185, 129), 0); }
}

@keyframes fadeInVoice {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.catalog-modal-card .topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.catalog-modal-card .palette-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Invisible hover bridge between button and dropdown */
.catalog-modal-card .palette-menu-wrap::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 18px;
  z-index: 999;
}

.catalog-modal-card .palette-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.catalog-modal-card .palette-icon-btn .palette-icon {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.25s ease;
  display: inline-block;
}

.catalog-modal-card .palette-menu-wrap:hover .palette-icon-btn,
.catalog-modal-card .palette-menu-wrap.hovered .palette-icon-btn,
.catalog-modal-card .palette-menu-wrap.open .palette-icon-btn,
.catalog-modal-card .palette-icon-btn:hover {
  background: rgba(var(--accent-rgb, 16, 185, 129), 0.2);
  border-color: var(--accent-primary, #10b981);
  box-shadow: 0 0 20px var(--accent-glow, rgba(16, 185, 129, 0.35));
  transform: scale(1.06);
}

.catalog-modal-card .palette-menu-wrap:hover .palette-icon,
.catalog-modal-card .palette-menu-wrap.hovered .palette-icon,
.catalog-modal-card .palette-menu-wrap.open .palette-icon {
  transform: rotate(15deg) scale(1.1);
}

.catalog-modal-card .palette-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 310px;
  background: rgba(11, 15, 26, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--accent-primary, #10b981);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 35px var(--accent-glow, rgba(16, 185, 129, 0.35));
  padding: 16px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.2s,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  pointer-events: none;
}

.catalog-modal-card .palette-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.catalog-modal-card .palette-menu-wrap:hover .palette-dropdown-menu,
.catalog-modal-card .palette-menu-wrap.hovered .palette-dropdown-menu,
.catalog-modal-card .palette-menu-wrap.open .palette-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.catalog-modal-card .dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}

.catalog-modal-card .dropdown-header-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.catalog-modal-card .dropdown-palette-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb, 16, 185, 129), 0.15);
  border: 1px solid var(--accent-primary, #10b981);
  color: var(--accent-primary, #10b981);
  box-shadow: 0 0 8px rgba(var(--accent-rgb, 16, 185, 129), 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.catalog-modal-card .dropdown-palette-desc {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 10px;
  line-height: 1.4;
}

.catalog-modal-card .dropdown-theme-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.catalog-modal-card .dropdown-theme-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.catalog-modal-card .dropdown-theme-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--accent-rgb, 16, 185, 129), 0.4);
  transform: translateY(-1px);
}

.catalog-modal-card .dropdown-theme-btn.active {
  background: rgba(var(--accent-rgb, 16, 185, 129), 0.16);
  border-color: var(--accent-primary, #10b981);
  box-shadow: 0 0 12px rgba(var(--accent-rgb, 16, 185, 129), 0.35);
  color: #fff;
}

.catalog-modal-card .dropdown-theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.catalog-modal-card .catalog-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

.catalog-modal-card .catalog-tab-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.catalog-modal-card .kp-search-bar-wrap {
  display: none !important;
}

.catalog-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.catalog-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 14px;
}

.btn-tabs-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 38px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  z-index: 2;
  flex-shrink: 0;
  transition: all 0.2s ease;
  user-select: none;
}

.btn-tabs-scroll:hover {
  background: #e11d48;
  border-color: #f43f5e;
}

.btn-tabs-left {
  margin-right: 6px;
}

.btn-tabs-right {
  margin-left: 6px;
}

.catalog-tabs-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 8px 8px 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(225, 29, 72, 0.6) rgba(0, 0, 0, 0.25);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.catalog-tabs-bar::-webkit-scrollbar {
  display: block;
  height: 5px;
}

.catalog-tabs-bar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.catalog-tabs-bar::-webkit-scrollbar-thumb {
  background: rgba(225, 29, 72, 0.6);
  border-radius: 4px;
}

.catalog-tabs-bar::-webkit-scrollbar-thumb:hover {
  background: #e11d48;
}

.catalog-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.65);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  min-height: 38px;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalog-tab-btn .nav-favicon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s;
}

.catalog-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.catalog-tab-btn:hover .nav-favicon {
  transform: scale(1.18);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.catalog-tab-btn.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

.catalog-tab-btn.active .nav-favicon {
  transform: scale(1.12);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
}

#tab-youtube-btn.active {
  background: rgba(239, 68, 68, 0.24);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fff;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3);
}

#tab-vk-btn.active {
  background: rgba(0, 119, 255, 0.25);
  border-color: rgba(0, 119, 255, 0.55);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 119, 255, 0.35);
}

#tab-rutube-btn.active {
  background: rgba(0, 179, 65, 0.25);
  border-color: rgba(0, 179, 65, 0.55);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 179, 65, 0.35);
}

#tab-ok-btn.active {
  background: rgba(238, 130, 8, 0.25);
  border-color: rgba(238, 130, 8, 0.55);
  color: #fff;
  box-shadow: 0 0 14px rgba(238, 130, 8, 0.35);
}

#tab-twitch-btn.active {
  background: rgba(145, 70, 255, 0.25);
  border-color: rgba(145, 70, 255, 0.55);
  color: #fff;
  box-shadow: 0 0 14px rgba(145, 70, 255, 0.35);
}

#tab-kick-btn.active {
  background: rgba(83, 252, 24, 0.22);
  border-color: rgba(83, 252, 24, 0.55);
  color: #fff;
  box-shadow: 0 0 14px rgba(83, 252, 24, 0.3);
}

.catalog-tab-page {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* ═══════════════════════════════════════════
   CATALOG WATCH HISTORY (ИСТОРИЯ ПРОСМОТРА)
   ═══════════════════════════════════════════ */
.catalog-history-page {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px 0;
}

.history-columns-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.history-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.history-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.history-column-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-column-icon {
  font-size: 18px;
}

.history-column-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.history-column-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-column-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #94a3b8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-clear-personal-history {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-clear-personal-history:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fff;
}

.history-column-desc {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 12px;
  line-height: 1.4;
  flex-shrink: 0;
}

.history-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.history-list::-webkit-scrollbar {
  width: 5px;
}

.history-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.history-item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 10px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.history-item-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.history-item-poster {
  width: 44px;
  height: 62px;
  border-radius: 6px;
  object-fit: cover;
  background: #0f172a;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.history-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.history-item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-meta {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.history-item-play-btn {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.history-item-card:hover .history-item-play-btn {
  background: rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.7);
  color: #fff;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
}

.history-empty-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  gap: 8px;
  font-size: 13px;
  flex: 1;
}

.history-empty-icon {
  font-size: 32px;
  opacity: 0.5;
}

.history-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.history-item-remove-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.history-item-remove-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fff;
  transform: scale(1.08);
}

.history-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.2;
  flex-shrink: 0;
  vertical-align: middle;
}

.history-badge-favicon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  display: inline-block;
  border-radius: 2px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .history-columns-wrap {
    grid-template-columns: 1fr;
    gap: 12px;
    overflow-y: auto;
  }
  .history-column {
    min-height: 240px;
  }
}

.kp-search-bar-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  margin-bottom: 12px;
  padding: 0 6px;
  transition: all 0.2s ease;
  backdrop-filter: blur(12px);
}

.kp-search-bar-wrap:focus-within {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22), 0 4px 14px rgba(0, 0, 0, 0.4);
}

.kp-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  padding: 12px 10px 12px 0;
  outline: none;
  font-family: inherit;
}

.kp-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13.5px;
}

.btn-clear-search {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.15s ease;
  margin-right: 4px;
}

.btn-clear-search:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fff;
}

.kp-chips-bar {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px 2px;
  margin-bottom: 14px;
  scrollbar-width: none;
  position: relative;
  z-index: 2;
}

.kp-chips-bar::-webkit-scrollbar {
  display: none;
}

.kp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 9999px;
  padding: 6px 15px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  min-height: 32px;
  box-sizing: border-box;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.kp-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: translateY(-1px);
}

.kp-chip.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #090d16;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

#youtube-chips-bar .kp-chip.active {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.45);
}

#vk-chips-bar .kp-chip.active {
  background: #0077ff;
  border-color: #0077ff;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 119, 255, 0.45);
}

#ok-chips-bar .kp-chip.active {
  background: #ee8208;
  border-color: #ee8208;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(238, 130, 8, 0.45);
}

#twitch-chips-bar .kp-chip.active {
  background: #9146ff;
  border-color: #9146ff;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(145, 70, 255, 0.45);
}

#kick-chips-bar .kp-chip.active {
  background: #53fc18;
  border-color: #53fc18;
  color: #050505;
  font-weight: 800;
  box-shadow: 0 0 16px rgba(83, 252, 24, 0.45);
}

#kp-search-loading {
  flex-shrink: 0;
}

/* Movie Grid */
.cards-grid,
.kp-movies-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 20px 18px;
  padding-top: 10px;
  padding-bottom: 24px;
}

.cards-grid.video-grid,
.kp-movies-grid.video-grid {
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)) !important;
  gap: 18px 16px !important;
}

#tab-custom-content,
#tab-upload-content {
  overflow-y: auto;
  padding-right: 6px;
}

/* Media Card Styles (Netflix + YouTube Hybrid from catalog-test) */
.media-card,
.kp-movie-card {
  background: var(--bg-card, rgba(18, 24, 38, 0.7));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  isolation: isolate;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
}

.media-card:hover,
.kp-movie-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--accent-primary, #10b981);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 24px var(--accent-glow, rgba(16, 185, 129, 0.35));
}

.card-poster-wrap,
.kp-poster-wrap {
  width: 100%;
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  background: #1e293b;
  border-radius: calc(var(--radius-md, 14px) - 1px) calc(var(--radius-md, 14px) - 1px) 0 0;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  isolation: isolate;
}

.card-poster-wrap::after,
.rutube-thumb-wrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(13, 17, 27, 0) 0%, rgba(13, 17, 27, 0.85) 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

.media-card.is-video .card-poster-wrap,
.yt-movie-card .kp-poster-wrap {
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0 !important;
  background: #0b0f17;
  border-radius: calc(var(--radius-md, 14px) - 1px) calc(var(--radius-md, 14px) - 1px) 0 0;
}

.card-poster-img,
.kp-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.4s ease;
  display: block;
}

.media-card:hover .card-poster-img,
.kp-movie-card:hover .kp-poster-img {
  transform: scale(1.06);
}

.card-rating-badge,
.kp-card-badge-rating {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(250, 204, 21, 0.3);
  color: #facc15;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.card-source-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}

.source-kp { background: rgba(249, 115, 22, 0.85); }
.source-al { background: rgba(236, 72, 153, 0.85); }
.source-yt { background: rgba(220, 38, 38, 0.85); }
.source-rt { background: rgba(0, 179, 65, 0.85); }
.source-vk { background: rgba(0, 119, 255, 0.85); }
.source-tw { background: rgba(145, 70, 255, 0.9); color: #fff; }
.source-kick { background: rgba(83, 252, 24, 0.95); color: #000; font-weight: 800; }

.card-duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.card-hover-overlay,
.kp-poster-overlay-play {
  position: absolute;
  inset: 0;
  background: rgba(7, 9, 14, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: inherit;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 3;
  cursor: pointer;
}

.media-card:hover .card-hover-overlay,
.kp-movie-card:hover .kp-poster-overlay-play {
  opacity: 1;
}

.card-play-btn,
.kp-play-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent-primary, #10b981);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 20px var(--accent-glow, rgba(16, 185, 129, 0.55));
  transform: scale(0.85);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.media-card:hover .card-play-btn,
.kp-movie-card:hover .kp-play-circle {
  transform: scale(1);
}

.card-play-btn.is-loading {
  animation: cardPlaySpin 0.9s linear infinite;
  background: var(--accent-hover, #059669);
  pointer-events: none;
  opacity: 1 !important;
}

@keyframes cardPlaySpin {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.card-hover-actions {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
  pointer-events: auto;
}

.card-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  padding: 0;
  user-select: none;
}

.card-action-btn:hover {
  transform: scale(1.15);
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.card-action-btn.active.card-fav-btn {
  background: rgba(245, 158, 11, 0.35);
  border-color: rgba(251, 191, 36, 0.9);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}

.card-action-btn.active.card-watchlist-btn {
  background: rgba(56, 189, 248, 0.35);
  border-color: rgba(56, 189, 248, 0.9);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

.card-action-btn.card-queue-btn:hover {
  background: rgba(14, 165, 233, 0.45);
  border-color: #38bdf8;
  color: #38bdf8;
}

.card-body,
.kp-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 3px;
  background: linear-gradient(180deg, rgba(18, 24, 38, 0.95) 0%, rgba(13, 17, 27, 0.98) 100%);
}

.card-title,
.kp-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 19px;
  letter-spacing: -0.01em;
}

.card-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-uploader-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-uploader-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-subtle, #94a3b8);
  margin-top: 3px;
}

.card-genre,
.kp-card-genre {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-year,
.kp-card-badge-year {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.card-hint {
  color: #e11d48;
  font-weight: 600;
  font-size: 11.5px;
}

/* YouTube Grid & Cards */
#youtube-movies-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.yt-movie-card {
  min-height: 250px !important;
}

.yt-movie-card .kp-poster-wrap {
  height: 135px !important;
  min-height: 135px !important;
}

.yt-movie-card .kp-poster-img {
  object-fit: cover;
}

.yt-movie-card:hover {
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.75), 0 0 16px rgba(239, 68, 68, 0.25) !important;
}

/* ═══════════════════════════════════════════
   RUTUBE EXPANSIVE SEARCH & MEDIA HUB (Variant 3)
   ═══════════════════════════════════════════ */
.rutube-tab-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.rutube-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.rutube-search-bar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 12px;
  padding: 0 8px 0 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s ease;
}

.rutube-search-bar-wrap:focus-within {
  border-color: #22c55e;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.3), inset 0 0 8px rgba(34, 197, 94, 0.1);
}

.rutube-brand-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 6px;
  padding: 3px 7px;
  margin-right: 8px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.rutube-search-input {
  flex: 1;
  height: 38px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13.5px;
  outline: none;
}

.rutube-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.rutube-btn-search {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  color: #4ade80;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.rutube-btn-search:hover {
  background: #22c55e;
  color: #000;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.rutube-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.rutube-tool-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  padding: 0 12px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}

.rutube-tool-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.rutube-history-wrap {
  position: relative;
}

.rutube-history-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 290px;
  max-width: 90vw;
  background: rgba(13, 17, 28, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.75);
  z-index: 150;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeInDropdownDown 0.15s ease;
}

.rutube-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rutube-history-clear {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}

.rutube-history-clear:hover {
  text-decoration: underline;
}

.rutube-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.rutube-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background 0.15s ease;
}

.rutube-history-item:hover {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.rutube-history-remove-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}

.rutube-history-remove-btn:hover {
  color: #ef4444;
}

/* Category chips */
.rutube-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.rutube-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 11px;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
}

.rutube-chip:hover {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #fff;
}

.rutube-chip.active {
  background: rgba(34, 197, 94, 0.22);
  border-color: #22c55e;
  color: #4ade80;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.28);
}

/* Results status bar */
.rutube-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.rutube-count-badge {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.rutube-query-label {
  color: #4ade80;
  margin-left: 6px;
}

.rutube-scroll-hint {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
}

/* Video grid */
.rutube-grid {
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
  gap: 12px !important;
}

.rutube-card {
  background: var(--bg-card, rgba(18, 24, 38, 0.7));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  isolation: isolate;
}

.rutube-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 197, 94, 0.65);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(34, 197, 94, 0.25);
}

.rutube-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0f17;
  overflow: hidden;
  border-radius: calc(var(--radius-md, 14px) - 1px) calc(var(--radius-md, 14px) - 1px) 0 0;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  isolation: isolate;
}

.rutube-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.3s ease;
}

.rutube-card:hover .rutube-thumb-img {
  transform: scale(1.04);
}

.rutube-badge-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.rutube-badge-quality {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(34, 197, 94, 0.88);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  z-index: 2;
}

.rutube-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: inherit;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.rutube-card:hover .rutube-hover-overlay {
  opacity: 1;
}

.rutube-play-pill {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.5);
  transform: translateY(4px);
  transition: transform 0.2s ease;
}

.rutube-card:hover .rutube-play-pill {
  transform: translateY(0);
}

.rutube-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  background: linear-gradient(180deg, rgba(18, 24, 38, 0.95) 0%, rgba(13, 17, 27, 0.98) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.rutube-card-body .card-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.38;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rutube-card-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
}

.rutube-channel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}

.rutube-channel-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  background: #22c55e;
  flex-shrink: 0;
}

.rutube-channel-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.rutube-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: auto;
}

/* Spinner and Infinite Scroll sentinel */
.rutube-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(34, 197, 94, 0.2);
  border-top-color: #22c55e;
  border-radius: 50%;
  animation: spinRutube 0.8s linear infinite;
  margin: 0 auto;
}

.rutube-mini-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(34, 197, 94, 0.2);
  border-top-color: #22c55e;
  border-radius: 50%;
  animation: spinRutube 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spinRutube {
  to { transform: rotate(360deg); }
}

.rutube-scroll-sentinel {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

/* Badges for HUD and Overlay */
.cinema-badge-kp {
  background: #ea580c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cinema-badge-rating {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
}

.cinema-badge-source {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ========================================================
   CINEMA SCREEN OVERLAY (IN-WORLD / THEATER VIEW)
   ======================================================== */
#cinema-screen-overlay {
  position: absolute;
  top: 55px;
  bottom: 85px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1360px, 94vw);
  background: #020617;
  border-radius: 12px;
  border: 2px solid #1e293b;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95);
  z-index: 35;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.25s ease-out;
}

#cinema-screen-overlay.cinema-overlay-hidden {
  display: none !important;
}

#cinema-screen-overlay.cinema-overlay-expanded {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  transform: none;
  border-radius: 0;
  border: none;
  z-index: 50;
}

.cinema-overlay-bar {
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  backdrop-filter: blur(8px);
}

.cinema-overlay-info {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.cinema-overlay-title {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cinema-overlay-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

.cinema-iframe-wrapper {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

#kinokino-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}

/* ========================================================
   SETTINGS MODAL & KEYBINDINGS STYLES
   Faithfully styled to match the bottom cinema console HUD
   ======================================================== */
.settings-modal-layout {
  display: flex;
  flex-direction: row;
  gap: 18px;
  max-width: 1060px;
  width: min(1060px, 95vw);
  max-height: 86vh;
  align-items: stretch;
  justify-content: center;
  z-index: 10;
}

.settings-modal-card {
  flex: 1.15;
  min-width: 320px;
  width: auto;
  max-height: 86vh;
  background: rgba(13, 17, 28, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  /* Акцентный цвет темы — как в окне входа и каталоге. Раньше здесь был
     свой белый, из-за чего настройки оставались серыми при любом выборе
     цвета аватара. */
  border: 1px solid var(--border-hover, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 26px var(--accent-glow, rgba(255, 255, 255, 0.08));
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 0;
}

.players-modal-card {
  flex: 0.88;
  min-width: 310px;
  max-height: 86vh;
  background: rgba(13, 17, 28, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   NEW CINEMA CATALOG MODAL [Delete / del]
   Clean modal card without left menu, without FPS, without Ping
   Theater-mode top HUD behind the menu card
══════════════════════════════════════════════════════════════ */
.new-catalog-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99995;
  background: rgba(3, 5, 12, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 16px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Theater Mode style top HUD spanning edge-to-edge behind the modal card */
.new-catalog-top-hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 30px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
  border-bottom: none;
  z-index: 25;
  pointer-events: auto;
  box-sizing: border-box;
}

.new-catalog-top-hud .top-bar-left,
.new-catalog-top-hud .top-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.new-catalog-top-hud #del-catalog-btn-fullscreen,
.new-catalog-top-hud #del-catalog-btn-share,
.new-catalog-top-hud #main-catalog-btn-fullscreen,
.new-catalog-top-hud #main-catalog-btn-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.new-catalog-top-hud #del-catalog-btn-fullscreen:hover,
.new-catalog-top-hud #del-catalog-btn-share:hover,
.new-catalog-top-hud #main-catalog-btn-fullscreen:hover,
.new-catalog-top-hud #main-catalog-btn-share:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.38);
}

.new-catalog-top-hud #del-catalog-btn-fullscreen.active,
.new-catalog-top-hud #main-catalog-btn-fullscreen.active {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.new-catalog-top-hud .mic-meter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 4px 12px;
  height: 28px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.new-catalog-top-hud .mic-meter-wrap:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.new-catalog-top-hud .mic-meter-wrap.muted {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
}

.new-catalog-top-hud .mic-meter-wrap.muted:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.65);
}

.new-catalog-top-hud .mic-meter-wrap.active {
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.new-catalog-top-hud .mic-meter-wrap.active:hover {
  border-color: rgba(34, 197, 94, 0.65);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}

.catalog-del-modal-card {
  width: min(1500px, 95vw);
  margin-top: 50px;
  height: calc(100vh - 66px);
  max-height: calc(100vh - 66px);
  background: rgba(13, 17, 28, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.catalog-del-modal-card iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 20px;
  display: block;
}

.players-modal-card {
  flex: 0.88;
  min-width: 310px;
  max-height: 86vh;
  background: rgba(13, 17, 28, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.players-modal-subtitle {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -4px;
  margin-bottom: 2px;
}

.players-list-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
  flex: 1;
}

.players-list-scroll::-webkit-scrollbar {
  width: 5px;
}
.players-list-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.player-entry-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.player-entry-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.player-entry-card.is-self {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.06);
}

.player-entry-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.player-avatar-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.avatar-letter {
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.speaking-pulse-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.15s ease;
}

.speaking-pulse-ring.active {
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
  animation: pulse-ring 1s infinite alternate;
}

@keyframes pulse-ring {
  0% { transform: scale(1.0); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 1; }
}

.player-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.player-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.player-entry-name {
  color: #ffffff;
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-self-tag {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.player-speaking-badge {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.player-mute-state-badge {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.player-status-row {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
}

.btn-player-mute {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-player-mute:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.05);
}

.btn-player-mute.is-muted {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
}

.player-volume-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.player-vol-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.vol-label {
  color: rgba(255, 255, 255, 0.5);
}

.vol-val {
  color: #ffffff;
  font-weight: 700;
}

.player-vol-slider {
  width: 100%;
  height: 5px;
}

/* Corner Performance Stats (FPS / Ping) */
.settings-corner-stat {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 17, 28, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  z-index: 99999;
  pointer-events: none;
  animation: fadeIn 0.25s ease;
}

.corner-stat-left {
  top: 22px;
  left: 24px;
}

.corner-stat-right {
  top: 22px;
  right: 24px;
}

.stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.fps-dot {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.ping-dot {
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.stat-label {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-val {
  color: #ffffff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.stat-unit {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.modal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.settings-key-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 6px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.btn-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.2s ease;
}

.btn-modal-close:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fff;
  transform: scale(1.08);
}

.settings-tabs-bar {
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  padding: 5px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 12px 0 18px 0;
}

.settings-tabs-bar::-webkit-scrollbar {
  display: none;
}

.settings-tab-btn {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.65);
  padding: 9px 8px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
  width: 100%;
}

.settings-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.settings-tab-btn.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.15);
}

.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  outline: none;
  margin: 10px 0 6px 0;
  cursor: pointer;
  transition: background 0.15s;
}

.settings-slider:hover {
  background: rgba(255, 255, 255, 0.24);
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}

.settings-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}

.settings-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  border: none;
  cursor: pointer;
}

#btn-test-loopback.active {
  background: rgba(34, 197, 94, 0.25) !important;
  border-color: #22c55e !important;
  color: #86efac !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.3);
}

.keybindings-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  padding-right: 6px;
}

.keybind-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 8px 14px;
  transition: background 0.15s, border-color 0.15s;
}

.keybind-row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.keybind-label {
  font-size: 13px;
  color: #e2e8f0;
  font-weight: 500;
}

.keybind-key-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
  font-weight: 700;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 10px;
  cursor: pointer;
  min-width: 90px;
  text-align: center;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.keybind-key-btn:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.keybind-key-btn.recording {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fca5a5;
  animation: keyPulse 1s infinite alternate;
}

@keyframes keyPulse {
  from { box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }
  to   { box-shadow: 0 0 16px rgba(239, 68, 68, 0.8); }
}

/* ========================================================
   HOTKEYS HELP MODAL STYLES
   ======================================================== */
.hotkeys-modal-card {
  width: min(600px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hotkeys-help-scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  max-height: 58vh;
  padding-right: 6px;
}

.hotkeys-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hotkeys-category-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hotkeys-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 14px;
  transition: background 0.15s, border-color 0.15s;
}

.hotkeys-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.hotkeys-row-label {
  font-size: 13.5px;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hotkeys-row-label i {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  font-style: normal;
}

.hotkeys-row-keys {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hotkeys-kbd {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-family: inherit;
  display: inline-block;
  line-height: 1.2;
}

.hotkeys-modal-footer {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================================
   MOBILE CONTROLS (TOUCH JOYSTICK + ACTION BUTTONS)
   ======================================================== */
#mobile-controls {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 28;
  touch-action: none;
}

@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
  #mobile-controls {
    display: block;
  }

  /* Disable GPU-heavy backdrop-filter on mobile WebGL overlay to guarantee high 60 FPS */
  #mobile-joystick-base,
  #mobile-joystick-stick,
  .mobile-action-btn,
  #top-bar,
  #cinema-hud,
  #chat-float,
  .modal-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #mobile-joystick-base {
    background: rgba(13, 17, 28, 0.88) !important;
  }
  #mobile-joystick-stick {
    background: rgba(255, 255, 255, 0.45) !important;
  }
  .mobile-action-btn {
    background: rgba(18, 24, 38, 0.94) !important;
  }
  #top-bar {
    background: none !important;
  }

  /* Mobile: Top Bar & Cinema HUD smooth auto-fade (5s inactivity) */
  #top-bar {
    background: none !important;
    transition: opacity 0.35s ease !important;
  }
  #top-bar.hud-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #top-bar.hud-hidden > * {
    pointer-events: none !important;
  }

  #cinema-hud {
    transition: opacity 0.35s ease, transform 0.35s ease !important;
  }
  #cinema-hud.hud-hidden,
  #cinema-hud.hud-fading {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
  }
  #cinema-hud.hud-hidden > *,
  #cinema-hud.hud-fading > * {
    pointer-events: none !important;
  }
  #cinema-hud.hud-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  #cinema-hud.hud-visible > * {
    pointer-events: auto !important;
  }

  /* Hide Hotkeys '?' button in top HUD on phones & tablets */
  #btn-hotkeys-help {
    display: none !important;
  }

  /* Hide Controls tab in Settings modal on phones & tablets */
  .settings-tab-btn[data-tab="controls"] {
    display: none !important;
  }
  #set-tab-controls {
    display: none !important;
  }

  /* Mobile: Hide interaction prompt "Нажмите E чтобы сесть", keep only chair button */
  #interaction-prompt {
    display: none !important;
  }
}

/* Fallback classes for mobile & touch environments */
body.is-mobile-device #top-bar,
body.is-touch-device #top-bar {
  background: none !important;
  transition: opacity 0.35s ease !important;
}
body.is-mobile-device #top-bar.hud-hidden,
body.is-touch-device #top-bar.hud-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-mobile-device #top-bar.hud-hidden > *,
body.is-touch-device #top-bar.hud-hidden > * {
  pointer-events: none !important;
}

body.is-mobile-device #cinema-hud,
body.is-touch-device #cinema-hud {
  transition: opacity 0.35s ease, transform 0.35s ease !important;
}
body.is-mobile-device #cinema-hud.hud-hidden,
body.is-touch-device #cinema-hud.hud-hidden,
body.is-mobile-device #cinema-hud.hud-fading,
body.is-touch-device #cinema-hud.hud-fading {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
}
body.is-mobile-device #cinema-hud.hud-hidden > *,
body.is-touch-device #cinema-hud.hud-hidden > *,
body.is-mobile-device #cinema-hud.hud-fading > *,
body.is-touch-device #cinema-hud.hud-fading > * {
  pointer-events: none !important;
}
body.is-mobile-device #cinema-hud.hud-visible,
body.is-touch-device #cinema-hud.hud-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
body.is-mobile-device #cinema-hud.hud-visible > *,
body.is-touch-device #cinema-hud.hud-visible > * {
  pointer-events: auto !important;
}

body.is-mobile-device #btn-hotkeys-help,
body.is-touch-device #btn-hotkeys-help {
  display: none !important;
}

body.is-mobile-device .voice-mode-group,
body.is-touch-device .voice-mode-group {
  display: none !important;
}

body.is-mobile-device .settings-tab-btn[data-tab="controls"],
body.is-touch-device .settings-tab-btn[data-tab="controls"] {
  display: none !important;
}

body.is-mobile-device #set-tab-controls,
body.is-touch-device #set-tab-controls {
  display: none !important;
}

body.is-mobile-device #interaction-prompt,
body.is-touch-device #interaction-prompt {
  display: none !important;
}

body.is-mobile-device .brand-title,
body.is-touch-device .brand-title {
  display: none !important;
}

body.is-mobile-device .room-badge,
body.is-touch-device .room-badge {
  display: none !important;
}

body.is-mobile-device .brand-badge,
body.is-touch-device .brand-badge {
  display: none !important;
}

body.is-mobile-device .fullscreen-btn-text,
body.is-touch-device .fullscreen-btn-text {
  display: none !important;
}

body.is-mobile-device .btn-fullscreen-toggle,
body.is-touch-device .btn-fullscreen-toggle {
  padding: 3px 6px !important;
  min-width: 27px !important;
  height: 26px !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
}

body.is-mobile-device .top-buttons,
body.is-touch-device .top-buttons {
  gap: 4px !important;
}

body.is-mobile-device .btn-icon,
body.is-touch-device .btn-icon {
  padding: 3.5px 7px !important;
  font-size: 10.5px !important;
  border-radius: 9px !important;
  gap: 3.5px !important;
}

#mobile-joystick-zone {
  position: absolute;
  /* Стик поднят выше: на прежней высоте он накрывал нижний HUD
     (прогресс-бар и кнопки), и в него рукой было не попасть. */
  bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  left: 20px;
  width: 140px;
  height: 140px;
  pointer-events: auto;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.2s ease, bottom 0.25s ease;
}

body.is-fullscreen #mobile-joystick-zone,
:fullscreen #mobile-joystick-zone,
:-webkit-full-screen #mobile-joystick-zone {
  bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
}

#mobile-joystick-base {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(13, 17, 28, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

#mobile-joystick-stick {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.25);
  position: absolute;
  transform: translate(0px, 0px);
  pointer-events: none;
  touch-action: none;
  will-change: transform;
}

#mobile-actions {
  position: absolute;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  pointer-events: auto;
  z-index: 35;
  transition: bottom 0.25s ease, opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-seated #mobile-actions {
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  transition: bottom 0.25s ease, opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-seated #mobile-actions.hud-faded,
body.is-seated #mobile-actions.hud-hidden,
#mobile-actions.hud-faded,
#mobile-actions.hud-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(18px) scale(0.92) !important;
}

body.is-fullscreen #mobile-actions,
:fullscreen #mobile-actions,
:-webkit-full-screen #mobile-actions {
  bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important;
}

.mobile-action-btn {
  background: rgba(13, 17, 28, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 18px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, background 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-action-btn:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
}

.mobile-action-btn.btn-sit {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 255, 255, 0.2);
  padding: 13px 20px;
  font-size: 15px;
  animation: pulseSitBtn 1.8s infinite alternate;
}

@keyframes pulseSitBtn {
  from { box-shadow: 0 0 8px rgba(255, 255, 255, 0.2); }
  to   { box-shadow: 0 0 20px rgba(255, 255, 255, 0.45); }
}

/* Кнопка «Сесть / Встать» на мобильном: всегда слева, над местом,
   где стоит стик. Раньше условие body:not(.is-seated) отправляло
   кнопку «Встать» обратно в правую колонку мобильных кнопок, и
   человек вынужден был искать её справа. Теперь место одно и то
   же в обоих состояниях. */
#mobile-btn-sit {
  position: fixed !important;
  left: 20px !important;
  right: auto !important;
  bottom: calc(300px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 40 !important;
  border-radius: 16px !important;
  background: rgba(13, 17, 28, 0.92) !important;
  border: 1.5px solid rgba(255, 215, 0, 0.6) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 215, 0, 0.3) !important;
  transition: bottom 0.25s ease, opacity 0.2s ease !important;
}

body.is-fullscreen #mobile-btn-sit,
:fullscreen #mobile-btn-sit,
:-webkit-full-screen #mobile-btn-sit {
  bottom: calc(320px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Hide joystick when seated */
body.is-seated #mobile-joystick-zone {
  display: none !important;
}

/* Hide mobile controls when modals are open */
body.modal-open #mobile-controls {
  display: none !important;
}

/* ========================================================
   RESPONSIVE DESIGN FOR MOBILE DEVICES (<= 768px)
   ======================================================== */
@media (max-width: 768px) {
  #top-bar {
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-bottom: 6px;
    align-items: center;
  }

  .top-bar-left {
    gap: 0 !important;
  }

  .brand-title {
    display: none !important;
  }

  .room-badge {
    display: none !important;
  }

  .brand-badge {
    display: none !important;
  }

  .fullscreen-btn-text {
    display: none !important;
  }

  .btn-fullscreen-toggle {
    padding: 3px 6px !important;
    min-width: 27px !important;
    height: 26px !important;
    font-size: 13.5px !important;
    border-radius: 8px !important;
    justify-content: center !important;
  }

  .top-buttons {
    gap: 4px;
    overflow-x: auto;
    max-width: calc(100vw - 44px);
    scrollbar-width: none;
  }

  .top-buttons::-webkit-scrollbar {
    display: none;
  }

  .btn-icon {
    padding: 3.5px 7px;
    font-size: 10.5px;
    border-radius: 9px;
    white-space: nowrap;
    gap: 3.5px;
  }

  .mic-meter-wrap {
    display: flex !important;
    padding: 3px 8px;
    height: 26px;
    gap: 4px;
    border-radius: 12px;
  }

  .mic-meter-wrap .meter-track {
    width: 28px;
    height: 6px;
  }
}

/* Specific sub-adjustments for Portrait Mode (Vertical) */
@media (max-width: 768px) and (orientation: portrait) {
  #top-bar {
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    padding-bottom: 6px;
  }

  #chat-float {
    top: calc(38px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
  }

  #mobile-actions {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    right: 16px;
  }

  body.is-fullscreen #mobile-actions,
  :fullscreen #mobile-actions,
  :-webkit-full-screen #mobile-actions {
    bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #mobile-joystick-zone {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    transition: opacity 0.2s ease, bottom 0.25s ease;
  }

  body.is-fullscreen #mobile-joystick-zone,
  :fullscreen #mobile-joystick-zone,
  :-webkit-full-screen #mobile-joystick-zone {
    bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #mobile-btn-sit {
    left: 16px !important;
    bottom: calc(300px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.is-fullscreen #mobile-btn-sit,
  :fullscreen #mobile-btn-sit,
  :-webkit-full-screen #mobile-btn-sit {
    bottom: calc(320px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #hud-controls-row {
    padding: 0 8px;
    gap: 6px;
    flex-wrap: nowrap;
  }

  .hud-left {
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: visible;
  }

  .yt-movie-info {
    max-width: 180px;
    min-width: 0;
    overflow: hidden;
  }

  .yt-title {
    font-size: 12px;
  }

  .hud-resume-container {
    max-width: 180px;
    gap: 3px;
  }

  .btn-hud-resume {
    max-width: 152px;
    font-size: 11px;
    padding: 2px 6px;
    gap: 4px;
  }

  .hud-resume-label {
    display: none;
  }

  .btn-hud-resume-dismiss {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .hud-right {
    gap: 4px;
    flex-shrink: 0;
  }

  .yt-volume:hover .volume-slider-wrap,
  .yt-volume.active .volume-slider-wrap,
  .yt-volume.interacting .volume-slider-wrap {
    width: 50px;
    max-width: 50px;
    margin-left: 4px;
    margin-right: 2px;
  }

  #cinema-volume-slider {
    width: 48px;
    padding: 6px 0;
    touch-action: none;
  }

  #btn-theater-text {
    display: none !important;
  }
}

/* Specific sub-adjustments for Landscape Mode (Horizontal / Auto-rotation) */
@media (max-width: 1024px) and (orientation: landscape) {
  .voice-mode-group {
    display: none !important;
  }

  #top-bar {
    padding-top: max(4px, env(safe-area-inset-top, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    padding-bottom: 5px;
    background: none !important;
    align-items: center;
  }

  .top-bar-left {
    gap: 0 !important;
  }

  .brand-title {
    display: none !important;
  }

  .room-badge {
    display: none !important;
  }

  .brand-badge {
    display: none !important;
  }

  .fullscreen-btn-text {
    display: none !important;
  }

  .btn-fullscreen-toggle {
    padding: 3px 6px !important;
    min-width: 27px !important;
    height: 25px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    justify-content: center !important;
  }

  .top-buttons {
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .btn-icon {
    padding: 3.5px 6.5px;
    font-size: 10px;
    border-radius: 9px;
    gap: 3.5px;
  }

  /* Compact floating chat in landscape */
  #chat-float {
    top: calc(32px + env(safe-area-inset-top, 0px));
    left: max(14px, env(safe-area-inset-left, 0px));
    width: 280px;
    max-width: 36vw;
    max-height: 200px;
  }

  /* Compact mobile actions in landscape so they don't block viewport */
  #mobile-actions {
    bottom: calc(85px + env(safe-area-inset-bottom, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
    gap: 8px;
  }

  body.is-fullscreen #mobile-actions,
  :fullscreen #mobile-actions,
  :-webkit-full-screen #mobile-actions {
    bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-action-btn {
    padding: 7px 12px;
    font-size: 12.5px;
    border-radius: 12px;
  }

  #mobile-joystick-zone {
    /* Ниже, чем было: в альбомном положении рука тянется к стику
       мимо нижнего HUD, и на прежней высоте он попадал под него. */
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    left: max(14px, env(safe-area-inset-left, 0px));
    transform: scale(0.82);
    transform-origin: bottom left;
    transition: opacity 0.2s ease, bottom 0.25s ease;
  }

  body.is-fullscreen #mobile-joystick-zone,
  :fullscreen #mobile-joystick-zone,
  :-webkit-full-screen #mobile-joystick-zone {
    bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #mobile-btn-sit {
    left: max(14px, env(safe-area-inset-left, 0px)) !important;
    bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    border-radius: 12px !important;
  }

  body.is-fullscreen #mobile-btn-sit,
  :fullscreen #mobile-btn-sit,
  :-webkit-full-screen #mobile-btn-sit {
    bottom: calc(178px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #cinema-hud {
    padding: 0 0 max(6px, env(safe-area-inset-bottom, 0px)) 0;
  }

  #hud-controls-row {
    flex-wrap: nowrap !important;
    padding: 0 max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
    gap: 8px;
    align-items: center;
  }

  body.theater-mode #top-bar {
    padding: 8px 12px 24px !important;
  }
  body.theater-mode #top-bar #btn-fullscreen-toggle {
    min-width: 32px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
  body.theater-mode .top-buttons {
    max-width: 100% !important;
  }
  body.theater-mode .mic-meter-wrap {
    display: flex !important;
  }

  .cinema-audio-dropdown {
    width: 250px;
    max-height: 330px;
  }
  .audio-tracks-list {
    max-height: 110px;
  }

  .hud-left {
    order: 1;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    gap: 8px;
    overflow: visible;
  }

  .btn-reactions-toggle {
    padding: 5px 8px !important;
    font-size: 18px !important;
    min-width: 36px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  .cinema-reactions-dropdown {
    width: 220px;
    max-width: 88vw;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .hud-right {
    order: 2;
    flex-shrink: 0;
    gap: 6px;
  }

  #btn-theater-text {
    display: none !important;
  }

  #cinema-volume-slider {
    width: 55px;
  }

  .yt-btn-secondary,
  .yt-btn-danger {
    padding: 5px 10px;
    font-size: 12px;
  }

  #chat-float {
    top: 48px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
  }

  .settings-modal-layout {
    flex-direction: column !important;
    width: calc(100vw - 20px) !important;
    max-height: 92vh !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  .modal-card,
  .settings-modal-card,
  .players-modal-card {
    width: 100% !important;
    max-height: 90vh !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }

  .new-catalog-top-hud {
    padding: 8px 12px 24px !important;
  }

  .catalog-del-modal-card {
    width: calc(100vw - 16px) !important;
    min-height: 520px !important;
    margin-top: 46px !important;
    height: calc(100vh - 58px) !important;
    max-height: calc(100vh - 58px) !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }

  .settings-tab-btn {
    font-size: 12px !important;
    padding: 8px 4px !important;
    gap: 4px !important;
  }

  .settings-corner-stat {
    top: 12px;
    padding: 5px 10px;
    font-size: 11.5px;
  }
  .corner-stat-left { left: 12px; }
  .corner-stat-right { right: 12px; }

  .kp-movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 10px !important;
  }

  .kp-movie-card {
    min-height: 270px !important;
  }

  .kp-poster-wrap {
    height: 180px !important;
    min-height: 180px !important;
  }

  #youtube-movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }

  .yt-movie-card {
    min-height: 220px !important;
  }

  .yt-movie-card .kp-poster-wrap {
    height: 96px !important;
    min-height: 96px !important;
  }

  #interaction-prompt {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 16px;
  }
}

/* ═══════════════════════════════════════════
   THEATER MODE (Кинорежим на клавишу Z)
═══════════════════════════════════════════ */
body.theater-mode #cinema-video-source {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain !important;
  background: #000 !important;
  z-index: 50 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: default;
}

body.theater-mode.theater-cursor-hidden:not(.modal-open),
body.theater-mode.theater-cursor-hidden:not(.modal-open) *:not(.modal-overlay):not(.modal-overlay *):not(.modal-card):not(.modal-card *):not(#catalog-modal):not(#catalog-modal *) {
  cursor: none !important;
}

/* Explicit active cursor for catalog modal and all interactive elements */
body.modal-open,
#catalog-modal,
#catalog-modal .modal-card,
#catalog-modal .catalog-modal-card,
#catalog-modal .catalog-main,
#catalog-modal .catalog-content,
#catalog-modal .catalog-topbar,
#catalog-modal .catalog-sidebar,
#catalog-modal .new-catalog-top-hud {
  cursor: default !important;
}

#catalog-modal button,
#catalog-modal .btn-icon,
#catalog-modal .btn-voice-search,
#catalog-modal .palette-icon-btn,
#catalog-modal .btn-modal-close,
#catalog-modal .btn-return-cinema,
#catalog-modal .sidebar-toggle-btn,
#catalog-modal .nav-item,
#catalog-modal .genre-card,
#catalog-modal .movie-card,
#catalog-modal .search-shortcut-badge,
#catalog-modal .search-clear-btn,
#catalog-modal .mic-meter-wrap,
#catalog-modal [role="button"],
#catalog-modal a,
#catalog-modal .clickable {
  cursor: pointer !important;
}

#catalog-modal input,
#catalog-modal textarea,
#catalog-modal .catalog-search-input,
#catalog-modal .search-input-box {
  cursor: text !important;
}

#catalog-modal .catalog-search-input {
  caret-color: var(--accent-primary, #10b981) !important;
}

/* In theater mode, show ⛶ Экран fullscreen button in top-left, and mic meter, mic button, and share button in top-right */
body.theater-mode #top-bar {
  display: flex !important;
  z-index: 60 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%) !important;
  border-bottom: none !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 20px 30px !important;
  transition: opacity 0.35s ease !important;
  pointer-events: none !important;
}

body.theater-mode #top-bar > * {
  pointer-events: auto !important;
}

body.theater-mode #top-bar.hud-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.theater-mode #top-bar.hud-hidden > * {
  pointer-events: none !important;
}

body.theater-mode #top-bar .top-bar-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  pointer-events: auto !important;
}

body.theater-mode #top-bar #btn-fullscreen-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  border-radius: 16px !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  touch-action: manipulation !important;
}

body.theater-mode #top-bar #btn-fullscreen-toggle:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
}

body.theater-mode #top-bar #btn-fullscreen-toggle.active {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important;
}

body.theater-mode #top-bar .brand-badge,
body.theater-mode #top-bar #btn-hotkeys-help,
body.theater-mode #top-bar #btn-open-wardrobe,
body.theater-mode #top-bar #btn-open-settings,
body.theater-mode #top-bar #btn-toggle-lights {
  display: none !important;
}

body.theater-mode #top-bar .mic-meter-wrap {
  display: flex !important;
}

body.theater-mode.theater-cursor-hidden #top-bar {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.theater-mode #crosshair {
  display: none !important;
}

body.theater-mode #interaction-prompt {
  display: none !important;
}

body.theater-mode #mobile-controls,
body.theater-mode #mobile-actions {
  display: none !important;
}

/* Elevate HUD, chat, space-hint above the full-screen video */
body.theater-mode #cinema-hud {
  z-index: 60 !important;
}

body.theater-mode #chat-float {
  z-index: 65 !important;
}

body.theater-mode #space-hint {
  z-index: 70 !important;
}

/* ──────────────────────────────────────────────
   CINEMA SUBTITLES OVERLAY (3D Room & Theater Mode)
   ────────────────────────────────────────────── */
#cinema-video-source::cue {
  opacity: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  color: transparent !important;
}

.cinema-subtitles-overlay {
  position: fixed;
  bottom: 85px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 84vw;
  text-align: center;
  pointer-events: none;
  z-index: 59;
  transition: bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  user-select: none;
}

body.theater-mode .cinema-subtitles-overlay {
  z-index: 59;
}

.cinema-subtitles-overlay.hud-faded {
  bottom: 35px;
}

.cinema-subtitles-text {
  display: inline-block;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fc-subtitles-font-size, 21px);
  font-weight: 600;
  line-height: 1.35;
  padding: 5px 14px;
  background: rgba(10, 12, 18, 0.84);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: pre-line;
  word-break: break-word;
}

.subtitles-size-row {
  display: flex;
  gap: 6px;
  padding: 6px 12px 10px;
}

.btn-sub-size {
  flex: 1;
  padding: 5px 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.btn-sub-size:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.btn-sub-size.active {
  background: #e11d48;
  border-color: #f43f5e;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(225, 29, 72, 0.4);
}

@media (max-width: 768px) {
  .cinema-subtitles-text {
    font-size: 15px;
    padding: 3px 10px;
  }
  .cinema-subtitles-overlay {
    bottom: 75px;
    max-width: 92vw;
  }
  .cinema-subtitles-overlay.hud-faded {
    bottom: 25px;
  }
}

/* Theater Mode Button in HUD */
.btn-theater {
  background: rgba(225, 29, 72, 0.22) !important;
  border-color: rgba(225, 29, 72, 0.5) !important;
  color: #fff !important;
  font-weight: 600 !important;
  touch-action: manipulation !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn-theater * {
  pointer-events: none;
}

.btn-theater:hover {
  background: rgba(225, 29, 72, 0.4) !important;
  border-color: rgba(225, 29, 72, 0.8) !important;
  transform: translateY(-1px);
}

.btn-theater.in-theater {
  background: rgba(225, 29, 72, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 14px rgba(225, 29, 72, 0.55) !important;
  color: #fff !important;
}

.btn-theater.in-theater #btn-theater-text {
  display: inline !important;
  margin-left: 4px;
}

@media (max-width: 1024px) {
  #btn-theater-mode {
    min-height: 34px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px !important;
  }
}

/* Picture-in-Picture Button (PC Only) */
#btn-theater-pip {
  display: none !important;
}

body:not(.is-mobile-device):not(.is-touch-device) #btn-theater-pip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(30, 41, 59, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: all 0.2s ease;
}

/* В зале (стоя или сидя): только картинка без надписи */
body:not(.theater-mode) #btn-theater-pip #btn-theater-pip-text {
  display: none !important;
}

body:not(.theater-mode) #btn-theater-pip {
  padding: 6px 10px !important;
  min-width: 38px;
}

/* В кинорежиме: с надписью «В окне» */
body.theater-mode #btn-theater-pip #btn-theater-pip-text {
  display: inline !important;
}

body:not(.is-mobile-device):not(.is-touch-device) #btn-theater-pip:hover {
  background: rgba(51, 65, 85, 0.95) !important;
  border-color: rgba(99, 102, 241, 0.75) !important;
  transform: translateY(-1px);
}

body:not(.is-mobile-device):not(.is-touch-device) #btn-theater-pip.in-pip {
  background: rgba(99, 102, 241, 0.88) !important;
  border-color: rgba(165, 180, 252, 0.9) !important;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.55) !important;
}

body.is-mobile-device #btn-theater-pip,
body.is-touch-device #btn-theater-pip {
  display: none !important;
}

/* Theater Mode Skip Intro Button («Пропустить начало») */
.theater-skip-intro-btn {
  position: fixed;
  right: 28px;
  top: 58%;
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.25s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.theater-mode .theater-skip-intro-btn {
  display: inline-flex;
}

body.theater-mode .theater-skip-intro-btn.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.theater-skip-intro-btn:hover {
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(99, 102, 241, 0.8);
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.65), 0 0 16px rgba(99, 102, 241, 0.45);
}

.theater-skip-intro-btn:active {
  transform: translateY(-50%) scale(0.97);
}

.theater-skip-intro-btn .skip-intro-icon {
  font-size: 15px;
  line-height: 1;
}

.theater-skip-intro-btn .skip-intro-text {
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Hide Skip Intro when NOT in theater mode */
body:not(.theater-mode) .theater-skip-intro-btn {
  display: none !important;
}

/* Ensure video element is 100% bright and visible in Picture-in-Picture */
body.pip-active #cinema-video-source {
  opacity: 1 !important;
  filter: none !important;
}

/* Hide Skip Intro when Picture-in-Picture is active */
body.pip-active .theater-skip-intro-btn,
body.theater-mode.pip-active .theater-skip-intro-btn {
  display: none !important;
}

/* If HUD is faded in theater mode, reduce skip intro opacity slightly when idle */
body.theater-mode.theater-cursor-hidden .theater-skip-intro-btn.visible {
  opacity: 0.7;
}

body.theater-mode.theater-cursor-hidden .theater-skip-intro-btn.visible:hover {
  opacity: 1;
}

/* Empty state notice */
.theater-empty-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 58 !important;
  background: rgba(13, 17, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 32px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 440px;
}

.theater-empty-icon {
  font-size: 44px;
}

.theater-empty-text {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.theater-empty-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
}

.theater-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.theater-empty-actions button {
  touch-action: manipulation !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Landscape Orientation Prompt Overlay */
.orientation-landscape-prompt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(8, 12, 20, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  animation: fadeInPrompt 0.25s ease-out;
  pointer-events: auto;
}

@keyframes fadeInPrompt {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.orient-card {
  background: linear-gradient(150deg, rgba(28, 36, 54, 0.95), rgba(14, 18, 30, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  padding: 30px 24px;
  max-width: 370px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(225, 29, 72, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.orient-icon-anim {
  font-size: 48px;
  line-height: 1;
  display: inline-block;
  animation: orientRotate 2.2s ease-in-out infinite;
}

@keyframes orientRotate {
  0%, 15% { transform: rotate(0deg); }
  45%, 70% { transform: rotate(-90deg); }
  85%, 100% { transform: rotate(0deg); }
}

.orient-title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.orient-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

.orient-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.orient-actions button {
  touch-action: manipulation !important;
  cursor: pointer !important;
}

/* =============================================
   Room Type Switcher (Public / Private)
   ============================================= */
.room-type-switcher {
  display: flex;
  gap: 8px;
}

.room-type-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.room-type-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
}

.room-type-btn.active {
  border-color: #e11d48;
  background: rgba(225, 29, 72, 0.18);
  color: #fff;
}

.private-invite-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}

.private-invite-wrap .form-input {
  flex: 1;
  min-width: 0;
}

/* =============================================
   Admin Button & Panel
   ============================================= */
.btn-admin {
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.2), rgba(255, 100, 0, 0.2)) !important;
  border: 1px solid rgba(255, 180, 0, 0.5) !important;
  color: #ffd700 !important;
  font-weight: 700;
}

.btn-admin:hover {
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.35), rgba(255, 100, 0, 0.35)) !important;
  border-color: #ffd700 !important;
  box-shadow: 0 0 12px rgba(255, 210, 0, 0.4);
}

.admin-modal-card {
  width: 480px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Прокручивается не карточка, а колонка внутри неё: полоса у самой
   карточки идёт прямой линией до края и на скруглённых углах выходит
   за рамку окна. У вложенной колонки рамка обрезает края, а полоса
   стоит на 6 px левее — то же устройство, что в каталоге и настройках. */
.admin-modal-card {
  overflow: hidden !important;
}

.admin-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  margin-right: 6px;
}

.admin-section {
  margin-top: 18px;
}

.admin-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.admin-toggle-row:last-child {
  border-bottom: none;
}

.admin-toggle-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.admin-toggle-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.admin-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}

.admin-toggle-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  margin-top: 2px;
}

.admin-toggle-btn {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.04em;
}

.admin-toggle-btn[data-active="true"] {
  background: rgba(225, 29, 72, 0.3);
  border-color: #e11d48;
  color: #ff6b8a;
}

.admin-toggle-btn[data-active="true"]::before {
  content: '🔒 ';
}

#admin-btn-screenshare::before {
  content: none !important;
}

#admin-btn-screenshare {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

#admin-btn-screenshare:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
}

#admin-btn-screenshare[data-active="true"] {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

#admin-btn-streamercam::before {
  content: none !important;
}

#admin-btn-streamercam {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: #c084fc;
}

#admin-btn-streamercam:hover {
  background: rgba(168, 85, 247, 0.25);
  border-color: #a855f7;
}

#admin-btn-streamercam[data-active="true"] {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.admin-players-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.admin-player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.admin-player-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.admin-player-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}

.admin-player-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 200, 0, 0.15);
  color: #ffd700;
  border: 1px solid rgba(255, 200, 0, 0.3);
}

.admin-kick-btn {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(225, 29, 72, 0.4);
  background: rgba(225, 29, 72, 0.12);
  color: #ff6b8a;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-kick-btn:hover {
  background: rgba(225, 29, 72, 0.3);
  border-color: #e11d48;
}

/* =============================================
   Whisper state on the mic meter
   ============================================= */
/* Шёпот владеет виджетом иконку в верхнем HUD. Цвет амбера — по ней понятно, что это шёпот, а не обычный звук. */
.mic-meter-wrap.whispering {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.55), 0 0 16px rgba(251, 191, 36, 0.35);
  border-radius: 10px;
}

.mic-meter-wrap.whispering .mic-meter-icon {
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.9));
}

/* iOS-style Switch Toggle */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.16);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.switch-toggle input:checked + .switch-slider {
  background-color: #22c55e;
  border-color: #16a34a;
}

.switch-toggle input:checked + .switch-slider:before {
  transform: translateX(20px);
}

/* ═══════════════════════════════════════
   WARDROBE & AVATAR CUSTOMIZATION MODAL
═══════════════════════════════════════ */
.wardrobe-modal-card {
  width: min(860px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: rgba(15, 20, 30, 0.95);
  backdrop-filter: blur(16px);
  /* Акцентный цвет темы вместо своего оттенка. */
  border: 1px solid var(--border-hover, rgba(255, 255, 255, 0.15));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px var(--accent-glow, rgba(255, 255, 255, 0.1));
}

.wardrobe-content-grid {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 20px;
  overflow-y: auto;
  max-height: calc(85vh - 120px);
  padding-right: 4px;
}

@media (max-width: 768px) {
  .wardrobe-content-grid {
    grid-template-columns: 1fr;
  }
}

.wardrobe-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wardrobe-canvas-wrap {
  position: relative;
  width: 100%;
  height: 360px;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.wardrobe-canvas-wrap:active {
  cursor: grabbing;
}

#wardrobe-preview-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.wardrobe-canvas-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.65);
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
}

.wardrobe-options-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wardrobe-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wardrobe-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.wardrobe-color-picker-input {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.wardrobe-colors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wardrobe-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.wardrobe-color-swatch:hover {
  transform: scale(1.12);
}

.wardrobe-color-swatch.active {
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  transform: scale(1.12);
}

.wardrobe-hats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.wardrobe-hat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wardrobe-hat-card:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.wardrobe-hat-card.active {
  background: rgba(225, 29, 72, 0.25);
  border-color: #f43f5e;
  color: #fff;
  box-shadow: 0 0 12px rgba(225, 29, 72, 0.35);
}

.wardrobe-hat-icon {
  font-size: 22px;
  line-height: 1;
}

.wardrobe-hat-name {
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════
   STREAMER CAMERA FLOATING WIDGET
═══════════════════════════════════════════════ */
.streamer-cam-widget {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(168, 85, 247, 0.2);
  overflow: hidden;
  min-width: 180px;
  min-height: 110px;
  touch-action: none;
  transform-origin: center center;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease;
}

.streamer-cam-widget.is-viewer {
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0, 0, 1), left 0.06s linear, top 0.06s linear, width 0.06s linear, height 0.06s linear, box-shadow 0.3s ease;
}

/* Reduced size and 50% opacity in cinema/theater mode when HUD disappears */
.streamer-cam-widget.hud-dimmed {
  opacity: 0.5 !important;
  transform: scale(0.85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.streamer-cam-widget.hud-dimmed:hover {
  opacity: 1 !important;
  transform: scale(1);
}

.streamer-cam-widget.is-viewer .streamer-only {
  display: none !important;
}

.streamer-cam-widget.is-streamer .viewer-only {
  display: none !important;
}

.streamer-cam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
  cursor: grab;
  gap: 8px;
}

.streamer-cam-header:active {
  cursor: grabbing;
}

.streamer-cam-widget.is-viewer .streamer-cam-header {
  cursor: default;
}

.streamer-cam-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.cam-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #ef4444;
  letter-spacing: 0.06em;
  background: rgba(239, 68, 68, 0.15);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  flex-shrink: 0;
}

.cam-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: cam-pulse 1.5s infinite;
}

@keyframes cam-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.streamer-cam-title {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.streamer-cam-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cam-header-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 12px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.cam-header-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.cam-header-btn.cam-btn-close:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: #fca5a5;
}

.streamer-cam-settings-panel {
  background: rgba(10, 15, 28, 0.96);
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.5px;
}

.cam-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cam-setting-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 11px;
  white-space: nowrap;
}

.cam-setting-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  padding: 4px 8px;
  font-size: 11px;
  max-width: 170px;
  outline: none;
  cursor: pointer;
}

.cam-setting-select option {
  background: #0f172a;
  color: #fff;
}

.cam-btn-group {
  display: flex;
  gap: 4px;
}

.cam-choice-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 10.5px;
  padding: 3px 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s ease;
}

.cam-choice-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.cam-choice-btn.active {
  background: rgba(168, 85, 247, 0.35);
  border-color: #a855f7;
  color: #e9d5ff;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.cam-setting-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.35;
  padding-top: 2px;
}

.streamer-cam-body {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 80px;
  background: #000;
  overflow: hidden;
}

#streamer-cam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.streamer-cam-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.9);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
}

.cam-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(168, 85, 247, 0.3);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: cam-spin 0.8s linear infinite;
}

@keyframes cam-spin {
  to { transform: rotate(360deg); }
}

.cam-resize-handle {
  position: absolute;
  z-index: 15;
  user-select: none;
}

.cam-resize-handle.br {
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 2px 4px;
  font-size: 13px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.15s ease;
}

.cam-resize-handle.br:hover {
  color: #c084fc;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
}

.cam-resize-handle.b {
  bottom: 0;
  left: 0;
  width: calc(100% - 22px);
  height: 7px;
  cursor: ns-resize;
}

.cam-resize-handle.r {
  right: 0;
  top: 0;
  width: 7px;
  height: calc(100% - 22px);
  cursor: ew-resize;
}

.streamer-cam-widget.is-minimized {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.streamer-cam-widget.is-minimized .streamer-cam-body,
.streamer-cam-widget.is-minimized .streamer-cam-settings-panel,
.streamer-cam-widget.is-minimized .cam-resize-handle {
  display: none !important;
}

.streamer-cam-widget.is-minimized .streamer-cam-header {
  border-bottom: none;
}

/* Mobile & Touch Adjustments for Streamer Camera */
@media (max-width: 768px) {
  .cam-resize-handle.br {
    width: 32px;
    height: 32px;
    font-size: 15px;
    padding: 4px 6px;
  }
  .cam-resize-handle.b {
    height: 12px;
    width: calc(100% - 32px);
  }
  .cam-resize-handle.r {
    width: 12px;
    height: calc(100% - 32px);
  }
  .cam-header-btn {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
}

/* Mobile Admin Button in floating mobile-actions */
#mobile-btn-admin {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.3), rgba(168, 85, 247, 0.35));
  border-color: rgba(234, 179, 8, 0.6);
  color: #fef08a;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.25);
}

#mobile-btn-admin:hover,
#mobile-btn-admin:active {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.5), rgba(168, 85, 247, 0.5));
  transform: scale(1.06);
}

/* ═══════════════════════════════════════════
   DOOR EXIT CONFIRMATION MODAL
   ═══════════════════════════════════════════ */
.door-exit-card {
  width: min(390px, 92vw) !important;
  padding: 28px 24px !important;
  text-align: center;
  border: 1px solid rgba(225, 29, 72, 0.38) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(225, 29, 72, 0.16) !important;
  animation: modalEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.door-exit-icon {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 14px rgba(225, 29, 72, 0.45));
  animation: pulse-door 2.2s infinite ease-in-out;
}

@keyframes pulse-door {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}

.door-exit-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 4px;
}

.door-exit-actions button {
  cursor: pointer;
  border-radius: 12px !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
}

.door-exit-actions button:hover {
  transform: translateY(-2px);
}

.door-exit-actions button:active {
  transform: translateY(0);
}

/* PC vs Phone: Hide camera flip button on PC devices (show only on mobile) */
body:not(.is-mobile-device) #cam-btn-flip {
  display: none !important;
}

/* ──────────────────────────────────────────────
   3D Screen Display Settings (Tab "Экран 3D")
   ────────────────────────────────────────────── */
.screen3d-settings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: background 0.2s, border-color 0.2s;
}

.screen3d-settings-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

.screen3d-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.screen3d-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.screen3d-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.45;
}

.screen3d-toggle-btn {
  flex-shrink: 0;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.65);
  transition: all 0.2s ease;
}

.screen3d-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.screen3d-toggle-btn[data-active="true"] {
  background: linear-gradient(135deg, #e11d48, #9333ea);
  border-color: #f43f5e;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(225, 29, 72, 0.45);
}

/* ──────────────────────────────────────────────
   DISCONNECT & SERVER UPDATE MODAL
   ────────────────────────────────────────────── */
.disconnect-card {
  max-width: 520px;
  width: 90%;
  padding: 38px 32px 30px;
  background: rgba(13, 17, 28, 0.92);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(245, 158, 11, 0.16);
  border-radius: 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: dcCardPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dcCardPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.disconnect-icon-wrap {
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.04) 70%, transparent 100%);
  filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.5));
  animation: dcPulse 2.4s ease-in-out infinite;
}

@keyframes dcPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.5)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 28px rgba(245, 158, 11, 0.8)); }
}

.disconnect-icon {
  width: 60px;
  height: 60px;
}

.disconnect-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.disconnect-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.84);
  margin-bottom: 28px;
  max-width: 440px;
}

.disconnect-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.disconnect-spinner-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.disconnect-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(245, 158, 11, 0.25);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: dcSpin 0.9s linear infinite;
}

@keyframes dcSpin {
  to { transform: rotate(360deg); }
}

.disconnect-status-text {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.disconnect-reload-btn {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(234, 88, 12, 0.9));
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.disconnect-reload-btn:hover {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .disconnect-card {
    padding: 28px 20px 22px;
  }
  .disconnect-title {
    font-size: 20px;
  }
  .disconnect-desc {
    font-size: 13.5px;
  }
  .disconnect-footer {
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }
  .disconnect-reload-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CREATOR SYSTEM (SUPERADMIN) — 3-TAB PANEL & SHIMMER EFFECTS
   ═══════════════════════════════════════════════════════════════ */

/* Top bar & Mobile Creator Buttons */
#btn-creator-panel,
#mobile-btn-creator {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.32), rgba(236, 72, 153, 0.28));
  border: 1px solid rgba(245, 158, 11, 0.65);
  color: #fef08a;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  animation: creatorPulse 3s ease-in-out infinite;
}

#btn-creator-panel:hover,
#mobile-btn-creator:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.55), rgba(236, 72, 153, 0.45));
  border-color: #fde047;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.7);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Подпись создателя сокращена до «S» (было «Создатель»): в верхнем
   HUD кнопка должна быть такой же по ширине, как соседние иконки. */
#btn-creator-panel .btn-creator-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

@keyframes creatorPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 22px rgba(245, 158, 11, 0.65), 0 0 32px rgba(236, 72, 153, 0.3); }
}

/* Glowing text & badges for Creator */
.badge-creator,
.chat-creator-glow {
  background: linear-gradient(90deg, #fbbf24, #f43f5e, #a855f7, #38bdf8, #fbbf24);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: creatorTextShimmer 4s linear infinite;
  font-weight: 800;
  letter-spacing: 0.25px;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.player-creator-tag {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(236, 72, 153, 0.25));
  border: 1px solid rgba(245, 158, 11, 0.7);
  color: #fef08a;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

@keyframes creatorTextShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Creator Modal Card — expanded to Catalog R dimensions */
.creator-modal-card {
  width: min(1500px, 95vw) !important;
  max-width: 1500px !important;
  height: calc(100vh - 66px) !important;
  max-height: calc(100vh - 66px) !important;
  margin-top: 50px !important;
  padding: 24px 28px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* Раньше обводка была зашита оранжевой и не реагировала на выбор
     цвета. Теперь берёт акцент темы, как остальные окна. */
  border: 1px solid var(--border-hover, rgba(255, 255, 255, 0.12));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 35px var(--accent-glow, rgba(255, 255, 255, 0.08));
}

.creator-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
}

/* Tabs Bar */
.creator-tabs-bar {
  display: flex;
  gap: 8px;
  margin: 14px 0 18px 0;
  background: rgba(15, 23, 42, 0.7);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.creator-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.creator-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.creator-tab-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(236, 72, 153, 0.22));
  color: #fef08a;
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.creator-tab-content {
  display: none;
}

.creator-tab-content.active {
  display: block;
}

/* Прокручивает вкладка, а не карточка: иначе полоса выглядывает за
   скруглённую рамку, а шапка с вкладками уезжает вверх. Побочный
   плюс — «Все залы» и «Локации» не сдвигают друг друга по высоте. */
.creator-modal-card > .creator-tab-content.active {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  margin-right: 6px;
}

/* ─── Creator Players Tab Styles ─── */
.creator-players-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.creator-search-box {
  flex: 1;
  min-width: 280px;
  position: relative;
  display: flex;
  align-items: center;
}

.creator-search-box .search-icon {
  position: absolute;
  left: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  pointer-events: none;
}

.creator-search-input {
  width: 100%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 9px 36px 9px 36px;
  color: #fff;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.creator-search-input:focus {
  border-color: var(--accent-primary, #10b981);
  box-shadow: 0 0 14px var(--accent-glow, rgba(16, 185, 129, 0.3));
  background: rgba(15, 23, 42, 0.98);
}

.creator-search-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  display: none;
}

.creator-search-clear:hover {
  color: #fff;
}

.creator-players-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creator-players-table-wrap {
  background: rgba(11, 15, 25, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.creator-players-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.creator-players-table thead {
  background: rgba(15, 23, 42, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 5;
}

.creator-players-table th {
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.creator-players-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  vertical-align: middle;
}

.creator-players-table tbody tr {
  transition: background 0.15s ease;
  cursor: pointer;
  user-select: none;
}

.creator-players-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.045);
}

.creator-players-table tbody tr.is-self {
  background: rgba(245, 158, 11, 0.06);
}

.creator-player-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.creator-player-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.creator-player-nick {
  font-weight: 600;
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: help;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
  transition: border-color 0.15s ease, color 0.15s ease;
}

/* Онлайн: яркий зелёный ник */
.creator-player-nick.is-online {
  color: #22c55e !important;
  font-weight: 700;
  border-bottom: 1px dashed rgba(34, 197, 94, 0.5);
}

.creator-player-nick.is-online:hover {
  color: #4ade80 !important;
  border-bottom-color: #4ade80;
}

/* Оффлайн: приглушённый серый ник */
.creator-player-nick.is-offline {
  color: #94a3b8 !important;
  font-weight: 500;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
}

.creator-player-nick.is-offline:hover {
  color: #cbd5e1 !important;
  border-bottom-color: #cbd5e1;
}

/* Оффлайн строка: полупрозрачность и спокойный фон */
.creator-player-row.is-offline {
  opacity: 0.65;
  background: rgba(15, 23, 42, 0.25);
}

.creator-player-row.is-offline .creator-player-avatar {
  filter: grayscale(0.85);
  opacity: 0.7;
}

.creator-online-badge.is-offline {
  color: #94a3b8;
}

.creator-online-dot.is-offline {
  background: #64748b;
  box-shadow: none;
}

.creator-popover-status-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
  margin-left: auto;
}

.creator-popover-status-tag.is-online {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

.creator-popover-status-tag.is-offline {
  background: rgba(100, 116, 139, 0.18);
  border: 1px solid rgba(100, 116, 139, 0.35);
  color: #94a3b8;
}

.creator-room-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
}

.creator-room-badge.is-main {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fde047;
}

.creator-ip-badge {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11.5px;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.creator-device-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #cbd5e1;
}

.creator-browser-sub {
  font-size: 11px;
  color: #64748b;
  margin-left: 2px;
}

.creator-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #a7f3d0;
}

.creator-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.btn-creator-player-menu {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
}

.btn-creator-player-menu:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Floating Hover Tooltip / Popover */
.creator-player-hover-popover {
  position: fixed;
  z-index: 100050;
  background: rgba(11, 15, 25, 0.96);
  border: 1.5px solid var(--accent-primary, #00f0ff);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), 0 0 25px rgba(0, 240, 255, 0.25);
  backdrop-filter: blur(16px);
  pointer-events: none;
  display: none;
  min-width: 270px;
  max-width: 360px;
  animation: popIn 0.12s ease-out;
}

.creator-popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

.creator-popover-name {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.creator-popover-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 12.5px;
}

.creator-popover-row:last-child {
  margin-bottom: 0;
}

.creator-popover-label {
  color: #94a3b8;
  font-weight: 600;
  white-space: nowrap;
}

.creator-popover-value {
  color: #f1f5f9;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

/* Floating Context Menu (ПКМ) */
.creator-context-menu {
  position: fixed;
  z-index: 100060;
  background: rgba(13, 20, 36, 0.98);
  border: 1.5px solid var(--accent-primary, #f59e0b);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.95), 0 0 30px rgba(245, 158, 11, 0.3);
  backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  gap: 3px;
  min-width: 220px;
  animation: popIn 0.12s ease-out;
}

.creator-context-header {
  padding: 6px 10px 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 3px;
  font-size: 11.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.creator-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
  width: 100%;
  box-sizing: border-box;
}

.creator-context-item:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.2);
  color: #fde047;
}

.creator-context-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.creator-context-icon {
  font-size: 16px;
}


/* Section Title & Badges */
.creator-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.creator-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.creator-count-badge {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fde047;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.creator-desc-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.45;
  margin-bottom: 12px;
}

/* Rooms Grid & Room Cards */
.creator-rooms-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

.creator-room-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 0.2s;
}

.creator-room-card:hover {
  border-color: rgba(245, 158, 11, 0.4);
}

.creator-room-card.is-current {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.08);
}

.creator-room-info {
  flex: 1;
  min-width: 0;
}

.creator-room-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.creator-room-name {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.creator-room-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.creator-room-badge.public {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.creator-room-badge.private {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.creator-room-movie-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-room-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
  display: flex;
  gap: 12px;
}

/* Atmosphere Grid */
.creator-atmosphere-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.creator-atmosphere-btn {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.creator-atmosphere-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.creator-atmosphere-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(236, 72, 153, 0.18));
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
}

.atmosphere-icon {
  font-size: 22px;
  display: block;
  margin-bottom: 6px;
}

.atmosphere-name {
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
}

.atmosphere-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 3px;
  line-height: 1.35;
}

/* FX Grid */
.creator-fx-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.creator-fx-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.creator-fx-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.creator-fx-icon {
  font-size: 24px;
}

/* Metrics Grid (Tab 3) */
.creator-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.creator-metric-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}

.creator-metric-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
  white-space: nowrap;
}

.creator-metric-value {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.creator-metric-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.creator-metric-bar-wrap {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
}

.creator-metric-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

.creator-progress-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.creator-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b, #ec4899);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Control Cards (Stream / Cache) */
.creator-control-card,
.creator-section-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.creator-control-info {
  flex: 1;
}

.creator-control-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

/* Ban Form & Bans Table */
.creator-ban-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  padding: 14px;
}

.creator-form-row {
  display: flex;
  gap: 10px;
}

.creator-bans-table {
  max-height: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.creator-ban-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
}

.creator-empty-hint {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  padding: 14px;
}

/* Broadcast Banner Overlay */
.creator-broadcast-overlay {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100020;
  width: 90%;
  max-width: 620px;
  pointer-events: auto;
  animation: slideDownBanner 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDownBanner {
  from { opacity: 0; transform: translate(-50%, -30px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.creator-broadcast-banner {
  background: linear-gradient(135deg, rgba(24, 18, 5, 0.95), rgba(45, 15, 30, 0.95));
  border: 1.5px solid rgba(245, 158, 11, 0.7);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.35);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.creator-broadcast-crown {
  font-size: 24px;
  animation: crownBob 2s ease infinite;
}

@keyframes crownBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.creator-broadcast-content {
  flex: 1;
}

.creator-broadcast-sender {
  font-size: 12px;
  font-weight: 700;
  color: #fde047;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.creator-broadcast-text {
  font-size: 14px;
  color: #fff;
  line-height: 1.4;
  margin-top: 2px;
}

.creator-broadcast-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}

.creator-broadcast-close:hover {
  color: #fff;
}

/* Dramatic Countdown Overlay */
.creator-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 100030;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.creator-countdown-number {
  font-size: 120px;
  font-weight: 900;
  background: linear-gradient(135deg, #fef08a, #f59e0b, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 50px rgba(245, 158, 11, 0.8);
  animation: countdownPulse 1s ease-in-out infinite;
}

.creator-countdown-label {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 14px;
  letter-spacing: 1px;
}

@keyframes countdownPulse {
  0% { transform: scale(0.6); opacity: 0; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1.0); opacity: 0.9; }
}

@media (max-width: 600px) {
  .creator-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .creator-atmosphere-grid {
    grid-template-columns: 1fr;
  }
  .creator-form-row {
    flex-direction: column;
  }
  .creator-tabs-bar {
    flex-direction: column;
  }
}

/* ============================================================
   AniLibria Genres View (like on https://www.aniliberty.top/anime/genres/)
   ============================================================ */
.genres-view-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.22s ease;
  overflow: visible;
  padding-right: 0;
}

.genres-page-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.genres-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #71717a;
}

.genres-breadcrumbs .bc-link {
  color: #a1a1aa;
  cursor: pointer;
  transition: color 0.18s;
}

.genres-breadcrumbs .bc-link:hover {
  color: #fff;
  text-decoration: underline;
}

.genres-breadcrumbs .bc-sep {
  color: #52525b;
}

.genres-breadcrumbs .bc-current {
  color: var(--accent-primary, #10b981);
  font-weight: 500;
}

.genres-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.genres-page-title {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

.genres-page-subtitle {
  font-size: 13.5px;
  color: #a1a1aa;
  margin-top: 3px;
}

.anilibria-subtabs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.anilibria-subtab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.anilibria-subtab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.anilibria-subtab-btn.active {
  color: #fff;
  background: var(--accent-gradient, linear-gradient(135deg, #10b981 0%, #047857 100%));
  border-color: var(--accent-primary, #10b981);
  box-shadow: 0 0 16px var(--accent-glow, rgba(16, 185, 129, 0.45));
}

.genres-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 18px;
  padding-top: 10px;
  padding-bottom: 24px;
}

@media (max-width: 640px) {
  .genres-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.genre-card {
  position: relative;
  height: 290px;
  border-radius: 16px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  isolation: isolate;
  cursor: pointer;
  user-select: none;
  background-color: #12141c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.genre-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--accent-primary, #10b981);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 24px var(--accent-glow, rgba(16, 185, 129, 0.35));
}

.genre-card-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.45s ease;
  z-index: 1;
}

.genre-card:hover .genre-card-bg {
  transform: scale(1.08);
}

.genre-card-gradient {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.0) 0%, rgba(16, 16, 16, 0.25) 50%, rgba(6, 8, 14, 0.95) 100%);
  z-index: 2;
  transition: background 0.3s ease;
}

.genre-card:hover .genre-card-gradient {
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.0) 0%, rgba(var(--accent-rgb, 16, 185, 129), 0.15) 50%, rgba(6, 8, 14, 0.98) 100%);
}

.genre-card-content {
  position: relative;
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.genre-card-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  letter-spacing: -0.01em;
}

.genre-card-count {
  font-size: 12.5px;
  color: #a1a1aa;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  transition: color 0.2s;
}

.genre-card:hover .genre-card-count {
  color: #e4e4e7;
}

.genre-active-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
  animation: fadeIn 0.2s ease;
}

.genre-active-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-genre-back {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 6px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.btn-genre-back:hover {
  background: var(--accent-primary, #10b981);
  border-color: var(--accent-primary, #10b981);
  box-shadow: 0 0 14px var(--accent-glow, rgba(16, 185, 129, 0.4));
  transform: translateX(-2px);
}

.genre-active-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.genre-active-badge {
  font-size: 12px;
  font-weight: 600;
  background: rgba(var(--accent-rgb, 16, 185, 129), 0.18);
  border: 1px solid rgba(var(--accent-rgb, 16, 185, 129), 0.4);
  color: var(--accent-primary, #10b981);
  padding: 3px 10px;
  border-radius: 20px;
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBARS FOR MAIN CATALOG MODAL (R MENU) — EXACT CATALOG-TEST STYLE
   ══════════════════════════════════════════════════════════════ */

/* 1. Ensure .catalog-content is the single master scrolling container */
.catalog-modal-card .catalog-content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px 32px 50px !important;
  scroll-behavior: smooth;
  border-bottom-right-radius: 20px;
}

.catalog-modal-card .genres-view-container,
.catalog-modal-card .genres-cards-grid,
.catalog-modal-card .cards-grid,
.catalog-modal-card .kp-movies-grid,
.catalog-modal-card #main-catalog-releases-section,
.catalog-modal-card #main-catalog-genres-container {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  height: auto !important;
  max-height: none !important;
  padding-right: 0 !important;
}

/* Sidebar scrollable vertically if window is compact */
.catalog-modal-card .sidebar-nav {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 2. Hide all Windows arrow buttons on scrollbars */
#catalog-modal ::-webkit-scrollbar-button,
.catalog-modal-card ::-webkit-scrollbar-button,
.catalog-modal-card *::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 3. Hide horizontal scrollbars */
#catalog-modal ::-webkit-scrollbar:horizontal,
.catalog-modal-card ::-webkit-scrollbar:horizontal,
.catalog-modal-card *::-webkit-scrollbar:horizontal,
.catalog-modal-card .catalog-sidebar::-webkit-scrollbar:horizontal,
.catalog-modal-card .catalog-sidebar *::-webkit-scrollbar:horizontal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 4. Vertical Scrollbar Dimensions (7px like in catalog-test) */
#catalog-modal ::-webkit-scrollbar,
.catalog-modal-card ::-webkit-scrollbar,
.catalog-modal-card *::-webkit-scrollbar,
.catalog-modal-card .catalog-content::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

/* 5. Track: subtle transparent track */
#catalog-modal ::-webkit-scrollbar-track,
.catalog-modal-card ::-webkit-scrollbar-track,
.catalog-modal-card *::-webkit-scrollbar-track,
.catalog-modal-card .catalog-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 4px !important;
}

/* 6. Thumb: default color from catalog-test (rgba(255, 255, 255, 0.15)), changes color only on hover */
#catalog-modal ::-webkit-scrollbar-thumb,
.catalog-modal-card ::-webkit-scrollbar-thumb,
.catalog-modal-card *::-webkit-scrollbar-thumb,
.catalog-modal-card .catalog-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

#catalog-modal ::-webkit-scrollbar-thumb:hover,
.catalog-modal-card ::-webkit-scrollbar-thumb:hover,
.catalog-modal-card *::-webkit-scrollbar-thumb:hover,
.catalog-modal-card .catalog-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary, #10b981) !important;
  box-shadow: 0 0 10px var(--accent-glow, rgba(16, 185, 129, 0.45)) !important;
}

#catalog-modal ::-webkit-scrollbar-thumb:active,
.catalog-modal-card ::-webkit-scrollbar-thumb:active,
.catalog-modal-card *::-webkit-scrollbar-thumb:active,
.catalog-modal-card .catalog-content::-webkit-scrollbar-thumb:active {
  background: var(--accent-hover, #059669) !important;
  box-shadow: 0 0 12px var(--accent-glow, rgba(16, 185, 129, 0.6)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   СКРОЛЛБАРЫ В СЛУЖЕБНЫХ ОКНАХ — СТИЛЬ КАЛОГА (R)
   ═══════════════════════════════════════════════════════════════════
   Гардероб (I), панель администратора (Home), меню Создателя (End) и
   настройки (Ins) получили разные стили прокрутки, и рядом с каталогом
   они выглядели чужими. Здесь повторяется ровно тот же стиль, что и в
   каталоге: узкая полоса 7px, спокойный серый бегунок, который
   загорается акцентным цветом при наведении.

   Правило общее для этих окон, включая все вложенные списки — иначе
   внутренние прокручиваемые блоки (например сетка гардероба) остались бы
   со старым стилем.
*/
#wardrobe-modal ::-webkit-scrollbar,
#admin-panel-modal ::-webkit-scrollbar,
#creator-modal ::-webkit-scrollbar,
#settings-modal ::-webkit-scrollbar,
#wardrobe-modal *::-webkit-scrollbar,
#admin-panel-modal *::-webkit-scrollbar,
#creator-modal *::-webkit-scrollbar,
#settings-modal *::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

/* Стрелочки вверх/вниз в Windows-скроллбарах только мешают и занимают
   место, поэтому их убираем — как и в каталоге. */
#wardrobe-modal ::-webkit-scrollbar-button,
#admin-panel-modal ::-webkit-scrollbar-button,
#creator-modal ::-webkit-scrollbar-button,
#settings-modal ::-webkit-scrollbar-button,
#wardrobe-modal *::-webkit-scrollbar-button,
#admin-panel-modal *::-webkit-scrollbar-button,
#creator-modal *::-webkit-scrollbar-button,
#settings-modal *::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#wardrobe-modal ::-webkit-scrollbar:horizontal,
#admin-panel-modal ::-webkit-scrollbar:horizontal,
#creator-modal ::-webkit-scrollbar:horizontal,
#settings-modal ::-webkit-scrollbar:horizontal,
#wardrobe-modal *::-webkit-scrollbar:horizontal,
#admin-panel-modal *::-webkit-scrollbar:horizontal,
#creator-modal *::-webkit-scrollbar:horizontal,
#settings-modal *::-webkit-scrollbar:horizontal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#wardrobe-modal ::-webkit-scrollbar-track,
#admin-panel-modal ::-webkit-scrollbar-track,
#creator-modal ::-webkit-scrollbar-track,
#settings-modal ::-webkit-scrollbar-track,
#wardrobe-modal *::-webkit-scrollbar-track,
#admin-panel-modal *::-webkit-scrollbar-track,
#creator-modal *::-webkit-scrollbar-track,
#settings-modal *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 4px !important;
}

#wardrobe-modal ::-webkit-scrollbar-thumb,
#admin-panel-modal ::-webkit-scrollbar-thumb,
#creator-modal ::-webkit-scrollbar-thumb,
#settings-modal ::-webkit-scrollbar-thumb,
#wardrobe-modal *::-webkit-scrollbar-thumb,
#admin-panel-modal *::-webkit-scrollbar-thumb,
#creator-modal *::-webkit-scrollbar-thumb,
#settings-modal *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

#wardrobe-modal ::-webkit-scrollbar-thumb:hover,
#admin-panel-modal ::-webkit-scrollbar-thumb:hover,
#creator-modal ::-webkit-scrollbar-thumb:hover,
#settings-modal ::-webkit-scrollbar-thumb:hover,
#wardrobe-modal *::-webkit-scrollbar-thumb:hover,
#admin-panel-modal *::-webkit-scrollbar-thumb:hover,
#creator-modal *::-webkit-scrollbar-thumb:hover,
#settings-modal *::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary, #10b981) !important;
  box-shadow: 0 0 10px var(--accent-glow, rgba(16, 185, 129, 0.45)) !important;
}

#wardrobe-modal ::-webkit-scrollbar-thumb:active,
#admin-panel-modal ::-webkit-scrollbar-thumb:active,
#creator-modal ::-webkit-scrollbar-thumb:active,
#settings-modal ::-webkit-scrollbar-thumb:active,
#wardrobe-modal *::-webkit-scrollbar-thumb:active,
#admin-panel-modal *::-webkit-scrollbar-thumb:active,
#creator-modal *::-webkit-scrollbar-thumb:active,
#settings-modal *::-webkit-scrollbar-thumb:active {
  background: var(--accent-hover, #059669) !important;
  box-shadow: 0 0 12px var(--accent-glow, rgba(16, 185, 129, 0.6)) !important;
}

#wardrobe-modal ::-webkit-scrollbar-corner,
#admin-panel-modal ::-webkit-scrollbar-corner,
#creator-modal ::-webkit-scrollbar-corner,
#settings-modal ::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Для Firefox — те же цвета через стандартные свойства. Только для
   Firefox: в Chromium любое scrollbar-width отключает ::-webkit-scrollbar*,
   и окна возвращались к полосе 17-19 px со системными стрелками. */
@supports (-moz-appearance: none) {
  #wardrobe-modal,
  #admin-panel-modal,
  #creator-modal,
  #settings-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.2);
  }
}

/* Sidebar scrollbar (subtle 5px) */
.catalog-modal-card .sidebar-nav::-webkit-scrollbar {
  width: 5px !important;
}

.catalog-modal-card .sidebar-nav::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
}

.catalog-modal-card .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
}

.catalog-modal-card .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary, #10b981) !important;
}

#catalog-modal ::-webkit-scrollbar-corner,
.catalog-modal-card ::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Fallback for Firefox only */
@supports (-moz-appearance: none) {
  .catalog-modal-card .catalog-content {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.2) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   CS2-STYLE TABLIST / SCOREBOARD OVERLAY (HOLD TAB)
   ═══════════════════════════════════════════════════════ */
.tablist-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100050;
  background: rgba(4, 7, 14, 0.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
}

.tablist-overlay.active {
  opacity: 1;
  visibility: visible;
}

.tablist-overlay.cursor-active {
  pointer-events: auto;
  cursor: default;
}

.tablist-card {
  width: min(880px, 94vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: rgba(11, 16, 26, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 35px rgba(16, 185, 129, 0.12);
  overflow: hidden;
  user-select: none;
  transform: scale(0.97) translateY(6px);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.tablist-overlay.active .tablist-card {
  transform: scale(1) translateY(0);
}

.tablist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 14px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tablist-header-left,
.tablist-header-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.tablist-header-right {
  justify-content: flex-end;
}

.tablist-room-badge {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 11px;
  border-radius: 8px;
  letter-spacing: 0.3px;
}

.tablist-players-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-primary, #10b981);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  padding: 4px 11px;
  border-radius: 8px;
}

.tablist-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: default;
  user-select: none;
}

.tablist-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(212, 175, 100, 0.5));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
  flex-shrink: 0;
}

.tablist-brand:hover .tablist-logo {
  transform: scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 0 14px rgba(212, 175, 100, 0.95)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.tablist-brand-name {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.3px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.tablist-table-header {
  display: grid;
  grid-template-columns: 2.2fr 1.6fr 1.1fr 1fr;
  align-items: center;
  /* Отступы повторяют путь до текста в строках: список даёт 24px слева
     и 18px справа, строка — ещё по 14px. Иначе заголовок «ЗРИТЕЛЬ»
     стоял левее аватара. Плюс рамка строки в 1px. */
  padding: 10px 33px 10px 39px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tablist-th {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Без этого трек в fr не сжимается до доли, которую задаёт
     шапка, и колонки расходятся с содержимым строк. */
  min-width: 0;
  /* Обрезаем, а не даём длинному слову вылезти в соседнюю
     колонку: на телефоне треки узкие. */
  overflow: hidden;
}

/* Заголовок «Зритель» выравниваем по левому краю — так же, как
   аватар и имя под ним. Остальные заголовки остаются по центру. */
.tablist-th.tablist-col_player,
.tablist-th.tablist-col-player {
  justify-content: flex-start;
  text-align: left;
}

/* Scrollable list with Catalog R style scrollbar */
.tablist-players-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 18px 12px 24px;
  overflow-y: auto;
  max-height: 52vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.02);
}

.tablist-players-list::-webkit-scrollbar {
  width: 6px;
}

.tablist-players-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

.tablist-players-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.tablist-players-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary, #10b981);
  box-shadow: 0 0 10px var(--accent-primary, #10b981);
}

/* Player Row */
.tablist-row {
  display: grid;
  grid-template-columns: 2.2fr 1.6fr 1.1fr 1fr;
  align-items: center;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.tablist-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.tablist-row.is-self {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}

.tablist-row.is-self:hover {
  background: rgba(16, 185, 129, 0.13);
}

/* Аватар и имя прижаты к левому краю колонки: по центру читалось
   хуже, а при разной длине имён имена ещё и гуляли по строке. */
.tablist-player-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.tablist-mute-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tablist-voice-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tablist-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13.5px;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.tablist-online-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0b101a;
}

.tablist-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tablist-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tablist-crown-icon {
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.85));
  display: inline-flex;
  align-items: center;
}

.tablist-self-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.38);
}

/* Mute button */
.tablist-btn-mute {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.16s ease;
  user-select: none;
  white-space: nowrap;
}

.tablist-btn-mute:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.tablist-btn-mute.is-muted {
  background: rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.4);
  color: #fda4af;
}

.tablist-btn-mute.is-muted:hover {
  background: rgba(244, 63, 94, 0.28);
  color: #fff;
}

.tablist-btn-mute:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Voice Equalizer Wave */
.tablist-voice-wave {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 18px;
}

.tablist-wave-bar {
  width: 3px;
  height: 5px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  transition: height 0.15s ease, background 0.15s ease;
}

.tablist-voice-wave.is-speaking .tablist-wave-bar {
  background: #22c55e;
  animation: tablistWaveAnim 0.65s infinite ease-in-out alternate;
}

.tablist-voice-wave.is-speaking .tablist-wave-bar:nth-child(1) { animation-delay: 0.1s; height: 9px; }
.tablist-voice-wave.is-speaking .tablist-wave-bar:nth-child(2) { animation-delay: 0.25s; height: 16px; }
.tablist-voice-wave.is-speaking .tablist-wave-bar:nth-child(3) { animation-delay: 0.18s; height: 12px; }
.tablist-voice-wave.is-speaking .tablist-wave-bar:nth-child(4) { animation-delay: 0.35s; height: 15px; }

@keyframes tablistWaveAnim {
  0% { height: 4px; }
  100% { height: 17px; }
}

/* Seat location */
.tablist-seat-text {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ping */
.tablist-ping-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 12px;
  border-radius: 6px;
  width: fit-content;
  margin: 0 auto;
}

.tablist-ping-good { color: #22c55e; }
.tablist-ping-medium { color: #eab308; }
.tablist-ping-bad { color: #ef4444; }

/* Footer */
.tablist-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tablist-footer-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
}

.tablist-kbd {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tablist-footer-hint.is-cursor-active .tablist-hint-text {
  color: var(--accent-primary, #10b981);
  font-weight: 700;
}

/* UI Mode & UI Config Overrides */
.ui-mode-hidden {
  display: none !important;
}

#cinema-hud.ui-mode-hidden:hover,
#cinema-hud.ui-mode-hidden.hud-visible {
  display: flex !important;
}

.ui-config-hidden {
  display: none !important;
}

/* Dynamic Tablist Columns & Badges */
.tablist-seat-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tablist-seat-badge {
  font-size: 11.5px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tablist-volume-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tablist-volume-badge {
  font-size: 11.5px;
  color: #38bdf8;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tablist-role-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tablist-role-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tablist-role-creator {
  background: rgba(234, 179, 8, 0.18);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.tablist-role-admin {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.tablist-role-viewer {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tablist-status-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tablist-status-badge {
  font-size: 11px;
  color: #94a3b8;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  white-space: nowrap;
}

.tablist-custom-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  color: #cbd5e1;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   ВЫПАДАЮЩИЕ ОКНА ЗАЛА — «СТЕКЛО» В СТИЛЕ ЧАТА
   Окна Качество видео / Выбор озвучки и Источник видео раньше были
   почти непрозрачными (rgba(13,17,28,0.96)) и выглядели тяжелее чата.
   Здесь они приведены к тем же значениям, что у плавающего чата:
   тёмный полупрозрачный фон, blur, тонкая рамка и мягкая тень.
═══════════════════════════════════════════════════════════════ */
.cinema-audio-dropdown,
.cinema-sources-dropdown {
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 0, 0, 0.35) !important;
  padding: 10px !important;
  gap: 6px !important;
}

/* Заголовки секций — тихая подпись, а не табличка */
.audio-dropdown-header,
.sources-dropdown-header {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 2px 2px 4px !important;
  margin-bottom: 0 !important;
}

/* Пункты списков — как пузыри чата (.room-log-item) */
.audio-track-item,
.source-item {
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.audio-track-item:hover,
.source-item:hover {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Активный пункт сохраняет цветовую подсказку раздела */
.audio-track-item.active {
  background: rgba(34, 197, 94, 0.16) !important;
  border-color: rgba(34, 197, 94, 0.42) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.18) !important;
}

.source-item.active {
  background: rgba(56, 189, 248, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.42) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.18) !important;
}

/* Счётчики в заголовках — приглушённые пилюли, как в чате */
.audio-tracks-badge,
.sources-count-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Окно Эмоций: заголовок и разделитель убраны, остались смайлики */
.cinema-reactions-dropdown {
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 8px !important;
  gap: 8px !important;
}

.cinema-reactions-dropdown .reactions-grid {
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   КАТАЛОГ (клавиша R) — АДАПТИВ УЗКИХ ЭКРАНОВ
   Без этих правил сайдбар 250px съедал почти всю ширину окна:
   контент сжимался в полоски, а горизонтальная черта под поиском
   уезжала за правый край карточки. Панель сжимается до 76px, а
   горизонтальные полосы остаются в одной сетке с верхней.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .catalog-modal-card .catalog-sidebar {
    width: 76px;
    min-width: 76px;
  }

  /* В свёрнутом виде подпись, название раздела и бейдж не помещаются:
     без этого остаются цветные обрезки вместо иконок */
  .catalog-modal-card .sidebar-toggle-label,
  .catalog-modal-card .nav-item > span,
  .catalog-modal-card .nav-badge,
  .catalog-modal-card .nav-section-title {
    display: none;
  }

  .catalog-modal-card .sidebar-header,
  .catalog-modal-card .sidebar-toggle-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .catalog-modal-card .sidebar-header {
    justify-content: center;
  }

  .catalog-modal-card .brand-title {
    gap: 0;
  }

  .catalog-modal-card .nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .catalog-modal-card .sidebar-toggle-btn {
    justify-content: center;
    padding: 7px 0;
  }

  /* «Вернуться в зал» в свёрнутом виде: только значок, подпись не
     помещается в 56–76px и вылезала за панель */
  .catalog-modal-card .btn-return-cinema {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 0;
    white-space: nowrap;
    justify-content: center;
  }

  .catalog-modal-card .btn-return-cinema > span:not(:first-child) {
    display: none;
  }

  /* Полоса под поиском встаёт в ту же сетку, что и верхняя полоса */
  .catalog-modal-card .catalog-topbar {
    height: auto;
    min-height: 60px;
    padding: 10px 12px;
    gap: 8px;
  }

  .catalog-modal-card .search-wrapper {
    max-width: none;
    gap: 6px;
  }

  /* Бейдж «↵ Enter» на узком экране только мешает */
  .catalog-modal-card .search-shortcut-badge {
    display: none;
  }
}

@media (max-width: 620px) {
  .catalog-modal-card .catalog-sidebar {
    width: 56px;
    min-width: 56px;
  }

  .catalog-modal-card .brand-logo {
    width: 24px;
    height: 24px;
  }

  .catalog-modal-card .search-input-box {
    padding-left: 36px;
  }
}

/* =============================================
   Фильмография (значок источника + выпадающее окно)
   ============================================= */
/* Окно переиспользует .cinema-history-dropdown, поэтому поднимается вверх
   так же, как «История действий», и выглядит тем же стеклом. Здесь только
   сама кнопка-значок и содержимое окна. */
.hud-filmography-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.hud-filmography-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 3px 8px 3px 4px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}

.hud-filmography-btn:hover,
.hud-filmography-btn.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.14);
  transform: scale(1.05);
}

.hud-filmography-favicon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(212, 175, 100, 0.35));
}

.hud-filmography-btn.active .hud-filmography-favicon {
  filter: drop-shadow(0 0 9px rgba(212, 175, 100, 0.8));
}

.hud-filmography-label {
  white-space: nowrap;
}

/* На телефоне подпись съедает место — оставляем только значок. */
@media (max-width: 900px) {
  .hud-filmography-label {
    display: none;
  }
  .hud-filmography-btn {
    padding: 3px 4px;
  }
}

#filmography-dropdown {
  /* Окно раскрывается ВПРАВО от кнопки. Раньше стояло right: 0,
     из-за чего панель уходила влево и наезжала на время фильма. */
  left: 0;
  right: auto;
  width: 340px;
}
/* На узких экранах 340px не помещается справа — тогда прижимаем
   к правому краю, иначе панель вылезет за границу окна. */
@media (max-width: 560px) {
  #filmography-dropdown {
    left: auto;
    right: 0;
    width: min(340px, 88vw);
  }
}


.filmography-now {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  min-height: 52px;
}

.filmography-now-favicon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.filmography-now-text {
  min-width: 0;
}

.filmography-now-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.filmography-now-source {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Название фильма и источник уехали в окно Фильмографии, но элементы с
   теми же id остались на месте: на них завязаны ui-overlay.js и
   videoSync.js, и переписывать их заполнение было бы лишним.
   Поэтому элементы остаются в DOM как хранилища данных, а скрываются
   здесь — важно с !important: и ui-overlay.js, и videoSync.js ставят им
   display при обновлении, и обычное правило перебивалось бы ими. */
#hud-source-badge,
#cinema-title-display {
  display: none !important;
}

/* =============================================
   Перечёркнутая иконка канала
   ============================================= */
/* Отдельного «перечёркнутого радио» в Unicode нет: U+1F507 — это
   перечёркнутый динамик, а не рация. Подставить его вместо 📻 нельзя,
   а рисовать иконку отдельной картинкой ради одного состояния —
   лишний файл. Поэтому черта рисуется поверх значка средствами CSS:
   работает с любым эмодзи и не зависит от того, отрисовался ли он.

   Состояние = «режим рации, но ключа C не зажата»: микрофон ждёт
   нажатия, и показывать значок как включённый нельзя. Настоящее
   выключение (V) по-прежнему показывается значком 🔇. */
.mic-meter-wrap .mic-meter-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mic-meter-wrap.mic-radio-idle .mic-meter-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 135%;
  height: 2px;
  margin-left: -67.5%;
  background: linear-gradient(90deg,
    rgba(239, 68, 68, 0) 0%,
    #ef4444 22%,
    #ef4444 78%,
    rgba(239, 68, 68, 0) 100%);
  border-radius: 2px;
  transform: translateY(-50%) rotate(-45deg);
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.55);
  pointer-events: none;
}

/* Погашенная иконка приглушается вместе с индикатором. */
.mic-meter-wrap.mic-radio-idle .mic-meter-icon {
  opacity: 0.62;
}

.mic-meter-wrap.mic-radio-idle:hover .mic-meter-icon {
  opacity: 1;
}

/* При наведении на всю капсулу значок не должен прыгать. */
.mic-meter-wrap.mic-radio-idle:hover .mic-meter-icon::after {
  box-shadow: 0 0 9px rgba(239, 68, 68, 0.8);
}

/* Список Фильмографии: значок источника — название — время включения. */
.filmography-list {
  max-height: 260px;
  overflow-y: auto;
}

.filmography-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 9px;
}

.filmography-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.filmography-item.is-current {
  background: rgba(255, 255, 255, 0.08);
}

.filmography-item-favicon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.filmography-item-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filmography-item.is-current .filmography-item-title {
  color: #ffffff;
  font-weight: 600;
}

.filmography-item-time {
  flex-shrink: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.4);
}

.filmography-empty {
  padding: 10px 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* Подписи у значка в нижней панели больше нет — остался один значок. */
.hud-filmography-btn {
  padding: 3px 4px;
}

/* =============================================
   Главное меню: цвет кнопки входа и подпись приватного зала
   ============================================= */
/* Кнопка «Войти в кинозал» красится тем же акцентом, что и выбранный
   цвет аватара. Отдельная переменная не нужна: applyColorTheme() уже
   выставляет --accent-primary/--accent-gradient, и переменная меняется
   в момент выбора точки цвета — кнопка перекрашивается сразу. */
#btn-enter-cinema {
  background: var(--accent-gradient, linear-gradient(135deg, #10b981, #047857));
  border-color: var(--accent-primary, #10b981);
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

#btn-enter-cinema:hover {
  background: var(--accent-gradient, linear-gradient(135deg, #10b981, #047857));
  border-color: var(--accent-primary, #10b981);
  filter: brightness(1.12) saturate(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              0 0 24px var(--accent-glow, rgba(16, 185, 129, 0.38));
}

#btn-enter-cinema:active {
  filter: brightness(0.95);
}

/* Подпись под ссылкой приватного зала — красный неон. */
.private-invite-hint {
  font-size: 11px;
  margin-top: 5px;
  color: #ff4d6d;
  text-shadow: 0 0 8px rgba(255, 45, 109, 0.75),
               0 0 18px rgba(255, 45, 109, 0.45);
}

/* На ПК подпись на один пункт крупнее: её ищут глазами, а на телефоне
   лишний кегль только выталкивает поле ввода. */
@media (min-width: 769px) {
  .private-invite-hint {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  body.is-mobile-device .private-invite-hint,
  body.is-touch-device .private-invite-hint {
    text-shadow: 0 0 6px rgba(255, 45, 109, 0.6),
                 0 0 14px rgba(255, 45, 109, 0.32);
  }
}

/* =============================================
   Имя (ник и название зала): правило и уведомление об отказе
   ============================================= */
/* Правило — спокойный серый текст, как подпись «Имя отображается
   над вашим персонажем». */
.field-rule-hint {
  font-size: 11.5px;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.45);
}

/* Уведомление об отказе наследует оформление .private-invite-hint
   (color #ff4d6d со свечением) — тот же вид, что подсказка приватного
   зала. Здесь только отступ и перенос строки. */
.field-error-hint {
  margin-top: 5px;
  line-height: 1.35;
}

/* =============================================
   Скроллбар главного меню — стиль каталога (R)
   ============================================= */
/* Тот же стиль, что у каталога и окон Ins/Home/End/I: полоса 7px без
   стрелок, серый бегунок, который загорается акцентным цветом
   (цветом аватара) при наведении.

   Важная деталь: селекторы идут без пробела перед ::-webkit-scrollbar
   для САМОГО #entrance-modal — он и есть прокручиваемый слой (у него
   overflow-y: auto). С пробелом правило попадало только во вложенные
   блоки, а полосу самого окна браузер рисовал системную, со стрелками
   Windows, — на низком экране её было видно сразу. */
#entrance-modal::-webkit-scrollbar,
#entrance-modal ::-webkit-scrollbar,
#entrance-modal *::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

#entrance-modal::-webkit-scrollbar-button,
#entrance-modal ::-webkit-scrollbar-button,
#entrance-modal *::-webkit-scrollbar-button,
#entrance-modal::-webkit-scrollbar-button:vertical:start:decrement,
#entrance-modal::-webkit-scrollbar-button:vertical:end:increment,
#entrance-modal::-webkit-scrollbar-button:single-button:vertical:decrement,
#entrance-modal::-webkit-scrollbar-button:single-button:vertical:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#entrance-modal::-webkit-scrollbar:horizontal,
#entrance-modal ::-webkit-scrollbar:horizontal,
#entrance-modal *::-webkit-scrollbar:horizontal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#entrance-modal::-webkit-scrollbar-track,
#entrance-modal ::-webkit-scrollbar-track,
#entrance-modal *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 4px !important;
}

#entrance-modal::-webkit-scrollbar-thumb,
#entrance-modal ::-webkit-scrollbar-thumb,
#entrance-modal *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

#entrance-modal::-webkit-scrollbar-thumb:hover,
#entrance-modal ::-webkit-scrollbar-thumb:hover,
#entrance-modal *::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary, #10b981) !important;
  box-shadow: 0 0 10px var(--accent-glow, rgba(16, 185, 129, 0.45)) !important;
}

#entrance-modal::-webkit-scrollbar-thumb:active,
#entrance-modal ::-webkit-scrollbar-thumb:active,
#entrance-modal *::-webkit-scrollbar-thumb:active {
  background: var(--accent-hover, #059669) !important;
}

/* Тот же стиль для окон Ins / Home / End / I — раньше стрелки
   показывались, потому что правила перечисляли конкретные элементы,
   а прокручиваются их вложенные блоки. Ниже — по id корневых окон
   и всем потомкам. */
#wardrobe-modal ::-webkit-scrollbar-thumb:hover,
#admin-panel-modal ::-webkit-scrollbar-thumb:hover,
#creator-modal ::-webkit-scrollbar-thumb:hover,
#settings-modal ::-webkit-scrollbar-thumb:hover,
#wardrobe-modal *::-webkit-scrollbar-thumb:hover,
#admin-panel-modal *::-webkit-scrollbar-thumb:hover,
#creator-modal *::-webkit-scrollbar-thumb:hover,
#settings-modal *::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary, #10b981) !important;
  box-shadow: 0 0 10px var(--accent-glow, rgba(16, 185, 129, 0.45)) !important;
}

/* =============================================
   Стрелки на скроллбарах служебных окон — точечно
   ============================================= */
/* Общее правило ::-webkit-scrollbar-button { display: none } в этом
   Chromium отрабатывает не для всех полос: у вложенных прокручиваемых
   блоков (список зрителей в настройках, сетка гардероба) стрелки
   оставались, хотя полоса была уже в стиле каталога.

   Причина в том, что Chrome создаёт две отдельные кнопки и обрабатывает
   их по псевдоклассам направления. Общий селектор без них попадает
   не туда, поэтому ниже перечислены все четыре варианта каждой
   кнопки — decrement/increment с указанием начала и конца. */
#wardrobe-modal ::-webkit-scrollbar-button:vertical:start:decrement,
#wardrobe-modal ::-webkit-scrollbar-button:vertical:end:increment,
#wardrobe-modal ::-webkit-scrollbar-button:single-button:vertical:decrement,
#wardrobe-modal ::-webkit-scrollbar-button:single-button:vertical:increment,
#admin-panel-modal ::-webkit-scrollbar-button:vertical:start:decrement,
#admin-panel-modal ::-webkit-scrollbar-button:vertical:end:increment,
#admin-panel-modal ::-webkit-scrollbar-button:single-button:vertical:decrement,
#admin-panel-modal ::-webkit-scrollbar-button:single-button:vertical:increment,
#creator-modal ::-webkit-scrollbar-button:vertical:start:decrement,
#creator-modal ::-webkit-scrollbar-button:vertical:end:increment,
#creator-modal ::-webkit-scrollbar-button:single-button:vertical:decrement,
#creator-modal ::-webkit-scrollbar-button:single-button:vertical:increment,
#settings-modal ::-webkit-scrollbar-button:vertical:start:decrement,
#settings-modal ::-webkit-scrollbar-button:vertical:end:increment,
#settings-modal ::-webkit-scrollbar-button:single-button:vertical:decrement,
#settings-modal ::-webkit-scrollbar-button:single-button:vertical:increment,
#entrance-modal ::-webkit-scrollbar-button:vertical:start:decrement,
#entrance-modal ::-webkit-scrollbar-button:vertical:end:increment,
#entrance-modal ::-webkit-scrollbar-button:single-button:vertical:decrement,
#entrance-modal ::-webkit-scrollbar-button:single-button:vertical:increment,
#wardrobe-modal *::-webkit-scrollbar-button:vertical:start:decrement,
#wardrobe-modal *::-webkit-scrollbar-button:vertical:end:increment,
#wardrobe-modal *::-webkit-scrollbar-button:single-button:vertical:decrement,
#wardrobe-modal *::-webkit-scrollbar-button:single-button:vertical:increment,
#admin-panel-modal *::-webkit-scrollbar-button:vertical:start:decrement,
#admin-panel-modal *::-webkit-scrollbar-button:vertical:end:increment,
#admin-panel-modal *::-webkit-scrollbar-button:single-button:vertical:decrement,
#admin-panel-modal *::-webkit-scrollbar-button:single-button:vertical:increment,
#creator-modal *::-webkit-scrollbar-button:vertical:start:decrement,
#creator-modal *::-webkit-scrollbar-button:vertical:end:increment,
#creator-modal *::-webkit-scrollbar-button:single-button:vertical:decrement,
#creator-modal *::-webkit-scrollbar-button:single-button:vertical:increment,
#settings-modal *::-webkit-scrollbar-button:vertical:start:decrement,
#settings-modal *::-webkit-scrollbar-button:vertical:end:increment,
#settings-modal *::-webkit-scrollbar-button:single-button:vertical:decrement,
#settings-modal *::-webkit-scrollbar-button:single-button:vertical:increment,
#entrance-modal *::-webkit-scrollbar-button:vertical:start:decrement,
#entrance-modal *::-webkit-scrollbar-button:vertical:end:increment,
#entrance-modal *::-webkit-scrollbar-button:single-button:vertical:decrement,
#entrance-modal *::-webkit-scrollbar-button:single-button:vertical:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Каталожные полосы держат тот же вид — правило рядом, чтобы при
   добавлении нового окна стиль не расходился с каталогом. */
#catalog-modal ::-webkit-scrollbar-button:vertical:start:decrement,
#catalog-modal ::-webkit-scrollbar-button:vertical:end:increment,
#catalog-modal ::-webkit-scrollbar-button:single-button:vertical:decrement,
#catalog-modal ::-webkit-scrollbar-button:single-button:vertical:increment,
#catalog-modal *::-webkit-scrollbar-button:vertical:start:decrement,
#catalog-modal *::-webkit-scrollbar-button:vertical:end:increment,
#catalog-modal *::-webkit-scrollbar-button:single-button:vertical:decrement,
#catalog-modal *::-webkit-scrollbar-button:single-button:vertical:increment,
.catalog-modal-card ::-webkit-scrollbar-button:vertical:start:decrement,
.catalog-modal-card ::-webkit-scrollbar-button:vertical:end:increment,
.catalog-modal-card ::-webkit-scrollbar-button:single-button:vertical:decrement,
.catalog-modal-card ::-webkit-scrollbar-button:single-button:vertical:increment,
.catalog-modal-card *::-webkit-scrollbar-button:vertical:start:decrement,
.catalog-modal-card *::-webkit-scrollbar-button:vertical:end:increment,
.catalog-modal-card *::-webkit-scrollbar-button:single-button:vertical:decrement,
.catalog-modal-card *::-webkit-scrollbar-button:single-button:vertical:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* =============================================
   Оценка фильма убрана из нижнего бара
   ============================================= */
/* Звезда с рейтингом убрана из строки HUD по просьбе: место занимало,
   а рядом уже есть значок источника и время. Элемент с тем же id
   остаётся в DOM — на него завязаны ui-overlay.js и videoSync.js,
   и переписывать их заполнение было бы лишним. Как и название с
   источником, скрывается жёстко: оба модуля возвращают ему display
   при обновлении, и обычное правило проигрывалось бы. */
#hud-movie-rating {
  display: none !important;
}

/* =============================================
   Настройки (Ins): одна колонка
   ============================================= */
/* Правая колонка «Зрители в зале» убрана из разметки: тот же список
   зрителей с громкостью и мутом открывается по Tab, и в настройках он
   занимал половину окна, выталкивая вкладки за экран. Сетка переведена
   на одну колонку — иначе осталась бы пустая половина. */
.settings-modal-layout {
  max-width: 720px;
  width: min(720px, 95vw);
}

/* ──────────────────────────────────────────────
   ВЫБОР СЕРИИ — В СТИЛЕ ВЫБОРА ИСТОЧНИКА ВИДЕО
   Раньше серии были сеткой квадратных плиток с одним
   номером и не совпадали с видом списка источников.
   Теперь это тот же стеклянный список строк.
────────────────────────────────────────────── */
.cinema-episodes-dropdown {
  width: 290px;
  gap: 8px;
}

.cinema-episodes-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 250px;
  overflow-y: auto;
  padding: 2px;
}

.episode-chip.source-item {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 8px 12px;
  gap: 8px;
  text-align: left;
  font-size: 12.5px;
}

.episode-chip.source-item:hover {
  transform: none;
}

.episode-chip-num {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.episode-chip.source-item.active .episode-chip-num {
  background: rgba(56, 189, 248, 0.28);
  color: #e0f2fe;
}

.episode-chip-name {
  min-width: 0;
}

.season-tab-btn.source-item {
  padding: 5px 12px;
  font-size: 11.5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.season-tab-btn.source-item:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.12);
}

.season-tab-btn.source-item.active {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
  color: #ffffff;
}

.episodes-dropdown-header {
  padding: 4px 6px 8px;
}

.episodes-count-badge {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

/* ──────────────────────────────────────────────
   МОБИЛЬНОЕ МЕНЮ ВОСПРОИЗВЕДЕНИЯ (шестеренка)
   Окно в стиле чата: та же полупрозрачная плашка
   с размытием, но со списками качества, источника
   и серий внутри.
────────────────────────────────────────────── */
#mobile-playback-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mobile-playback-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: min(320px, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 120;
  animation: audioPopupIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-playback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.mobile-playback-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}

.mobile-playback-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.mobile-playback-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-playback-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-playback-row:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.mobile-playback-row.open {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.42);
  color: #ffffff;
}

.mobile-playback-row-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.mobile-playback-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-playback-row-value {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-playback-section {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0 4px;
}

/* Внутри мобильного меню списки теряют своё позиционирование
   относительно кнопки HUD — они идут обычным потоком. */
#mobile-playback-menu .cinema-audio-dropdown,
#mobile-playback-menu .cinema-sources-dropdown,
#mobile-playback-menu .cinema-episodes-dropdown {
  position: static;
  width: 100%;
  max-width: 100%;
  max-height: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  animation: none;
}

#mobile-playback-menu .audio-dropdown-header,
#mobile-playback-menu .sources-dropdown-header,
#mobile-playback-menu .episodes-dropdown-header {
  padding: 2px 4px 6px;
  font-size: 12px;
}

#mobile-playback-menu .cinema-audio-tracks-list,
#mobile-playback-menu .cinema-video-quality-list,
#mobile-playback-menu .cinema-sources-list,
#mobile-playback-menu .cinema-episodes-list {
  max-height: 200px;
}

/* Три кнопки (качество/озвучка, источник, серии) уступают место
   шестеренке на любом экране: список из трёх кнопок занимал всю
   ширину нижнего HUD и в портрете, и на ноутбуке. !important —
   потому что ui-overlay.js включает их inline-стилем, когда сервер
   присылает источники и серии. */
#cinema-more-wrap,
#cinema-sources-wrap,
#cinema-episodes-wrap {
  display: none !important;
}

/* ──────────────────────────────────────────────
   ЭМОЦИИ ТОЛЬКО В ГОРИЗОНТАЛЬНОМ РАЗМЕЩЕНИИ
   В портрете на телефоне нижний HUD и так тесен:
   кнопка смайликов уходила за край вместе с
   ползунком громкости. В альбомной — остаётся,
   там места хватает.
────────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: portrait) {
  .cinema-reactions-wrap {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────
   ТАБ ЗРИТЕЛЕЙ НА ТЕЛЕФОНЕ
   Клавиши Tab на телефоне нет, поэтому список зрителей
   открывается кнопкой 👥 над кнопкой чата. В окне списка
   вместо подсказки про курсор (Q / ПКМ) показывается счётчик
   зрителей, а закрыть окно можно крестиком.
────────────────────────────────────────────── */
/* Внешний вид кнопки закрытия таба берётся от .btn-modal-close —
   такой же круглый значок, как у кнопки «Закрыть» в окне Ins.
   Отличается только подпись: клавиши Ins и Esc на телефоне нет,
   поэтому в подсказке их нет, а на ПК кнопки не видно вовсе. */
.tablist-mobile-close {
  display: none;
}

#tablist-mobile-online {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
}

/* На ПК окно зрителей не перехватывает мышь: его показывают, удерживая
   Tab, и управление остаётся в игре (pointer-events: none в
   .tablist-overlay, который включает только класс cursor-active).
   На телефоне окно открывают кнопкой со зрителями, курсор там
   активировать нечем, поэтому без pointer-events: auto нажатия —
   включая крестик — уходили насквозь в игру. */
.tablist-overlay.is-mobile-tablist {
  pointer-events: auto;
}

.tablist-overlay.is-mobile-tablist .tablist-mobile-close {
  display: inline-flex;
  touch-action: manipulation;
}

.tablist-overlay.is-mobile-tablist #tablist-mobile-online {
  display: inline-flex;
}

.tablist-overlay.is-mobile-tablist #tablist-cursor-status {
  display: none !important;
}

/* Счётчик в шапке на телефоне уступает место подсказке в подвале,
   чтобы надпись «Зрители онлайн» была в одном месте. */
.tablist-overlay.is-mobile-tablist .tablist-players-count {
  display: none !important;
}

.tablist-overlay.is-mobile-tablist .tablist-header-right {
  gap: 10px;
}

#mobile-btn-tablist.active {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

/* ──────────────────────────────────────────────
   УЗКИЙ ЧАТ НА ТЕЛЕФОНЕ
   В портрете чат растягивался от края до края
   (left: 10px; right: 10px) и накрывал кнопки справа —
   гардероб, каталог, чат и новую кнопку Таб.
   Теперь это узкая колонка, как в альбомной
   ориентации: сообщения и строка ввода уже,
   высота списка сообщений урезана.
────────────────────────────────────────────── */
@media (max-width: 768px) {
  #chat-float {
    right: auto;
    width: 276px;
    max-width: 66vw;
  }

  #chat-messages-float {
    max-height: 150px;
    padding-left: 4px;
  }

  #chat-input-row {
    padding: 3px 4px 3px 10px;
    gap: 6px;
    border-radius: 16px;
  }

  #chat-input {
    font-size: 12px;
    min-width: 0;
  }

  #chat-send-btn {
    width: 28px;
    height: 28px;
  }

  .chat-text {
    font-size: 12px !important;
  }
}

/* ──────────────────────────────────────────────
   КНОПКА ВО ВЕСЬ ЭКРАН НА ТЕЛЕФОНЕ
   На мобильных правила выше ужимали её до 27x26
   пикселей: в самом углу верхней панели такая
   кнопка почти не попадает пальцем. Ставим
   нормальные 44x44 — как у соседних кнопок.
   На ПК размер не меняется: правило только
   внутри @media (max-width: 768px).
────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.is-mobile-device #btn-fullscreen-toggle,
  body.is-touch-device #btn-fullscreen-toggle,
  #btn-fullscreen-toggle {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 4px 6px !important;
    font-size: 20px !important;
    border-radius: 12px !important;
    justify-content: center !important;
  }

  body.theater-mode #top-bar #btn-fullscreen-toggle {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    padding: 4px 6px !important;
    border-radius: 12px !important;
  }
}

/* ──────────────────────────────────────────────
   РЕЖИМ ГОЛОСОВОГО ЧАТА ТОЛЬКО НА ПК
   На телефоне и планшете выбирать нечего: держать клавишу
   C без физической клавиатуры нельзя, там всегда
   голосовая активация. На ПК выбор остаётся.
   Скрываем как в вертикальном, так и в горизонтальном
   (landscape) положении на любых мобильных экранах.
────────────────────────────────────────────── */
body.is-mobile-device .voice-mode-group,
body.is-touch-device .voice-mode-group {
  display: none !important;
}

@media (max-width: 768px) {
  .voice-mode-group {
    display: none !important;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  .voice-mode-group {
    display: none !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .voice-mode-group {
    display: none !important;
  }
}

@media (pointer: coarse) and (max-width: 1100px) {
  .voice-mode-group {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────
   ПОДСКАЗКА TAB ТОЛЬКО НА ПК
   «Tab — удерживайте для просмотра» на телефоне
   бессмысленно: клавиши нет, окно открывает кнопка
   👥. В мобильном виде окна подсказка скрыта, на ПК
   остаётся как была.
────────────────────────────────────────────── */
/* ──────────────────────────────────────────────
   ГРОМКОСТЬ МИКРОФОНА В ОКНЕ ЗРИТЕЛЕЙ
   В колонке «Микрофон» своей строки стоит ползунок и кнопка
   вкл/выкл: громкость подкручивается прямо в списке зрителей,
   состояние микрофона — той же кнопкой. Значение ползунка живёт
   в localStorage (fc_mic_gain), состояние кнопки — там же
   (fc_mic_muted), поэтому оба переживают перезаход и обновление.
─────────────────────────────────────────────── */
.tablist-mute-cell {
  gap: 10px;
  /* Без min-width: 0 ячейка не сжимается: у ползунка свой
     min-content около 130px, и на узком экране колонка
     «Микрофон» выдавливала «Зрителя» в ноль. */
  min-width: 0;
}

.tablist-mic-vol {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  transition: opacity 0.16s ease;
}

/* Микрофон выключен — ползунок остаётся на месте, но гаснет:
   значение сохраняется и пригодится, когда включишь микрофон. */
.tablist-mic-vol.is-off {
  opacity: 0.45;
}

.tablist-mic-gain {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 18px;
  accent-color: #38bdf8;
  cursor: pointer;
  /* Ползунок тянем сами: без этого телефон пытается жестом
     прокрутить окно зрителей вместо движения ползунка. */
  touch-action: none;
}

.tablist-mic-vol-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* На телефоне палец толще: ползунок выше, кнопка компактнее. */
@media (max-width: 768px) {
  .tablist-mute-cell {
    gap: 6px;
  }

  .tablist-mic-gain {
    min-width: 0;
    height: 26px;
  }

  /* Процентная подпись на телефоне только мешает: она съедает
     ширину, которой не хватает ползунку. Само значение видно
     в настройках и в подсказке ползунка. */
  .tablist-mic-vol-label {
    display: none;
  }

  /* Кнопка вкл/выкл и «заглушить игрока» — под палец: 29px
     высоты на телефоне мало, стало 38px. */
  .tablist-overlay.is-mobile-tablist .tablist-btn-mute {
    padding: 8px 10px;
    min-height: 38px;
    font-size: 12px;
    gap: 4px;
  }
}

/* На телефоне подпись кнопки вкл/выкл не помещается вместе с
   ползунком: имя зрителя важнее. Остаётся иконка — у своей строки
   🎙️/🔇, у соседа 🔊/🔇, плюс подсказка по долгому нажатию. */
/* Тег «Вы» на телефоне не нужен: своя строка и так выделена
   цветом, а место занимает ровно столько, сколько нужно имени. */
@media (max-width: 768px) {
  .tablist-overlay.is-mobile-tablist .tablist-self-tag {
    display: none;
  }
}

/* Мобильные правки окна зрителей:
   - ячейка пинга: отступы 4px 12px давали ей минимум около 62px,
     и колонка не давала колонкам схлопнуться до общей доли, что
     разводило шапку и содержимое строк;
   - подписи шапки: при 11px «ГОЛОС» и «ПИНГ» разделяли 2px и
     читались как одно слово, поэтому шрифт мельче.
   Всё это — только для телефона, на ПК сетка своя. */
@media (max-width: 768px) {
  .tablist-th {
    font-size: 10px;
    letter-spacing: 0.3px;
  }

  .tablist-overlay.is-mobile-tablist .tablist-ping-cell {
    padding: 4px 6px;
    min-width: 0;
  }
}

/* Единица измерения пинга на телефоне только съедает ширину. */
@media (max-width: 768px) {
  .tablist-ping-unit {
    display: none;
  }
}

@media (max-width: 768px) {
  .tablist-overlay.is-mobile-tablist .tablist-mute-text {
    display: none;
  }
}

/* Совсем узкий телефон (360px): у кнопки остаётся только иконка. */
@media (max-width: 400px) {
  .tablist-mic-vol {
    gap: 4px;
  }

  .tablist-overlay.is-mobile-tablist .tablist-btn-mute {
    padding: 8px;
    min-width: 38px;
    justify-content: center;
  }

  .tablist-overlay.is-mobile-tablist .tablist-mute-text {
    display: none;
  }

  /* Аватар и имя зрителя на узком экране: иначе в колонке
     помещалось пол-буквы. */
  .tablist-avatar {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 12px;
  }

  .tablist-player-cell {
    gap: 6px;
  }

  .tablist-name {
    font-size: 12.5px;
  }

  /* Тег «Вы» не должен вылезать из своей колонки в
     соседнюю: имя на узком экране обрезается, а тег — нет. */
  .tablist-name-wrap {
    overflow: hidden;
  }
}

/* ──────────────────────────────────────────────
   ХУД ТЕЛЕФОНА: КОРОНЫ В ВЕРХНЕМ ХУДЕ И КНОПКА «ВВЕРХ»
   Верхний худ на телефоне тесный: «👑 A» и «👑 S» отнимали там
   место, хотя обе панели и так есть в правом мобильном меню. На
   ПК всё как было.
─────────────────────────────────────────────── */
body.is-mobile-device #btn-admin-panel,
body.is-mobile-device #btn-creator-panel,
body.is-touch-device #btn-admin-panel,
body.is-touch-device #btn-creator-panel {
  display: none !important;
}

/* Кнопки админа и создателя в правом меню — ровно как соседние:
   тёмный фон, белая рамка, без золотого градиента и пульсации,
   корона просто золотая. !important обязателен: у .btn-admin,
   .btn-creator и #mobile-btn-admin он уже стоит выше по файлу. */
.mobile-action-btn#mobile-btn-admin,
.mobile-action-btn#mobile-btn-creator {
  background: rgba(18, 24, 38, 0.94) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fde68a !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
  animation: none !important;
  font-weight: 600 !important;
  gap: 6px;
}

.mobile-action-btn#mobile-btn-admin:hover,
.mobile-action-btn#mobile-btn-admin:active,
.mobile-action-btn#mobile-btn-creator:hover,
.mobile-action-btn#mobile-btn-creator:active {
  background: rgba(18, 24, 38, 0.94) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fef3c7 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
  /* Соседи при нажатии только сжимаются, без «подпрыгивания». */
  transform: scale(0.92);
}

.mobile-btn-letter {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* ──────────────────────────────────────────────
   КНОПКА «ВВЕРХ» ДЛЯ НИЖНЕГО ХУДА
   Пока стоишь в зале на телефоне, тап в любом месте больше не
   вызывает нижний худ — наоборот прячет его. Возвращает панель
   маленькая кнопка внизу по центру, размером с шестеренку в худе.
   В кинорежиме и когда сел кнопки нет.
─────────────────────────────────────────────── */
.hud-restore-btn {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(13, 17, 28, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 31;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.hud-restore-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Село или включился кинорежим — кнопка сразу пропадает, даже если
   успела остаться на экране. */
body.is-seated .hud-restore-btn,
body.theater-mode .hud-restore-btn {
  display: none !important;
}

/* Только телефон в горизонтальном положении. */
@media (max-width: 1024px) and (orientation: landscape) {
  .hud-restore-btn {
    display: flex;
  }

  /* Размер как у соседних правых кнопок в альбомном положении. */
  .mobile-action-btn#mobile-btn-admin,
  .mobile-action-btn#mobile-btn-creator {
    padding: 7px 12px;
    border-radius: 12px;
  }
}

.tablist-overlay.is-mobile-tablist .tablist-hold-hint {
  display: none !important;
}

/* ──────────────────────────────────────────────
   ЛОКАЦИИ ЗАЛА: КАРТОЧКИ В ПАНЕЛИ СОЗДАТЕЛЯ
   Четыре обстановки выбирает только создатель. Карточка показывает,
   где зал находится сейчас, и даёт переключиться. Ничего из этого
   не видно зрителям — вкладка живёт только в панели создателя.
─────────────────────────────────────────────── */
.creator-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.location-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.1s ease;
}

.location-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.location-card:active {
  transform: scale(0.98);
}

.location-card.is-current {
  border-color: rgba(52, 211, 153, 0.65);
  background: rgba(16, 185, 129, 0.12);
}

.location-card-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}

.location-card-body {
  min-width: 0;
}

.location-card-title {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.location-card-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.location-card-blurb {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.location-card[data-busy="1"] {
  opacity: 0.5;
  pointer-events: none;
}

/* ──────────────────────────────────────────────
   ПЕРЕХОД МЕЖДУ ЛОКАЦИЯМИ
   Порядок задан в app.js: гашение экрана → сборка новой локации →
   проявление её цветом. Здесь только внешний вид слоёв.
─────────────────────────────────────────────── */
.location-transition {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.34s ease, visibility 0.34s ease;
  background: radial-gradient(ellipse at center, #0b0d14 0%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-transition.is-active {
  opacity: 1;
  visibility: visible;
}

/* Вспышка цвета локации в момент проявления. */
.location-transition-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at center, var(--loc-flash, #8ab4ff) 0%, transparent 72%);
  transition: opacity 0.55s ease;
}

.location-transition.is-flashing .location-transition-flash {
  opacity: 0.55;
}

.location-transition-caption {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border-radius: 999px;
  background: rgba(10, 13, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.location-transition.is-active .location-transition-caption {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.location-transition-caption span:first-child {
  font-size: 24px;
  line-height: 1;
}

/* ──────────────────────────────────────────────
   ЛОКАЦИИ НА ТЕЛЕФОНЕ
   На узком экране карточки в одну колонку: описание локации важнее,
   чем экономия одного поля нажатия.
─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .creator-locations-grid {
    grid-template-columns: 1fr;
  }

  .location-card {
    padding: 12px;
  }

  .location-card-icon {
    font-size: 26px;
  }

  .location-transition-caption {
    font-size: 14px;
    padding: 12px 20px;
  }
}

/* ────────────────────────────────────────────────
   ВЫБОР ПЕРСОНАЖА (гардероб)
   Карточки персонажей шире карточек уборов: там длинные
   названия («Волшебник», «Пришелец»), и в одну колонку
   на телефоне они влезают целиком.
   ──────────────────────────────────────────────── */
.wardrobe-characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.wardrobe-character-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wardrobe-character-card:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.wardrobe-character-card.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(168, 85, 247, 0.35));
  border-color: #a78bfa;
  color: #fff;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.4);
}

.wardrobe-character-icon {
  font-size: 26px;
  line-height: 1;
}

.wardrobe-character-name {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.wardrobe-character-blurb {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 10px;
  min-height: 16px;
}

.wardrobe-hat-hint {
  font-size: 12px;
  color: #a5b4fc;
  font-weight: 600;
}

@media (max-width: 640px) {
  .wardrobe-characters-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .wardrobe-character-name {
    font-size: 11px;
  }
}

/* ─── Размер экрана: панель Создателя и режим правки ─── */
.creator-screen-size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.creator-screen-size-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  min-width: 96px;
}

.creator-screen-size-field input {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
}

.creator-screen-size-field input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18);
}

.creator-screen-size-label {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(148, 197, 255, 0.9);
  font-variant-numeric: tabular-nums;
}

/* В режиме правки курсор должен быть виден, а прицел — нет:
   иначе тянуть углы нечем. */
body.screen-edit-mode {
  cursor: default;
}

body.screen-edit-mode #crosshair,
body.screen-edit-mode .crosshair-hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   СКРОЛЛБАРЫ ПО УМОЛЧАНИЮ — СТИЛЬ КАТАЛОГА ДЛЯ ВСЕГО
   ═══════════════════════════════════════════════════════════════════
   Раньше стиль каталога (узкая полоса 7 px, спокойный бегунок,
   который загорается акцентным цветом при наведении, без системных
   стрелок) был прописан списком для пяти окон, а всё остальное —
   выпадающие списки, чат, ленты, панели — рисовало полосы своими
   правилами, и Windows-стрелки появлялись то там, то здесь.

   Здесь то же самое задаётся для любого прокручиваемого элемента.
   Специфичность здесь нулевая и !important не нужен, поэтому
   сознательные исключения продолжают работать: у чата и логи комнат
   своя полоса 4 px, у верхнего худа на телефоне полоса скрыта целиком
   (scrollbar-width: none), горизонтальные полосы у вкладок настроек и
   каталога не трогаем — они прокручиваются и должны остаться.

   Горизонтальные стрелки тоже убираются: ::-webkit-scrollbar-button
   отвечает и за кнопки вверх/вниз, и за них влево/вправо, поэтому
   сами горизонтальные полосы скрывать не пришлось.
*/

*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Системные стрелки (Windows) — долой. */
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  box-shadow: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Наведение — бегунок загорается акцентным цветом. */
*::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary, #10b981);
  box-shadow: 0 0 10px var(--accent-glow, rgba(16, 185, 129, 0.45));
}

*::-webkit-scrollbar-thumb:active {
  background: var(--accent-hover, #059669);
  box-shadow: 0 0 12px var(--accent-glow, rgba(16, 185, 129, 0.6));
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   КАРТОЧКА ВХОДА НА НИЗКОМ ЭКРАНЕ (ТЕЛЕФОН В АЛЬБОМНОЙ ОРИЕНТАЦИИ)
   ═══════════════════════════════════════════════════════════════════
   При высоте 375-430 px карточка входа выше экрана: описание, подсказка
   про имя, блок приватной комнаты и кнопка «Войти в кинозал» не влезали,
   и кнопка уезжала под нижний край — её приходилось искать прокруткой.
   Прокручивается сам #entrance-modal, он для этого и сделан
   прокручиваемым, но спрятанная под сгибом главная кнопка — плохо.

   Здесь ужимаем карточку по вертикали. Приветственное описание убираем:
   на узком экране в горизонтали это самое необязательное, а 42 px
   высоты — как раз недостающая часть. Прокрутка остаётся страховкой.
*/


/* Две колонки: имя с аватаром сверху, зал и режим голоса рядом.
   Без этого приватный зал не влезал в горизонтальный телефон. */
@media (max-height: 500px) and (orientation: landscape) {
  #entrance-modal .modal-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 9px;
    align-content: start;
  }

  #entrance-modal .modal-title,
  #entrance-modal #btn-enter-cinema,
  #entrance-modal .entrance-modal-legal-links {
    grid-column: 1 / -1;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  #entrance-modal .modal-card {
    padding: 12px 16px !important;
    gap: 9px;
    max-height: calc(100vh - 16px) !important;
  }

  #entrance-modal .modal-title {
    font-size: 17px;
  }

  #entrance-modal .modal-logo {
    width: 26px;
    height: 26px;
  }

  #entrance-modal .modal-desc {
    display: none;
  }

  #entrance-modal .form-input {
    padding: 8px 12px;
  }

  #entrance-modal #btn-enter-cinema {
    padding: 10px 18px;
  }
}

/* Две подсказки на низком экране только съедают место: правило имени
   и «поделитесь ссылкой». Ошибки всё равно показываются отдельно. */
@media (max-height: 500px) and (orientation: landscape) {
  #entrance-modal .field-rule-hint,
  #entrance-modal #private-invite-hint {
    display: none;
  }
}

/* Плотнее обычного: телефон в альбомной ориентации, высота 375-390 px.
   Ужимаем второстепенные ряды (свотчи цвета, мелкие кнопки, подписи),
   чтобы кнопка «Войти в кинозал» уезжала под сгиб как можно меньше. */
@media (max-height: 500px) and (orientation: landscape) {
  #entrance-modal .form-label {
    margin-bottom: 4px;
    font-size: 12px;
  }

  #entrance-modal .color-options {
    gap: 5px;
  }

  #entrance-modal .color-options button {
    width: 26px;
    height: 26px;
  }

  #entrance-modal .room-type-btn {
    padding: 8px 14px;
  }

  #entrance-modal .btn-sm {
    padding: 6px 9px;
  }

  #entrance-modal #btn-enter-cinema {
    padding: 9px 18px !important;
    font-size: 15px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════
   БЕГУНОК: АКЦЕНТ ПРИ НАВЕДЕНИИ И ПРИ ПРОКРУТКЕ, БЕЗ ВЫХОДА ЗА РАМКУ
   ═══════════════════════════════════════════════════════════════════
   Два требования:
   1. Свечение бегунка вылезало за рамку окна. Полосу браузер рисует
      вплотную к краю, и внешнее тень-подсветка (0 0 10px) выходила за
      карточку. Оставляем только внутреннюю обводку — акцентный цвет
      читается так же, за рамку ничего не выходит.
   2. Подсветка при прокрутке колесом или пальцем. Указатель над
      бегунком не висит, поэтому JS (ui-overlay.js, «БЕГУНОК ГОРИТ ПРИ
      ПРОКРУТКЕ») на 0.8 с вешает на прокручиваемый блок класс
      .is-scroll-lit.

   Списки окон повторяют их собственные правила с !important: без этого
   частные правила вида `#settings-modal *::-webkit-scrollbar-thumb`
   победили бы и по специфичности, и по important, и подсветки бы не
   было видно.
*/

#entrance-modal ::-webkit-scrollbar-thumb:hover,
#entrance-modal *::-webkit-scrollbar-thumb:hover,
#wardrobe-modal ::-webkit-scrollbar-thumb:hover,
#wardrobe-modal *::-webkit-scrollbar-thumb:hover,
#admin-panel-modal ::-webkit-scrollbar-thumb:hover,
#admin-panel-modal *::-webkit-scrollbar-thumb:hover,
#creator-modal ::-webkit-scrollbar-thumb:hover,
#creator-modal *::-webkit-scrollbar-thumb:hover,
#settings-modal ::-webkit-scrollbar-thumb:hover,
#settings-modal *::-webkit-scrollbar-thumb:hover,
#catalog-modal ::-webkit-scrollbar-thumb:hover,
#catalog-modal-card ::-webkit-scrollbar-thumb:hover,
#catalog-modal-card *::-webkit-scrollbar-thumb:hover,
.is-scroll-lit::-webkit-scrollbar-thumb,
#entrance-modal .is-scroll-lit::-webkit-scrollbar-thumb,
#wardrobe-modal .is-scroll-lit::-webkit-scrollbar-thumb,
#admin-panel-modal .is-scroll-lit::-webkit-scrollbar-thumb,
#creator-modal .is-scroll-lit::-webkit-scrollbar-thumb,
#settings-modal .is-scroll-lit::-webkit-scrollbar-thumb,
#catalog-modal .is-scroll-lit::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary, #10b981) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}

#entrance-modal ::-webkit-scrollbar-thumb:active,
#entrance-modal *::-webkit-scrollbar-thumb:active,
#wardrobe-modal ::-webkit-scrollbar-thumb:active,
#wardrobe-modal *::-webkit-scrollbar-thumb:active,
#admin-panel-modal ::-webkit-scrollbar-thumb:active,
#admin-panel-modal *::-webkit-scrollbar-thumb:active,
#creator-modal ::-webkit-scrollbar-thumb:active,
#creator-modal *::-webkit-scrollbar-thumb:active,
#settings-modal ::-webkit-scrollbar-thumb:active,
#settings-modal *::-webkit-scrollbar-thumb:active,
#catalog-modal ::-webkit-scrollbar-thumb:active,
#catalog-modal-card ::-webkit-scrollbar-thumb:active,
#catalog-modal-card *::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
  background: var(--accent-hover, #059669) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}
   прокручиваемый блок (ui-overlay.js, ~«БЕГУНОК ГОРИТ ПРИ ПРОКРУТКЕ»). */
.is-scroll-lit::-webkit-scrollbar-thumb {
  background: var(--accent-primary, #10b981) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}

/* Ребёнок карточки не должен быть шире её содержимого. В мобильных
   медиазапросах внутренние блоки заданы через width: calc(100vw - 20px),
   из-за чего полоса прокрутки уезжала на рамку (на 390 px — на 27 px
   мимо padding карточки). max-width: 100% это убирает. */
#entrance-modal .modal-card > *,
#wardrobe-modal .modal-card > *,
#admin-panel-modal .modal-card > *,
#creator-modal .modal-card > *,
#settings-modal .modal-card > *,
#catalog-modal .modal-card > * {
  max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ПОЛОСА ПРЯЧЕТСЯ ЗА ОКНО — КАК В КАТАЛОГЕ [R]
   ═══════════════════════════════════════════════════════════════════
   Chromium не обрезает полосу по скруглённому углу рамки: бегунок идёт
   прямой линией до самого края, и в углах карточки заметно выглядывает
   наружу. В каталоге такого нет потому, что прокручивается не сама
   карточка, а вложенная колонка: рамка её обрезает, а полоса стоит
   внутри полей и до углов не достаёт.

   Здесь то же устройство: карточка не прокручивается, а прокручивает
   активная вкладка. Побочный плюс — шапка и вкладки не уезжают.
*/

#settings-modal .modal-card {
  overflow: hidden !important;
}

#settings-modal .settings-tab-page {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  margin-right: 6px;
}


/* ═══════════════════════════════════════════════════════════════════
   СТРАНИЦА «БЕЗОПАСНОСТЬ» В ПАНЕЛИ СОЗДАТЕЛЯ
   Показ действующих белых списков: домены, куда сервер ходит сам, и
   Origin, с которых разрешено ходить к нему. Список доменов длинный
   (38 штук), поэтому у поля своя высота и своя полоса прокрутки —
   иначе вся вкладка растягивалась бы на несколько экранов.
   ═══════════════════════════════════════════════════════════════════ */

.creator-security-status {
  margin: 2px 0 14px 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.creator-security-status.is-warn {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

.creator-security-status.is-danger {
  color: #f87171;
  background: rgba(239, 68, 68, 0.13);
  border-color: rgba(239, 68, 68, 0.4);
}

.creator-security-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 12px;
}

.creator-security-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.creator-security-list {
  margin-top: 10px;
  max-height: 210px;
  overflow-y: auto;
  /* Поле прокручивается само, поэтому полосу сдвигаем внутрь рамки —
     иначе она, как и у карточки, вылезет за скруглённый угол. */
  margin-right: 6px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.creator-security-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

/* Чередование фона: список доменов читается как таблица, а не стена текста. */
.creator-security-item:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}

.creator-security-item-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.creator-security-item-tag {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.32);
  white-space: nowrap;
}

/* Карточка «Последние отказы» на странице безопасности. Свои стили
   нужны потому, что строка двухуровневая: домен с метой сверху и
   подсказка снизу, тогда как обычный .creator-security-item рассчитан
   на одну строку списка. Селекторы — двумя классами, см. комментарий
   в начале скрипта про специфичность :nth-child(odd). */
.creator-security-item.creator-security-refusal {
  display: block;
  padding: 7px 9px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.32);
  margin-bottom: 6px;
}

.creator-security-item.creator-security-refusal:last-child {
  margin-bottom: 0;
}

.creator-security-refusal-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.creator-security-refusal-host {
  font-weight: 600;
  color: #fca5a5;
  overflow-wrap: anywhere;
}

.creator-security-refusal-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.creator-security-refusal-hint {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #fdba74;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   AUTO-NEXT EPISODE OVERLAY (NETFLIX / KINOPOISK STYLE)
   ========================================================================== */
.auto-next-episode-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: autoNextFadeIn 0.25s ease-out;
}

@keyframes autoNextFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.auto-next-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 24px 28px;
  width: 90%;
  max-width: 440px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(16, 185, 129, 0.2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  align-items: center;
}

.auto-next-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.auto-next-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.auto-next-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.auto-next-series-title {
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

.auto-next-ep-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.auto-next-countdown-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin-top: 6px;
}

.auto-next-countdown-text {
  font-size: 14px;
  color: #e2e8f0;
  font-weight: 500;
}

.auto-next-seconds {
  font-weight: 800;
  color: #34d399;
  font-size: 16px;
}

.auto-next-progress-bar {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.auto-next-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 3px;
}

.auto-next-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
}

.btn-auto-next-play {
  flex: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.btn-auto-next-play:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.6);
}

.btn-auto-next-cancel {
  flex: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-auto-next-cancel:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Cooldown style for reactions */
.btn-reaction.is-cooldown {
  opacity: 0.45 !important;
  pointer-events: none !important;
  filter: grayscale(0.6) !important;
  cursor: not-allowed !important;
}

/* Entrance modal legal links (Privacy Policy & Terms) */
.entrance-modal-legal-links {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.entrance-modal-legal-links a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.entrance-modal-legal-links a:hover {
  color: #38bdf8;
  text-decoration: underline;
}

.entrance-modal-legal-links .legal-dot {
  opacity: 0.35;
}

/* Sidebar Brand Google Auth Widget */
.catalog-modal-card .sidebar-header .brand-title {
  gap: 8px;
  width: 100%;
}

.catalog-modal-card .sidebar-header .google-auth-widget {
  margin-left: 2px;
  flex: 1;
  min-width: 0;
}

.catalog-modal-card .sidebar-header .btn-google-auth-login {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 18px;
  white-space: nowrap;
}

.catalog-modal-card .sidebar-header .google-auth-user-pill {
  padding: 3px 8px 3px 4px;
  border-radius: 18px;
  max-width: 175px;
}

.catalog-modal-card .sidebar-header .google-user-name {
  max-width: 90px;
  font-size: 12px;
}

.catalog-modal-card .catalog-sidebar.collapsed .sidebar-header .google-auth-widget {
  display: none !important;
}

/* Entrance Screen Auth Panel (Способы авторизации) */
.entrance-auth-panel {
  position: absolute;
  left: max(24px, calc(50% - 260px - 280px - 24px));
  top: 50%;
  transform: translateY(-50%);
  width: 270px;
  background: rgba(13, 17, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 18px 16px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(99, 102, 241, 0.12);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.entrance-auth-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.entrance-auth-icon {
  font-size: 20px;
}

.entrance-auth-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.entrance-auth-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.entrance-auth-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.entrance-auth-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entrance-auth-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entrance-auth-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.entrance-auth-provider-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #e2e8f0;
}

.entrance-auth-provider-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  font-weight: 600;
}

.auth-provider-tag-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  margin-right: 4px;
}

.entrance-google-widget {
  width: 100%;
}

.entrance-google-widget .btn-google-auth-login {
  width: 100%;
  justify-content: center;
  padding: 8px 12px;
  font-size: 12.5px;
}

.entrance-google-widget .entrance-user-pill {
  width: 100%;
  justify-content: space-between;
  padding: 4px 10px 4px 6px;
}

.entrance-auth-future-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.4);
  font-size: 11.5px;
}

.entrance-future-icon {
  font-size: 13px;
}

@media (max-width: 980px) {
  .entrance-auth-panel {
    position: static;
    transform: none;
    width: min(520px, 92vw);
    margin: 0 auto 14px auto;
    order: -1;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .entrance-auth-panel {
    position: static;
    transform: none;
    width: min(520px, 92vw);
    margin: 0 auto 10px auto;
    order: -1;
    padding: 10px 14px;
    gap: 8px;
  }
  .entrance-auth-subtitle {
    display: none;
  }
}

/* Google Authentication Widget */
.google-auth-widget {
  display: flex;
  align-items: center;
}

.btn-google-auth-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-google-auth-login:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.google-auth-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
}

.google-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.google-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-google-logout {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94a3b8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-google-logout:hover {
  background: rgba(239, 68, 68, 0.8);
  color: #fff;
}

#entrance-auth-panel[hidden],
#entrance-auth-item-google[hidden],
#main-catalog-google-auth-widget[hidden] {
  display: none !important;
}

/* YouTube Guest Banner */
.youtube-guest-login-banner,
.youtube-guest-login-banner[hidden],
.youtube-guest-login-banner.is-disabled-banner {
  display: none !important;
}

.yt-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.yt-banner-icon {
  font-size: 28px;
}

.yt-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.yt-banner-text strong {
  font-size: 15px;
  color: #fff;
}

.yt-banner-text span {
  font-size: 13px;
  color: #cbd5e1;
}

.btn-yt-banner-login {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-yt-banner-login:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.45);
}

/* YouTube Personal Sub-navigation */
.youtube-personal-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.yt-subnav-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.yt-subnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.yt-subnav-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.yt-subnav-btn.active {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.25);
}

.yt-subnav-icon {
  font-size: 15px;
}

.yt-subnav-status {
  font-size: 12px;
  color: var(--text-muted);
}

/* YouTube Playlist Breadcrumb Header */
.youtube-playlist-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.btn-yt-playlist-back {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-yt-playlist-back:hover {
  background: rgba(255, 255, 255, 0.2);
}

.yt-playlist-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER & I18N STYLES (Локализация RU / EN)
   ══════════════════════════════════════════════════════════════ */
.entrance-lang-panel {
  position: absolute;
  right: max(24px, calc(50% - 260px - 220px - 24px));
  top: 50%;
  transform: translateY(-50%);
  width: 210px;
  background: rgba(13, 17, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px 14px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(99, 102, 241, 0.12);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.entrance-lang-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.entrance-lang-icon {
  font-size: 20px;
}

.entrance-lang-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.entrance-lang-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.entrance-lang-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.entrance-lang-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-1px);
}

.lang-btn.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.25));
  border-color: rgba(168, 85, 247, 0.5);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.2);
}

.lang-flag {
  font-size: 16px;
  line-height: 1;
}

.lang-name {
  flex: 1;
  text-align: left;
}

.lang-check {
  font-size: 13px;
  opacity: 0;
  color: #a855f7;
  transition: opacity 0.15s ease;
}

.lang-btn.active .lang-check {
  opacity: 1;
}

.settings-lang-buttons .lang-btn {
  justify-content: center;
}

.settings-lang-buttons .lang-btn.active {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.22);
}

.btn-lang-toggle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-lang-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.top-lang-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .entrance-lang-panel {
    position: static;
    transform: none;
    width: min(520px, 92vw);
    margin: 0 auto 14px auto;
    order: 2;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .entrance-lang-panel {
    position: static;
    transform: none;
    width: min(520px, 92vw);
    margin: 0 auto 10px auto;
    order: 2;
    padding: 10px 14px;
    gap: 8px;
  }
  .entrance-lang-subtitle {
    display: none;
  }
  .entrance-lang-list {
    flex-direction: row;
  }
  .entrance-lang-list .lang-btn {
    flex: 1;
  }
}

.lang-flag-img {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.settings-lang-card .lang-btn {
  justify-content: flex-start;
}

/* =============================================
   Информационная плашка превью зала перед входом
   ============================================= */
.entrance-room-preview {
  margin-top: 14px;
  margin-bottom: 6px;
  padding: 10px 14px;
  background: rgba(18, 22, 34, 0.75);
  border: 1px solid rgba(229, 9, 20, 0.35);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(229, 9, 20, 0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: #e2e8f0;
}

.entrance-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}

.entrance-preview-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ff4d6d;
}

.preview-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d6d;
  box-shadow: 0 0 8px #ff4d6d;
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.entrance-preview-viewers {
  font-size: 12px;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.entrance-preview-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.entrance-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.preview-row-label {
  color: #94a3b8;
  flex-shrink: 0;
}

.preview-row-val {
  color: #f8fafc;
  font-weight: 500;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-media-row {
  align-items: flex-start;
}

.preview-media-val {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 70%;
}

.preview-media-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #38bdf8;
}

/* =============================================
   PWA «Открыть в приложении» (как в YouTube)
   ============================================= */
.pwa-install-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  background: #065fd4;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(6, 95, 212, 0.45);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  text-decoration: none;
}

.pwa-install-pill:hover {
  background: #0073e6;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(6, 95, 212, 0.65);
  transform: translateY(-1px);
}

.pwa-install-pill:active {
  background: #0056b3;
  box-shadow: 0 1px 4px rgba(6, 95, 212, 0.3);
  transform: translateY(0);
}

.pwa-pill-logo {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}

.pwa-pill-text {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.entrance-pwa-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 10px 0;
}

.entrance-pwa-btn {
  height: 28px;
  padding: 0 14px;
  font-size: 12px;
  gap: 6px;
}

.entrance-pwa-btn .pwa-pill-logo {
  width: 14px;
  height: 14px;
}

.entrance-pwa-btn .pwa-pill-text {
  font-size: 12px;
}

/* Красная кнопка «Вернуться в холл» (при переходе по приватной ссылке) */
.btn-return-lobby {
  background: rgba(225, 29, 72, 0.16);
  border: 1px solid rgba(225, 29, 72, 0.55);
  border-radius: 14px;
  color: #ff6b8b;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.2);
}

.btn-return-lobby:hover {
  background: rgba(225, 29, 72, 0.3);
  border-color: rgba(225, 29, 72, 0.85);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.45);
}

.btn-return-lobby:active {
  transform: translateY(0);
}



/* ═══════════════════════════════════════════════════════════════
   МОДАЛЬНОЕ ОКНО «ПОДДЕРЖАТЬ ПРОЕКТ» (DONATE / SUPPORT MODAL)
   ═══════════════════════════════════════════════════════════════ */

.btn-donate-topbar {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.22) !important;
  transition: all 0.2s ease !important;
}

.btn-donate-topbar:hover {
  background: rgba(245, 158, 11, 0.26) !important;
  border-color: rgba(245, 158, 11, 0.8) !important;
  color: #fef3c7 !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45) !important;
  transform: scale(1.08) !important;
}

#entrance-link-donate {
  color: #fbbf24 !important;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

#entrance-link-donate:hover {
  color: #fef3c7 !important;
  text-decoration: underline;
}

.donate-modal-card {
  width: min(480px, 94vw);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px;
  background: rgba(13, 17, 28, 0.96) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(245, 158, 11, 0.15) !important;
}

.donate-title-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 16px;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.donate-modal-desc {
  font-size: 13px;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* Карточка цели */
.donate-goal-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(18, 24, 38, 0.65) 100%);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.donate-goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}

.donate-goal-target-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #fff;
}

.donate-goal-amounts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.donate-goal-current {
  color: #fbbf24;
  font-weight: 700;
}

.donate-goal-divider {
  color: rgba(255, 255, 255, 0.35);
}

.donate-goal-total {
  color: rgba(255, 255, 255, 0.65);
}

.donate-goal-percent {
  color: #34d399;
  font-weight: 700;
  font-size: 11.5px;
}

.donate-goal-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.donate-goal-bar {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  transition: width 0.4s ease;
}

/* Табы методов оплаты */
.donate-tabs-nav {
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.donate-tab-btn {
  flex: 1;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.donate-tab-btn.active {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.donate-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Sub-tabs navigation (Services & Coins) */
.donate-subtabs-nav {
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.donate-subtab-btn {
  flex: 1;
  padding: 7px 5px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-align: center;
}

.donate-subtab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.donate-subtab-btn.active {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.donate-crypto-nav .donate-subtab-btn.active {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.4);
  color: #34d399;
}

/* Card Layout */
.donate-card-layout {
  display: flex;
  gap: 15px;
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.donate-card-layout.single-col {
  flex-direction: column;
  text-align: center;
}

.donate-qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.donate-qr-img {
  width: 124px;
  height: 124px;
  border-radius: 10px;
  padding: 6px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  object-fit: contain;
}

.donate-crypto-qr-box {
  background: transparent;
}

.donate-crypto-card-img {
  max-width: 126px;
  max-height: 145px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  object-fit: contain;
}

.donate-qr-scan-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  max-width: 124px;
  line-height: 1.25;
}

.donate-card-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.donate-service-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.donate-service-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.donate-service-desc.text-center {
  text-align: center;
}

.donate-badges-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.donate-badges-row.justify-center {
  justify-content: center;
}

.badge-accent {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
}

.badge-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 5px;
}

.badge-subtle {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
}

.badge-boosty {
  background: rgba(249, 115, 22, 0.16);
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: #fb923c;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
}

.badge-ym {
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #a78bfa;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
}

.donate-service-icon-hero {
  font-size: 34px;
  line-height: 1;
  text-align: center;
  margin-bottom: 2px;
}

/* Action Buttons */
.btn-donate-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 11px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-donate-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.btn-cloudtips-accent {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #0b0f19 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

.btn-da-accent {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
}

.btn-ym-accent {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}

.btn-boosty-accent {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35) !important;
}

/* Crypto Details */
.donate-crypto-card {
  padding: 16px 18px !important;
}

.donate-crypto-card .donate-card-details {
  width: 100%;
  align-items: stretch;
}

.donate-crypto-card .crypto-coin-header {
  margin-bottom: 2px;
}

.donate-crypto-card .crypto-address-wrap {
  width: 100%;
}

.donate-crypto-card .crypto-address-input {
  font-size: 12px;
  padding: 8px 10px;
}

.crypto-coin-header {
  display: flex;
  align-items: center;
  gap: 7px;
}

.crypto-coin-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
}

.badge-usdt {
  background: rgba(38, 161, 123, 0.16);
  border: 1px solid rgba(38, 161, 123, 0.4);
  color: #34d399;
}

.badge-trx {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.badge-btc {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.crypto-net-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.crypto-address-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}

.crypto-address-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.88);
  font-family: monospace;
  outline: none;
  min-width: 0;
}

.btn-crypto-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-crypto-copy:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-crypto-copy.copied {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: rgba(16, 185, 129, 0.55) !important;
  color: #34d399 !important;
}

.crypto-memo-hint {
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .donate-modal-card {
    padding: 16px 14px;
    gap: 11px;
  }
  .donate-card-layout {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .donate-badges-row {
    justify-content: center;
  }
  .crypto-coin-header {
    justify-content: center;
  }
  .crypto-address-wrap {
    flex-direction: column;
    width: 100%;
  }
  .crypto-address-input {
    width: 100%;
    text-align: center;
  }
  .btn-crypto-copy {
    width: 100%;
    justify-content: center;
  }
  .donate-subtab-btn {
    font-size: 10.5px;
    padding: 6px 2px;
  }
}

/* Перки спонсоров */
.donate-perks-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(245, 158, 11, 0.24);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.donate-perks-title {
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
}

.donate-perks-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.donate-perk-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
}

.perk-icon {
  font-size: 12px;
}

.donate-footer {
  margin-top: 2px;
}

/* Cinema Buffet & Snack Bar Menu Modal */
.snack-card {
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.snack-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(245, 158, 11, 0.15);
}
.btn-order-snack-item {
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-order-snack-item:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}
.btn-order-snack-item:active {
  transform: scale(0.98);
}

/* =====================================================================
   CS:GO / CS2 Style Tactical Room Voting Panel (Slide-in from Left)
   ===================================================================== */
.cs-vote-panel {
  position: fixed;
  top: 140px;
  left: 24px;
  z-index: 10050;
  width: 320px;
  max-width: calc(100vw - 48px);
  background: rgba(13, 17, 23, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  pointer-events: auto;
  user-select: none;
  animation: csVoteSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.cs-vote-panel.vote-type-skip {
  border-left-color: #06b6d4;
}

.cs-vote-panel.vote-type-pause {
  border-left-color: #f59e0b;
}

.cs-vote-panel.is-closing {
  animation: csVoteSlideOut 0.3s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes csVoteSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes csVoteSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-120%);
  }
}

.cs-vote-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cs-vote-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}

.cs-vote-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: csVotePulse 1.5s infinite;
}

.cs-vote-panel.vote-type-skip .cs-vote-tag-dot {
  background: #06b6d4;
  box-shadow: 0 0 8px #06b6d4;
}

@keyframes csVotePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.cs-vote-timer {
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
}

.cs-vote-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-vote-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.cs-vote-target {
  font-size: 12.5px;
  font-weight: 600;
  color: #38bdf8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-vote-meta {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 5px;
}

.cs-vote-meta-user {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.cs-vote-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}

.cs-vote-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.15s ease;
  user-select: none;
}

.cs-vote-btn-yes {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

.cs-vote-btn-yes:hover {
  background: rgba(34, 197, 94, 0.28);
  border-color: rgba(34, 197, 94, 0.6);
  transform: translateY(-1px);
}

.cs-vote-btn-yes:active {
  transform: translateY(0);
}

.cs-vote-btn-yes.is-voted {
  background: rgba(34, 197, 94, 0.35);
  border-color: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.cs-vote-btn-no {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.cs-vote-btn-no:hover {
  background: rgba(239, 68, 68, 0.28);
  border-color: rgba(239, 68, 68, 0.6);
  transform: translateY(-1px);
}

.cs-vote-btn-no:active {
  transform: translateY(0);
}

.cs-vote-btn-no.is-voted {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.cs-vote-key {
  font-size: 11px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 1px 5px;
  color: rgba(255, 255, 255, 0.85);
}

.cs-vote-btn-label {
  flex: 1;
  text-align: center;
}

.cs-vote-count {
  font-size: 12px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  opacity: 0.9;
}

.cs-vote-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.cs-vote-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  position: relative;
}

.cs-vote-progress-fill-yes {
  height: 100%;
  background: #22c55e;
  transition: width 0.3s ease;
}

.cs-vote-progress-fill-no {
  height: 100%;
  background: #ef4444;
  transition: width 0.3s ease;
}

.cs-vote-progress-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 640px) {
  .cs-vote-panel {
    top: auto;
    bottom: 85px;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    max-width: none;
  }
}