/* NVR UI — чистый тёмный интерфейс. Прототип компоновки iVMS-4200,
   но без перегруза: только то, что нужно для live и архива. */

:root {
  --bg:        #0f1115;
  --panel:     #161a22;
  --panel-2:   #1d2230;
  --border:    #272d3a;
  --text:      #e6e9ef;
  --text-dim:  #8b93a7;
  --accent:    #3f0303;   /* акцент: тёмно-красный */
  --accent-2:  #2a0202;   /* затемнённый вариант */
  --ok:        #22c55e;
  --warn:      #f59e0b;
  --err:       #ef4444;
  --header-h:  48px;
  --sidebar-w: 240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 14px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
}

/* ── Шапка ── */
header {
  height: var(--header-h); display: flex; align-items: center;
  padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--border);
  gap: 18px;
}
.brand { font-weight: 700; letter-spacing: .5px; color: #fff; }
.brand span { color: #c0392b; }
nav { display: flex; gap: 4px; }
nav a {
  color: var(--text-dim); text-decoration: none; padding: 7px 14px;
  border-radius: 7px; font-weight: 500;
}
nav a:hover { background: var(--panel-2); color: var(--text); }
nav a.active { background: var(--accent); color: #fff; }
.spacer { flex: 1; }
.stats { display: flex; gap: 16px; color: var(--text-dim); font-size: 12px; }
.stats b { color: var(--text); font-weight: 600; }
.clock { font-variant-numeric: tabular-nums; color: var(--text); }

/* ── Раскладка ── */
.layout { display: flex; height: calc(100% - var(--header-h)); }
aside {
  width: var(--sidebar-w); background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.aside-title {
  padding: 12px 14px 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-dim);
}
/* ── Навигация в сайдбаре ── */
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  color: var(--text-dim); text-decoration: none; font-weight: 500; font-size: 14px;
  border-left: 3px solid transparent; background: none; border-top: 0; border-right: 0;
  border-bottom: 0; cursor: pointer; width: 100%; text-align: left; font-family: inherit;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--panel-2); color: #fff; border-left-color: #c0392b; }
.nav-item .ico { font-size: 17px; line-height: 1; width: 20px; text-align: center; }
.aside-spacer { flex: 1; }

/* Иконка настройки раскладки рядом с Live view */
.navline { display: flex; align-items: center; }
.nav-gear { padding: 12px 14px; color: var(--text-dim); text-decoration: none; font-size: 16px; }
.nav-gear:hover { color: #fff; background: var(--panel-2); }
.nav-gear.active { color: #fff; }

/* Подменю раскладок под "Live view" */
.subnav { display: flex; flex-direction: column; padding: 2px 0 6px; }
.subitem {
  padding: 6px 16px 6px 50px; color: var(--text-dim); text-decoration: none;
  font-size: 13px; border-left: 3px solid transparent;
}
.subitem:hover { background: var(--panel-2); color: var(--text); }
.subitem.active { color: #fff; border-left-color: #c0392b; background: var(--panel-2); }
.subitem.subfs { padding-left: 16px; margin-top: 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.subitem.subplay { padding-left: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.app-version { padding: 8px 16px; font-size: 11px; color: var(--text-dim); }
.nav-item.logout { color: var(--text-dim); border-top: 1px solid var(--border); }
.nav-item.logout:hover { color: #e57373; }

/* ── Чипы камер (Live toolbar) ── */
.cam-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border: 1px solid var(--border); border-radius: 15px; background: var(--panel-2);
  cursor: pointer; font-size: 13px; color: var(--text);
}
.chip:hover { border-color: #c0392b; }
.chip.active { background: var(--accent); border-color: #c0392b; color: #fff; }

#cam-list { flex: 1; overflow-y: auto; }   /* legacy, на случай переиспользования */
main { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ── Список камер ── */
.cam-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  cursor: pointer; border-left: 3px solid transparent;
}
.cam-item:hover { background: var(--panel-2); }
.cam-item.active { background: var(--panel-2); border-left-color: var(--accent); }
.cam-item .name { flex: 1; font-weight: 500; }
.cam-item .ip { font-size: 11px; color: var(--text-dim); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); flex: none; }
.dot.online   { background: var(--ok);   box-shadow: 0 0 6px var(--ok); }
.dot.retrying { background: var(--warn); animation: pulse 1.2s infinite; }
.dot.offline, .dot.starting { background: var(--text-dim); }
@keyframes pulse { 50% { opacity: .35; } }

/* ── Тулбар ── */
.toolbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.toolbar .group { display: flex; gap: 4px; }
button, .btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 6px 11px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
button:hover, .btn:hover { border-color: var(--accent); }
button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.toggle { display: flex; align-items: center; gap: 10px; color: var(--text-dim); cursor: pointer; }

/* Переключатели в виде тумблеров (off — серый, on — зелёный) */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 40px; height: 22px; flex: none; border-radius: 11px;
  background: var(--panel-2); border: 1px solid var(--border);
  position: relative; cursor: pointer; transition: background .15s, border-color .15s;
}
input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-dim); transition: transform .15s, background .15s;
}
input[type="checkbox"]:checked {
  background: rgba(34, 197, 94, .25); border-color: var(--ok);
}
input[type="checkbox"]:checked::before { transform: translateX(18px); background: var(--ok); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
input[type="date"], input[type="number"], select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 6px 8px; border-radius: 6px;
}

/* ── Сетка видео ── */
.grid {
  flex: 1; min-height: 0; min-width: 0; display: grid; gap: 4px; padding: 4px;
  background: #000; overflow: hidden;
  grid-auto-rows: 1fr; grid-auto-columns: 1fr;   /* все дорожки строго равны */
}
/* «Соло»: одна камера на весь экран (двойной клик по ячейке в полноэкранном режиме) */
.grid.solo { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
.grid.solo > .tile:not(.solo) { display: none; }
.tile {
  position: relative; background: #05070a; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  min-height: 0; min-width: 0;                    /* не растягиваться под видео */
}
.tile .hevc-player { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.tile .hevc-player canvas { width: 100%; height: 100%; display: block; }
/* canvas WASM/WebCodecs-плеера: вписываем кадр в ячейку с сохранением пропорций */
.wc-canvas { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.tile video, .tile video-stream {
  display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain; background: #000;
}
.tile .label {
  position: absolute; left: 0; top: 0; padding: 3px 9px; font-size: 12px;
  background: rgba(0,0,0,.55); border-bottom-right-radius: 6px; pointer-events: none;
}
.tile .label .dot { display: inline-block; vertical-align: middle; margin-right: 6px; }
.tile .empty { color: var(--text-dim); font-size: 13px; }
.tile .no-link {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: clamp(16px, 3.2vw, 40px); letter-spacing: 3px; color: #9a9a9a;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.6); user-select: none;
}
.tile-btn {
  position: absolute; top: 4px; right: 4px; z-index: 2; padding: 2px 8px; font-size: 11px;
  background: rgba(0,0,0,.55); border: 1px solid var(--border); color: var(--text);
  border-radius: 5px; cursor: pointer; opacity: .7;
}
.tile-btn:hover { opacity: 1; border-color: #c0392b; }
.tile-btn.active { background: var(--accent); border-color: #c0392b; color: #fff; opacity: 1; }
.tile:fullscreen { border: none; background: #000; }
.tile:fullscreen video, .tile:fullscreen video-stream { object-fit: contain; }
#grid:fullscreen { width: 100vw; height: 100vh; background: var(--bg); padding: 0; }
.hevc-hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: rgba(63, 3, 3, .88); color: #fff; font-size: 11px;
  padding: 5px 8px; text-align: center; line-height: 1.3;
}

/* ── Архив ── */
.archive-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.player-wrap { flex: 1; background: #000; display: flex; align-items: center; justify-content: center; min-height: 0; }
.player-wrap video { max-width: 100%; max-height: 100%; }
.player-wrap .hint { color: var(--text-dim); }

/* ── плеер архива в стиле Playerjs ── */
.player-wrap .pjs { position: relative; width: 100%; height: 100%; background: #000; outline: none; overflow: hidden; }
.pjs-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; cursor: pointer; }
/* центр: большая кнопка play (на паузе) + спиннер (при буферизации) */
.pjs-center { position: absolute; inset: 0; pointer-events: none; }
.pjs-bigplay {
  position: absolute; top: 50%; left: 50%; width: 74px; height: 74px; border-radius: 50%;
  border: none; cursor: pointer; pointer-events: auto; background: rgba(10,12,18,.55); color: #fff;
  font-size: 26px; padding-left: 5px; opacity: 0; transition: opacity .15s, transform .15s;
  transform: translate(-50%, -50%) scale(.9);
}
.pjs.paused:not(.buffering) .pjs-bigplay { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pjs-bigplay:hover { background: rgba(10,12,18,.82); }
.pjs-spinner {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 3px solid rgba(255,255,255,.22); border-top-color: #fff; border-radius: 50%; opacity: 0;
}
.pjs.buffering .pjs-spinner { opacity: 1; animation: pjs-spin .8s linear infinite; }
@keyframes pjs-spin { to { transform: rotate(360deg); } }
/* нижняя панель управления */
.pjs-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 26px 14px 11px;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.pjs.show .pjs-bar, .pjs:hover .pjs-bar, .pjs.paused .pjs-bar { opacity: 1; transform: none; }
.pjs-btn {
  background: none; border: none; color: #fff; cursor: pointer; font-size: 16px; line-height: 1;
  padding: 5px 7px; border-radius: 5px; opacity: .9; transition: background .12s, opacity .12s;
}
.pjs-btn:hover { opacity: 1; background: rgba(255,255,255,.14); }
.pjs-time, .pjs-dur { color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; opacity: .92; }
/* шкала перемотки */
.pjs-seek { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); cursor: pointer; touch-action: none; }
.pjs-seek:hover { height: 7px; }
.pjs-buf { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.35); border-radius: 3px; }
.pjs-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #e23b3b; border-radius: 3px; }
.pjs-knob {
  position: absolute; top: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;
  background: #e23b3b; box-shadow: 0 0 4px rgba(0,0,0,.5); transform: translateY(-50%) scale(0); transition: transform .12s;
}
.pjs-seek:hover .pjs-knob, .pjs.show .pjs-knob { transform: translateY(-50%) scale(1); }
.pjs.fs:not(.show) { cursor: none; }

/* DVR-таймлайн архива: лента тащится мышью/колесом, красный указатель зафиксирован по центру */
.timeline {
  height: 96px; background: var(--panel); border-top: 1px solid var(--border);
  overflow: hidden; position: relative; cursor: grab; user-select: none; touch-action: none;
}
.timeline.grabbing { cursor: grabbing; }
.tl-track { position: absolute; top: 0; bottom: 0; left: 0; will-change: transform; }
/* деления времени */
.tl-tick { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--border); }
.tl-tick.hour { border-left-color: #3a4254; }
.tl-tick > span {
  position: absolute; top: 7px; left: 5px; font-size: 11px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tl-tick.hour > span { color: var(--text); }
/* полоса записей (жёлтая) */
.tl-seg {
  position: absolute; top: 36px; height: 40px; background: #e9c46a; border-radius: 2px;
}
.tl-seg.active { background: #f4a261; }
/* маркер «эфир» (текущее время; движется вместе с лентой) */
.tl-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--ok); z-index: 3; }
.tl-now > span {
  position: absolute; top: 7px; left: 4px; font-size: 10px; font-weight: 700; color: var(--ok); white-space: nowrap;
}
/* фиксированный красный указатель по центру (playhead) */
.tl-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; border-left: 2px solid #e03131; z-index: 6; pointer-events: none; }
.tl-center::after {
  content: ""; position: absolute; top: 0; left: 0; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #e03131; border-bottom: 0;
}
.tl-center > span {
  position: absolute; top: 6px; left: 0; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: #fff; background: #e03131;
  padding: 1px 6px; border-radius: 3px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tl-empty {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: var(--text-dim); pointer-events: none;
}

.muted { color: var(--text-dim); }
.empty-state { padding: 40px; text-align: center; color: var(--text-dim); }

/* ── Редактор раскладки ── */
.layout-grid { display: grid; gap: 8px; }
.lcell { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.lcell-no { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.lcell select { width: 100%; }

/* ── Страница входа ── */
.login-body {
  display: flex; align-items: center; justify-content: center; height: 100%;
  background: radial-gradient(circle at 50% 30%, #1a1014, var(--bg));
}
.login-card {
  width: 320px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px 26px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.login-brand { font-size: 26px; text-align: center; }
.login-sub { text-align: center; color: var(--text-dim); font-size: 13px; margin-bottom: 8px; }
.login-card input {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 11px 13px; border-radius: 7px; font-size: 14px;
}
.login-card input:focus { outline: none; border-color: #c0392b; }
.login-card button {
  background: var(--accent); border: 1px solid #c0392b; color: #fff; font-weight: 600;
  padding: 11px; border-radius: 7px; cursor: pointer; margin-top: 4px;
}
.login-card button:hover { background: var(--accent-2); }
.login-err { color: #e57373; font-size: 13px; text-align: center; min-height: 18px; }

/* ── Настройки ── */
.settings-main { flex: 1; overflow-y: auto; padding: 20px; }
.settings-main .wrap { max-width: 920px; margin: 0 auto; }

/* Вкладки (как в браузере) */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--text-dim); padding: 10px 18px; cursor: pointer; font-size: 14px; font-weight: 500;
}
.tab:hover { color: var(--text); }
.tab.active { color: #fff; border-bottom-color: #c0392b; }
.tab-panel[hidden] { display: none; }
/* ряд настроек профиля: слева — ровная сетка параметров, справа — «Готовый профиль» */
.tr-row { display: flex; gap: 18px; margin-top: 10px; padding-left: 28px; align-items: flex-start; }
.tr-row[hidden] { display: none; }
.tr-params { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; align-items: end; }
.tr-quality { flex: 0 0 auto; }
.tr-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-dim); }
.tr-params select, .tr-params input[type="number"] { display: block; width: 100%; }
.tr-quality select { display: block; min-width: 120px; }
.tr-row select:disabled, .tr-row input:disabled { opacity: .4; cursor: not-allowed; }
/* блок профиля: режим (свой плеер / перекодировать) + ряд параметров */
.tr-block { padding: 12px 0; border-top: 1px solid var(--border); }
.tr-block:first-of-type { border-top: none; padding-top: 0; }
.tr-block h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
/* 3-позиционный сегментированный переключатель режима */
.seg-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; background: var(--panel-2);
}
.seg-toggle label {
  display: flex; align-items: center; cursor: pointer; border-right: 1px solid var(--border);
}
.seg-toggle label:last-child { border-right: none; }
.seg-toggle input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.seg-toggle span {
  padding: 7px 14px; font-size: 13px; color: var(--text-dim);
  white-space: nowrap; transition: background .12s, color .12s;
}
.seg-toggle label:hover span { color: var(--text); }
.seg-toggle input:checked + span { background: var(--accent); color: #fff; }
.tab[hidden], .card[hidden] { display: none; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 18px;
}
.card h2 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-head h2 { margin: 0; }

/* ── Модальное окно ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  width: 440px; max-width: calc(100vw - 32px); background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px;
  box-shadow: 0 16px 50px rgba(0,0,0,.55);
}
.modal h3 { margin: 0 0 18px; font-size: 17px; }
.modal .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal label.fl { color: var(--text-dim); font-size: 12px; }
.modal input[type="text"], .modal input[type="password"] {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 9px 11px; border-radius: 7px; font-size: 14px; width: 100%;
}
.modal input[type="text"]:focus, .modal input[type="password"]:focus { outline: none; border-color: #c0392b; }
.modal input:disabled { opacity: .5; }
.modal .switch-field { flex-direction: row; align-items: center; gap: 10px; }
.modal .err { color: #e57373; font-size: 13px; min-height: 18px; margin-bottom: 4px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal #modal-save { background: var(--accent); border-color: #c0392b; color: #fff; font-weight: 600; }
.modal #modal-save:hover { background: var(--accent-2); }
.kv { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; }
.kv .k { color: var(--text-dim); }
.kv .v { font-variant-numeric: tabular-nums; }
table.cams { width: 100%; border-collapse: collapse; }
table.cams th, table.cams td {
  text-align: left; padding: 2px 10px; border-bottom: 1px solid var(--border);
  font-size: 12px; line-height: 1.35;
}
table.cams th { color: var(--text-dim); font-weight: 500; font-size: 11px; padding: 4px 10px; }
table.cams td.actions { white-space: nowrap; text-align: right; }
table.cams tr.slot-empty td { opacity: .5; }
/* строка-контейнер лога не должна занимать высоту, пока лог скрыт */
table.cams tr.logrow > td { padding: 0; border: none; }

/* ── Инлайн-редактор строки (вместо всплывающего окна) ── */
.cam-edit { background: var(--panel-2); padding: 12px 12px 14px; }
.cam-edit-grid { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.cam-edit-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); }
.cam-edit-grid input[type="text"], .cam-edit-grid input[type="password"] {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  padding: 7px 9px; border-radius: 6px; font-size: 13px; width: 150px;
}
.cam-edit-grid #e-id, .cam-edit-grid #e-ip { width: 130px; }
.cam-edit-grid #e-main, .cam-edit-grid #e-sub { width: 178px; }
.cam-edit-grid input:focus { outline: none; border-color: #c0392b; }
.cam-edit-grid input:disabled { opacity: .5; }
.cam-edit-grid label.sw { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.cam-edit-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cam-edit-foot .err { color: #e57373; font-size: 12px; flex: 1; }
.cam-edit-foot [data-act="save-edit"] { background: var(--accent); border-color: #c0392b; color: #fff; font-weight: 600; }
.cam-bulk-head { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; letter-spacing: .3px; }
button.primary { background: var(--accent); border-color: #c0392b; color: #fff; font-weight: 600; }
button.danger { border-color: #c0392b; color: #e74c3c; }
button.danger:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
table.cams td.actions button { padding: 2px 8px; font-size: 12px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px;
  border-radius: 11px; font-size: 12px; background: var(--panel-2);
}
.logbox {
  margin: 4px 10px 12px; padding: 10px; background: #05070a; border: 1px solid var(--border);
  border-radius: 6px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px; color: var(--text-dim); white-space: pre-wrap; max-height: 220px; overflow: auto;
}