:root {
  color-scheme: light;
  --bg: #e3ebf1;
  --panel: #ffffff;
  --panel-soft: #f8fbfc;
  --line: #d5d8dc;
  --text: #191c32;
  --muted: #5c5f6f;
  --accent: #ff844b;
  --accent-dark: #d96c3a;
  --blue: #4e7d96;
  --blue-soft: #e3ebf1;
  --coral-soft: #ffeee6;
  --danger: #cc3366;
  --shadow: 0 18px 42px rgba(25, 28, 50, .1);
}

/* Retail analytics: decision dashboard kept separate from live incident monitoring. */
.retail-analytics-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 28px;margin-bottom:18px;border-radius:20px;color:#fff;background:linear-gradient(125deg,#0f172a,#1e3a8a 64%,#0e7490);box-shadow:0 18px 45px rgba(15,23,42,.18)}
.retail-analytics-hero h2{margin:5px 0 8px;font-size:clamp(24px,3vw,38px);max-width:820px;color:#fff}.retail-analytics-hero p{margin:0;max-width:850px;color:#dbeafe}.retail-hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;min-width:250px}.retail-demo-badge{flex-basis:100%;padding:7px 10px;border:1px solid rgba(253,186,116,.55);border-radius:999px;color:#ffedd5;background:rgba(154,52,18,.34);font-size:11px;font-weight:900;letter-spacing:.08em;text-align:center}
.retail-filter-panel{margin-bottom:16px}.retail-filter-bar{display:grid;grid-template-columns:1.3fr 1.2fr 1.3fr .8fr repeat(2,1fr) auto auto;gap:10px;align-items:end}.retail-filter-bar label{display:grid;gap:5px;color:#64748b;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.retail-filter-bar select,.retail-filter-bar input{min-width:0;height:40px;padding:0 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#0f172a}.retail-filter-bar .button{white-space:nowrap}
.retail-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.retail-kpi-grid article{position:relative;overflow:hidden;padding:17px 18px;border:1px solid #dbeafe;border-radius:14px;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:0 8px 22px rgba(15,23,42,.05)}.retail-kpi-grid article:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#2563eb}.retail-kpi-grid article.attention:before{background:#f97316}.retail-kpi-grid span,.retail-kpi-grid small{display:block;color:#64748b}.retail-kpi-grid span{font-size:12px;font-weight:800;text-transform:uppercase}.retail-kpi-grid strong{display:block;margin:3px 0;font-size:28px;color:#0f172a}.retail-kpi-grid small{font-size:11px}
.retail-comparison-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:-2px 0 16px;overflow:hidden;border:1px solid #dbeafe;border-radius:12px;background:#dbeafe}.retail-comparison-strip>div{padding:12px 16px;background:#f8fbff}.retail-comparison-strip span,.retail-comparison-strip small{display:block;color:#64748b;font-size:11px}.retail-comparison-strip span{font-weight:800;text-transform:uppercase}.retail-comparison-strip strong{display:block;margin:2px 0;color:#0f172a;font-size:20px}.retail-insight-strip{padding:18px 20px;margin-bottom:16px;border:1px solid #bfdbfe;border-radius:14px;background:#eff6ff}.retail-recommendations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.retail-recommendations p{display:flex;gap:10px;align-items:flex-start;margin:0;padding:11px 12px;border-radius:10px;background:rgba(255,255,255,.8);color:#334155}.retail-recommendations p>span{display:grid;gap:3px}.retail-recommendations p strong{color:#0f172a}.retail-recommendations p.attention{border-left:3px solid #f59e0b}.retail-recommendations p.good{border-left:3px solid #22c55e}.retail-recommendations p.risk{border-left:3px solid #ef4444}.retail-recommendations p.info{border-left:3px solid #3b82f6}.retail-recommendations i{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:50%;color:#fff;background:#2563eb;font-style:normal;font-size:11px;font-weight:900}
.retail-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.retail-wide-card{grid-column:1/-1}.retail-chart-card{min-width:0}.retail-chart-card canvas{display:block;width:100%;max-width:100%}#retailTrendChart{height:300px}.retail-bar-chart{display:flex;align-items:end;gap:7px;height:220px;padding:16px 6px 0}.retail-bar-chart span{display:grid;grid-template-rows:1fr auto;align-items:end;flex:1;height:100%;text-align:center}.retail-bar-chart i{display:block;min-height:3px;border-radius:5px 5px 1px 1px;background:linear-gradient(#2563eb,#60a5fa)}.retail-bar-chart em{padding-top:7px;color:#64748b;font-size:10px;font-style:normal}
.retail-profile-split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.retail-profile-split>div,.retail-zone-list{display:grid;gap:10px}.retail-profile-split>div>strong{margin-bottom:4px;color:#334155}.retail-profile-split span,.retail-zone-list span{display:grid;grid-template-columns:90px 1fr 34px;align-items:center;gap:8px;font-size:12px}.retail-profile-split span i,.retail-zone-list span i{height:8px;border-radius:99px;background:linear-gradient(90deg,#0ea5e9 var(--value),#e2e8f0 var(--value))}.retail-profile-split b,.retail-zone-list b{font-weight:700;color:#475569}.retail-profile-split em,.retail-zone-list em{font-style:normal;text-align:right;color:#64748b}.retail-mini-map{position:relative;overflow:hidden;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff}.retail-mini-map canvas{aspect-ratio:2/1}.retail-mini-map span{position:absolute;z-index:2;padding:3px 5px;border-radius:4px;color:#0f172a;background:rgba(255,255,255,.78);font-size:9px;font-weight:900}.retail-map-footer{display:flex;justify-content:space-between;gap:12px;padding-top:10px;color:#64748b;font-size:12px}
.retail-method-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:center}.retail-method-flow article{height:100%;padding:16px;border:1px solid #dbeafe;border-radius:12px;background:#f8fbff}.retail-method-flow article i{display:grid;place-items:center;width:26px;height:26px;margin-bottom:9px;border-radius:50%;color:#fff;background:#2563eb;font-style:normal;font-weight:900}.retail-method-flow article strong,.retail-method-flow article span{display:block}.retail-method-flow article span{margin-top:5px;color:#64748b;font-size:12px;line-height:1.5}.retail-method-flow>b{color:#2563eb;font-size:24px}.retail-method-note{margin:15px 0 0;padding:12px 14px;border-left:4px solid #f97316;background:#fff7ed;color:#7c2d12}.retail-capability-table td{vertical-align:top}.retail-fit{display:inline-block;padding:4px 8px;border-radius:999px;background:#e0f2fe;color:#075985;font-size:11px;font-weight:800;white-space:nowrap}.retail-fit.integration-required,.retail-fit.custom{background:#ffedd5;color:#9a3412}.retail-fit.supported,.retail-fit.native{background:#dcfce7;color:#166534}
.retail-heatmap-demo-notice{margin-bottom:14px;border-left:5px solid #f97316;background:#fff7ed;color:#9a3412}.retail-heatmap-demo-notice strong{margin-right:10px;letter-spacing:.06em}.retail-floor-plan{background:linear-gradient(135deg,#eff6ff,#f8fafc)}.retail-display-fixtures{position:absolute;inset:10% 8% 39% 48%;display:grid;grid-template-columns:repeat(5,1fr);gap:4%}.retail-display-fixtures span{border:2px solid rgba(37,99,235,.22);border-radius:6px;background:rgba(147,197,253,.18);box-shadow:inset 0 0 0 6px rgba(255,255,255,.28)}.retail-service-counter,.retail-pos-counter{position:absolute;bottom:8%;height:18%;border:3px solid rgba(15,118,110,.26);border-radius:7px;background:repeating-linear-gradient(90deg,rgba(45,212,191,.14) 0 18%,rgba(255,255,255,.28) 18% 22%)}.retail-service-counter{left:24%;width:34%}.retail-pos-counter{right:7%;width:26%;border-color:rgba(249,115,22,.28);background:repeating-linear-gradient(90deg,rgba(251,146,60,.14) 0 28%,rgba(255,255,255,.3) 28% 34%)}.retail-entry-gate{position:absolute;left:4%;top:37%;width:12%;height:28%;border:3px dashed rgba(37,99,235,.28);border-radius:50% 50% 9px 9px}
html[data-theme="dark"] .retail-filter-bar select,html[data-theme="dark"] .retail-filter-bar input,html[data-theme="dark"] .retail-kpi-grid article,html[data-theme="dark"] .retail-recommendations p,html[data-theme="dark"] .retail-method-flow article,html[data-theme="dark"] .retail-comparison-strip>div{background:#111827;color:#e5e7eb;border-color:#334155}html[data-theme="dark"] .retail-kpi-grid strong,html[data-theme="dark"] .retail-comparison-strip strong,html[data-theme="dark"] .retail-recommendations p strong{color:#f8fafc}html[data-theme="dark"] .retail-comparison-strip{background:#334155;border-color:#334155}html[data-theme="dark"] .retail-insight-strip{background:#0f172a;border-color:#1e3a8a}html[data-theme="dark"] .retail-method-note{background:#431407;color:#fed7aa}
@media(max-width:1180px){.retail-filter-bar{grid-template-columns:repeat(4,minmax(0,1fr))}.retail-kpi-grid,.retail-comparison-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.retail-analytics-hero{align-items:flex-start;flex-direction:column}.retail-hero-actions{justify-content:flex-start;min-width:0}.retail-filter-bar,.retail-kpi-grid,.retail-comparison-strip,.retail-dashboard-grid,.retail-recommendations,.retail-profile-split{grid-template-columns:1fr}.retail-wide-card{grid-column:auto}.retail-method-flow{grid-template-columns:1fr}.retail-method-flow>b{transform:rotate(90deg);text-align:center}.retail-capability-table{min-width:760px}}

* { box-sizing: border-box; }

table,
td,
th,
.panel,
.card,
.ai-monitor-card,
.analytics-card,
.analytics-settings-row,
.ai-node-card,
.notification-card,
.source-card,
.metric-card,
.stat-card,
.face-holder,
.badge,
.button {
  min-width: 0;
}

td,
th,
.panel,
.card,
.ai-monitor-card,
.analytics-card,
.analytics-settings-row,
.ai-node-card,
.notification-card,
.source-card,
.metric-card,
.stat-card,
.raw-json,
.badge {
  overflow-wrap: anywhere;
  word-break: normal;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

a {
  color: var(--blue);
  text-decoration: none;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  padding: 24px 18px;
  background: rgba(255, 255, 255, .86);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 30px;
}

.brand-mark,
.landing-mark {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #191c32, #4e7d96);
  color: #fff;
  box-shadow: var(--shadow);
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-weight: 800;
  object-fit: cover;
}

.brand strong,
.brand span {
  display: block;
}

.brand span,
.topbar p,
.panel-head span,
.stat span,
.camera-head span,
.eyebrow,
.notification-tools span,
.add-face-start span,
.upload-status {
  color: var(--muted);
  font-size: 13px;
}

nav {
  display: grid;
  gap: 8px;
}

nav a {
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 700;
}

nav a.active,
nav a:hover {
  background: var(--panel-soft);
  color: var(--blue);
}

.main {
  margin-left: 250px;
  padding: 28px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 4px;
  font-size: 28px;
}

h2 {
  font-size: 20px;
  margin-bottom: 0;
}

.status-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
}

.status-light {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  background: #111;
}

.status-light.active {
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(255, 132, 75, .16);
}

.status-wrap.receiving,
.status-wrap.forwarding,
.status-wrap.active {
  border-color: #fed7aa;
  color: var(--warning);
}

.status-wrap.received,
.status-wrap.delivered {
  border-color: #99f6e4;
  color: var(--success);
}

.status-wrap.failed {
  border-color: #fecdd3;
  color: #be123c;
}

.status-light.receiving,
.status-light.forwarding,
.status-light.active {
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(255, 120, 71, .16);
}

.status-light.received,
.status-light.delivered {
  background: var(--success);
  box-shadow: 0 0 0 8px rgba(15, 118, 110, .14);
}

.status-light.failed {
  background: var(--danger);
  box-shadow: 0 0 0 8px rgba(192, 38, 92, .14);
}

.hero-band {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 28px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #191c32 0%, #25314d 48%, #4e7d96 100%);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
  overflow: hidden;
}

.hero-band h2 {
  font-size: 30px;
  margin: 8px 0;
}

.hero-band p,
.hero-band .eyebrow {
  color: var(--blue-soft);
}

.hero-actions,
.form-actions,
.actions,
.landing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.button {
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.button:hover {
  background: var(--accent-dark);
}

.button.warm {
  background: var(--blue);
}

.button.light {
  background: var(--panel-soft);
  color: var(--text);
}

.button.ghost {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--accent);
}

.button.danger {
  background: var(--danger);
}

.button.tiny {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.stat,
.panel,
.camera-column {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.stat {
  padding: 18px;
}

.stat strong {
  display: block;
  margin-top: 8px;
  font-size: 32px;
  color: var(--text);
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.panel {
  padding: 20px;
  margin-bottom: 18px;
  overflow-x: auto;
}

.panel-head,
.camera-head,
.notification-tools,
.image-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.type-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--panel-soft);
  border-radius: 12px;
}

.toolbar,
.upload-box,
.form-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.toolbar {
  grid-template-columns: minmax(260px, 1fr) auto;
}

.upload-box {
  grid-template-columns: minmax(280px, 1fr) auto;
  padding: 18px;
  background: var(--panel-soft);
  border: 1px dashed #b8cad5;
  border-radius: 14px;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid .full {
  grid-column: 1 / -1;
}

.form-actions {
  align-items: end;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox-line input {
  width: auto;
}

.nx-video-player {
  width: 100%;
  max-height: 70vh;
  background: #05070a;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.notification-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.notification-evidence-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.notification-evidence-card h3,
.notification-evidence-card p {
  margin: 0;
}
.evidence-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.notification-evidence-image {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #05070a;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Investigation workspace */
.investigation-hero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 16px;
  padding: 22px 24px;
  color: #f8fafc;
  background: linear-gradient(125deg, #102a43 0%, #134e4a 100%);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.investigation-hero h2 { margin: 3px 0 6px; font-size: clamp(24px, 3vw, 34px); }
.investigation-hero p { max-width: 760px; margin: 0; color: #cbd5e1; }
.eyebrow { color: #5eead4; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.investigation-stats { display: grid; min-width: 130px; text-align: right; }
.investigation-stats strong { font-size: 32px; line-height: 1; }
.investigation-stats span { color: #cbd5e1; font-size: 12px; }
.investigation-stats em { margin-top: 6px; color: #99f6e4; font-size: 11px; font-style: normal; }
.filter-panel { padding: 16px; }
.investigation-filters { display: grid; grid-template-columns: minmax(250px, 2fr) repeat(5, minmax(135px, 1fr)) auto; gap: 10px; align-items: end; }
.investigation-filters label { position: relative; min-width: 0; }
.investigation-filters label > span { min-height: 16px; }
.investigation-filters .filter-search .action-icon { position: absolute; z-index: 1; left: 11px; bottom: 12px; color: var(--muted); }
.investigation-filters .filter-search input { padding-left: 38px; }
.filter-actions { display: flex; gap: 8px; }
.filter-actions.icon-only {
  align-items: center;
  justify-content: flex-start;
  min-height: 42px;
}
.filter-action-button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 10px;
}
.filter-action-button .action-icon {
  width: 19px;
  height: 19px;
}
.action-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.icon-label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.incident-table-wrap { width: 100%; overflow-x: auto; }
.incident-table { width: 100%; table-layout: fixed; }
.incident-table th:nth-child(1) { width: 112px; }
.incident-table th:nth-child(2) { width: 18%; }
.incident-table th:nth-child(3) { width: 20%; }
.incident-table th:nth-child(4) { width: 17%; }
.incident-table th:nth-child(5) { width: 120px; }
.incident-table th:nth-child(6) { width: 15%; }
.incident-table th:nth-child(7) { width: 156px; }
.incident-table th, .incident-table td { padding: 12px 10px; vertical-align: middle; }
.incident-table td { overflow-wrap: anywhere; }
.incident-table td > strong, .incident-table td > span, .incident-table td > small { display: block; }
.incident-table small, .incident-table td > span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.incident-table tr.is-selected td { background: color-mix(in srgb, var(--blue-soft) 68%, white); }
.incident-time strong { font-size: 14px; }
.incident-time small { color: var(--muted); }
.incident-type { color: var(--text) !important; font-size: 13px !important; font-weight: 850; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.evidence-stack { display: grid; justify-items: start; gap: 5px; }
.evidence-thumb, .evidence-placeholder { display: grid; width: 74px; height: 48px; place-items: center; overflow: hidden; background: #07111f; border: 1px solid var(--line); border-radius: 8px; }
.evidence-thumb img { width: 100%; height: 100%; object-fit: cover; }
.evidence-placeholder { color: #94a3b8; }
.vms-state { display: inline-flex !important; width: fit-content; align-items: center; gap: 5px; padding: 3px 7px; color: #475569 !important; background: #e2e8f0; border-radius: 999px; font-size: 10px !important; font-weight: 800; text-transform: capitalize; }
.vms-state.marked { color: #166534 !important; background: #dcfce7; }
.vms-state.failed, .vms-state.not_configured { color: #991b1b !important; background: #fee2e2; }
.vms-state.accepted, .vms-state.acknowledged, .vms-state.not_required { color: #166534 !important; background: #dcfce7; }
.vms-state.pending, .vms-state.not_synced { color: #92400e !important; background: #fef3c7; }
.vms-status-overview {
  display: grid;
  grid-template-columns: 36px auto auto;
  align-items: center;
  gap: 9px;
  max-width: 440px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}
.vms-overview-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
}
.vms-status-overview > div {
  display: grid;
  min-width: 92px;
}
.vms-status-overview small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.vms-status-overview strong {
  font-size: 12px;
}
.vms-overview-counts {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}
.vms-overview-counts b {
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  font-size: 9px;
  white-space: nowrap;
}
.vms-status-overview.pending {
  border-color: rgba(242,169,59,.25);
  background: rgba(242,169,59,.075);
}
.vms-status-overview.pending .vms-overview-icon { color: #b8751e; background: rgba(242,169,59,.12); }
.vms-status-overview.marked {
  border-color: rgba(34,185,137,.25);
  background: rgba(34,185,137,.075);
}
.vms-status-overview.marked .vms-overview-icon { color: #16835f; background: rgba(34,185,137,.12); }
.vms-status-overview.attention {
  border-color: rgba(239,71,111,.25);
  background: rgba(239,71,111,.075);
}
.vms-status-overview.attention .vms-overview-icon { color: #c83c54; background: rgba(239,71,111,.12); }
.icon-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-button { display: inline-grid; width: 34px; height: 34px; padding: 0; place-items: center; color: var(--text); background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; text-decoration: none; }
.icon-button:hover { color: var(--green); border-color: var(--green); transform: translateY(-1px); }
.icon-button.primary { color: #fff; background: var(--green); border-color: var(--green); }
.icon-button:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.incident-detail-panel { scroll-margin-top: 14px; }
.incident-summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.incident-summary-strip > div { display: grid; gap: 4px; padding: 12px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 10px; }
.incident-summary-strip span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.incident-summary-strip small { color: var(--muted); }
.incident-nx-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.notification-evidence-card.evidence-primary { grid-column: span 1; }
.technical-details { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.technical-details > summary { display: flex; align-items: center; gap: 8px; padding: 13px 15px; color: var(--text); background: var(--panel-soft); cursor: pointer; font-weight: 800; }
.technical-details[open] > summary { border-bottom: 1px solid var(--line); }
.technical-details > :not(summary) { margin: 14px; }
.investigation-empty { padding: 42px 16px; }

@media (max-width: 1450px) {
  .investigation-filters { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  .filter-actions { align-self: end; }
  .incident-table { min-width: 1080px; }
}
@media (max-width: 760px) {
  .investigation-hero { align-items: start; flex-direction: column; }
  .investigation-stats { text-align: left; }
  .investigation-filters { grid-template-columns: 1fr; }
  .filter-actions { width: 100%; }
  .filter-actions:not(.icon-only) > * { flex: 1; }
  .filter-actions.icon-only { width: auto; }
  .incident-list-panel .panel-head { align-items: stretch; flex-direction: column; }
  .vms-status-overview { max-width: none; }
  .incident-summary-strip { grid-template-columns: 1fr 1fr; }
}

.workspace-heading { display: flex; justify-content: space-between; align-items: end; margin: 0 0 14px; padding: 4px 2px; }
.workspace-heading h2 { margin: 3px 0 4px; font-size: 28px; }
.workspace-heading p { margin: 0; color: var(--muted); }
.workspace-heading .eyebrow { color: var(--green); }
.queue-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.queue-metric { display: grid; gap: 3px; padding: 15px 17px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #64748b; border-radius: 12px; box-shadow: 0 4px 14px rgba(15,23,42,.05); text-decoration: none; }
.queue-metric:hover { border-color: var(--green); transform: translateY(-1px); }
.queue-metric.info { border-left-color: #2563eb; }
.queue-metric.warning { border-left-color: #d97706; }
.queue-metric.danger { border-left-color: #dc2626; }
.queue-metric span { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.queue-metric strong { font-size: 25px; }
.queue-metric small { color: var(--muted); }
.ticket-filters { display: grid; grid-template-columns: minmax(280px, 2fr) repeat(3, minmax(155px, 1fr)) auto; gap: 10px; align-items: end; }
.maintenance-filters { display: grid; grid-template-columns: minmax(320px, 2fr) minmax(180px, 1fr) auto; gap: 10px; align-items: end; }
.ticket-filters .filter-search, .maintenance-filters .filter-search { position: relative; }
.ticket-filters .filter-search .action-icon, .maintenance-filters .filter-search .action-icon { position: absolute; z-index: 1; left: 11px; bottom: 12px; color: var(--muted); }
.ticket-filters .filter-search input, .maintenance-filters .filter-search input { padding-left: 38px; }
.work-queue-table { width: 100%; table-layout: fixed; }
.work-queue-table th:nth-child(1) { width: 120px; }
.work-queue-table th:nth-child(2) { width: 27%; }
.work-queue-table th:nth-child(3) { width: 125px; }
.work-queue-table th:nth-child(4) { width: 16%; }
.work-queue-table th:nth-child(5) { width: 15%; }
.work-queue-table th:nth-child(6) { width: 12%; }
.work-queue-table th:nth-child(7) { width: 310px; }
.work-queue-table th, .work-queue-table td { padding: 12px 10px; vertical-align: middle; }
.work-queue-table td > strong, .work-queue-table td > span, .work-queue-table td > small { display: block; }
.work-queue-table small { margin-top: 3px; color: var(--muted); }
.priority-flag, .status-pill { display: inline-flex !important; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.priority-flag { color: #334155; background: #e2e8f0; text-transform: uppercase; }
.priority-flag.critical, .priority-flag.emergency { color: #991b1b; background: #fee2e2; }
.priority-flag.high, .priority-flag.warning { color: #92400e; background: #fef3c7; }
.status-pill { color: #1e3a8a; background: #dbeafe; }
.status-pill.status-resolved, .status-pill.status-closed { color: #166534; background: #dcfce7; }
.status-pill.status-escalated { color: #991b1b; background: #fee2e2; }

/* Operational labels must remain readable as a single unit at every viewport. */
.badge,
.priority-flag,
.status-pill,
.status-chip,
.ticket-severity,
.alarm-priority-badge,
.alarm-evidence-state,
.alarm-age-badge,
.vms-state,
.evidence-source-pill,
.live-source-badge,
.desk-camera-status {
  flex-shrink: 0;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.ticket-quick-update { display: grid; grid-template-columns: 115px minmax(120px, 1fr) 34px; gap: 6px; align-items: center; }
.ticket-quick-update select, .ticket-quick-update input { min-height: 34px; padding: 6px 8px; font-size: 11px; }
.text-danger { color: #b91c1c; }
.video-investigation-panel { max-width: 1280px; margin-inline: auto; }
.video-window-options { display: flex; align-items: center; gap: 6px; margin: 12px 0; }
.video-window-options > span { margin-right: 6px; color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.video-window-options a { padding: 6px 10px; color: var(--text); background: var(--panel-soft); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 800; text-decoration: none; }
.video-window-options a.active { color: #fff; background: var(--green); border-color: var(--green); }
.video-stage { overflow: hidden; background: #020617; border-radius: 12px; }
.video-stage .nx-video-player { display: block; max-height: 68vh; border: 0; border-radius: 0; }
.event-marker-note { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #cbd5e1; background: #0f172a; font-size: 11px; }
.event-marker-note span { width: 10px; height: 10px; background: #f59e0b; border-radius: 50%; }
.video-control-bar { display: flex; align-items: center; gap: 8px; margin: 10px 0 16px; padding: 10px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 10px; }
.video-control-bar button { min-height: 36px; padding: 7px 11px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; font-weight: 800; cursor: pointer; }
.video-control-bar label { display: flex; grid-auto-flow: column; align-items: center; gap: 7px; }
.video-control-bar select { min-height: 36px; width: 76px; }
.video-seek-label { flex: 1; grid-template-columns: 40px 1fr 40px !important; }
.video-seek-label input { width: 100%; }
.video-seek-label span { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; }
.universal-player-heading { align-items: center; }
.universal-incident-summary { margin-top: 0; }
.universal-player-panel { max-width: 1440px; margin-inline: auto; }
.universal-player-config { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.35fr) minmax(150px, .8fr) minmax(420px, 2.2fr); gap: 12px; align-items: end; width: 100%; max-width: 100%; min-width: 0; margin-bottom: 16px; padding: 15px; overflow: hidden; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 12px; }
.universal-player-config label > span { display: flex; align-items: center; gap: 7px; }
.universal-player-form-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 100%; min-width: 0; }
.universal-player-form-actions .button { width: 100%; max-width: 100%; min-width: 0; min-height: 40px; justify-content: center; padding-inline: 11px; white-space: nowrap; }
.universal-video-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.universal-video-meta { display: flex; align-items: center; gap: 28px; padding: 12px 15px; color: #e2e8f0; background: #0f172a; }
.universal-video-meta > div { display: grid; gap: 2px; }
.universal-video-meta span { color: #94a3b8; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.universal-video-meta strong { font-size: 12px; }
.universal-video-meta .live-source-badge { margin-left: auto; padding: 5px 8px; color: #a7f3d0; background: rgba(16,185,129,.14); border: 1px solid rgba(52,211,153,.25); border-radius: 999px; }
.universal-video-shell .video-stage {
  position: relative;
  width: 100%;
  max-width: var(--nx-video-max-width, 120.889vh);
  margin-inline: auto;
  aspect-ratio: var(--nx-video-aspect-ratio, 16 / 9);
  border-radius: 0;
}
.universal-video-shell .nx-video-player {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: contain;
}
.universal-absolute-time { position: absolute; right: 12px; bottom: 12px; display: grid; justify-items: end; gap: 1px; padding: 6px 9px; color: #f8fafc; background: rgba(2,6,23,.78); border: 1px solid rgba(255,255,255,.15); border-radius: 7px; pointer-events: none; }
.universal-absolute-time span:first-child { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 800; }
.universal-absolute-time span:last-child { color: #cbd5e1; font-size: 9px; text-transform: uppercase; }
.universal-video-controls { margin: 0; border-width: 1px 0 0; border-radius: 0; }
.universal-video-controls .transport-play { color: #fff; background: #16a34a; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16), 0 5px 14px rgba(22,163,74,.24); }
.universal-video-controls .transport-stop { color: #fff; background: #dc2626; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.14), 0 5px 14px rgba(220,38,38,.22); }
.universal-video-controls .transport-play:hover:not(:disabled) { background: #15803d; }
.universal-video-controls .transport-stop:hover:not(:disabled) { background: #b91c1c; }
.universal-timeline { display: grid; gap: 7px; padding: 12px 15px 15px; background: var(--panel-soft); border-top: 1px solid var(--line); }
.universal-timeline-labels { display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px; align-items: center; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.universal-timeline-labels strong:last-child { text-align: right; }
.universal-timeline-labels span { padding: 2px 6px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
.universal-timeline-track { position: relative; height: 24px; display: flex; align-items: center; }
.universal-timeline-track input { position: relative; z-index: 2; width: 100%; min-height: 24px; padding: 0; accent-color: var(--green); background: transparent; cursor: ew-resize; }
.nx-availability-layer { position: absolute; z-index: 1; inset: 5px 0; overflow: hidden; background: color-mix(in srgb, var(--line) 55%, transparent); border-radius: 999px; pointer-events: none; }
.nx-availability-layer span { position: absolute; display: block; min-width: 2px; border-radius: 999px; }
.nx-availability-layer .recording { inset-block: 0; background: #10b981; }
.nx-availability-layer .motion { bottom: 0; height: 45%; background: #f59e0b; }
.nx-availability-layer .analytics { top: 0; height: 45%; background: #8b5cf6; }
.nx-availability-key { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 10px; font-weight: 750; }
.nx-availability-key span { width: 18px; height: 5px; margin-left: 8px; border-radius: 999px; }
.nx-availability-key span:first-child { margin-left: 0; }
.nx-availability-key .recording { background: #10b981; }
.nx-availability-key .motion { background: #f59e0b; }
.nx-availability-key .analytics { background: #8b5cf6; }
.universal-event-marker { position: absolute; z-index: 3; top: 1px; width: 3px; height: 22px; background: #f59e0b; border-radius: 3px; transform: translateX(-50%); box-shadow: 0 0 0 3px rgba(245,158,11,.18); pointer-events: none; }
.universal-event-key { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.universal-event-key span { width: 9px; height: 9px; background: #f59e0b; border-radius: 50%; }
.universal-player-empty { display: flex; min-height: 320px; align-items: center; justify-content: center; gap: 14px; color: var(--muted); background: var(--panel-soft); border: 1px dashed var(--line); border-radius: 12px; }
.universal-player-empty > .action-icon { width: 38px; height: 38px; }
.universal-player-empty strong { color: var(--text); }
.universal-player-empty p { margin: 4px 0 0; }
.player-error-message { margin: 0; padding: 10px 15px; color: #991b1b; background: #fee2e2; border-top: 1px solid #fecaca; }
@media (max-width: 720px) {
}
.manual-vms-mark-panel { margin: 0 0 16px; padding: 15px; background: color-mix(in srgb, var(--blue-soft) 48%, var(--panel)); border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line)); border-radius: 12px; scroll-margin-top: 16px; }
.manual-vms-mark-panel[hidden] { display: none; }
.manual-vms-mark-panel .panel-head { margin-bottom: 12px; }
.manual-vms-mark-panel h3 { margin: 0; }
.manual-vms-mark-form { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(250px, 1fr) minmax(330px, 1.15fr) minmax(300px, 1.55fr); gap: 14px; align-items: end; }
.manual-vms-mark-form > label { min-width: 0; }
.manual-vms-mark-form label > span { display: flex; align-items: center; gap: 7px; }
.manual-mark-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; }
.manual-mark-result { margin: 0 0 12px; }

/* Guided AI investigation and VMS review */
.investigation-journey { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.investigation-journey span { display: inline-flex; align-items: center; gap: 7px; color: #e2e8f0; font-size: 11px; font-weight: 800; white-space: nowrap; }
.investigation-journey b { display: grid; width: 23px; height: 23px; place-items: center; color: #0f3d39; background: #99f6e4; border-radius: 50%; font-size: 10px; }
.investigation-journey i { width: 30px; height: 1px; background: rgba(153,246,228,.35); }
.incident-table tbody tr[data-row-href] { cursor: pointer; }
.incident-table tbody tr[data-row-href]:hover td { background: color-mix(in srgb, var(--blue-soft) 45%, var(--panel)); }
.investigation-row-actions { align-items: center; flex-wrap: nowrap; }
.row-inspect-action { min-height: 34px; padding-inline: 11px; }
.incident-table th:nth-child(7) { width: 160px; }
.investigation-workbench { padding: 0; overflow: hidden; border-color: color-mix(in srgb, var(--green) 20%, var(--line)); box-shadow: 0 18px 50px rgba(15,23,42,.09); }
.workbench-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--panel-soft) 72%, #ecfeff), var(--panel)); border-bottom: 1px solid var(--line); }
.workbench-header h2 { margin: 4px 0 5px; font-size: 24px; }
.workbench-header p { margin: 0; color: var(--muted); }
.workbench-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.workbench-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.investigation-workbench > .incident-summary-strip,
.investigation-workbench > .evidence-progress,
.investigation-workbench > .gateway-event-details,
.investigation-workbench > .evidence-workspace,
.investigation-workbench > .technical-details { margin-left: 24px; margin-right: 24px; }
.evidence-progress { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 12px; margin-top: 20px; margin-bottom: 18px; }
.evidence-progress > span { display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; align-items: center; column-gap: 9px; min-width: 126px; }
.evidence-progress > span b { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; color: #64748b; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 50%; }
.evidence-progress > span small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.evidence-progress > span strong { font-size: 11px; }
.evidence-progress > i { height: 2px; background: var(--line); border-radius: 99px; }
.evidence-progress > span.complete b { color: #fff; background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent); }
.evidence-progress > span.current b { color: #9a5b00; background: #fef3c7; border-color: #fcd34d; }
.evidence-progress > span.attention b { color: #9f1239; background: #ffe4e6; border-color: #fecdd3; }
.gateway-event-details { overflow: hidden; margin-top: 16px; background: linear-gradient(135deg,color-mix(in srgb,var(--blue-soft) 45%,var(--panel)),var(--panel)); border: 1px solid color-mix(in srgb,var(--blue) 24%,var(--line)); border-radius: 14px; }
.gateway-event-details > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.gateway-event-details h3 { margin: 3px 0 2px; }
.gateway-event-details p { margin: 0; color: var(--muted); font-size: 11px; }
.gateway-head-count { display: grid; min-width: 150px; padding: 10px 14px; text-align: center; color: #064e3b; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 11px; }
.gateway-head-count span { font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.gateway-head-count strong { font-size: 30px; line-height: 1; }
.gateway-head-count small { margin-top: 4px; color: #047857; font-size: 8px; }
.gateway-field-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.gateway-field-grid > div { display: grid; align-content: start; row-gap: 9px; min-height: 88px; padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gateway-field-grid > div:nth-child(4n) { border-right: 0; }
.gateway-field-grid span { color: var(--muted); font-size: 9px; font-weight: 900; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; }
.gateway-field-grid strong { overflow-wrap: anywhere; font-size: 12px; line-height: 1.45; }
.gateway-field-grid small { margin-top: -3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.evidence-workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr); gap: 18px; margin-top: 18px; margin-bottom: 22px; }
.evidence-viewer-card { overflow: hidden; background: #07111f; border: 1px solid #1e293b; border-radius: 16px; box-shadow: 0 14px 32px rgba(2,6,23,.16); }
.evidence-viewer-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; color: #f8fafc; background: #0f172a; border-bottom: 1px solid #243247; }
.evidence-viewer-card > header > div { display: flex; align-items: center; gap: 11px; }
.evidence-viewer-card h3 { margin: 0 0 2px; font-size: 14px; }
.evidence-viewer-card p { margin: 0; color: #94a3b8; font-size: 11px; }
.evidence-step-number { color: #5eead4; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 900; }
.evidence-source-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; color: #a7f3d0; background: rgba(16,185,129,.1); border: 1px solid rgba(52,211,153,.2); border-radius: 999px; font-size: 9px; font-weight: 850; white-space: nowrap; }
.evidence-source-pill .action-icon { width: 13px; height: 13px; }
.evidence-canvas { position: relative; display: grid; width: 100%; min-height: 390px; padding: 0; place-items: center; overflow: hidden; background: radial-gradient(circle at center, #162338 0%, #030712 72%); border: 0; cursor: zoom-in; }
.evidence-canvas .notification-evidence-image { width: 100%; max-height: 580px; border: 0; border-radius: 0; transition: transform .25s ease, filter .25s ease; }
.evidence-canvas:hover .notification-evidence-image { transform: scale(1.012); filter: brightness(.82); }
.evidence-canvas > span { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; color: #fff; background: rgba(2,6,23,.78); border: 1px solid rgba(255,255,255,.2); border-radius: 9px; opacity: 0; transform: translateY(6px); transition: .2s ease; }
.evidence-canvas:hover > span, .evidence-canvas:focus-visible > span { opacity: 1; transform: none; }
.evidence-viewer-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: #e2e8f0; background: #0f172a; border-top: 1px solid #243247; }
.evidence-viewer-card > footer > div { display: grid; }
.evidence-viewer-card > footer strong { font-size: 11px; }
.evidence-viewer-card > footer small { margin-top: 2px; color: #94a3b8; }
.evidence-unavailable { display: flex; min-height: 390px; align-items: center; justify-content: center; gap: 12px; color: #94a3b8; }
.evidence-unavailable > .action-icon { width: 38px; height: 38px; }
.evidence-unavailable strong { color: #f8fafc; }
.evidence-unavailable p { margin: 3px 0 0; }
.investigation-action-stack { display: grid; align-content: start; gap: 12px; }
.guided-action-card { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 17px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 7px 20px rgba(15,23,42,.06); }
.guided-action-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; content: ""; background: #64748b; }
.guided-action-card.video-action::before { background: var(--green); }
.guided-action-card.mark-action::before { background: #f59e0b; }
.guided-action-icon { display: grid; width: 42px; height: 42px; place-items: center; color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--panel)); border-radius: 11px; }
.mark-action .guided-action-icon { color: #b86b00; background: #fff7e6; }
.guided-action-card small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.guided-action-card h3 { margin: 3px 0 5px; font-size: 15px; }
.guided-action-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.guided-action-card > .button { grid-column: 1 / -1; margin-top: 3px; }
.incident-context-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 13px; }
.incident-context-card > span { display: grid; width: 38px; height: 38px; place-items: center; color: #4f46e5; background: #eef2ff; border-radius: 50%; }
.incident-context-card > div { display: grid; }
.incident-context-card small { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.incident-context-card p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.investigation-empty-state { display: grid; min-height: 330px; padding: 40px; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.investigation-empty-state > .action-icon { width: 46px; height: 46px; margin-bottom: 10px; color: var(--green); }
.investigation-empty-state h3 { margin: 0; color: var(--text); }
.investigation-empty-state p { max-width: 540px; margin: 7px 0 0; }
.evidence-image-dialog { width: min(94vw, 1500px); max-width: none; height: min(92vh, 980px); padding: 0; overflow: hidden; background: #030712; border: 1px solid #334155; border-radius: 18px; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.evidence-image-dialog::backdrop { background: rgba(2,6,23,.78); backdrop-filter: blur(8px); }
.evidence-dialog-shell { display: grid; grid-template-rows: auto auto 1fr; height: 100%; }
.evidence-dialog-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; color: #f8fafc; background: #0f172a; border-bottom: 1px solid #263449; }
.evidence-dialog-shell h3 { margin: 3px 0; }
.evidence-dialog-shell p { margin: 0; color: #94a3b8; font-size: 11px; }
.dialog-close-button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; color: #e2e8f0; background: #1e293b; border: 1px solid #334155; border-radius: 10px; font-size: 24px; cursor: pointer; }
.evidence-dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 20px; color: #94a3b8; background: #111827; border-bottom: 1px solid #263449; font-size: 11px; }
.evidence-dialog-toolbar > div { display: flex; gap: 6px; }
.evidence-dialog-toolbar button, .evidence-dialog-toolbar a { display: inline-flex; min-width: 34px; min-height: 32px; align-items: center; justify-content: center; gap: 6px; padding: 5px 9px; color: #e2e8f0; background: #1e293b; border: 1px solid #334155; border-radius: 7px; text-decoration: none; cursor: pointer; }
.evidence-dialog-toolbar .action-icon { width: 14px; height: 14px; }
.evidence-dialog-viewport { display: grid; overflow: auto; place-items: center; background-image: linear-gradient(45deg,#0b1220 25%,transparent 25%),linear-gradient(-45deg,#0b1220 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#0b1220 75%),linear-gradient(-45deg,transparent 75%,#0b1220 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; }
.evidence-dialog-viewport img { max-width: 100%; max-height: 100%; transform-origin: center; transition: transform .15s ease; }
.raw-inspector-panel { scroll-margin-top: 14px; }
.raw-inspector-panel > div { margin: 0 !important; padding: 14px; }

.player-command-hero { display: grid; grid-template-columns: 1fr auto; gap: 18px; margin-bottom: 16px; padding: 24px 26px 0; color: #f8fafc; overflow: hidden; background: radial-gradient(circle at 85% -20%, rgba(45,212,191,.28), transparent 34%), linear-gradient(125deg,#0f172a 0%,#123c3a 100%); border: 1px solid rgba(94,234,212,.16); border-radius: 18px; box-shadow: 0 18px 44px rgba(2,6,23,.18); }
.player-command-copy h2 { margin: 4px 0 6px; font-size: clamp(26px,3vw,36px); }
.player-command-copy p { max-width: 750px; margin: 0; color: #cbd5e1; }
.player-command-actions .button { color: #e2e8f0; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.player-workflow { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 14px; margin-top: 8px; padding: 15px 0 17px; border-top: 1px solid rgba(255,255,255,.1); }
.player-workflow > span { display: flex; align-items: center; gap: 9px; color: #94a3b8; }
.player-workflow > span b { display: grid; width: 34px; height: 34px; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.player-workflow > span div { display: grid; }
.player-workflow small { color: #94a3b8; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.player-workflow strong { color: #e2e8f0; font-size: 12px; }
.player-workflow > i { height: 1px; background: rgba(255,255,255,.16); }
.player-workflow > span.complete b { color: #042f2e; background: #5eead4; border-color: #5eead4; }
.player-workflow > span.current b { color: #fbbf24; background: rgba(245,158,11,.13); border-color: rgba(251,191,36,.45); }
.player-section-heading { display: flex; align-items: center; gap: 11px; margin: 2px 0 12px; }
.player-section-heading.compact { margin: 0; }
.player-section-heading .section-number { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line)); border-radius: 10px; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 900; }
.player-section-heading h3 { margin: 0; font-size: 15px; }
.player-section-heading p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.player-ready-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 8px; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; font-size: 10px; font-weight: 850; }
.player-ready-pill.attention { color: #9a3412; background: #fff7ed; border-color: #fdba74; }
.nx-coordination-card { border-color: color-mix(in srgb, #2563eb 25%, var(--line)); }
.nx-coordination-card form { display: flex; grid-column: 1 / -1; justify-content: flex-end; margin-top: 10px; }
.nx-coordination-card form .button { width: auto; min-width: 170px; white-space: nowrap; }
.nx-event-mini-timeline { display: grid; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.nx-event-mini-timeline li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
.nx-event-mini-timeline span { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.nx-event-mini-timeline strong { color: var(--text); font-size: 11px; }
.player-primary-action { box-shadow: 0 7px 16px color-mix(in srgb, var(--green) 22%, transparent); }
.player-mark-action { color: #9a5b00 !important; background: #fffbeb !important; border-color: #fcd34d !important; }
.button.is-loading { opacity: .75; pointer-events: none; }
.video-preparing-overlay { position: absolute; z-index: 4; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; color: #f8fafc; background: rgba(2,6,23,.86); backdrop-filter: blur(4px); }
.video-preparing-overlay[hidden] { display: none; }
.video-preparing-overlay strong { display: block; }
.video-preparing-overlay p { margin: 4px 0 0; color: #94a3b8; font-size: 11px; }
.video-loading-spinner { width: 34px; height: 34px; border: 3px solid rgba(94,234,212,.2); border-top-color: #5eead4; border-radius: 50%; animation: video-spin .8s linear infinite; }
@keyframes video-spin { to { transform: rotate(360deg); } }
.manual-vms-mark-panel { padding: 18px; background: linear-gradient(135deg,color-mix(in srgb,#fffbeb 70%,var(--panel)),var(--panel)); border-color: #fcd34d; box-shadow: 0 10px 28px rgba(146,64,14,.08); }
.manual-mark-success { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; padding: 13px; color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 11px; }
.manual-mark-success > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; color: #fff; background: #10b981; border-radius: 50%; }
.manual-mark-success strong { display: block; }
.manual-mark-success p { margin: 2px 0; }
.manual-mark-success small { color: #047857; }
.manual-duration-control { display: grid !important; grid-template-columns: minmax(72px, 92px) minmax(210px, 1fr); align-items: center; gap: 8px !important; min-height: 0 !important; }
.manual-duration-control input { min-width: 0; }
.duration-presets { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 5px !important; min-height: 0 !important; }
.duration-presets button { min-width: 38px; min-height: 28px; padding: 4px 8px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.duration-presets button:hover { color: var(--green); border-color: var(--green); }
.manual-mark-preview { display: flex; grid-column: 1 / -1; align-items: center; gap: 10px; padding: 10px 12px; color: #f8fafc; background: #17263c; border: 1px solid #f59e0b; border-radius: 10px; box-shadow: inset 4px 0 0 #f59e0b, 0 1px 2px rgba(2, 6, 23, .28); }
.manual-mark-preview > span { display: grid; width: 32px; height: 32px; place-items: center; color: #c2410c; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; }
.manual-mark-preview > div { display: grid; }
.manual-mark-preview small { color: #fbbf24; font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.manual-mark-preview strong { color: #fff; font-size: 11px; font-weight: 800; }

@media (max-width: 1100px) {
  .queue-metrics { grid-template-columns: 1fr 1fr; }
  .ticket-filters, .maintenance-filters { grid-template-columns: 1fr 1fr; }
  .work-queue-table { min-width: 1050px; }
  .universal-player-config { grid-template-columns: 1fr 1fr; }
  .universal-player-form-actions { grid-column: 1 / -1; align-self: end; }
  .manual-vms-mark-form { grid-template-columns: 1fr 1fr; }
  .evidence-workspace { grid-template-columns: 1fr; }
  .investigation-action-stack { grid-template-columns: 1fr 1fr; }
  .incident-context-card { grid-column: 1 / -1; }
  .gateway-field-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gateway-field-grid > div:nth-child(4n) { border-right: 1px solid var(--line); }
  .gateway-field-grid > div:nth-child(2n) { border-right: 0; }
}
@media (max-width: 1260px) {
  .manual-vms-mark-form { grid-template-columns: minmax(230px, .8fr) minmax(280px, 1fr); }
}
@media (max-width: 620px) {
  .queue-metrics, .ticket-filters, .maintenance-filters { grid-template-columns: 1fr; }
  .universal-player-heading { align-items: flex-start; flex-direction: column; }
  .universal-player-config { grid-template-columns: 1fr; }
  .universal-player-form-actions { grid-column: auto; grid-template-columns: 1fr; }
  .universal-video-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
  .universal-video-meta .live-source-badge { margin-left: 0; }
  .universal-video-controls { flex-wrap: wrap; }
  .universal-timeline-labels { grid-template-columns: 1fr auto; }
  .universal-timeline-labels strong:last-child { grid-column: 1 / -1; text-align: left; }
  .manual-vms-mark-form { grid-template-columns: 1fr; }
  .manual-mark-actions { flex-wrap: wrap; }
  .manual-mark-actions .button { flex: 1; }
  .investigation-journey { align-items: flex-start; flex-direction: column; }
  .investigation-journey i { width: 1px; height: 8px; margin-left: 11px; }
  .workbench-header { align-items: flex-start; flex-direction: column; padding: 18px; }
  .workbench-header-actions { width: 100%; }
  .workbench-header-actions .button { flex: 1; }
  .investigation-workbench > .incident-summary-strip,
  .investigation-workbench > .evidence-progress,
  .investigation-workbench > .gateway-event-details,
  .investigation-workbench > .evidence-workspace,
  .investigation-workbench > .technical-details { margin-left: 14px; margin-right: 14px; }
  .gateway-event-details > header { align-items: stretch; flex-direction: column; }
  .gateway-field-grid { grid-template-columns: 1fr; }
  .gateway-field-grid > div { border-right: 0 !important; }
  .evidence-progress { grid-template-columns: 1fr 1fr; }
  .evidence-progress > i { display: none; }
  .evidence-workspace, .investigation-action-stack { grid-template-columns: 1fr; }
  .evidence-canvas { min-height: 270px; }
  .evidence-viewer-card > header, .evidence-viewer-card > footer, .evidence-dialog-toolbar { align-items: flex-start; flex-direction: column; }
  .evidence-source-pill { align-self: flex-start; }
  .evidence-image-dialog { width: 98vw; height: 96vh; border-radius: 12px; }
  .player-command-hero { grid-template-columns: 1fr; padding: 20px 18px 0; }
  .player-command-actions { grid-row: 2; }
  .player-workflow { grid-template-columns: 1fr; }
  .player-workflow > i { display: none; }
  .player-section-heading { align-items: flex-start; }
  .player-ready-pill { display: none; }
}

input,
select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  color: var(--text);
}

input:disabled,
select:disabled {
  background: var(--panel-soft);
  color: var(--muted);
  cursor: default;
}

#customerFormPanel input.customer-primary-field:disabled,
#siteFormPanel input.site-primary-field:disabled {
  font-weight: 800;
}

.prepared-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}

.preview-face {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.rules-table {
  width: 100%;
  min-width: 1725px;
  table-layout: fixed;
}

.rules-table .rule-col-name { width: 245px; }
.rules-table .rule-col-scope { width: 135px; }
.rules-table .rule-col-source { width: 80px; }
.rules-table .rule-col-device { width: 175px; }
.rules-table .rule-col-sensor { width: 150px; }
.rules-table .rule-col-event { width: 110px; }
.rules-table .rule-col-condition { width: 120px; }
.rules-table .rule-col-duration { width: 90px; }
.rules-table .rule-col-assigned { width: 120px; }
.rules-table .rule-col-severity { width: 170px; }
.rules-table .rule-col-mode { width: 110px; }
.rules-table .rule-col-ticket { width: 75px; }
.rules-table .rule-col-channels { width: 120px; }
.rules-table .rule-col-status { width: 100px; }

.rules-table th {
  white-space: nowrap;
}

.rules-table th,
.rules-table td {
  overflow-wrap: normal;
  word-break: normal;
}

.wide-notification-table {
  min-width: 1120px;
  table-layout: auto;
}

.iot-notification-table {
  min-width: 1360px;
}

.wide-notification-table th,
.wide-notification-table td {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  min-width: 96px;
}

.wide-notification-table th {
  white-space: nowrap;
}

th,
td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}

th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 12px;
}

.selectable-row,
.selectable-row td {
  cursor: pointer !important;
}

.selectable-row:hover {
  background: var(--panel-soft);
}

.face-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 12px;
}

.customer-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.customer-thumb.placeholder {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-thumb.large {
  width: 72px;
  height: 72px;
  border-radius: 14px;
}

.customer-picture-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 800;
}

.actions {
  gap: 7px;
}

.actions form {
  margin: 0;
}

.child-cell {
  background: var(--panel-soft);
}

.child-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.nested-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.nested-table th,
.nested-table td {
  font-size: 13px;
  padding: 9px 8px;
}

.tickets-table {
  min-width: 1220px;
  table-layout: fixed;
}

.tickets-table .ticket-col-id { width: 64px; }
.tickets-table .ticket-col-updated { width: 128px; }
.tickets-table .ticket-col-title { width: 360px; }
.tickets-table .ticket-col-device-sensor { width: 230px; }
.tickets-table .ticket-col-severity { width: 116px; }
.tickets-table .ticket-col-status { width: 110px; }
.tickets-table .ticket-col-assigned { width: 180px; }
.tickets-table .ticket-col-events { width: 78px; }
.tickets-table .ticket-col-last-value { width: 100px; }
.tickets-table .ticket-col-actions { width: 260px; }

.tickets-table th,
.tickets-table td {
  vertical-align: middle;
}

.ticket-title-cell {
  min-width: 0;
  font-weight: 800;
  line-height: 1.45;
}

.ticket-severity-cell {
  text-align: left;
}

.ticket-severity {
  min-width: 76px;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0;
}

.ticket-severity.warning {
  background: #fff0d7;
  color: #a65314;
  border: 1px solid rgba(255, 143, 86, 0.42);
}

.ticket-device-sensor {
  word-break: break-word;
}

.events-table {
  min-width: 1080px;
  table-layout: fixed;
}

.events-table .event-col-id { width: 70px; }
.events-table .event-col-created { width: 140px; }
.events-table .event-col-source-sensor-mode { width: 250px; }
.events-table .event-col-device { width: 230px; }
.events-table .event-col-severity { width: 116px; }
.events-table .event-col-status { width: 130px; }
.events-table .event-col-ticket { width: 82px; }
.events-table .event-col-summary { width: 360px; }

.events-table th,
.events-table td {
  vertical-align: middle;
}

.event-detail-panel { scroll-margin-top: 18px; }
.event-detail-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; }
.events-table tr.is-selected td { background: color-mix(in srgb, var(--blue-soft) 58%, var(--panel)); }

.event-device-cell {
  font-weight: 800;
  line-height: 1.45;
}

.event-source-sensor-mode,
.event-device-cell {
  word-break: break-word;
}

.log-table {
  min-width: 980px;
  table-layout: fixed;
}

.raw-log-table {
  min-width: 1120px;
}

.outbound-log-table {
  min-width: 900px;
}

.log-table .log-col-id { width: 72px; }
.log-table .log-col-created { width: 170px; }
.log-table .log-col-source { width: 130px; }
.log-table .log-col-type { width: 160px; }
.log-table .log-col-result { width: 116px; }
.log-table .log-col-saved { width: 90px; }
.log-table .log-col-message { width: 280px; }
.log-table .log-col-action { width: 120px; }
.log-table .log-col-person { width: 120px; }
.log-table .log-col-http { width: 90px; }
.log-table .log-col-error { width: 280px; }

.log-table th,
.log-table td {
  word-break: normal;
  overflow-wrap: break-word;
}

.log-table th,
.log-table td:nth-child(1),
.log-table td:nth-child(2),
.log-table td:nth-child(3),
.log-table td:nth-child(5),
.log-table td:nth-child(6),
.log-table td:last-child {
  white-space: nowrap;
}

.sensor-form {
  margin-top: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.device-meta-grid,
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.device-meta-grid span,
.detail-grid p,
.detail-grid > span {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}

.device-meta-grid strong,
.detail-grid strong {
  color: var(--text);
  font-size: 14px;
}

.detail-grid em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.delivery-log-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.delivery-log-detail-grid h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.badge {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.badge.success,
.notice {
  background: var(--coral-soft);
  color: #b95b32;
}

.badge.failed,
.alert {
  background: #ffe3e3;
  color: #9d2525;
}

.alert,
.notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
}

.camera-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.face-notification-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  align-items: start;
}

.face-notification-grid.camera-count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.face-notification-grid.camera-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.camera-column {
  padding: 18px;
  min-height: 70vh;
}

.notification-list {
  display: grid;
  gap: 12px;
}

.notification-card {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 2px solid transparent;
}

.notification-card.male {
  background: var(--blue-soft);
}

.notification-card.female {
  background: var(--coral-soft);
}

.notification-card.unknown {
  background: var(--panel-soft);
}

.notification-card.fresh {
  animation: blinkBorder 1s ease-in-out 6;
}

.notification-card.blacklist-alert {
  border-color: #ef4444;
  background: #fff1f2;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
  animation: blacklistCardPulse 1.15s ease-in-out infinite;
}

.face-holder {
  width: 124px;
  height: 124px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--blue);
}

.face-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notification-card strong {
  font-size: 17px;
}

.notification-card p {
  margin: 4px 0;
}

.notification-card small,
.empty {
  color: var(--muted);
}

.sensor-grid {
  display: grid;
  gap: 16px;
}

.hierarchy-head span {
  font-weight: 800;
}

.hierarchy-head span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #14b8a6;
  vertical-align: 1px;
}

.monitor-customer,
.monitor-site {
  display: grid;
  gap: 14px;
}

.monitor-customer {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.monitor-customer-head,
.monitor-site-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.monitor-customer-head span,
.monitor-site-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.monitor-customer-head strong {
  display: block;
  color: var(--text);
  font-size: 20px;
}

.monitor-site {
  padding: 14px;
  border-radius: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.monitor-site-head strong {
  display: block;
  color: var(--text);
  font-size: 17px;
}

.code-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--coral-soft);
  color: #b95b32 !important;
  font-weight: 800;
}

.sensor-device {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}

.sensor-device-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.sensor-device-head strong,
.sensor-device-head span {
  display: block;
}

.sensor-device-head span {
  color: var(--muted);
  font-size: 13px;
}

.sensor-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.sensor-card {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}

.sensor-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sensor-chart-link {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--line);
}

.sensor-chart-link:hover {
  background: var(--coral-soft);
  color: #b95b32;
}

.sensor-chart-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sensor-card span,
.sensor-card small,
.sensor-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.sensor-card strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.sensor-card strong small {
  margin-left: 4px;
  font-size: 14px;
}

.sensor-card.warning {
  border-color: rgba(234, 179, 8, 0.55);
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.1) 0, #fff 42%);
  box-shadow: inset 3px 0 0 rgba(234, 179, 8, 0.65);
}

.sensor-card.critical {
  border-color: rgba(239, 68, 68, 0.55);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0, #fff 42%);
  box-shadow: inset 3px 0 0 rgba(239, 68, 68, 0.7);
}

.sensor-card.warning em,
.sensor-card.minor em {
  color: var(--warning);
  font-weight: 800;
}

.sensor-card.critical em,
.sensor-card.major em {
  color: var(--danger);
  font-weight: 800;
}

.sensor-card.minor {
  border-color: rgba(234, 179, 8, 0.6);
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.12) 0, #fff 42%);
  box-shadow: inset 3px 0 0 rgba(234, 179, 8, 0.72);
}

.sensor-card.major {
  border-color: rgba(239, 68, 68, 0.62);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12) 0, #fff 42%);
  box-shadow: inset 3px 0 0 rgba(239, 68, 68, 0.78);
}

.sensor-card.cleared {
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow: inset 3px 0 0 rgba(34, 197, 94, 0.58);
}

.sensor-card.cleared em {
  color: #15803d;
  font-weight: 800;
}

.sensor-inspect-link {
  justify-self: start;
  margin-top: 2px;
}

.iot-camera-mapping-panel {
  grid-column: 1 / -1;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.iot-camera-check-grid,
.iot-inspection-camera-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.iot-camera-check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.iot-camera-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.iot-camera-check span,
.iot-camera-check strong,
.iot-camera-check small {
  display: block;
  min-width: 0;
}

.iot-camera-check small {
  margin-top: 4px;
  color: var(--muted);
}

.iot-inspection-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 24px;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f172a, #164e63);
}

.iot-inspection-hero h2,
.iot-inspection-hero p {
  margin: 5px 0 0;
  color: inherit;
}

.iot-reading-summary {
  display: grid;
  min-width: 245px;
  gap: 4px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  background: rgba(255,255,255,.1);
}

.iot-reading-summary strong {
  font-size: 28px;
}

.iot-reading-summary small,
.iot-reading-summary time {
  font-size: 12px;
}

.iot-reading-summary em {
  font-style: normal;
  font-weight: 800;
}

.iot-inspection-camera {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.iot-camera-preview {
  display: grid;
  min-height: 108px;
  place-items: center;
  color: #bae6fd;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .18em;
  border-radius: 10px;
  background: linear-gradient(145deg, #0f172a, #164e63);
}

.iot-inspection-camera h3,
.iot-inspection-camera p {
  margin: 0;
}

.iot-inspection-camera p {
  margin-top: 4px;
  color: var(--muted);
}

.iot-camera-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 720px) {
  .iot-inspection-hero {
    align-items: stretch;
    flex-direction: column;
  }
  .iot-reading-summary {
    min-width: 0;
  }
}

.ai-monitor-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 20px;
  padding: 24px;
  border: 1px solid rgba(197, 210, 218, .82);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(18, 61, 94, .9)),
    url("/static/banner-header.png");
  background-size: cover;
  background-position: center;
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.ai-monitor-hero h2 {
  max-width: 720px;
  margin: 0 0 10px;
  color: #fff;
  font-size: 28px;
}

.ai-monitor-hero p {
  max-width: 760px;
  margin: 0;
  color: #dbeafe;
}

.ai-monitor-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ai-monitor-stats span,
.ai-monitor-card,
.ai-node-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.ai-monitor-stats span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ai-monitor-stats strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.ai-monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.ai-monitor-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-left: 4px solid #14b8a6;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

.ai-monitor-card.warning {
  border-left-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, .08), #fff 34%);
}

.ai-monitor-card.critical {
  border-left-color: #ef4444;
  background: linear-gradient(90deg, rgba(239, 68, 68, .08), #fff 34%);
}

.ai-monitor-card-head,
.ai-monitor-footer,
.ai-node-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ai-monitor-card-head {
  align-items: flex-start;
}

.ai-monitor-card-head span,
.ai-monitor-card small,
.ai-monitor-footer,
.ai-node-card span,
.ai-node-card small {
  color: var(--muted);
  font-size: 12px;
}

.ai-monitor-card-head strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 17px;
}

.ai-monitor-card-head em,
.ai-node-card em {
  align-self: flex-start;
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.ai-monitor-card.critical .ai-monitor-card-head em {
  background: #fff1f2;
  color: #be123c;
}

.ai-monitor-card.warning .ai-monitor-card-head em {
  background: #fff7ed;
  color: #b45309;
}

.ai-monitor-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ai-monitor-meta span {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
}

.ai-monitor-meta strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.ai-monitor-card p {
  margin: 0;
  color: #334155;
  font-size: 13px;
}

.monitor-investigation {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.monitor-evidence img {
  width: 112px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

.notification-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.notification-timeline-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 8px;
  font-size: 0.78rem;
}

.monitor-timeline {
  margin-top: 10px;
  font-size: 0.78rem;
}

.monitor-timeline > div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
}

.analytics-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid rgba(197, 210, 218, .82);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, .95), rgba(40, 82, 102, .9)),
    url("/static/zoo-command-backdrop.png");
  background-size: cover;
  background-position: center;
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.analytics-hero h2 {
  max-width: 720px;
  margin: 0 0 10px;
  color: #fff;
  font-size: 28px;
}

.analytics-hero p {
  max-width: 760px;
  margin: 0;
  color: #e0f2fe;
}

.analytics-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.analytics-stats span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.analytics-stats strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.analytics-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.analytics-import-panel {
  margin-bottom: 18px;
}

.analytics-import-form {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.analytics-import-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.analytics-import-form input,
.analytics-import-form select {
  width: 100%;
}

.vehicle-estimate-summary {
  margin: 0 0 14px;
}

.analytics-method-note {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #bfd7f7;
  border-radius: 12px;
  background: #f2f7ff;
  color: #294766;
}

.analytics-method-note strong {
  color: #123b67;
}

html[data-theme="dark"] .analytics-method-note {
  border-color: #31577c;
  background: #172a3d;
  color: #c5d9ee;
}

html[data-theme="dark"] .analytics-method-note strong {
  color: #ffffff;
}

.analytics-processor-chip {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.analytics-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.analytics-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid #14b8a6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

.analytics-card.setup {
  border-left-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, .08), #fff 34%);
}

.analytics-card.warning {
  border-left-color: #ef4444;
  background: linear-gradient(90deg, rgba(239, 68, 68, .08), #fff 34%);
}

.analytics-card.disabled {
  border-left-color: #94a3b8;
  opacity: .78;
}

.analytics-card-head,
.analytics-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.analytics-card-head {
  align-items: flex-start;
}

.analytics-card-head span,
.analytics-card small,
.analytics-card-foot {
  color: var(--muted);
  font-size: 12px;
}

.analytics-card-head strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 17px;
}

.analytics-status-link {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.analytics-status-link:hover {
  filter: brightness(.96);
}

.analytics-card.warning .analytics-status-link {
  background: #fff1f2;
  color: #be123c;
}

.analytics-card.setup .analytics-status-link {
  background: #fff7ed;
  color: #b45309;
}

.analytics-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.analytics-card-metrics span {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
}

.analytics-card-metrics strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.analytics-output-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analytics-output-list span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.analytics-output-list.compact span {
  background: #eef2f7;
  color: #475569;
}

.analytics-source-note {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(78, 125, 150, .18);
  border-radius: 8px;
  background: rgba(78, 125, 150, .07);
}

.analytics-source-note strong {
  color: var(--text);
  font-size: 12px;
}

.analytics-source-note span {
  color: var(--muted);
  font-size: 12px;
}

.analytics-source-note.card-note {
  padding: 8px;
}

.analytics-card p {
  margin: 0;
  color: #334155;
  font-size: 13px;
}

.analytics-settings-form {
  display: grid;
  gap: 12px;
}

.analytics-settings-row {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.analytics-settings-row.processor-row {
  border-left: 4px solid var(--blue);
}

.analytics-settings-copy {
  display: grid;
  align-content: start;
  gap: 10px;
}

.analytics-settings-copy span,
.analytics-settings-copy p {
  color: var(--muted);
  font-size: 13px;
}

.analytics-settings-copy p {
  margin: 0;
}

.toggle-line {
  display: flex;
  gap: 10px;
  align-items: center;
}

.toggle-line input {
  width: 18px;
  height: 18px;
}

.analytics-settings-controls {
  display: grid;
  gap: 10px;
}

.analytics-settings-controls select[multiple] {
  min-height: 136px;
}

.analytics-threshold-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.alias-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-subhead {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.settings-subhead strong {
  color: var(--text);
}

.settings-subhead span {
  color: var(--muted);
  font-size: 12px;
}

.vision-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.vision-result-grid article {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.vision-result-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.vision-result-grid strong {
  color: var(--text);
  font-size: 22px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.vision-result-file {
  grid-column: span 2;
}

.vision-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.vision-image-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.vision-image-grid figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.vision-image-grid img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #0f172a;
}

.vision-image-grid figcaption {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ai-monitor-footer {
  align-items: center;
  flex-wrap: wrap;
  font-weight: 800;
}

.ai-node-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}

.ai-node-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px 12px;
  min-height: 0;
  padding: 16px;
}

.ai-node-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-node-card > small,
.ai-node-card > a {
  grid-column: 1 / -1;
}

.ai-node-card > small {
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
}

.ai-node-card > a {
  justify-self: start;
  white-space: nowrap;
}

.ai-node-card strong,
.ai-node-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-node-card.warning {
  border-color: #fed7aa;
}

.ai-node-card.offline {
  border-color: #fecdd3;
}

.ai-algorithm-map {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.ai-algorithm-map span,
.ai-algorithm-map small,
.alias-config-grid small {
  color: var(--muted);
  font-size: 11px;
}

.ai-algorithm-map strong {
  color: var(--text);
  font-size: 12px;
}

.alias-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.alias-config-grid .full {
  grid-column: 1 / -1;
}

.alias-config-grid label {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.alias-config-grid label span {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--text);
  font-family: inherit;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 56px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  color: #07122c;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

[data-theme="dark"] {
  --bg: #07111f;
  --panel: #101b2d;
  --panel-soft: #142238;
  --line: #26364d;
  --line-strong: #344762;
  --text: #e5edf7;
  --muted: #9fb0c4;
  --muted-2: #718299;
  --blue: #67b7dc;
  --blue-soft: #132c44;
  --coral-soft: #3a2319;
  --shadow: 0 18px 45px rgba(0, 0, 0, .28);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, .24);
}

[data-theme="dark"] body {
  background: linear-gradient(180deg, rgba(18, 61, 94, .34) 0, rgba(7, 17, 31, 0) 280px), var(--bg);
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .panel,
[data-theme="dark"] .stat,
[data-theme="dark"] .camera-column,
[data-theme="dark"] .monitor-customer,
[data-theme="dark"] .sensor-device,
[data-theme="dark"] .sensor-card,
[data-theme="dark"] .ai-monitor-card,
[data-theme="dark"] .ai-node-card,
[data-theme="dark"] .ai-monitor-stats span,
[data-theme="dark"] .image-modal-content {
  background: var(--panel);
  border-color: var(--line);
}

[data-theme="dark"] .monitor-site,
[data-theme="dark"] .device-meta-grid span,
[data-theme="dark"] .detail-grid p,
[data-theme="dark"] .detail-grid > span,
[data-theme="dark"] .ai-algorithm-map,
[data-theme="dark"] .alias-config-grid label,
[data-theme="dark"] .type-pill,
[data-theme="dark"] .source-card,
[data-theme="dark"] .clock-wrap,
[data-theme="dark"] .user-wrap,
[data-theme="dark"] .status-wrap,
[data-theme="dark"] .theme-toggle {
  background: var(--panel-soft);
  border-color: var(--line);
  color: var(--text);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .button.light {
  background: #0b1525;
  border-color: var(--line);
  color: var(--text);
}

[data-theme="dark"] th {
  background: #0d192b;
  color: var(--muted);
}

[data-theme="dark"] td,
[data-theme="dark"] h2,
[data-theme="dark"] .sensor-card strong,
[data-theme="dark"] .device-meta-grid strong,
[data-theme="dark"] .detail-grid strong,
[data-theme="dark"] .ai-monitor-card-head strong,
[data-theme="dark"] .ai-monitor-meta strong,
[data-theme="dark"] .ai-algorithm-map strong,
[data-theme="dark"] .alias-config-grid label span,
[data-theme="dark"] .ai-monitor-stats strong {
  color: var(--text);
}

[data-theme="dark"] tbody tr:hover {
  background: #142238;
}

[data-theme="dark"] .ai-monitor-card p {
  color: #c8d6e6;
}

[data-theme="dark"] .ai-monitor-card.warning,
[data-theme="dark"] .sensor-card.warning {
  background: linear-gradient(90deg, rgba(245, 158, 11, .16), var(--panel) 42%);
}

[data-theme="dark"] .ai-monitor-card.critical,
[data-theme="dark"] .sensor-card.critical {
  background: linear-gradient(90deg, rgba(239, 68, 68, .16), var(--panel) 42%);
}

.chart-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.chart-shell {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.chart-shell canvas {
  display: block;
  width: 100%;
  height: auto;
}

#chartEmptyState {
  display: none;
  margin: 0;
  padding: 24px;
  text-align: center;
}

@keyframes blinkBorder {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: var(--accent);
    box-shadow: 0 0 0 5px rgba(255, 132, 75, .16);
  }
}

/* Client-aware three-system camera mapping */
.camera-map-hero {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 28px 30px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, .2);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 10%, rgba(45, 212, 191, .24), transparent 28%),
    radial-gradient(circle at 18% 120%, rgba(59, 130, 246, .42), transparent 42%),
    linear-gradient(135deg, #07162d, #102d4d);
  box-shadow: 0 20px 48px rgba(7, 18, 44, .2);
}

.camera-map-hero::after {
  content: "";
  position: absolute;
  right: -48px;
  top: -78px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(94, 234, 212, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(94, 234, 212, .025), 0 0 0 68px rgba(94, 234, 212, .018);
}

.camera-map-hero > div {
  position: relative;
  z-index: 1;
}

.camera-map-hero h2 {
  margin: 5px 0 8px;
  font-size: 34px;
  letter-spacing: -.025em;
}

.camera-map-hero p {
  max-width: 760px;
  margin: 0;
  color: #b7cce0;
}

.camera-map-hero .eyebrow {
  color: #5eead4;
}

.camera-map-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.camera-map-hero-actions .button.light {
  border-color: rgba(255,255,255,.18);
  color: #fff;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

.camera-map-hero-actions svg,
.camera-tenant-lock svg,
.camera-map-summary svg,
.camera-map-connection svg,
.camera-map-columns svg,
.camera-map-system-card svg,
.camera-map-state svg,
.camera-map-empty > svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.camera-map-scope-panel {
  border-radius: 15px;
}

.camera-tenant-lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(57,115,214,.2);
  border-radius: 999px;
  color: #3973d6;
  background: rgba(57,115,214,.08);
  font-size: 11px;
  font-weight: 900;
}

.camera-map-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 16px;
}

.camera-map-summary article {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 9px 24px rgba(15,23,42,.06);
}

.camera-map-summary-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
}

.camera-map-summary-icon.ai { color: #6d55d9; background: rgba(109,85,217,.1); }
.camera-map-summary-icon.app { color: #3973d6; background: rgba(57,115,214,.1); }
.camera-map-summary-icon.nx { color: #079c85; background: rgba(7,156,133,.1); }

.camera-map-summary article > div {
  display: grid;
  min-width: 0;
}

.camera-map-summary small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.camera-map-summary strong {
  font-size: 25px;
  line-height: 1.05;
}

.camera-map-summary article > div > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-map-connection {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid;
  border-radius: 13px;
}

.camera-map-connection > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.camera-map-connection.success {
  border-color: rgba(34,185,137,.25);
  background: rgba(34,185,137,.075);
}

.camera-map-connection.success > span {
  color: #16835f;
  background: rgba(34,185,137,.13);
}

.camera-map-connection.failed {
  border-color: rgba(239,71,111,.24);
  background: rgba(239,71,111,.065);
}

.camera-map-connection.failed > span {
  color: #d23e5d;
  background: rgba(239,71,111,.12);
}

.camera-map-connection strong {
  display: block;
  margin-bottom: 2px;
}

.camera-map-connection p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.camera-map-workspace {
  display: grid;
  gap: 13px;
}

.camera-map-columns,
.camera-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.camera-map-columns {
  padding: 0 16px 6px;
}

.camera-map-columns > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.camera-map-columns p {
  display: grid;
  margin: 0;
}

.camera-map-columns small {
  color: var(--muted);
  font-size: 9px;
}

.system-mark {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
}

.system-mark.ai { color: #6d55d9; background: rgba(109,85,217,.1); }
.system-mark.app { color: #3973d6; background: rgba(57,115,214,.1); }
.system-mark.nx { color: #079c85; background: rgba(7,156,133,.1); }

.mapping-arrow {
  color: #8ca0b8;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
}

.camera-map-row {
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid #f2a93b;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 11px 28px rgba(15,23,42,.06);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.camera-map-row.complete {
  border-left-color: #22b989;
}

.camera-map-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15,23,42,.1);
}

.camera-map-system-card {
  align-self: stretch;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.camera-map-system-card.ai { box-shadow: inset 0 3px 0 rgba(109,85,217,.55); }
.camera-map-system-card.app { box-shadow: inset 0 3px 0 rgba(57,115,214,.55); }
.camera-map-system-card.nx { box-shadow: inset 0 3px 0 rgba(7,156,133,.55); }

.camera-map-system-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.camera-map-system-card select {
  width: 100%;
  min-width: 0;
  font-size: 11px;
  text-transform: none;
}

.camera-map-app-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}

.camera-map-app-title > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  color: #3973d6;
  background: rgba(57,115,214,.1);
}

.camera-map-app-title > div {
  display: grid;
  min-width: 0;
}

.camera-map-app-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-map-app-title small {
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 9px;
}

.camera-map-meta {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.camera-map-meta > span {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr);
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
}

.camera-map-meta strong {
  overflow: hidden;
  color: var(--text);
  font-family: ui-monospace, monospace;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-map-meta .online-text {
  color: #16835f;
}

.camera-map-row footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 3px 0;
  border-top: 1px solid var(--line);
}

.camera-map-row footer > div {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.camera-map-row footer > small {
  color: var(--muted);
  font-size: 9px;
}

.camera-map-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.camera-map-state svg {
  width: 14px;
  height: 14px;
}

.camera-map-state.complete {
  color: #16835f;
  background: rgba(34,185,137,.1);
}

.camera-map-state.incomplete {
  color: #b8751e;
  background: rgba(242,169,59,.12);
}

.danger-text {
  color: #c83c54 !important;
}

.camera-map-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 46px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  color: var(--muted);
  background: var(--panel);
  text-align: center;
}

.camera-map-empty.standalone {
  margin-top: 16px;
}

.camera-map-empty > svg {
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  color: #3973d6;
}

.camera-map-empty h3,
.camera-map-empty p {
  margin: 0;
}

.camera-map-empty h3 {
  color: var(--text);
}

.camera-map-empty p {
  max-width: 620px;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .camera-map-hero {
    align-items: start;
    flex-direction: column;
  }

  .camera-map-columns {
    display: none;
  }

  .camera-map-row {
    grid-template-columns: 1fr;
  }

  .camera-map-row > .mapping-arrow {
    transform: rotate(90deg);
  }

  .camera-map-row footer {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  .camera-map-summary {
    grid-template-columns: 1fr;
  }

  .camera-map-connection {
    grid-template-columns: 42px 1fr;
  }

  .camera-map-connection > a {
    grid-column: 1 / -1;
  }

  .camera-map-row footer,
  .camera-map-row footer > div {
    align-items: stretch;
    flex-direction: column;
  }

  .camera-map-row footer > div {
    width: 100%;
    margin-left: 0;
  }
}

@keyframes blacklistCardPulse {
  0%, 100% {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .16), 0 8px 24px rgba(239, 68, 68, .1);
  }
  50% {
    border-color: #991b1b;
    box-shadow: 0 0 0 8px rgba(239, 68, 68, .28), 0 12px 30px rgba(239, 68, 68, .18);
  }
}

.help-list {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.help-list p {
  margin: 0;
}

.push-endpoint-code {
  display: block;
  padding: 14px;
  overflow-wrap: anywhere;
  color: var(--text);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.copy-field {
  display: flex;
  gap: .65rem;
  align-items: center;
}

.copy-field input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.kpi-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.kpi-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.kpi-summary-card {
  --kpi-accent: #3b82f6;
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  min-height: 126px;
  padding: 19px 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--kpi-accent) 28%, var(--line));
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 95%, var(--kpi-accent)), var(--panel));
  box-shadow: 0 10px 26px rgba(15, 23, 42, .09);
}

.kpi-summary-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: var(--kpi-accent);
}

.kpi-summary-card::after {
  position: absolute;
  top: -46px;
  right: -38px;
  width: 112px;
  height: 112px;
  content: "";
  border-radius: 50%;
  background: color-mix(in srgb, var(--kpi-accent) 8%, transparent);
  pointer-events: none;
}

.kpi-summary-card.tone-success { --kpi-accent: #10b981; }
.kpi-summary-card.tone-warning { --kpi-accent: #f59e0b; }
.kpi-summary-card.tone-danger { --kpi-accent: #f43f5e; }
.kpi-summary-card.tone-critical { --kpi-accent: #dc2626; }

.kpi-summary-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 14px;
  color: var(--kpi-accent);
  background: color-mix(in srgb, var(--kpi-accent) 13%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kpi-accent) 22%, transparent);
}

.kpi-summary-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kpi-summary-copy {
  display: grid;
  min-width: 0;
}

.kpi-summary-copy > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.kpi-summary-copy > strong {
  margin-top: 5px;
  color: var(--text);
  font-size: clamp(30px, 2.4vw, 40px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
}

.kpi-summary-copy > small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.home-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-home .kpi-card {
  --visual-accent: #2563eb;
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, #dbeafe), var(--panel));
  box-shadow: 0 10px 26px rgba(15, 23, 42, .09);
}

.page-home .kpi-card.red { --visual-accent: #ef4444; }
.page-home .kpi-card.purple { --visual-accent: #8b5cf6; }
.page-home .kpi-card.green { --visual-accent: #16a34a; }
.page-home .kpi-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: var(--visual-accent);
}

.home-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, .8fr);
  gap: 16px;
  align-items: start;
}

.home-critical-events,
.home-action-center {
  min-width: 0;
}

.home-action-center {
  display: grid;
  gap: 10px;
}

.home-action-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.home-action-item:hover {
  border-color: color-mix(in srgb, #2563eb 45%, var(--line));
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}

.home-action-item.attention {
  border-color: color-mix(in srgb, #ef4444 36%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--panel) 92%, #fee2e2), var(--panel));
}

.home-action-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #2563eb;
  background: color-mix(in srgb, #2563eb 12%, var(--panel));
}

.home-action-item.attention .home-action-icon {
  color: #dc2626;
  background: color-mix(in srgb, #ef4444 13%, var(--panel));
}

.home-action-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.home-action-item div {
  display: grid;
  min-width: 0;
}

.home-action-item strong {
  font-size: 12px;
}

.home-action-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.home-action-item b {
  display: grid;
  min-width: 30px;
  height: 30px;
  padding-inline: 7px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #64748b;
  font-size: 12px;
}

.home-action-item.attention b {
  background: #dc2626;
}

.home-action-item i {
  color: #2563eb;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.dashboard-analysis-heading {
  align-items: center;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, #2563eb 22%, var(--line));
  border-radius: 16px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--panel) 94%, #dbeafe), color-mix(in srgb, var(--panel) 96%, #ccfbf1));
  box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

.dashboard-analysis-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-source-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1350px) {
  .home-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-source-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .home-command-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-source-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .home-kpis,
  .dashboard-source-kpis {
    grid-template-columns: 1fr;
  }

  .dashboard-analysis-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 1050px) {
  .kpi-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .kpi-summary-grid {
    grid-template-columns: 1fr;
  }
}

.report-chart {
  display: grid;
  gap: .65rem;
  padding: .75rem 0;
}

.report-bar-row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) 1fr 48px;
  gap: .75rem;
  align-items: center;
}

.report-bar-row > div {
  height: 12px;
  background: rgba(125, 160, 198, .18);
  border-radius: 999px;
  overflow: hidden;
}

.report-bar-row i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #2d7ff9, #32c6b0);
}

.incident-report-hero {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid #29435f;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #10243e, #173b63);
  box-shadow: 0 14px 32px rgba(8, 25, 46, .18);
}

.incident-report-identity {
  display: flex;
  min-width: 0;
  gap: 16px;
  align-items: center;
}

.incident-report-identity > img,
.incident-report-identity > span {
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  place-items: center;
  object-fit: contain;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  color: #173b63;
  background: #fff;
  font-size: 20px;
  font-weight: 900;
}

.incident-report-identity h2,
.incident-report-identity p {
  margin: 0;
}

.incident-report-identity h2 {
  margin-top: 3px;
  font-size: 28px;
}

.incident-report-identity p {
  margin-top: 7px;
  color: #d9e6f3;
  font-size: 13px;
}

.incident-report-hero .eyebrow {
  color: #8fc2ff;
}

.incident-report-hero-actions {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
}

.incident-report-hero-actions > strong {
  font-size: 28px;
}

.incident-report-hero-actions > span {
  margin-bottom: 10px;
  color: #c8d8e8;
  font-size: 12px;
}

.incident-report-filters {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.incident-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.incident-report-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 8px 22px rgba(23, 59, 99, .08);
}

.incident-report-image {
  position: relative;
  display: grid;
  min-height: 210px;
  overflow: hidden;
  place-items: center;
  color: var(--muted);
  background: #0d1b2e;
}

.incident-report-image > img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.incident-report-image > span {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: #aebbd0;
}

.incident-report-image > span .action-icon {
  width: 34px;
  height: 34px;
}

.incident-report-image > b {
  position: absolute;
  top: 12px;
  right: 12px;
}

.incident-report-card-body {
  padding: 16px;
}

.incident-report-card-body header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.incident-report-card-body h3 {
  margin: 4px 0 0;
  font-size: 16px;
}

.incident-report-card-body header small,
.incident-report-card-body header > span {
  color: var(--muted);
  font-size: 10px;
}

.incident-report-card-body header > span {
  max-width: 42%;
  text-align: right;
}

.incident-report-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 16px 0;
}

.incident-report-card dl > div {
  min-width: 0;
}

.incident-report-card dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.incident-report-card dd {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-report-card footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.incident-report-empty {
  grid-column: 1 / -1;
  padding: 48px;
  color: var(--muted);
  text-align: center;
}

.incident-report-empty .action-icon {
  width: 38px;
  height: 38px;
}

@media (max-width: 1180px) {
  .incident-report-filters { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .incident-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .incident-report-hero { align-items: stretch; flex-direction: column; }
  .incident-report-hero-actions { justify-items: start; }
  .incident-report-filters,
  .incident-report-grid { grid-template-columns: 1fr; }
}

.severity-help-accordion {
  padding: 0;
  overflow: hidden;
}

.severity-help-accordion > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.severity-help-accordion > summary::-webkit-details-marker {
  display: none;
}

.severity-help-accordion > summary h2 {
  margin: 0 0 4px;
}

.severity-help-accordion > summary span:not(.severity-accordion-toggle) {
  color: var(--muted);
}

.severity-help-accordion > summary:hover {
  background: var(--panel-soft);
}

.severity-accordion-toggle {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}

.severity-help-accordion[open] > summary {
  border-bottom: 1px solid var(--line);
}

.severity-help-accordion[open] .severity-accordion-toggle {
  transform: rotate(225deg) translate(-2px, -2px);
}

.severity-accordion-content {
  padding: 18px 24px 22px;
}

.table-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.add-face-start {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 18px;
  background: var(--panel-soft);
  border: 1px dashed #b8cad5;
  border-radius: 14px;
}

.file-picker {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.is-hidden {
  display: none !important;
}

.upload-box.is-submitting {
  opacity: .72;
  pointer-events: none;
}

.raw-inspector-panel {
  scroll-margin-top: 20px;
}

.raw-json {
  min-height: 180px;
  max-height: 520px;
  overflow: auto;
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--text);
  color: var(--blue-soft);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.landing-body {
  min-height: 100vh;
  background: var(--bg);
  overflow: hidden;
}

.landing-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(28px, 7vw, 88px);
  background-image: url("/static/front-desk-background.jpg");
  background-size: cover;
  background-position: center;
}

.landing-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(248, 251, 252, .97) 0%, rgba(227, 235, 241, .84) 34%, rgba(78, 125, 150, .36) 64%, rgba(25, 28, 50, .14) 100%);
}

.landing-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  color: var(--text);
}

.public-brand,
.auth-brand {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.public-brand {
  width: min(440px, 86vw);
  margin-bottom: 26px;
}

.public-brand img,
.auth-brand img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.public-brand span,
.auth-brand span {
  color: var(--text);
  font-weight: 800;
  letter-spacing: .08em;
}

.public-brand span {
  font-size: 17px;
}

.landing-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  margin-bottom: 24px;
}

.landing-content h1 {
  font-size: clamp(42px, 7vw, 76px);
  line-height: .96;
  margin-bottom: 18px;
}

.landing-content p:not(.eyebrow) {
  max-width: 520px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

.landing-actions {
  margin-top: 28px;
}

.landing-actions .button {
  min-width: 150px;
}

.login-body {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(3, 12, 18, .42), rgba(4, 21, 25, .68)),
    url("/static/zoo-command-backdrop.png");
  background-size: cover;
  background-position: center;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.login-panel {
  display: grid;
  gap: 18px;
  width: min(460px, 100%);
  padding: 30px;
  border: 1px solid rgba(190, 219, 220, .28);
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 28px 72px rgba(0, 8, 14, .44);
  backdrop-filter: blur(16px);
}

.login-panel h1 {
  color: var(--text);
  text-shadow: none;
}

.login-panel p {
  color: var(--muted);
}

.login-panel .page-kicker {
  color: var(--blue);
  text-shadow: none;
}

.login-mark {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}

.auth-brand {
  width: min(330px, 100%);
}

.auth-brand span {
  font-size: 15px;
}

.login-form {
  margin-bottom: 0;
}

.sound-status {
  color: var(--muted);
  font-size: 13px;
}

.face-preview-button {
  border: 0;
  padding: 0;
  cursor: pointer;
}

.face-preview-button:hover {
  outline: 3px solid rgba(255, 132, 75, .25);
}

.image-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
}

.image-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(25, 28, 50, .66);
}

.image-modal-content {
  position: relative;
  z-index: 1;
  width: min(920px, 94vw);
  max-height: 92vh;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
}

.image-modal img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 12px;
  background: var(--panel-soft);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-weight: 700;
}

/* Professional operations-console polish */
:root {
  --bg: #eef3f6;
  --panel: #ffffff;
  --panel-soft: #f6f9fb;
  --line: #d9e2e8;
  --line-strong: #c5d2da;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --accent: #ff7847;
  --accent-dark: #e76231;
  --blue: #256f8f;
  --blue-soft: #e8f2f6;
  --coral-soft: #fff0e8;
  --danger: #c0265c;
  --success: #0f766e;
  --warning: #b45309;
  --shadow: 0 18px 45px rgba(15, 23, 42, .08);
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, .06);
}

body {
  background:
    linear-gradient(180deg, rgba(232, 242, 246, .88) 0, rgba(238, 243, 246, 0) 280px),
    var(--bg);
  font-size: 15px;
  line-height: 1.45;
}

.icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sidebar {
  width: 276px;
  padding: 22px 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 12px 0 34px rgba(15, 23, 42, .05);
  overflow-y: auto;
}

.brand {
  padding: 8px 8px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.brand-identity {
  display: grid;
  width: 100%;
  gap: 7px;
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 42px;
  object-fit: contain;
  object-position: left center;
}

.brand .brand-subtitle {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
}

.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  background: #0f2844;
  box-shadow: 0 12px 26px rgba(37, 111, 143, .22);
}

.brand-wordmark {
  display: block;
  width: 160px;
  height: auto;
  max-height: 30px;
  object-fit: contain;
  object-position: left center;
}

.brand-name {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.brand-name span {
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}

.dashboard-command,
.dashboard-kpis,
.dashboard-grid,
.dashboard-bottom {
  margin-bottom: 20px;
}

.dashboard-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dashboard-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 100%;
  width: fit-content;
  padding: 4px;
  border: 2px solid #9fb3c8;
  border-radius: 999px;
  background: #f4f7fb;
  box-shadow: var(--shadow-soft);
}

.source-tab {
  min-width: 118px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #183b63;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.source-tab:hover,
.source-tab:focus-visible {
  color: #0f2f55;
  background: #dce8f5;
}

.source-tab.active {
  color: #fff;
  background: #2563eb;
}

.source-tab.active:hover,
.source-tab.active:focus-visible {
  color: #fff;
  background: #1d4ed8;
}

.source-health {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.source-card {
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-soft);
}

.source-card span,
.source-card strong,
.source-card small {
  display: block;
}

.source-card span {
  color: var(--muted);
  font-size: 12px;
}

.source-card strong {
  margin-top: 6px;
  color: #047857;
  font-size: 13px;
  font-weight: 900;
}

.source-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.source-card i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #10b981;
}

.source-card.degraded strong {
  color: #b45309;
}

.source-card.degraded i {
  background: #f59e0b;
}

.source-card.offline strong {
  color: #be123c;
}

.source-card.offline i {
  background: #ef4444;
}

.source-card.operational {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.source-card.operational > div:last-child {
  min-width: 0;
}

.source-card.operational.degraded .health-check {
  background: #f59e0b;
}

.source-card.operational.offline .health-check {
  background: #ef4444;
}

.health-check {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  flex: 0 0 42px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  color: #fff;
  background: #10b981;
  line-height: 1;
  font-weight: 900;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kpi-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 58px;
  gap: 8px;
  min-height: 112px;
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.kpi-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eaf2ff;
  color: #2563eb;
}

.kpi-icon svg {
  width: 19px;
  height: 19px;
}

.kpi-card.red .kpi-icon { background: #fee2e2; color: #ef4444; }
.kpi-card.purple .kpi-icon { background: #f3e8ff; color: #a855f7; }
.kpi-card.green .kpi-icon { background: #dcfce7; color: #16a34a; }
.kpi-card.teal .kpi-icon { background: #ccfbf1; color: #0f766e; }

.kpi-copy span,
.kpi-copy small {
  color: var(--muted);
  font-size: 11px;
}

.kpi-copy strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 23px;
  line-height: 1;
  font-weight: 900;
}

.kpi-copy small {
  display: block;
  margin-top: 8px;
  max-width: 100%;
  font-weight: 800;
}

.kpi-copy small.positive { color: #047857; }
.kpi-copy small.negative { color: #dc2626; }

.sparkline {
  position: static;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: end;
  justify-self: end;
  width: 58px;
  height: 42px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.dashboard-chart.wide {
  grid-column: span 7;
}

.dashboard-chart:not(.wide) {
  grid-column: span 5;
  overflow: hidden;
}

.dashboard-chart canvas {
  width: 100%;
}

.panel-head a {
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

.legend-blue,
.legend-teal,
.legend-purple {
  display: inline-block;
  width: 14px;
  height: 5px;
  margin: 0 6px 2px 14px;
  border-radius: 999px;
}

.legend-blue { background: #2563eb; }
.legend-teal { background: #14b8a6; }
.legend-purple { background: #8b5cf6; }

:root {
  --severity-critical: #dc2626;
  --severity-major: #ef4444;
  --severity-minor: #f59e0b;
  --severity-warning: #eab308;
  --severity-indeterminate: #3b82f6;
  --severity-cleared: #14b8a6;
  --severity-critical-text: #991b1b;
  --severity-major-text: #b91c1c;
  --severity-minor-text: #92400e;
  --severity-warning-text: #854d0e;
  --severity-indeterminate-text: #1d4ed8;
  --severity-cleared-text: #0f766e;
  --severity-critical-soft: #fee2e2;
  --severity-major-soft: #fef2f2;
  --severity-minor-soft: #fef3c7;
  --severity-warning-soft: #fefce8;
  --severity-indeterminate-soft: #dbeafe;
  --severity-cleared-soft: #ccfbf1;
  --ticket-new: #2563eb;
  --ticket-acknowledged: #eab308;
  --ticket-in-progress: #8b5cf6;
  --ticket-resolved: #10b981;
}

.donut-layout {
  display: grid;
  grid-template-columns: minmax(128px, 150px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.donut-ring {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  max-width: 100%;
  aspect-ratio: 1;
}

.donut-ring > div {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #fff;
}

.donut-ring strong,
.donut-ring span {
  display: block;
}

.donut-ring strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 900;
}

.donut-ring span {
  color: var(--muted);
  font-size: 11px;
}

.donut-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.donut-list div {
  display: grid;
  grid-template-columns: 10px minmax(70px, 1fr) minmax(28px, auto) minmax(44px, auto);
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  min-width: 0;
}

.donut-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donut-list strong {
  color: var(--text);
  font-size: 12px;
}

.donut-list em {
  color: var(--muted);
  font-style: normal;
  white-space: nowrap;
}

.severity-dot,
.ticket-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.severity-dot.critical { background: var(--severity-critical); }
.severity-dot.major { background: var(--severity-major); }
.severity-dot.minor { background: var(--severity-minor); }
.severity-dot.warning { background: var(--severity-warning); }
.severity-dot.indeterminate { background: var(--severity-indeterminate); }
.severity-dot.cleared { background: var(--severity-cleared); }
.ticket-dot.new { background: var(--ticket-new); }
.ticket-dot.acknowledged { background: var(--ticket-acknowledged); }
.ticket-dot.in-progress { background: var(--ticket-in-progress); }
.ticket-dot.resolved { background: var(--ticket-resolved); }

.compact-table th,
.compact-table td {
  padding: 11px 10px;
  font-size: 12px;
}

.status-chip {
  display: inline-flex;
  padding: 4px 9px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #2563eb;
  background: #eff6ff;
  font-size: 11px;
  font-weight: 900;
}

.bar-cell {
  display: grid;
  grid-template-columns: minmax(46px, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-weight: 900;
}

.bar-cell span {
  display: block;
  height: 7px;
  min-width: 2px;
  border-radius: 999px;
  background: #2563eb;
}

.bar-cell.teal span {
  background: #14b8a6;
}

.bar-cell.purple span {
  background: #8b5cf6;
}

.bar-cell.red span {
  background: #ef4444;
}

.bar-cell.green span {
  background: #22c55e;
}

nav {
  gap: 4px;
}

.nav-section {
  margin: 18px 10px 7px;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

nav a,
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

nav a.active,
nav a:hover {
  background: var(--blue-soft);
  border-color: #cfe3eb;
  color: var(--blue);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #2563eb;
  fill: none;
  stroke: #2563eb;
}

nav a.active .nav-icon,
nav a:hover .nav-icon {
  color: #2563eb;
  stroke: #2563eb;
}

.nav-icon path,
.nav-icon circle,
.nav-icon line,
.nav-icon polyline,
.nav-icon rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.main {
  margin-left: 276px;
  padding: 30px 34px 44px;
}

.topbar {
  min-height: 124px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  padding: 30px 34px;
  gap: 20px;
  margin-bottom: 26px;
  border: 1px solid rgba(34, 211, 238, .28);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 12%, rgba(20, 184, 166, .28), transparent 26%),
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .34), transparent 34%),
    linear-gradient(135deg, #07122c 0%, #0f2746 48%, #123d5e 100%);
  box-shadow: 0 28px 64px rgba(7, 18, 44, .28);
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 46%),
    linear-gradient(90deg, rgba(20, 184, 166, .16), transparent 44%);
}

.topbar::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8, #14b8a6, #ff844b);
}

.topbar > div:first-child {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
}

.topbar-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  max-width: none;
}

.clock-wrap,
.user-wrap {
  display: grid;
  gap: 2px;
  align-content: center;
  height: 56px;
  min-height: 56px;
  padding: 9px 13px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.clock-wrap span,
.user-wrap span,
.user-wrap em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
}

.clock-wrap strong,
.user-wrap strong {
  color: #07122c;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.user-wrap strong {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-wrap form {
  margin: 0;
}

.user-wrap button {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.topbar-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

.topbar p {
  color: rgba(226, 232, 240, .94);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}

.page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  color: #67e8f9;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(103, 232, 249, .28);
}

.topbar-customer-picture {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}

h1 {
  color: #ffffff;
  font-size: clamp(28px, 3.2vw, 35px);
  line-height: 1.1;
  font-weight: 900;
  text-shadow: 0 16px 34px rgba(0, 0, 0, .32);
  overflow-wrap: anywhere;
}

h2 {
  color: var(--text);
  font-size: 19px;
  font-weight: 900;
}

.status-wrap {
  height: 56px;
  min-height: 56px;
  border: 1px solid rgba(226, 232, 240, .9);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  color: #07122c;
  font-weight: 800;
}

.status-light {
  width: 11px;
  height: 11px;
}

.panel,
.stat,
.camera-column,
.monitor-customer,
.sensor-device,
.image-modal-content {
  border: 1px solid rgba(197, 210, 218, .82);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.panel {
  padding: 22px 24px;
  margin-bottom: 20px;
}

.panel-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.panel-head + .toolbar,
.panel-head + .form-grid,
.panel-head + .table-actions,
.panel-head + table,
.panel-head + .sensor-grid,
.panel-head + .help-list {
  margin-top: 16px;
}

.toolbar {
  gap: 10px;
}

.button {
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(255, 120, 71, .18);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(255, 120, 71, .22);
}

.button.light {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  box-shadow: none;
}

.button.light:hover {
  background: var(--panel-soft);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.button.ghost {
  border-color: var(--line-strong);
}

.button.danger {
  box-shadow: 0 8px 18px rgba(192, 38, 92, .16);
}

input,
select,
textarea {
  min-height: 42px;
  border-color: var(--line);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02);
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(37, 111, 143, .14);
  border-color: var(--blue);
}

table {
  border-spacing: 0;
}

th {
  padding-top: 13px;
  padding-bottom: 13px;
  background: #f8fafc;
  color: #475569;
  letter-spacing: .02em;
  border-top: 1px solid var(--line);
}

td {
  color: var(--text);
}

tbody tr:hover {
  background: #fbfdfe;
}

.selectable-row:hover {
  background: var(--blue-soft);
}

.badge {
  border: 1px solid transparent;
  font-weight: 900;
  text-transform: lowercase;
}

.badge.success,
.badge.info,
.badge.delivered,
.notice {
  background: #ecfdf5;
  color: var(--success);
  border-color: #bbf7d0;
}

.badge.warning,
.badge.pending {
  background: #fff7ed;
  color: var(--warning);
  border-color: #fed7aa;
}

.badge.failed,
.badge.danger,
.badge.critical,
.badge.emergency,
.alert {
  background: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}

/* One canonical X.733 severity palette for every badge and priority label. */
.priority-flag.critical, .priority-flag.emergency,
.badge.critical, .badge.emergency { color: var(--severity-critical-text); background: var(--severity-critical-soft); border-color: var(--severity-critical); }
.priority-flag.major, .priority-flag.high,
.badge.major, .badge.high { color: var(--severity-major-text); background: var(--severity-major-soft); border-color: var(--severity-major); }
.priority-flag.minor, .badge.minor { color: var(--severity-minor-text); background: var(--severity-minor-soft); border-color: var(--severity-minor); }
.priority-flag.warning, .badge.warning { color: var(--severity-warning-text); background: var(--severity-warning-soft); border-color: var(--severity-warning); }
.priority-flag.indeterminate, .badge.indeterminate { color: var(--severity-indeterminate-text); background: var(--severity-indeterminate-soft); border-color: var(--severity-indeterminate); }
.priority-flag.cleared, .priority-flag.normal,
.badge.cleared, .badge.normal { color: var(--severity-cleared-text); background: var(--severity-cleared-soft); border-color: var(--severity-cleared); }

.stats-grid {
  gap: 14px;
}

.stat {
  border-radius: 12px;
  padding: 18px 20px;
}

.stat strong {
  font-size: 30px;
}

.hero-band {
  border-radius: 14px;
  background: linear-gradient(135deg, #0f172a 0%, #17324a 48%, #256f8f 100%);
  box-shadow: var(--shadow);
}

.camera-column,
.monitor-site,
.sensor-device,
.sensor-card,
.device-meta-grid span,
.detail-grid p,
.nested-table,
.sensor-form {
  border-radius: 10px;
}

.sensor-card {
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

.sensor-card strong {
  font-weight: 900;
}

.raw-json {
  background: #0f172a;
  color: #dbeafe;
}

.face-preview-button.vip-red {
  outline: 4px solid #ef4444;
  animation: vipRedBlink 1s ease-in-out infinite;
}

.face-preview-button.blacklist {
  outline: 8px solid #111;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .32);
}

@keyframes vipRedBlink {
  0%, 100% {
    outline-color: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .16);
  }
  50% {
    outline-color: #b91c1c;
    box-shadow: 0 0 0 7px rgba(239, 68, 68, .24);
  }
}

@media (max-width: 860px) {
  .stats-grid,
  .split,
  .camera-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    width: auto;
  }

  .main {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .landing-page {
    align-items: flex-end;
    background-position: center top;
  }

  .landing-shade {
    background: linear-gradient(180deg, rgba(227, 235, 241, .18) 0%, rgba(248, 251, 252, .92) 56%, rgba(248, 251, 252, .98) 100%);
  }

  .landing-content h1 {
    font-size: 42px;
  }

  .landing-content p:not(.eyebrow) {
    font-size: 16px;
  }
}

@media (max-width: 680px) {
  .hero-band,
  .topbar,
  .prepared-layout {
    grid-template-columns: 1fr;
    display: grid;
  }

  .topbar > div:first-child,
  .topbar-actions {
    max-width: none;
    width: 100%;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .clock-wrap,
  .user-wrap,
  .status-wrap {
    min-width: 0;
    flex: 1 1 150px;
  }

  .toolbar,
  .upload-box,
  .form-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Demo-ready color system for dashboards and live monitoring workspaces. */
.page-home .source-health,
.page-dashboard .source-health,
.page-kpi_dashboard .source-health,
.page-zoo_monitoring .source-health {
  gap: 14px;
}

.page-home .source-card,
.page-dashboard .source-card,
.page-kpi_dashboard .source-card,
.page-zoo_monitoring .source-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #3b82f6 18%, var(--line));
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, #dbeafe), var(--panel));
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.page-home .source-card::after,
.page-dashboard .source-card::after,
.page-kpi_dashboard .source-card::after,
.page-zoo_monitoring .source-card::after {
  content: "";
  position: absolute;
  top: -34px;
  right: -28px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: rgba(37, 99, 235, .08);
  pointer-events: none;
}

.page-home .source-card:hover,
.page-dashboard .source-card:hover,
.page-kpi_dashboard .source-card:hover,
.page-zoo_monitoring .source-card:hover {
  border-color: color-mix(in srgb, #3b82f6 44%, var(--line));
  box-shadow: 0 16px 34px rgba(15, 23, 42, .13);
  transform: translateY(-2px);
}

.page-home .source-card.degraded,
.page-dashboard .source-card.degraded,
.page-kpi_dashboard .source-card.degraded,
.page-zoo_monitoring .source-card.degraded {
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 91%, #fef3c7), var(--panel));
}

.page-home .source-card.offline,
.page-dashboard .source-card.offline,
.page-kpi_dashboard .source-card.offline,
.page-zoo_monitoring .source-card.offline {
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 92%, #ffe4e6), var(--panel));
}

.page-kpi_dashboard .workspace-heading,
.page-zoo_monitoring .ai-monitor-hero,
body[class*="_monitoring"] .ai-monitor-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 16%, rgba(45, 212, 191, .3), transparent 26%),
    radial-gradient(circle at 68% 110%, rgba(139, 92, 246, .26), transparent 31%),
    linear-gradient(125deg, #081a35, #153f72 58%, #0f766e);
  box-shadow: 0 20px 46px rgba(8, 25, 46, .22);
}

.page-kpi_dashboard .workspace-heading {
  min-height: 134px;
  align-items: center;
  padding: 24px 28px;
}

.page-kpi_dashboard .workspace-heading h2,
.page-zoo_monitoring .ai-monitor-hero h2,
body[class*="_monitoring"] .ai-monitor-hero h2 { color: #fff; }

.page-kpi_dashboard .workspace-heading p,
.page-zoo_monitoring .ai-monitor-hero p,
body[class*="_monitoring"] .ai-monitor-hero p { color: #cfe8ff; }

.page-kpi_dashboard .workspace-heading .eyebrow,
.page-zoo_monitoring .page-kicker,
body[class*="_monitoring"] .page-kicker { color: #5eead4; }

.page-kpi_dashboard .analytics-stats > div,
.page-zoo_monitoring .ai-monitor-stats span,
body[class*="_monitoring"] .ai-monitor-stats span {
  border: 1px solid color-mix(in srgb, #38bdf8 24%, var(--line));
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, #dbeafe), var(--panel));
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.page-zoo_monitoring .ai-monitor-hero .ai-monitor-stats span,
body[class*="_monitoring"] .ai-monitor-hero .ai-monitor-stats span {
  border-color: rgba(255, 255, 255, .18);
  color: #dbeafe;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}

.page-zoo_monitoring .ai-monitor-hero .ai-monitor-stats strong,
body[class*="_monitoring"] .ai-monitor-hero .ai-monitor-stats strong { color: #fff; }

.page-zoo_monitoring .ai-monitor-card,
body[class*="_monitoring"] .ai-monitor-card,
.page-zoo_monitoring .ai-node-card,
body[class*="_monitoring"] .ai-node-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border-top: 3px solid #22c55e;
  background: linear-gradient(150deg, color-mix(in srgb, var(--panel) 94%, #dcfce7), var(--panel));
  box-shadow: 0 12px 28px rgba(15, 23, 42, .09);
  transition: transform .2s ease, box-shadow .2s ease;
}

.page-zoo_monitoring .ai-monitor-card.warning,
body[class*="_monitoring"] .ai-monitor-card.warning { border-top-color: #f59e0b; background: linear-gradient(150deg, color-mix(in srgb, var(--panel) 92%, #fef3c7), var(--panel)); }
.page-zoo_monitoring .ai-monitor-card.critical,
body[class*="_monitoring"] .ai-monitor-card.critical { border-top-color: #ef4444; background: linear-gradient(150deg, color-mix(in srgb, var(--panel) 92%, #fee2e2), var(--panel)); }
.page-zoo_monitoring .ai-monitor-card:hover,
body[class*="_monitoring"] .ai-monitor-card:hover,
.page-zoo_monitoring .ai-node-card:hover,
body[class*="_monitoring"] .ai-node-card:hover { box-shadow: 0 18px 38px rgba(15, 23, 42, .14); transform: translateY(-3px); }

.page-kpi_dashboard .panel,
.page-zoo_monitoring .panel,
body[class*="_monitoring"] .panel {
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

.page-kpi_dashboard table thead,
.page-zoo_monitoring table thead,
body[class*="_monitoring"] table thead {
  background: linear-gradient(90deg, color-mix(in srgb, #2563eb 12%, var(--panel-soft)), color-mix(in srgb, #14b8a6 10%, var(--panel-soft)));
}

@media (max-width: 680px) {
  .page-kpi_dashboard .workspace-heading { min-height: 0; padding: 22px; }
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-chart.wide {
    grid-column: 1;
  }

  .dashboard-chart:not(.wide) {
    grid-column: 1;
  }

  .source-health {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

}

@media (max-width: 520px) {
  .source-health {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .dashboard-kpis {
    grid-template-columns: 1fr;
  }

  .analytics-hero,
  .analytics-settings-row {
    grid-template-columns: 1fr;
  }

  .analytics-stats,
  .analytics-threshold-grid {
    grid-template-columns: 1fr;
  }

  .analytics-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Modern alarm command center */
.sidebar {
  background:
    radial-gradient(circle at 35% 0%, rgba(37, 99, 235, .09), transparent 28%),
    var(--panel);
}

.nav-item {
  position: relative;
  overflow: hidden;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #38bdf8, #2563eb);
  opacity: 0;
  transform: scaleY(.35);
  transition: opacity .2s ease, transform .2s ease;
}

.nav-item:hover {
  transform: translateX(3px);
  box-shadow: 0 7px 18px rgba(37, 99, 235, .08);
}

.nav-item.active::before,
.nav-item:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.nav-item .nav-icon {
  padding: 3px;
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 7px;
  background: rgba(37, 99, 235, .08);
  transition: transform .2s ease, background .2s ease;
}

.nav-item:hover .nav-icon {
  transform: rotate(-4deg) scale(1.06);
  background: rgba(37, 99, 235, .14);
}

.alarm-command-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: end;
  gap: 24px;
  min-height: 214px;
  margin-bottom: 18px;
  padding: 34px 38px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, .22);
  border-radius: 22px;
  color: #fff;
  background:
    linear-gradient(115deg, rgba(7, 18, 44, .12), rgba(7, 18, 44, .74)),
    radial-gradient(circle at 82% 18%, rgba(34, 211, 238, .28), transparent 26%),
    radial-gradient(circle at 42% 120%, rgba(37, 99, 235, .55), transparent 44%),
    #07162d;
  box-shadow: 0 24px 60px rgba(7, 18, 44, .22);
}

.alarm-command-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(148, 163, 184, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .12) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, transparent, #000 44%);
}

.alarm-command-hero::after {
  content: "";
  position: absolute;
  top: -100px;
  right: 8%;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(56, 189, 248, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(56, 189, 248, .035), 0 0 0 72px rgba(56, 189, 248, .025);
}

.alarm-command-copy,
.alarm-hero-filter {
  position: relative;
  z-index: 1;
}

.alarm-live-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  color: #d5e7f6;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.alarm-live-line small {
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.22);
  color: #8eb3cf;
  font-size: 10px;
}

.alarm-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2ee6a6;
  box-shadow: 0 0 0 0 rgba(46, 230, 166, .5);
  animation: alarm-live-pulse 2s infinite;
}

@keyframes alarm-live-pulse {
  70% { box-shadow: 0 0 0 9px rgba(46, 230, 166, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 230, 166, 0); }
}

.alarm-command-copy h2 {
  max-width: 760px;
  margin: 0 0 10px;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.alarm-command-copy h2 span {
  color: #5eead4;
}

.alarm-command-copy p {
  max-width: 680px;
  margin: 0;
  color: #a9c0d4;
  font-size: 14px;
}

.alarm-hero-filter label {
  color: #b7c9d9;
}

.alarm-hero-filter select {
  border-color: rgba(255,255,255,.2);
  color: #fff;
  background-color: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
}

.alarm-hero-filter option {
  color: #111827;
}

.alarm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.alarm-kpi-card {
  --accent: #4e8df7;
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 122px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 44%),
    var(--panel);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.alarm-kpi-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.alarm-kpi-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 18px 38px rgba(15, 23, 42, .12);
}

.alarm-kpi-card.tone-danger { --accent: #ef476f; }
.alarm-kpi-card.tone-critical { --accent: #ff5c5c; }
.alarm-kpi-card.tone-warning { --accent: #f2a93b; }
.alarm-kpi-card.tone-success { --accent: #22b989; }

.alarm-kpi-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.alarm-kpi-icon svg,
.alarm-view-all svg,
.alarm-source-icon svg,
.alarm-evidence-state svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alarm-kpi-card > div {
  display: grid;
}

.alarm-kpi-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.alarm-kpi-card strong {
  margin: 2px 0;
  font-size: 31px;
  line-height: 1;
}

.alarm-kpi-card em {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alarm-kpi-arrow {
  color: var(--accent);
  font-size: 20px;
  font-style: normal;
  transition: transform .2s ease;
}

.alarm-kpi-card:hover .alarm-kpi-arrow {
  transform: translateX(4px);
}

.alarm-kpi-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
}

.alarm-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
  gap: 18px;
  margin-bottom: 18px;
}

.alarm-insight-grid.secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.alarm-insight-grid .panel,
.alarm-priority-panel {
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .065);
}

.alarm-panel-kicker {
  display: block;
  margin-bottom: 4px;
  color: #3973d6 !important;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.alarm-age-card {
  display: grid;
  justify-items: end;
}

.alarm-age-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.alarm-age-card strong {
  color: #ef476f;
  font-size: 20px;
}

.alarm-activity-panel,
.alarm-severity-panel {
  min-height: 350px;
}

.alarm-activity-chart {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(18px, 1fr));
  align-items: end;
  gap: clamp(5px, .9vw, 12px);
  height: 230px;
  padding: 22px 8px 0;
}

.alarm-chart-grid {
  position: absolute;
  inset: 22px 8px 28px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}

.alarm-chart-grid i {
  border-top: 1px dashed var(--line);
}

.alarm-activity-column {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 18px 1fr 24px;
  align-items: end;
  justify-items: center;
  height: 100%;
}

.alarm-activity-column > span {
  width: min(34px, 82%);
  min-height: 4px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #50c8e8, #3973d6);
  box-shadow: 0 8px 16px rgba(57, 115, 214, .18);
  transform-origin: bottom;
  animation: alarm-bar-rise .65s ease both;
}

@keyframes alarm-bar-rise {
  from { transform: scaleY(.08); opacity: .25; }
  to { transform: scaleY(1); opacity: 1; }
}

.alarm-activity-column strong,
.alarm-activity-column small {
  font-size: 10px;
}

.alarm-activity-column small {
  padding-top: 7px;
  color: var(--muted);
  white-space: nowrap;
}

.alarm-severity-visual {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 22px;
  min-height: 240px;
}

.alarm-severity-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(
    var(--severity-critical) 0 var(--critical),
    var(--severity-major) var(--critical) calc(var(--critical) + var(--major)),
    var(--severity-minor) calc(var(--critical) + var(--major)) calc(var(--critical) + var(--major) + var(--minor)),
    var(--severity-warning) calc(var(--critical) + var(--major) + var(--minor)) calc(var(--critical) + var(--major) + var(--minor) + var(--warning)),
    var(--severity-indeterminate) calc(var(--critical) + var(--major) + var(--minor) + var(--warning)) calc(var(--critical) + var(--major) + var(--minor) + var(--warning) + var(--indeterminate)),
    var(--severity-cleared) 0
  );
  box-shadow: 0 13px 28px rgba(15, 23, 42, .12);
}

.alarm-severity-ring::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--panel);
}

.alarm-severity-ring > div {
  position: relative;
  z-index: 1;
  display: grid;
  text-align: center;
}

.alarm-severity-ring strong {
  font-size: 28px;
  line-height: 1;
}

.alarm-severity-ring span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.alarm-severity-list {
  display: grid;
  gap: 11px;
}

.alarm-severity-list > div {
  display: grid;
  grid-template-columns: 8px 1fr auto 38px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.alarm-severity-list i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.alarm-severity-list span,
.alarm-severity-list small {
  color: var(--muted);
}

.alarm-location-list {
  display: grid;
  gap: 12px;
  padding-top: 6px;
}

.alarm-location-row {
  display: grid;
  grid-template-columns: 28px 1fr 65px 34px;
  align-items: center;
  gap: 11px;
}

.alarm-location-rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #3973d6;
  background: rgba(57, 115, 214, .1);
  font-size: 11px;
  font-weight: 900;
}

.alarm-location-row > div {
  min-width: 0;
}

.alarm-location-row > div > strong {
  display: block;
  overflow: hidden;
  margin-bottom: 5px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alarm-location-row > div > span {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-soft);
}

.alarm-location-row > div i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6f8ff7, #9b6fe8);
}

.alarm-location-row small {
  color: #d75555;
  font-size: 9px;
  font-weight: 800;
}

.alarm-location-row b {
  font-size: 14px;
  text-align: right;
}

.alarm-priority-panel {
  overflow: hidden;
}

.alarm-view-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.alarm-view-all svg {
  width: 16px;
  height: 16px;
}

.alarm-priority-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.alarm-priority-table td {
  vertical-align: middle;
}

.alarm-priority-table tbody tr {
  transition: background .18s ease, transform .18s ease;
}

.alarm-priority-table tbody tr:hover {
  background: color-mix(in srgb, #3973d6 5%, var(--panel));
}

.alarm-priority-badge,
.alarm-evidence-state,
.alarm-age-badge,
.alarm-owner,
.alarm-unassigned {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.alarm-priority-badge {
  padding: 6px 9px;
  border-radius: 999px;
  color: #586477;
  background: var(--panel-soft);
  font-size: 10px;
  font-weight: 900;
}

.alarm-priority-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8895a7;
}

.alarm-priority-badge.severity-critical { color: var(--severity-critical-text); background: var(--severity-critical-soft); }
.alarm-priority-badge.severity-critical i { background: var(--severity-critical); box-shadow: 0 0 0 4px color-mix(in srgb, var(--severity-critical) 12%, transparent); }
.alarm-priority-badge.severity-major { color: var(--severity-major-text); background: var(--severity-major-soft); }
.alarm-priority-badge.severity-major i { background: var(--severity-major); }
.alarm-priority-badge.severity-minor { color: var(--severity-minor-text); background: var(--severity-minor-soft); }
.alarm-priority-badge.severity-minor i { background: var(--severity-minor); }
.alarm-priority-badge.severity-warning { color: var(--severity-warning-text); background: var(--severity-warning-soft); }
.alarm-priority-badge.severity-warning i { background: var(--severity-warning); }
.alarm-priority-badge.severity-indeterminate { color: var(--severity-indeterminate-text); background: var(--severity-indeterminate-soft); }
.alarm-priority-badge.severity-indeterminate i { background: var(--severity-indeterminate); }
.alarm-priority-badge.severity-cleared { color: var(--severity-cleared-text); background: var(--severity-cleared-soft); }
.alarm-priority-badge.severity-cleared i { background: var(--severity-cleared); }

.alarm-primary-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.alarm-source-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  color: #3973d6;
  background: rgba(57, 115, 214, .1);
}

.alarm-primary-cell > div,
.alarm-priority-table td {
  min-width: 0;
}

.alarm-primary-cell strong,
.table-subtext {
  display: block;
}

.alarm-primary-cell strong {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alarm-primary-cell small,
.table-subtext {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.alarm-age-badge {
  padding: 4px 7px;
  border-radius: 6px;
  color: #b13d4b;
  background: rgba(239, 71, 111, .09);
  font-size: 10px;
  font-weight: 900;
}

.alarm-owner,
.alarm-unassigned {
  font-size: 10px;
  font-weight: 800;
}

.alarm-owner::before,
.alarm-unassigned::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22b989;
}

.alarm-unassigned {
  color: #c27920;
}

.alarm-unassigned::before {
  background: #f2a93b;
}

.alarm-evidence-state {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.alarm-evidence-state.available {
  color: #3973d6;
}

.alarm-evidence-state svg {
  width: 15px;
  height: 15px;
}

html[data-theme="dark"] .alarm-priority-badge.severity-critical {
  color: #ff8ba3;
  background: rgba(239, 71, 111, .14);
}

html[data-theme="dark"] .alarm-priority-badge.severity-major {
  color: #ffb18c;
  background: rgba(255, 132, 75, .13);
}

html[data-theme="dark"] .alarm-priority-badge.severity-warning {
  color: #f4d779;
  background: rgba(244, 201, 93, .12);
}

@media (max-width: 1280px) {
  .alarm-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alarm-insight-grid,
  .alarm-insight-grid.secondary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .alarm-command-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 26px 22px;
  }

  .alarm-command-copy h2 {
    font-size: 32px;
  }

  .alarm-live-line {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .alarm-kpi-grid {
    grid-template-columns: 1fr;
  }

  .alarm-severity-visual {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .alarm-severity-list {
    width: 100%;
  }

  .alarm-activity-chart {
    gap: 4px;
    overflow: hidden;
  }
}

/* Alarm monitoring: intentionally compact and low-friction. */
.alarm-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
}

.alarm-page-heading h2 {
  margin: 4px 0;
  font-size: 30px;
}

.alarm-page-heading p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

.alarm-period-picker {
  min-width: 190px;
}

.alarm-period-picker label,
.alarm-filter-form label,
.alarm-report-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.alarm-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.alarm-summary-strip a {
  display: grid;
  gap: 3px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid #3973d6;
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 22px rgba(25, 28, 50, .06);
}

.alarm-summary-strip a.danger { border-left-color: #e14b57; }
.alarm-summary-strip a.success { border-left-color: #2f9e6f; }
.alarm-summary-strip span,
.alarm-summary-strip small { color: var(--muted); }
.alarm-summary-strip strong { font-size: 28px; }

.alarm-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.alarm-chart-card {
  min-height: 340px;
}

.alarm-horizontal-chart {
  display: grid;
  gap: 17px;
  padding: 12px 2px 4px;
}

.alarm-bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 180px) 1fr 42px;
  gap: 12px;
  align-items: center;
}

.alarm-bar-row > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alarm-bar-row > div {
  height: 18px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--panel-soft);
}

.alarm-bar-row i {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: #3973d6;
}

.alarm-toggle,
.alarm-report-tabs {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.alarm-toggle a,
.alarm-report-tabs a {
  padding: 7px 12px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.alarm-toggle a.active,
.alarm-report-tabs a.active {
  background: #3973d6;
  color: #fff;
}

.alarm-column-chart {
  display: flex;
  align-items: end;
  gap: 12px;
  height: 245px;
  padding: 24px 8px 0;
  border-bottom: 1px solid var(--line);
}

.alarm-column {
  display: grid;
  grid-template-rows: 20px 1fr 42px;
  align-items: end;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.alarm-column i {
  width: min(72px, 72%);
  min-height: 4px;
  border-radius: 6px 6px 0 0;
  background: #9364d8;
}

.alarm-column span {
  width: 100%;
  overflow: hidden;
  padding-top: 8px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alarm-filter-form {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) 150px 160px 160px auto;
  gap: 12px;
  align-items: end;
}

.alarm-table td,
.alarm-table th {
  vertical-align: top;
}

.status-pill.status-open {
  background: #fff0f1;
  color: #b52f3b;
}

.status-pill.status-closed {
  background: #e7f7ef;
  color: #207a53;
}

.alarm-report-tabs {
  margin-bottom: 18px;
}

.alarm-report-tabs a {
  min-width: 110px;
  text-align: center;
}

.alarm-report-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.alarm-report-form .form-actions {
  align-self: end;
  margin: 0;
}

.report-paper {
  max-width: 1180px;
  margin: 12px auto;
  padding: 34px;
  border: 1px solid var(--line);
  background: #fff;
  color: #171717;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
}

.report-paper header {
  margin-bottom: 20px;
}

.report-paper header h3 {
  margin: 0 0 5px;
  font-size: 22px;
}

.report-paper header p {
  margin: 0;
  color: #555;
}

.category-menu-builder {
  display: grid;
  gap: 14px;
}

.category-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.category-menu-grid fieldset {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

.category-menu-grid legend {
  padding: 0 6px;
  font-weight: 900;
}

.category-menu-grid .checkbox-line span {
  display: grid;
}

.category-menu-grid small {
  color: var(--muted);
  font-size: 10px;
}

html[data-theme="dark"] .report-paper {
  border-color: #cbd5e1;
  background: #fff;
  color: #171717;
}

@media (max-width: 1180px) {
  .alarm-dashboard-grid,
  .category-menu-grid {
    grid-template-columns: 1fr;
  }

  .alarm-filter-form,
  .alarm-report-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .alarm-page-heading,
  .alarm-summary-strip,
  .alarm-filter-form,
  .alarm-report-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .alarm-bar-row {
    grid-template-columns: 95px 1fr 32px;
  }
}

@media print {
  .sidebar,
  .topbar,
  .alarm-page-heading,
  .alarm-report-builder,
  .alarm-report-preview > .panel-head {
    display: none !important;
  }

  .main {
    margin: 0;
    padding: 0;
  }

  .alarm-report-preview,
  .report-paper {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}

/* Dark mode lives at the end so it wins over the light-mode component rules above. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07111f;
  --panel: #101b2d;
  --panel-soft: #142238;
  --line: #26364d;
  --line-strong: #344762;
  --text: #e5edf7;
  --muted: #9fb0c4;
  --muted-2: #718299;
  --accent: #ff8a5c;
  --accent-dark: #f06f3d;
  --blue: #67b7dc;
  --blue-soft: #132c44;
  --coral-soft: #3a2319;
  --danger: #fb7185;
  --success: #5eead4;
  --warning: #fbbf24;
  --shadow: 0 18px 45px rgba(0, 0, 0, .28);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] body {
  background:
    linear-gradient(180deg, rgba(18, 61, 94, .34) 0, rgba(7, 17, 31, 0) 280px),
    var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .camera-column,
html[data-theme="dark"] .monitor-customer,
html[data-theme="dark"] .sensor-device,
html[data-theme="dark"] .sensor-card,
html[data-theme="dark"] .notification-card.unknown,
html[data-theme="dark"] .image-modal-content,
html[data-theme="dark"] .login-panel {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .panel-head,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] .child-cell,
html[data-theme="dark"] .nested-table,
html[data-theme="dark"] .sensor-form {
  border-color: var(--line);
}

html[data-theme="dark"] .monitor-site,
html[data-theme="dark"] .device-meta-grid span,
html[data-theme="dark"] .detail-grid p,
html[data-theme="dark"] .detail-grid > span,
html[data-theme="dark"] .type-pill,
html[data-theme="dark"] .source-card,
html[data-theme="dark"] .clock-wrap,
html[data-theme="dark"] .user-wrap,
html[data-theme="dark"] .status-wrap,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .upload-box,
html[data-theme="dark"] .add-face-start,
html[data-theme="dark"] .file-picker,
html[data-theme="dark"] .chart-shell,
html[data-theme="dark"] .donut-ring > div,
html[data-theme="dark"] .sensor-chart-link,
html[data-theme="dark"] .ai-monitor-stats span,
html[data-theme="dark"] .ai-monitor-card,
html[data-theme="dark"] .ai-node-card,
html[data-theme="dark"] .ai-algorithm-map,
html[data-theme="dark"] .analytics-stats span,
html[data-theme="dark"] .analytics-card,
html[data-theme="dark"] .analytics-settings-row,
html[data-theme="dark"] .alias-config-grid label {
  background: var(--panel-soft);
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .ai-monitor-card,
html[data-theme="dark"] .ai-node-card,
html[data-theme="dark"] .analytics-card,
html[data-theme="dark"] .analytics-settings-row,
html[data-theme="dark"] .sensor-card,
html[data-theme="dark"] .nested-table,
html[data-theme="dark"] .sensor-form {
  background: var(--panel);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0b1525;
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled {
  background: #111d31;
  color: var(--muted);
}

html[data-theme="dark"] th {
  background: #0d192b;
  color: var(--muted);
}

html[data-theme="dark"] td,
html[data-theme="dark"] h2,
html[data-theme="dark"] .stat strong,
html[data-theme="dark"] .source-card strong,
html[data-theme="dark"] .kpi-copy strong,
html[data-theme="dark"] .donut-ring strong,
html[data-theme="dark"] .donut-list strong,
html[data-theme="dark"] .sensor-card strong,
html[data-theme="dark"] .sensor-device-head strong,
html[data-theme="dark"] .monitor-customer-head strong,
html[data-theme="dark"] .monitor-site-head strong,
html[data-theme="dark"] .device-meta-grid strong,
html[data-theme="dark"] .detail-grid strong,
html[data-theme="dark"] .ai-monitor-card-head strong,
html[data-theme="dark"] .ai-monitor-meta strong,
html[data-theme="dark"] .analytics-card-head strong,
html[data-theme="dark"] .analytics-card-metrics strong,
html[data-theme="dark"] .analytics-stats strong,
html[data-theme="dark"] .ai-algorithm-map strong,
html[data-theme="dark"] .alias-config-grid label span,
html[data-theme="dark"] .ai-monitor-stats strong,
html[data-theme="dark"] .clock-wrap strong,
html[data-theme="dark"] .user-wrap strong,
html[data-theme="dark"] .notification-card strong,
html[data-theme="dark"] .login-panel h1 {
  color: var(--text);
}

html[data-theme="dark"] .brand span,
html[data-theme="dark"] .topbar p,
html[data-theme="dark"] .panel-head span,
html[data-theme="dark"] .stat span,
html[data-theme="dark"] .camera-head span,
html[data-theme="dark"] .notification-tools span,
html[data-theme="dark"] .sensor-card span,
html[data-theme="dark"] .sensor-card small,
html[data-theme="dark"] .sensor-card em,
html[data-theme="dark"] .ai-monitor-card-head span,
html[data-theme="dark"] .ai-monitor-card small,
html[data-theme="dark"] .ai-monitor-footer,
html[data-theme="dark"] .ai-node-card span,
html[data-theme="dark"] .ai-node-card small,
html[data-theme="dark"] .ai-algorithm-map span,
html[data-theme="dark"] .ai-algorithm-map small,
html[data-theme="dark"] .alias-config-grid small,
html[data-theme="dark"] .empty,
html[data-theme="dark"] small,
html[data-theme="dark"] label,
html[data-theme="dark"] .clock-wrap span,
html[data-theme="dark"] .user-wrap em,
html[data-theme="dark"] .donut-ring span,
html[data-theme="dark"] .donut-list,
html[data-theme="dark"] .donut-list em {
  color: var(--muted);
}

html[data-theme="dark"] nav a,
html[data-theme="dark"] .nav-item {
  color: #b8c7d9;
}

html[data-theme="dark"] nav a.active,
html[data-theme="dark"] nav a:hover {
  background: #12314b;
  border-color: #24516e;
  color: #bdeafe;
}

html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] .selectable-row:hover {
  background: #142238;
}

html[data-theme="dark"] .button.light {
  background: #0b1525;
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .button.ghost {
  border-color: var(--line-strong);
  color: #93c5fd;
}

html[data-theme="dark"] .badge {
  background: #17253b;
  color: #cbd5e1;
  border-color: #334155;
}

html[data-theme="dark"] .badge.success,
html[data-theme="dark"] .badge.info,
html[data-theme="dark"] .badge.delivered,
html[data-theme="dark"] .notice {
  background: #062f2d;
  color: #99f6e4;
  border-color: #115e59;
}

html[data-theme="dark"] .badge.warning,
html[data-theme="dark"] .badge.pending {
  background: #3b2507;
  color: #fde68a;
  border-color: #92400e;
}

html[data-theme="dark"] .badge.failed,
html[data-theme="dark"] .badge.danger,
html[data-theme="dark"] .badge.critical,
html[data-theme="dark"] .badge.emergency,
html[data-theme="dark"] .alert {
  background: #3b0b18;
  color: #fecdd3;
  border-color: #9f1239;
}

html[data-theme="dark"] .priority-flag.critical,
html[data-theme="dark"] .badge.critical { color: #fecaca; background: #450a0a; border-color: var(--severity-critical); }
html[data-theme="dark"] .priority-flag.major,
html[data-theme="dark"] .badge.major { color: #fecaca; background: #3f1010; border-color: var(--severity-major); }
html[data-theme="dark"] .priority-flag.minor,
html[data-theme="dark"] .badge.minor { color: #fde68a; background: #451a03; border-color: var(--severity-minor); }
html[data-theme="dark"] .priority-flag.warning,
html[data-theme="dark"] .badge.warning { color: #fef08a; background: #422006; border-color: var(--severity-warning); }
html[data-theme="dark"] .priority-flag.indeterminate,
html[data-theme="dark"] .badge.indeterminate { color: #bfdbfe; background: #172554; border-color: var(--severity-indeterminate); }
html[data-theme="dark"] .priority-flag.cleared,
html[data-theme="dark"] .badge.cleared { color: #99f6e4; background: #042f2e; border-color: var(--severity-cleared); }

html[data-theme="dark"] .notification-card.male {
  background: #132c44;
}

html[data-theme="dark"] .notification-card.female {
  background: #3a2319;
}

html[data-theme="dark"] .face-holder,
html[data-theme="dark"] .raw-json {
  background: #07111f;
}

html[data-theme="dark"] .raw-json {
  color: #dbeafe;
}

html[data-theme="dark"] .ai-monitor-hero,
html[data-theme="dark"] .hero-band,
html[data-theme="dark"] .topbar {
  background:
    radial-gradient(circle at 84% 12%, rgba(20, 184, 166, .22), transparent 26%),
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .28), transparent 34%),
    linear-gradient(135deg, #030712 0%, #0b1b32 48%, #123d5e 100%);
  border-color: rgba(103, 232, 249, .22);
}

html[data-theme="dark"] .ai-monitor-card p,
html[data-theme="dark"] .landing-content p:not(.eyebrow),
html[data-theme="dark"] .login-panel p {
  color: #c8d6e6;
}

html[data-theme="dark"] .ai-monitor-card.warning,
html[data-theme="dark"] .sensor-card.warning {
  background: linear-gradient(90deg, rgba(245, 158, 11, .16), var(--panel) 42%);
}

html[data-theme="dark"] .ai-monitor-card.critical,
html[data-theme="dark"] .sensor-card.critical {
  background: linear-gradient(90deg, rgba(239, 68, 68, .16), var(--panel) 42%);
}

html[data-theme="dark"] .settings-subhead,
html[data-theme="dark"] .vision-result-grid article,
html[data-theme="dark"] .vision-image-grid figure {
  background: var(--panel-soft);
  border-color: var(--line);
}

html[data-theme="dark"] .kpi-card {
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .source-tab {
  color: #dbeafe;
}

html[data-theme="dark"] .dashboard-tabs {
  background: #0d1b2e;
  border-color: #55708f;
}

html[data-theme="dark"] .source-tab:hover,
html[data-theme="dark"] .source-tab:focus-visible {
  color: #fff;
  background: #1d3554;
}

html[data-theme="dark"] .source-tab.active {
  color: #fff;
}

html[data-theme="dark"] .source-card > span,
html[data-theme="dark"] .source-card > small,
html[data-theme="dark"] .source-card.operational span {
  color: #c7d8eb;
}

.favorite-animal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.favorite-animal-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 18px;
  display: grid;
  gap: 12px;
  min-height: 210px;
  position: relative;
}

.favorite-animal-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.favorite-animal-thumb {
  width: 64px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.favorite-animal-thumb.large {
  width: 92px;
  height: 68px;
}

.favorite-animal-card.good-spot {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .32), 0 18px 40px rgba(34, 197, 94, .18);
  animation: favoritePulse 1.1s ease-in-out infinite;
}

.favorite-animal-head span,
.favorite-animal-card small {
  color: var(--muted);
}

.favorite-animal-head strong {
  display: block;
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1.1;
}

.favorite-animal-card p {
  margin: 0;
  color: var(--text);
}

.favorite-animal-status em {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
  font-size: .78rem;
}

.favorite-animal-card.good-spot .favorite-animal-status em {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.animal-source-form {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.animal-file-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.animal-file-control .file-picker {
  min-width: 112px;
  padding: 0 20px;
  flex: 0 0 auto;
}

.animal-file-control > span {
  color: var(--muted);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.animal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.animal-chip-row span {
  border: 1px solid #86efac;
  background: #dcfce7;
  color: #166534;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .82rem;
  font-weight: 900;
  text-transform: capitalize;
}

.image-zoom-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.image-zoom-button img {
  display: block;
  width: 100%;
}

.animal-image-grid figure {
  min-width: 0;
}

@keyframes favoritePulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

html[data-theme="dark"] .favorite-animal-card {
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .favorite-animal-card.good-spot {
  background: linear-gradient(90deg, rgba(34, 197, 94, .18), var(--panel) 48%);
}

html[data-theme="dark"] .favorite-animal-card.good-spot .favorite-animal-status em {
  background: #052e16;
  border-color: #166534;
  color: #bbf7d0;
}

html[data-theme="dark"] .animal-chip-row span {
  background: #052e16;
  border-color: #166534;
  color: #bbf7d0;
}

@media (max-width: 760px) {
  .animal-source-form {
    grid-template-columns: 1fr;
  }

  .animal-file-control {
    align-items: stretch;
    flex-direction: column;
  }

  .vision-result-file {
    grid-column: span 1;
  }
}

.dashboard-backdrop-body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(226, 238, 239, .76) 0, rgba(226, 238, 239, .88) 330px, rgba(226, 238, 239, .95) 100%),
    url("/static/zoo-command-backdrop.png");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.dashboard-backdrop-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 24% 16%, rgba(20, 184, 166, .18), transparent 32%),
    linear-gradient(90deg, rgba(226, 238, 239, .9), rgba(226, 238, 239, .7));
  pointer-events: none;
}

.dashboard-backdrop-body .sidebar {
  background: rgba(255, 255, 255, .9);
}

.dashboard-backdrop-body .topbar,
.dashboard-backdrop-body .panel,
.dashboard-backdrop-body .kpi-card,
.dashboard-backdrop-body .source-card {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
}

.dashboard-backdrop-body .dashboard-tabs {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px);
}

html[data-theme="dark"] .dashboard-backdrop-body {
  background:
    linear-gradient(180deg, rgba(4, 13, 20, .42) 0, rgba(5, 13, 20, .76) 320px, rgba(5, 13, 20, .92) 100%),
    url("/static/zoo-command-backdrop.png");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

html[data-theme="dark"] .dashboard-backdrop-body::before {
  background:
    radial-gradient(circle at 72% 12%, rgba(20, 184, 166, .22), transparent 30%),
    linear-gradient(90deg, rgba(5, 13, 20, .9), rgba(5, 13, 20, .64));
}

html[data-theme="dark"] .dashboard-backdrop-body .sidebar,
html[data-theme="dark"] .dashboard-backdrop-body .topbar,
html[data-theme="dark"] .dashboard-backdrop-body .panel,
html[data-theme="dark"] .dashboard-backdrop-body .kpi-card,
html[data-theme="dark"] .dashboard-backdrop-body .source-card {
  background: rgba(9, 20, 34, .88);
  backdrop-filter: blur(14px);
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.table-scroll .wide-notification-table {
  min-width: 1120px;
  width: max-content;
}

.table-scroll .iot-notification-table {
  min-width: 1360px;
}

.table-scroll .wide-notification-table th,
.table-scroll .wide-notification-table td {
  min-width: 96px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.table-scroll .wide-notification-table th {
  white-space: nowrap;
}

.warehouse-command-strip,
.warehouse-heatmap-layout,
.warehouse-settings-tables {
  display: grid;
  gap: 18px;
}

.warehouse-command-strip {
  margin-bottom: 18px;
}

.warehouse-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr)) auto auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.warehouse-filter-bar label,
.warehouse-settings-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.warehouse-filter-bar input,
.warehouse-filter-bar select,
.warehouse-settings-grid input,
.warehouse-settings-grid select,
.warehouse-settings-grid textarea {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--panel-soft);
  font: inherit;
  text-transform: none;
}

.warehouse-heatmap-layout {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-bottom: 18px;
}

.warehouse-map-panel,
.warehouse-side-panel,
.heatmap-ai-card,
.camera-health-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.warehouse-map-panel {
  overflow: hidden;
}

.warehouse-map-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.warehouse-map-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.warehouse-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-live-chip span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 7px rgba(16, 185, 129, .14);
}

.warehouse-map-shell {
  padding: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(135deg, rgba(78, 125, 150, .08), rgba(255, 132, 75, .05)), var(--panel-soft);
}

.warehouse-floor-grid {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  min-width: 1080px;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(25, 28, 50, .18);
  border-radius: 8px;
  background: #f8fafc;
}

.warehouse-floor-plan,
.warehouse-zone-svg,
#heatmapCanvas,
.zone-label-layer {
  position: absolute;
  inset: 0;
}

.warehouse-floor-plan {
  background: linear-gradient(90deg, rgba(148, 163, 184, .18) 1px, transparent 1px) 0 0 / 6.25% 100%, linear-gradient(0deg, rgba(148, 163, 184, .18) 1px, transparent 1px) 0 0 / 100% 11.11%, #f8fafc;
}

.dock-row {
  position: absolute;
  right: 4%;
  bottom: 7%;
  width: 22%;
  height: 13%;
  border: 2px solid #334155;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(51, 65, 85, .12) 0 12px, rgba(51, 65, 85, .04) 12px 24px);
}

.aisle-lines {
  position: absolute;
  left: 31%;
  top: 15%;
  width: 31%;
  height: 44%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

.aisle-lines span {
  border: 1px solid rgba(51, 65, 85, .34);
  background: rgba(226, 232, 240, .62);
}

.forklift-lane,
.pedestrian-lane,
.packing-line {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.forklift-lane {
  left: 37%;
  right: 6%;
  bottom: 20%;
  height: 9%;
  border: 2px dashed rgba(239, 68, 68, .65);
}

.pedestrian-lane {
  left: 5%;
  right: 29%;
  bottom: 11%;
  height: 6%;
  border: 2px dashed rgba(14, 165, 233, .55);
}

.packing-line {
  right: 8%;
  top: 18%;
  width: 16%;
  height: 29%;
  border: 2px solid rgba(245, 158, 11, .54);
  background: rgba(245, 158, 11, .08);
}

.warehouse-zone-svg {
  z-index: 2;
}

.zone-shape {
  fill: rgba(78, 125, 150, .08);
  stroke: rgba(25, 28, 50, .48);
  stroke-width: .45;
}

.zone-critical {
  fill: rgba(239, 68, 68, .1);
  stroke: rgba(185, 28, 28, .72);
}

.zone-major {
  fill: rgba(249, 115, 22, .09);
  stroke: rgba(194, 65, 12, .68);
}

.zone-minor {
  fill: rgba(234, 179, 8, .08);
  stroke: rgba(161, 98, 7, .6);
}

.zone-warning {
  fill: rgba(214, 158, 0, .06);
  stroke: rgba(161, 98, 7, .48);
}

#heatmapCanvas {
  z-index: 3;
  width: 100%;
  height: 100%;
}

.zone-label-layer {
  z-index: 4;
  pointer-events: none;
}

.zone-label {
  position: absolute;
  min-width: 92px;
  max-width: 180px;
  padding: 7px 9px;
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
  backdrop-filter: blur(8px);
}

.zone-label strong,
.zone-label span {
  display: block;
}

.zone-label strong {
  font-size: 12px;
}

.zone-label span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 14px 18px 18px;
}

.heatmap-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.heatmap-legend i,
.heatmap-color-preview i {
  display: inline-block;
  width: 28px;
  height: 10px;
  border-radius: 999px;
}

.heatmap-legend strong {
  margin-left: auto;
  font-size: 12px;
}

.warehouse-side-panel {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, 1fr) minmax(280px, .9fr);
  gap: 16px;
  padding: 14px;
}

.heatmap-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.heatmap-kpi-grid div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.heatmap-kpi-grid span,
.camera-health-card span,
.camera-health-card small,
.warehouse-zone-ranking span,
.implementation-grid span {
  color: var(--muted);
  font-size: 12px;
}

.heatmap-kpi-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 24px;
}

.heatmap-ai-card,
.camera-health-list {
  padding: 14px;
  box-shadow: none;
}

.panel-head.compact {
  padding: 0;
  margin-bottom: 12px;
  border: 0;
}

.heatmap-ai-card p {
  color: var(--muted);
  line-height: 1.55;
}

.camera-health-card {
  display: grid;
  gap: 7px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.camera-health-card:first-of-type {
  border-top: 0;
}

.camera-health-card em {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.camera-health-card.stale em,
.camera-health-card.offline em {
  background: #fff7ed;
  color: #c2410c;
}

.warehouse-zone-ranking {
  display: grid;
  gap: 10px;
}

.warehouse-zone-ranking article {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.zone-score-bars {
  display: grid;
  gap: 8px;
}

.zone-score-bars span {
  display: grid;
  grid-template-columns: 82px 1fr 36px;
  gap: 9px;
  align-items: center;
}

.zone-score-bars i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
  clip-path: inset(0 calc(100% - var(--score)) 0 0 round 999px);
}

.warehouse-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.warehouse-settings-grid fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.warehouse-settings-grid legend {
  padding: 0 8px;
  color: var(--text);
  font-weight: 900;
}

.warehouse-settings-grid .full {
  grid-column: 1 / -1;
}

.heatmap-color-preview,
.implementation-grid {
  display: grid;
  gap: 10px;
}

.heatmap-color-preview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.heatmap-color-preview i {
  width: 100%;
  height: 36px;
  border: 1px solid rgba(15, 23, 42, .12);
}

.warehouse-settings-tables {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.warehouse-implementation-card {
  grid-column: 1 / -1;
}

.implementation-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.implementation-grid span {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.implementation-grid strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

html[data-theme="dark"] .warehouse-filter-bar,
html[data-theme="dark"] .warehouse-map-panel,
html[data-theme="dark"] .warehouse-side-panel,
html[data-theme="dark"] .heatmap-ai-card,
html[data-theme="dark"] .camera-health-list {
  background: rgba(18, 24, 38, .94);
}

html[data-theme="dark"] .warehouse-floor-plan {
  background: linear-gradient(90deg, rgba(148, 163, 184, .14) 1px, transparent 1px) 0 0 / 6.25% 100%, linear-gradient(0deg, rgba(148, 163, 184, .14) 1px, transparent 1px) 0 0 / 100% 11.11%, #111827;
}

html[data-theme="dark"] .zone-label {
  background: rgba(17, 24, 39, .84);
}

@media (max-width: 1180px) {
  .warehouse-filter-bar,
  .warehouse-heatmap-layout,
  .warehouse-side-panel,
  .warehouse-settings-grid,
  .warehouse-settings-tables,
  .implementation-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-floor-grid {
    min-width: 980px;
    min-height: 552px;
  }

  .warehouse-zone-ranking article {
    grid-template-columns: 1fr;
  }
}
.vms-workspace-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: #102a43;
  background: linear-gradient(135deg, #ffffff 0%, #eaf3ff 100%);
  box-shadow: var(--shadow-sm);
}

.vms-workspace-hero .eyebrow {
  color: #31577f;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.vms-workspace-hero h2 {
  margin: 5px 0 7px;
  color: #102a43;
}

.vms-workspace-hero > div:first-child > p {
  max-width: 740px;
  margin: 0;
  color: #526d88;
  line-height: 1.55;
}

.vms-workspace-health {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  padding: 12px 14px;
  border: 1px solid #c9d8e9;
  border-radius: 14px;
  color: #102a43;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.vms-workspace-health strong,
.vms-workspace-health small {
  display: block;
}

.vms-workspace-health p {
  margin: 3px 0 0;
  color: #52708f;
  font-size: 11px;
}

.vms-workspace-health small {
  margin-top: 2px;
  color: #526d88;
}

html[data-theme="dark"] .vms-workspace-hero h2 {
  color: #102a43;
}

html[data-theme="dark"] .vms-workspace-hero .eyebrow {
  color: #31577f;
}

html[data-theme="dark"] .vms-workspace-health strong {
  color: #102a43;
}

.vms-studio {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: start;
}

.vms-camera-library,
.vms-player-desk,
.vms-bookmark-browser {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.vms-camera-library > header,
.vms-bookmark-browser > header,
.workspace-bookmark-composer > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.vms-camera-library > header > div,
.vms-bookmark-browser > header > div,
.workspace-bookmark-composer > header > div,
.vms-desk-heading > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.vms-camera-library > header h3,
.vms-bookmark-browser > header h3,
.vms-desk-heading h3,
.workspace-bookmark-composer > header h3 {
  margin: 0;
}

.vms-camera-library > header p,
.vms-bookmark-browser > header p,
.vms-desk-heading p,
.workspace-bookmark-composer > header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.camera-count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 12px;
  font-weight: 800;
}

.vms-camera-library,
.vms-bookmark-browser {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 108px);
  overflow: hidden;
}

.vms-library-header,
.vms-bookmark-header,
.vms-desk-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vms-library-header,
.vms-bookmark-header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.vms-library-header h2,
.vms-bookmark-header h2,
.vms-desk-heading h2,
.workspace-bookmark-composer h3,
.workspace-recording-empty h3 {
  margin: 0;
}

.vms-library-header p,
.vms-bookmark-header p,
.vms-desk-heading p,
.workspace-bookmark-composer p,
.workspace-recording-empty p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.studio-panel-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 12px;
  font-weight: 800;
}

.vms-camera-search {
  position: relative;
  margin: 14px 16px 10px;
}

.camera-library-search {
  position: relative;
  display: block;
  margin: 14px 16px 10px;
}

.camera-library-search .action-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--muted);
  transform: translateY(-50%);
}

.camera-library-search input {
  width: 100%;
  padding-left: 38px;
}

.vms-camera-search .ui-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--muted);
  transform: translateY(-50%);
}

.vms-camera-search input {
  width: 100%;
  padding-left: 38px;
}

.vms-camera-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 260px);
  padding: 4px 12px 16px;
  overflow-y: auto;
}

.vms-camera-card {
  display: grid;
  grid-template-columns: 8px 34px minmax(0, 1fr) 12px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--text);
  background: var(--surface-subtle);
  text-align: left;
  cursor: grab;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.vms-camera-card:hover {
  border-color: rgba(25, 109, 231, 0.35);
  color: #102a43;
  background: #fff;
  box-shadow: 0 7px 18px rgba(32, 51, 82, 0.08);
  transform: translateY(-1px);
}

.vms-camera-card.is-selected {
  border-color: rgba(25, 109, 231, 0.48);
  background: var(--primary-soft);
}

.vms-camera-card.selected {
  border-color: rgba(25, 109, 231, 0.48);
  background: var(--primary-soft);
}

.vms-camera-card.is-dragging {
  opacity: 0.55;
}

.vms-camera-card.dragging {
  opacity: 0.55;
}

.camera-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.camera-status-dot.online,
.camera-status-dot.recording {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(21, 156, 102, 0.12);
}

.camera-card-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #ffffff;
  background: #1769d8;
  box-shadow: 0 6px 16px rgba(23, 105, 216, 0.28);
}

.camera-card-icon .action-icon {
  width: 18px;
  height: 18px;
}

.camera-card-copy {
  min-width: 0;
}

.camera-card-copy strong,
.camera-card-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-card-copy strong {
  font-size: 13px;
}

.camera-card-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.camera-drag-handle {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: -2px;
}

.camera-library-empty {
  padding: 24px 15px;
  color: var(--muted);
  text-align: center;
}

.camera-library-empty .action-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
}

.camera-library-empty strong,
.camera-library-empty p {
  display: block;
}

.camera-library-empty p {
  margin: 5px 0 12px;
  font-size: 12px;
  line-height: 1.45;
}

.vms-camera-library > footer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
}

.vms-camera-library > footer .action-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.vms-camera-library > footer p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.vms-camera-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--primary);
  background: #fff;
}

.vms-camera-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.vms-camera-copy {
  min-width: 0;
}

.vms-camera-copy strong,
.vms-camera-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vms-camera-copy strong {
  font-size: 13px;
}

.vms-camera-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.vms-camera-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(21, 156, 102, 0.12);
}

.vms-library-empty,
.vms-bookmark-empty {
  padding: 22px 18px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.vms-player-desk {
  padding: 20px;
  border-color: #263c59;
  background: linear-gradient(180deg, rgba(16, 31, 52, 0.96), rgba(8, 20, 36, 0.96));
}

.vms-desk-heading {
  margin-bottom: 16px;
}

.desk-camera-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  color: #146c4c;
  background: #e9f8f1;
  font-size: 12px;
  font-weight: 750;
}

.desk-camera-status .vms-camera-status {
  width: 7px;
  height: 7px;
  box-shadow: none;
}

.desk-camera-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.desk-camera-status i.online,
.desk-camera-status i.recording {
  background: var(--success);
}

.vms-drop-player {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-height: 410px;
  overflow: hidden;
  border: 2px solid #17243a;
  border-radius: 18px 18px 0 0;
  color: #fff;
  background:
    radial-gradient(circle at 50% 18%, rgba(52, 92, 155, 0.26), transparent 42%),
    #07101f;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.vms-drop-player.drag-over {
  border-color: #4d9aff;
  box-shadow: 0 0 0 5px rgba(77, 154, 255, 0.16);
}

.vms-drop-player video {
  display: block;
  width: 100%;
  min-height: 410px;
  max-height: 64vh;
  object-fit: contain;
  background: #050b14;
}

.vms-drop-placeholder {
  display: grid;
  place-items: center;
  min-height: 406px;
  padding: 32px;
  text-align: center;
}

.vms-drop-placeholder .ui-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  color: #73aefb;
}

.vms-drop-placeholder .action-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  color: #73aefb;
}

.vms-drop-placeholder h3 {
  margin: 0;
  font-size: 18px;
}

.vms-drop-placeholder p {
  max-width: 390px;
  margin: 7px auto 0;
  color: #9eacc2;
  font-size: 13px;
  line-height: 1.55;
}

.vms-drop-placeholder strong {
  display: block;
  font-size: 18px;
}

.vms-drop-placeholder span {
  display: block;
  max-width: 390px;
  margin-top: 7px;
  color: #9eacc2;
  font-size: 13px;
  line-height: 1.55;
}

.workspace-video-meta {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(6, 14, 28, 0.76);
  backdrop-filter: blur(8px);
}

.workspace-video-meta strong,
.workspace-video-meta span {
  display: block;
}

.workspace-video-meta strong {
  font-size: 13px;
}

.workspace-video-meta span {
  margin-top: 2px;
  color: #aebbd0;
  font-size: 11px;
}

.workspace-video-loading {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(4, 10, 20, 0.72);
  backdrop-filter: blur(3px);
}

.workspace-video-loading[hidden] {
  display: none;
}

.workspace-video-loading.is-visible {
  display: grid;
}

.workspace-video-loading > div {
  text-align: center;
}

.workspace-video-loading > .video-loading-spinner {
  grid-row: 1;
  margin: 0 auto 12px;
}

.workspace-video-loading > div p {
  margin: 5px 0 0;
  color: #aebbd0;
  font-size: 12px;
}

.workspace-video-loading span {
  display: block;
  margin-top: 12px;
  color: #d4deed;
  font-size: 13px;
}

.workspace-playback-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 10px;
  border-right: 1px solid #263c59;
  border-left: 1px solid #263c59;
  border-radius: 0;
  background: var(--surface-subtle);
}

.workspace-control-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: #fff;
  font-weight: 750;
  cursor: pointer;
}

.workspace-playback-controls > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #173b63;
  background: #f8fbff;
  font-weight: 750;
  cursor: pointer;
}

.workspace-playback-controls > button:hover {
  border-color: rgba(25, 109, 231, 0.38);
  color: #0d56b5;
  background: #e9f3ff;
}

.workspace-playback-controls > button .action-icon {
  width: 17px;
  height: 17px;
  color: #1769d8;
}

.pause-symbol {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -2px;
}

.stop-symbol {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: currentColor;
}

.workspace-control-button:hover {
  border-color: rgba(25, 109, 231, 0.38);
  color: var(--primary);
}

.workspace-control-button .ui-icon {
  width: 17px;
  height: 17px;
}

.workspace-playhead {
  min-width: 0;
  margin-left: 5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.workspace-playhead small,
.workspace-playhead strong {
  display: block;
}

.workspace-playhead strong {
  margin-top: 2px;
  color: var(--text);
}

.workspace-bookmark-button {
  margin-left: auto;
}

.workspace-playback-controls .bookmark-control {
  margin-left: auto;
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.workspace-timebar {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(120px, .7fr) minmax(145px, .8fr);
  gap: 10px;
  align-items: end;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 13px 14px 14px;
  border: 1px solid #263c59;
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: #0d1b2e;
}

.workspace-timebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  min-height: 24px;
  padding-right: 4px;
  color: #dce8f6;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.workspace-timebar-title .action-icon {
  width: 18px;
  height: 18px;
  color: #73aefb;
}

.workspace-timebar label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.workspace-timebar label > span {
  color: #aebfd3;
  font-size: 10px;
  font-weight: 800;
}

.workspace-timebar input,
.workspace-timebar select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  color: #f4f8fd;
  border-color: #304966;
  background: #091628;
}

.workspace-timebar .button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 40px;
  justify-content: center;
  gap: 6px;
  padding-inline: 10px;
  white-space: nowrap;
  font-size: 12px;
}
.workspace-archive-timeline {
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  color: #dbeafe;
  background: #071426;
  border: 1px solid #203653;
  border-top: 0;
}
.workspace-timeline-labels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  color: #93a8c3;
  font-size: 11px;
}
.workspace-timeline-labels strong { color: #eaf2ff; text-align: center; }
.workspace-timeline-labels span:last-child { text-align: right; }
.workspace-archive-timeline .nx-availability-key { color: #a8bad1; }

.vms-drop-player:not(.has-video) + .workspace-timebar {
  margin-top: 12px;
  border-top: 1px solid #263c59;
  border-radius: 14px;
}

.workspace-jump-form {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--surface-subtle);
}

.workspace-jump-form {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) minmax(175px, 1fr) minmax(120px, 0.72fr) 172px;
  gap: 10px;
  align-items: end;
}

.workspace-jump-form > .button {
  width: 100%;
  min-width: 172px;
  box-sizing: border-box;
  gap: 6px;
  padding-inline: 10px;
  justify-content: center;
  white-space: nowrap;
  font-size: 13px;
}

html[data-theme="dark"] .workspace-playback-controls > button:not(.bookmark-control) {
  color: #173b63;
  border-color: #d2dfed;
  background: #f8fbff;
}

html[data-theme="dark"] .workspace-playback-controls > button:not(.bookmark-control):hover {
  color: #0d56b5;
  border-color: #73aefb;
  background: #e9f3ff;
}

.jump-form-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.jump-form-heading .action-icon {
  width: 19px;
  height: 19px;
  color: var(--primary);
}

.jump-form-heading strong,
.jump-form-heading small {
  display: block;
}

.jump-form-heading small {
  margin-top: 2px;
  color: var(--muted);
}

.workspace-jump-form > label,
.workspace-bookmark-composer form > label,
.bookmark-search-form > label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.workspace-jump-form input,
.workspace-jump-form select,
.workspace-bookmark-composer form input,
.bookmark-search-form input,
.bookmark-search-form select {
  width: 100%;
}

.workspace-form-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.workspace-form-heading .ui-icon {
  width: 19px;
  height: 19px;
  color: var(--primary);
}

.workspace-form-heading strong,
.workspace-form-heading small {
  display: block;
}

.workspace-form-heading small {
  margin-top: 2px;
  color: var(--muted);
}

.workspace-jump-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(145px, 0.8fr) minmax(125px, 0.7fr) 105px auto;
  gap: 10px;
  align-items: end;
}

.workspace-jump-grid label,
.workspace-bookmark-grid label {
  min-width: 0;
}

.workspace-jump-grid input,
.workspace-jump-grid select,
.workspace-bookmark-grid input,
.workspace-bookmark-grid select,
.vms-bookmark-search input,
.vms-bookmark-search select {
  width: 100%;
}

.workspace-recording-empty {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #f1d8a6;
  border-radius: 13px;
  background: #fff9e9;
}

.workspace-recording-empty .ui-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #ad6b00;
}

.workspace-recording-empty h3 {
  font-size: 14px;
}

.workspace-recording-empty p {
  line-height: 1.5;
}

.workspace-bookmark-composer {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(25, 109, 231, 0.24);
  border-radius: 18px;
  background: linear-gradient(145deg, #f8fbff, #eef5ff);
}

.workspace-bookmark-composer[hidden] {
  display: none;
}

.workspace-bookmark-composer > header {
  margin: -18px -18px 0;
}

.workspace-bookmark-composer > header > button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.74);
  font-size: 21px;
  cursor: pointer;
}

.workspace-bookmark-composer form {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 165px;
  gap: 12px;
  margin-top: 15px;
}

.workspace-bookmark-label,
.workspace-bookmark-preview,
.workspace-bookmark-actions {
  grid-column: 1 / -1;
}

.duration-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.duration-presets button {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

.workspace-bookmark-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.workspace-bookmark-heading > .ui-icon {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.workspace-bookmark-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) minmax(190px, 1fr) 120px;
  gap: 11px;
  margin-top: 15px;
}

.workspace-duration-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.workspace-duration-presets button {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.workspace-duration-presets button:hover,
.workspace-duration-presets button.is-active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.workspace-bookmark-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #34506f;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.workspace-bookmark-preview .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.workspace-bookmark-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 13px;
}

.vms-bookmark-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 14px 14px 8px;
}

.bookmark-search-form {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.bookmark-search-input {
  position: relative;
}

.bookmark-search-input .action-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transform: translateY(-50%);
}

.bookmark-search-input input {
  padding-left: 35px;
}

.bookmark-search-form .button {
  justify-content: center;
  padding-inline: 10px;
}

.bookmark-search-error {
  display: flex;
  gap: 8px;
  margin: 0 14px 10px;
  padding: 10px;
  border-radius: 10px;
  color: #9b2f28;
  background: #fff0ef;
}

.bookmark-search-error .action-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.bookmark-search-error p {
  margin: 0;
  font-size: 12px;
}

.vms-bookmark-search select {
  grid-column: 1 / -1;
}

.vms-bookmark-search button {
  min-width: 42px;
}

.vms-bookmark-error {
  margin: 8px 14px;
  padding: 10px;
  border-radius: 10px;
  color: #9b2f28;
  background: #fff0ef;
  font-size: 12px;
}

.vms-bookmark-results {
  display: grid;
  gap: 9px;
  max-height: calc(100vh - 320px);
  padding: 8px 12px 16px;
  overflow-y: auto;
}

.bookmark-results {
  display: grid;
  gap: 9px;
  max-height: calc(100vh - 430px);
  padding: 8px 12px 16px;
  overflow-y: auto;
}

.bookmark-results-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 5px;
}

.bookmark-results-heading strong {
  font-size: 12px;
}

.bookmark-results-heading span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.bookmark-result-card {
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: var(--surface-subtle);
}

.bookmark-result-card:hover {
  border-color: rgba(25, 109, 231, 0.32);
  color: #102a43;
  background: #fff;
}

.bookmark-result-card > header,
.bookmark-result-time {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.bookmark-result-card > header > .action-icon,
.bookmark-result-time > .action-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #1769d8;
}

.bookmark-result-card strong,
.bookmark-result-card small {
  display: block;
}

.bookmark-result-card strong {
  font-size: 13px;
}

.bookmark-result-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.bookmark-result-time {
  margin-top: 10px;
  padding: 8px;
  color: #102a43;
  border: 1px solid #d8e4f0;
  border-radius: 9px;
  background: #fff;
}

.bookmark-result-time strong {
  color: #102a43;
}

.bookmark-result-time small {
  color: #526d88;
}

html[data-theme="dark"] .bookmark-result-time,
html[data-theme="dark"] .bookmark-result-time strong,
html[data-theme="dark"] .bookmark-result-card:hover,
html[data-theme="dark"] .bookmark-result-card:hover strong,
html[data-theme="dark"] .vms-camera-card:hover,
html[data-theme="dark"] .vms-camera-card:hover strong {
  color: #102a43;
}

html[data-theme="dark"] .bookmark-result-time small,
html[data-theme="dark"] .bookmark-result-card:hover small,
html[data-theme="dark"] .vms-camera-card:hover small {
  color: #526d88;
}

.vms-drop-player:not(.has-video) {
  border-radius: 18px;
}

.bookmark-result-card > p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.bookmark-result-card .button {
  width: 100%;
  margin-top: 11px;
  justify-content: center;
}

.bookmark-results-empty {
  padding: 28px 16px;
  color: var(--muted);
  text-align: center;
}

.bookmark-results-empty .action-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 9px;
}

.bookmark-results-empty strong {
  display: block;
  color: var(--text);
}

.bookmark-results-empty p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.vms-bookmark-result {
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: var(--surface-subtle);
}

.vms-bookmark-result:hover {
  border-color: rgba(25, 109, 231, 0.32);
  background: #fff;
}

.vms-bookmark-result strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.vms-bookmark-result-meta {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
}

.vms-bookmark-result-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vms-bookmark-result-meta .ui-icon {
  width: 14px;
  height: 14px;
}

.vms-bookmark-result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.vms-bookmark-result-tags span {
  padding: 3px 7px;
  border-radius: 999px;
  color: #45617f;
  background: #e8f0fa;
  font-size: 10px;
}

.vms-bookmark-result .button {
  width: 100%;
  margin-top: 11px;
  justify-content: center;
}

@media (max-width: 1150px) {
  .vms-studio {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .vms-bookmark-browser {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }

  .vms-bookmark-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
  }
}

@media (max-width: 1050px) {
  .vms-studio {
    grid-template-columns: 1fr;
  }

  .vms-camera-library,
  .vms-bookmark-browser {
    position: static;
    max-height: none;
  }

  .vms-camera-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 270px;
  }

  .vms-bookmark-browser {
    grid-column: auto;
  }

  .workspace-jump-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-jump-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-jump-grid .button {
    width: 100%;
  }

  .workspace-jump-form .button {
    width: 100%;
    justify-content: center;
  }

  .workspace-timebar {
    grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr) minmax(145px, .7fr);
  }

  .workspace-timebar .button {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .vms-workspace-hero {
    flex-direction: column;
  }

  .vms-workspace-health {
    width: 100%;
  }

  .vms-player-desk {
    padding: 14px;
  }

  .vms-camera-list,
  .vms-bookmark-results,
  .bookmark-results,
  .workspace-jump-grid,
  .workspace-jump-form,
  .workspace-bookmark-grid,
  .workspace-bookmark-composer form {
    grid-template-columns: 1fr;
  }

  .workspace-bookmark-label,
  .workspace-bookmark-preview,
  .workspace-bookmark-actions {
    grid-column: auto;
  }

  .workspace-timebar {
    grid-template-columns: 1fr;
  }

  .workspace-timebar-title,
  .workspace-timebar .button {
    grid-column: auto;
  }

  .vms-drop-player,
  .vms-drop-player video,
  .vms-drop-placeholder {
    min-height: 270px;
  }

  .workspace-playback-controls {
    flex-wrap: wrap;
  }

  .workspace-playhead {
    order: 3;
    width: 100%;
    margin: 3px 4px 0;
  }

  .workspace-bookmark-button {
    margin-left: auto;
  }

  .workspace-bookmark-actions {
    flex-direction: column-reverse;
  }

  .workspace-bookmark-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* Compact IoT monitoring workspace */
.sensor-device {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 340px);
  gap: 14px 18px;
  align-items: stretch;
  padding: 16px 18px;
}

.sensor-device-head {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.sensor-device-head > div {
  min-width: 0;
}

.sensor-device-head strong {
  font-size: 16px;
}

.sensor-device-head > div > span {
  margin-top: 3px;
}

.sensor-device > .device-meta-grid {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  gap: 10px;
  margin: 0;
}

.sensor-device > .device-meta-grid span {
  min-width: 0;
  min-height: 66px;
  align-content: center;
  padding: 10px 12px;
}

.sensor-device > .device-meta-grid strong {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sensor-device > .sensor-card-grid {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: 1fr;
}

.sensor-device .sensor-card {
  min-height: 0;
  padding: 13px 15px;
  align-content: start;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.sensor-device .sensor-card-head > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.sensor-reading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sensor-reading-row > strong {
  font-size: 27px;
}

.sensor-reading-row > em {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--panel-soft);
  text-transform: none;
}

.sensor-card-details {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 8px;
}

.sensor-card-details > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.sensor-card-details small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sensor-card-details b {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sensor-device .sensor-inspect-link {
  justify-self: stretch;
  justify-content: center;
  margin-top: 0;
}

html[data-theme="dark"] .sensor-device .sensor-card {
  background: #0d192b;
}

html[data-theme="dark"] .sensor-reading-row > em,
html[data-theme="dark"] .sensor-card-details > span {
  background: var(--panel-soft);
  border-color: var(--line);
}

.sensor-device .sensor-card.warning,
.sensor-device .sensor-card.minor {
  border-color: rgba(249, 115, 22, .68);
  background: linear-gradient(135deg, rgba(249, 115, 22, .15), #fff 62%);
  box-shadow: inset 4px 0 0 #f97316, 0 8px 20px rgba(249, 115, 22, .1);
}

.sensor-device .sensor-card.warning .sensor-reading-row > em,
.sensor-device .sensor-card.minor .sensor-reading-row > em {
  color: #c2410c;
  background: #ffedd5;
  border: 1px solid #fdba74;
}

.sensor-device .sensor-card.major,
.sensor-device .sensor-card.critical {
  border-color: rgba(239, 68, 68, .72);
  background: linear-gradient(135deg, rgba(239, 68, 68, .16), #fff 62%);
  box-shadow: inset 4px 0 0 #ef4444, 0 8px 20px rgba(239, 68, 68, .11);
}

.sensor-device .sensor-card.major .sensor-reading-row > em,
.sensor-device .sensor-card.critical .sensor-reading-row > em {
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fca5a5;
}

html[data-theme="dark"] .sensor-device .sensor-card.warning,
html[data-theme="dark"] .sensor-device .sensor-card.minor {
  border-color: rgba(251, 146, 60, .72);
  background: linear-gradient(135deg, rgba(154, 52, 18, .4), #0d192b 68%);
  box-shadow: inset 4px 0 0 #fb923c, 0 8px 22px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .sensor-device .sensor-card.warning .sensor-reading-row > em,
html[data-theme="dark"] .sensor-device .sensor-card.minor .sensor-reading-row > em {
  color: #fed7aa;
  background: rgba(154, 52, 18, .65);
  border-color: rgba(251, 146, 60, .6);
}

html[data-theme="dark"] .sensor-device .sensor-card.major,
html[data-theme="dark"] .sensor-device .sensor-card.critical {
  border-color: rgba(248, 113, 113, .75);
  background: linear-gradient(135deg, rgba(127, 29, 29, .48), #0d192b 68%);
  box-shadow: inset 4px 0 0 #f87171, 0 8px 22px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .sensor-device .sensor-card.major .sensor-reading-row > em,
html[data-theme="dark"] .sensor-device .sensor-card.critical .sensor-reading-row > em {
  color: #fecaca;
  background: rgba(127, 29, 29, .72);
  border-color: rgba(248, 113, 113, .62);
}

@media (max-width: 1050px) {
  .sensor-device {
    grid-template-columns: 1fr;
  }

  .sensor-device > .device-meta-grid,
  .sensor-device > .sensor-card-grid {
    grid-column: 1;
    grid-row: auto;
  }

  .sensor-device > .sensor-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 720px) {
  .sensor-device {
    padding: 14px;
  }

  .sensor-device > .device-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .sensor-device > .device-meta-grid,
  .sensor-card-details {
    grid-template-columns: 1fr;
  }
}

/* Keep a single IoT investigation camera compact and visually balanced. */
.iot-inspection-camera-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 460px));
  justify-content: start;
  align-items: start;
}

.iot-inspection-camera {
  width: 100%;
  max-width: 460px;
}

.iot-camera-preview {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #bae6fd;
  background: linear-gradient(145deg, #17263c, #164e63);
}

.iot-camera-preview svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iot-camera-preview small {
  color: #bae6fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .iot-inspection-camera-grid {
    grid-template-columns: 1fr;
  }
}

.iot-reading-summary.warning,
.iot-reading-summary.minor {
  border-color: rgba(251, 146, 60, .78);
  background: linear-gradient(135deg, rgba(154, 52, 18, .74), rgba(124, 45, 18, .42));
  box-shadow: inset 4px 0 0 #fb923c;
}

.iot-reading-summary.warning em,
.iot-reading-summary.minor em {
  color: #fed7aa;
}

.iot-reading-summary.major,
.iot-reading-summary.critical {
  border-color: rgba(248, 113, 113, .82);
  background: linear-gradient(135deg, rgba(127, 29, 29, .82), rgba(69, 10, 10, .48));
  box-shadow: inset 4px 0 0 #f87171;
}

.iot-reading-summary.major em,
.iot-reading-summary.critical em {
  color: #fecaca;
}

.iot-reading-summary.cleared {
  border-color: rgba(52, 211, 153, .68);
  background: linear-gradient(135deg, rgba(6, 95, 70, .62), rgba(6, 78, 59, .34));
  box-shadow: inset 4px 0 0 #34d399;
}

/* Canonical severity accents for monitoring cards. */
.sensor-device .sensor-card.warning { border-color: var(--severity-warning); box-shadow: inset 4px 0 0 var(--severity-warning), 0 8px 20px rgba(234, 179, 8, .1); }
.sensor-device .sensor-card.minor { border-color: var(--severity-minor); box-shadow: inset 4px 0 0 var(--severity-minor), 0 8px 20px rgba(245, 158, 11, .1); }
.sensor-device .sensor-card.major { border-color: var(--severity-major); box-shadow: inset 4px 0 0 var(--severity-major), 0 8px 20px rgba(239, 68, 68, .11); }
.sensor-device .sensor-card.critical { border-color: var(--severity-critical); box-shadow: inset 4px 0 0 var(--severity-critical), 0 8px 20px rgba(220, 38, 38, .12); }
.sensor-device .sensor-card.warning .sensor-reading-row > em { color: var(--severity-warning-text); background: var(--severity-warning-soft); border-color: var(--severity-warning); }
.sensor-device .sensor-card.minor .sensor-reading-row > em { color: var(--severity-minor-text); background: var(--severity-minor-soft); border-color: var(--severity-minor); }
.sensor-device .sensor-card.major .sensor-reading-row > em { color: var(--severity-major-text); background: var(--severity-major-soft); border-color: var(--severity-major); }
.sensor-device .sensor-card.critical .sensor-reading-row > em { color: var(--severity-critical-text); background: var(--severity-critical-soft); border-color: var(--severity-critical); }
.iot-reading-summary.warning { border-color: var(--severity-warning); box-shadow: inset 4px 0 0 var(--severity-warning); }
.iot-reading-summary.minor { border-color: var(--severity-minor); box-shadow: inset 4px 0 0 var(--severity-minor); }
.iot-reading-summary.major { border-color: var(--severity-major); box-shadow: inset 4px 0 0 var(--severity-major); }
.iot-reading-summary.critical { border-color: var(--severity-critical); box-shadow: inset 4px 0 0 var(--severity-critical); }

/* Device floor-layout viewer and editor */
.device-layout-heading { align-items: end; }
.device-layout-page-title { font-size: clamp(28px, 3vw, 42px) !important; line-height: 1.08; letter-spacing: -.025em; }
.device-layout-toolbar,
.device-layout-selector,
.device-layout-selector label { display: flex; align-items: end; gap: 10px; }
.device-layout-selector label { color: var(--muted); font-size: 11px; font-weight: 800; flex-direction: column; align-items: start; text-transform: uppercase; }
.device-layout-selector select { min-width: min(360px, 55vw); }
.device-layout-statusbar { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(190px, auto); gap: 1px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--border); }
.device-layout-statusbar > div { min-width: 0; padding: 12px 16px; background: var(--panel); }
.device-layout-statusbar span,
.device-layout-statusbar strong { display: block; }
.device-layout-statusbar span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.device-layout-statusbar strong { margin-top: 3px; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.device-layout-statusbar .device-layout-live { display: flex; align-items: center; gap: 9px; }
.device-layout-live i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.12); animation: layout-live-pulse 2s ease-in-out infinite; }
.device-layout-live span { color: #15803d; }
@keyframes layout-live-pulse { 50% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }
.device-layout-editor-grid { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
.device-layout-editor-main { min-width: 0; }
.device-layout-palette { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.device-layout-palette h3 { display: flex; align-items: center; gap: 7px; margin: 18px 0 8px; color: var(--text); font-size: 13px; }
.layout-palette-list { display: grid; gap: 7px; }
.layout-palette-device { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-soft); cursor: grab; user-select: none; }
.layout-palette-device:active { cursor: grabbing; }
.layout-palette-device > b { display: grid; width: 32px; height: 32px; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: #2563eb; }
.layout-palette-list + h3 + .layout-palette-list .layout-palette-device > b,
.layout-palette-device[data-device-type="iot"] > b { background: #7c3aed; }
.layout-palette-device span,
.layout-palette-device strong,
.layout-palette-device small { display: block; min-width: 0; }
.layout-palette-device span { overflow: hidden; }
.layout-palette-device strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.layout-palette-device small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.layout-editor-help { margin: 18px 0 0; padding: 10px; border-radius: 9px; color: var(--muted); font-size: 11px; line-height: 1.5; background: var(--panel-soft); }
.device-layout-stage-panel { overflow: visible; }
.device-layout-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 11px; }
.device-layout-legend span { display: flex; align-items: center; gap: 5px; }
.device-layout-legend i { width: 9px; height: 9px; border-radius: 50%; background: #2563eb; }
.device-layout-legend i.iot { background: #7c3aed; }
.device-layout-legend i.alarm { background: var(--severity-critical); box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
.device-layout-viewport { width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: 14px; background: #07111f; }
.device-layout-canvas { position: relative; width: 100%; min-width: 520px; max-height: calc(100vh - 250px); overflow: visible; background-color: #142238; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }
.device-layout-canvas.is-editing { outline: 2px dashed rgba(96,165,250,.65); outline-offset: -8px; }
.layout-canvas-empty { position: absolute; inset: 20%; display: grid; place-items: center; align-content: center; gap: 8px; padding: 20px; border: 1px dashed rgba(255,255,255,.3); border-radius: 16px; color: #dbeafe; text-align: center; background: rgba(15,23,42,.72); pointer-events: none; }
.layout-canvas-empty b { width: 42px; height: 42px; }
.layout-canvas-empty .action-icon { width: 42px; height: 42px; }
.layout-canvas-empty span { color: #93c5fd; font-size: 12px; }
.layout-marker { --layout-alert-color: var(--severity-indeterminate); position: absolute; z-index: 3; transform: translate(-50%, -50%); }
.layout-marker-pin { position: relative; display: grid; min-width: 84px; max-width: 150px; justify-items: center; gap: 3px; padding: 6px 8px; border: 1px solid rgba(147,197,253,.75); border-radius: 11px; color: #fff; background: rgba(15,23,42,.9); box-shadow: 0 6px 20px rgba(0,0,0,.28); cursor: pointer; }
.layout-marker.type-iot .layout-marker-pin { border-color: rgba(196,181,253,.78); }
.layout-marker-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.18); }
.layout-marker.type-iot .layout-marker-icon { background: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.18); }
.layout-marker-icon .action-icon { width: 17px; height: 17px; }
.layout-marker-device-type { color: #bfdbfe; font-size: 8px; font-weight: 900; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.layout-marker.type-iot .layout-marker-device-type { color: #ddd6fe; }
.layout-marker-name { display: block; width: 100%; overflow: hidden; font-size: 10px; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.layout-marker-alert { display: block; max-width: 134px; padding: 3px 6px; overflow: hidden; border-radius: 999px; color: #fff; font-size: 9px; font-weight: 900; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; background: var(--layout-alert-color); }
.layout-marker-alert.is-hidden { display: none; }
.layout-marker.severity-critical { --layout-alert-color: var(--severity-critical); }
.layout-marker.severity-major { --layout-alert-color: var(--severity-major); }
.layout-marker.severity-minor { --layout-alert-color: var(--severity-minor); }
.layout-marker.severity-warning { --layout-alert-color: var(--severity-warning); }
.layout-marker.severity-cleared { --layout-alert-color: var(--severity-cleared); }
.layout-marker.severity-critical .layout-marker-pin,
.layout-marker.severity-major .layout-marker-pin,
.layout-marker.severity-minor .layout-marker-pin,
.layout-marker.severity-warning .layout-marker-pin,
.layout-marker.severity-indeterminate .layout-marker-pin,
.layout-marker.severity-cleared .layout-marker-pin { border-color: var(--layout-alert-color); }
.layout-marker.severity-minor .layout-marker-alert { color: var(--severity-minor-text); }
.layout-marker.severity-warning .layout-marker-alert { color: var(--severity-warning-text); }
.layout-marker.severity-cleared .layout-marker-alert { color: var(--severity-cleared-text); }
.layout-marker.is-alerting .layout-marker-pin { animation: layout-alarm-blink 1s ease-in-out infinite; }
.layout-marker.is-alerting .layout-marker-icon { background: var(--layout-alert-color); box-shadow: 0 0 0 5px color-mix(in srgb, var(--layout-alert-color) 28%, transparent); }
@keyframes layout-alarm-blink { 50% { transform: scale(1.08); box-shadow: 0 0 0 8px color-mix(in srgb, var(--layout-alert-color) 24%, transparent), 0 8px 28px rgba(0,0,0,.35); } }
.layout-marker-remove { position: absolute; z-index: 6; top: -10px; right: -10px; display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 15px; line-height: 1; background: #dc2626; cursor: pointer; }
.device-layout-canvas.is-editing .layout-marker { cursor: grab; }
.device-layout-canvas.is-editing .layout-marker:active { cursor: grabbing; }
.layout-device-popover { position: absolute; z-index: 20; left: calc(100% + 10px); top: 50%; width: 270px; padding: 12px; border: 1px solid #334155; border-radius: 13px; color: #e2e8f0; background: #0f172a; box-shadow: 0 18px 45px rgba(0,0,0,.42); transform: translateY(-50%); }
.layout-device-popover[hidden] { display: none; }
.layout-device-popover header { display: grid; grid-template-columns: 34px minmax(0,1fr) 25px; gap: 8px; align-items: center; }
.layout-device-popover header > b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #fff; background: #2563eb; }
.layout-device-popover header strong,
.layout-device-popover header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-device-popover header strong { font-size: 13px; }
.layout-device-popover header small { margin-top: 2px; color: #94a3b8; font-size: 10px; }
.layout-popover-close { padding: 0; border: 0; color: #94a3b8; font-size: 20px; background: transparent; cursor: pointer; }
.layout-popover-notification { margin: 11px 0; padding: 9px; border-left: 3px solid var(--severity-indeterminate); border-radius: 8px; background: #1e293b; }
.layout-popover-notification.severity-critical { border-color: var(--severity-critical); }
.layout-popover-notification.severity-major { border-color: var(--severity-major); }
.layout-popover-notification.severity-minor { border-color: var(--severity-minor); }
.layout-popover-notification.severity-warning { border-color: var(--severity-warning); }
.layout-popover-notification span,
.layout-popover-notification strong,
.layout-popover-notification small { display: block; }
.layout-popover-notification span { color: #94a3b8; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.layout-popover-notification strong { margin-top: 3px; font-size: 12px; }
.layout-popover-notification small { margin-top: 3px; color: #94a3b8; font-size: 10px; }
.layout-popover-notification .layout-severity-badge { display: inline-flex; width: fit-content; margin-top: 8px; }
.layout-popover-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.device-layout-savebar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 13px; padding: 11px 13px; border-radius: 11px; background: var(--panel-soft); }
.device-layout-savebar span,
.device-layout-savebar strong,
.device-layout-savebar small { display: block; }
.device-layout-savebar strong { color: var(--text); font-size: 12px; }
.device-layout-savebar small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.device-layout-settings,
.device-layout-create { margin-top: 16px; }
.device-layout-delete { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }

@media (max-width: 980px) {
  .device-layout-statusbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-layout-statusbar .device-layout-live { grid-column: 1 / -1; }
  .device-layout-editor-grid { grid-template-columns: 1fr; }
  .device-layout-palette { position: static; max-height: none; }
  .layout-palette-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .device-layout-heading,
  .device-layout-toolbar { align-items: stretch; }
  .device-layout-toolbar { width: 100%; flex-direction: column; }
  .device-layout-selector,
  .device-layout-selector label,
  .device-layout-selector select { width: 100%; min-width: 0; }
  .device-layout-statusbar { grid-template-columns: 1fr; }
  .device-layout-statusbar .device-layout-live { grid-column: auto; }
  .layout-palette-list { grid-template-columns: 1fr; }
  .device-layout-savebar { align-items: stretch; flex-direction: column; }
  .layout-device-popover { left: 50%; top: calc(100% + 8px); transform: translateX(-50%); }
}

/* Read-only AI and IoT layout monitor */
.layout-monitor-body .main { min-height: 100vh; padding: 18px 20px 20px; }
.layout-monitor-body .topbar { min-height: 88px; margin-bottom: 12px; padding: 18px 24px; }
.layout-monitor-body .topbar h1 { font-size: 24px; }
.layout-monitor-body .topbar p { display: none; }
.layout-monitor { display: flex; min-height: calc(100vh - 138px); flex-direction: column; overflow: hidden; border: 1px solid #263b55; border-radius: 18px; background: #07111f; box-shadow: 0 22px 54px rgba(2, 8, 23, .28); }
.layout-monitor:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; border: 0; border-radius: 0; }
.layout-monitor-toolbar { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px 10px 18px; border-bottom: 1px solid #263b55; color: #e2e8f0; background: linear-gradient(100deg, #0b1b31, #102b45); }
.layout-monitor-identity { min-width: 0; }
.layout-monitor-identity strong,
.layout-monitor-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-monitor-identity strong { font-size: 16px; }
.layout-monitor-identity span { margin-top: 3px; color: #94a3b8; font-size: 11px; }
.layout-monitor-options,
.layout-monitor-selector { display: flex; align-items: center; gap: 9px; }
.layout-monitor-selector label { color: #94a3b8; font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.layout-monitor-selector select { min-width: min(340px, 36vw); border-color: #3b526d; color: #e2e8f0; background: #13263d; }
.layout-fullscreen-button { min-height: 39px; white-space: nowrap; }
.layout-monitor-viewport { display: grid; min-width: 0; min-height: 420px; flex: 1 1 auto; place-items: center; overflow: hidden; background: radial-gradient(circle at center, #152a43, #050b14 72%); }
.layout-monitor-canvas { position: relative; overflow: hidden; background-color: #142238; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; box-shadow: 0 0 0 1px rgba(148,163,184,.2), 0 20px 70px rgba(0,0,0,.48); }
.layout-monitor-marker .layout-marker-pin { min-width: clamp(74px, 6.5vw, 126px); max-width: clamp(108px, 10vw, 170px); padding: clamp(5px, .55vw, 9px); color: #050505; background: rgba(255, 255, 255, .21); box-shadow: 0 4px 12px rgba(0, 0, 0, .1); cursor: default; }
.layout-monitor-marker .layout-marker-icon { width: clamp(27px, 2.4vw, 38px); height: clamp(27px, 2.4vw, 38px); }
.layout-monitor-marker .layout-marker-icon .action-icon { width: clamp(15px, 1.5vw, 22px); height: clamp(15px, 1.5vw, 22px); }
.layout-monitor-marker .layout-marker-detail-link { color: #050505; cursor: pointer; transition: transform .16s ease, filter .16s ease; }
.layout-monitor-marker .layout-marker-detail-link:hover { color: #050505; filter: brightness(1.18); transform: scale(1.12); }
.layout-monitor-marker .layout-marker-detail-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.layout-monitor-marker .layout-marker-detail-link.is-disabled { cursor: default; opacity: .7; pointer-events: none; }
.layout-monitor-marker .layout-marker-name { font-size: clamp(9px, .75vw, 12px); }
.layout-monitor-marker .layout-marker-device-type,
.layout-monitor-marker .layout-marker-name { color: #050505; text-shadow: 0 1px 2px rgba(255, 255, 255, .95); }
.layout-monitor-marker .layout-marker-alert { max-width: clamp(100px, 9vw, 156px); color: #050505; font-size: clamp(8px, .65vw, 10px); }
.layout-monitor-empty { display: grid; max-width: 420px; justify-items: center; gap: 10px; padding: 30px; color: #e2e8f0; text-align: center; }
.layout-monitor-empty svg { width: 54px; height: 54px; color: #60a5fa; }
.layout-monitor-empty span { color: #94a3b8; font-size: 12px; line-height: 1.6; }

@media (max-width: 860px) {
  .layout-monitor-body .main { padding: 12px; }
  .layout-monitor { min-height: calc(100vh - 126px); }
  .layout-monitor-toolbar { align-items: stretch; flex-direction: column; gap: 9px; }
  .layout-monitor-options,
  .layout-monitor-selector { width: 100%; }
  .layout-monitor-selector { flex: 1; }
  .layout-monitor-selector select { width: 100%; min-width: 0; }
}

@media (max-width: 520px) {
  .layout-monitor-options { align-items: stretch; flex-direction: column; }
  .layout-fullscreen-button { width: 100%; }
  .layout-monitor-viewport { min-height: 360px; }
}

/* Visual polish for the operational dashboard, alarm queue, and reports. */
.page-home .source-card,
.page-home .kpi-card,
.page-dashboard .source-card,
.page-dashboard .kpi-card,
.page-dashboard .dashboard-chart,
.page-dashboard .recent-panel,
.page-dashboard .type-panel,
.page-alarm_alarms .panel,
.page-alarm_reports .panel,
.page-standard_reports .panel {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.page-home .source-card:hover,
.page-home .kpi-card:hover,
.page-dashboard .source-card:hover,
.page-dashboard .kpi-card:hover,
.page-dashboard .dashboard-chart:hover,
.page-alarm_alarms .panel:hover,
.page-alarm_reports .panel:hover,
.page-standard_reports .panel:hover {
  border-color: color-mix(in srgb, #3b82f6 46%, var(--line));
  box-shadow: 0 18px 38px rgba(15, 23, 42, .12);
  transform: translateY(-2px);
}

:is(.page-home, .page-dashboard) .kpi-card { --visual-accent: #2563eb; border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, #dbeafe), var(--panel)); }
:is(.page-home, .page-dashboard) .kpi-card.red { --visual-accent: #ef4444; }
:is(.page-home, .page-dashboard) .kpi-card.purple { --visual-accent: #8b5cf6; }
:is(.page-home, .page-dashboard) .kpi-card.green { --visual-accent: #16a34a; }
:is(.page-home, .page-dashboard) .kpi-card.teal { --visual-accent: #0d9488; }
:is(.page-home, .page-dashboard) .kpi-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--visual-accent), color-mix(in srgb, var(--visual-accent) 20%, transparent)); }
:is(.page-home, .page-dashboard) .kpi-card::after { content: ""; position: absolute; top: -42px; right: -38px; width: 105px; height: 105px; border-radius: 50%; background: color-mix(in srgb, var(--visual-accent) 9%, transparent); pointer-events: none; }
:is(.page-home, .page-dashboard) .kpi-icon { box-shadow: 0 8px 18px color-mix(in srgb, var(--visual-accent) 18%, transparent); }
.page-dashboard .dashboard-chart,
.page-dashboard .recent-panel,
.page-dashboard .type-panel { overflow: hidden; border-radius: 17px; background: linear-gradient(155deg, color-mix(in srgb, var(--panel) 97%, #dbeafe), var(--panel)); }
.page-dashboard .dashboard-chart .panel-head,
.page-dashboard .recent-panel .panel-head,
.page-dashboard .type-panel .panel-head { margin: -20px -20px 18px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, #2563eb 8%, var(--panel)), transparent); }
.page-dashboard .donut-ring { filter: drop-shadow(0 12px 18px rgba(15, 23, 42, .12)); transition: transform .28s ease; }
.page-dashboard .dashboard-chart:hover .donut-ring { transform: scale(1.035) rotate(1deg); }

.page-alarm_alarms .alarm-page-heading,
.page-alarm_reports .alarm-page-heading,
.page-standard_reports .workspace-heading {
  position: relative;
  min-height: 132px;
  align-items: center;
  padding: 24px 28px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, .3);
  border-radius: 20px;
  color: #fff;
  background: radial-gradient(circle at 88% 20%, rgba(45, 212, 191, .3), transparent 25%), linear-gradient(125deg, #091a35, #123f67 62%, #0f766e);
  box-shadow: 0 20px 46px rgba(8, 25, 46, .22);
}
.page-alarm_alarms .alarm-page-heading::after,
.page-alarm_reports .alarm-page-heading::after,
.page-standard_reports .workspace-heading::after { content: ""; position: absolute; right: 6%; bottom: -76px; width: 190px; height: 190px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255,255,255,.035), 0 0 0 50px rgba(255,255,255,.025); pointer-events: none; }
.page-alarm_alarms .alarm-page-heading > div,
.page-alarm_reports .alarm-page-heading > div,
.page-standard_reports .workspace-heading > div { position: relative; z-index: 1; }
.page-alarm_alarms .alarm-page-heading h2,
.page-alarm_reports .alarm-page-heading h2,
.page-standard_reports .workspace-heading h2 { color: #fff; font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.025em; }
.page-alarm_alarms .alarm-page-heading p,
.page-alarm_reports .alarm-page-heading p,
.page-standard_reports .workspace-heading p { color: #cfe8ff; }
.page-alarm_alarms .alarm-page-heading .eyebrow,
.page-alarm_reports .alarm-page-heading .eyebrow,
.page-standard_reports .workspace-heading .eyebrow { color: #5eead4; }

.page-alarm_alarms .filter-panel,
.page-alarm_reports .alarm-report-builder,
.page-standard_reports .report-filter-panel { border-top: 3px solid #38bdf8; background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 95%, #dbeafe), var(--panel)); }
.page-alarm_alarms .alarm-table thead,
.page-alarm_reports .alarm-table thead,
.page-standard_reports table thead { background: linear-gradient(90deg, color-mix(in srgb, #2563eb 12%, var(--panel-soft)), color-mix(in srgb, #14b8a6 8%, var(--panel-soft))); }
.page-alarm_alarms .alarm-table tbody tr,
.page-alarm_reports .alarm-table tbody tr,
.page-standard_reports table tbody tr { transition: background .16s ease, transform .16s ease; }
.page-alarm_alarms .alarm-table tbody tr:hover,
.page-alarm_reports .alarm-table tbody tr:hover,
.page-standard_reports table tbody tr:hover { background: color-mix(in srgb, #3b82f6 8%, var(--panel)); }
.page-standard_reports .report-infographic { position: relative; overflow: hidden; border-top: 3px solid #14b8a6; background: radial-gradient(circle at 95% 0, rgba(20,184,166,.12), transparent 24%), var(--panel); }
.page-standard_reports .report-bar-row { padding: 6px 9px; border-radius: 9px; transition: background .16s ease; }
.page-standard_reports .report-bar-row:hover { background: color-mix(in srgb, #3b82f6 7%, transparent); }
.page-standard_reports .report-bar-row > div { height: 15px; box-shadow: inset 0 1px 2px rgba(15,23,42,.12); }
.page-standard_reports .report-bar-row i { position: relative; overflow: hidden; animation: report-bar-reveal .7s ease both; }
.page-standard_reports .report-bar-row i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 48%, transparent 75%); transform: translateX(-110%); animation: report-bar-shine 2.8s ease-in-out infinite 1s; }
@keyframes report-bar-reveal { from { transform: scaleX(0); transform-origin: left; } }
@keyframes report-bar-shine { 55%, 100% { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .page-standard_reports .report-bar-row i,
  .page-standard_reports .report-bar-row i::after { animation: none; }
}

@media (max-width: 680px) {
  .page-alarm_alarms .alarm-page-heading,
  .page-alarm_reports .alarm-page-heading,
  .page-standard_reports .workspace-heading { min-height: 0; padding: 22px; }
}
.face-record-list { display: grid; gap: 8px; }
.face-record { overflow: visible; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 4px 12px rgba(15, 23, 42, .04); }
.face-record.is-updating { opacity: .7; pointer-events: none; }
.face-row-feedback { padding: 5px 10px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; }
.face-row-feedback.success { color: #047857; background: #ecfdf5; }
.face-row-feedback.failed { color: #be123c; background: #fff1f2; }
.face-filter-toolbar { display: grid; grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(145px, .75fr)) auto; gap: 8px; align-items: end; }
.face-filter-toolbar label { display: grid; gap: 4px; margin: 0; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.face-filter-toolbar input, .face-filter-toolbar select { width: 100%; min-width: 0; }
.face-filter-actions { display: flex; gap: 5px; align-items: center; }
.face-record-list + .pagination { margin-top: 10px; }
.panel-head + .pagination { margin: 6px 10px 10px; }
.face-record-summary { display: grid; grid-template-columns: minmax(235px, 1fr) minmax(180px, .8fr) minmax(285px, 1fr) minmax(250px, auto); gap: 12px; align-items: center; min-height: 72px; padding: 8px 10px; }
.face-record-identity { display: flex; gap: 12px; align-items: center; min-width: 0; }
.face-row-number { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--panel-soft); font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.face-record-identity .face-thumb { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 9px; object-fit: cover; }
.face-record-identity h3 { margin: 0 0 3px; font-size: 15px; line-height: 1.25; }
.face-record-identity small, .face-record-assignment small { display: block; margin-top: 4px; color: var(--muted); }
.face-person-id { display: inline-block; color: var(--accent); font-size: 13px; font-weight: 800; user-select: all; }
.face-record-assignment { display: grid; gap: 2px; min-width: 0; }
.face-record-assignment > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.face-record-assignment strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.face-coverage-summary { display: grid; grid-template-columns: auto auto 1fr; gap: 5px 14px; align-items: center; }
.face-coverage-summary > div { display: flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.face-coverage-summary > div strong { font-size: 18px; }
.face-coverage-summary > div span:not(.badge), .face-coverage-summary > small { color: var(--muted); font-size: 11px; }
.face-coverage-summary > small { grid-column: 1 / -1; }
.face-record-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.face-record-actions form, .face-device-actions form { margin: 0; }
.face-more-actions { position: relative; }
.face-more-actions > summary { list-style: none; cursor: pointer; }
.face-more-actions > summary::-webkit-details-marker { display: none; }
.face-more-actions > div { position: absolute; z-index: 6; top: calc(100% + 5px); right: 0; display: grid; gap: 6px; min-width: 160px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.face-more-actions > div .button { width: 100%; }
.face-device-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 6px; padding: 6px 10px 8px; border-top: 1px solid var(--line); }
.face-device-chip { display: grid; gap: 3px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); }
.face-device-chip-head { display: flex; gap: 5px; align-items: center; min-width: 0; }
.face-device-chip-head strong { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.face-device-chip-head form { flex: 0 0 auto; margin: 0; }
.button.micro { min-height: 24px; padding: 3px 7px; border-radius: 6px; font-size: 10px; line-height: 1; }
.face-device-chip-meta, .face-device-chip-status { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.face-device-chip-meta { color: var(--muted); font-size: 10px; }
.face-device-chip-meta span + span::before { content: "·"; margin-right: 8px; }
.face-device-chip-meta code { margin-left: auto; color: var(--text); font-weight: 800; user-select: all; }
.face-device-chip-status .badge { padding: 2px 6px; font-size: 9px; }
.face-device-chip-status small { flex: 1 1 100%; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] .face-record { box-shadow: none; }
@media (max-width: 1180px) {
  .face-filter-toolbar { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
  .face-filter-search { grid-column: span 2; }
  .face-record-summary { grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr) auto; }
  .face-record-assignment { display: none; }
}
@media (max-width: 820px) {
  .face-filter-toolbar { grid-template-columns: 1fr 1fr; }
  .face-filter-search { grid-column: 1 / -1; }
  .face-record-summary { grid-template-columns: 1fr; gap: 10px; }
  .face-record-actions { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .face-filter-toolbar { grid-template-columns: 1fr; }
  .face-filter-search { grid-column: auto; }
  .face-coverage-summary { grid-template-columns: 1fr; }
  .face-device-strip { grid-template-columns: 1fr; }
}