/* ==== styles/site.css ==== */
/* Сайт экранного чата: конфигуратор /chat/, настройка виджета /chat/polls/,
 * документация /chat/api/. Язык — как у лендинга и сайта PLUS: тёмные
 * нейтральные поверхности, лаванда скупо, Montserrat.
 *
 * Раскладка «инструмент»: слева узкая панель настроек (.rail), справа —
 * большой живой предпросмотр (.stage) и под ним полоса со ссылкой (.linkbar).
 * Никаких карточек ради карточек: иерархия — типографикой и воздухом.
 * Классы и id, которые ставят скрипты, не переименовывать (задание §3). */
:root {
  --bg: #0a0a0d;
  --surf: #101015;
  --surf2: #16161d;
  --well: #0c0c10;
  --line: rgba(255, 255, 255, 0.065);
  --line2: rgba(255, 255, 255, 0.12);
  --line3: rgba(255, 255, 255, 0.22);
  --text: #ecebf2;
  --muted: #9d9daa;
  --dim: #8a8a97;
  --faint: #83838f;
  --acc: #b8a7f0;
  --acc-deep: #9f73e6;
  --acc-light: #c9aaf9;
  --acc-ink: #0a0a0d;
  --ok: #4ec86f;
  --warn: #e2a03f;
  --bad: #e35d6a;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --mono: ui-monospace, Consolas, monospace;
  --rail: 400px;
  --pad: 28px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 Montserrat, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--acc); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--acc-light); }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
b, strong { font-weight: 700; }
code { font-family: var(--mono); font-size: 0.9em; }
::selection { background: rgba(184, 167, 240, 0.3); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }
.noscript { padding: 16px var(--pad); }

/* ---- каркас ---- */
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); height: 100vh; }
.rail {
  display: flex; flex-direction: column; min-width: 0; overflow-y: auto;
  padding: 22px var(--pad) 22px; background: var(--surf); border-right: 1px solid var(--line);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.rail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
/* Логотип — как на лендинге и в кабинете PLUS (plus/index.html: .brand). */
.brand {
  display: flex; align-items: center; gap: 8px; flex: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--text);
  opacity: 0.9; transition: opacity 0.15s var(--ease);
}
.brand:hover { color: var(--text); opacity: 1; }
.brand-logo { display: block; width: 20px; height: 20px; object-fit: contain; }
.rail-nav { display: flex; align-items: center; gap: 18px; font-size: 13px; font-weight: 600; }
.rail-nav a { color: var(--muted); }
.rail-nav a:hover { color: var(--text); }
/* Переход к виджету опросов и прогнозов — заметная карточка, а не ссылка. */
.rail-nav .nav-widget {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(184, 167, 240, 0.16), rgba(159, 115, 230, 0.06));
  border: 1px solid rgba(184, 167, 240, 0.34);
  color: var(--text);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.rail-nav .nav-widget:hover { color: var(--text); border-color: var(--acc); background-color: rgba(184, 167, 240, 0.08); }
.nav-widget-ic {
  flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 8px;
  background: var(--acc); fill: none; stroke: var(--acc-ink); stroke-width: 2.6; stroke-linecap: round;
}
.nav-widget-t { display: flex; flex-direction: column; line-height: 1.2; }
.nav-widget-t b { font-size: 13px; font-weight: 700; color: var(--text); }
.nav-widget-t small { font-size: 11px; font-weight: 500; color: var(--muted); }
.nav-widget-go {
  flex: none; width: 14px; height: 14px; fill: none; stroke: var(--acc); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease);
}
.rail-nav .nav-widget:hover .nav-widget-go { transform: translateX(3px); }
/* Язык страницы и виджета (CP.page, 25.09) — как .seg «Короткая/Длинная»,
 * только компактнее. Виден сразу: тому, кто не читает по-русски, поле «Язык»
 * во вкладке «Вид» не найти. */
.lang-switch { display: flex; padding: 2px; gap: 2px; border-radius: 8px; background: var(--well); border: 1px solid var(--line); }
.lang-switch button {
  height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--dim);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] { background: var(--surf2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.lang-switch button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.intro { margin: 44px 0 26px; }
.intro h1 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.intro p { margin-top: 6px; color: var(--dim); font-size: 13.5px; text-wrap: pretty; }

.rail-foot {
  margin-top: auto; padding-top: 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  font-size: 12px; color: var(--faint);
}

/* ---- канал: главное поле, как заголовок ---- */
#channel-box > h2, #channel-box .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#channel-box .fields { display: block; }
#channel-box .field, .pp-fields > .field:first-child { display: block; padding: 0; }
.ch-row {
  display: flex; align-items: baseline; gap: 1px;
  border-bottom: 1px solid var(--line2); transition: border-color 0.2s var(--ease);
}
.ch-row:hover { border-bottom-color: var(--line3); }
.ch-row:focus-within { border-bottom-color: var(--acc); }
.ch-prefix { flex: none; font-size: 22px; font-weight: 500; color: var(--faint); letter-spacing: -0.01em; }
.ch-row input.channel-input {
  flex: 1; min-width: 0; width: auto; height: auto; line-height: 1.3; padding: 10px 0 12px; margin: 0;
  background: transparent; border: 0; border-radius: 0;
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
}
.ch-row input.channel-input:hover, .ch-row input.channel-input:focus { background: transparent; border: 0; outline: none; }
.ch-row input.channel-input::placeholder { color: rgba(236, 235, 242, 0.28); font-weight: 600; }
#channel-box .warn-line, .pp-fields > .field .warn-line { margin-top: 10px; }
#channel-box .field > .hint { display: none; }
#channel-box .field[data-key="channel"] > div:first-of-type { display: flex; flex-wrap: wrap; align-items: stretch; }
#channel-box .field[data-key="channel"] > div:first-of-type::before {
  content: "twitch.tv/"; flex: none; padding: 10px 1px 12px 0; line-height: 1.3;
  font-size: 22px; font-weight: 500; color: var(--faint); letter-spacing: -0.01em;
  border-bottom: 1px solid var(--line2); transition: border-color 0.2s var(--ease);
}
#channel-box input.channel-input {
  flex: 1; min-width: 0; width: auto; height: auto; line-height: 1.3; padding: 10px 0 12px; margin: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0;
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
  transition: border-color 0.2s var(--ease);
}
#channel-box input.channel-input:hover { background: transparent; border-color: var(--line3); }
#channel-box input.channel-input::placeholder { color: rgba(236, 235, 242, 0.28); font-weight: 600; }
#channel-box .field[data-key="channel"] > div:first-of-type:focus-within::before, #channel-box input.channel-input:focus { border-bottom-color: var(--acc); }
#channel-box .field > div > .warn-line { flex-basis: 100%; }

/* ---- ещё каналы (26.09): небольшие блоки под основным полем ----
 * Тот же язык, что у основного поля (приставка twitch.tv/, черта снизу), но
 * мельче: главное — основной канал. */
.ch-extra-item { margin-top: 12px; }
.ch-extra-row {
  display: flex; align-items: center; gap: 1px;
  border-bottom: 1px solid var(--line2); transition: border-color 0.2s var(--ease);
}
.ch-extra-row:hover { border-bottom-color: var(--line3); }
.ch-extra-row:focus-within { border-bottom-color: var(--acc); }
.ch-extra-prefix { flex: none; font-size: 15px; font-weight: 500; color: var(--faint); letter-spacing: -0.01em; }
.ch-extra-row input.ch-extra-input {
  flex: 1; min-width: 0; width: auto; height: auto; line-height: 1.3; padding: 8px 0 9px; margin: 0;
  background: transparent; border: 0; border-radius: 0; outline: none;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
}
.ch-extra-row input.ch-extra-input::placeholder { color: rgba(236, 235, 242, 0.28); font-weight: 600; }
.ch-del {
  flex: none; width: 28px; height: 28px; margin-left: 6px; padding: 0; border: 0; border-radius: 7px;
  background: none; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; color: var(--dim);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.ch-del:hover { color: var(--text); background: var(--surf2); }
#channel-box .ch-extra-item .warn-line { margin-top: 6px; }
.ch-extra-note { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
/* Строка под каналом: «Перенести настройки…» слева, «Добавить ещё каналы»
 * справа. Кнопка стоит поверх строки, а место под неё оставлено у левой
 * надписи: в узкой колонке (400 px и телефон) обе не помещаются, и левая
 * переносится на вторую строчку, а раскрытый перенос идёт на всю ширину. */
.ch-tools { position: relative; margin-top: 14px; }
.ch-tools > .import { margin-top: 0; }
.ch-tools > .import > summary { max-width: calc(100% - 172px); }
.ch-add { position: absolute; top: 0; right: 0; }
/* Телефон и планшет: у каждого блока колонки свои поля по краям (.rail > *),
 * а кнопка отсчитывается от края блока, не от его содержимого. */
@media (max-width: 900px) { .ch-add { right: var(--pad); } }

.text-btn {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 4px;
  transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease);
}
.text-btn:hover { color: var(--text); text-decoration-color: var(--muted); }
.import { margin-top: 14px; }
.import > summary { display: inline-block; list-style: none; }
.import > summary::-webkit-details-marker { display: none; }
.import[open] > summary { margin-bottom: 12px; }
.import > .hint { margin-bottom: 10px; }
.import-result { margin-top: 10px; }
.import-result { padding: 12px 14px; border-radius: 10px; background: var(--well); border: 1px solid var(--line); font-size: 13px; }
.import-result ul { margin: 6px 0 0; padding-left: 18px; }
.import-result li { margin: 2px 0; }

/* ---- разделы и строки настроек ---- */
.sect { margin-top: 40px; }
.sect > h2, .more-head > h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; color: var(--dim); letter-spacing: 0.01em; margin-bottom: 8px;
}
.sect > h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.fields { display: flex; flex-direction: column; }
.field {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 176px); align-items: center;
  column-gap: 16px; padding: 7px 0; min-width: 0;
}
.field > .field-label { grid-column: 1; }
.field > :not(.field-label):not(.hint) { grid-column: 2; min-width: 0; }
.field-wide, .field:has(> .checks), .field:has(> textarea) { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
/* Настройка виджета: подписи короткие, а «Опросы и прогнозы» в списке длинное. */
.pp-fields .field { grid-template-columns: minmax(0, 1fr) minmax(0, 196px); }
.field-wide > * { grid-column: 1 !important; }
.field-label { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.35; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.hint { color: var(--dim); font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }
.field > .hint { grid-column: 1 / -1; display: none; padding-top: 6px; }
.field:focus-within > .hint, .field-wide > .hint { display: block; }
.heavy { font-size: 11px; font-weight: 600; color: var(--warn); white-space: nowrap; }

/* ---- слайдер (Плавность) ----
 * Своя дорожка: заливка до ползунка по --p (ставит 10_form.js), ползунок —
 * акцентный кружок; одинаково в Chrome и Firefox. Рядом — значение. */
.slider-box { display: grid; gap: 4px; }
.slider-row { display: flex; align-items: center; gap: 14px; }
.slider-val {
  min-width: 2ch; text-align: right; font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--acc);
}
.slider-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); padding-right: calc(2ch + 14px); }
input.slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
input.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--acc) 0 var(--p, 50%), var(--line2) var(--p, 50%) 100%);
}
input.slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line2); }
input.slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--acc); }
input.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--acc); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--acc);
  transition: transform 0.15s var(--ease);
}
input.slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--acc); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--acc);
}
input.slider:hover::-webkit-slider-thumb { transform: scale(1.12); }
input.slider:focus-visible { outline: none; }
input.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--acc), 0 0 0 5px rgba(184, 167, 240, 0.28); }
input.slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--acc), 0 0 0 5px rgba(184, 167, 240, 0.28); }
/* Поле неактивно, пока его «хозяин» включён (схема: offIf). */
.field-off { opacity: 0.45; }
.field-off .bool-label, .field-off .switch { cursor: default; }

input[type=text], input[type=url], input[type=number], select, textarea {
  width: 100%; max-width: 100%; height: 36px;
  background: var(--surf2); color: var(--text);
  border: 1px solid transparent; border-radius: 8px;
  padding: 0 11px; font: inherit; font-size: 13.5px; font-weight: 600;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
textarea { height: auto; padding: 9px 11px; font-weight: 500; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--faint); font-weight: 500; }
input[type=text]:hover, input[type=url]:hover, input[type=number]:hover, select:hover, textarea:hover { border-color: var(--line2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acc); }
select {
  -webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239d9daa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.2 8 9.8l3.5-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
}
select option { background: var(--surf2); color: var(--text); }
input[type=number] { font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.font-note { font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }
.color-row { display: flex; align-items: center; gap: 10px; }
input[type=color] { width: 36px; height: 30px; padding: 2px; cursor: pointer; border: 1px solid var(--line2); border-radius: 8px; background: var(--surf2); }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.color-hex { color: var(--dim); font-family: var(--mono); font-size: 12px; }
.unit-input { position: relative; display: block; }
.unit-input input { padding-right: 42px; }
.unit { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--dim); font-size: 12.5px; pointer-events: none; }

/* Переключатель: подпись слева, тумблер справа. */
.field-bool { display: block; }
/* Строка переключателя — на всю ширину (иначе общее правило выше
 * выталкивает её во вторую колонку, и подпись сжимается у тумблера). */
.field.field-bool > .bool-label { grid-column: 1 / -1; }
.bool-label {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap;
  cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1.35; min-height: 36px;
}
.bool-label > span:not(.heavy) { flex: 1; min-width: 0; order: 1; }
.bool-label > .heavy { order: 2; flex: none; }
.bool-label > .switch { order: 3; }
.bool-small { min-height: 0; font-size: 13px; color: var(--muted); gap: 10px; }
.bool-small > span:not(.heavy) { flex: none; order: 0; }
.switch {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 34px; height: 20px; margin: 0; border-radius: 10px;
  background: #2a2a33; position: relative; cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: #cfcfd8; transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.switch:hover { background: #34343e; }
.switch:checked { background: var(--acc); }
.switch:checked::after { transform: translateX(14px); background: var(--acc-ink); }
.switch:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 10px; }

.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.checks .check { position: relative; }
.checks .check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checks .check span {
  display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 8px;
  background: var(--surf2); color: var(--muted); font-weight: 600; border: 1px solid transparent;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.checks .check:hover span { color: var(--text); }
.checks .check input:checked + span { color: var(--acc-ink); background: var(--acc); }
.checks .check input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
input[type=checkbox]:not(.switch), input[type=radio] { accent-color: var(--acc); width: 15px; height: 15px; margin: 0; }

/* ---- «Главное» и «Ещё» без скриптов ----
 * Форма (#form) строится скриптом по разделам; здесь разделы «растворяются»
 * (display: contents), и все поля становятся строками одного столбца .settings.
 * Главные поля выбраны по data-key и стоят сверху (order), остальные видны
 * только во вкладке своего раздела (радиокнопки #t-…). */
.settings { display: flex; flex-direction: column; margin-top: 40px; }
.settings #form, .settings #form fieldset, .settings #form .fields { display: contents; }
.settings #form legend { display: none; }
.settings .field { order: 40; display: none; }
.set-h {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; color: var(--dim); letter-spacing: 0.01em;
}
.set-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.set-main { order: 0; margin-bottom: 8px; }
.settings .field[data-key="size"] { order: 11; display: grid; }
.settings .field[data-key="font"] { order: 12; display: grid; }
/* Плавность — слайдером во всю ширину сразу под размером и шрифтом (26.09). */
.settings .field[data-key="smooth"] { order: 13; display: grid; }
.settings .field[data-key="shadow"] { order: 14; display: grid; }
.settings .field[data-key="stroke"] { order: 15; display: grid; }
.settings .field[data-key="effects"] { order: 16; display: grid; }
.settings .field[data-key="hide_paints"] { order: 17; display: grid; }
.settings .field[data-key="perf_auto"] { order: 18; display: grid; }
.set-more { order: 20; margin-top: 40px; }
.set-more::after { display: none; }
.tabs { order: 21; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.tab {
  position: relative; padding: 10px 0 11px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted); user-select: none;
  transition: color 0.15s var(--ease);
}
.tab:hover { color: var(--text); }
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px;
  background: var(--acc); transform: scaleX(0); transition: transform 0.25s var(--ease);
}
.tab-close { display: none; margin-left: auto; color: var(--dim); font-weight: 500; }
.tab-close::after { display: none; }
.settings input[name="more-tab"]:not(#t-none):checked ~ .tabs .tab-close { display: block; }
#t-look:checked ~ .tabs [for="t-look"], #t-motion:checked ~ .tabs [for="t-motion"],
#t-cosmetics:checked ~ .tabs [for="t-cosmetics"], #t-content:checked ~ .tabs [for="t-content"],
#t-commands:checked ~ .tabs [for="t-commands"] { color: var(--text); }
#t-look:checked ~ .tabs [for="t-look"]::after, #t-motion:checked ~ .tabs [for="t-motion"]::after,
#t-cosmetics:checked ~ .tabs [for="t-cosmetics"]::after, #t-content:checked ~ .tabs [for="t-content"]::after,
#t-commands:checked ~ .tabs [for="t-commands"]::after { transform: scaleX(1); }
#t-none:focus-visible ~ .tabs [for="t-none"], #t-look:focus-visible ~ .tabs [for="t-look"],
#t-motion:focus-visible ~ .tabs [for="t-motion"], #t-cosmetics:focus-visible ~ .tabs [for="t-cosmetics"],
#t-content:focus-visible ~ .tabs [for="t-content"], #t-commands:focus-visible ~ .tabs [for="t-commands"] {
  outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px;
}
#t-look:checked ~ #form #group-look .field, #t-motion:checked ~ #form #group-motion .field,
#t-cosmetics:checked ~ #form #group-cosmetics .field, #t-content:checked ~ #form #group-content .field,
#t-commands:checked ~ #form #group-commands .field { display: grid; }
.settings .field-bool { grid-template-columns: minmax(0, 1fr); }

/* ---- фильтры ---- */
.filter-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.filter-rule { border-radius: 10px; padding: 10px; background: var(--well); border: 1px solid var(--line); }
.filter-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.filter-line + .filter-line { margin-top: 8px; }
.filter-line input[type=text], .filter-line select { flex: 1 1 140px; width: auto; }

/* ---- кнопки ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--line2); background: var(--surf2); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:hover { border-color: var(--line3); color: var(--text); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:disabled:hover { border-color: var(--line2); }
.btn-accent { background: var(--acc); color: var(--acc-ink); border-color: transparent; font-weight: 700; }
.btn-accent:hover { background: var(--acc-light); color: var(--acc-ink); border-color: transparent; }
.btn-accent:disabled:hover { background: var(--acc); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--line2); }
.btn-small { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.link-row { display: flex; gap: 8px; }
.link-row input { flex: 1; min-width: 0; }

/* ---- предпросмотр: большая «сцена» ---- */
#preview-box, #pp-preview-box { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--pad) 24px; }
.pv-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  padding: 18px 0 12px;
}
.pv-note { font-family: var(--mono); font-size: 12px; color: var(--dim); min-width: 0; font-variant-numeric: tabular-nums; }
.pv-controls { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.pv-controls fieldset { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 8px; }
.pv-bg-choice .check { position: relative; }
.pv-bg-choice .check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.15s var(--ease);
}
.check:hover .sw { transform: scale(1.1); }
.sw-dark { background: #18181b; }
.sw-light { background: #f4f4f5; }
.sw-checker { background: conic-gradient(#c8c8cc 25%, #fff 0 50%, #c8c8cc 0 75%, #fff 0) 0 0 / 10px 10px; }
.sw-custom { background: conic-gradient(#e35d6a, #e2a03f, #4ec86f, #6d9eff, #b8a7f0, #e35d6a); }
.pv-bg-choice input:checked + .sw { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--acc); }
.pv-bg-choice input:focus-visible + .sw { outline: 2px solid var(--acc); outline-offset: 3px; }
.pv-bg-choice input[type=color] { width: 24px; height: 20px; border-radius: 5px; padding: 1px; margin-left: -2px; }
.pv-size { gap: 4px !important; color: var(--dim); font-size: 12px; }
.pv-size input[type=number] {
  width: 58px; height: 28px; padding: 0 6px; text-align: center;
  font-family: var(--mono); font-size: 12px; font-weight: 500; background: transparent; border: 1px solid var(--line);
}
.pv-size .text-btn { margin-left: 6px; font-size: 12px; }
/* Размер источника на странице виджета (у чата он внутри .pv-controls). */
.pp-size { border: 0; padding: 0; margin: 0; display: flex; align-items: center; }
.pp-size-l { margin-right: 6px; font-family: var(--mono); }
.pv-wrap {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 10px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px);
  background-size: 22px 22px; background-position: center;
}
.pv-stage { position: relative; overflow: hidden; margin: 0 auto; flex: none; outline: 1px solid var(--line2); outline-offset: 0; }
.pv-stage iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: transparent; }
.pv-bg-dark { background: #18181b; }
.pv-bg-light { background: #f4f4f5; }
.pv-bg-checker {
  background-color: #fff;
  background-image: conic-gradient(#c8c8cc 25%, #fff 0 50%, #c8c8cc 0 75%, #fff 0);
  background-size: 24px 24px;
}

/* ---- полоса со ссылкой ---- */
.linkbar {
  position: relative; flex: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "warn warn" "seg help" "main main";
  gap: 12px 16px; align-items: center;
  padding: 16px var(--pad) 16px; background: var(--surf); border-top: 1px solid var(--line);
}
.linkbar-simple { grid-template-areas: "main" "help"; grid-template-columns: minmax(0, 1fr); }
.linkbar-row { display: contents; }
#warnings { grid-area: warn; display: flex; flex-direction: column; gap: 4px; }
#warnings[hidden] { display: none; }
.seg { grid-area: seg; justify-self: start; display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--well); border: 1px solid var(--line); }
.seg label {
  display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 7px; cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 600; color: var(--dim);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.seg label:hover { color: var(--text); }
#lk-short:checked ~ .seg [for="lk-short"], #lk-long:checked ~ .seg [for="lk-long"] {
  background: var(--surf2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2);
}
#lk-short:focus-visible ~ .seg [for="lk-short"], #lk-long:focus-visible ~ .seg [for="lk-long"] { outline: 2px solid var(--acc); outline-offset: 2px; }
.linkbar-main { grid-area: main; min-width: 0; }
#lk-short:checked ~ .linkbar-main .long-box, #lk-long:checked ~ .linkbar-main #short-box { display: none; }

/* Короткая ссылка — разметку строит скрипт; раскладываем её сеткой. */
#short-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#short-box > * { flex: 1 1 100%; min-width: 0; margin: 0; }
#short-box > .hint:first-child { flex: 1 1 260px; font-size: 13px; color: var(--muted); line-height: 1.4; }
#short-box > .link-field { flex: 1 1 240px; }
#short-box > .hint:first-child + .btns, #short-box > .link-field + .btns { flex: 0 1 auto; flex-wrap: nowrap; }
.linkbar-help { grid-area: help; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 18px; }
/* «Правка с другого компьютера» — только у короткой ссылки. */
#lk-long:checked ~ .linkbar-help #edit-help { display: none; }
/* Ссылка и кнопки: не помещаются в строку — кнопки уходят вниз одной группой. */
.link-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.link-line > .link-field { flex: 1 1 260px; }
.link-line > .btns { flex: 0 0 auto; flex-wrap: nowrap; }
/* «Перетащить в OBS» — ссылку тянут мышью в окно OBS (CP.obsDrag). */
.btn-drag { cursor: grab; user-select: none; -webkit-user-drag: element; }
.btn-drag:active { cursor: grabbing; }
.btn-drag::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-left: -2px;
  background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239d9daa'%3E%3Ccircle cx='5.5' cy='3.5' r='1.3'/%3E%3Ccircle cx='10.5' cy='3.5' r='1.3'/%3E%3Ccircle cx='5.5' cy='8' r='1.3'/%3E%3Ccircle cx='10.5' cy='8' r='1.3'/%3E%3Ccircle cx='5.5' cy='12.5' r='1.3'/%3E%3Ccircle cx='10.5' cy='12.5' r='1.3'/%3E%3C/svg%3E");
}
.btn-drag[aria-disabled="true"] { opacity: 0.4; cursor: default; pointer-events: none; }
/* На телефоне и планшете OBS нет — тянуть некуда. */
@media (hover: none) { .btn-drag { display: none; } }
.link-field {
  flex: 1; min-width: 0; height: 40px !important;
  font-family: var(--mono) !important; font-size: 12.5px !important; font-weight: 500 !important;
  background: var(--well) !important; border: 1px solid var(--line) !important; border-radius: 10px !important;
  color: var(--text); padding: 0 12px !important;
}
textarea.link-field { padding: 11px 12px !important; resize: none; white-space: nowrap; overflow: hidden; line-height: 1.4; }
.short-why { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); line-height: 1.4; text-wrap: pretty; }
.long-box > .hint { margin-top: 8px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-height: 18px; color: var(--dim); }
.status:empty { display: none; }
.status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.status-ok::before { background: var(--ok); }
.status-error { color: #f0a0a8; }
.status-error::before { background: var(--bad); }
.ok { color: var(--ok); }
.error { color: #f0a0a8; font-size: 12.5px; }
.warn-line { color: #ecc58a; font-size: 12.5px; line-height: 1.45; }
.warn-inline { color: #ecc58a; }

#obs-help > summary, #pp-help > summary, #edit-help > summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--dim); border-radius: 6px;
  transition: color 0.15s var(--ease);
}
#obs-help > summary::-webkit-details-marker, #pp-help > summary::-webkit-details-marker,
#edit-help > summary::-webkit-details-marker { display: none; }
#obs-help > summary:hover, #pp-help > summary:hover, #edit-help > summary:hover,
#obs-help[open] > summary, #pp-help[open] > summary, #edit-help[open] > summary { color: var(--text); }
#obs-help > summary::after, #pp-help > summary::after, #edit-help > summary::after {
  content: ""; width: 12px; height: 12px; transition: transform 0.2s var(--ease);
  background: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8a97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.2 8 9.8l3.5-3.6'/%3E%3C/svg%3E");
}
/* Панель «Правка с другого компьютера». */
#edit-pop { display: flex; flex-direction: column; gap: 10px; }
#edit-pop h3 { margin: 0; }
#edit-pop .pop-text { color: var(--muted); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
#edit-pop .link-field { width: 100%; }
.pop-sep { width: 100%; height: 1px; margin: 2px 0; border: 0; background: var(--line2); }
#pp-help { grid-area: help; }
.obs-pop {
  position: absolute; right: var(--pad); bottom: calc(100% + 10px); z-index: 10;
  width: min(460px, calc(100% - 2 * var(--pad))); max-height: 60vh; overflow-y: auto;
  padding: 18px 20px; border-radius: 14px; background: var(--surf2); border: 1px solid var(--line2);
}
.obs-pop h3 { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.obs-fast {
  margin: 8px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(184, 167, 240, 0.08); border: 1px solid rgba(184, 167, 240, 0.22);
  color: var(--text); font-size: 13px; line-height: 1.5; text-wrap: pretty;
}
.obs-pop h3 + ol + h3 { margin-top: 16px; }
.obs-pop ol { list-style: none; padding: 0; margin: 0; counter-reset: li; }
.obs-pop li { position: relative; padding-left: 26px; margin: 8px 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.obs-pop li::before {
  counter-increment: li; content: counter(li); position: absolute; left: 0; top: 0;
  width: 18px; font-size: 12px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums;
}
.obs-pop b { color: var(--text); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  :root { --pad: 18px; }
  .app { display: flex; flex-direction: column; height: auto; }
  .stage { display: contents; }
  #preview-box, #pp-preview-box { order: -1; flex: none; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .pv-wrap { flex: none; }
  .pp-wrap { height: 62vh; min-height: 320px; }   /* два виджета друг под другом */
  /* Колонка настроек растворяется: шапка и заголовок встают НАД предпросмотром
   * (иначе страница начинается с тёмного окна без названия), остальное — под ним. */
  .rail { display: contents; }
  .rail > * { padding-left: var(--pad); padding-right: var(--pad); }
  .rail-head { order: -3; padding-top: 18px; }
  .intro { order: -2; }
  .rail-foot { padding-bottom: 24px; }
  .linkbar { order: 1; position: sticky; bottom: 0; z-index: 5; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .long-box > .hint { display: none; }
  .rail-foot { padding-top: 32px; }
  .intro { margin: 28px 0 22px; }
  .obs-pop { left: 0; right: 0; width: auto; bottom: 100%; max-height: 55vh; border-radius: 14px 14px 0 0; }
}

/* ---- две колонки настроек ----
 * Широкий экран: колонка настроек шире (предпросмотру хватает и меньшей
 * площади), поля — в две колонки, и во «Главном», и во вкладках «Ещё».
 * То же на планшете, где настройки идут во всю ширину под предпросмотром.
 * Поля остаются «строками» (подпись | значение): так строки обеих колонок
 * почти одной высоты, а настройки — в привычном порядке по смыслу. */
@media (min-width: 1180px) {
  :root { --rail: clamp(680px, 54vw, 900px); }
}
@media (min-width: 1180px), (min-width: 640px) and (max-width: 900px) {
  .settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .settings > .set-h, .settings > .tabs, .settings .field-wide { grid-column: 1 / -1; }
  .settings .field:not(.field-wide):not(.field-bool) { grid-template-columns: minmax(0, 1fr) minmax(0, 150px); }
  /* Виджет: разделы «Что показывать» и «Вид» рядом; в узкой колонке раздела
   * подпись — над полем. */
  .pp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .pp-fields > .field:first-child { grid-column: 1 / -1; }
  .pp-fields .sect .field:not(.field-bool) { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .pp-fields .sect .field:not(.field-bool) > * { grid-column: 1; }
}
@media (max-width: 560px) {
  .linkbar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "warn" "seg" "main" "help"; }
  .seg { justify-self: start; }
  .link-line .link-field { flex: 1 1 100%; }
  .link-line > .btns { flex: 1 1 100%; }
  .link-line .btn-accent { flex: 1; }
  .linkbar-help { justify-content: flex-start; }
  .field { grid-template-columns: minmax(0, 1fr) minmax(0, 150px); }
  .pv-size { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---- страница API ---- */
.doc-head {
  max-width: 900px; margin: 0 auto; padding: 22px 24px 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
}
.doc { max-width: 900px; margin: 0 auto; padding: 16px 24px 48px; }
.doc h1 { font-size: 30px; margin-bottom: 8px; }
.doc h2 { font-size: 21px; margin: 40px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 16px; margin: 24px 0 8px; }
.doc p, .doc li { color: #cfced8; line-height: 1.65; margin: 8px 0; }
.doc pre { background: var(--well); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
.doc code { background: var(--surf2); padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.doc pre code { background: none; padding: 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; display: block; overflow-x: auto; }
.doc th, .doc td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.doc th { font-size: 12px; color: var(--dim); font-weight: 700; border-bottom-color: var(--line2); }