/* ============================================================
   WALL — три направления + театр + адаптив
   ============================================================ */

/* ================= A. «Фокус» ================= */

.app[data-variant="a"] {
  --bg: #0a0b0f;
  --panel: #0e1017;
  --panel-2: #151925;
  --line: #1e2432;
  --text: #e9ecf5;
  --dim: #8b93a8;
  --faint: #5a6275;
  --accent: #a970ff;
  --accent-2: #7c4dff;
  --accent-soft: rgba(169, 112, 255, .14);
  --live: #ff4d61;
  --radius: 12px;
  --gap: 10px;
  --pad: 14px;
  --chatw: 380px;
  --top: 56px;
  --status: 0px;
}

/* ================= B. «Бенто» ================= */

.app[data-variant="b"] {
  --bg: #0a0807;
  --panel: #12100e;
  --panel-2: #1b1714;
  --line: #2a241f;
  --text: #f5efe8;
  --dim: #a99c90;
  --faint: #6f655c;
  --accent: #ff7a45;
  --accent-2: #ffb03a;
  --accent-soft: rgba(255, 122, 69, .15);
  --live: #ff4d61;
  --radius: 20px;
  --gap: 14px;
  --pad: 18px;
  --chatw: 380px;
  --top: 64px;
  --status: 0px;
}

.app[data-variant="b"] .topbar {
  background: transparent;
  border-bottom-color: transparent;
  padding: 0 20px;
}
.app[data-variant="b"] .brand-txt b { font-size: 17px; letter-spacing: .16em; }
.app[data-variant="b"] .brand-txt em { font-size: 11px; }
.app[data-variant="b"] .logo { width: 28px; height: 28px; border-radius: 9px; }
.app[data-variant="b"] .seg { background: rgba(27, 23, 20, .7); border-radius: 12px; }
.app[data-variant="b"] .seg-btn { border-radius: 9px; }
.app[data-variant="b"] .tile:hover { transform: translateY(-2px); }
.app[data-variant="b"] .t-name { font-size: 13px; }
.app[data-variant="b"] .t-ava { width: 30px; height: 30px; font-size: 12px; }
.app[data-variant="b"] .offline-tag { color: rgba(245, 239, 232, .5); }

/* плавающий чат */
.app[data-variant="b"] .chat {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: var(--chatw);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  background: rgba(20, 17, 14, .74);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  overflow: hidden;
  animation: floatIn .22s ease;
}
@keyframes floatIn { from { opacity: 0; transform: translateX(10px); } }
.app[data-variant="b"] .chat-head { border-bottom-color: rgba(255, 255, 255, .07); }
.app[data-variant="b"] .chat-pin { background: rgba(255, 255, 255, .04); border-bottom-color: rgba(255, 255, 255, .06); }
.app[data-variant="b"] .chat-form { border-top-color: rgba(255, 255, 255, .07); }
.app[data-variant="b"] .chat-form input { background: rgba(255, 255, 255, .06); border-color: transparent; border-radius: 11px; }
.app[data-variant="b"] .send { border-radius: 11px; }
.app[data-variant="b"] .ch-ava { background: var(--accent); }

/* ================= C. «Пульт» / D. «Гибрид» ================= */

.app:is([data-variant="c"], [data-variant="d"]) {
  --bg: #070a0a;
  --panel: #0b0f10;
  --panel-2: #111718;
  --line: #1a2324;
  --text: #dce8e5;
  --dim: #7f938f;
  --faint: #546662;
  --accent: #37e08a;
  --accent-2: #00b86b;
  --accent-soft: rgba(55, 224, 138, .12);
  --live: #ff4d61;
  --radius: 6px;
  --gap: 6px;
  --pad: 8px;
  --chatw: 360px;
  --top: 48px;
  --status: 30px;
}

.app:is([data-variant="c"], [data-variant="d"]) .topbar { padding: 0 12px; gap: 12px; }
.app:is([data-variant="c"], [data-variant="d"]) .brand-txt em { display: none; }
.app:is([data-variant="c"], [data-variant="d"]) .brand-txt b { font-size: 13px; }
.app:is([data-variant="c"], [data-variant="d"]) .logo { width: 20px; height: 20px; border-radius: 5px; }
.app:is([data-variant="c"], [data-variant="d"]) .search { width: 170px; height: 28px; border-radius: 6px; }
.app:is([data-variant="c"], [data-variant="d"]) .seg { border-radius: 7px; }
.app:is([data-variant="c"], [data-variant="d"]) .seg-btn { padding: 4px 9px; border-radius: 4px; font-size: 11.5px; }
.app:is([data-variant="c"], [data-variant="d"]) .chip { border-radius: 5px; font-size: 11.5px; }
.app:is([data-variant="c"], [data-variant="d"]) .statusbar { display: flex; }

.app:is([data-variant="c"], [data-variant="d"]) .tile::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.app:is([data-variant="c"], [data-variant="d"]) .tile:hover::after { box-shadow: inset 0 0 0 1px var(--plat-ring); }
.app:is([data-variant="c"], [data-variant="d"]) .tile.is-selected::after { box-shadow: inset 0 0 0 1px var(--plat); }
.app:is([data-variant="c"], [data-variant="d"]) .t-ava { width: 20px; height: 20px; font-size: 9px; }
.app:is([data-variant="c"], [data-variant="d"]) .t-name { font-size: 11px; }
.app:is([data-variant="c"], [data-variant="d"]) .t-game { font-size: 9.5px; }
.app:is([data-variant="c"], [data-variant="d"]) .t-viewers { font-size: 9.5px; }
.app:is([data-variant="c"], [data-variant="d"]) .t-viewers .ic { width: 9px; height: 9px; }
.app:is([data-variant="c"], [data-variant="d"]) .t-top { padding: 5px 6px; }
.app:is([data-variant="c"], [data-variant="d"]) .badge-plat { font-size: 8px; padding: 1px 4px; }
.app:is([data-variant="c"], [data-variant="d"]) .chat-tabs { display: flex; }
.app:is([data-variant="c"], [data-variant="d"]) .chat-channels { display: none; }
.app:is([data-variant="c"], [data-variant="d"]).tab-channels .chat-channels { display: block; }
.app:is([data-variant="c"], [data-variant="d"]) .ch-name { font-size: 12px; }
.app:is([data-variant="c"], [data-variant="d"]) .msg { font-size: 12px; }
.app:is([data-variant="c"], [data-variant="d"]) .chat-form input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; border-radius: 5px; }
.app:is([data-variant="c"], [data-variant="d"]) .send { border-radius: 5px; }
.app:is([data-variant="c"], [data-variant="d"]) .ch-row { border-radius: 5px; }

/* ---------- D: зелёный + фиолетовый, по правилу 60-30-10 ---------- */
/* 60% — нейтральные поверхности, 30% — зелёный (действия/выбор), 10% — фиолетовый.
   Жёлтый — только избранное, красный — только LIVE. */

.app[data-variant="d"] {
  --accent-2: #b58cff;               /* фиолетовый для текста: 7.7:1 на фоне */
  --violet-deep: #8b6cff;            /* для свечения и градиентов */
  --violet-soft: rgba(181, 140, 255, .14);
  --gold: #ffce5c;                   /* избранное */
}

/* логотип: два квадрата зелёные, два фиолетовые */
.app[data-variant="d"] .logo i:nth-child(2),
.app[data-variant="d"] .logo i:nth-child(3) { background: var(--accent-2); }
.app[data-variant="d"] .logo i:nth-child(2) { opacity: .85; }
.app[data-variant="d"] .logo i:nth-child(3) { opacity: .5; }
.app[data-variant="d"] .logo i:nth-child(4) { opacity: .35; }

/* выбор: тонкое кольцо и свечение в цвет площадки */
.app[data-variant="d"] .tile.is-selected {
  box-shadow: 0 0 30px -8px var(--plat-glow);
}

/* фиолетовый — только точечно */
.app[data-variant="d"] .m-badge.sub { background: rgba(139, 108, 255, .26); color: #dccdff; }
.app[data-variant="d"] .chat-tabs button em { color: var(--accent-2); }
.app[data-variant="d"] .chat-tabs button.on em { color: var(--accent); }

/* избранное — третий, тёплый акцент */
.app[data-variant="d"] .chip[data-filter="fav"].on {
  background: rgba(255, 206, 92, .13);
  color: var(--gold);
}
.app[data-variant="d"] .chip[data-filter="fav"].on em {
  color: var(--gold);
  background: rgba(255, 206, 92, .12);
}

/* ================= театр ================= */

.theater {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  gap: 10px;
  padding: var(--pad);
}

.app[data-mode="theater"] .theater { display: flex; }
.app[data-mode="theater"] .grid { display: none; }
.app[data-mode="theater"] .empty { display: none; }

.theater-main {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.theater-main > .tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  cursor: default;
  box-shadow: none;
}
.theater-main > .tile::after { display: none; }
.theater-main > .tile .t-top { display: none; }
.theater-main > .tile .mono-letter { font-size: 34cqw; opacity: .06; }

/* полоса остальных стримов */
.strip {
  flex: none;
  display: flex;
  gap: 8px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.strip::-webkit-scrollbar { width: 8px; height: 8px; }
.strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.strip .tile { flex: none; border-radius: calc(var(--radius) * .7); }
.strip.is-empty { display: none; }
.strip.has-overflow {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.strip .tile .t-top { padding: 4px 5px; }
.strip .tile .t-meta { display: none; }
.strip .tile .t-ava { width: 18px; height: 18px; font-size: 8px; }
.strip .tile .t-name { font-size: 10.5px; }
.strip .tile .t-game { display: none; }

/* всплывающий предпросмотр карточки полосы: миниатюра увеличивается
   и оживает тем же нативным плеером, что и на главной стене. Карточка
   не ловит мышь, чтобы курсор оставался на миниатюре */
.strip-pop {
  position: absolute;
  z-index: 24;
  width: clamp(220px, 21vw, 340px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  pointer-events: none;
  background: #000;
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .07);
  animation: stripPopIn .18s ease-out;
}
.strip-pop > .tile {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.strip-pop .kick-bar,
.strip-pop .t-fav { display: none; }

@keyframes stripPopIn {
  from { opacity: 0; transform: scale(.96) translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* A — полоса снизу фиксированной высоты, плеер строго 16:9 (размер считает JS) */
.app[data-variant="a"] .theater {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--pad);
}
.app[data-variant="a"] .theater-main { flex: 0 0 auto; }
.app[data-variant="a"] .strip { height: 112px; overflow-y: hidden; }
.app[data-variant="a"] .strip .tile { height: 100%; width: auto; aspect-ratio: 16 / 9; }

/* D — полоса снизу во всю ширину: все миниатюры видны без прокрутки,
   карточки строго 16:9, размеры полосы и карточки задаёт JS через --strip-* */
.app[data-variant="d"] .theater {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--pad);
}
.app[data-variant="d"] .theater-main { flex: 0 0 auto; }
.app[data-variant="d"] .strip {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--strip-rows, 1), var(--strip-card-h, 112px));
  grid-auto-columns: var(--strip-card-w, 160px);
  justify-content: center;
  gap: 6px;
  height: var(--strip-h, 112px);
  overflow: hidden;
}
.app[data-variant="d"] .strip .tile {
  width: auto;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 4px;
}
.app[data-variant="d"] .strip.is-scroll { overflow-x: auto; }
.app[data-variant="d"] .strip.is-empty { display: none; }

/* в полосе офлайн-плашка не нужна: карточка и так приглушена */
.strip .tile .offline-tag { display: none; }
.strip .tile.is-offline .scene { filter: grayscale(1) brightness(.3); }

/* театральный фокус: на экране остаются только плеер и чат,
   а шапка, статусбар и полоса каналов прячутся до повторного нажатия */
.app.focus-mode .topbar,
.app.focus-mode .statusbar,
.app.focus-mode .strip { display: none; }

/* очень узкие карточки: убираем аватар, чтобы имя влезло целиком */
.app[data-variant="d"] .strip[data-size="xs"] .tile .t-ava { display: none; }
.app[data-variant="d"] .strip[data-size="xs"] .tile .t-name { font-size: 9.5px; }
.app[data-variant="d"] .strip[data-size="xs"] .tile .t-top { padding: 3px 4px; }

/* D — очень широкое и низкое окно: полоса уезжает влево,
   чтобы плеер не терял ширину (режим включает JS через data-strip) */
.app[data-variant="d"][data-mode="theater"][data-strip="side"] .theater {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: var(--pad);
}
.app[data-variant="d"][data-mode="theater"][data-strip="side"] .strip {
  display: flex;
  flex-direction: column;
  flex: none;
  order: -1;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 2px;
}
.app[data-variant="d"][data-mode="theater"][data-strip="side"] .strip .tile {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.app[data-variant="d"][data-mode="theater"][data-strip="side"] .strip .tile .t-name { font-size: 10px; }
.app[data-variant="d"][data-mode="theater"][data-strip="side"] .strip .tile .t-ava {
  width: 24px;
  height: 24px;
  font-size: 9px;
}
.app[data-variant="d"][data-mode="theater"][data-strip="side"] .strip.has-overflow {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}

/* полоса скрыта кнопкой в шапке театра — плеер занимает всё место */
.app.strip-hidden .strip { display: none; }

/* B — вертикальная колонка справа */
.app[data-variant="b"] .theater { flex-direction: row; gap: 12px; }
.app[data-variant="b"] .strip {
  width: 200px;
  flex-direction: column;
  overflow-x: hidden;
  padding-right: 2px;
}
.app[data-variant="b"] .strip .tile { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.app[data-variant="b"] .strip .tile:hover { transform: none; }

/* C — вертикальная колонка слева */
.app[data-variant="c"] .theater { flex-direction: row; gap: 8px; }
.app[data-variant="c"] .strip {
  order: -1;
  width: 178px;
  flex-direction: column;
  overflow-x: hidden;
}
.app[data-variant="c"] .strip .tile { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; }
.app[data-variant="c"] .strip .tile .t-name { font-size: 9.5px; }

/* в театре B чат не перекрывает колонку */
.app[data-variant="b"][data-mode="theater"] .chat {
  right: calc(var(--pad) + 200px + 12px + 14px);
  top: 14px;
  bottom: 14px;
}

/* ---------- оверлей фокуса ---------- */

.focus-ui {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

/* панель театра живёт в шапке приложения и ничего не перекрывает */
.theater-bar {
  display: none;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-left: 4px;
}
.app[data-mode="theater"] .theater-bar { display: flex; }
.app[data-mode="theater"] .filters,
.app[data-mode="theater"] .search,
.app[data-mode="theater"] .top-fs { display: none; }

.top-fs,
.top-gear {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--dim);
}
.top-fs:hover,
.top-gear:hover { background: var(--line); color: var(--text); }

.tb-ava {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #0b0b10;
  background: var(--accent);
}
.tb-txt { min-width: 0; }
.tb-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
}
.tb-name b { font-weight: 700; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.tb-meta {
  font-size: 10.5px;
  color: var(--dim);
  margin-top: 1px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.tb-actions .icon-btn { color: var(--dim); }
.tb-actions .icon-btn:hover { background: var(--panel-2); color: var(--text); }
.tb-actions .icon-btn.on,
.tb-actions .icon-btn.on:hover { color: #ffce5c; }
.tb-actions .icon-btn.wide {
  width: auto;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text);
  background: var(--panel-2);
}
.tb-actions .icon-btn.wide:hover { background: var(--line); }
.tb-actions .icon-btn.wide .ic { width: 13px; height: 13px; }

/* счётчик и листание страниц режима «4 стрима» */
.tb-pager {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}
.app.quad-mode .tb-pager { display: flex; }

.tb-page {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--dim);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tb-page-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--dim);
}
.tb-page-btn:hover { background: var(--panel-2); color: var(--text); }
.tb-page-btn .ic { width: 13px; height: 13px; }
.tb-page-btn:disabled { opacity: .35; cursor: default; }
.tb-page-btn:disabled:hover { background: transparent; color: var(--dim); }

/* кнопка режима «4 стрима» включена */
.tb-actions .icon-btn.is-active,
.tb-actions .icon-btn.is-active:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(8, 10, 14, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, .8);
  z-index: 6;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.theater-main:hover .nav-arrow { opacity: 1; }
.nav-arrow:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.nav-arrow.prev { left: 0; border-radius: 0 10px 10px 0; border-left: 0; }
.nav-arrow.next { right: 0; border-radius: 10px 0 0 10px; border-right: 0; }
.nav-arrow .ic { width: 18px; height: 18px; }

/* подпись к стрелке: что именно она делает */
.nav-arrow::after {
  content: attr(data-tip);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(8, 10, 14, .88);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #e9ecf5;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.nav-arrow.prev::after { left: calc(100% + 8px); }
.nav-arrow.next::after { right: calc(100% + 8px); }
.nav-arrow:hover::after { opacity: 1; }

/* один канал — листать нечего, стрелки не нужны */
.focus-ui.is-off { display: none; }

/* ================= режим «4 стрима» ================= */

/* контейнер 2×2 живёт внутри театрального плеера и повторяет его 16:9 */
.quad {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: #000;
}
.app.quad-mode .quad { display: grid; }
/* если живых каналов ровно два — один ряд по центру: обе ячейки 16:9 */
.quad.is-pair {
  top: 25%;
  bottom: 25%;
  grid-template-rows: 1fr;
}
/* три канала: третий — по центру нижнего ряда, без пустого угла */
.quad.is-triple .quad-cell:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 1px);
}
.app.quad-mode .player { display: none; }
.app.quad-mode .strip,
.app.quad-mode .tb-strip { display: none; }

/* в квадро листание живёт в шапке: не перекрываем кнопками плееры */
.app.quad-mode .focus-ui { display: none; }

.quad-cell {
  position: relative;
  overflow: hidden;
  background: #07080c;
  cursor: pointer;
  --plat: var(--accent);
  --plat-ring: rgba(55, 224, 138, .45);
  --plat-glow: rgba(55, 224, 138, .35);
}
.quad-cell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* рамка выбранного канала: рисуем поверх iframe */
.quad-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .15s ease;
}
.quad-cell.is-selected::after { box-shadow: inset 0 0 0 1px var(--plat); }

.quad-off {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* подпись канала: клик выбирает его для чата */
.quad-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 4;
  max-width: calc(100% - 16px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(8, 10, 14, .62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.quad-tag:hover { background: rgba(8, 10, 14, .82); border-color: rgba(255, 255, 255, .3); }
.quad-cell.is-selected .quad-tag { border-color: var(--plat); }
.quad-tag b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.quad-tag .dot { width: 6px; height: 6px; flex: none; }

.quad-ava {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ac);
  color: #06120c;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

/* ================= превью Twitch в сетке и квадро =================
   Официальный iframe Twitch в плитке не автозапускается и рисует поверх
   кадра свою обвязку: заголовок, подписку, логотип и большую кнопку,
   которую к тому же перекрывал градиент. Поэтому превью Twitch — это
   свежий кадр с CDN и наша кнопка «смотреть»: чисто и кликабельно. */

.tw-prev {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a0d14;
}

.tile-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity .3s ease, transform .6s ease;
  pointer-events: none;
  user-select: none;
}
.tw-prev.has-thumb .tile-thumb { opacity: 1; }

/* пока живой плеер не пошёл, iframe не должен перехватывать клики:
   клик по кадру выбирает стрим, а не открывает чужую паузу */
.tw-prev:not(.is-playing) .tw-embed { pointer-events: none; }
.tw-prev.is-playing .tile-thumb { opacity: 0; }
.tw-prev.is-playing .prev-play { opacity: 0; visibility: hidden; }

.tile:hover .tile-thumb,
.quad-cell:hover .tile-thumb { transform: scale(1.035); }

/* ================= статичный кадр плитки =================
   В покое на стене нет ни одного плеера: виден только настоящий кадр эфира.
   При наведении под ним запускается видео, кадр плавно уступает ему место,
   а сам кадр и видео чуть увеличиваются — плитка «оживает». */

.grid-still {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #0a0d14;
  opacity: 1;
  transition: opacity .32s ease;
  pointer-events: none;
}

.tile.is-video .grid-still { opacity: 0; }

/* при наведении растёт вся плитка целиком, а не только кадр внутри неё:
   соседние ячейки не сдвигаются (transform), а плитка выходит поверх них */
.grid .tile {
  transform-origin: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.grid .tile:hover,
.grid .tile:focus-within {
  transform: scale(1.04);
  z-index: 6;
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, .95);
}

/* перетаскивание плиток: тащим за ник, под курсором летит «призрак»,
   а плитка-получатель подсвечивается целиком — видно, с кем поменяемся */
.grid .tile .t-name { cursor: grab; -webkit-user-select: none; user-select: none; }
.grid .tile.is-dragging { opacity: .3; }
.grid .tile.is-dragging .t-name { cursor: grabbing; }
.grid .tile.is-dragging .grid-still { opacity: 1; }

body.is-tile-drag,
body.is-tile-drag * { cursor: grabbing !important; user-select: none; }

/* во время переноса плееры не должны перехватывать курсор (iframe/видео) */
body.is-tile-drag .grid .kick-player,
body.is-tile-drag .grid .kick-player * { pointer-events: none; }

.is-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .9), 0 0 0 1px var(--plat, var(--accent));
  will-change: transform;
  transition: none;
}
.is-drag-ghost .kick-player,
.is-drag-ghost video { display: none; }

/* вся плитка, на которую сейчас упадёт канал */
.grid .tile.is-drop-target::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  border-radius: inherit;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 26px -4px var(--accent);
  pointer-events: none;
}

/* лёгкий зум живого видео под курсором — в такт увеличенной плитке */
.tile .kick-video { transition: transform .55s ease; }
.tile:hover .kick-video { transform: scale(1.02); }

.prev-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  /* размер привязан к высоте плитки: на стене из 16 стримов кнопка
     не должна занимать треть кадра, а в крупной плитке остаётся заметной */
  width: clamp(38px, 22cqh, 56px);
  height: clamp(38px, 22cqh, 56px);
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--plat-ring, rgba(255, 255, 255, .35));
  background: rgba(7, 9, 14, .58);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease, opacity .2s ease;
}
.prev-play .ic {
  width: clamp(16px, 9cqh, 22px);
  height: clamp(16px, 9cqh, 22px);
  margin-left: 3px;
  fill: currentColor;
  stroke: none;
}
.prev-play:hover,
.prev-play:focus-visible {
  background: var(--plat, var(--accent));
  border-color: transparent;
  color: #08060f;
  outline: none;
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 26px -6px var(--plat-glow, rgba(0, 0, 0, .5));
}

.quad-cell .prev-play { width: 48px; height: 48px; }
.quad-cell .prev-play .ic { width: 19px; height: 19px; }

/* в полосе театра кнопка не нужна: клик по карточке и так меняет канал */
.tile.is-small .prev-play { display: none; }

/* ================= нативный плеер Kick =================
   HLS-плеер с всегда видимой громкостью: официальный embed Kick
   показывает ползунок только при наведении на иконку динамика. */

.kick-player {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* в театре у плеера тонкая рамка цвета площадки: фиолетовая у Twitch,
   зелёная у Kick — видно, чей это эфир, и совпадает с рамкой выбранной плитки */
#player .kick-player {
  box-shadow: inset 0 0 0 1px var(--plat-line, rgba(255, 255, 255, .08));
}

.kick-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.kick-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--faint);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.kick-state:empty { display: none; }

/* рекламная пауза Twitch: её сегменты прокси вырезает, поэтому вместо
   застывшего кадра показываем свежий кадр канала с подписью */
.kick-adframe {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  /* клики по кадру уходят на video: панель, пауза и двойной клик
     на полный экран продолжают работать во время рекламы */
  pointer-events: none;
}

.kick-adframe[hidden] { display: none; }

.kick-adframe img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kick-adnote {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(8, 12, 16, .74);
  color: #c9d2e2;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}

/* крупный отсчёт до конца рекламной паузы: по центру кадра, стеклянная
   карточка с секундами и тонкой полосой цвета площадки */
.kick-adcount {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  min-width: 170px;
  padding: 15px 28px 13px;
  border-radius: 16px;
  background: rgba(10, 13, 20, .56);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  text-align: center;
  pointer-events: none;
}

.kick-adcount[hidden] { display: none; }

.kick-adlabel {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--plat, var(--accent));
}

.kick-adtime {
  margin-top: 5px;
  font-size: 46px;
  line-height: 1;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: #f2f5ff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

.kick-adsub {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(226, 232, 244, .6);
}

.kick-adbar {
  display: block;
  width: 118px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}

.kick-adbar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--plat, var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s linear;
}

.kick-player.is-compact .kick-adnote { display: none; }
.kick-player.is-compact .kick-adcount { display: none; }

.kick-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  background: linear-gradient(0deg, rgba(3, 5, 8, .82), rgba(3, 5, 8, 0));
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.kick-player.is-ui .kick-bar,
.kick-player:focus-within .kick-bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.kick-player:not(.is-ui) .kick-menu { display: none; }

/* фолбэк на официальный iframe Kick: звуком и качеством управляет сам iframe,
   поэтому наши кнопки для них скрываем — оставляем только полный экран и ссылку */
.kick-player.is-fallback [data-act="play"],
.kick-player.is-fallback [data-act="mute"],
.kick-player.is-fallback .kick-vol,
.kick-player.is-fallback .kick-vol-val,
.kick-player.is-fallback [data-act="quality"],
.kick-player.is-fallback [data-act="pip"] { display: none; }

.kick-btn {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.kick-btn:hover { background: rgba(255, 255, 255, .14); color: var(--plat, var(--accent)); }
.kick-btn .ic { width: 15px; height: 15px; }

.kick-vol {
  width: 100px;
  max-width: 34%;
  height: 4px;
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  accent-color: var(--plat, var(--accent));
  cursor: pointer;
}

.kick-vol-val {
  min-width: 30px;
  flex: none;
  color: rgba(255, 255, 255, .78);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.kick-player.is-compact .kick-bar { padding: 4px 6px; gap: 4px; }
.kick-player.is-compact .kick-btn { width: 22px; height: 22px; }
.kick-player.is-compact .kick-btn .ic { width: 13px; height: 13px; }
.kick-player.is-compact .kick-vol { width: 74px; max-width: 42%; }
.kick-player.is-compact .kick-vol-val { min-width: 26px; font-size: 9px; }
/* в 2×2 кнопка театра разворачивает конкретный плеер, поэтому она видна */
.kick-player.is-compact [data-act="focus"] { display: none; }

/* сетка: та же полупрозрачная панель, что и в театре, только компактнее.
   Полный экран в плитке не нужен — он остаётся по двойному клику */
.kick-player.is-grid .kick-bar {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 7px 6px;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(0deg, rgba(3, 5, 8, .8), rgba(3, 5, 8, 0));
  box-shadow: none;
}
/* в плитке качество не выбирают: поток и так самый лёгкий (160p) */
.kick-player.is-grid .kick-menu { display: none; }
.kick-player.is-grid .kick-btn { width: 24px; height: 24px; }
.kick-player.is-grid .kick-btn .ic { width: 14px; height: 14px; }
.kick-player.is-grid .kick-vol { width: 56px; max-width: 20%; }
.kick-player.is-grid .kick-vol-val { display: none; }
.kick-player.is-grid [data-act="quality"],
.kick-player.is-grid [data-act="focus"],
.kick-player.is-grid [data-act="pip"],
.kick-player.is-grid [data-act="fullscreen"],
.kick-player.is-grid [data-act="open"] { display: none; }

/* правая группа кнопок прижата к краю */
.kick-spacer { flex: 1 1 auto; min-width: 0; }

.kick-quality {
  width: auto;
  min-width: 34px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, .18);
}

.kick-quality:disabled { opacity: .35; cursor: default; }
.kick-quality:disabled:hover { background: transparent; color: #fff; }

.kick-q-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}

/* текущий уровень рядом с AUTO: режим и реальное качество — разное */
.kick-q-num {
  margin-left: 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: .72;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.kick-player.is-compact .kick-q-num,
.kick-player.is-grid .kick-q-num { display: none; }

.kick-btn.is-on { background: var(--plat-soft, rgba(90, 240, 160, .22)); color: var(--plat, var(--accent)); }

/* меню качества */
.kick-menu {
  position: absolute;
  right: 9px;
  bottom: 40px;
  z-index: 8;
  min-width: 128px;
  max-height: 214px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(8, 12, 16, .94);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

.kick-menu[hidden] { display: none; }

.kick-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, .86);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.kick-menu-item:hover { background: rgba(255, 255, 255, .1); }
.kick-menu-item.is-on { color: var(--plat, var(--accent)); background: var(--plat-soft, rgba(90, 240, 160, .14)); }
.kick-menu-item .q-extra { color: var(--faint); font-size: 9px; font-variant-numeric: tabular-nums; }

.kick-player.is-compact .kick-menu { right: 6px; bottom: 32px; min-width: 112px; max-height: 176px; }
.kick-player.is-compact .kick-menu-item { padding: 5px 7px; font-size: 10px; }

/* полный экран именно этого плеера */
.kick-player:fullscreen,
.kick-player:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
}

.kick-player:fullscreen .kick-video,
.kick-player:-webkit-full-screen .kick-video { object-fit: contain; }

.kick-player:fullscreen .kick-bar,
.kick-player:-webkit-full-screen .kick-bar { padding: 10px 14px; gap: 8px; }

.kick-player:fullscreen .kick-btn,
.kick-player:-webkit-full-screen .kick-btn { width: 34px; height: 34px; }

.kick-player:fullscreen .kick-btn .ic,
.kick-player:-webkit-full-screen .kick-btn .ic { width: 19px; height: 19px; }

.kick-player:fullscreen .kick-menu,
.kick-player:-webkit-full-screen .kick-menu { right: 14px; bottom: 56px; }

/* ================= адаптив ================= */

@media (max-width: 1280px) {
  .search { width: 150px; }
  .app[data-variant] { --chatw: 330px; }
}

@media (max-width: 1080px) {
  .filters .chip em { display: none; }
  .live-pill span { display: none; }
  .brand-txt em { display: none; }
  .search { width: 120px; }
}

@media (max-width: 900px) {
  .search, .live-pill { display: none; }
  .filters { display: none; }
  .app[data-variant] { --chatw: min(420px, 100%); }
  .app[data-variant="a"] .chat,
  .app[data-variant="c"] .chat {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: var(--chatw);
    box-shadow: -30px 0 60px rgba(0, 0, 0, .5);
  }
  .app[data-variant="b"][data-mode="theater"] .chat { right: 12px; }
  .app[data-variant="b"] .strip { display: none; }
}

@media (max-width: 640px) {
  .seg-btn span { display: none; }
  .avatar { display: none; }
  .app[data-variant] { --pad: 8px; --gap: 6px; }
  .tb-meta { display: none; }
  .tb-actions .icon-btn.wide span { display: none; }
  .nav-arrow { display: none; }
}

/* ================= настройки каналов ================= */

.modal {
  --set-green: #37e08a;
  --set-green-deep: #00b86b;
  --set-violet: #a970ff;
  --set-violet-deep: #7c4dff;
  --set-bg: #0a0e0f;
  --set-line: rgba(255, 255, 255, .07);
  --set-text: #dce8e5;
  --set-dim: #7f938f;
  --set-faint: #546662;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  padding: 24px;
}
.modal.open { display: flex; align-items: center; justify-content: center; }

.modal-back {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(55, 224, 138, .06), transparent 70%),
    rgba(3, 6, 8, .78);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.modal-card {
  position: relative;
  width: min(900px, 100%);
  max-height: min(90vh, 820px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(55, 224, 138, .10), transparent 46%),
    radial-gradient(120% 90% at 100% 0%, rgba(169, 112, 255, .12), transparent 46%),
    var(--set-bg);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  box-shadow: 0 40px 110px rgba(0, 0, 0, .72), 0 0 0 1px rgba(55, 224, 138, .04) inset;
  color: var(--set-text);
  overflow: hidden;
}
.modal-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--set-green), var(--set-violet) 58%, transparent);
  opacity: .85;
  pointer-events: none;
}

.set-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 16px 14px 18px;
  border-bottom: 1px solid var(--set-line);
  background: rgba(255, 255, 255, .012);
}
.set-logo {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 0 22px -6px rgba(169, 112, 255, .45);
}
.set-logo i { border-radius: 2px; background: var(--set-green); }
.set-logo i:nth-child(2),
.set-logo i:nth-child(3) { background: var(--set-violet); }

.set-head-txt { flex: 1; min-width: 0; }
.set-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.set-head p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--set-dim); }
.set-head .icon-btn { color: var(--set-dim); flex: none; }
.set-head .icon-btn:hover { background: rgba(255, 255, 255, .06); color: var(--set-text); }

.set-legend { display: flex; gap: 6px; flex: none; }
.set-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
  color: var(--set-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
}
.set-leg i { width: 6px; height: 6px; border-radius: 50%; background: var(--set-green); box-shadow: 0 0 8px rgba(55, 224, 138, .75); }
.set-leg.is-twitch i { background: var(--set-violet); box-shadow: 0 0 8px rgba(169, 112, 255, .75); }

/* ---------- NASRAL ---------- */

.set-nasral {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--set-line);
  background:
    radial-gradient(80% 150% at 0% 50%, rgba(55, 224, 138, .08), transparent 62%),
    rgba(0, 0, 0, .16);
}
.set-nasral-info { flex: 1; min-width: 0; }
.set-nasral-state { display: flex; align-items: center; gap: 8px; min-width: 0; }
.set-nasral-state b {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-nasral-tag {
  flex: none;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .09em;
  color: #06120c;
  background: linear-gradient(90deg, var(--set-green), var(--set-violet));
}
.set-nasral-info p {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--set-dim);
}
.set-nasral-actions { display: flex; gap: 8px; flex: none; }
.set-nasral .btn-accent { padding: 7px 14px; }
.set-nasral .btn-accent .ic { width: 13px; height: 13px; }
.set-nasral .btn-ghost { padding: 7px 12px; }
.set-nasral.is-on {
  background:
    radial-gradient(80% 150% at 0% 50%, rgba(55, 224, 138, .13), transparent 62%),
    radial-gradient(80% 150% at 100% 50%, rgba(169, 112, 255, .1), transparent 62%),
    rgba(0, 0, 0, .2);
}
.set-nasral.is-on .set-nasral-state b { color: var(--set-green); }
.set-nasral .btn-ghost:disabled { opacity: .35; cursor: default; }
.set-nasral .btn-ghost:disabled:hover {
  border-color: rgba(255, 255, 255, .09);
  color: var(--set-text);
}

@media (max-width: 640px) {
  .set-nasral { flex-wrap: wrap; gap: 10px; }
  .set-nasral-actions { width: 100%; }
  .set-nasral-actions .btn-accent,
  .set-nasral-actions .btn-ghost { flex: 1; justify-content: center; }
}

.set-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  padding: 14px 16px;
}
.set-list::-webkit-scrollbar { width: 8px; }
.set-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); border-radius: 999px; }
.set-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .16); }

.set-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 9px 8px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .018);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.set-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background .16s ease;
}
.set-row:hover { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .12); }
.set-row.is-filled {
  background: linear-gradient(180deg, rgba(55, 224, 138, .06), rgba(255, 255, 255, .012));
  border-color: rgba(55, 224, 138, .22);
}
.set-row.is-filled::before { background: var(--set-green); }
.set-row.is-filled.is-twitch {
  background: linear-gradient(180deg, rgba(169, 112, 255, .075), rgba(255, 255, 255, .012));
  border-color: rgba(169, 112, 255, .28);
}
.set-row.is-filled.is-twitch::before { background: var(--set-violet); }
.set-row:focus-within { border-color: rgba(55, 224, 138, .4); box-shadow: 0 0 0 2px rgba(55, 224, 138, .08); }
.set-row.is-twitch:focus-within { border-color: rgba(169, 112, 255, .45); box-shadow: 0 0 0 2px rgba(169, 112, 255, .1); }

.set-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.set-num {
  flex: none;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
  color: var(--set-faint);
  font-variant-numeric: tabular-nums;
}
.set-row.is-filled .set-num { color: var(--set-green); }
.set-row.is-filled.is-twitch .set-num { color: var(--set-violet); }

.set-plat {
  margin-left: auto;
  flex: none;
  display: flex;
  gap: 1px;
  padding: 2px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .055);
}
.set-plat button {
  border: 0;
  background: transparent;
  color: var(--set-faint);
  font-size: 9.5px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 5px;
  transition: color .12s ease, background .12s ease;
}
.set-plat button:hover { color: var(--set-text); }
.set-plat button.on[data-plat="kick"] { background: var(--set-green); color: #06120c; }
.set-plat button.on[data-plat="twitch"] { background: var(--set-violet); color: #0c0616; }

.set-clear {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--set-faint);
  transition: background .12s ease, color .12s ease;
}
.set-clear .ic { width: 11px; height: 11px; }
.set-clear:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: var(--set-text); }
.set-clear:disabled { opacity: .22; cursor: default; }

.set-input {
  width: 100%;
  height: 30px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .25);
  color: var(--set-text);
  font-size: 11.5px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.set-input::placeholder { color: var(--set-faint); }
.set-input:hover { background: rgba(0, 0, 0, .32); }
.set-input:focus { border-color: var(--set-green); box-shadow: 0 0 0 2px rgba(55, 224, 138, .12); }
.set-row.is-twitch .set-input:focus { border-color: var(--set-violet); box-shadow: 0 0 0 2px rgba(169, 112, 255, .14); }

.set-meta {
  min-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  line-height: 1.25;
  color: var(--set-faint);
}
.set-row.is-filled.is-kick .set-meta { color: rgba(55, 224, 138, .88); }
.set-row.is-filled.is-twitch .set-meta { color: rgba(169, 112, 255, .9); }

.set-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-top: 1px solid var(--set-line);
  background: rgba(0, 0, 0, .22);
}
.set-progress { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.set-count { font-size: 11px; color: var(--set-dim); }
.set-bar {
  display: block;
  width: 170px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.set-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--set-green), var(--set-violet));
  transition: width .25s ease;
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 17px;
  border-radius: 8px;
  border: 1px solid rgba(55, 224, 138, .5);
  background: linear-gradient(180deg, #46ef9b, #2fd37f);
  color: #04120a;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 4px 16px -4px rgba(55, 224, 138, .45);
  transition: filter .12s ease, transform .12s ease;
}
.btn-accent:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-accent:active { transform: translateY(0); }

.modal .btn-ghost {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .09);
  color: var(--set-text);
}
.modal .btn-ghost:hover { border-color: var(--set-green); color: var(--set-green); }
#setReset:hover { border-color: var(--set-violet); color: var(--set-violet); }

@media (max-width: 820px) {
  .set-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .modal { padding: 10px; }
  .modal-card { max-height: 92vh; border-radius: 14px; }
  .set-head { padding: 14px 12px 12px; gap: 10px; }
  .set-head p { display: none; }
  .set-legend { display: none; }
  .set-logo { width: 32px; height: 32px; }
  .set-list { grid-template-columns: 1fr; padding: 10px 12px; }
  .set-plat button { padding: 3px 8px; font-size: 10px; }
  .set-foot { flex-wrap: wrap; padding: 12px; }
  .set-progress { width: 100%; }
  .set-bar { width: 100%; }
  .set-foot .spacer { display: none; }
  .set-foot .btn-ghost, .set-foot .btn-accent { flex: 1; justify-content: center; }
}

/* ---------- импорт каналов ---------- */

.set-import[hidden],
.set-list[hidden] { display: none !important; }

.set-import {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.set-import::-webkit-scrollbar { width: 8px; }
.set-import::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); border-radius: 999px; }

.set-import-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.set-import-txt { flex: 1; min-width: 0; }
.set-import-txt b { display: block; font-size: 13px; font-weight: 700; }
.set-import-txt p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--set-dim); }

.set-import-text {
  width: 100%;
  min-height: 190px;
  flex: 1;
  resize: vertical;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .26);
  color: var(--set-text);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.set-import-text::placeholder { color: var(--set-faint); }
.set-import-text:focus { border-color: var(--set-green); box-shadow: 0 0 0 2px rgba(55, 224, 138, .12); }

.set-import-opts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.set-import-plat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--set-dim);
}
.set-import-plat .set-plat { margin-left: 0; }
.set-import-replace {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--set-dim);
  cursor: pointer;
  user-select: none;
}
.set-import-replace input {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  flex: none;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  background: rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.set-import-replace input::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 2px solid #04120a;
  border-bottom: 2px solid #04120a;
  transform: rotate(-45deg) scale(0);
  transition: transform .12s ease;
}
.set-import-replace input:hover { border-color: rgba(55, 224, 138, .45); }
.set-import-replace input:checked {
  border-color: var(--set-green);
  background: var(--set-green);
}
.set-import-replace input:checked::after { transform: rotate(-45deg) scale(1); }
.set-import-hint {
  flex: 1;
  min-width: 140px;
  font-size: 11px;
  color: var(--set-dim);
}
.set-import-hint.is-error { color: #ff8a9a; }
.set-import-hint.is-ok { color: var(--set-green); }

.set-import-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

@media (max-width: 700px) {
  .set-import-head { flex-direction: column; }
  .set-import-actions .btn-ghost, .set-import-actions .btn-accent { flex: 1; justify-content: center; }
  .set-import-actions .spacer { display: none; }
}