:root {
  --bg: #0d0f13;
  --panel: #151820;
  --panel-2: #1b1f29;
  --border: #272c38;
  --text: #e7e9ef;
  --muted: #8a92a6;
  --accent: #4d9fff;
  --accent-soft: rgba(77, 159, 255, .16);
  --warn: #f5a524;
  --warn-soft: rgba(245, 165, 36, .16);
  --danger: #ef4444;
  --ok: #22c55e;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
input[type=text], input:not([type]), input[type=password], select {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; min-width: 0;
}
input[type=range] { accent-color: var(--accent); width: 100%; }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; vertical-align: middle; }
label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
label.chk, .gang, .live-bar label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
a { color: var(--accent); }
h3 { margin: 0 0 8px; font-size: 16px; }
h4 { margin: 16px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
kbd { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 11px; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.muted { color: var(--muted); } .sm { font-size: 12px; } .xs { font-size: 10px; letter-spacing: .08em; }
.spacer, .grow { flex: 1; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 0; }
.pad { padding: 0 16px; }
[hidden] { display: none !important; }

/* buttons */
.btn {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: #3a4152; background: #212633; }
.btn:active { transform: translateY(1px); }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn.icon { padding: 6px 9px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #051021; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.danger { border-color: rgba(239, 68, 68, .5); color: #ff8a8a; }
.btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn.tally-red { border-color: rgba(239, 68, 68, .6); }
.btn.tally-green { border-color: rgba(34, 197, 94, .6); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 20px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { font-weight: 800; letter-spacing: .02em; font-size: 16px; }
.brand span { color: var(--accent); font-weight: 600; }
.tabs, .subtabs { display: flex; gap: 4px; }
.tabs button, .subtabs button { background: none; border: 0; padding: 7px 12px; border-radius: 7px; color: var(--muted); cursor: pointer; }
.tabs button.active, .subtabs button.active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.top-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pill { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--border); }
.pill.ok { color: var(--ok); } .pill.bad { color: var(--warn); }

.view { display: none; flex: 1; min-height: 0; }
.view.active { display: flex; }
#view-match.active, #view-profiles.active, #view-scenes.active { flex-direction: column; overflow: auto; }

/* camera grid */
.grid-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
.toolbar label:not(.chk):not(.gang) { flex-direction: row; align-items: center; gap: 6px; }
.seg { display: flex; gap: 4px; }
.gang b { font-weight: 500; color: var(--muted); font-size: 12px; }
.cam-grid {
  flex: 1; overflow: auto; padding: 0 16px 16px;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); align-content: start;
}
.tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s;
}
.tile:hover { border-color: #3a4152; }
.tile.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tile.checked { background: #172033; }
.tile.tally-red { box-shadow: 0 0 0 3px var(--danger); }
.tile.tally-green { box-shadow: 0 0 0 3px var(--ok); }
.tile.offline { opacity: .55; }
.thumb { aspect-ratio: 16/9; background: #06070a center/cover no-repeat; position: relative; }
.thumb img, .thumb .thumb-canvas { width: 100%; height: 100%; object-fit: cover; display: block; background: #06070a; }
.thumb .ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 35%, transparent 65%, rgba(0,0,0,.6)); }
.ov-top { display: flex; align-items: flex-start; gap: 8px; }
.cam-name { font-weight: 700; font-size: 15px; text-shadow: 0 1px 2px #000; }
.cam-ip { font-size: 11px; color: #c8cdd8; text-shadow: 0 1px 2px #000; }
.tile .chk { margin-left: auto; }
.tile .chk input { width: 20px; height: 20px; }
.badges { display: flex; gap: 5px; align-items: center; }
.badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.15); letter-spacing: .04em; }
.badge.rec { background: var(--danger); border-color: var(--danger); color: #fff; }
.badge.warn { background: var(--warn); border-color: var(--warn); color: #1a1000; }
.badge.moving { color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.stat { background: var(--panel); padding: 5px 4px; text-align: center; }
.stat b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600; }
.stat span { font-size: 9px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.stat.diff b { color: var(--warn); }
.tile .err { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; font-size: 12px; color: var(--warn); }

/* side panel */
.panel { width: 460px; flex: none; background: var(--panel); border-left: 1px solid var(--border); overflow-y: auto; padding: 14px 16px 24px; }
.empty { color: var(--muted); text-align: center; margin-top: 40%; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.panel-title { font-size: 18px; font-weight: 700; }
#pTargets { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
#pTargets:empty { display: none; }
.live { position: relative; aspect-ratio: 16/9; background: #06070a; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.live img, .live canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.live-bar { align-items: center; gap: 8px; }
.live-bar select { padding: 1px 4px; font-size: 11px; background: rgba(0,0,0,.55); }
.live-stats { font-size: 11px; color: #cfd5e2; text-shadow: 0 1px 2px #000; margin-right: auto; }
.live-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 6px 8px; background: linear-gradient(transparent, rgba(0,0,0,.7)); z-index: 2; }
.rec { color: #fff; background: var(--danger); font-weight: 700; font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.subtabs { margin: 12px 0 10px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.sub { display: none; } .sub.active { display: block; }
.row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.row.wrap { flex-wrap: wrap; } .row.end { justify-content: flex-end; }
.row label.grow { flex-direction: row; align-items: center; gap: 10px; }

/* PTZ */
.ptz { display: flex; gap: 12px; justify-content: center; align-items: center; margin: 6px 0 10px; user-select: none; }
.pad { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); gap: 4px; flex: none; }
.pad button { background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text);
  font-size: 13px; cursor: pointer; display: grid; place-items: center; }
.pad button:hover { border-color: var(--accent); }
.pad button:active, .pad button.held { background: var(--accent); border-color: var(--accent); color: #051021; }
.pad .pad-home { font-size: 15px; color: var(--muted); }
.joy { width: 180px; height: 180px; border-radius: 50%; position: relative; touch-action: none; cursor: grab;
  background: radial-gradient(circle, #222838 0%, #181c26 60%, #11141b 100%); border: 1px solid var(--border); }
.joy-cross { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--border), var(--border)) center/1px 100% no-repeat, linear-gradient(var(--border), var(--border)) center/100% 1px no-repeat; opacity: .6; border-radius: 50%; }
.joy-knob { position: absolute; width: 54px; height: 54px; left: 50%; top: 50%; margin: -27px 0 0 -27px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #6fb2ff, #2f6fc2); box-shadow: 0 4px 16px rgba(0,0,0,.5); pointer-events: none; transition: transform .12s; }
.joy.dragging .joy-knob { transition: none; }
.zoom-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zoom { width: 42px; height: 170px; border-radius: 23px; background: #161a23; border: 1px solid var(--border); position: relative; touch-action: none; cursor: grab; }
.zoom-knob { position: absolute; left: 4px; width: 36px; height: 36px; top: 50%; margin-top: -18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9aa5bb, #535c70); pointer-events: none; transition: transform .12s; }
.zoom.dragging .zoom-knob { transition: none; }

.ticks { gap: 6px; }
.ticks .tick { width: 38px; justify-content: center; padding: 5px 0; font-size: 13px; }
.ticks select { margin-left: auto; }

/* presets */
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preset { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; }
.preset:hover { border-color: var(--accent); }
.preset .pimg { aspect-ratio: 16/9; background: #06070a center/cover no-repeat; display: grid; place-items: center; color: var(--muted); font-size: 22px; font-weight: 700; }
.preset .pname { padding: 4px 6px; font-size: 12px; display: flex; gap: 4px; align-items: center; }
.preset .pname b { color: var(--accent); }
.preset .pname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.preset .pmenu { position: absolute; top: 4px; right: 4px; display: none; gap: 3px; }
.preset:hover .pmenu { display: flex; }
.pmenu button { background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.2); border-radius: 5px; font-size: 11px; padding: 1px 5px; cursor: pointer; }

/* image controls */
.ctl-group { border: 1px solid var(--border); border-radius: 8px; margin: 10px 0; }
.ctl-group > summary { padding: 8px 10px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.ctl-group > summary::after { content: "▾"; color: var(--muted); }
.ctl-group:not([open]) > summary::after { content: "▸"; }
.ctl { display: grid; grid-template-columns: 130px 1fr 72px; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid rgba(255,255,255,.04); }
.ctl > span:first-child { color: var(--muted); font-size: 12px; }
.ctl .val { text-align: right; font-size: 12px; }
.ctl.locked { opacity: .45; }
.ctl select { width: 100%; }
.toggle { justify-self: start; }

/* match matrix */
.table-wrap { overflow: auto; padding: 0 16px 24px; }
.matrix { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.matrix th, .matrix td { padding: 5px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: center; }
.matrix thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; vertical-align: bottom; }
.matrix th:first-child, .matrix td:first-child { position: sticky; left: 0; background: var(--bg); text-align: left; z-index: 1; }
.matrix thead th:first-child { z-index: 3; background: var(--panel); }
.matrix tr.group td { background: var(--panel-2); font-weight: 700; text-align: left; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.matrix td.diff { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.matrix td.ref, .matrix th.ref { background: var(--accent-soft); }
.matrix td.na { color: #4b5263; }
.matrix .colhead { display: flex; flex-direction: column; align-items: center; gap: 3px; }

/* cards / profiles / scenes */
.two-col { display: flex; gap: 16px; padding: 16px; align-items: flex-start; flex-wrap: wrap; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { flex-direction: row; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--border); padding: 4px 9px; border-radius: 99px; font-size: 12px; color: var(--text); }
.item { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel-2); }
.item-head { display: flex; align-items: center; gap: 8px; }
.item-head b { font-size: 14px; }
.targets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.targets label { flex-direction: row; align-items: center; gap: 4px; font-size: 12px; color: var(--text); }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 14px; font-size: 12px; margin-top: 8px; }
.kv div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--border); padding: 2px 0; }
.kv span { color: var(--muted); }
.scene-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.scene { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.scene .go { font-size: 16px; font-weight: 700; padding: 14px; justify-content: center; }
.shot-row { display: grid; grid-template-columns: 1fr 160px; gap: 8px; align-items: center; margin: 4px 0; font-size: 13px; }

/* firmware */
#view-firmware.active { flex-direction: column; overflow: auto; }
.fw-side { width: 440px; flex: none; }
.fw-side h3 { margin-top: 10px; }
.fw-check { display: flex; flex-direction: column; gap: 6px; }
.fw-file { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 4px 0; cursor: pointer; }
.fw-file.selected { border-color: var(--accent); background: var(--accent-soft); }
.fw-file.invalid { opacity: .55; cursor: not-allowed; }
.fw-file .ver { font-weight: 800; font-size: 16px; color: var(--accent); min-width: 44px; }
.fw-file .meta { font-size: 11px; color: var(--muted); word-break: break-all; }
.fw-table-wrap { padding: 0; }
.fw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fw-table th, .fw-table td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.fw-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.fw-ok { color: var(--ok); } .fw-bad { color: var(--warn); } .fw-err { color: var(--danger); }
.fw-bar { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; min-width: 160px; border: 1px solid var(--border); }
.fw-bar i { display: block; height: 100%; background: var(--accent); transition: width .5s; }
.fw-bar.done i { background: var(--ok); } .fw-bar.error i { background: var(--danger); }
.fw-stage { font-size: 12px; color: var(--muted); margin-top: 3px; }
.fw-problems { font-size: 12px; color: var(--warn); }

/* full screen */
.live-bar .fs-btn { padding: 2px 8px; background: rgba(0,0,0,.55); }
#fsView { position: fixed; inset: 0; z-index: 40; background: #000; overflow: hidden; }
.fs-live, .fs-live .live { position: absolute; inset: 0; }
.fs-live .live { aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
.fs-live .live-bar { bottom: auto; top: 0; background: none; justify-content: flex-end; gap: 10px; padding: 64px 16px 0; pointer-events: none; }
.fs-live .live-bar > * { pointer-events: auto; }
.fs-live .fs-btn { display: none; }
.fs-ctl { position: absolute; transition: opacity .25s; }
#fsView.fs-hidden .fs-ctl { opacity: 0; pointer-events: none; }
.fs-top { top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,0)); }
.fs-cams { display: flex; gap: 6px; flex-wrap: wrap; }
.fs-cam { background: rgba(21,24,32,.8); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer;
  font-weight: 600; display: flex; align-items: center; gap: 6px; }
.fs-cam:hover { border-color: #4a5264; }
.fs-cam.active { background: var(--accent); border-color: var(--accent); color: #051021; }
.fs-cam.checked { box-shadow: inset 0 -3px 0 var(--warn); }
.fs-cam.tally-red { outline: 2px solid var(--danger); }
.fs-cam.tally-green { outline: 2px solid var(--ok); }
.fs-cam.offline { opacity: .4; }
.fs-cam .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.fs-cam kbd { font-size: 10px; opacity: .7; }
.fs-cam.active kbd { background: rgba(0,0,0,.18); border-color: transparent; color: #051021; }
.fs-info { top: 64px; left: 16px; background: rgba(13,15,19,.62); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 14px; }
.fs-name { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.fs-stats { display: flex; gap: 18px; margin-top: 6px; }
.fs-stats div b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.fs-stats div span { font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.fs-side { right: 16px; bottom: 120px; width: 400px; background: rgba(13,15,19,.62); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; }
.fs-bottom { left: 0; right: 0; bottom: 0; padding: 12px 16px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.8)); }
.fs-presets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.fs-preset { flex: none; width: 150px; background: rgba(21,24,32,.85) center/cover no-repeat; border: 1px solid var(--border);
  border-radius: 8px; height: 84px; cursor: pointer; position: relative; overflow: hidden; }
.fs-preset:hover { border-color: var(--accent); }
.fs-preset span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 7px; font-size: 12px; background: rgba(0,0,0,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-preset b { color: var(--accent); margin-right: 4px; }
.fs-preset.add { display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.fs-peek { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.55); font-size: 12px; }

/* dialogs & toasts */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 0; max-width: 92vw; }
dialog::backdrop { background: rgba(0,0,0,.6); }
.dlg { padding: 18px 20px; width: 560px; max-width: 100%; display: flex; flex-direction: column; gap: 8px; }
.dlg.wide { width: 780px; }
.dlg .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-row { display: grid; grid-template-columns: 100px 1fr 140px auto; gap: 8px; align-items: center; margin: 4px 0; font-size: 13px; }
.res-cam { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.res-cam ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; }
.st-set { color: var(--ok); } .st-error { color: var(--danger); } .st-skipped { color: var(--warn); } .st-same { color: var(--muted); }
#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 50; }
.toast { background: #222838; border: 1px solid var(--border); padding: 8px 14px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); font-size: 13px; max-width: 70vw; }
.toast.err { border-color: var(--danger); color: #ffb4b4; }

@media (max-width: 1000px) {
  body { overflow: auto; }
  #view-cameras.active { flex-direction: column; }
  .panel { width: auto; border-left: 0; border-top: 1px solid var(--border); }
  .topbar { flex-wrap: wrap; gap: 8px; }
}