/* SkyGroup AI — один набор правил на весь интерфейс.
 *
 * ПРАВИЛО КЛИКАБЕЛЬНОГО, от которого не отступать:
 *   переход между разделами  → ССЫЛКА (цветной текст, без рамки);
 *   действие, что-то меняющее → КНОПКА (рамка или заливка);
 *   на странице ровно ОДНА закрашенная кнопка — главное действие; в
 *   повторяющихся блоках (карточка на каждую группу, строка на человека)
 *   кнопки всегда с рамкой, иначе страница рябит;
 *   разрушающее действие — кнопка с красной рамкой; красная заливка только
 *   внутри красной рамки «опасной зоны», где это и есть главное действие;
 *   карточка-раздел устроена одинаково: заголовок, строка пояснения, кнопка
 *   входа в раздел — даже если эта кнопка просто ведёт на страницу.
 *
 * Смешение видов («ссылка, похожая на кнопку», «кнопка, похожая на ссылку»)
 * запрещено: именно от него страница выглядит собранной из кусков.
 */

:root {
  --bg: #f6f7f9; --card: #fff; --ink: #14181f; --muted: #6b7480;
  --line: #e3e6ea; --accent: #2f6df6; --bad: #c8382f; --warn: #a96a00; --live: #16824a;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#12151a; --card:#191d24; --ink:#e8ebef; --muted:#9aa3ae; --line:#2a2f38;
          --accent:#5b8cff; --bad:#ff6b5e; --warn:#e0a63c; --live:#41c98a; }
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system, "Segoe UI", Roboto, Inter, sans-serif; }

h1 { font-size:22px; margin:0; }
h2 { font-size:17px; margin:0 0 10px; }
h3 { font-size:15px; margin:0 0 10px; }
p { margin:0 0 10px; }
p:last-child { margin-bottom:0; }

/* --- ссылки: единственный вид перехода ----------------------------------- */
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* --- раскладка ------------------------------------------------------------ */
main { padding:28px 32px; max-width:980px; }
main.with-side { margin-left:220px; }

.side { position:fixed; inset:0 auto 0 0; width:220px; background:var(--card);
  border-right:1px solid var(--line); padding:20px 16px; display:flex;
  flex-direction:column; gap:2px; }
.brand { font-weight:600; font-size:17px; margin-bottom:16px; }
.brand small { display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:2px; }
.side a { display:block; padding:7px 10px; margin:0 -10px; border-radius:8px; color:var(--ink); }
.side a:hover { background:var(--bg); text-decoration:none; }
.side a.on { color:var(--accent); font-weight:500; }
.side .spacer { flex:1; }
.side .who { color:var(--muted); font-size:13px; padding:0 0 8px; }
.side form { margin-top:8px; }

.head { display:flex; align-items:center; gap:18px; margin-bottom:20px; flex-wrap:wrap; }
.head h1 { flex:1; }
.head-links { display:flex; gap:18px; align-items:center; }

/* --- карточки ------------------------------------------------------------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:16px; }
.card.narrow { max-width:400px; margin:0 auto 16px; }
.card.empty { color:var(--muted); }
.card + .card { margin-top:0; }
.card-title { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.card-title h3 { margin:0; flex:1; }

.muted { color:var(--muted); }
.small { font-size:13px; }
code { background:var(--bg); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; font-size:13px; }

/* --- поля ----------------------------------------------------------------- */
label { display:block; margin:0 0 14px; font-size:13px; color:var(--muted); }
input, select, textarea { display:block; width:100%; max-width:420px; margin-top:5px;
  padding:9px 11px; font-size:15px; font-family:inherit; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.field-note { margin:-8px 0 14px; }

/* --- кнопки: рамка по умолчанию, заливка только у главного действия -------- */
button, .btn {
  display:inline-block; font:inherit; line-height:1.3; cursor:pointer;
  padding:9px 16px; border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--ink); text-decoration:none; white-space:nowrap;
}
button:hover, .btn:hover { border-color:var(--muted); text-decoration:none; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.07); border-color:var(--accent); }
.btn-danger { color:var(--bad); border-color:var(--bad); background:transparent; }
.btn-danger:hover { background:var(--bad); color:#fff; }
.btn-solid-danger { background:var(--bad); border-color:var(--bad); color:#fff; }
.btn-small { padding:5px 11px; font-size:13px; }
button[disabled] { opacity:.5; cursor:default; }

.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.actions form { display:contents; }

/* --- формы в строку ------------------------------------------------------- */
.form-row { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.form-row label { margin:0; }
.form-row input { max-width:240px; }
.form-row select { max-width:320px; }

/* --- таблицы -------------------------------------------------------------- */
table.list { width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
table.list th { text-align:left; font-size:12px; color:var(--muted); font-weight:500;
  padding:11px 16px; border-bottom:1px solid var(--line); }
table.list td { padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.list tr:last-child td { border-bottom:none; }
table.list td.right { text-align:right; }

dl.facts { display:grid; grid-template-columns:150px 1fr; gap:10px 20px; margin:0; }
dl.facts dt { color:var(--muted); font-size:13px; }
dl.facts dd { margin:0; }
/* Сжатый вид: строки идут плотно, подпись у самого значения. Разрежённая
   таблица из четырёх строк занимала полэкрана и ничего этим не сообщала. */
dl.facts.compact { grid-template-columns:96px 1fr; gap:4px 16px; font-size:14px; }
dl.facts.compact dt { font-size:13px; line-height:1.5; }

/* --- состояния ------------------------------------------------------------ */
.badge { display:inline-block; font-size:12px; padding:3px 10px; border-radius:20px;
  background:var(--bg); border:1px solid var(--line); color:var(--muted); }
.badge.stored, .badge.active { color:var(--live); border-color:var(--live); }
.badge.recording { color:var(--bad); border-color:var(--bad); }
.badge.failed, .badge.abandoned, .badge.invited { color:var(--warn); border-color:var(--warn); }
.badge.disabled, .badge.removed { color:var(--muted); }

.status { margin:10px 0; font-size:14px; }
.status.bad { color:var(--bad); }
.status.warn { color:var(--warn); }
.status.live { color:var(--live); }

/* --- опасная зона --------------------------------------------------------- */
.danger-zone { border-color:var(--bad); }
.danger-zone h3 { color:var(--bad); }

/* --- запись --------------------------------------------------------------- */
.elapsed { font-variant-numeric:tabular-nums; font-size:24px; color:var(--muted); }
body.recording .elapsed { color:var(--bad); }
.meters { display:flex; gap:24px; margin-top:16px; flex-wrap:wrap; }
.meter { flex:1; min-width:180px; font-size:12px; color:var(--muted); }
.meter .track { height:8px; background:var(--bg); border:1px solid var(--line);
  border-radius:5px; overflow:hidden; margin-top:5px; }
.meter i { display:block; height:100%; width:0; background:var(--live); transition:width .08s linear; }

video, audio { width:100%; max-width:820px; border-radius:8px; background:#000; margin-top:8px; }
audio { background:transparent; }

/* --- списки с галочками --------------------------------------------------- */
.checks { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:8px; margin:0 0 16px; }
.check { display:flex; align-items:center; gap:9px; margin:0; color:var(--ink); font-size:14px; }
.check input { width:auto; max-width:none; margin:0; }

/* --- страницы без боковой панели ------------------------------------------ */
main:not(.with-side) { max-width:560px; margin:0 auto; padding:56px 20px 40px; }
main:not(.with-side) .hero { text-align:center; margin-bottom:26px; }
main:not(.with-side) .card.narrow { max-width:none; }
.hero h1 { font-size:30px; margin-bottom:10px; }
.lead { color:var(--muted); font-size:16px; }
.slugline { display:flex; align-items:center; gap:8px; max-width:420px; }
.slugline input { margin-top:0; }
.suffix { color:var(--muted); font-size:14px; white-space:nowrap; }

@media (max-width:760px) {
  .side { position:static; width:auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px; }
  .side .brand, .side .spacer, .side .who { margin:0; }
  .side a { margin:0; }
  main.with-side { margin-left:0; }
  main { padding:18px; }
  dl.facts { grid-template-columns:1fr; gap:4px 0; }
}