/* Общая основа панели управления и окна программы: цвета, типографика,
   кнопки, поля, статусы. Оверлей сюда не входит — у него своя система.

   Стиль — «тёмный и плоский»: поверхности отличаются только светлотой
   (фон → карточка → вложенное), без рамок и теней; цвет — только на данных
   и статусах; главная кнопка выделена инверсией, а не цветом. */

:root {
  /* поверхности: тёплый почти-чёрный и два шага светлее */
  --ground: #0e0c0c;
  --surface: #171414;
  --raised: #221e1e;
  --hover: #2b2626;
  --border: #262121;   /* разделители строк и областей */
  --control: #3b3434;  /* рамка полей и кнопок — на шаг заметнее */

  /* текст: основной и два серых, далеко друг от друга */
  --text: #f2eeec;
  --muted: #b4adab;
  --faint: #948c8a;

  /* цвет только на данных и статусах */
  --data: #efc42b;     /* золото барабана: числа, доли, очередь */
  --live: #e5484d;     /* в эфире, ошибка, удаление */
  --positive: #3fc07a;
  --positive-bg: #172a1d;
  --negative-bg: #2c1a1c;

  /* главная кнопка — инверсия */
  --primary: #f2eeec;
  --primary-ink: #141112;

  --radius: 8px;
  --radius-sm: 6px;
  --gap: 16px;
  --pad: 20px;
  --h: 36px;
  --h-lg: 44px;
  --h-sm: 30px;

  --font-ui: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Consolas', ui-monospace, monospace;

  /* прежние имена — для окна программы */
  --bg: var(--ground);
  --panel: var(--surface);
  --panel-2: var(--raised);
  --line: var(--control);
  --ink: var(--text);
  --ink-dim: var(--muted);
  --accent: var(--data);
  --gold: var(--data);
  --ok: var(--positive);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 14px/1.5 var(--font-ui);
  font-variant-numeric: tabular-nums; /* цифры одной ширины: счётчики не прыгают */
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: 0; }

/* ----------------------------------------------------------------- блоки */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--pad);
}

.lbl {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.hint {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.muted { color: var(--faint); }

/* ------------------------------------------------------------------ поля */

input[type=text],
input[type=password],
select,
textarea {
  width: 100%;
  height: var(--h);
  padding: 0 12px;
  background: var(--ground);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
select { cursor: pointer; }
textarea { height: auto; min-height: 64px; padding: 8px 12px; line-height: 1.45; resize: vertical; }
input[type=text]::placeholder,
input[type=password]::placeholder,
textarea::placeholder { color: var(--faint); }
input[type=text]:hover,
input[type=password]:hover,
select:hover,
textarea:hover { border-color: #4a4242; }
input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  border-color: var(--data);
  box-shadow: 0 0 0 1px var(--data);
}
input[type=text]:disabled { opacity: .55; cursor: not-allowed; }

input[type=checkbox],
input[type=radio] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--positive);
  cursor: pointer;
}

/* ---------------------------------------------------------------- кнопки */

/* Одна система: обычная (по умолчанию), главная, тихая, опасная; три высоты. */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 14px;
  background: var(--raised);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
}
button:hover:not(:disabled) { background: var(--hover); border-color: #4a4242; }
button:active:not(:disabled) { transform: scale(.98); }
button:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover:not(:disabled) { background: #fff; border-color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--raised); border-color: transparent; color: var(--text); }

.btn-danger { color: #ff8f93; }
.btn-danger:hover:not(:disabled) { color: #ffb3b6; }

.btn-lg { height: var(--h-lg); padding: 0 18px; font-size: 15px; }
.btn-sm { height: var(--h-sm); padding: 0 10px; font-size: 13px; }
.btn-block { width: 100%; }

/* окно программы: прежние классы — в той же системе */
.btn-quit { width: 100%; background: transparent; color: var(--muted); }
.btn-quit:hover:not(:disabled) { color: #ff8f93; }

/* ---------------------------------------------------------------- статус */

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5a5150;
  flex: none;
}
.dot.on { background: var(--positive); }
.dot.busy { background: var(--data); }
.dot.live { background: var(--live); }