/* Настроечная страница. Обычный браузер, не OBS: фон непрозрачный, размеры
   человеческие. Оформление скупое — это форма, а не витрина; всё украшение
   страницы живёт в шапке и в одной кнопке запуска.
   Отдельный файл, потому что строгий CSP запрещает инлайновые стили. */

:root {
  color-scheme: dark;
  --bg: #14161c;
  --card: #1d2029;
  --line: #2c3140;
  --text: #e8eaf0;
  --dim: #9aa1b4;
  --accent: #a06bff;
  --warn: #ffce4d;
  --bad: #ff6b6b;
}

* { box-sizing: border-box; }

/* ⚠️ Первым правилом и с !important — по тому же поводу, что и в overlay.css.
   Браузерное [hidden] живёт в таблице агента, и ЛЮБОЕ авторское правило с
   display его перебивает: одна строчка .row { display: flex } нарисовала бы
   скрытое поверх видимого. Скрытых узлов здесь семь: две ошибки полей, экран
   с кодом, «Отменить», «Отключить», блок баллов и поле ссылки. Сторож —
   tests/cases/overlay-styles.test.js. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 32px 16px 40px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.page { max-width: 680px; margin: 0 auto; }

h1 { margin: 0 0 4px; font-size: 32px; letter-spacing: -0.02em; }
h2 { margin: 0 0 12px; font-size: 18px; }
h3 { margin: 20px 0 8px; font-size: 15px; color: var(--dim); }

/* Подзаголовок прямо в карточке отделяет одно дело от другого — ник канала от
   подключения Twitch, настройки от инструкции. Без линии они читаются одним
   сплошным полотном. */
.card > h3 {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.lead { margin: 0 0 24px; color: var(--dim); }

/* ── Шапка ──────────────────────────────────────────────────────────────
   Название и строка под ним — по центру. Шапка обязана оставаться полоской
   над настройками, а не первым экраном. */

.hero { margin: 0 0 28px; text-align: center; }
.hero .lead { max-width: 54ch; margin: 0 auto; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

/* Последняя карточка — та, ради которой страницу и открывали. */
.card--go { border-color: #3d3358; }

.field {
  display: block;
  margin: 16px 0 6px;
  font-size: 14px;
  color: var(--dim);
}
.card > .field:first-of-type { margin-top: 0; }

input[type='text'],
input[type='url'],
input[type='number'],
select {
  width: 100%;
  padding: 10px 12px;
  background: #12141a;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

input[readonly] { color: var(--dim); }

input:focus, select:focus, button:focus, a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}
.row input[type='checkbox'] { flex: none; width: 18px; height: 18px; }
.row input[type='text'] { flex: 1 1 auto; }

/* Ряд со второстепенным действием: копирование ссылки живёт под кнопкой
   запуска и не спорит с ней за внимание. */
.row--quiet { margin-top: 20px; }

button {
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  flex: none;
}
button:hover { filter: brightness(1.1); }

/* Второстепенные кнопки рядом с акцентной: рамка вместо заливки. «Отменить»
   не должна спорить за внимание с «Ввести код». */
#cancel,
#disconnect {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--line);
  font-weight: 400;
}

/* «Ввести код» — ссылка, выглядящая кнопкой. display не задан намеренно:
   внутри .row она и так флекс-элемент, а лишнее правило с display — прямой
   путь перебить атрибут hidden (см. шапку файла). */
.cta-mini {
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  flex: none;
}
.cta-mini:hover { filter: brightness(1.1); }

/* Тихая кнопка: рамка вместо заливки. Её задача — не мешать. */
button.ghost {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--line);
  font-weight: 400;
}
button.ghost:hover { filter: none; background: #232734; color: var(--text); }

/* ── Кнопка запуска ─────────────────────────────────────────────────────
   Единственная крупная кнопка на странице: она и есть ответ на вопрос «что
   тут нажимать». Ссылка, а не button, — чтобы работали правый клик, средняя
   кнопка мыши и «открыть в новом окне» силами самого браузера. */
.cta {
  display: block;
  padding: 16px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.cta:hover { filter: brightness(1.1); }

/* Ника канала нет — нажимать нечего, и это видно до нажатия, а не после. */
.cta[aria-disabled='true'] {
  background: #2a2e3a;
  color: var(--dim);
  cursor: not-allowed;
}
.cta[aria-disabled='true']:hover { filter: none; }

.hint { margin: 6px 0 0; font-size: 14px; color: var(--dim); }
.warn { margin: 12px 0; font-size: 14px; color: var(--warn); }
.error { margin: 6px 0 0; font-size: 14px; color: var(--bad); }
.status { margin: 8px 0 0; font-size: 14px; color: var(--dim); min-height: 1.5em; }
.row .status { margin: 0; }

/* Код устройства читают с экрана и набирают на телефоне — поэтому крупно и
   с разрядкой. */
.usercode { margin: 8px 0 0; font-size: 26px; letter-spacing: 0.08em; }

code {
  padding: 1px 5px;
  background: #12141a;
  border-radius: 4px;
  font-size: 90%;
}

.steps { margin: 8px 0 0; padding-left: 22px; color: var(--dim); }
.steps li { margin: 4px 0; }
.steps b { color: var(--text); }

/* Список команд. Маркеры убраны: строка и так начинается с !команды, а точка
   слева спорит с восклицательным знаком за начало строки. */
.cmds { margin: 8px 0 0; padding-left: 0; list-style: none; color: var(--dim); }
.cmds li { margin: 6px 0; }
.cmds b { color: var(--text); }

/* Два столбца: зрителям и модераторам. Списки короткие, рядом они читаются
   одним взглядом, а в столбик занимали пол-экрана. Ниже 620 px столбцы
   складываются в один: 300 px на команду с пояснением уже не хватает. */
.cmd-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  align-items: start;
}
.cmd-cols h3 { margin-top: 0; }

@media (max-width: 620px) {
  .cmd-cols { grid-template-columns: 1fr; gap: 0; }
  .cmd-cols div + div h3 { margin-top: 20px; }
}