/* ==========================================================================
   Swiss OMS Ai - page components (built on the tokens in oms.css)
   ========================================================================== */

/* ---------- Shared helpers ---------- */
.oms-bare { min-height: 100dvh; background: var(--oms-bg); }
.status-text { max-width: 46ch; }
.fs-md { font-size: var(--fs-md); }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.table tr.is-disabled > * { opacity: .55; }
.table tr.is-overridden > * { opacity: .7; }
.table tr.is-failed th { color: var(--st-offline); }
.skeleton-label { display: block; height: 12px; width: 50%; }
.skeleton-value { display: block; height: 28px; width: 70%; }
.role-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--oms-surface-3); color: var(--oms-text-2); font-size: var(--fs-micro); font-weight: 600; }
.tel-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--oms-font-mono); font-size: var(--fs-sm); white-space: nowrap; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.check-list li { display: flex; gap: 8px; align-items: flex-start; }

/* password rules */
.password-rules { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--oms-muted); }
.password-rules li { display: flex; gap: 6px; align-items: center; transition: color var(--dur-fast); }
.password-rules li.pass { color: var(--st-online); }

/* stat tiles */
.site-stats, .device-summary { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.stat-tile {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); text-align: left;
  border-radius: var(--radius); background: var(--oms-surface); border: 1px solid var(--oms-border);
  border-left: 3px solid var(--tile-color, var(--oms-border-strong)); color: var(--oms-text); font: inherit;
}
button.stat-tile { cursor: pointer; transition: background var(--dur-fast); }
button.stat-tile:hover { background: var(--oms-hover); }
.stat-tile.is-good { --tile-color: var(--st-online); }
.stat-tile.is-warn { --tile-color: var(--st-degraded); }
.stat-tile.is-bad { --tile-color: var(--st-offline); }
.stat-label { display: block; font-size: var(--fs-xs); color: var(--oms-muted); font-weight: 500; }
.stat-value { display: block; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-sub { display: block; font-size: var(--fs-xs); color: var(--oms-faint); }
.stat-bar { display: block; height: 4px; border-radius: 4px; background: var(--oms-surface-3); overflow: hidden; margin-top: 4px; }
.stat-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--bar-color, var(--st-online)); }
.stat-bar.is-good { --bar-color: var(--st-online); }
.stat-bar.is-warn { --bar-color: var(--st-degraded); }
.stat-bar.is-bad { --bar-color: var(--st-offline); }

/* generic list rows */
.list { list-style: none; margin: 0; padding: 0; }
.list-row {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--oms-border); color: var(--oms-text); text-decoration: none;
}
.list > :last-child > .list-row, .list > .list-row:last-child { border-bottom: 0; }
a.list-row:hover, button.list-row:hover { background: var(--oms-hover); color: var(--oms-text); }
.list-row .prio-bar { align-self: stretch; }
.list-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.list-row-title { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-sub { font-size: var(--fs-xs); color: var(--oms-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-side { flex: 0 0 auto; color: var(--oms-muted); text-align: right; }
.panel-body > .list .list-row { padding-inline: 0; }

/* ---------- Core Overview ---------- */
.ov-kpis { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ov-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; align-items: start; }
.ov-grid > .panel + .panel { margin-top: 0; }
.ov-status { grid-column: span 7; }
.ov-gauge { grid-column: span 5; }
.ov-briefing { grid-column: span 5; }
.ov-trend { grid-column: span 7; }
.ov-feed { grid-column: span 5; }
.ov-signals { grid-column: span 7; }
.ov-busy { grid-column: span 5; }
.ov-attention { grid-column: span 6; }
.ov-detections { grid-column: span 6; }
.ov-performance { grid-column: 1 / -1; }
.ov-feed .panel-scroll, .ov-feed.panel-scroll, .ov-feed .feed { max-height: 520px; overflow-y: auto; }
@media (max-width: 1199.98px) { .ov-grid > .panel { grid-column: 1 / -1; } }
.compact-kpis { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.compact-kpis .kpi { padding: var(--sp-3); box-shadow: none; background: var(--oms-surface-2); }
.compact-kpis .kpi-value { font-size: var(--fs-xl); }
.status-overview { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.status-big { display: flex; flex-direction: column; line-height: 1.05; }
.status-big-value { font-size: 2.6rem; font-weight: 750; letter-spacing: -0.04em; background: var(--oms-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.status-big-label { font-size: var(--fs-xs); color: var(--oms-muted); }
.clamp-briefing { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.live-pill.is-stale { color: var(--st-degraded); background: color-mix(in srgb, var(--st-degraded) 14%, transparent); }

/* ---------- Dashboard (legacy layout classes) ---------- */
.dash-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dash-grid > .panel + .panel { margin-top: 0; }
.dash-chart { grid-column: span 6; }
.dash-recent, .dash-attention { grid-column: span 6; }
.dash-grid > .panel:only-child { grid-column: 1 / -1; }
.dash-recent .panel-scroll, .dash-attention .panel-scroll { max-height: 420px; }
.chart-box { position: relative; height: 280px; }
.chart-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
@media (max-width: 1199.98px) { .dash-chart, .dash-recent, .dash-attention { grid-column: 1 / -1; } }
.quick-links { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.quick-link {
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border-radius: var(--radius);
  border: 1px solid var(--oms-border); color: var(--oms-text); text-decoration: none; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.quick-link:hover { border-color: var(--oms-accent); background: var(--oms-accent-soft); color: var(--oms-text); }
.quick-icon { flex: 0 0 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--oms-accent-soft); color: var(--oms-accent); font-size: 1.1rem; }
.quick-title { display: block; font-weight: 600; font-size: var(--fs-sm); }
.quick-text { display: block; font-size: var(--fs-xs); color: var(--oms-muted); }

/* ---------- Portal ---------- */
.site-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.site-card {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius);
  background: var(--oms-surface-2); border: 1px solid var(--oms-border); border-top: 3px solid var(--card-color, var(--st-unknown));
}
.site-card.is-online { --card-color: var(--st-online); }
.site-card.is-degraded { --card-color: var(--st-degraded); }
.site-card.is-offline { --card-color: var(--st-offline); }
.site-card.is-disabled { --card-color: var(--st-disabled); }
.site-card-head { display: flex; align-items: flex-start; gap: var(--sp-2); justify-content: space-between; }
.site-card-title { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.site-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.site-card-stats .stat-value { font-size: var(--fs-lg); }
.site-card-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; }
.portal-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.portal-grid > .panel + .panel { margin-top: 0; }

/* ---------- Alarm queue ---------- */
.queue-stats { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.queue-stat {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border-radius: var(--radius); text-align: left;
  background: var(--oms-surface); border: 1px solid var(--oms-border); color: var(--oms-text); font: inherit; cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.queue-stat:hover { background: var(--oms-hover); }
.queue-stat[aria-pressed="true"] { border-color: var(--oms-accent); background: var(--oms-accent-soft); }
.queue-stat.is-static { cursor: default; }
.queue-stat.is-static:hover { background: var(--oms-surface); }
.queue-stat.is-alert { border-color: var(--pr-critical); background: color-mix(in srgb, var(--pr-critical) 10%, var(--oms-surface)); }
.queue-stat.is-alert .queue-stat-value { color: var(--pr-critical); }
.queue-stat-value { font-size: var(--fs-2xl); font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.queue-stat-value.mono { font-size: var(--fs-xl); }
.queue-stat-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--oms-muted); }
.status-dot.p-critical { background: var(--pr-critical); }
.status-dot.p-high { background: var(--pr-high); }
.status-dot.p-medium { background: var(--pr-medium); }
.status-dot.p-low { background: var(--pr-low); }
.queue-list { display: flex; flex-direction: column; }
.sound-menu { min-width: 260px; }
body.drawer-open { overflow: hidden; }

.alarm-card {
  display: flex; align-items: stretch; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4);
  background: transparent; border: 0; border-bottom: 1px solid var(--oms-border); color: var(--oms-text);
  text-align: left; font: inherit; cursor: pointer; transition: background var(--dur-fast);
}
.alarm-card:hover { background: var(--oms-hover); }
.alarm-card.selected { background: var(--oms-accent-soft); box-shadow: inset 3px 0 0 var(--oms-accent); }
.alarm-card .prio-bar { background: var(--prio, var(--pr-info)); }
.alarm-card.is-unacked .alarm-card-title { font-weight: 650; }
.alarm-card.is-unacked.prio-critical { background: color-mix(in srgb, var(--pr-critical) 7%, transparent); }
.alarm-card.is-acked { opacity: .85; }
.alarm-card .thumb { align-self: center; }
.thumb-empty { display: inline-grid; place-items: center; color: var(--oms-faint); font-size: 1.2rem; }
.alarm-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.alarm-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.alarm-card-top .sla { margin-left: auto; }
.alarm-card-title { display: block; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alarm-card-meta { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: var(--fs-xs); color: var(--oms-muted); min-width: 0; }
.alarm-card-foot { display: flex; align-items: center; gap: var(--sp-2); }

.sla { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--oms-text-2); white-space: nowrap; }
.sla.is-met { color: var(--oms-muted); font-weight: 500; }
.sla.is-warning { color: var(--pr-medium); }
.sla.is-breached { color: var(--pr-critical); animation: oms-pulse 1.2s ease-in-out infinite; }
@keyframes oms-pulse { 50% { opacity: .45; } }

/* ---------- Alarm detail ---------- */
.alarm-detail { display: flex; flex-direction: column; gap: var(--sp-4); }
.alarm-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.alarm-title { font-size: var(--fs-xl); font-weight: 650; margin: 0; letter-spacing: -0.01em; }
.alarm-sub { color: var(--oms-muted); font-size: var(--fs-sm); margin: 0; }
.alarm-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.drawer .alarm-grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 991.98px) { .alarm-grid { grid-template-columns: minmax(0, 1fr); } }
.alarm-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.alarm-media { display: flex; flex-direction: column; }
.alarm-section { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--oms-surface-2); border: 1px solid var(--oms-border); }
.alarm-section-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--oms-muted); margin: 0 0 var(--sp-2); }
.ai-explanation { margin: 0; font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.instructions { margin: 0; font-size: var(--fs-sm); padding-left: var(--sp-3); border-left: 3px solid var(--pr-medium); }
.armed-response { padding: var(--sp-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--pr-high) 10%, transparent); border: 1px solid color-mix(in srgb, var(--pr-high) 30%, transparent); }
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.contact-list > li { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 0; border-bottom: 1px solid var(--oms-border); }
.contact-list > li:last-child { border-bottom: 0; }
.contact-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.contact-actions { display: flex; gap: 4px; align-items: center; }
.alarm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.alarm-actions-bar {
  position: sticky; bottom: 0; z-index: 5; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--oms-surface) 92%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--oms-border); border-radius: var(--radius); box-shadow: var(--oms-shadow);
}
.alarm-actions-bar:empty { display: none; }

/* ---------- Markdown ---------- */
.md { font-size: var(--fs-sm); line-height: 1.6; overflow-wrap: anywhere; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 var(--sp-2); }
.md-heading { font-size: var(--fs-md); font-weight: 650; margin: var(--sp-3) 0 var(--sp-2); }
.md-list { margin: 0 0 var(--sp-2); padding-left: 1.25rem; }
.md-list li + li { margin-top: 2px; }
.md code { font-family: var(--oms-font-mono); font-size: .92em; padding: 1px 5px; border-radius: 4px; background: var(--oms-surface-3); color: var(--oms-text); }
.md-code { margin: 0 0 var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--oms-surface-3); overflow-x: auto; font-size: var(--fs-xs); }
.md-code code { padding: 0; background: none; }
.md-table { margin-bottom: var(--sp-2); }

/* ---------- Live wall ---------- */
.wall-app {
  --tree-w: 272px;
  --side-w: 290px;
  flex: 1 1 auto; display: grid; min-height: 0; height: calc(100dvh - var(--topbar-h));
  grid-template-columns: var(--tree-w) minmax(0, 1fr); background: var(--oms-bg);
}
.wall-app.has-side { grid-template-columns: var(--tree-w) minmax(0, 1fr) var(--side-w); }
.wall-app.tree-hidden { grid-template-columns: minmax(0, 1fr); }
.wall-app.tree-hidden.has-side { grid-template-columns: minmax(0, 1fr) var(--side-w); }
.wall-app.tree-hidden .wall-tree { display: none; }
.wall-app.is-popout, .wall-app.is-fullscreen { height: 100dvh; }
.wall-app.is-fullscreen .wall-toolbar { opacity: 0; transition: opacity var(--dur); }
.wall-app.is-fullscreen .wall-toolbar:hover, .wall-app.is-fullscreen .wall-toolbar:focus-within { opacity: 1; }
@media (max-width: 767.98px) {
  .wall-app, .wall-app.has-side { grid-template-columns: minmax(0, 1fr); height: auto; }
  .wall-tree { max-height: 40dvh; }
}

.wall-tree { display: flex; flex-direction: column; min-height: 0; background: var(--oms-surface); border-right: 1px solid var(--oms-border); }
.wall-tree-head { display: flex; align-items: center; gap: 4px; padding: var(--sp-2); border-bottom: 1px solid var(--oms-border); }
.wall-tree-head .search-input { flex: 1 1 auto; }
.wall-tree-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 0 var(--sp-2); }
.wall-tree-foot { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--oms-border); }
.tree-customer { position: sticky; top: 0; z-index: 1; padding: 8px var(--sp-3) 4px; background: var(--oms-surface); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oms-faint); }
.tree-site-line { display: flex; align-items: center; padding-right: 4px; }
.tree-site-line:hover { background: var(--oms-hover); }
.tree-site {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px var(--sp-2);
  background: none; border: 0; color: var(--oms-text); font: inherit; font-size: var(--fs-sm); text-align: left;
}
.tree-chevron { font-size: 10px; color: var(--oms-faint); transition: transform var(--dur-fast); }
.tree-site[aria-expanded="true"] .tree-chevron { transform: rotate(90deg); }
.tree-site-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tree-alarm { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--pr-critical); color: #fff; font-size: var(--fs-micro); font-weight: 700; }
.tree-count { font-size: var(--fs-micro); color: var(--oms-muted); }
.tree-add { opacity: 0; }
.tree-site-line:hover .tree-add, .tree-add:focus-visible { opacity: 1; }
.tree-cameras { list-style: none; margin: 0; padding: 0 0 4px; }
.tree-camera {
  width: 100%; display: flex; align-items: center; gap: 6px; padding: 4px var(--sp-3) 4px 34px;
  background: none; border: 0; color: var(--oms-text-2); font: inherit; font-size: var(--fs-xs); text-align: left; cursor: grab;
}
.tree-camera:hover { background: var(--oms-hover); color: var(--oms-text); }
.tree-camera.is-on-wall { color: var(--oms-accent); }
.tree-camera.is-disabled { opacity: .5; cursor: not-allowed; }
.tree-camera-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-flag { color: var(--oms-faint); }
.tree-channel { font-size: var(--fs-micro); color: var(--oms-faint); }
.tree-loading { padding: 4px var(--sp-3) 4px 34px; font-size: var(--fs-xs); color: var(--oms-muted); }

.wall-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wall-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: 6px var(--sp-3); background: var(--oms-surface); border-bottom: 1px solid var(--oms-border); }
.wall-toolbar-sep { width: 1px; height: 22px; background: var(--oms-border); }
.wall-stats { white-space: nowrap; font-variant-numeric: tabular-nums; }
.layouts-menu { min-width: 260px; max-height: 60vh; overflow-y: auto; }
.layout-item { display: flex; align-items: center; gap: var(--sp-2); }
.layout-item .dropdown-item { flex: 1 1 auto; min-width: 0; }

.wall-grid {
  --wall-cols: 3;
  --wall-rows: 3;
  flex: 1 1 auto; min-height: 0; display: grid; gap: 2px; padding: 2px; background: #000;
  grid-template-columns: repeat(var(--wall-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--wall-rows), minmax(0, 1fr));
}
@media (max-width: 767.98px) { .wall-grid { grid-template-rows: none; grid-auto-rows: auto; } .wall-tile { aspect-ratio: 16 / 9; } }
.wall-tile {
  position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--oms-video-bg);
  outline: 1px solid transparent; outline-offset: -1px; container-type: size;
}
.wall-tile:focus-visible { outline: 2px solid var(--oms-focus); outline-offset: -2px; }
.wall-tile.is-selected { outline: 2px solid var(--oms-accent); outline-offset: -2px; }
.wall-tile.is-bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-offline) 60%, transparent); }
.wall-tile.is-flash { animation: tile-flash 1.2s ease-out 2; }
.wall-tile.is-alarm { animation: tile-alarm 1s ease-in-out 6; }
@keyframes tile-flash { 0% { box-shadow: inset 0 0 0 3px var(--oms-accent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@keyframes tile-alarm { 0%, 100% { box-shadow: inset 0 0 0 3px var(--pr-critical); } 50% { box-shadow: inset 0 0 0 1px transparent; } }
.wall-tile.is-maximized { position: fixed; inset: 0; z-index: 1060; }
.wall-tile.is-dragging { opacity: .5; }
.wall-tile.is-drop-target { outline: 2px dashed var(--oms-accent); outline-offset: -4px; }
.tile-media { position: absolute; inset: 0; }
.tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--oms-video-bg); }
.tile-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.wall-tile.has-overlay .tile-overlay { display: block; }
.wall-tile.is-empty .tile-media, .wall-tile.is-empty .tile-head, .wall-tile.is-empty .tile-actions { display: none; }
.tile-empty { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #56606d; border: 1px dashed #28303a; margin: 6px; border-radius: var(--radius-sm); }
.wall-tile.is-empty .tile-empty { display: flex; }
.tile-empty .bi { font-size: 1.4rem; }
.tile-empty-title { font-size: var(--fs-xs); font-weight: 600; }
.tile-empty-sub { font-size: var(--fs-micro); }
@container (max-height: 90px) { .tile-empty-sub, .tile-empty .bi { display: none; } }

.tile-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); color: #fff; cursor: grab;
}
.tile-index { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); font-size: 10px; }
.tile-names { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.tile-title { font-size: var(--fs-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.tile-sub { font-size: var(--fs-micro); color: rgba(255, 255, 255, .7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 260px) { .tile-sub { display: none; } }
.tile-pill { flex: 0 0 auto; padding: 1px 6px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; background: rgba(255, 255, 255, .14); color: #fff; }
.tile-pill:empty { display: none; }
.tile-pill.is-live { background: #d7263d; }
.tile-pill.is-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #fff; vertical-align: 1px; }
.tile-pill.is-busy { background: rgba(53, 194, 214, .35); }
.tile-pill.is-warn { background: rgba(233, 162, 59, .8); color: #1a1204; }
.tile-pill.is-bad { background: rgba(239, 91, 91, .85); }
.tile-pill.is-muted { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); }
.tile-info { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: none; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .65); color: #cfd6de; font-size: 10px; white-space: pre; }
.wall-grid.show-info .wall-tile:not(.is-empty) .tile-info:not(:empty) { display: block; }
.tile-state { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--sp-3); text-align: center; color: #cfd6de; background: rgba(4, 7, 10, .55); }
.tile-state-icon { font-size: 1.5rem; line-height: 1; }
.tile-state-icon .spinner-border { width: 1.5rem; height: 1.5rem; border-width: .15em; }
.tile-state-text { font-size: var(--fs-xs); font-weight: 600; }
.tile-state-sub { font-size: var(--fs-micro); color: #8a96a8; max-width: 36ch; }
.tile-state-sub:empty { display: none; }
@container (max-height: 110px) { .tile-state-sub, .tile-state .cluster { display: none; } }
.tile-event { position: absolute; left: 50%; top: 32px; z-index: 3; transform: translateX(-50%); max-width: 90%; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(215, 38, 61, .9); color: #fff; font-size: var(--fs-micro); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tile-event:empty { display: none; }
.tile-actions {
  position: absolute; right: 4px; bottom: 4px; z-index: 3; display: flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity var(--dur-fast);
}
.wall-tile:hover .tile-actions, .wall-tile:focus-within .tile-actions, .wall-tile.is-selected .tile-actions { opacity: 1; }
@media (hover: none) { .tile-actions { opacity: 1; } }
.tile-btn { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #e7ecf2; font-size: 13px; }
.tile-btn:hover { background: rgba(255, 255, 255, .16); }
.tile-btn[aria-pressed="true"] { color: #5fd6e6; }
.tile-btn-text { font-size: 10px; font-weight: 700; }
@container (max-width: 200px) { .tile-actions .tile-btn:nth-child(n+4) { display: none; } }

/* PTZ side panel */
.wall-side { display: flex; flex-direction: column; min-height: 0; background: var(--oms-surface); border-left: 1px solid var(--oms-border); }
.wall-side-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--oms-border); }
.wall-side-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-3); }
.ptz-lock { margin-bottom: var(--sp-3); font-size: var(--fs-xs); }
.ptz-lock:empty { display: none; }
.ptz-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 200px; margin: 0 auto var(--sp-3); }
.ptz-pad button {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--oms-border-strong);
  background: var(--oms-surface-2); color: var(--oms-text); font-size: 1.1rem; touch-action: none; user-select: none;
}
.ptz-pad button:hover { background: var(--oms-surface-3); }
.ptz-pad button:active, .ptz-pad button.is-active { background: var(--oms-accent-soft); border-color: var(--oms-accent); }
.ptz-pad button:disabled { opacity: .45; }
.ptz-pad .ptz-stop { border-radius: 50%; color: var(--st-offline); }
.ptz-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ptz-row > span:first-child { width: 44px; }

/* playback */
.pb-layout { display: flex; flex-direction: column; gap: var(--sp-3); }
.pb-player .media-frame { aspect-ratio: 16 / 9; }
.pb-state { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: var(--sp-3); color: #cfd6de; pointer-events: none; }
.pb-state:empty { display: none; }
.pb-state > * { pointer-events: auto; }
.pb-state .empty-state { color: #cfd6de; }
.pb-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, .7); color: #e7ecf2; font-size: var(--fs-sm); }
.zones-stage-state .pb-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pb-timeline { position: relative; height: 44px; border-radius: var(--radius-sm); background: var(--oms-surface-3); cursor: pointer; user-select: none; overflow: hidden; }
.pb-timeline:focus-visible { outline: 2px solid var(--oms-focus); outline-offset: 2px; }
.pb-hours { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; }
.pb-hours span { position: absolute; bottom: 1px; transform: translateX(-50%); font-size: 9px; color: var(--oms-muted); font-family: var(--oms-font-mono); }
.pb-hours span::before { content: ""; position: absolute; left: 50%; bottom: 12px; width: 1px; height: 4px; background: var(--oms-border-strong); }
.pb-segments { position: absolute; left: 0; right: 0; top: 6px; height: 18px; }
.pb-seg { position: absolute; top: 0; bottom: 0; min-width: 1px; background: color-mix(in srgb, var(--st-online) 55%, transparent); border-radius: 2px; }
.pb-cursor { position: absolute; top: 2px; height: 26px; min-width: 2px; background: color-mix(in srgb, var(--oms-accent) 35%, transparent); border-left: 2px solid var(--oms-accent); pointer-events: none; }
.pb-hover { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--oms-text-2); pointer-events: none; }
.pb-video { background: var(--oms-video-bg); }
.pb-controls { min-width: 0; }
.pb-export { padding-top: var(--sp-3); border-top: 1px solid var(--oms-border); }

/* ---------- Tours ---------- */
.tour-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5); padding: var(--sp-4); }
.tour-ring { flex: 0 0 auto; }
.tour-summary-stats { flex: 1 1 360px; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.tour-summary-filter { flex: 0 1 260px; }
.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .ring-track { stroke: var(--oms-surface-3); }
.ring .ring-value { stroke: var(--ring-color, var(--oms-accent)); stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease); }
.tour-lanes { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1399.98px) { .tour-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .tour-lanes { grid-template-columns: minmax(0, 1fr); } }
.tour-lane { display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius); background: var(--oms-bg-raised); border: 1px solid var(--oms-border); border-top: 3px solid var(--lane-color, var(--oms-border-strong)); }
.tour-lane.lane-due { --lane-color: var(--pr-medium); }
.tour-lane.lane-progress { --lane-color: var(--oms-accent); }
.tour-lane.lane-review { --lane-color: var(--ai-pending); }
.tour-lane.lane-missed { --lane-color: var(--st-offline); }
.lane-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3); }
.lane-head h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.lane-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-2); max-height: 62vh; overflow-y: auto; }
.lane-body .empty-state { padding: var(--sp-4) var(--sp-2); }
.tour-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--oms-surface); border: 1px solid var(--oms-border); transition: border-color var(--dur-fast); }
.tour-card:hover { border-color: var(--oms-border-strong); }
.tour-card-link { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.tour-card-link:focus-visible { outline: 2px solid var(--oms-focus); outline-offset: 1px; }
.tour-card :is(a:not(.tour-card-link), button) { position: relative; z-index: 1; }
.tour-card-head { display: flex; align-items: flex-start; gap: var(--sp-2); justify-content: space-between; }
.tour-card-title { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.tour-card-meta { font-size: var(--fs-xs); color: var(--oms-muted); display: flex; flex-wrap: wrap; gap: 0 6px; }
.tour-card-stats { display: flex; flex-wrap: wrap; gap: 4px; }
.tour-card-summary { margin: 0; font-size: var(--fs-xs); color: var(--oms-text-2); }
.tour-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.tour-time { font-size: var(--fs-sm); font-weight: 600; }
.tour-window { font-size: var(--fs-micro); font-weight: 600; color: var(--oms-muted); }
.tour-window.is-upcoming { color: var(--oms-muted); }
.tour-window.is-open { color: var(--st-online); }
.tour-window.is-urgent { color: var(--pr-high); }
.tour-window.is-overdue { color: var(--pr-critical); }
.tour-window.is-done { color: var(--oms-faint); }
.done-strip { display: grid; gap: var(--sp-2); padding: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* captures (tour run + incident attachments) */
.capture-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.capture-card { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--oms-surface); border: 1px solid var(--oms-border); overflow: hidden; }
.capture-card.needs-attention { border-color: color-mix(in srgb, var(--pr-high) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pr-high) 30%, transparent); }
.capture-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.capture-open .media-frame { border-radius: 0; }
.capture-body { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.capture-note { margin: 0; font-size: var(--fs-xs); color: var(--oms-text-2); }
.lightbox-frame { aspect-ratio: auto; min-height: 240px; max-height: 72vh; }
.lightbox-frame > img { position: relative; max-height: 72vh; }

/* uploads */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--sp-5);
  border: 2px dashed var(--oms-border-strong); border-radius: var(--radius); color: var(--oms-muted); text-align: center; cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.is-over { border-color: var(--oms-accent); background: var(--oms-accent-soft); color: var(--oms-text); outline: none; }
.dropzone .bi { font-size: 1.8rem; }
.upload-grid { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.upload-grid:empty { display: none; }
.upload-item { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--oms-border); background: var(--oms-surface-2); }
.upload-item img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--oms-video-bg); }
.upload-item figcaption { display: flex; flex-direction: column; padding: 4px 6px; font-size: var(--fs-xs); min-width: 0; }
.upload-remove { position: absolute; top: 4px; right: 4px; background: rgba(0, 0, 0, .65); color: #fff; }

/* tour schedule timeline */
.timeline-head, .tl-row { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }
.timeline-head { padding: var(--sp-2) var(--sp-4) 0; }
.tl-scale { position: relative; height: 18px; }
.tl-scale span { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--oms-faint); font-family: var(--oms-font-mono); }
.tl-scale span:first-child { transform: none; }
.tl-scale span:last-child { transform: translateX(-100%); }
.tl-scale.small { height: 16px; margin-top: 4px; }
.tl-group + .tl-group { border-top: 1px solid var(--oms-border); }
.tl-group-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-1); font-weight: 600; font-size: var(--fs-sm); }
.tl-row { padding: var(--sp-2) var(--sp-4); }
.tl-row:hover { background: var(--oms-hover); }
.tl-row.is-disabled .tl-track, .tl-row.is-disabled .tl-label { opacity: .5; }
.tl-label { min-width: 0; }
.tl-track { min-width: 0; }
.tl-bar {
  position: relative; height: 22px; border-radius: 4px; background-color: var(--oms-surface-3);
  background-image: repeating-linear-gradient(90deg, var(--oms-grid-line) 0 1px, transparent 1px calc(100% / 12));
}
.tl-band { position: absolute; top: 0; bottom: 0; background: var(--oms-accent-soft); border-radius: 4px; }
.tl-slot { position: absolute; top: 4px; bottom: 4px; min-width: 2px; background: var(--oms-accent); border-radius: 2px; opacity: .85; }
.tl-actions { display: flex; align-items: center; gap: 2px; }
.tl-preview .tl-bar { height: 28px; }
@media (max-width: 991.98px) {
  .timeline-head { display: none; }
  .tl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tl-track { grid-column: 1 / -1; grid-row: 2; }
}
.camera-checklist { max-height: 220px; overflow-y: auto; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--oms-border); border-radius: var(--radius-sm); background: var(--oms-surface-2); columns: 2 220px; }
.camera-checklist .form-check { break-inside: avoid; }

/* arm / rule schedule windows */
.arm-schedule { display: flex; flex-direction: column; gap: var(--sp-2); }
.arm-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--oms-border); border-radius: var(--radius-sm); background: var(--oms-surface-2); }
.arm-days { flex: 1 1 260px; margin: 0; border: 0; padding: 0; }
.arm-days .chip-select label { min-width: 42px; justify-content: center; }
.arm-time { flex: 0 0 110px; }
.arm-time .form-label { margin-bottom: 2px; font-size: var(--fs-xs); }
.arm-hint { align-self: center; min-width: 60px; }
.arm-empty { padding: var(--sp-2) 0; }

/* ---------- Reports ---------- */
.report-layout { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: start; }
@media (max-width: 1199.98px) { .report-layout { grid-template-columns: minmax(0, 1fr); } }
.report-catalog { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.report-card {
  position: relative; display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); text-align: left;
  border-radius: var(--radius); background: var(--oms-surface); border: 1px solid var(--oms-border); color: var(--oms-text); font: inherit;
  cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.report-card:hover { border-color: var(--oms-border-strong); background: var(--oms-hover); }
.report-card.selected { border-color: var(--oms-accent); background: var(--oms-accent-soft); box-shadow: 0 0 0 1px var(--oms-accent); }
.report-card-icon { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--oms-surface-3); color: var(--oms-accent); font-size: 1.1rem; }
.report-card.selected .report-card-icon { background: var(--oms-accent); color: var(--oms-accent-ink); }
.report-card-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.report-card-title { font-weight: 600; font-size: var(--fs-sm); }
.report-card-text { font-size: var(--fs-xs); color: var(--oms-muted); }
.report-card-check { position: absolute; top: 8px; right: 8px; color: var(--oms-accent); }
.report-form-panel { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.report-layout > .panel + .panel { margin-top: 0; }
.report-status { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--oms-surface-2); border: 1px solid var(--oms-border); font-size: var(--fs-sm); }
.report-status.is-failed { border-color: color-mix(in srgb, var(--st-offline) 50%, transparent); background: color-mix(in srgb, var(--st-offline) 8%, transparent); }
.viewer-shell { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.viewer-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; padding: var(--sp-3) var(--sp-5); background: var(--oms-surface); border-bottom: 1px solid var(--oms-border); }
.viewer-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: var(--oms-bg-raised); }
.viewer-body > .empty-state, .viewer-body > .error-block { margin: auto; }
.pdf-frame { flex: 1 1 auto; width: 100%; min-height: calc(100dvh - var(--topbar-h) - 90px); border: 0; background: #525659; }
.report-table tfoot th, .report-table tfoot td { border-top: 2px solid var(--oms-border-strong); }
.report-warnings > td { background: var(--oms-surface-2); }

/* ---------- Ask OMS (chat) ---------- */
.chat-app { flex: 1 1 auto; display: grid; min-height: 0; height: calc(100dvh - var(--topbar-h)); grid-template-columns: 250px minmax(0, 1fr) 330px; }
@media (max-width: 1399.98px) { .chat-app { grid-template-columns: 220px minmax(0, 1fr); } .chat-situation { display: none; } }
@media (max-width: 767.98px) { .chat-app { grid-template-columns: minmax(0, 1fr); } .chat-sessions { display: none; } }
.chat-sessions, .chat-situation { display: flex; flex-direction: column; min-height: 0; background: var(--oms-surface); }
.chat-sessions { border-right: 1px solid var(--oms-border); }
.chat-situation { border-left: 1px solid var(--oms-border); }
.chat-sessions-head { padding: var(--sp-3); border-bottom: 1px solid var(--oms-border); }
.chat-session-list { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-2) 0; }
.chat-session { display: flex; align-items: center; gap: 2px; padding-right: 4px; }
.chat-session:hover { background: var(--oms-hover); }
.chat-session.active { background: var(--oms-accent-soft); box-shadow: inset 3px 0 0 var(--oms-accent); }
.chat-session .btn-icon { opacity: 0; }
.chat-session:hover .btn-icon, .chat-session .btn-icon:focus-visible { opacity: 1; }
.chat-session-open { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 6px var(--sp-3); background: none; border: 0; color: var(--oms-text); font: inherit; font-size: var(--fs-sm); text-align: left; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-scroll { flex: 1 1 auto; overflow-y: auto; scroll-behavior: smooth; }
.chat-thread { max-width: 860px; margin: 0 auto; padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.msg { display: flex; gap: var(--sp-3); align-items: flex-start; }
.msg-avatar { flex: 0 0 32px; width: 32px; height: 32px; }
.ai-avatar { display: grid; place-items: center; border-radius: 50%; background: var(--oms-gradient); color: #fff; font-size: .95rem; }
.msg.is-error .ai-avatar { background: var(--st-offline); }
.msg-body { flex: 1 1 auto; min-width: 0; }
.msg-meta { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--oms-muted); margin-bottom: 2px; }
.msg-text { font-size: var(--fs-sm); line-height: 1.6; overflow-wrap: anywhere; }
.msg-user .msg-text { display: inline-block; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--oms-surface-3); }
.msg.is-error .msg-body { padding: var(--sp-3); border-radius: var(--radius); background: color-mix(in srgb, var(--st-offline) 10%, transparent); border: 1px solid color-mix(in srgb, var(--st-offline) 30%, transparent); }
.msg-extras { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.msg-extras:empty { display: none; }
.typing-caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--oms-accent); animation: caret-blink 1s steps(2) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.thinking { display: inline-flex; gap: 4px; vertical-align: middle; }
.thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--oms-accent); animation: thinking 1.2s ease-in-out infinite; }
.thinking span:nth-child(2) { animation-delay: .15s; }
.thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes thinking { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-7) var(--sp-4) var(--sp-4); }
.chat-welcome-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--oms-gradient); color: #fff; font-size: 1.5rem; }
.prompt-grid { display: grid; gap: var(--sp-2); width: 100%; margin-top: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.prompt-card { padding: var(--sp-3); border-radius: var(--radius); border: 1px solid var(--oms-border); background: var(--oms-surface); color: var(--oms-text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.prompt-card:hover { border-color: var(--oms-accent); background: var(--oms-accent-soft); }
.answer-table { border: 1px solid var(--oms-border); border-radius: var(--radius-sm); overflow: hidden; }
.answer-table > .eyebrow, .answer-table > h3, .answer-table > h4 { padding: var(--sp-2) var(--sp-3) 0; }
.citation-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.citation { display: flex; gap: var(--sp-2); align-items: center; padding: 6px; border-radius: var(--radius-sm); border: 1px solid var(--oms-border); background: var(--oms-surface); color: var(--oms-text); text-decoration: none; min-width: 0; }
a.citation:hover { border-color: var(--oms-accent); color: var(--oms-text); }
.citation .thumb { width: 64px; }
.citation-text { display: flex; flex-direction: column; min-width: 0; }
.citation-kind { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--oms-accent); }
.citation-label { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citation-time { font-size: var(--fs-micro); color: var(--oms-muted); }
.query-explain summary { font-size: var(--fs-xs); color: var(--oms-muted); cursor: pointer; }
.chat-composer { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--oms-border); background: var(--oms-surface); }
.chat-composer > * { max-width: 860px; margin-inline: auto; }
.chat-scope { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.chat-scope .form-select { width: auto; max-width: 320px; }
.chat-input-row { display: flex; gap: var(--sp-2); align-items: flex-end; }
.chat-input-row textarea { resize: none; max-height: 200px; min-height: 42px; }
.chat-situation-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--oms-border); }
.chat-situation-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.situation-headline { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.situation-site { padding: var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--oms-border); border-left: 3px solid var(--risk-color, var(--oms-border-strong)); background: var(--oms-surface-2); }
.situation-site.risk-low { --risk-color: var(--risk-low); }
.situation-site.risk-guarded { --risk-color: var(--risk-guarded); }
.situation-site.risk-elevated { --risk-color: var(--risk-elevated); }
.situation-site.risk-high { --risk-color: var(--risk-high); }
.situation-site.risk-severe { --risk-color: var(--risk-severe); }

/* ---------- Smart search ---------- */
.search-hero { max-width: 960px; margin: var(--sp-4) auto var(--sp-5); text-align: center; }
.search-hero h1 { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -0.02em; }
.search-hero #search-examples { justify-content: center; }
.search-box { position: relative; display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.search-box > .bi { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--oms-accent); font-size: 1.1rem; pointer-events: none; }
.search-box .form-control { padding-left: 44px; }
.search-filters { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); text-align: left; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.example-chip { cursor: pointer; border: 1px solid var(--oms-border); }
.example-chip:hover { border-color: var(--oms-accent); color: var(--oms-text); }
.search-results { max-width: 1400px; margin: 0 auto; }
.hit-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.hit-card { display: flex; flex-direction: column; padding: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--oms-border); background: var(--oms-surface); color: var(--oms-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.hit-card:hover { border-color: var(--oms-accent); transform: translateY(-1px); }
.hit-card .media-frame { border-radius: 0; }
.hit-body { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3); }
.hit-title { font-weight: 600; font-size: var(--fs-sm); }
.hit-snippet { font-size: var(--fs-xs); color: var(--oms-text-2); }
.hit-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--oms-muted); min-width: 0; }
.score { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--oms-muted); }
.score-bar { flex: 1 1 auto; height: 3px; border-radius: 3px; background: var(--oms-surface-3); overflow: hidden; }
.score-bar > span { display: block; height: 100%; background: var(--oms-accent); }
.hit-grid .skeleton-card { height: 230px; }

/* ---------- Estate ---------- */
.overview-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.overview-block { min-width: 0; }
.overview-block h3 { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--oms-muted); margin-bottom: var(--sp-2); }
.doc-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.doc-card { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border-radius: var(--radius); border: 1px solid var(--oms-border); background: var(--oms-surface-2); }
.doc-icon { flex: 0 0 auto; font-size: 1.8rem; line-height: 1; color: var(--st-offline); }

.mode-cards { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mode-card-wrap { position: relative; }
.mode-card-wrap > input { position: absolute; opacity: 0; pointer-events: none; }
.mode-card {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: var(--sp-3); margin: 0; border-radius: var(--radius);
  border: 1px solid var(--oms-border); background: var(--oms-surface); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.mode-card:hover { border-color: var(--oms-border-strong); }
.mode-card-wrap > input:checked + .mode-card { border-color: var(--oms-accent); background: var(--oms-accent-soft); box-shadow: 0 0 0 1px var(--oms-accent); }
.mode-card-wrap > input:focus-visible + .mode-card { outline: 2px solid var(--oms-focus); outline-offset: 2px; }
.mode-card-wrap > input:disabled + .mode-card { opacity: .5; cursor: not-allowed; }
.mode-card-icon { font-size: 1.3rem; color: var(--oms-accent); }
.mode-card-title { font-weight: 600; font-size: var(--fs-sm); }
.mode-card-text { font-size: var(--fs-xs); color: var(--oms-muted); }

.stepper { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; gap: var(--sp-2); counter-reset: step; overflow-x: auto; }
.stepper li { flex: 1 1 0; min-width: 130px; }
.stepper button { width: 100%; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: 3px solid var(--oms-border); background: none; color: var(--oms-muted); font: inherit; font-size: var(--fs-sm); text-align: left; }
.stepper button:hover { color: var(--oms-text); }
.step-num { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--oms-surface-3); font-size: var(--fs-xs); font-weight: 700; }
.stepper button[aria-current="step"] { color: var(--oms-text); border-bottom-color: var(--oms-accent); }
.stepper button[aria-current="step"] .step-num { background: var(--oms-accent); color: var(--oms-accent-ink); }
.stepper button.is-done { border-bottom-color: color-mix(in srgb, var(--st-online) 60%, transparent); }
.stepper button.is-done .step-num { background: color-mix(in srgb, var(--st-online) 25%, transparent); color: var(--st-online); }
.step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-step { border: 0; margin: 0; min-width: 0; }

.vendor-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.vendor-option { position: relative; }
.vendor-card { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); margin: 0; border-radius: var(--radius-sm); border: 1px solid var(--oms-border); background: var(--oms-surface); font-size: var(--fs-sm); cursor: pointer; }
.vendor-card:hover { border-color: var(--oms-border-strong); }
.vendor-option > input:checked + .vendor-card { border-color: var(--oms-accent); background: var(--oms-accent-soft); }
.vendor-option > input:focus-visible + .vendor-card { outline: 2px solid var(--oms-focus); outline-offset: 2px; }
.vendor-badge { flex: 0 0 auto; min-width: 34px; padding: 2px 4px; border-radius: 4px; background: var(--oms-surface-3); font-size: 10px; font-weight: 700; text-align: center; }
.test-box { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid var(--oms-border); background: var(--oms-surface-2); }
.test-result { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-sm); border: 1px solid; }
.test-result.is-ok { border-color: color-mix(in srgb, var(--st-online) 45%, transparent); background: color-mix(in srgb, var(--st-online) 8%, transparent); }
.test-result.is-fail { border-color: color-mix(in srgb, var(--st-offline) 45%, transparent); background: color-mix(in srgb, var(--st-offline) 8%, transparent); }

/* analytics zones */
.zones-layout { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 1199.98px) { .zones-layout { grid-template-columns: minmax(0, 1fr); } }
.zones-layout > .panel + .panel, .zones-layout > .stack > .panel + .panel { margin-top: 0; }
.zones-stage-panel { overflow: hidden; }
.zones-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--oms-border); }
.zones-stage { position: relative; aspect-ratio: 16 / 9; background: var(--oms-video-bg); }
.zones-stage > img, .zones-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.zones-stage > img { object-fit: contain; }
.zones-stage > canvas { touch-action: none; }
.zones-stage > canvas:focus-visible { outline: 2px solid var(--oms-focus); outline-offset: -2px; }
.zones-stage > canvas.is-drawing { cursor: crosshair; }
.zones-stage-state { position: absolute; inset: 0; pointer-events: none; }
.zones-stage-state > * { pointer-events: auto; }
.zone-list { list-style: none; margin: 0; padding: var(--sp-1) 0; max-height: 360px; overflow-y: auto; }
.zone-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); cursor: pointer; }
.zone-item:hover { background: var(--oms-hover); }
.zone-item:focus-visible { outline: 2px solid var(--oms-focus); outline-offset: -2px; }
.zone-item.selected { background: var(--oms-accent-soft); box-shadow: inset 3px 0 0 var(--oms-accent); }
.zone-item.is-disabled .zone-item-main { opacity: .55; }
.zone-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zone-empty { padding: var(--sp-3) var(--sp-4); }

/* ---------- Administration ---------- */
.admin-tabs { display: flex; gap: 2px; margin: calc(var(--sp-2) * -1) 0 var(--sp-4); padding-bottom: 1px; border-bottom: 1px solid var(--oms-border); overflow-x: auto; scrollbar-width: thin; }
.admin-tab { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-2) var(--sp-3); margin-bottom: -2px; border-bottom: 2px solid transparent; color: var(--oms-muted); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; text-decoration: none; }
.admin-tab:hover { color: var(--oms-text); }
.admin-tab.active { color: var(--oms-text); border-bottom-color: var(--oms-accent); }

.matrix-wrap { max-height: calc(100dvh - 260px); }
.perm-matrix { border-collapse: separate; border-spacing: 0; }
.perm-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--oms-surface); }
.perm-matrix .perm-name { position: sticky; left: 0; z-index: 1; min-width: 240px; background: var(--oms-surface); }
.perm-matrix thead .perm-name { z-index: 3; }
.perm-role { text-align: center; vertical-align: bottom; min-width: 96px; }
.perm-role-name { display: block; font-weight: 600; white-space: nowrap; }
.perm-group > th { background: var(--oms-surface-2) !important; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--oms-muted); }
.perm-cell { text-align: center; }
.perm-cell .form-check-input { margin: 0; }
.perm-cell.is-changed { background: color-mix(in srgb, var(--pr-medium) 16%, transparent); }

.team-card .panel-body { min-height: 80px; }
.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.member-list li { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.member-picker { max-height: 300px; overflow-y: auto; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--oms-border); border-radius: var(--radius-sm); background: var(--oms-surface-2); }

.scope-tree-host { max-height: 300px; overflow-y: auto; padding: var(--sp-2); border: 1px solid var(--oms-border); border-radius: var(--radius-sm); background: var(--oms-surface-2); }
.scope-tree, .scope-children { list-style: none; margin: 0; padding: 0; }
.scope-children { padding-left: 22px; }
.scope-line { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: var(--fs-sm); }
.scope-line .form-check-input { margin: 0; flex: 0 0 auto; }
.scope-toggle .bi { transition: transform var(--dur-fast); }
.scope-toggle[aria-expanded="true"] .bi { transform: rotate(90deg); }
.scope-spacer { display: inline-block; width: 26px; flex: 0 0 26px; }
.perm-fieldset { margin: 0; padding: 0; border: 0; }
.perm-columns { display: grid; gap: var(--sp-3) var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.node-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.node-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius); border: 1px solid var(--oms-border); background: var(--oms-surface-2); }
.node-card.is-stale { border-color: color-mix(in srgb, var(--st-offline) 45%, transparent); }
.node-card-head { display: flex; align-items: center; gap: var(--sp-2); }
.node-card-title { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.ai-status-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
.ai-status-grid > .panel + .panel { margin-top: 0; }
.ai-node { background: var(--oms-surface-2); box-shadow: none; }
.ai-node .panel-title { font-size: var(--fs-sm); }
.endpoint-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 360px; }
.endpoint { display: flex; gap: var(--sp-2); font-size: var(--fs-xs); min-width: 0; }
.endpoint-label { flex: 0 0 62px; color: var(--oms-muted); }
.load-cell { min-width: 160px; }
.isup-node + .isup-node { padding-top: var(--sp-3); border-top: 1px solid var(--oms-border); }

.profile-card.is-default { border-color: color-mix(in srgb, var(--oms-accent) 50%, var(--oms-border)); }
.grid-cards > .panel + .panel { margin-top: 0; }
.mode-checks { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mode-check { margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-2) 2.2rem; border-radius: var(--radius-sm); border: 1px solid var(--oms-border); background: var(--oms-surface-2); }
.mode-check:has(input:checked) { border-color: var(--oms-accent); background: var(--oms-accent-soft); }

/* ---------- Reduced motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  .sla.is-breached, .wall-tile.is-flash, .wall-tile.is-alarm, .typing-caret, .thinking span { animation: none; }
  .ring .ring-value, .hit-card { transition: none; }
}
@media print {
  .admin-tabs, .alarm-actions-bar, .chat-sessions, .chat-situation, .chat-composer, .wall-toolbar, .wall-tree, .viewer-head .cluster { display: none !important; }
  .chat-app, .wall-app { display: block; height: auto; }
  .tour-lane, .capture-card, .alarm-section { break-inside: avoid; }
}

/* ---------- Settings ---------- */
.settings-layout { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: start; }
.settings-layout > .panel + .panel { margin-top: 0; }
.settings-aside { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
@media (max-width: 1199.98px) { .settings-layout { grid-template-columns: minmax(0, 1fr); } .settings-aside { position: static; } }
fieldset.form-section { border: 0; margin: 0; min-width: 0; }
fieldset.form-section + fieldset.form-section { border-top: 1px solid var(--oms-border); }
.doc-preview { padding: var(--sp-3); border-radius: var(--radius-sm); background: #ffffff; color: #0d1726; font-size: var(--fs-xs); border-top: 4px solid var(--brand-primary); box-shadow: var(--oms-shadow); }
.doc-preview .text-muted { color: #5a687e !important; }
.doc-preview-head { font-size: var(--fs-sm); margin-bottom: 4px; }
.doc-preview-line { color: #2f3d52; min-height: 1em; overflow-wrap: anywhere; }
.doc-preview hr { margin: 8px 0; border-color: #e1e6ef; opacity: 1; }
.brand-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
.logo-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.logo-slot .upload-drop { min-height: 160px; }
.brand-preview, .login-preview, .report-preview { --bp-primary: var(--brand-primary); --bp-accent: var(--brand-accent); }
.contrast-ok { --chip-color: var(--st-online); }
.contrast-warn { --chip-color: var(--st-degraded); }
.preset-swatch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: var(--radius-pill); border: 1px solid var(--oms-border); background: var(--oms-surface); color: var(--oms-text-2); font-size: var(--fs-xs); }
.preset-swatch:hover { border-color: var(--oms-accent); color: var(--oms-text); }
.preset-swatch .pair { display: inline-flex; width: 28px; height: 20px; border-radius: 10px; overflow: hidden; }
.preset-swatch .pair i { flex: 1 1 0; }
.account-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.account-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius-lg); border: 1px solid var(--oms-border); background: var(--oms-surface); box-shadow: var(--oms-shadow); }
.account-card.is-disabled { opacity: .65; }
.account-card.is-default { border-color: color-mix(in srgb, var(--oms-accent) 45%, var(--oms-border)); box-shadow: var(--oms-glow); }
.account-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.account-head .kpi-icon { flex: 0 0 40px; width: 40px; height: 40px; }
.account-foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--oms-border); }
.account-add { align-items: center; justify-content: center; border-style: dashed; box-shadow: none; background: transparent; min-height: 150px; color: var(--oms-muted); text-align: center; }
.provider-guide { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--oms-surface-2); border: 1px solid var(--oms-border); }
.guide-cards { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; }
.usage-cell { min-width: 120px; }
.usage-cell .stat-bar { margin-top: 3px; }
.tenant-spark { width: 110px; }
.tenant-spark .sparkline { height: 28px; }
.feature-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.feature-grid .choice-card { padding: var(--sp-2) var(--sp-3); }
.feature-grid .choice-icon { flex-basis: 28px; height: 28px; font-size: .9rem; }
.policy-list li { display: flex; gap: 6px; align-items: baseline; }

/* ---------- Site detail: uptime & intelligence ---------- */
.uptime-grid { display: grid; gap: var(--sp-5); grid-template-columns: 220px minmax(0, 1fr); align-items: center; }
@media (max-width: 767.98px) { .uptime-grid { grid-template-columns: minmax(0, 1fr); } }
.intel-grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 991.98px) { .intel-grid { grid-template-columns: minmax(0, 1fr); } }
.cam-health-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cam-health { padding: var(--sp-3); border-radius: var(--radius); border: 1px solid var(--oms-border); background: var(--oms-surface-2); }
.cam-score { flex: 0 0 auto; min-width: 40px; height: 28px; padding: 0 8px; border-radius: var(--radius-pill); display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sub-color); background: color-mix(in srgb, var(--sub-color) 14%, transparent); }
.cam-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: var(--sp-2); border-radius: var(--radius-sm); background: var(--oms-video-bg); }
.feed.panel { padding: 0; }
.counting-box { margin: 0; padding: var(--sp-3); border: 1px solid var(--oms-border); border-radius: var(--radius-sm); background: var(--oms-surface-2); }

/* ---------- Customer portal ---------- */
.portal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); border: 1px solid var(--oms-border); background: var(--oms-glass); backdrop-filter: blur(14px); box-shadow: var(--oms-shadow); }
.portal-customer { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.portal-avatar { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--oms-gradient); color: #fff; font-size: 1.15rem; box-shadow: var(--oms-glow); }
.portal-customer-name { font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.01em; }
.portal-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.portal-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); color: var(--oms-text-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.portal-tab:hover { background: var(--oms-hover); color: var(--oms-text); }
.portal-tab.active { background: var(--oms-accent); color: var(--oms-accent-ink); box-shadow: 0 4px 14px rgba(var(--oms-accent-rgb), .25); }
@media (max-width: 767.98px) { .portal-tabs { overflow-x: auto; flex-wrap: nowrap; width: 100%; } .portal-tab span { white-space: nowrap; } }
.portal-hero { display: grid; gap: var(--sp-5); grid-template-columns: auto minmax(0, 1fr); align-items: center; }
@media (max-width: 767.98px) { .portal-hero { grid-template-columns: minmax(0, 1fr); } }
.score-tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.score-tile { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border-radius: var(--radius); border: 1px solid var(--oms-border); background: var(--oms-surface-2); color: var(--oms-text); text-decoration: none; }
a.score-tile:hover { border-color: var(--oms-accent); color: var(--oms-text); }
.score-tile .ring { width: 56px; height: 56px; }
.score-tile .ring .ring-label strong { font-size: var(--fs-sm); }
.site-card .site-card-uptime { font-size: var(--fs-xs); color: var(--oms-muted); }
.site-card.is-focused { box-shadow: 0 0 0 2px var(--oms-accent), var(--oms-glow); }
.insight-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--radius-lg); border: 1px solid var(--oms-border); border-left: 4px solid var(--tone, var(--oms-accent)); background: var(--oms-surface); box-shadow: var(--oms-shadow); }
.insight-card.is-focused { box-shadow: 0 0 0 2px var(--oms-accent), var(--oms-glow); }
.insight-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.recommendation { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: rgba(var(--oms-accent-rgb), .08); font-size: var(--fs-sm); }
.cam-pick { max-height: 260px; overflow-y: auto; padding: var(--sp-2); border: 1px solid var(--oms-border); border-radius: var(--radius-sm); background: var(--oms-surface-2); }
.ov-online { grid-column: span 5; }
.ov-online .avatar { width: 30px; height: 30px; font-size: var(--fs-micro); flex: 0 0 30px; }