/* Общий вид панелей «Голос» (окно оператора, админка, вход): цвета светлой и тёмной темы, шрифты, общие элементы.
   Шрифты — /static/fonts/fonts.css (с нашего сервера). Тема: без data-theme — как в системе;
   data-theme="dark" / "light" на <html> — принудительно (окно оператора по умолчанию тёмное). */
:root {
  --font: 'Golos Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hindi: 'Noto Sans Devanagari', 'Golos Text', ui-sans-serif, sans-serif;
  --bg:#F6F7F9; --panel:#FFFFFF; --fg:#11151C; --text-2:#3A4250; --muted:#5A6271; --line:#E6E8EC; --line-2:#DDE1E7;
  --soft:#F2F4F7; --hover:#EBEEF2; --side:#FBFBFC;
  --accent:#3B5BDB; --accent-fg:#FFFFFF; --accent-soft:#EEF2FF; --accent-text:#2F4FC9;
  --ok:#12805C; --ok-soft:#E7F6EF; --warn:#9A6200; --warn-soft:#FFF6E0; --err:#C2342E; --err-soft:#FDECEC;
  --live:#E8590C; --live-soft:#FFF1E8; --live-text:#B4470B;
  --shadow:0 1px 2px rgba(17,21,28,.06); --overlay:rgba(17,21,28,.42);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:#0B0E13; --panel:#121720; --fg:#E9EDF3; --text-2:#C7CEDA; --muted:#8F99A9; --line:#232B37; --line-2:#2B3442;
  --soft:#181E28; --hover:#1F2631; --side:#0E1218;
  --accent:#7B93FF; --accent-fg:#0B1020; --accent-soft:#1B2643; --accent-text:#AFBEFF;
  --ok:#3DD68C; --ok-soft:rgba(61,214,140,.12); --warn:#F5B544; --warn-soft:rgba(245,181,68,.12); --err:#F47A6E; --err-soft:rgba(240,106,93,.14);
  --live:#FF8A3D; --live-soft:rgba(255,138,61,.13); --live-text:#FFC49B;
  --shadow:none; --overlay:rgba(0,0,0,.55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0B0E13; --panel:#121720; --fg:#E9EDF3; --text-2:#C7CEDA; --muted:#8F99A9; --line:#232B37; --line-2:#2B3442;
    --soft:#181E28; --hover:#1F2631; --side:#0E1218;
    --accent:#7B93FF; --accent-fg:#0B1020; --accent-soft:#1B2643; --accent-text:#AFBEFF;
    --ok:#3DD68C; --ok-soft:rgba(61,214,140,.12); --warn:#F5B544; --warn-soft:rgba(245,181,68,.12); --err:#F47A6E; --err-soft:rgba(240,106,93,.14);
    --live:#FF8A3D; --live-soft:rgba(255,138,61,.13); --live-text:#FFC49B;
    --shadow:none; --overlay:rgba(0,0,0,.55);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, select, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono, .num { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.spacer { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* метки и точки состояния: цвет + форма + текст */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600;
       background: var(--soft); color: var(--muted); white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.err { background: var(--err-soft); color: var(--err); }
.tag.call, .tag.info { background: var(--accent-soft); color: var(--accent-text); }
.tag.live { background: var(--live-soft); color: var(--live-text); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: var(--ok); } .dot.err { background: var(--err); } .dot.warn { background: var(--warn); } .dot.live { background: var(--live); }
.dot.pulse { animation: g-fade 1.6s infinite; }
.dot.live.pulse { animation: g-ring 1.6s infinite; }
@keyframes g-fade { 50% { opacity: .35; } }
@keyframes g-ring { 0% { box-shadow: 0 0 0 0 rgba(255,138,61,.55); } 70% { box-shadow: 0 0 0 6px rgba(255,138,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,138,61,0); } }

/* переключатели вариантов (сегменты) */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; }
.seg button { border: 0; background: transparent; border-radius: 7px; padding: 6px 12px; color: var(--muted); font-weight: 600; cursor: pointer; }
.seg button:hover:not(:disabled) { color: var(--fg); background: transparent; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--fg); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }

/* выключатель на чекбоксе: <label class="switch"><input type="checkbox"><span>подпись</span></label> */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 999px; background: var(--line-2);
  position: relative; flex: none; margin: 0; cursor: pointer; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { left: 19px; }
.switch input:disabled { opacity: .5; cursor: default; }

/* всплывающее сообщение */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px;
  border-radius: 10px; font-size: 14px; z-index: 100; box-shadow: 0 8px 28px rgba(0,0,0,.22); max-width: calc(100% - 32px); }
.toast.err { background: var(--err); color: #fff; }

/* полосы прокрутки потише */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }