/* ==========================================================================
   vigilsyn Design System — shared by vigilsyn Edge & vigilsyn Cloud consoles
   ========================================================================== */
:root {
  --font: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Thai", "Noto Sans Myanmar", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 12px; --radius-sm: 8px; --radius-xs: 6px;
  --sidebar-w: 252px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --bg: #081522;
  --bg-glow-1: rgba(45, 212, 191, .055);
  --bg-glow-2: rgba(45, 212, 191, .07);
  --surface: #0d1d2d;
  --surface-2: #132638;
  --surface-3: #1a3145;
  --overlay: #0d1d2d;
  --border: rgba(255, 255, 255, .065);
  --border-strong: rgba(255, 255, 255, .12);
  --text: #f3f8fc;
  --text-2: #acbdcc;
  --text-3: #8398ab;
  --accent: #2dd4bf;
  --accent-strong: #5eead4;
  --accent-soft: rgba(45, 212, 191, .12);
  --accent-ink: #062c29;
  --teal: #2dd4bf;
  --ok: #34d399; --ok-soft: rgba(52, 211, 153, .13);
  --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .13);
  --err: #fb7185; --err-soft: rgba(251, 113, 133, .13);
  --live: #ff3d5e;
  --info: #60a5fa; --info-soft: rgba(96, 165, 250, .13);
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 40px -12px rgba(0,0,0,.6);
  --shadow-pop: 0 24px 80px -16px rgba(0,0,0,.75), 0 0 0 1px var(--border-strong);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f5f8;
  --bg-glow-1: rgba(13, 148, 136, .045);
  --bg-glow-2: rgba(45, 212, 191, .07);
  --surface: #ffffff;
  --surface-2: #f6f7fa;
  --surface-3: #eef0f4;
  --overlay: rgba(244, 245, 248, .72);
  --border: rgba(15, 18, 30, .08);
  --border-strong: rgba(15, 18, 30, .14);
  --text: #11141b;
  --text-2: #4a5263;
  --text-3: #64748b;
  --accent: #0f766e;
  --accent-strong: #115e59;
  --accent-soft: rgba(15, 118, 110, .09);
  --accent-ink: #ffffff;
  --ok: #059669; --ok-soft: rgba(5, 150, 105, .10);
  --warn: #c58a06; --warn-soft: rgba(217, 119, 6, .10);
  --err: #e11d48; --err-soft: rgba(225, 29, 72, .09);
  --info: #2563eb; --info-soft: rgba(37, 99, 235, .09);
  --shadow: 0 1px 2px rgba(15,18,30,.04), 0 8px 24px -12px rgba(15,18,30,.12);
  --shadow-pop: 0 24px 60px -16px rgba(15,18,30,.25), 0 0 0 1px var(--border-strong);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text);
  background:
    radial-gradient(1200px 600px at -10% -20%, var(--bg-glow-1), transparent 60%),
    radial-gradient(900px 500px at 110% 120%, var(--bg-glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01", "ss03";
}
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-soft); }
code, .mono { font-family: var(--mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.015em; font-weight: 650; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 14.5px; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }

/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 14px; border-right: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, transparent), color-mix(in srgb, var(--bg) 70%, transparent));
  backdrop-filter: none;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.brand-mark svg { width: 26px; height: 26px; color: var(--accent); }
.brand-name { font-weight: 700; font-size: 21px; letter-spacing: -.055em; }
.brand-sub { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; }
.nav-group { margin-top: 10px; }
.nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); padding: 6px 10px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; color: var(--text-2);
  font-weight: 500; transition: background .15s, color .15s; position: relative;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--text); }
.nav-item.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent); }
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.nav-item .count { margin-left: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.userchip { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--teal)); flex: none; }
.userchip .meta { line-height: 1.2; min-width: 0; }
.userchip .meta b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .meta span { font-size: 11px; color: var(--text-3); text-transform: capitalize; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 28px;
  background: var(--overlay); backdrop-filter: none; border-bottom: 1px solid var(--border);
}
.topbar .crumbs { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; min-width: 0; }
.topbar .crumbs b { color: var(--text); font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }
.search-trigger {
  display: flex; align-items: center; gap: 10px; min-width: 260px; height: 36px; padding: 0 10px 0 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-3); cursor: pointer; font: inherit;
}
.search-trigger:hover { border-color: var(--border-strong); color: var(--text-2); }
.search-trigger svg { width: 15px; height: 15px; }
.search-trigger .kbd { margin-left: auto; }
.page { padding: 26px 28px 60px; max-width: 1640px; width: 100%; margin: 0 auto; animation: pagein .16s var(--ease); }
@keyframes pagein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head p { color: var(--text-2); margin-top: 4px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.muted { color: var(--text-2); } .faint { color: var(--text-3); } .small { font-size: 12.5px; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; }
.hide { display: none !important; }

/* ---------- Cards & KPIs ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 18px 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.card-head h3 { display: flex; align-items: center; gap: 9px; }
.card-head h3 svg { width: 16px; height: 16px; color: var(--text-3); }
.card-body { padding: 18px 20px; }
.kpi { padding: 18px 20px; position: relative; overflow: hidden; }
.kpi .label { color: var(--text-2); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.kpi .label svg { width: 15px; height: 15px; color: var(--text-3); }
.kpi .value { font-size: 30px; font-weight: 680; letter-spacing: -.03em; margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .value small { font-size: 14px; color: var(--text-3); font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.kpi .sub { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.kpi .spark { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 44px; opacity: .55; pointer-events: none; }
.kpi.accent::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(400px 120px at 100% 0%, var(--accent-soft), transparent 70%); }

/* ---------- Buttons & inputs ---------- */
.btn {
  --b: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--border-strong); background: var(--b); color: var(--text); font: inherit; font-weight: 560;
  cursor: pointer; transition: transform .08s, background .15s, border-color .15s, box-shadow .15s; white-space: nowrap; text-decoration: none !important;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); box-shadow: none; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--err); }
.btn.danger.solid { background: var(--err); color: #fff; border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn.icon { width: 36px; padding: 0; }
.btn.sm.icon { width: 30px; }
.btn.loading { pointer-events: none; opacity: .75; }
.btn.loading::after { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label-text { font-size: 12.5px; font-weight: 560; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--text-3); }
.input, .select, textarea.input {
  width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s;
}
textarea.input { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; font-family: var(--mono); font-size: 12.5px; }
.input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238891a0' stroke-width='2'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; height: 38px; border-left: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-section { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); grid-column: 1 / -1; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--border); }

.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 36px; height: 21px; border-radius: 21px; background: var(--surface-3); border: 1px solid var(--border-strong); position: relative; transition: background .2s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--text-2); transition: transform .2s var(--ease), background .2s; }
.switch input:checked + .track { background: var(--accent); border-color: transparent; }
.switch input:checked + .track::after { transform: translateX(15px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.seg button { height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font: inherit; font-weight: 560; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button svg { width: 15px; height: 15px; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 0 0 1px var(--border); }
.check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ---------- Badges & status ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--err-soft); color: var(--err); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.accent { background: var(--accent-soft); color: var(--accent-strong); }
.badge.live { background: var(--live); color: #fff; letter-spacing: .06em; }
.badge.outline { background: transparent; border: 1px solid var(--border-strong); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; display: inline-block; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dot.err { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
.dot.live { background: var(--live); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,61,94,.55); } 70% { box-shadow: 0 0 0 8px rgba(255,61,94,0); } 100% { box-shadow: 0 0 0 0 rgba(255,61,94,0); } }
.kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--text-2); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); padding: 11px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--surface); }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.table tr.clickable { cursor: pointer; }
.table .t-title { font-weight: 600; }
.table .t-sub { font-size: 12px; color: var(--text-3); }
.cell-thumb { width: 72px; height: 40px; border-radius: 7px; object-fit: cover; background: var(--surface-3); display: block; }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .search { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.toolbar .search svg { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; color: var(--text-3); }
.toolbar .search .input { padding-left: 36px; }
.bulkbar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); margin-bottom: 14px; animation: pagein .2s; }

/* ---------- Camera tiles ---------- */
.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cam-tile { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer; transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.cam-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-pop); }
.cam-media { position: relative; aspect-ratio: 16 / 9; background: #050608; overflow: hidden; }
.cam-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s; }
.cam-media .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #3a404c; background: repeating-linear-gradient(45deg, #0b0d11 0 12px, #0d1014 12px 24px); }
.cam-media .ph svg { width: 34px; height: 34px; }
.cam-media .tl { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; gap: 6px; }
.cam-media .tr { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; gap: 6px; }
.cam-media .glass { backdrop-filter: none; background: rgba(5, 6, 8, .55); color: #e8ebf0; border: 1px solid rgba(255,255,255,.08); }
.cam-media::after { content: ""; position: absolute; z-index: 1; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; }
.cam-media .bl { position: absolute; left: 12px; bottom: 9px; z-index: 2; color: #fff; font-size: 11.5px; font-family: var(--mono); opacity: .85; }
.cam-info { padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.cam-info .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-info .loc { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-info .grow { min-width: 0; flex: 1; }

/* ---------- Live wall ---------- */
.wall { display: grid; gap: 8px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.wall.w1 { --cols: 1; } .wall.w2 { --cols: 2; } .wall.w3 { --cols: 3; } .wall.w4 { --cols: 4; }
.wall.s5 { --cols: 3; } .wall.s7 { --cols: 4; }
.wall.s5 .wall-cell.big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.wall.s7 .wall-cell.big { grid-column: span 3; grid-row: span 3; aspect-ratio: auto; }
.wall-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; }
.wall-strip { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall-strip b { color: var(--text); }
.wall-wrap { position: relative; }
.wall-fs-strip { display: none; }
.wall-wrap:fullscreen, .wall-wrap.fs { background: #000; padding: 6px 6px 30px; overflow: hidden; }
.wall-wrap.fs { position: fixed; inset: 0; z-index: 100; }
.wall-wrap:fullscreen .wall, .wall-wrap.fs .wall { height: calc(100vh - 36px); grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)); gap: 4px; }
.wall-wrap:fullscreen .wall-cell, .wall-wrap.fs .wall-cell { aspect-ratio: auto; border-radius: 6px; border-color: #111; }
.wall-wrap:fullscreen .wall-fs-strip, .wall-wrap.fs .wall-fs-strip { display: flex; align-items: center; gap: 6px; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 22px; color: #aab; font-size: 12px; font-variant-numeric: tabular-nums; }
.wall-fs-strip b { color: #fff; }
.cell-act { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; z-index: 2; }
.wall-cell:hover .cell-act { opacity: 1; }
.cell-act button, .cell-act a { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(8, 9, 12, .6); backdrop-filter: none; color: #fff; border: 0; cursor: pointer; }
.cell-act button:hover, .cell-act a:hover { background: var(--accent); }
.cell-act svg { width: 14px; height: 14px; }
.wall-cell { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #050608; border: 1px solid var(--border); }
.wall-cell vigil-player { width: 100%; height: 100%; display: block; }
.wall-cell.empty { display: grid; place-items: center; color: var(--text-3); border-style: dashed; background: transparent; cursor: pointer; }
.wall-cell.empty:hover { border-color: var(--accent); color: var(--accent-strong); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tabs button { position: relative; height: 40px; padding: 0 14px; border: 0; background: none; color: var(--text-2); font: inherit; font-weight: 560; cursor: pointer; }
.tabs button.on { color: var(--text); }
/* 2.11: the active tab is underlined by border-bottom (below); the old ::after underline lost its positioned parent after "all: unset" and drew a line across the whole window */

/* ---------- Key/value ---------- */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: 13.5px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
pre.code { margin: 0; padding: 14px 16px; border-radius: 11px; background: #0a0c10; border: 1px solid var(--border); color: #d6dbe4; font-family: var(--mono); font-size: 12.3px; line-height: 1.6; overflow-x: auto; white-space: pre; position: relative; }
:root[data-theme="light"] pre.code { background: #11141b; }
.copyable { position: relative; }
.copyable .copy-btn { position: absolute; top: 8px; right: 8px; }
.secret-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 11px; border: 1px dashed color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-soft); font-family: var(--mono); font-size: 12.5px; word-break: break-all; }

/* ---------- Empty / skeleton / callout ---------- */
.empty { text-align: center; padding: 56px 20px; color: var(--text-2); }
.empty .ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); }
.empty .ico svg { width: 26px; height: 26px; }
.empty h3 { color: var(--text); margin-bottom: 6px; font-size: 16px; }
.empty p { max-width: 440px; margin: 0 auto 18px; }
.skel { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.callout { display: flex; gap: 12px; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.callout svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.callout.info { background: var(--info-soft); border-color: transparent; } .callout.info svg { color: var(--info); }
.callout.warn { background: var(--warn-soft); border-color: transparent; } .callout.warn svg { color: var(--warn); }
.callout.ok { background: var(--ok-soft); border-color: transparent; } .callout.ok svg { color: var(--ok); }
.callout.err { background: var(--err-soft); border-color: transparent; } .callout.err svg { color: var(--err); }
.callout b { color: var(--text); }

/* ---------- Progress & meters ---------- */
.meter { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width .5s var(--ease); }
.meter.warn > i { background: var(--warn); } .meter.err > i { background: var(--err); }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(4, 5, 8, .6); backdrop-filter: blur(6px); animation: fade .18s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(560px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-pop); animation: pop .22s var(--ease); }
.modal.wide { width: min(860px, 100%); }
.modal.xwide { width: min(1180px, 100%); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.modal-head h2 { font-size: 17px; }
.modal-body { padding: 16px 22px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--border); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: flex-start; gap: 10px; min-width: 280px; max-width: 420px; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop); font-size: 13.5px; animation: pop .25s var(--ease); }
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.toast.ok svg { color: var(--ok); } .toast.err svg { color: var(--err); } .toast.info svg { color: var(--info); }
.toast.out { opacity: 0; transform: translateX(16px); transition: all .25s; }

/* ---------- Command palette ---------- */
.cmdk { width: min(620px, 100%); align-self: start; margin-top: 12vh; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-pop); overflow: hidden; animation: pop .18s var(--ease); }
.cmdk-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.cmdk-input svg { width: 18px; height: 18px; color: var(--text-3); }
.cmdk-input input { flex: 1; height: 54px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15.5px; outline: none; }
.cmdk-list { max-height: 380px; overflow-y: auto; padding: 8px; }
.cmdk-group { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); padding: 8px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; cursor: pointer; color: var(--text-2); }
.cmdk-item svg { width: 16px; height: 16px; }
.cmdk-item .hint { margin-left: auto; font-size: 12px; color: var(--text-3); }
.cmdk-item.sel { background: var(--accent-soft); color: var(--text); }

/* ---------- Login ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-art { position: relative; overflow: hidden; border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; padding: 40px; background: radial-gradient(800px 500px at 20% 20%, var(--bg-glow-1), transparent 60%), radial-gradient(700px 500px at 90% 90%, var(--bg-glow-2), transparent 60%); }
.auth-art .mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 10px; opacity: .22; transform: rotate(-8deg) scale(1.3); mask-image: radial-gradient(closest-side, #000, transparent); }
.auth-art .mosaic i { aspect-ratio: 16/9; border-radius: 10px; border: 1px solid var(--border-strong); background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.auth-art .mosaic i:nth-child(5n) { background: linear-gradient(135deg, var(--accent-soft), var(--surface)); }
.auth-art .mosaic i:nth-child(7n) { border-color: color-mix(in srgb, var(--live) 50%, transparent); }
.auth-art .headline { position: relative; font-size: 40px; line-height: 1.08; font-weight: 720; letter-spacing: -.035em; max-width: 520px; }
.auth-art .headline span { background: linear-gradient(90deg, var(--accent-strong), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-art .tag { position: relative; color: var(--text-2); max-width: 460px; margin-top: 14px; font-size: 15px; }
.auth-form { display: grid; place-items: center; padding: 40px; }
.auth-form form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; }
.auth-form h1 { font-size: 26px; letter-spacing: -.03em; }

/* ---------- Charts ---------- */
.chart { width: 100%; height: 160px; display: block; }
.chart .grid-line { stroke: var(--border); }
.chart .axis { fill: var(--text-3); font-size: 10.5px; font-family: var(--mono); }

/* ---------- Steps ---------- */
.steps { counter-reset: s; display: flex; flex-direction: column; gap: 16px; }
.step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.step::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; background: var(--accent-soft); color: var(--accent-strong); }
.step h3 { margin-bottom: 6px; }

/* ---------- Topology diagram ---------- */
.topo { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.topo .node { padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); text-align: center; }
.topo .node svg { width: 22px; height: 22px; color: var(--accent-strong); }
.topo .node b { display: block; margin-top: 6px; font-size: 13px; }
.topo .node span { font-size: 11.5px; color: var(--text-3); }
.topo .link { width: 70px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: flow 1s linear infinite; position: relative; }
.topo .link.down { background: repeating-linear-gradient(90deg, var(--err) 0 6px, transparent 6px 12px); animation: none; opacity: .6; }
@keyframes flow { to { background-position: 24px 0; } }

/* ---------- Dropzone ---------- */
.dropzone { border: 1.5px dashed var(--border-strong); border-radius: 14px; padding: 26px; text-align: center; color: var(--text-2); transition: border-color .15s, background .15s; cursor: pointer; }
.dropzone.over, .dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Responsive ---------- */
.mobile-nav { display: none; }
@media (max-width: 1180px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 150; left: 0; width: 270px; transform: translateX(-100%); transition: transform .25s var(--ease); background: var(--surface); }
  .shell.nav-open .sidebar { transform: none; box-shadow: var(--shadow-pop); }
  .mobile-nav { display: inline-flex; }
  .search-trigger { min-width: 0; } .search-trigger .label, .search-trigger .kbd { display: none; }
  .topbar, .page { padding-left: 16px; padding-right: 16px; }
  .g2, .g3, .g4, .form-grid { grid-template-columns: 1fr; } .span2 { grid-column: auto; }
  .auth-wrap { grid-template-columns: 1fr; } .auth-art { display: none; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 8px; }
  .wall { --cols: 1 !important; } .wall .wall-cell.big { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9; } .wall-strip { margin-left: 0; }
  .topo { grid-template-columns: 1fr; } .topo .link { width: 2px; height: 26px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px); background-size: 2px 24px; } .topo .link.down { background: repeating-linear-gradient(180deg, var(--err) 0 6px, transparent 6px 12px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- transport choice cards (Add site) ---------- */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.choice { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
.choice:hover { border-color: var(--accent); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .ci { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.choice .ci svg { width: 18px; height: 18px; }
.choice b { display: block; font-size: 13.5px; }
.choice .cd { color: var(--text-3); font-size: 12px; line-height: 1.45; margin-top: 3px; }
.choice b .badge { height: 18px; padding: 0 7px; font-size: 10.5px; margin-left: 4px; vertical-align: 1px; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice:has(input:checked) .ci { background: var(--accent); color: var(--accent-ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.transport-pill { display: inline-flex; align-items: center; gap: 6px; }
.transport-pill svg { width: 12px; height: 12px; }

/* ---------- recordings timeline ---------- */
/* 2.11 recording player: toolbar · video · transport · zoomable timeline · clip cutter */
.rec { display: flex; flex-direction: column; gap: 0; outline: none; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.rec:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.rec-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.rec-day { display: flex; align-items: center; gap: 2px; }
.rec-date, .rec-find { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-3); }
.rec-date svg, .rec-find svg { width: 15px; height: 15px; flex: none; }
.rec-date input, .rec-find input { all: unset; font: 500 13px var(--font); color: var(--text); width: 118px; color-scheme: inherit; }
.rec-find input { width: 186px; font-family: var(--mono); font-size: 12px; }
.rec-date:focus-within, .rec-find:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.rec-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-sum .chip { height: 24px; padding: 0 8px; font-size: 11.5px; }
.rec-sum .chip svg { width: 13px; height: 13px; }
.rec-sum .chip.ev { color: var(--warn); }
.rec-dl { display: flex; gap: 6px; }
.rec-dl .select { height: 32px; width: auto; }
.rec-video { position: relative; background: #000; aspect-ratio: 16/9; overflow: hidden; }
.rec-video:fullscreen { aspect-ratio: auto; }
.rec-video video { width: 100%; height: 100%; display: block; object-fit: contain; cursor: pointer; }
.rec-osd { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.rec-osd[hidden] { display: none; }
.rec-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(8,9,12,.62); backdrop-filter: blur(6px); color: #fff; font: 700 10.5px var(--font); letter-spacing: .08em; }
.rec-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--info, #4da3ff); }
.rec.playing .rec-tag i { animation: vg-blink 1.4s steps(2, jump-none) infinite; }
.rec-clock { padding: 3px 9px; border-radius: 6px; background: rgba(8,9,12,.62); backdrop-filter: blur(6px); color: #fff; font: 600 12.5px var(--mono); white-space: pre; }
.rec-osd-sp { margin-left: auto; padding: 3px 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: 700 11px var(--mono); }
.rec-osd-sp:empty { display: none; }
.rec-buf { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.rec-buf[hidden] { display: none; }
.rec-buf span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: #fff; animation: vg-spin .8s linear infinite; }
.rec-big { all: unset; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(8,9,12,.55); backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255,255,255,.18); transition: transform .18s var(--ease), background .18s; animation: vg-pop .25s var(--ease); }
.rec-big:hover { transform: scale(1.06); background: var(--accent); color: var(--accent-ink); }
.rec-big svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.rec-big[hidden] { display: none; }
.rec-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: rgba(255,255,255,.62); text-align: center; padding: 20px; font-size: 13.5px; background: radial-gradient(ellipse at center, rgba(255,255,255,.04), transparent 70%); }
.rec-empty-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.rec-empty svg { width: 26px; height: 26px; }
.rec-empty[hidden] { display: none; }
.rec-transport { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.rec-tbtns { display: flex; align-items: center; gap: 2px; }
.rec-tb { all: unset; box-sizing: border-box; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; color: var(--text-2); transition: background .15s, color .15s, transform .1s; }
.rec-tb:hover { background: var(--surface-3); color: var(--text); }
.rec-tb:active { transform: scale(.92); }
.rec-tb svg { width: 18px; height: 18px; }
.rec-tb .i-play, .rec-tb .i-pause, .rec-tb .i-skipBack path:first-child, .rec-tb .i-skipForward path:first-child { fill: currentColor; }
.rec-pp { width: 42px; height: 42px; border-radius: 50%; margin: 0 4px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.rec-pp:hover { background: var(--accent-strong, var(--accent)); color: var(--accent-ink); }
.rec-pp .i-play { margin-left: 2px; }
.rec-now { display: grid; line-height: 1.15; }
.rec-now b { font: 650 19px var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.rec-now span { font-size: 11.5px; color: var(--text-3); }
.rec-speed button { min-width: 34px; font-variant-numeric: tabular-nums; }
.rec-tlbox { padding: 10px 12px 12px; display: grid; gap: 8px; background: var(--surface); }
.rec-tlhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rec-zoom button { min-width: 38px; }
.rec-range { font-size: 11.5px; color: var(--text-3); margin-left: 4px; }
.rec-legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--text-3); }
.rec-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rec-legend i { width: 12px; height: 8px; border-radius: 2px; }
.lg-rec { background: var(--accent); } .lg-ev { background: var(--warn); } .lg-alarm { background: var(--err); } .lg-sel { background: color-mix(in srgb, var(--info, #4da3ff) 45%, transparent); outline: 1px solid var(--info, #4da3ff); }
.rec-tl { position: relative; height: 84px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); cursor: crosshair; overflow: hidden; touch-action: none; user-select: none; outline: none; }
.rec-tl:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.rec-tl.drag { cursor: grabbing; }
.rec-ruler { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rec-lane.ev { z-index: 3; }
.rec-ruler i { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--border-strong); }
.rec-ruler i.mj { height: 100%; background: linear-gradient(to bottom, transparent 18px, var(--border) 18px); }
.rec-ruler b { position: absolute; top: 3px; left: 4px; font: 500 10.5px var(--mono); color: var(--text-3); white-space: nowrap; }
.rec-lane { position: absolute; left: 0; right: 0; }
.rec-lane.ev { top: 21px; height: 14px; }
.rec-lane.rc { top: 38px; bottom: 10px; border-radius: 6px; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--text-3) 14%, transparent) 6px 7px); }
.rec-tl.empty .rec-lane.rc { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--text-3) 9%, transparent) 6px 7px); }
.rec-segs i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, #000) inset; }
.rec-lane.ev i { position: absolute; top: 3px; height: 8px; min-width: 4px; border-radius: 3px; background: color-mix(in srgb, var(--warn) 70%, transparent); cursor: pointer; }
.rec-lane.ev i s { position: absolute; left: -5px; top: -3px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: var(--warn); border: 2px solid var(--surface-2); text-decoration: none; }
.rec-lane.ev i.alarm { background: color-mix(in srgb, var(--err) 70%, transparent); } .rec-lane.ev i.alarm s { background: var(--err); }
.rec-lane.ev i.schedule { background: color-mix(in srgb, var(--info, #4da3ff) 65%, transparent); } .rec-lane.ev i.schedule s { background: var(--info, #4da3ff); }
.rec-lane.ev i:hover { filter: brightness(1.2); }
.rec-future { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--surface-3) 70%, transparent) 0 4px, transparent 4px 8px); border-left: 1px dashed var(--border-strong); pointer-events: none; }
.rec-future[hidden], .rec-selbox[hidden], .rec-cursor[hidden], .rec-ph[hidden] { display: none; }
.rec-selbox { position: absolute; top: 18px; bottom: 0; background: color-mix(in srgb, var(--info, #4da3ff) 18%, transparent); border-inline: 2px solid var(--info, #4da3ff); pointer-events: none; }
.rec-selbox.open { border-right-style: dashed; }
.rec-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--text) 55%, transparent); pointer-events: none; }
.rec-cursor span { position: absolute; bottom: 4px; left: 6px; padding: 2px 7px; border-radius: 5px; background: var(--overlay); color: #fff; font: 600 11px var(--mono); white-space: nowrap; box-shadow: var(--shadow-pop); }
.rec-cursor.flip span { left: auto; right: 6px; }
.rec-cursor.gap span { color: rgba(255,255,255,.7); }
.rec-ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--live); box-shadow: 0 0 10px var(--live); pointer-events: none; transition: left .25s linear; }
.rec-tl.drag .rec-ph { transition: none; }
.rec-ph::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: var(--live); }
.rec-ph span { position: absolute; top: 1px; left: 8px; padding: 1px 6px; border-radius: 5px; background: var(--live); color: #fff; font: 700 10.5px var(--mono); white-space: nowrap; }
.rec-ph.flip span { left: auto; right: 8px; }
.rec-mini { position: relative; height: 10px; border-radius: 5px; background: var(--surface-3); cursor: pointer; overflow: hidden; transition: height .2s var(--ease), opacity .2s; }
.rec-mini.full { height: 0; opacity: 0; pointer-events: none; }
.rec-mini-segs i { position: absolute; top: 2px; bottom: 2px; background: color-mix(in srgb, var(--accent) 65%, transparent); border-radius: 2px; }
.rec-mini-segs b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--warn); } .rec-mini-segs b.alarm { background: var(--err); }
.rec-mini-win { position: absolute; top: 0; bottom: 0; border-radius: 4px; border: 1.5px solid var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); transition: left .15s, width .15s; }
.rec-cut { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-2); }
.rec-cut-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--info, #4da3ff) 16%, transparent); color: var(--info, #4da3ff); }
.rec-cut-ic svg { width: 15px; height: 15px; }
.rec-cut .input { height: 32px; width: 200px; }
.rec-cut [data-r=sel] { font-size: 12px; color: var(--text-2); }
@media (max-width: 760px) {
  .rec-bar, .rec-transport { gap: 8px; }
  .rec-find input { width: 150px; }
  .rec-legend, .rec-range { display: none; }
  .rec-tl { height: 76px; }
  .rec-cut .input { width: 100%; order: 9; }
  .rec-now b { font-size: 16px; }
}
.table tr.selected td { background: var(--accent-soft); }
.table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- 1.4: recording manager, event clips, PTZ, multi-cloud, API apps ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tabs a, .tabs button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; color: var(--text-3); font-weight: 600; font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a svg, .tabs button svg { width: 16px; height: 16px; }
.tabs a:hover, .tabs button:hover { color: var(--text); }
.tabs a.on, .tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs .count { font: 600 11px var(--mono); padding: 1px 6px; border-radius: 6px; background: var(--surface-3); }
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }
.input-icon > .input { padding-left: 32px; width: 100%; }
.clip-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.clip-filters .select, .clip-filters .input { height: 34px; width: auto; }
.clip-filters .input-icon { min-width: 160px; }
.clip-filters .input-icon .input { width: 100%; }
.clip-filters .btn, .clip-filters .seg { flex: none; }
.clip-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kpi-mini { display: flex; flex-direction: column; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); min-width: 110px; }
.kpi-mini b { font-size: 20px; font-variant-numeric: tabular-nums; }
.kpi-mini span { color: var(--text-3); font-size: 12px; }
.kpi-mini .rec-now { color: var(--live); }
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.clip-card { border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; cursor: pointer; transition: border-color .15s var(--ease), transform .15s var(--ease); outline: none; }
.clip-card:hover, .clip-card:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.clip-card.is-rec { border-color: var(--live); box-shadow: 0 0 0 1px var(--live) inset; }
.clip-card.is-del { opacity: .55; }
.clip-thumb { position: relative; aspect-ratio: 16/9; background: #07080b; }
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.clip-ph svg { width: 30px; height: 30px; }
.clip-card.is-rec .clip-ph { color: var(--live); animation: p 1.4s infinite; }
.clip-dur { position: absolute; right: 8px; bottom: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(8,9,12,.72); color: #fff; font: 600 11.5px var(--mono); }
.clip-st { position: absolute; left: 8px; top: 8px; }
.clip-st .badge { background: rgba(8,9,12,.72); backdrop-filter: blur(8px); }
.clip-lock, .clip-seal { position: absolute; top: 8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: rgba(8,9,12,.62); color: #fff; }
.clip-lock { right: 8px; } .clip-seal { right: 36px; color: var(--ok); }
.clip-lock svg, .clip-seal svg { width: 13px; height: 13px; }
.clip-card:not(:has(.clip-lock)) .clip-seal { right: 8px; }
.clip-meta { padding: 10px 12px 12px; }
.clip-meta .t-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.clip-tags .chip { height: 21px; font-size: 11px; padding: 0 7px; }
.clip-modal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 18px; }
.ledger { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }
.ledger b { display: inline-flex; gap: 6px; align-items: center; } .ledger b svg { width: 15px; height: 15px; color: var(--ok); }
.verify-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin-top: 6px; font: 12px var(--mono); }
.ok-t { color: var(--ok); } .err-t { color: var(--err); font-weight: 700; }
.clip-ctl { display: flex; align-items: center; gap: 8px; }
.clip-ctl.is-rec { padding: 6px 6px 6px 12px; border-radius: 10px; background: color-mix(in srgb, var(--live) 14%, transparent); border: 1px solid color-mix(in srgb, var(--live) 45%, transparent); }
.clip-ctl.is-rec b { color: var(--live); letter-spacing: .08em; font-size: 12px; }
.clip-ctl .kbd { margin-left: 4px; opacity: .8; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live); animation: p 1.2s infinite; }
@keyframes p { 50% { opacity: .3 } }
.ptz { display: grid; gap: 14px; }
/* 2.11 PTZ: joystick ring + zoom rocker + preset manager */
.ptz-top { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.ptz-ring { position: relative; width: 168px; height: 168px; flex: none; border-radius: 50%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 8px;
  background: radial-gradient(circle at 50% 38%, var(--surface-2), var(--surface-3) 72%); border: 1px solid var(--border-strong); box-shadow: inset 0 2px 10px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.04); }
.ptz-ring::before { content: ""; position: absolute; inset: 30px; border-radius: 50%; border: 1px dashed var(--border); pointer-events: none; }
.ptz-ring button, .ptz-zoom button { all: unset; box-sizing: border-box; display: grid; place-items: center; cursor: pointer; touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent; color: var(--text-2); transition: color .15s, background .15s, transform .12s var(--ease); }
.ptz-dir { border-radius: 50%; }
.ptz-dir svg { width: 20px; height: 20px; transition: transform .15s var(--ease); }
.ptz-dir.d-ul, .ptz-dir.d-ur, .ptz-dir.d-dl, .ptz-dir.d-dr { opacity: .72; }
.ptz-dir.d-ul svg, .ptz-dir.d-ur svg, .ptz-dir.d-dl svg, .ptz-dir.d-dr svg { width: 16px; height: 16px; }
.ptz-dir:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); opacity: 1; }
.ptz-dir:active, .ptz-dir.on { color: var(--accent-ink); background: var(--accent); opacity: 1; transform: scale(.92); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.ptz-home { position: relative; z-index: 1; margin: 4px; border-radius: 50% !important; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.ptz-home svg { width: 20px; height: 20px; }
.ptz-home:hover { color: var(--accent) !important; transform: translateY(-1px); }
.ptz-home:active { transform: scale(.94); }
.ptz-home.spin svg, button.spin .i-refresh, button.spin .i-home { animation: vg-spin .9s linear infinite; }
.ptz-side { display: flex; gap: 16px; align-items: center; }
.ptz-zoom { display: grid; grid-template-rows: 48px 30px 48px; width: 52px; border-radius: 26px; background: var(--surface-3); border: 1px solid var(--border-strong); overflow: hidden; }
.ptz-zoom > span { display: grid; place-items: center; color: var(--text-3); border-block: 1px solid var(--border); }
.ptz-zoom > span svg { width: 15px; height: 15px; }
.ptz-zoom button svg { width: 20px; height: 20px; }
.ptz-zoom button:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ptz-zoom button:active, .ptz-zoom button.on { background: var(--accent); color: var(--accent-ink); }
.ptz-ctl { display: grid; gap: 10px; min-width: 150px; }
.ptz-speed { display: grid; gap: 4px; }
.ptz-speed b { color: var(--text); font: 600 12px var(--mono); margin-left: 4px; }
.ptz-speed input { width: 100%; accent-color: var(--accent); }
.ptz-status { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); min-height: 34px; }
.ptz-status [data-st-t] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptz-led { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--text-3); }
.ptz-status.busy .ptz-led { background: var(--accent); animation: vg-ping 1s var(--ease) infinite; }
.ptz-status.ok .ptz-led { background: var(--ok); }
.ptz-status.ok { color: var(--ok); }
.ptz-status.err { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, var(--border)); background: var(--err-soft); }
.ptz-status.err .ptz-led { background: var(--err); }
.ptz-presets { display: grid; gap: 8px; }
.ptz-ph { display: flex; align-items: center; gap: 8px; }
.ptz-ph b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ptz-ph b svg { width: 15px; height: 15px; color: var(--accent); }
.ptz-new { display: grid; grid-template-columns: 1fr 64px auto; gap: 6px; }
.ptz-new .input { height: 32px; }
.ptz-list { display: grid; gap: 4px; max-height: 286px; overflow: auto; padding-right: 2px; }
.ptz-pre { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: 10px; border: 1px solid transparent; background: var(--surface-2); transition: border-color .15s, background .15s; }
.ptz-pre:hover { border-color: var(--border-strong); }
.ptz-pre.cur { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.ptz-pre.new { animation: vg-flash 1.6s var(--ease); }
.ptz-no { flex: none; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); font: 600 11.5px var(--mono); color: var(--text-2); }
.ptz-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ptz-pre .badge svg { width: 12px; height: 12px; }
.ptz-act { display: flex; gap: 2px; flex: none; opacity: .85; }
.ptz-pre:hover .ptz-act { opacity: 1; }
.ptz-empty { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 10px; border: 1px dashed var(--border-strong); color: var(--text-2); }
.ptz-empty > svg { width: 22px; height: 22px; flex: none; color: var(--text-3); }
.ptz-empty.err > svg { color: var(--err); }
.ptz-skel { height: 36px; border-radius: 10px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%) 0 0 / 200% 100%; animation: vg-shimmer 1.2s linear infinite; }
@media (max-width: 520px) { .ptz-new { grid-template-columns: 1fr auto; } .ptz-new [name=id] { display: none; } }
.link-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface-2); }
.link-card.up { border-left: 3px solid var(--ok); } .link-card.down { border-left: 3px solid var(--err); }
.link-card h4 { margin: 0; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-card h4 > svg { width: 18px; height: 18px; flex: none; }
.link-card h4 .small { white-space: nowrap; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
@media (max-width: 860px) { .clip-modal { grid-template-columns: 1fr; } }

[hidden] { display: none !important; }

/* 1.5 — delivery */
.err-text { color: var(--err); }
.section-title { margin: 10px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.section-title:first-child { margin-top: 0; }
.url-row code { flex: 1; min-width: 0; word-break: break-all; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; }

/* ---------------------------------------------------------------- charts & monitoring (1.8)
   Categorical slots validated (CVD + normal vision + contrast) against the card surfaces below. */
:root {
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --chart-surface: var(--surface); --chart-grid: #22262e; --chart-base: #343944; --chart-axis: #7c8494;
  --st-good: #0ca30c; --st-warn: #fab219; --st-crit: #d03b3b;
}
:root[data-theme="light"] {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --chart-grid: #e9e8e3; --chart-base: #c3c2b7; --chart-axis: #898781;
}
.vchart { position: relative; width: 100%; min-height: 60px; }
.vchart svg { display: block; overflow: visible; max-width:100%; }
.vchart .v-grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.vchart .v-base { stroke: var(--chart-base); stroke-width: 1; shape-rendering: crispEdges; }
.vchart .v-axis { fill: var(--chart-axis); font: 500 10.5px var(--font); font-variant-numeric: tabular-nums; }
.vchart .v-empty { fill: var(--text-3); font: 500 12px var(--font); }
.vchart .v-cross { stroke: var(--text-3); stroke-width: 1; }
.vchart .v-bar.on path { filter: brightness(1.18); }
.vchart .v-bar:focus { outline: none; }
.vchart rect[tabindex]:focus { outline: none; }
.vlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size: 12px; color: var(--text-2); }
.vlegend span { display: inline-flex; align-items: center; gap: 6px; }
.vlegend i.ln { width: 14px; height: 2px; border-radius: 2px; }
.vlegend i.sw { width: 10px; height: 10px; border-radius: 3px; }
.vlegend b { color: var(--text); font-weight: 600; }
.vlegend-vals { margin-top: 10px; }
.vtip { position: absolute; z-index: 5; pointer-events: none; min-width: 150px; padding: 8px 10px; border-radius: 10px; background: var(--surface-3); box-shadow: var(--shadow-pop); font-size: 12px; }
.vtip .vt-h { color: var(--text-3); font-size: 11px; margin-bottom: 4px; }
.vtip .vt-r { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 8px; line-height: 1.7; }
.vtip .vt-r i { width: 12px; height: 2px; border-radius: 2px; }
.vtip .vt-r b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.vtip .vt-r span { color: var(--text-2); }
.vtable-wrap { max-height: 260px; overflow: auto; }
.vtable td, .vtable th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vmeter { height: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--series-1) 18%, transparent); }
.vmeter i { display: block; height: 100%; border-radius: 99px; background: var(--series-1); transition: width .6s var(--ease); }
.vmeter.warn { background: color-mix(in srgb, var(--st-warn) 18%, transparent); } .vmeter.warn i { background: var(--st-warn); }
.vmeter.crit { background: color-mix(in srgb, var(--st-crit) 18%, transparent); } .vmeter.crit i { background: var(--st-crit); }
.vstack { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-3); }
.vstack i { display: block; min-width: 3px; }
.vstrip { display: grid; grid-template-columns: repeat(96, 1fr); gap: 1px; height: 22px; }
.vstrip i { border-radius: 2px; background: var(--surface-3); }
.vstrip i.up { background: var(--st-good); } .vstrip i.down { background: var(--st-crit); } .vstrip i.part { background: var(--st-warn); }
.vspark { display: block; }

.mon-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.mon-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; }
.mon-tile { padding: 16px; }
.mon-tile .label { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12.5px; font-weight: 550; }
.mon-tile .label svg { width: 15px; height: 15px; color: var(--text-3); }
.mon-tile .value { font-size: 26px; font-weight: 650; letter-spacing: -.02em; margin: 6px 0 8px; }
.mon-tile .value small { font-size: 13px; color: var(--text-3); font-weight: 500; margin-left: 4px; }
.mon-tile .sub { color: var(--text-3); font-size: 12px; margin-top: 8px; }
.mon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.mon-grid > * { min-width:0; }
.mon-grid .wide { grid-column: 1 / -1; }
.mon-card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap:wrap; }
.mon-card .card-head > .row { flex-wrap:wrap; max-width:100%; }
.mon-card .card-head h3 { display: flex; align-items: center; gap: 8px; }
.mon-card .card-head .note { color: var(--text-3); font-size: 12px; font-weight: 500; }
.mon-card .card-body { padding-top: 6px; }
.vol-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.vol-row:last-child { border-bottom: 0; }
.vol-row .vmeter { grid-column: 1 / -1; }
.alert-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.alert-row:last-child { border-bottom: 0; }
.alert-row .lv { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 99px; }
.alert-row .lv.err { color: var(--err); background: var(--err-soft); } .alert-row .lv.warn { color: var(--warn); background: var(--warn-soft); }
.alert-row .lv.ended { color: var(--text-3); background: var(--surface-3); }
.cam-uptime { display: flex; align-items: center; gap: 8px; min-width: 110px; } .cam-uptime .vmeter { flex: 1; }
.dot-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.dot-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.dot-st.live::before { background: var(--st-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-good) 22%, transparent); }
.dot-st.online::before { background: var(--series-1); } .dot-st.offline::before, .dot-st.site-offline::before { background: var(--st-crit); }
@media (max-width: 980px) { .mon-grid { grid-template-columns: minmax(0, 1fr); } }
/* 2.15 monitoring sections: Server resources · Service resources · Networking & tunnels · Cameras */
.mon-jump { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0 10px; margin-bottom: 6px; background: var(--bg); }
.mon-jump .chip { cursor: pointer; font: inherit; font-size: 12.5px; }
.mon-jump .chip:hover { color: var(--text); border-color: var(--border-strong); }
.mon-jump .chip svg { width: 14px; height: 14px; }
.mon-section { margin: 0 0 26px; scroll-margin-top: 56px; }
.mon-sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.mon-sec-head h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.mon-sec-head p { margin: 2px 0 0; color: var(--text-3); font-size: 12.5px; }
.mon-sec-head > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.mon-sec-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft, var(--surface-2)); color: var(--accent, var(--text-2)); flex: none; }
.mon-sec-ic svg { width: 18px; height: 18px; }
.mon-sec-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 14px; }
.svc-card { padding: 14px 15px; border-left: 3px solid var(--text-3); min-width: 0; }
.svc-card.ok { border-left-color: var(--ok); } .svc-card.warn { border-left-color: var(--warn); } .svc-card.err { border-left-color: var(--err); } .svc-card.off { border-left-color: var(--border-strong); }
.svc-head { display: flex; align-items: center; gap: 10px; }
.svc-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); color: var(--text-2); flex: none; }
.svc-ic svg { width: 16px; height: 16px; }
.svc-name { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.svc-name b { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-st { font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); }
.svc-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.svc-st.ok { color: var(--ok); } .svc-st.warn { color: var(--warn); } .svc-st.err { color: var(--err); }
.svc-detail { margin: 8px 0 10px; color: var(--text-2); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.svc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding-top: 10px; border-top: 1px solid var(--border); }
.svc-facts dt { color: var(--text-3); font-size: 11.5px; }
.svc-facts dd { margin: 1px 0 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.link-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.link-row:last-of-type { border-bottom: 0; }
.link-row .vmeter { grid-column: 1 / -1; }
.input.sm, .select.sm { height: 32px; padding: 0 10px; font-size: 12.5px; }

/* ---------------------------------------------------------------- animated edge ↔ cloud link (1.8) */
.lv { --c: var(--text-3); --c-soft: color-mix(in srgb, var(--text-3) 20%, transparent); }
.lv-up { --c: var(--ok); --c-soft: color-mix(in srgb, var(--ok) 18%, transparent); }
.lv-connecting { --c: var(--warn); --c-soft: color-mix(in srgb, var(--warn) 18%, transparent); }
.lv-down { --c: var(--err); --c-soft: color-mix(in srgb, var(--err) 16%, transparent); }
.lv-row { display: grid; grid-template-columns: minmax(120px, auto) 1fr minmax(120px, auto); align-items: center; gap: 14px; }
.lv-node { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lv-node:last-child { flex-direction: row-reverse; text-align: right; }
.lv-ic { position: relative; width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; color: var(--c);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, var(--surface-2)), var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.lv-ic svg { width: 21px; height: 21px; }
.lv-halo { position: absolute; inset: -5px; border-radius: 18px; border: 1.5px solid var(--c); opacity: 0; }
.lv-up .lv-halo { animation: lvhalo 2.6s var(--ease) infinite; }
.lv-connecting .lv-halo { animation: lvhalo 1.4s ease-in-out infinite; }
.lv-txt { display: flex; flex-direction: column; min-width: 0; } .lv-txt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lv-txt span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-wire { position: relative; min-height: 64px; display: flex; flex-direction: column; justify-content: center; }
.lv-lanes { display: flex; flex-direction: column; gap: 10px; }
.lv-lane { position: relative; height: 4px; border-radius: 4px; background: var(--c-soft); overflow: hidden; }
.lv-lane::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--c) 0 8px, transparent 8px 22px); opacity: .55; }
.lv-up .lv-lane::after { animation: lvflow var(--dur, 1.6s) linear infinite; }
.lv-up .lv-lane.down::after { animation-direction: reverse; }
.lv-connecting .lv-lane::after { animation: lvblink 1.4s ease-in-out infinite; }
.lv-down .lv-lane::after { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 12px); opacity: .45; }
.lv-pkt { position: absolute; top: -3px; width: 28px; height: 10px; border-radius: 6px; background: radial-gradient(closest-side, var(--c), transparent); filter: blur(.3px); opacity: 0; }
.lv-up .lv-pkt { animation: lvpkt calc(var(--dur, 1.6s) * 1.9) cubic-bezier(.45, .05, .55, .95) infinite; }
.lv-up .lv-pkt.b { animation-delay: calc(var(--dur, 1.6s) * -.95); }
.lv-up .lv-lane.down .lv-pkt { animation-name: lvpktrev; }
.lv-break { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--err); box-shadow: 0 0 0 1.5px var(--err); z-index: 2; }
.lv-break svg { width: 14px; height: 14px; }
.lv-badge { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; color: var(--text-2); white-space: nowrap;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px var(--border-strong); }
.lv-badge svg { width: 13px; height: 13px; color: var(--c); } .lv-badge b { color: var(--text); font-weight: 650; }
.lv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--c-soft); }
.lv-up .lv-dot { animation: lvdot 2s ease-in-out infinite; }
.lv-rates { position: absolute; left: 50%; bottom: -4px; transform: translate(-50%, 100%); display: flex; gap: 14px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 26px; }
.lv-stage { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.lv-stage.ok { color: var(--ok); background: var(--ok-soft); } .lv-stage.bad { color: var(--err); background: var(--err-soft); }
.lv-arrow { color: var(--text-3); font-size: 12px; }
.lv-compact .lv-row { gap: 10px; } .lv-compact .lv-ic { width: 34px; height: 34px; border-radius: 11px; } .lv-compact .lv-ic svg { width: 17px; height: 17px; }
.lv-compact .lv-wire { min-height: 46px; } .lv-compact .lv-lanes { gap: 7px; } .lv-compact .lv-lane { height: 3px; }
.lv-compact .lv-badge { top: -2px; padding: 2px 8px; font-size: 10.5px; } .lv-compact .lv-stages { margin-top: 18px; }
.lv-card { padding: 30px 20px 18px; }
@keyframes lvflow { to { background-position: 22px 0; } }
@keyframes lvblink { 50% { opacity: .15; } }
@keyframes lvpkt { 0% { left: -30px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes lvpktrev { 0% { left: 100%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: -30px; opacity: 0; } }
@keyframes lvhalo { 0% { opacity: .55; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes lvdot { 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .lv *, .lv *::after { animation: none !important; } .lv-up .lv-pkt { opacity: 0; } }
@media (max-width: 720px) { .lv-row { grid-template-columns: 1fr; } .lv-node:last-child { flex-direction: row; text-align: left; } .lv-wire { min-height: 70px; margin: 18px 0; } }

/* ---------------------------------------------------------------- API reference (1.8) */
.apiref { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.apiref-nav { position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow: auto; padding-right: 4px; }
.apiref-nav-in { display: flex; flex-direction: column; gap: 1px; padding-bottom: 30px; }
.apiref-nav a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 12.5px; }
.apiref-nav a:hover { background: var(--surface-2); color: var(--text); }
.apiref-search { margin-bottom: 8px; }
.ap-group { margin: 14px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.m { display: inline-block; min-width: 38px; text-align: center; font: 700 10px var(--mono); padding: 2px 5px; border-radius: 5px; letter-spacing: .02em; }
.m-get { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 15%, transparent); }
.m-post { color: var(--ok); background: var(--ok-soft); }
.m-patch { color: var(--warn); background: var(--warn-soft); }
.m-put { color: var(--warn); background: var(--warn-soft); }
.m-delete { color: var(--err); background: var(--err-soft); }
.apiref-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.apiref-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; padding: 22px; background: radial-gradient(600px 220px at 0 0, var(--accent-soft), transparent), var(--surface); }
.apiref-hero h1 { margin: 4px 0 6px; font-size: 26px; letter-spacing: -.02em; }
.ap-eyebrow { font-size: 11.5px; font-weight: 650; color: var(--accent-strong); letter-spacing: .04em; text-transform: uppercase; }
.ap-keybox { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); align-self: start; }
.ap-prose { line-height: 1.65; color: var(--text-2); font-size: 13.5px; } .ap-prose b { color: var(--text); }
.ap-prose ol, .ap-prose ul { padding-left: 20px; } .ap-prose li { margin: 4px 0; } .ap-prose pre { margin: 10px 0; }
.ap-prose code, .ep code { font-size: 12px; }
.ap-tag { margin: 18px 0 0; font-size: 18px; letter-spacing: -.01em; }
.ep { padding: 0; overflow: hidden; }
.ep > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; flex-wrap: wrap; }
.ep > summary::-webkit-details-marker { display: none; }
.ep > summary:hover { background: var(--surface-2); }
.ep-path { font: 600 13px var(--mono); background: none; border: 0; padding: 0; color: var(--text); }
.ep-sum { color: var(--text-2); font-size: 13px; flex: 1; min-width: 160px; }
.ep[open] > summary { border-bottom: 1px solid var(--border); }
.ep-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ep-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; }
.ep-params td { vertical-align: top; padding: 8px 10px; } .ep-params td:last-child { width: 38%; }
.ep-params .req { font-size: 10.5px; color: var(--err); font-weight: 650; }
.ep-json { width: 100%; font-size: 12px; line-height: 1.5; resize: vertical; height: auto; padding: 10px; }
.ep-code, .ep-resp { max-height: 360px; overflow: auto; font-size: 11.5px; line-height: 1.55; white-space: pre; margin: 0; }
.ep-out { margin-top: 12px; }
.ap-tabs { display: flex; gap: 2px; align-items: center; margin-bottom: 6px; }
.ap-tabs button { font: inherit; font-size: 12px; font-weight: 600; border: 0; background: none; color: var(--text-3); padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.ap-tabs button.on { background: var(--surface-3); color: var(--text); }
.ap-tabs .ap-copy { margin-left: auto; display: grid; place-items: center; } .ap-tabs .ap-copy svg { width: 15px; height: 15px; }
.chip.ok { color: var(--ok); }
.apidocs-top { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); }
.apidocs-wrap { max-width: 1440px; margin: 0 auto; padding: 22px; }
@media (max-width: 1100px) { .apiref { grid-template-columns: 1fr; } .apiref-nav { position: static; max-height: 260px; } .apiref-hero, .ep-cols { grid-template-columns: 1fr; } }
.lv-compact .lv-row { grid-template-columns: auto 1fr auto; }
.lv-compact .lv-txt, .lv-compact .lv-rates { display: none; }
.lv-compact .lv-wire { min-height: 40px; }

/* ---- camera permission picker (1.11) */
.sp { display: flex; flex-direction: column; gap: 10px; }
.sp-mode { align-self: flex-start; }
.sp-note { padding: 2px 2px 4px; }
.sp-tools { gap: 8px; flex-wrap: wrap; }
.sp-list { max-height: 330px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sp-group + .sp-group { border-top: 1px solid var(--border); }
.sp-gh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; background: var(--surface-2); position: sticky; top: 0; z-index: 1; font-size: 13px; }
.sp-gh .sp-site, .sp-gh .btn { margin-left: auto; gap: 6px; }
.sp-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--border); }
.sp-row:first-of-type { border-top: 0; }
.sp-row.on { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.sp-row .t-title { font-size: 13px; }
.sp-row > label { flex-wrap: nowrap; }
.sp-row > label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-row .sp-q { flex: none; }
.seg.sm { padding: 2px; border-radius: 8px; }
.seg.sm button { height: 24px; padding: 0 8px; font-size: 11.5px; border-radius: 6px; }
.seg button:disabled { opacity: .45; cursor: default; }
.sp-adv summary { cursor: pointer; color: var(--text-2); margin-bottom: 6px; }
.sp-out { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border-strong); }
.sp-code { font-size: 11.5px; color: var(--text-2); word-break: break-all; }
@media (max-width: 640px) { .sp-row { flex-wrap: wrap; } .sp-q { margin-left: 26px; } }

/* ---------------------------------------------------------------- 1.12: regions, roles & access, recording manager */
.btn.xs { height: 24px; padding: 0 6px; font-size: 12px; border-radius: 6px; }
.btn.xs.icon { width: 24px; padding: 0; }
.btn.xs svg { width: 13px; height: 13px; }
.rdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; flex: none; }
.region-tree { padding: 6px; max-height: 620px; overflow: auto; }
.rt-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 4px 8px 4px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.rt-item > span:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-item:hover { background: var(--surface-2); }
.rt-item.on { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.rt-item .btn.xs { opacity: 0; transition: opacity .12s; }
.rt-item:hover .btn.xs, .rt-item.on .btn.xs { opacity: 1; }
@media (hover: none) { .rt-item .btn.xs { opacity: 1; } }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; cursor: pointer; font-size: 12px; color: var(--text-3); }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch:has(input:checked) { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; margin-top: 10px; }
.acc-col { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface-2); min-width: 0; max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.acc-list { display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.acc-item, .cam-pick label { gap: 6px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface-2); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; }
.perm-grid label { align-items: flex-start; padding: 2px 0; }
.rec-table td { vertical-align: middle; }
.rec-thumb { width: 64px; height: 36px; border-radius: 6px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); }
.rec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-thumb svg { width: 16px; height: 16px; }
.rec-lib .bulkbar { flex-wrap: wrap; }
@media (max-width: 760px) { .acc-pick { grid-template-columns: 1fr; } .rec-table th:nth-child(2), .rec-table td:nth-child(2), .rec-table th:nth-child(7), .rec-table td:nth-child(7) { display: none; } }
.input-icon .input.sm { padding-left: 32px; }
.rt-item > span:first-child svg { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.acc-col > *, .acc-list > * { flex: none; }
.acc-col .acc-list { flex: 1 1 auto; min-height: 0; }
.acc-item, .acc-col > label, .cam-pick label { min-height: 22px; align-items: center; }
.perm-grid label { flex-wrap: nowrap; }
.perm-grid label input, .acc-item input, .cam-pick input, .acc-col label input { flex: none; margin-top: 2px; }

/* vigilsyn operator interface: quiet surfaces, accessible focus, mobile navigation. */
.sidebar { overflow: hidden; }
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.sidebar > .brand { flex: none; }
.sidebar-foot { flex: none; margin-top: auto; padding-top: 16px; }
.brand-sub { font-size: 10px; color: var(--text-2); letter-spacing: .16em; }
.nav-item { min-height: 40px; }
.nav-item.active { box-shadow: inset 3px 0 var(--accent); }
.nav-item.active svg { color: var(--accent); }
.card { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.table th { color: var(--text-2); letter-spacing: .055em; }
.table-wrap { overscroll-behavior-x: contain; }
.btn, .search-trigger, .nav-item { touch-action: manipulation; }
.btn:disabled { transform: none; }
.cell-act:focus-within, .cam-tile:focus-within .cell-act { opacity: 1; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 500; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.nav-scrim { display: none; }
.auth-form .auth-brand { display: none; }
.auth-form form { padding: 28px; width: min(440px, 100%); border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.auth-form .input { min-height: 44px; }
.auth-art .headline { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.12; }
@media (max-width: 900px) {
  .sidebar { height: 100dvh; visibility: hidden; }
  .shell.nav-open .sidebar { visibility: visible; }
  .shell.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 140; border: 0; background: rgba(3,12,21,.65); }
  .auth-form { min-height: 100dvh; padding: 24px 16px; }
  .auth-form .auth-brand { display: flex; padding: 0 0 20px; }
  .topbar { gap: 8px; }
  .btn.icon, .search-trigger { min-height: 40px; min-width: 40px; }
  .page-head h1 { font-size: 21px; }
}
@media (hover: none) { .cell-act { opacity: 1; } }
@media (max-width: 480px) {
  .page { padding: 20px 12px 40px; }
  .page-head { gap: 12px; }
  .page-head > .row { width: 100%; }
  .auth-form form { padding: 22px; }
  .toast { min-width: 0; max-width: calc(100vw - 32px); }
}

/* Keep stale monitoring data visibly distinct during connection failures. */
.connection-status { display:flex; align-items:center; gap:12px; padding:10px 24px; background:var(--surface-2); color:var(--text); border-bottom:1px solid var(--border); border-left:3px solid var(--warn, #f59e0b); font-size:13px; }
.connection-status[hidden] { display:none; }
.license-banner { display:flex; align-items:center; gap:12px; padding:10px 24px; font-size:13px; border-bottom:1px solid var(--border); border-left:3px solid var(--warn, #f59e0b); background:var(--surface-2); color:var(--text); }
.license-banner[hidden] { display:none; }
.license-banner > span { flex:1; }
.license-banner > svg { width:18px; height:18px; flex-shrink:0; color:var(--warn, #f59e0b); }
.license-banner.err { border-left-color:var(--err, #ef4444); }
.license-banner.err > svg { color:var(--err, #ef4444); }
.license-countdown { margin-top:8px; align-self:flex-end; justify-self:end; width:max-content; }
.license-countdown svg { width:13px; height:13px; }
@media (max-width: 700px) { .license-banner { padding:10px 16px; flex-wrap:wrap; } }
.connection-status > svg { width:18px; height:18px; flex-shrink:0; color:var(--warn, #f59e0b); }
.connection-status > span { flex:1; }
@media (max-width:600px) { .connection-status { padding:10px 16px; flex-wrap:wrap; } .connection-status > span { min-width:200px; } .connection-status > button { margin-left:30px; } }

/* Timestamped operations dashboards: clear traffic direction, calm surfaces and readable history. */
.app-version { display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text-3);font:500 11px var(--mono);padding:8px 4px 12px; }
.app-version b { color:var(--text-2);font-weight:600; }
.mon-card,.kpi { border-radius:16px; }
.mon-card .card-head { flex-wrap:wrap;gap:10px; }
.mon-grid .card-body { padding:20px; }
.mon-window { display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:14px 16px;margin:0 0 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface); }
.mon-window label { display:grid;gap:6px;font-size:11px;color:var(--text-2); }
.mon-window input { min-width:175px;color-scheme:dark; }
[data-theme="light"] .mon-window input { color-scheme:light; }
.traffic-controls { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px; }
.traffic-summary { display:flex;gap:26px;flex-wrap:wrap;margin-bottom:18px; }
.traffic-summary>div { display:grid;gap:6px;min-width:135px; }
.traffic-summary span { font-size:11px;color:var(--text-2);display:flex;align-items:center;gap:6px; }
.traffic-summary i { width:7px;height:7px;border-radius:50%; }
.traffic-summary b { font:650 22px var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.6px; }
.traffic-summary small,.traffic-note { color:var(--text-3);font-size:11px; }
.vchart .v-grid { stroke-dasharray:3 5;opacity:.8; }
.vchart .v-cross { stroke-dasharray:3 3;opacity:.7; }
.vchart rect[tabindex]:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
.vtip { border:1px solid var(--border);backdrop-filter:blur(12px);max-width:min(340px,95%); }
.vtip .vt-r { grid-template-columns:10px auto 1fr; }
.vlegend { gap:8px 18px; }
@media(max-width:600px) { .mon-grid .card-body {padding:12px;} .mon-window label {flex:1;min-width:150px;} .traffic-summary{gap:16px;} .traffic-summary b{font-size:19px;} }

/* Console surfaces emphasize operations and camera content, with fewer decorative layers. */
body { background:var(--bg); }
.sidebar { background:var(--surface); }
.card,.cam-tile { box-shadow:none; }
.kpi.accent::after { display:none; }
.cam-tile:hover { transform:none; }
.recording-folder { padding:10px 12px; }
.recording-folder summary { cursor:pointer;display:list-item;font-weight:600;padding:6px 0; }
.recording-folder summary svg { width:16px;height:16px;vertical-align:middle;margin-right:6px; }
.recording-folder .recording-folder { border-top:1px solid var(--border);margin-top:8px; }
.choice:has(input:disabled) { opacity:.65;cursor:not-allowed; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important;} }

.wall.w8 { --cols:8; }

/* Node licensing — shared Cloud and Edge status and activation workspace. */
.license-page{display:grid;gap:20px}.license-page .page-head{margin-bottom:0}.license-hero{display:flex;align-items:center;gap:22px;padding:28px;border-left:4px solid var(--accent)}
.license-seal{display:grid;place-items:center;flex-shrink:0;width:64px;height:64px;background:var(--accent-soft);color:var(--accent);border-radius:16px}.license-seal svg{width:32px;height:32px}
.license-tone-warn{border-left-color:var(--warn)}.license-tone-err{border-left-color:var(--err)}.license-tone-info{border-left-color:var(--info)}.license-tone-warn .license-seal{color:var(--warn);background:var(--warn-soft)}.license-tone-err .license-seal{color:var(--err);background:var(--err-soft)}.license-tone-info .license-seal{color:var(--info);background:var(--info-soft)}
.license-hero-copy{min-width:0;flex:1}.license-eyebrow{color:var(--text-3);font-size:12px;font-weight:600;margin-bottom:6px}.license-hero h2{font-size:24px;letter-spacing:-.5px;overflow-wrap:anywhere}.license-hero p{color:var(--text-2);margin:8px 0 14px}.license-tags{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.license-tags svg{width:14px;height:14px}.license-stream-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}
.license-hero-validity{display:grid;gap:6px;max-width:260px;text-align:right}.license-hero-validity span,.license-hero-validity small{color:var(--text-3);font-size:12px}.license-hero-validity strong{font-size:15px;font-weight:600}
.license-capacities,.license-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.license-capacity{padding:22px 24px}.license-capacity-label{display:flex;align-items:center;gap:9px;color:var(--text-2)}.license-capacity-label svg{width:18px;height:18px}.license-capacity-label h3{font-size:13px;font-weight:500}.license-capacity-value{font-size:34px;font-weight:650;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:12px 0}.license-capacity-value span{font-size:18px;color:var(--text-3);font-weight:400;letter-spacing:0}.license-capacity progress{display:block;appearance:none;width:100%;height:6px;border:none;border-radius:10px;overflow:hidden;background:var(--surface-3);color:var(--accent)}.license-capacity progress::-webkit-progress-bar{background:var(--surface-3)}.license-capacity progress::-webkit-progress-value{background:var(--accent);border-radius:10px}.license-capacity progress::-moz-progress-bar{background:var(--accent)}.license-over progress{color:var(--err)}.license-over progress::-webkit-progress-value{background:var(--err)}.license-over progress::-moz-progress-bar{background:var(--err)}.license-capacity p{font-size:12px;color:var(--text-3);margin:10px 0 0}.license-over p{color:var(--err)}
.license-facts{margin:0;display:grid;gap:16px}.license-facts>div{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,1.1fr);gap:12px}.license-facts dt{color:var(--text-3);font-size:12px}.license-facts dd{margin:0;font-size:13px;overflow-wrap:anywhere}.license-identifiers .mono{font-size:11px}.license-note{color:var(--text-2);font-size:12px;line-height:1.65;margin:20px 0 0}.license-disclosure>summary{display:flex;align-items:center;gap:12px;cursor:pointer;padding:19px 22px;list-style:none;font-weight:600}.license-disclosure>summary::-webkit-details-marker{display:none}.license-disclosure>summary>svg{width:20px;height:20px;color:var(--text-3)}.license-disclosure>summary::after{content:'+';margin-left:auto;color:var(--text-3);font-size:20px}.license-disclosure[open]>summary::after{content:'−'}.license-disclosure>summary small{display:block;font-weight:400;font-size:12px;color:var(--text-3);margin-top:3px}.license-disclosure[open]>summary{border-bottom:1px solid var(--border)}.license-disclosure>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.license-install{display:grid;gap:12px}.license-import{display:grid;gap:8px;padding:16px;background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--radius-sm)}.license-install label{font-size:12px;color:var(--text-2);font-weight:600}.license-install-footer{display:flex;gap:20px;align-items:center;justify-content:space-between}.license-install-footer p{margin:0;max-width:550px}.license-install-footer button{flex-shrink:0}.license-registration{max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;margin:16px 0;padding:16px;background:var(--surface-2);border-radius:var(--radius-sm)}.license-disclosure .license-note:first-child{margin-top:0}
@media(max-width:1000px){.license-hero{flex-wrap:wrap}.license-hero-validity{margin-left:86px;text-align:left;max-width:none}.license-panels{grid-template-columns:1fr}}@media(max-width:600px){.license-hero{padding:20px;gap:16px}.license-seal{width:48px;height:48px;border-radius:12px}.license-seal svg{width:26px;height:26px}.license-hero h2{font-size:21px}.license-hero-validity{margin-left:0;width:100%;border-top:1px solid var(--border);padding-top:16px}.license-capacities{grid-template-columns:1fr}.license-facts>div{grid-template-columns:1fr;gap:3px}.license-install-footer{align-items:stretch;flex-direction:column}.license-disclosure>summary{padding:16px}.license-capacity{padding:20px}}

/* ==========================================================================
   2.7 design refresh — calm operations console: layered navy surfaces, one teal
   accent, 8-pt spacing, an icon rail, collapsible navigation, phone tab bar and
   tables that become cards on small screens.
   ========================================================================== */
:root {
  --bg: #07121e; --surface: #0c1927; --surface-2: #112234; --surface-3: #182d42; --overlay: rgba(7, 18, 30, .82);
  --border: rgba(160, 196, 230, .085); --border-strong: rgba(160, 196, 230, .16);
  --text: #eef4fa; --text-2: #a9bacb; --text-3: #7f93a7;
  --radius: 14px; --radius-sm: 10px; --sidebar-w: 248px; --rail-w: 72px; --topbar-h: 60px; --tabbar-h: 62px;
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  --lift: 0 1px 0 rgba(255,255,255,.035) inset, 0 1px 2px rgba(0,0,0,.25);
}
:root[data-theme="light"] {
  --bg: #f3f6f9; --surface: #ffffff; --surface-2: #f5f7fa; --surface-3: #e9eef3; --overlay: rgba(243, 246, 249, .85);
  --border: rgba(16, 36, 58, .08); --border-strong: rgba(16, 36, 58, .15);
  --text: #0f1b28; --text-2: #485a6c; --text-3: #66788a;
  --lift: 0 1px 2px rgba(16, 36, 58, .06);
}
body { font-size: 14px; letter-spacing: -.003em; }
h1 { font-size: 24px; letter-spacing: -.025em; font-weight: 700; }
h2 { font-size: 17px; letter-spacing: -.015em; }

/* ---------- shell ---------- */
.shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); transition: grid-template-columns .2s var(--ease); }
.sidebar { padding: 14px 12px 12px; gap: 4px; background: var(--surface); border-right: 1px solid var(--border); }
.sidebar .brand { padding: 6px 8px 14px; }
.brand-name { font-size: 19px; }
.sidebar-nav { padding-right: 2px; margin-right: -4px; }
.nav-group { margin-top: 6px; }
.nav-group + .nav-group { margin-top: 10px; }
.nav-label { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 10px 6px; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); cursor: pointer; border-radius: 8px; }
.nav-label:hover { color: var(--text-2); }
.nav-label:focus-visible { outline: 2px solid var(--accent); }
.nav-label svg { width: 14px; height: 14px; transition: transform .18s var(--ease); opacity: .8; }
.nav-group.collapsed:not(.peek) .nav-label svg { transform: rotate(-90deg); }
.nav-items { display: grid; gap: 2px; }
.nav-group.collapsed:not(.peek) .nav-items { display: none; }
.nav-item { min-height: 36px; padding: 7px 10px; gap: 11px; border-radius: 10px; font-size: 13.5px; font-weight: 520; color: var(--text-2); box-shadow: none; }
.nav-item svg { width: 18px; height: 18px; opacity: .85; }
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-weight: 600; box-shadow: none; }
.nav-item.active::before { left: -12px; top: 9px; bottom: 9px; }
.nav-item .count { padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-weight: 600; }
.nav-item .count:empty { display: none; }
.nav-item.active .count { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
.sidebar-foot { gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.app-version { padding: 4px 6px 6px; }
.userchip { padding: 8px; border-radius: 12px; background: var(--surface-2); border-color: transparent; }
.userchip:hover { border-color: var(--border-strong); }

/* icon rail (desktop) */
.rail-toggle { margin-left: -6px; }
@media (min-width: 901px) {
  .shell.rail { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .shell.rail .sidebar { padding: 14px 10px 12px; align-items: stretch; }
  .shell.rail .brand { justify-content: center; padding: 6px 0 14px; }
  .shell.rail .brand > div:not(.brand-mark), .shell.rail .nav-text, .shell.rail .nav-label span, .shell.rail .app-version, .shell.rail .userchip .meta, .shell.rail .userchip [data-act="logout"] { display: none; }
  .shell.rail .nav-label { justify-content: center; padding: 8px 0 4px; pointer-events: none; }
  .shell.rail .nav-label svg { display: none; }
  .shell.rail .nav-label::before { content: ""; width: 20px; height: 1px; background: var(--border-strong); }
  .shell.rail .nav-group.collapsed .nav-items { display: grid; }
  .shell.rail .nav-item { justify-content: center; padding: 9px 0; position: relative; }
  .shell.rail .nav-item .count { position: absolute; top: 2px; right: 4px; font-size: 9.5px; padding: 0 5px; }
  .shell.rail .nav-item.active::before { left: -10px; }
  .shell.rail .userchip { justify-content: center; padding: 6px; background: transparent; }
  .shell.rail .sidebar-foot { align-items: center; }
}

/* top bar */
.topbar { height: var(--topbar-h); padding: 0 28px; gap: 12px; background: var(--overlay); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }
.topbar .crumbs { font-size: 13px; }
.topbar .crumbs b { font-size: 14px; }
.search-trigger { height: 38px; min-width: 280px; border-radius: 11px; background: var(--surface-2); border-color: var(--border); }
.search-trigger:hover { border-color: var(--border-strong); }

/* banners inside the content column */
.license-banner, .connection-status { margin: 14px 28px 0; border: 1px solid var(--border); border-left-width: 3px; border-radius: 12px; padding: 10px 16px; background: var(--surface); box-shadow: var(--lift); }
.license-banner.err { background: color-mix(in srgb, var(--err) 7%, var(--surface)); }

/* page */
.page { padding: 26px 28px 72px; max-width: 1560px; }
.page-head { align-items: flex-end; margin-bottom: 22px; gap: 14px 20px; }
.page-head p { color: var(--text-2); margin-top: 6px; max-width: 760px; }
.page-head > .row { gap: 8px; }

/* cards, KPIs */
.card { border-radius: var(--radius); background: var(--surface); border-color: var(--border); box-shadow: var(--lift); }
.card-head { padding: 14px 18px; gap: 12px; }
.card-head h3 { font-size: 14.5px; font-weight: 650; }
.card-body, .card-pad { padding: 18px; }
.kpi { padding: 16px 18px; border-radius: var(--radius); }
.kpi .label { font-size: 12.5px; font-weight: 550; }
.kpi .label svg { width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: var(--surface-2); color: var(--accent); }
.kpi .value { font-size: 28px; margin-top: 10px; }
.kpi .sub { margin-top: 4px; }
.grid { gap: 14px; }

/* controls */
.btn { height: 36px; border-radius: 10px; font-weight: 580; border-color: var(--border-strong); background: var(--surface-2); }
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn:focus-visible, .input:focus-visible, .select:focus-visible { outline: none; box-shadow: var(--ring); }
.input, .select, textarea.input { height: 38px; border-radius: 10px; background: var(--bg); border-color: var(--border-strong); }
:root[data-theme="light"] .input, :root[data-theme="light"] .select { background: var(--surface); }
.input:hover, .select:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); }
.input:focus, .select:focus { box-shadow: var(--ring); }
.seg, .segmented { border-radius: 11px; }
.badge { height: 22px; font-weight: 620; border-radius: 999px; }
.chip { border-radius: 9px; }

/* tables */
.table th { font-size: 11px; letter-spacing: .07em; color: var(--text-3); padding: 10px 16px; background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.table td { padding: 11px 16px; }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.card > .table-wrap:first-child .table th:first-child, .card > .table:first-child th:first-child { border-top-left-radius: var(--radius); }
.card > .table-wrap:first-child .table th:last-child, .card > .table:first-child th:last-child { border-top-right-radius: var(--radius); }

/* tabs (anchor or button) */
.tabs { gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* modal & toasts */
.modal { border: 1px solid var(--border-strong); border-radius: 18px; }
.modal-backdrop { background: rgba(3, 9, 16, .62); }
.toast { border: 1px solid var(--border-strong); }

/* phone tab bar (hidden on larger screens) */
.tabbar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) { .page { padding-left: 22px; padding-right: 22px; } .topbar { padding: 0 22px; } .license-banner, .connection-status { margin-left: 22px; margin-right: 22px; } }
@media (max-width: 900px) {
  .shell, .shell.rail { grid-template-columns: minmax(0, 1fr); }
  .rail-toggle { display: none; }
  .topbar { padding: 0 12px; height: 56px; }
  .page { padding: 18px 14px calc(var(--tabbar-h) + 28px); }
  .license-banner, .connection-status { margin: 10px 12px 0; }
  .page-head { align-items: stretch; margin-bottom: 16px; }
  .page-head h1 { font-size: 22px; }
  .page-head > .row { width: 100%; }
  .page-head > .row > .btn { flex: 1 1 auto; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpi { padding: 14px; }
  .kpi .value { font-size: 23px; margin-top: 8px; }
  .kpi .label svg { width: 24px; height: 24px; padding: 5px; }
  .kpi .sub { font-size: 11.5px; }
  .toolbar { gap: 8px; }
  .toolbar .search { max-width: none; flex-basis: 100%; }
  .toolbar > .select, .toolbar > select { flex: 1 1 140px; }
  .card-head { padding: 12px 14px; flex-wrap: wrap; }
  .card-body, .card-pad { padding: 14px; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { width: 100% !important; max-height: 92dvh; border-radius: 18px 18px 0 0; }
  .toasts { left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 12px); }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); background: var(--overlay); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); border-top: 1px solid var(--border); }
  .tabbar-item { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; color: var(--text-3); font-size: 10.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tabbar-item svg { width: 21px; height: 21px; }
  .tabbar-item.active { color: var(--accent); }
  .tabbar-item.active svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent)); }
  .tabbar-item:focus-visible { outline: 2px solid var(--accent); }
  .shell.nav-open .tabbar { visibility: hidden; }
  .wall-bar, .live-tools { gap: 6px; }

  /* tables become cards */
  .table.stackable thead { display: none; }
  .table.stackable, .table.stackable tbody, .table.stackable tr, .table.stackable td { display: block; width: 100%; }
  .table.stackable tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .table.stackable tr:last-child { border-bottom: 0; }
  .table.stackable td { border: 0; padding: 3px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right; min-height: 26px; }
  .table.stackable td[data-label]::before { content: attr(data-label); flex: none; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); text-align: left; }
  .table.stackable td:first-child { justify-content: flex-start; text-align: left; padding-bottom: 6px; }
  .table.stackable td:first-child::before { display: none; }
  .table.stackable td:not([data-label]), .table.stackable td[data-label=""] { justify-content: flex-end; }
  .table.stackable td:empty { display: none; }
  .table.stackable tbody tr:hover { background: transparent; }
  .table-wrap { overflow-x: visible; }
}
@media (max-width: 480px) {
  .search-trigger { min-width: 40px; }
  .page-head > .row > .btn { flex: 1 1 100%; }

}
@media (min-width: 901px) { .shell.rail .nav-item .count { top: 0; right: 2px; min-width: 18px; text-align: center; line-height: 15px; } }
@media (max-width: 600px) { .license-banner, .connection-status { font-size: 12.5px; gap: 8px; padding: 9px 12px; } .license-banner > a, .license-banner > button { font-size: 12.5px; } }

/* ================================================================ 2.11 motion & polish
   Animated icons (every icon carries .ic.i-<name>), status banner, KPI icon chips, card lift, nav micro-motion.
   All of it is switched off by prefers-reduced-motion (rule above). */
@keyframes vg-spin { to { transform: rotate(360deg); } }
@keyframes vg-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes vg-flash { 0% { background: color-mix(in srgb, var(--accent) 30%, var(--surface-2)); } 100% { background: var(--surface-2); } }
@keyframes vg-shimmer { to { background-position: -200% 0; } }
@keyframes vg-blink { 50% { opacity: .25; } }
@keyframes vg-pop { from { opacity: 0; transform: scale(.85); } }
@keyframes vg-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes vg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes vg-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes vg-up { 0%, 60%, 100% { transform: none; opacity: 1; } 75% { transform: translate(3px, -3px); opacity: 0; } 76% { transform: translate(-3px, 3px); opacity: 0; } }
@keyframes vg-down { 0%, 60%, 100% { transform: none; opacity: 1; } 75% { transform: translateY(3px); opacity: 0; } 76% { transform: translateY(-3px); opacity: 0; } }
@keyframes vg-look { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes vg-beat { 0%, 60%, 100% { transform: scale(1); } 66% { transform: scale(1.14); } 74% { transform: scale(.96); } 82% { transform: scale(1.06); } }
@keyframes vg-shake { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(-10deg); } 90% { transform: rotate(9deg); } 93% { transform: rotate(-6deg); } 96% { transform: rotate(4deg); } }
@keyframes vg-dash { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes vg-ring { 0% { transform: scale(.6); opacity: .65; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes vg-sweep { to { transform: rotate(360deg); } }

/* icon chips on KPI cards, with a gentle loop that says what the number is about */
.kpi .label svg { box-sizing: content-box; width: 15px; height: 15px; padding: 6px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); }
.kpi.accent .label svg { background: var(--accent); color: var(--accent-ink); }
.kpi .ic { transform-origin: 50% 50%; transform-box: fill-box; }
.kpi .i-eye { animation: vg-look 5s ease-in-out infinite; }
.kpi .i-arrowUpRight { animation: vg-up 3.2s var(--ease) infinite; }
.kpi .i-download { animation: vg-down 3.2s var(--ease) infinite; }
.kpi .i-cloud, .hero-fact .i-cloud { animation: vg-drift 4s ease-in-out infinite; }
.kpi .i-activity path, .card-head .i-activity path { stroke-dasharray: 60; animation: vg-dash 2.4s var(--ease) infinite alternate; }
.kpi .i-cpu, .kpi .i-server { animation: vg-beat 3.6s ease-in-out infinite; }
.kpi .i-route, .kpi .i-layers { animation: vg-bob 3.4s ease-in-out infinite; }
.kpi .i-camera { animation: vg-drift 5s ease-in-out infinite; }
.card.kpi { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.card.kpi:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-pop); }
.card-head h3 svg { transition: color .2s, transform .2s var(--ease); }
.card:hover > .card-head h3 svg { color: var(--accent); transform: scale(1.08); }

/* navigation: icon nudges on hover, active icon tinted */
.nav-item svg { transition: transform .18s var(--ease), color .18s; }
.nav-item:hover svg { transform: translateX(2px) scale(1.08); }
.nav-item.active svg { color: var(--accent); opacity: 1; }
.nav-item:hover .i-refresh, .nav-item:hover .i-sliders { transform: rotate(-18deg) scale(1.08); }
.nav-item:hover .i-shield, .nav-item:hover .i-key { animation: vg-shake 1.2s ease-in-out; }

/* buttons: icons that hint what happens */
.btn svg { transition: transform .18s var(--ease); }
.btn:hover .i-chevronRight, .btn:hover .i-arrowUpRight { transform: translateX(2px); }
.btn:hover .i-plus { transform: rotate(90deg); }
.btn:hover .i-refresh { transform: rotate(180deg); }
.btn:hover .i-download { animation: vg-bob .9s ease-in-out infinite; }
.btn:hover .i-trash { animation: vg-shake .9s ease-in-out; }
.btn:hover .i-scan, .btn:hover .i-search { transform: scale(1.12); }
.btn:hover .i-play { transform: scale(1.12); }
button.spin .i-refresh { animation: vg-spin .8s linear infinite; }

/* status dots & badges */
.dot.ok { animation: vg-breathe 3s ease-in-out infinite; }
@keyframes vg-breathe { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 8%, transparent); } }
.dot.err { animation: vg-blink 1.4s ease-in-out infinite; }
.empty .ico { animation: vg-bob 4s ease-in-out infinite; }


/* overview status banner */
.hero { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(110deg, color-mix(in srgb, var(--ok) 9%, var(--surface)) 0%, var(--surface) 55%); box-shadow: var(--shadow); flex-wrap: wrap; animation: vg-rise .3s var(--ease); --hc: var(--ok); }
.hero.warn { --hc: var(--warn); background: linear-gradient(110deg, color-mix(in srgb, var(--warn) 11%, var(--surface)) 0%, var(--surface) 55%); }
.hero.err { --hc: var(--err); background: linear-gradient(110deg, color-mix(in srgb, var(--err) 12%, var(--surface)) 0%, var(--surface) 55%); }
.hero-orb { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--hc); background: color-mix(in srgb, var(--hc) 16%, transparent); }
.hero-orb svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.hero-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--hc); animation: vg-ring 2.6s var(--ease) infinite; }
.hero-ring.r2 { animation-delay: 1.3s; }
.hero.err .hero-ring { animation-duration: 1.3s; }
.hero-txt { flex: 1; min-width: 200px; }
.hero-txt h2 { font-size: 17px; letter-spacing: -.01em; }
.hero-txt p { color: var(--text-3); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.hero-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-fact { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); min-width: 112px; }
.hero-fact > svg { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.hero-fact.ok > svg { color: var(--ok); } .hero-fact.warn > svg { color: var(--warn); } .hero-fact.err > svg { color: var(--err); }
.hero-fact b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.hero-fact span { font-size: 11.5px; color: var(--text-3); }
.hero-fact .i-rec circle:last-child { animation: vg-blink 1.6s ease-in-out infinite; }
@media (max-width: 760px) { .hero-facts { width: 100%; } .hero-fact { flex: 1 1 calc(50% - 8px); min-width: 0; } }
.rec-transport .seg { background: var(--surface); }

/* ================================================================ 2.11 recording dashboard */
.rd { display: grid; gap: 16px; }
.rd-live { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--live) 30%, var(--border)); background: radial-gradient(600px 160px at 0% 50%, color-mix(in srgb, var(--live) 14%, transparent), transparent 70%), var(--surface); box-shadow: var(--shadow); flex-wrap: wrap; animation: vg-rise .35s var(--ease); --lc: var(--live); }
.rd-live.idle { --lc: var(--text-3); border-color: var(--border); background: var(--surface); }
.rd-live.warn:not(.idle) { --lc: var(--warn); }
.rd-orb { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--lc); background: color-mix(in srgb, var(--lc) 15%, transparent); }
.rd-orb svg { width: 26px; height: 26px; position: relative; z-index: 1; }
.rd-orb svg circle:last-child { animation: vg-blink 1.4s ease-in-out infinite; }
.rd-orb span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--lc); animation: vg-ring 2.2s var(--ease) infinite; }
.rd-orb span + span { animation-delay: 1.1s; }
.rd-live.idle .rd-orb span, .rd-live.idle .rd-orb svg circle:last-child { animation: none; opacity: 0; }
.rd-live-txt { flex: 1; min-width: 220px; }
.rd-live-txt h2 { font-size: 18px; letter-spacing: -.01em; }
.rd-live-txt p { color: var(--text-3); font-size: 12.5px; margin-top: 3px; }
.rd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rd-kpi { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); animation: vg-rise .4s var(--ease) both; animation-delay: calc(var(--i) * 60ms); transition: transform .2s var(--ease), border-color .2s; }
.rd-kpi:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.rd-kpi-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); }
.rd-kpi-ic svg { width: 19px; height: 19px; }
.rd-kpi-ic.k-camera { background: color-mix(in srgb, var(--live) 15%, transparent); color: var(--live); }
.rd-kpi-ic.k-camera svg circle:last-child { animation: vg-blink 1.4s ease-in-out infinite; }
.rd-kpi-ic.k-clips svg { animation: vg-bob 3.4s ease-in-out infinite; }
.rd-kpi-ic.k-stored svg { animation: vg-bob 4s ease-in-out infinite; }
.rd-kpi-ic.k-locked { background: var(--ok-soft); color: var(--ok); }
.rd-kpi-ic.k-expiring { background: var(--warn-soft); color: var(--warn); }
@keyframes vg-hourglass { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }
.rd-kpi b { display: block; font-size: 24px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.rd-kpi span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.rd-kpi small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.rd-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rd-side { display: grid; gap: 16px; }
.rd-livecard .card-head { flex-wrap: wrap; }
.rd-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: pulse 1.6s infinite; }
.rd-list { display: grid; gap: 8px; padding: 12px; max-height: 560px; overflow: auto; }
.rd-row { display: flex; gap: 14px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); animation: vg-rise .35s var(--ease) both; animation-delay: calc(var(--i) * 40ms); transition: border-color .2s, transform .2s var(--ease); }
.rd-row:hover { border-color: var(--border-strong); transform: translateX(2px); }
.rd-row.on { border-left: 3px solid var(--live); }
.rd-row.wait { border-left: 3px solid var(--warn); }
.rd-thumb { position: relative; width: 136px; aspect-ratio: 16/9; flex: none; border-radius: 9px; overflow: hidden; background: #000; display: grid; place-items: center; color: var(--text-3); }
.rd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-thumb svg { width: 22px; height: 22px; }
.rd-rec { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(8,9,12,.7); color: #fff; font: 700 9.5px var(--font); letter-spacing: .08em; }
.rd-rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: vg-blink 1.2s ease-in-out infinite; }
.rd-row.wait .rd-rec { color: var(--warn); }
.rd-info { flex: 1; min-width: 0; display: grid; gap: 4px; align-content: start; }
.rd-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.rd-tags .chip { height: 22px; padding: 0 7px; font-size: 11px; gap: 4px; }
.rd-tags .chip svg { width: 12px; height: 12px; }
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.rd-clip { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 5px 6px 5px 10px; border-radius: 9px; background: color-mix(in srgb, var(--live) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--live) 25%, transparent); font-size: 12.5px; cursor: pointer; }
.rd-clip b { font-weight: 650; }
.rd-ct { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.rd-clip .mono { font-variant-numeric: tabular-nums; color: var(--live); font-weight: 600; }
.rd-act { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.rd-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 34px 16px; }
.rd-empty.sm { padding: 22px 16px; }
.rd-empty-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); margin-bottom: 6px; animation: vg-bob 4s ease-in-out infinite; }
.rd-empty-ic svg { width: 26px; height: 26px; }
.rd-skel { height: 96px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%) 0 0 / 200% 100%; animation: vg-shimmer 1.2s linear infinite; }
/* 24 h activity bars: one series, thin rounded marks anchored to the baseline; alarm share shaded at the bottom */
.rd-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 150px; align-items: end; padding-top: 6px; border-bottom: 1px solid var(--border); }
.rd-bar { position: relative; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.rd-bar i { display: block; width: 100%; height: max(var(--h), 2px); border-radius: 4px 4px 0 0; background: linear-gradient(to top, var(--err) 0 var(--a), var(--accent) var(--a)); transform-origin: bottom; animation: vg-grow .7s var(--ease) both; animation-delay: calc(var(--i) * 18ms); opacity: .9; }
.rd-bar.zero i { background: var(--surface-3); }
.rd-bar:hover i { opacity: 1; filter: brightness(1.12); }
@keyframes vg-grow { from { transform: scaleY(0); } }
.rd-axis { position: relative; height: 18px; font: 11px var(--mono); color: var(--text-3); }
.rd-axis span { position: absolute; top: 4px; transform: translateX(-50%); }
.rd-kinds { display: grid; gap: 10px; }
.rd-kind { display: grid; grid-template-columns: 92px 1fr 34px; gap: 10px; align-items: center; font-size: 12.5px; }
.rd-kind span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-kind div { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.rd-kind i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--accent); transform-origin: left; animation: vg-growx .7s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.rd-kind.k-alarm i { background: var(--err); } .rd-kind.k-incident i { background: var(--warn); } .rd-kind.k-schedule i { background: var(--info); }
.rd-kind b { text-align: right; font-variant-numeric: tabular-nums; }
@keyframes vg-growx { from { transform: scaleX(0); } }
.rd-store { position: relative; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.rd-ring { width: 120px; height: 120px; flex: none; transform: rotate(-90deg); }
.rd-ring circle { fill: none; stroke-width: 12; }
.rd-ring .bg { stroke: var(--surface-3); }
.rd-ring .fg { stroke: var(--ok); stroke-linecap: round; stroke-dashoffset: var(--off); animation: vg-ring-in 1.1s var(--ease) both; }
.rd-ring.warn .fg { stroke: var(--warn); } .rd-ring.err .fg { stroke: var(--err); }
@keyframes vg-ring-in { from { stroke-dashoffset: var(--c); } }
.rd-ring-txt { position: absolute; left: 0; top: 0; width: 120px; height: 120px; display: grid; place-content: center; text-align: center; }
.rd-ring-txt b { font-size: 22px; font-variant-numeric: tabular-nums; }
.rd-ring-txt span { font-size: 11px; color: var(--text-3); }
.rd-store-l { flex: 1; min-width: 140px; display: grid; gap: 6px; }
.rd-store-l.wide { grid-template-columns: 1fr; }
.rd-store-l div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.rd-store-l span { color: var(--text-3); }
.rd-store-l b { font-variant-numeric: tabular-nums; }
.rd-recent { display: grid; padding: 6px; }
.rd-rc { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.rd-rc:hover { background: var(--surface-2); }
.rd-rc-th { width: 64px; height: 36px; flex: none; border-radius: 7px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); }
.rd-rc-th img { width: 100%; height: 100%; object-fit: cover; }
.rd-rc-th svg { width: 16px; height: 16px; }
.rd-rc .chip { height: 22px; font-size: 11px; padding: 0 7px; }
.chip.k-alarm { color: var(--err); } .chip.k-incident { color: var(--warn); } .chip.k-schedule { color: var(--info); }
@media (max-width: 1280px) { .rd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .rd-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .rd-kpis { grid-template-columns: 1fr 1fr; } .rd-thumb { width: 96px; } .rd-row { flex-wrap: wrap; } .rd-act { flex-direction: row; width: 100%; } .rd-kind { grid-template-columns: 80px 1fr 28px; } }
.rd .t-title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd .t-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================ 2.11 camera browser */
.cb { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.cb-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; padding: 10px; display: grid; gap: 1px; }
.cb-sec { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); padding: 12px 8px 6px; }
.cb-sec:first-child { padding-top: 4px; }
.cb-sec a { color: var(--text-3); display: inline-flex; } .cb-sec a:hover { color: var(--accent); }
.cb-sec svg { width: 13px; height: 13px; }
.cb-node { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px 7px calc(8px + var(--d, 0) * 14px); border-radius: 9px; cursor: pointer; color: var(--text-2); font-size: 13px; transition: background .15s, color .15s; }
.cb-node > svg { width: 15px; height: 15px; flex: none; color: var(--text-3); transition: transform .18s var(--ease), color .15s; }
.cb-node > span:not(.dot):not(.cb-fdot) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-node em { font-style: normal; font: 600 11px var(--mono); color: var(--text-3); padding: 1px 6px; border-radius: 6px; background: var(--surface-2); }
.cb-node em.warn { color: var(--warn); }
.cb-node:hover { background: var(--surface-2); color: var(--text); }
.cb-node:hover > svg { transform: scale(1.1); }
.cb-node.on { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.cb-node.on > svg { color: var(--accent); }
.cb-node.v-offline > svg { color: var(--err); } .cb-node.v-online > svg { color: var(--ok); } .cb-node.v-fav > svg { color: var(--warn); }
.cb-node.drop { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: 2px dashed var(--accent); outline-offset: -2px; color: var(--text); }
.cb.dragging .cb-node[data-drop] { animation: vg-dropzone 1.2s ease-in-out infinite; }
@keyframes vg-dropzone { 50% { background: color-mix(in srgb, var(--accent) 8%, transparent); } }
.cb-tw { width: 14px; height: 14px; flex: none; display: grid; place-items: center; color: var(--text-3); }
.cb-tw svg { width: 12px; height: 12px; transition: transform .18s var(--ease); }
.cb-tw.open svg { transform: rotate(90deg); }
.cb-tw.none { visibility: hidden; }
.cb-fdot { width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--accent); opacity: .85; }
.cb-fbar { position: absolute; left: calc(30px + var(--d, 0) * 14px); right: 10px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ok) var(--p), color-mix(in srgb, var(--err) 55%, transparent) var(--p)); opacity: 0; transition: opacity .15s; }
.cb-node.f:hover .cb-fbar, .cb-node.f.on .cb-fbar { opacity: .8; }
.cb-hint { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--text-3); padding: 12px 8px 4px; }
.cb-hint svg { width: 13px; height: 13px; flex: none; }
.cb-main { display: grid; gap: 12px; min-width: 0; }
.cb-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cb-search { flex: 1; min-width: 220px; }
.cb-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.cb-sort { width: auto; height: 36px; }
.cb-scope { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.cb-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.cb-crumb svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.cb-stats { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.cb-stats b { color: var(--text); font-variant-numeric: tabular-nums; margin-right: 3px; }
.cb-stats .ok b { color: var(--ok); } .cb-stats .err b { color: var(--err); }
.cb-hbar { display: flex; width: 120px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.cb-hbar.sm { width: 70px; height: 4px; }
.cb-hbar i { display: block; height: 100%; transition: width .5s var(--ease); }
.cb-hbar i.ok { background: var(--ok); } .cb-hbar i.err { background: var(--err); }
.cb-bulk { position: sticky; top: 70px; z-index: 5; box-shadow: var(--shadow-pop); animation: vg-rise .2s var(--ease); flex-wrap: wrap; }
.cb-groups { display: grid; gap: 12px; }
.cb-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.cb-gh { display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer; user-select: none; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cb-group.closed .cb-gh { border-bottom: 0; }
.cb-group.closed .cb-gh .cb-tw svg { transform: none; }
.cb-gh b { font-size: 13.5px; }
.cb-gh > svg { width: 15px; height: 15px; color: var(--text-3); }
.cb-gh:hover { background: var(--surface-3); }
.cb-listv { display: grid; }
.cb-row { display: grid; grid-template-columns: auto auto 92px minmax(0, 1.6fr) minmax(110px, .7fr) 120px minmax(0, .7fr) 64px 18px; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; animation: vg-rise .3s var(--ease) both; animation-delay: calc(var(--i) * 18ms); }
.cb-row:last-child { border-bottom: 0; }
.cb-row:hover { background: var(--surface-2); }
.cb-row.sel { background: var(--accent-soft); }
.cb-row.h-offline, .cb-row.h-site-offline { box-shadow: inset 3px 0 0 var(--err); }
.cb-row .check { margin: 0; }
.cb-th, .cb-cth { position: relative; border-radius: 8px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); }
.cb-th { width: 92px; aspect-ratio: 16/9; }
.cb-th img, .cb-cth img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cb-th > svg { width: 18px; height: 18px; }
.cb-th .dot { position: absolute; right: 5px; bottom: 5px; z-index: 2; box-shadow: 0 0 0 2px rgba(0,0,0,.5); }
.cb-row.h-disabled .cb-th, .cb-card.h-disabled .cb-cth { opacity: .5; }
.cb-name { min-width: 0; }
.cb-name .t-title, .cb-cinfo .t-title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-name .t-sub, .cb-cinfo .t-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.cb-tags:empty { display: none; }
.cb-tag { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; color: var(--text-2); background: var(--surface-3); }
.cb-tag svg { width: 11px; height: 11px; }
.cb-tag.acc { color: var(--accent-strong); background: var(--accent-soft); } .cb-tag.rec { color: var(--live); background: color-mix(in srgb, var(--live) 13%, transparent); }
.cb-tag.rec svg circle:last-child { animation: vg-blink 1.4s ease-in-out infinite; }
.cb-tag.warn { color: var(--warn); background: var(--warn-soft); } .cb-tag.ok { color: var(--ok); background: var(--ok-soft); }
.cb-c { min-width: 0; font-size: 12.5px; }
.cb-health { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.cb-health.err { color: var(--err); } .cb-health.live { color: var(--ok); }
.cb-health .dot.live { background: var(--ok); animation: vg-breathe-live 2s ease-in-out infinite; }
@keyframes vg-breathe-live { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 15%, transparent); } }
.cb-exp { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cb-star { all: unset; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-3); opacity: .35; transition: opacity .15s, color .15s, transform .15s var(--ease); }
.cb-star svg { width: 15px; height: 15px; }
.cb-row:hover .cb-star, .cb-card:hover .cb-star { opacity: .8; }
.cb-star:hover { transform: scale(1.18); color: var(--warn); }
.cb-star.on { opacity: 1; color: var(--warn); } .cb-star.on svg { fill: currentColor; }
.cb-go { color: var(--text-3); display: grid; } .cb-go svg { width: 15px; height: 15px; transition: transform .15s var(--ease); }
.cb-row:hover .cb-go svg { transform: translateX(3px); color: var(--accent); }
.cb-gridv { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 12px; }
.cb-card { border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; cursor: pointer; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; animation: vg-rise .3s var(--ease) both; animation-delay: calc(var(--i) * 25ms); }
.cb-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-pop); }
.cb-card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
.cb-card.h-offline, .cb-card.h-site-offline { border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }
.cb-cth { aspect-ratio: 16/9; border-radius: 0; }
.cb-cth > svg { width: 22px; height: 22px; }
.cb-ctl, .cb-ctr { position: absolute; top: 7px; z-index: 2; display: flex; gap: 4px; align-items: center; }
.cb-ctl { left: 7px; padding: 2px 8px; border-radius: 6px; background: rgba(8,9,12,.65); backdrop-filter: blur(6px); }
.cb-ctl .cb-health { color: #fff; font-size: 11px; }
.cb-ctr { right: 7px; }
.cb-ctr .cb-star { background: rgba(8,9,12,.55); border-radius: 6px; color: #fff; opacity: .9; }
.cb-ctr .cb-star.on { color: var(--warn); }
.cb-cinfo { padding: 9px 11px 11px; }
.cb-none { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; text-align: center; }
.cb-none > svg { width: 26px; height: 26px; color: var(--text-3); }
.cb-ghost { position: fixed; top: -100px; left: -100px; padding: 6px 12px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: 600 13px var(--font); }
@media (max-width: 1280px) { .cb-row { grid-template-columns: auto auto 80px minmax(0, 1.6fr) minmax(100px, .8fr) 110px minmax(0, .6fr) 18px; } .cb-row .cb-metric { display: none; } }
@media (max-width: 1080px) { .cb { grid-template-columns: 1fr; } .cb-side { position: static; max-height: 260px; } .cb-row .cb-stream { display: none; } .cb-row { grid-template-columns: auto auto 80px minmax(0, 1fr) 110px auto 18px; } }
@media (max-width: 640px) { .cb-row { grid-template-columns: auto 72px minmax(0, 1fr) 18px; } .cb-row .cb-star, .cb-row .cb-c { display: none; } .cb-th { width: 72px; } .cb-lbl { display: none; } }
.cb-search { position: relative; display: block; }
.cb-search > svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.cb-search .input { width: 100%; padding-left: 36px; }

/* 2.12.2 recording dashboard: slim status strip, full-width active-recordings table */
.rd-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.rd-strip b { font-size: 14px; }
.rd-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--live); animation: vg-blink 1.6s ease-in-out infinite; }
.rd-strip.idle .rd-dot { background: var(--text-3); animation: none; }
.rd-strip.warn:not(.idle) .rd-dot { background: var(--warn); }
.rd-kpi { padding: 12px 14px; }
.rd-kpi-ic { width: 32px; height: 32px; border-radius: 9px; }
.rd-kpi-ic svg { width: 16px; height: 16px; }
.rd-kpi b { font-size: 20px; }
.rd-active .card-head { flex-wrap: wrap; gap: 10px; }
.rd-active .card-head h3 { display: flex; align-items: center; gap: 8px; }
.rd-search { position: relative; width: 200px; }
.rd-search > svg { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.rd-search .input { height: 32px; padding-left: 30px; width: 100%; }
.rd-bulk { margin: 10px 14px 0; flex-wrap: wrap; }
.rd-table td { vertical-align: middle; padding-top: 7px; padding-bottom: 7px; }
.rd-tr.wait td { background: color-mix(in srgb, var(--warn) 4%, transparent); }
.rd-cam { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rd-th { position: relative; width: 56px; height: 32px; flex: none; border-radius: 6px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); }
.rd-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-th > svg { width: 14px; height: 14px; }
.rd-modes { display: flex; gap: 5px; flex-wrap: wrap; }
.rd-mode { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.rd-mode svg { width: 13px; height: 13px; }
.rd-mode.c { color: var(--live); background: color-mix(in srgb, var(--live) 12%, transparent); }
.rd-mode.k { cursor: pointer; color: var(--accent-strong); background: var(--accent-soft); padding-right: 3px; }
.rd-mode.k.k-alarm { color: var(--err); background: var(--err-soft); }
.rd-mode b { font-variant-numeric: tabular-nums; }
.rd-x { all: unset; cursor: pointer; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; }
.rd-x:hover { background: var(--err); color: #fff; }
.rd-x svg { width: 12px; height: 12px; }
.rd-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.rd-st.on { color: var(--live); font-weight: 600; }
.rd-st.on i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: vg-blink 1.4s ease-in-out infinite; }
.rd-st.wait { color: var(--warn); } .rd-st svg { width: 13px; height: 13px; }
.rd-th-act { text-align: right; }
.rd-acts { text-align: right; white-space: nowrap; }
.rd-acts .btn { margin-left: 2px; }
.rd-stop { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, var(--border)); }
.rd-stop:hover { background: var(--err); color: #fff; }
.rd-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; }
.rd-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.rd-opt div { display: grid; gap: 2px; }
.rd-scope { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 760px) { .rd-scope { grid-template-columns: 1fr; } .rd-search { width: 100%; } .rd-table th:nth-child(5), .rd-table td:nth-child(5) { display: none; } }

/* 2.13.1 storage manager + file manager */
.stm { display: grid; gap: 14px; }
.sm-site { gap: 8px; flex-wrap: wrap; }
.sm-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.sm-disk { padding: 16px; display: grid; gap: 12px; }
.sm-disk-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.sm-disk-h b { display: block; font-size: 18px; }
.sm-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-3); }
.sm-bar i { display: block; height: 100%; transition: width .6s var(--ease); }
.sm-bar i.c, .sm-legend i.c, .sm-ubar i.c { background: var(--accent); }
.sm-bar i.k, .sm-legend i.k, .sm-ubar i.k { background: var(--warn); }
.sm-bar i.o, .sm-legend i.o { background: color-mix(in srgb, var(--text-3) 55%, transparent); }
.sm-legend i.f { background: var(--surface-3); outline: 1px solid var(--border-strong); }
.sm-bar.warn { box-shadow: 0 0 0 1px var(--warn); } .sm-bar.err { box-shadow: 0 0 0 1px var(--err); }
.sm-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.sm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sm-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sm-facts { display: grid; gap: 10px; }
.sm-table td { vertical-align: middle; }
.sm-modes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sm-modes .switch { font-size: 12.5px; gap: 6px; }
.sm-use { display: grid; gap: 4px; min-width: 140px; }
.sm-ubar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-3); max-width: 220px; }
.sm-ubar i { display: block; height: 100%; }
@media (max-width: 980px) { .sm-top { grid-template-columns: 1fr; } .sm-table th:nth-child(5), .sm-table td:nth-child(5) { display: none; } }
.sm-top { grid-template-columns: 1fr; }
.sm-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-disk-h .row { flex-wrap: nowrap; }
.sm-disk-h .btn, .stm .bulkbar .btn { white-space: nowrap; }
.sm-table td:nth-child(6) { white-space: nowrap; }
@media (max-width: 760px) { .sm-facts { grid-template-columns: 1fr; } .sm-disk-h .row { flex-wrap: wrap; } }
/* 2.14.1 active-recording states */
.rd-st.exp { color: var(--warn); font-weight: 600; }
.rd-st.ok { color: var(--ok); font-weight: 600; }
.rd-st.sb { color: var(--text-3); }
.rd-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: vg-spin .8s linear infinite; }
.rd-mode.d { cursor: pointer; background: var(--surface-3); color: var(--text-2); }
.rd-mode.d.finalizing { color: var(--warn); background: var(--warn-soft); }
.rd-mode.d.ready { color: var(--ok); background: var(--ok-soft); }
.rd-mode.d.failed { color: var(--err); background: var(--err-soft); }
.rd-tr.s-standby td, .rd-tr.s-idle td { opacity: .85; }
.rd-tr.s-novideo td { background: color-mix(in srgb, var(--warn) 4%, transparent); }

/* 2.16 notifications (Telegram) */
.nt-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 14px; }
.nt-hero.on { border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.nt-logo { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #229ed9; flex: none; }
.nt-logo svg { width: 22px; height: 22px; fill: #fff; margin-left: -2px; }
.nt-hero-t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.nt-hero-t b { font-size: 15px; }
.nt-kpis { display: flex; gap: 18px; }
.nt-kpis div { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.nt-kpis b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.nt-kpis span { font-size: 11.5px; color: var(--text-3); }
.nt-token { flex-wrap: nowrap; gap: 8px; } .nt-token .input { flex: 1; min-width: 0; }
.nt-steps { margin: 0; padding-left: 18px; color: var(--text-2); line-height: 1.7; }
.nt-rules { display: flex; flex-direction: column; gap: 12px; }
.nt-rules .row .input { max-width: 120px; }
.nt-quiet { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.nt-quiet .input { max-width: 120px; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 4px; } .nt-chips .chip { height: 22px; font-size: 11.5px; }
tr.nt-off td { opacity: .55; }
.nt-evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.nt-camseg { margin-bottom: 8px; }
.nt-cams { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--surface-2); }
.nt-camlist { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.nt-cg { display: flex; flex-direction: column; gap: 2px; }
.nt-cgh { padding: 2px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.nt-cam { padding: 3px 0 3px 18px; }
.nt-chats { display: flex; flex-direction: column; gap: 6px; }
.nt-chat { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nt-chat:hover, .nt-chat.on { border-color: var(--accent); } .nt-chat svg { width: 16px; height: 16px; color: var(--text-3); }
@media (max-width: 980px) { .nt-grid { grid-template-columns: minmax(0, 1fr); } }
.nt-ck { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; color: var(--text-2); }
.nt-ck input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: none; }
.nt-ck[hidden] { display: none; }
/* 2.16.1: thumbnails — green dot = streaming, red REC badge only while really recording */
.cb-th .dot.live, .cb-cth .dot.live { background: var(--ok); animation: vg-breathe-live 2s ease-in-out infinite; }
.cb-rec { position: absolute; left: 5px; bottom: 5px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(225, 29, 72, .92); color: #fff; font-size: 9.5px; font-weight: 750; letter-spacing: .06em; }
.cb-rec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: vg-blink 1.4s ease-in-out infinite; }
.cb-ctl .cb-rec { position: static; margin-left: 6px; }
/* 2.16.1 add-site transport readiness */
.choice.is-off { opacity: .62; cursor: not-allowed; }
.choice-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--warn); }
.choice-note.err { color: var(--err); } .choice-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.choice-note b { color: inherit; }

/* Add site: compact choices, consistent form inset and contained text. */
.add-site-modal .modal-body { padding: 18px 22px; min-height: 0; }
.add-site-modal .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.add-site-modal .choice { min-width: 0; }
.add-site-modal .choice-copy { min-width: 0; overflow-wrap: anywhere; }
.add-site-modal .choice .cd { display: block; }
@media (max-width: 760px) { .add-site-modal .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .add-site-modal .choice-grid { grid-template-columns: 1fr; } .add-site-modal .modal-body { padding: 16px 18px; } .add-site-modal .modal-foot { flex-wrap: wrap; } }

/* Recorded files: path bar, date folder row (2.17.1) and the bounded file player (2.17.2). */
.fm-path { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text-2); font-size: 13px; margin-top: -2px; }
.fm-path svg, .fm-date-folder svg { width: 16px; height: 16px; color: var(--accent); }
.fm-path .btn svg { color: inherit; width: 14px; height: 14px; }
.fm-date-folder { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 18px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12px; font-variant-numeric: tabular-nums; }
.fm-date-folder > span:last-child { margin-left: auto; }
.file-player-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; }
.file-player-controls output { font-size: 13px; min-width: 105px; }
.file-player-controls input[type=range] { flex: 1; min-width: 140px; accent-color: var(--accent); cursor: pointer; }
.recorded-file-modal .rec-video { max-height: 65dvh; }
.recorded-file-modal [data-file-status] { min-height: 18px; margin: 0; }
@media (max-width: 600px) { .fm-date-folder { padding: 8px 12px; flex-wrap: wrap; } .file-player-controls { gap: 8px; } .file-player-controls input[type=range] { order: 5; flex-basis: 100%; } .fm-path .row { flex-wrap: wrap; } .recorded-file-modal .modal-body { padding: 12px; } }

/* ---------- 2.17.3 Recorded files — file manager (summary, coverage, aligned columns, paging) */
.fm { display: grid; gap: 14px; }
.fm-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fm-bar .select, .fm-bar .input { height: 34px; width: auto; }
.fm-cam { min-width: 220px; max-width: 320px; }
.fm-sp { flex: 1; }
.fm-date { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); }
.fm-date .input, :root[data-theme] .fm-date .input { border: 0; background: transparent; box-shadow: none; width: 150px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.fm-date .btn { height: 30px; width: 30px; }
.fm-streams button { min-width: 48px; justify-content: center; }
.fm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fm-stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.fm-stat-l { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); font-weight: 560; }
.fm-stat-l svg { width: 14px; height: 14px; }
.fm-stat b { font-size: 20px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.fm-stat b em { font-style: normal; color: var(--text-3); font-weight: 500; font-size: 14px; }
.fm-stat small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-note { margin: 0; }
.fm-groups { display: grid; gap: 8px; transition: opacity .15s; }
.fm-groups.busy { opacity: .55; pointer-events: none; }
.fm-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.fm-gh { display: grid; grid-template-columns: auto auto auto minmax(140px, 1fr) minmax(180px, 340px) auto; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; user-select: none; border-bottom: 1px solid var(--border); background: var(--surface-2); outline: none; }
.fm-gh:not(:has(.check)) { grid-template-columns: auto auto minmax(140px, 1fr) minmax(180px, 340px) auto; }
.fm-gh:hover { background: var(--surface-3); }
.fm-gh:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.fm-group.closed .fm-gh { border-bottom: 0; }
.fm-tw { display: grid; place-items: center; width: 16px; color: var(--text-3); }
.fm-tw svg { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .18s var(--ease); }
.fm-group.closed .fm-tw svg { transform: none; }
.fm-cam-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.fm-cam-ic svg { width: 16px; height: 16px; }
.fm-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fm-title b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-title small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.fm-covwrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fm-cov { position: relative; height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--text-3) 14%, transparent); overflow: hidden; }
.fm-cov i { position: absolute; top: 0; bottom: 0; min-width: 2px; background: var(--accent); cursor: pointer; transition: filter .12s; }
.fm-cov i:hover { filter: brightness(1.25); }
.fm-now { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--live); border-radius: 1px; }
.fm-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.fm-gact { display: flex; gap: 4px; justify-content: flex-end; }
.btn.fm-danger:hover:not(:disabled) { color: var(--err); background: var(--err-soft); }
.fm-tablewrap { overflow-x: auto; }
.fm-table { width: 100%; table-layout: fixed; min-width: 560px; }
.fm-table th:nth-last-child(4) { width: 120px; } .fm-table th:nth-last-child(3) { width: 100px; } .fm-table th:nth-last-child(2) { width: 110px; }
.fm-table th { padding: 8px 14px; background: var(--surface); }
.fm-table td { padding: 7px 14px; vertical-align: middle; }
.fm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fm-c-check { width: 44px; padding-right: 0 !important; }
.fm-c-act { width: var(--actw, 200px); }
.fm-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fm-time b { font-weight: 600; }
.fm-time span { color: var(--text-3); margin-left: 8px; }
.fm-time .fm-live { margin-left: 10px; height: 20px; font-size: 11px; }
.fm-stream { display: inline-flex; height: 20px; align-items: center; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; text-transform: capitalize; color: var(--text-2); background: var(--surface-3); }
.fm-acts { display: flex; justify-content: flex-end; align-items: center; gap: 2px; flex-wrap: nowrap; }
.fm-acts .btn.icon { width: 32px; }
.fm-acts .btn:not(.icon) { margin-right: 4px; }
.fm-table tbody tr:not(:hover):not(.selected) .fm-acts .btn.ghost { color: var(--text-3); }
.fm-more { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12.5px; }
.fm-more .faint { flex: 1; }
.fm-bulkwrap { position: sticky; bottom: 16px; z-index: 5; }
.fm-bulkwrap:empty { display: none; }
.fm-bulk { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--overlay); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-pop); backdrop-filter: blur(10px); font-size: 13px; }
.fm-bulk > svg { width: 16px; height: 16px; color: var(--accent); }
.fm-bulk .btn.danger { background: var(--err-soft); border-color: transparent; }
.fm .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) {
  .fm-gh, .fm-gh:not(:has(.check)) { grid-template-columns: auto auto auto minmax(0, 1fr) auto; }
  .fm-gh:not(:has(.check)) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .fm-covwrap { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 720px) {
  .fm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-cam { min-width: 0; flex: 1 1 100%; max-width: none; }
  .fm-hide-sm { display: none; }
  .fm-time span:not(.fm-live) { display: block; margin-left: 0; font-size: 12px; }
  .fm-table td, .fm-table th { padding-left: 10px; padding-right: 10px; }
  .fm-bulk { flex-wrap: wrap; }
  .fm-acts .btn.icon { width: 28px; }
  .fm-acts .btn:not(.icon) { width: 32px; padding: 0; margin-right: 2px; }
  .fm-c-check { width: 34px; }
  .fm-table { min-width: 0; }
  .fm-table th:nth-last-child(4) { width: 84px; }
  .fm-time { white-space: normal; }
  .fm-time .fm-live { margin: 4px 0 0; }
  .fm-table td.num { padding-right: 6px; font-size: 13px; }
  .fm-c-act { width: var(--actw-sm, 110px); padding-left: 4px !important; }
  .fm-gh { gap: 10px; padding: 12px; }
}