:root {
  color-scheme: dark;
  --bg: #50514f;
  --bg-deep: #363735;
  --panel: rgba(57, 58, 56, 0.9);
  --panel-strong: rgba(47, 48, 46, 0.97);
  --panel-soft: rgba(255, 255, 255, 0.07);
  --subpanel: rgba(255, 255, 255, 0.05);
  --nav: rgba(43, 44, 42, 0.96);
  --line: rgba(255, 255, 255, 0.24);
  --line-strong: rgba(255, 255, 255, 0.48);
  --ink: #ffffff;
  --muted: #c8cac5;
  --accent: #ffffff;
  --accent-deep: #ddddda;
  --accent-soft: rgba(255, 255, 255, 0.12);
  --warning: #f4bc62;
  --warning-soft: rgba(244, 188, 98, 0.14);
  --error: #ff7f7f;
  --error-soft: rgba(255, 127, 127, 0.12);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

/* Routed workspace: neutral, compact, and intentionally not card-heavy. */
.modern-workspace { display:grid; grid-template-columns:300px minmax(0,1fr); min-height:100%; background:#50514f; color:#fff; }
.app-shell { gap:0; padding:0; background:#50514f; }.app-content { min-width:0; padding:0; }.content-header { display:none; }
.modern-house-sidebar { position:relative; z-index:1100; isolation:isolate; display:flex; flex-direction:column; gap:8px; min-height:calc(100vh - 20px); padding:10px; background:#3c3d3b; border-right:1px solid rgba(255,255,255,.45); overflow:hidden; }
.modern-house-sidebar.has-house-preview { overflow:visible; }
.modern-sidebar-actions { display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.4); }.modern-sidebar-actions button { display:grid; place-items:center; height:28px; padding:5px; font-size:0; border:1px solid transparent; border-radius:4px; background:transparent; }.modern-sidebar-actions button:hover, .modern-sidebar-actions .primary-button { border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.12); }.modern-sidebar-actions .btn-icon { width:16px; height:16px; }
.modern-house-sidebar input, .modern-house-sidebar select { padding:7px 8px; border-radius:5px; background:#30312f; border-color:rgba(255,255,255,.35); }
.modern-filter-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.modern-severity-filter { display:flex; flex-wrap:wrap; gap:5px 9px; font-size:.72rem; color:var(--muted); }
.modern-severity-filter label { display:inline-flex; align-items:center; gap:3px; }
.modern-severity-filter input { width:auto; }
.modern-house-tabs { display:flex; flex-direction:column; gap:4px; overflow:auto; padding-right:2px; }
.modern-house-tab { position:relative; display:grid; grid-template-columns:8px minmax(0,1fr) auto auto; align-items:center; gap:7px; min-height:34px; padding:7px 8px; text-align:left; border:1px solid transparent; border-left:3px solid #bbb; border-radius:5px; background:transparent; cursor:pointer; }
.modern-owner-link { padding:0; color:inherit; font:inherit; font-weight:inherit; text-decoration:underline; text-underline-offset:2px; border:0; background:transparent; cursor:pointer; }.modern-owner-link:hover { color:#fff; }
.modern-house-tab:hover, .modern-house-tab.is-selected { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); }
.modern-house-tab.severity-high { border-left-color:#ff7777; }.modern-house-tab.severity-medium { border-left-color:#f4bc62; }.modern-house-tab.severity-low { border-left-color:#d8d8d8; }
.online-dot { width:7px; height:7px; border-radius:50%; background:#8e8e8e; }.online-dot.online { background:#62d180; }.online-dot.offline { background:#df7777; }
.modern-house-tab .flock-age-badge { font-size:.68rem; padding:0; border:0; background:transparent; }.modern-house-tab .flock-age-badge-label { display:none; }
.modern-house-preview-trigger { display:none; width:24px; height:24px; padding:3px; color:#fff; }
.modern-house-hover-card { position:fixed; left:308px; z-index:1200; display:grid; gap:9px; width:min(360px, calc(100vw - 324px)); max-height:calc(100vh - 16px); overflow:auto; padding:11px; color:#fff; background:#252624; border:1px solid rgba(255,255,255,.68); box-shadow:0 12px 28px rgba(0,0,0,.46); pointer-events:auto; }
.modern-house-hover-card-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }.modern-house-hover-card-header strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.modern-house-hover-card-panels { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.modern-house-preview-panel { min-width:0; padding:7px; background:#30312f; border:1px solid rgba(255,255,255,.25); }.modern-house-preview-panel .edge-heartbeat-badge, .modern-house-preview-panel .weather-badge { min-width:0; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }.modern-house-preview-panel .edge-heartbeat-copy, .modern-house-preview-panel .weather-badge-copy { min-width:0; }.modern-house-preview-panel strong, .modern-house-preview-panel span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.modern-house-preview-flock, .modern-house-preview-events, .modern-house-preview-final-output { display:grid; gap:3px; font-size:.78rem; }.modern-house-preview-flock, .modern-house-preview-events { padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.22); }.modern-house-preview-events span, .modern-house-preview-final-output span { overflow-wrap:anywhere; color:rgba(255,255,255,.78); }.modern-house-quick-chat { display:flex; gap:6px; }.modern-house-quick-chat input { min-width:0; flex:1; min-height:32px; }.modern-house-quick-chat button { flex:0 0 auto; }.modern-house-quick-transcript { display:grid; gap:7px; max-height:150px; overflow:auto; padding-top:2px; border-top:1px solid rgba(255,255,255,.22); }.modern-house-quick-transcript > div { display:grid; gap:2px; font-size:.78rem; }.modern-house-hover-card button { border:0; }.modern-house-hover-card .house-chat-markdown p { margin:0; }
.modern-main-stage { position:relative; min-width:0; min-height:100vh; }
.modern-map { position:relative; z-index:0; min-height:100vh; }.workspace-map-pin-hovered { filter:drop-shadow(0 0 7px #ff3939); }
.modern-house-dashboard { display:grid; gap:12px; padding:12px 16px 28px; }.modern-house-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.5); }.modern-house-meta > strong { font-size:1.15rem; margin-right:auto; }
.modern-meta-panel { display:flex; align-items:center; justify-content:center; gap:7px; width:174px; min-width:174px; height:48px; padding:7px 9px; overflow:hidden; color:#fff; background:#454644; border:1px solid rgba(255,255,255,.35); border-radius:4px; }.modern-meta-panel > .weather-badge, .modern-meta-panel > .flock-age-badge, .modern-meta-panel > .edge-heartbeat-badge { width:100%; min-width:0; height:100%; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }.modern-meta-panel .weather-badge-icon { color:#fff; background:rgba(255,255,255,.12); }.modern-meta-panel .weather-badge-copy strong, .modern-meta-panel .weather-badge-copy span { color:#fff; }.modern-meta-panel .flock-age-badge { display:flex; align-items:center; justify-content:center; gap:7px; }.modern-meta-panel .edge-heartbeat-copy { min-width:0; }.modern-meta-panel .edge-heartbeat-copy strong, .modern-meta-panel .edge-heartbeat-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.modern-meta-panel > span { color:var(--muted); font-size:.76rem; }.modern-meta-panel > strong { font-size:.95rem; }
.modern-departure-button, .modern-departure-copy { display:grid; justify-items:center; gap:3px; width:100%; min-width:0; color:#fff; background:transparent; border:0; text-align:center; }.modern-departure-button { padding:0; cursor:pointer; }.modern-departure-button:hover strong, .modern-departure-button:focus-visible strong { text-decoration:underline; }.modern-departure-copy span, .modern-departure-button span { color:var(--muted); font-size:.76rem; }.modern-departure-copy strong, .modern-departure-button strong { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; }
.modern-weather-panel { width:260px; min-width:260px; }.flock-age-button { display:flex; width:100%; height:100%; padding:0; border:0; color:inherit; background:transparent; cursor:pointer; }.modern-flock-editor { display:grid; gap:10px; padding:12px; border-top:1px solid rgba(255,255,255,.45); border-bottom:1px solid rgba(255,255,255,.45); background:rgba(45,46,44,.7); }.modern-flock-editor-header { display:flex; align-items:center; justify-content:space-between; }.modern-flock-editor-header h2 { margin:0; font-size:1rem; }.modern-flock-editor-form { display:grid; gap:10px; max-width:720px; }.modern-flock-targets { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:8px; }.modern-flock-targets .field-label { grid-column:1/-1; color:var(--muted); font-size:.78rem; }.modern-flock-editor .field { display:grid; gap:4px; }.modern-flock-editor .field > span { color:var(--muted); font-size:.76rem; }
.modern-house-dashboard .panel { border-radius:5px; box-shadow:none; padding:10px; background:rgba(45,46,44,.56); }.modern-house-dashboard .panel-title-block .panel-kicker, .modern-house-dashboard .house-chat-note { display:none; }
.modern-house-dashboard .house-live-frame-grid { grid-template-columns:repeat(auto-fit, minmax(180px, 260px)); justify-content:start; }.modern-house-dashboard .house-live-frame-grid figure { margin:0; max-width:260px; }.modern-house-dashboard .house-live-frame-grid img { display:block; width:100%; height:150px; object-fit:cover; border-radius:4px; }.modern-house-dashboard .house-live-frame-grid figcaption { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modern-timeline { padding:10px 0; border-top:1px solid rgba(255,255,255,.45); border-bottom:1px solid rgba(255,255,255,.45); }.modern-timeline-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }.modern-timeline-header h2 { margin:0; font-size:1rem; }.modern-timeline-track { overflow-x:auto; overscroll-behavior:contain; }.house-history-section { display:grid; gap:12px; min-width:0; }.analysis-drawer { position:fixed; z-index:30; top:0; right:0; width:min(620px,52vw); height:100vh; overflow:auto; padding:14px; background:#3b3c3a; border-left:1px solid rgba(255,255,255,.65); box-shadow:-14px 0 35px rgba(0,0,0,.35); }.analysis-drawer .selected-query-panel { background:transparent; border:0; padding:0; }.modern-error { position:fixed; bottom:12px; right:12px; z-index:50; }
@media (max-width: 800px) { .modern-workspace { grid-template-columns:1fr; }.modern-house-sidebar { min-height:auto; max-height:none; border-right:0; border-bottom:1px solid rgba(255,255,255,.45); }.modern-house-tabs { max-height:none; overflow:visible; }.modern-house-hover-card { left:8px; right:8px; z-index:1300; width:auto; max-height:calc(100vh - 16px); }.modern-house-preview-trigger { display:grid; place-items:center; }.analysis-drawer { width:100vw; }.modern-map { min-height:55vh; } }

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

html[dir="rtl"] body {
  direction: rtl;
}

html[dir="rtl"] .workspace-sidebar {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

html[dir="rtl"] .workspace-house-card,
html[dir="rtl"] .field,
html[dir="rtl"] .metadata-list,
html[dir="rtl"] .detail-table,
html[dir="rtl"] .data-strip,
html[dir="rtl"] .empty-state,
html[dir="rtl"] .result-box {
  text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
}

html[dir="rtl"] .code-block,
html[dir="rtl"] .trace-json-box,
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="datetime-local"] {
  direction: ltr;
  text-align: left;
}

/* Timeline data remains chronological from left to right in both locales. */
html[dir="rtl"] .severity-timeline-track,
html[dir="rtl"] .severity-hour-chart-track,
html[dir="rtl"] .severity-timeline-footer,
html[dir="rtl"] .severity-hour-chart-footer {
  direction: ltr;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.09), transparent 30%),
    linear-gradient(160deg, #5a5b58 0%, var(--bg) 45%, var(--bg-deep) 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(7, 18, 28, 0.92);
  color: var(--ink);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.app-shell {
  display: flex;
  gap: 10px;
  min-height: 100vh;
  padding: 10px;
}

.workspace-shell {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 0;
  min-height: 100vh;
}

.workspace-sidebar,
.workspace-map-stage {
  min-height: 0;
}

.workspace-sidebar {
  display: grid;
  gap: 14px;
  align-self: stretch;
  align-content: start;
  justify-items: stretch;
  grid-auto-rows: max-content;
  max-height: 100vh;
  overflow: auto;
  border-radius: 0;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

.workspace-sidebar-header,
.workspace-map-header,
.workspace-owner-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.workspace-sidebar-groups,
.workspace-owner-houses {
  display: grid;
  gap: 12px;
  align-content: start;
  grid-auto-rows: max-content;
}

.workspace-owner-section {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.workspace-owner-header strong,
.workspace-house-card-title {
  display: block;
}

.workspace-house-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workspace-owner-header span,
.workspace-house-card-meta,
.workspace-house-card-verdict {
  color: var(--muted);
  font-size: 0.92rem;
}

.workspace-house-card {
  display: grid;
  gap: 8px;
  width: 100%;
  align-self: start;
  padding: 11px 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(8, 21, 31, 0.88);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.workspace-house-card:hover {
  transform: translateY(-1px);
  border-color: rgba(150, 190, 220, 0.5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.workspace-house-card-selected {
  box-shadow: 0 0 0 1px currentColor;
}

.workspace-house-card-shell {
  position: relative;
}

.workspace-house-card-provisional {
  background: linear-gradient(180deg, rgba(244, 188, 98, 0.12), rgba(8, 21, 31, 0.88));
}

.workspace-house-card-verdict {
  color: var(--ink);
  display: block;
  font-size: 0.84rem;
  line-height: 1.4;
}

.workspace-house-card-verdict-shell {
  display: block;
  max-height: 72px;
  overflow: auto;
  padding: 8px 9px;
  border: 1px solid rgba(150, 190, 220, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.workspace-house-card-weather {
  min-width: 0;
}

.workspace-house-card-weather .weather-badge {
  width: 100%;
  padding: 7px 9px;
  border-radius: 12px;
}

.workspace-house-card-weather .weather-badge-compact {
  gap: 8px;
}

.workspace-house-card-weather .weather-badge-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.workspace-house-card-weather .weather-badge-icon svg {
  width: 15px;
  height: 15px;
}

.workspace-house-card-weather .weather-badge-copy strong {
  font-size: 0.82rem;
}

.workspace-house-card-weather .weather-badge-copy span {
  font-size: 0.72rem;
}

.workspace-house-card-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 12;
  width: min(300px, calc(100% - 20px));
}

.house-live-frame-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.house-live-frame-grid figure { margin: 0; }
.house-live-frame-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); }
.house-live-frame-grid figcaption { color: var(--muted); font-size: 0.78rem; margin-top: 4px; }

.frame-viewer { display:grid; gap:6px; width:100%; min-width:0; }
.frame-viewer-image { display:block; width:100%; min-width:0; padding:0; border:0; color:inherit; background:transparent; text-align:left; }
button.frame-viewer-image { cursor:zoom-in; }
.frame-viewer-image > .frame-overlay { width:100%; }
.frame-viewer-full .frame-viewer-image { cursor:default; }
.frame-viewer-title { padding:0 0 8px; color:var(--muted); font-size:.75rem; }
.frame-annotation-controls { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.frame-annotation-error { color:#ffb0b0; font-size:.75rem; }
.frame-annotation-legend { display:flex; flex-wrap:wrap; gap:6px 12px; padding-top:2px; color:#fff; font-size:.74rem; }
.frame-annotation-legend-item { display:inline-flex; align-items:center; gap:5px; }
.frame-annotation-legend-item small { color:var(--muted); }
.frame-annotation-swatch { display:inline-block; width:10px; height:10px; border:1px solid rgba(255,255,255,.75); }
.frame-overlay { position:relative; width:100%; overflow:hidden; background:rgba(4,11,17,.86); }
.frame-overlay > img { display:block; width:100%; aspect-ratio:16 / 9; object-fit:contain; }
.frame-overlay-full > img { aspect-ratio:auto; max-height:calc(100vh - 150px); }
.frame-overlay-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.frame-overlay-svg line { stroke:rgba(255,196,70,.7); stroke-width:2; vector-effect:non-scaling-stroke; }
.frame-overlay-detection { stroke-width:3; vector-effect:non-scaling-stroke; }
.frame-overlay-candidate { fill:rgba(255,50,50,.16); stroke:#ff5050; stroke-width:4; vector-effect:non-scaling-stroke; }
.image-lightbox .frame-viewer { max-height:calc(100vh - 150px); }
.image-lightbox .frame-overlay-full > img { max-height:calc(100vh - 180px); }

/* The alert timeline is the farmer-facing analysis browser. Query rows still
   load in memory so timeline points can open the selected analysis. */
.query-table-scroll-shell { display: none; }

.workspace-house-card-severity-none {
  border-color: rgba(78, 143, 247, 0.38);
}

.workspace-house-card-severity-none.workspace-house-card-selected {
  color: #4f8ff7;
}

.workspace-house-card-severity-low {
  border-color: rgba(244, 188, 98, 0.38);
}

.workspace-house-card-severity-low.workspace-house-card-selected {
  color: #f4bc62;
}

.workspace-house-card-severity-medium {
  border-color: rgba(233, 140, 58, 0.38);
}

.workspace-house-card-severity-medium.workspace-house-card-selected {
  color: #e98c3a;
}

.workspace-house-card-severity-high {
  border-color: rgba(223, 91, 91, 0.38);
}

.workspace-house-card-severity-high.workspace-house-card-selected {
  color: #df5b5b;
}

.workspace-house-card-severity-unknown {
  border-color: rgba(141, 165, 186, 0.38);
}

.workspace-house-card-severity-unknown.workspace-house-card-selected {
  color: #8da5ba;
}

.workspace-search-input {
  width: 100%;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  min-height: 28px;
  line-height: 1.1;
}

.workspace-map-pin {
  position: relative;
  width: 28px;
  height: 28px;
  transform: rotate(-45deg);
  border-radius: 50% 50% 50% 0;
  border: 2px solid rgba(4, 18, 24, 0.82);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.26);
}

.workspace-map-pin::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 8px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-left: inherit;
  border-bottom: inherit;
}

.workspace-map-pin-core {
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.workspace-map-pin-selected {
  width: 34px;
  height: 34px;
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 3px rgba(244, 188, 98, 0.36), 0 12px 22px rgba(0, 0, 0, 0.3);
}

.workspace-map-pin-provisional {
  opacity: 0.7;
  filter: saturate(0.8);
}

.workspace-map-pin-none {
  background: #4f8ff7;
}

.workspace-map-pin-low {
  background: #f4bc62;
}

.workspace-map-pin-medium {
  background: #e98c3a;
}

.workspace-map-pin-high {
  background: #df5b5b;
}

.workspace-map-pin-unknown {
  background: #8da5ba;
}

.workspace-map-stage {
  min-width: 0;
  min-height: 100vh;
}

.workspace-leaflet-map,
.location-picker-leaflet-map {
  width: 100%;
  border-radius: 0;
  overflow: hidden;
}

.workspace-leaflet-map {
  height: 100vh;
}

.location-picker-leaflet-map {
  height: 360px;
}

.workspace-settings-menu {
  position: relative;
}

.workspace-settings-menu summary {
  list-style: none;
  cursor: pointer;
}

.workspace-settings-menu summary::-webkit-details-marker {
  display: none;
}

.workspace-settings-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 10px;
  width: min(420px, 90vw);
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: rgba(8, 20, 31, 0.98);
  box-shadow: var(--shadow);
}

.workspace-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.workspace-settings-menu-shell {
  position: fixed;
  z-index: 10001;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.workspace-settings-menu-shell .workspace-settings-popover {
  position: static;
  top: auto;
  right: auto;
}

.workspace-settings-popover-root,
.workspace-settings-popover-submenu {
  width: min(320px, calc(100vw - 24px));
}

.workspace-settings-popover-title {
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.workspace-settings-popover-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.workspace-settings-menu-item {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.workspace-settings-popover-compact {
  position: static;
  width: 100%;
  padding: 12px;
  border-radius: 14px;
}

.workspace-settings-inline-form {
  display: grid;
  gap: 10px;
}

.workspace-settings-sensors-submenu {
  max-height: min(620px, calc(100vh - 24px));
}

.workspace-settings-sensor-list {
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow-y: auto;
  padding-right: 4px;
}

.workspace-settings-sensor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(4, 18, 28, 0.34);
}

.workspace-settings-sensor-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workspace-settings-sensor-copy strong,
.workspace-settings-sensor-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-settings-sensor-copy span {
  color: var(--muted);
  font-size: 0.78rem;
}

.workspace-settings-sensor-action {
  flex: 0 0 auto;
  padding: 7px 9px;
  font-size: 0.78rem;
}

.workspace-source-settings-modal {
  width: min(900px, calc(100vw - 32px));
}

.settings-inline-label {
  color: var(--muted);
  font-size: 0.88rem;
}

.workspace-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 8, 14, 0.72);
}

.workspace-modal-card {
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(16, 40, 59, 0.96), rgba(6, 19, 31, 0.98));
  box-shadow: var(--shadow);
}

.ownership-transfer-panel {
  display: grid;
  gap: 10px;
}

.ownership-transfer-confirmation {
  width: min(560px, 100%);
  display: grid;
  gap: 14px;
}

.admin-user-assignment-grid {
  display: grid;
  gap: 14px;
}

@media (max-width: 1080px) {
  .workspace-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .workspace-sidebar {
    max-height: none;
    border-radius: 18px;
  }

  .workspace-map-stage,
  .workspace-leaflet-map {
    min-height: 60vh;
    height: 60vh;
  }
}

/* The routed workspace uses one square, high-contrast control language.
   Status dots and map pins intentionally remain circular indicators. */
.app-shell-modern :is(button, input, select, textarea, .panel, .subpanel, .pill, .modern-management-row, .modern-management-form, .modern-meta-panel, .workspace-settings-popover, .modern-modal-card, .analysis-drawer, .house-live-frame-grid img) { border-radius:0; box-shadow:none; }
.app-shell-modern button { min-height:30px; color:#fff; border:0; background:linear-gradient(180deg, #5a5b58, #424340); box-shadow:inset 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.22); transition:background 120ms ease, transform 120ms ease; }
.app-shell-modern button:hover:not(:disabled), .app-shell-modern button:focus-visible { background:linear-gradient(180deg, #6b6c68, #4b4c49); }
.app-shell-modern button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.app-shell-modern button.primary-button { color:#fff; border:0; background:linear-gradient(180deg, #747570, #50514e); }
.app-shell-modern button.primary-button:hover:not(:disabled) { background:linear-gradient(180deg, #858680, #5b5c58); }
.app-shell-modern button:disabled { opacity:.42; cursor:not-allowed; }
.app-shell-modern .modern-house-sidebar button { border:0; background:transparent; box-shadow:none; }
.app-shell-modern .modern-house-sidebar button:hover:not(:disabled), .app-shell-modern .modern-house-sidebar button:focus-visible, .app-shell-modern .modern-house-sidebar button.primary-button { background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.07)); box-shadow:inset 0 1px rgba(255,255,255,.13); }
.app-shell-modern .modern-meta-panel .flock-age-button { color:#fff; border:0; border-radius:3px; background:linear-gradient(180deg, #656661, #484945); box-shadow:inset 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.2); }
.app-shell-modern .modern-meta-panel .flock-age-button .flock-age-badge { width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#fff; }
.app-shell-modern .modern-meta-panel .flock-age-button:hover:not(:disabled), .app-shell-modern .modern-meta-panel .flock-age-button:focus-visible { background:linear-gradient(180deg, #747570, #50514e); box-shadow:inset 0 1px rgba(255,255,255,.2), 0 1px 3px rgba(0,0,0,.24); }
.app-shell-modern .house-event-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.app-shell-modern .house-event-header-actions .ghost-button-danger { color:#ffadad; }
.app-shell-modern :is(input, select, textarea) { color:#fff; border:0; background:linear-gradient(180deg, #3a3b39, #30312f); box-shadow:inset 0 1px rgba(255,255,255,.1); }
.app-shell-modern :is(input, select, textarea):focus { outline:0; background:linear-gradient(180deg, #454643, #353634); box-shadow:inset 0 1px rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.34); }
.app-shell-modern .modern-house-sidebar select, .app-shell-modern .modern-house-sidebar select option { color:#fff; background:#30312f; color-scheme:dark; }
.app-shell-modern .frame-viewer-image { border:0; background:transparent; box-shadow:none; }.app-shell-modern .frame-viewer-image:hover:not(:disabled), .app-shell-modern .frame-viewer-image:focus-visible { background:transparent; box-shadow:0 0 0 1px rgba(255,255,255,.7); }.image-lightbox { z-index:1300; }
.app-shell-modern .app-content { min-width:0; padding:0; background:#50514f; }.app-shell-modern .content-header { display:none; }.app-shell-modern .admin-shell { width:100%; min-height:100vh; margin:0; padding:18px; background:#50514f; }.app-shell-modern .admin-shell > .panel, .app-shell-modern .admin-shell .subpanel { padding:12px; border:1px solid rgba(255,255,255,.3); border-radius:0; color:#fff; background:#41423f; box-shadow:none; }.app-shell-modern .admin-shell .selected-query-header { padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.36); }.app-shell-modern .admin-shell .panel-kicker, .app-shell-modern .admin-shell .subpanel-kicker, .app-shell-modern .admin-intro { color:#d2d2d2; }.app-shell-modern .admin-shell .table-shell { border:0; background:transparent; }.app-shell-modern .admin-shell .detail-table th { color:#d2d2d2; background:#3a3b39; }.app-shell-modern .admin-shell .detail-table td { border-color:rgba(255,255,255,.2); }.app-shell-modern .admin-shell .admin-entity-row:hover { background:rgba(255,255,255,.1); }
.app-shell-modern .edge-devices-shell { min-height:100vh; padding:18px; background:#50514f; }.app-shell-modern .edge-devices-panel { width:min(920px,100%); margin:0 auto; padding:12px; border:1px solid rgba(255,255,255,.3); color:#fff; background:#41423f; }.app-shell-modern .edge-devices-panel .selected-query-header { padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.36); }.app-shell-modern .edge-devices-panel .panel-kicker, .app-shell-modern .edge-devices-panel .muted-text { color:#d2d2d2; }
.edge-device-header-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.edge-device-status-panel { width:174px; min-width:174px; }
.edge-command-panel { margin-top:18px; padding-top:12px; border-top:1px solid rgba(255,255,255,.3); }.edge-command-input { min-height:92px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; direction:ltr; text-align:left; }.edge-command-output { max-height:280px; overflow:auto; margin:10px 0 0; padding:10px; color:#f5f5f5; background:#252624; border:1px solid rgba(255,255,255,.25); white-space:pre-wrap; overflow-wrap:anywhere; direction:ltr; text-align:left; }.edge-command-status-completed { color:#a7e5b0; }.edge-command-status-failed, .edge-command-status-timed_out, .edge-command-status-error { color:#ff9b9b; }

/* Final shell overrides keep the routed workspace compact and full-width. */
.app-shell { gap:0; padding:0; background:#50514f; }
.modern-main-stage, .modern-house-dashboard, .modern-house-dashboard .panel, .modern-house-dashboard .house-analytics-card, .modern-timeline, .modern-timeline-track { min-width:0; max-width:100%; }.modern-timeline-track { width:100%; overflow-x:auto; }.modern-timeline-track .severity-timeline-canvas-shell { width:100% !important; min-width:0 !important; }.modern-timeline-track .severity-timeline-canvas { max-width:100%; }.modern-house-dashboard .house-analytics-chart-shell { width:100%; max-width:100%; overflow:hidden; }
.house-history-timeline { --house-history-timeline-height:356px; position:relative; display:grid; gap:8px; padding:10px 0; }
.house-history-timeline-track { min-height:var(--house-history-timeline-height); overflow:hidden; background:rgba(4,18,28,.18); border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.house-history-timeline-track.is-dragging { cursor:grabbing; }
.house-history-timeline-canvas-shell { position:relative; width:100%; min-width:0; height:var(--house-history-timeline-height); }
.house-history-timeline-canvas { display:block; width:100%; height:100%; }
.house-event-composer { position:absolute; z-index:20; display:grid; gap:8px; width:min(480px, calc(100% - 24px)); padding:10px; border:1px solid rgba(255,255,255,.55); background:#363835; box-shadow:0 12px 30px rgba(0,0,0,.4); color:#fff; }
.house-event-type-menu { display:flex; flex-wrap:wrap; gap:6px; }
.house-event-type-menu button { min-height:32px; padding:5px 9px; border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; }
.house-event-type-menu button:hover, .house-event-type-menu button:focus-visible { background:rgba(255,255,255,.18); }
.house-event-form { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 0; }.house-event-form :is(input, select) { min-height:32px; flex:1 1 150px; min-width:120px; }.house-event-form-actions { display:flex; flex:1 0 100%; flex-wrap:wrap; gap:6px; }.house-event-form .primary-button-small { flex:0 0 auto; }.house-event-meta-line { display:flex; flex-wrap:wrap; gap:12px; color:#d7d7d7; font-size:.86rem; }.house-event-details { margin:12px 0; white-space:pre-wrap; color:#f3f3f3; }.house-event-detail .comment-form { margin-top:8px; }
@media (max-width: 800px), (pointer: coarse) {
  .house-history-timeline.is-compact { --house-history-timeline-height:308px; }
  .house-history-timeline.is-compact { padding:8px 0; }
  .house-history-timeline.is-compact .modern-timeline-header { gap:6px; }
  .house-history-timeline.is-compact .modern-timeline-header h2 { font-size:.92rem; }
  .house-history-timeline.is-compact .house-history-timeline-track { min-height:var(--house-history-timeline-height); }
  .house-history-timeline.is-compact .house-history-timeline-canvas-shell { height:var(--house-history-timeline-height); }
  .house-event-composer.is-compact { position:fixed; z-index:1100; left:12px !important; right:12px !important; top:auto !important; bottom:calc(12px + env(safe-area-inset-bottom)) !important; width:auto !important; max-height:calc(100dvh - 24px - env(safe-area-inset-bottom)); overflow:auto; transform:none !important; }
  .house-event-composer.is-compact .house-event-type-menu { display:grid; grid-template-columns:1fr; }
  .house-event-composer.is-compact .house-event-type-menu button { width:100%; text-align:start; }
  .house-event-composer.is-compact .house-event-form { display:grid; grid-template-columns:minmax(0,1fr); padding:0; }
  .house-event-composer.is-compact .house-event-form :is(input, select) { width:100%; min-width:0; }
  .house-event-composer.is-compact .house-event-form-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .house-event-composer.is-compact .house-event-form-actions button { width:100%; }
}
@media (pointer: coarse) and (min-width: 801px) {
  .house-history-timeline:not(.is-compact) { --house-history-timeline-height:220px; }
}
.house-flock-history-panel { margin-top:2px; }
.house-upcoming-events { display:grid; gap:7px; margin:2px 0 4px; padding:9px 0; border-top:1px solid rgba(255,255,255,.42); border-bottom:1px solid rgba(255,255,255,.42); }
.house-upcoming-events-header { display:flex; align-items:center; min-height:18px; }
.house-upcoming-events-list { display:flex; flex-wrap:wrap; gap:7px; }
.house-upcoming-event { display:flex; align-items:center; gap:9px; min-width:260px; max-width:100%; padding:8px 10px; border:1px solid rgba(255,255,255,.48); background:rgba(255,255,255,.07); color:#fff; text-align:left; cursor:pointer; }
.house-upcoming-event:hover, .house-upcoming-event:focus-visible { background:rgba(255,255,255,.15); }
.house-upcoming-event-marker { flex:0 0 9px; width:9px; height:9px; box-shadow:0 0 0 3px rgba(255,255,255,.14); }
.house-upcoming-event-copy { display:grid; gap:2px; min-width:0; }
.house-upcoming-event-copy :is(.house-upcoming-event-title, .house-upcoming-event-description) { display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; }
.house-upcoming-event-title { -webkit-line-clamp:1; }
.house-upcoming-event-description { -webkit-line-clamp:2; color:rgba(255,255,255,.76); font-size:.78rem; }
.house-upcoming-event-time, .house-upcoming-event-age { color:rgba(255,255,255,.76); font-size:.82rem; }
.house-upcoming-event-age { margin-left:auto; white-space:nowrap; }
.modern-management-shell { width:min(920px,100%); min-height:100vh; margin:0 auto; padding:18px; background:#50514f; }.modern-management-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.48); }.modern-management-header h2 { margin:0; font-size:1.1rem; }.modern-management-header > div { display:flex; gap:6px; }.modern-management-search { margin:12px 0; max-width:360px; }.modern-management-list { display:grid; gap:5px; }.modern-management-row { display:flex; align-items:stretch; min-height:44px; border:1px solid rgba(255,255,255,.3); border-left:3px solid #aaa; background:rgba(48,49,47,.6); }.modern-management-row.severity-high { border-left-color:#ff7777; }.modern-management-row.severity-medium { border-left-color:#f4bc62; }.modern-management-main { display:flex; flex:1; align-items:center; gap:9px; padding:8px 10px; text-align:left; border:0; background:transparent; cursor:pointer; }.modern-management-main strong { flex:1; }.modern-management-main > span:not(.online-dot) { color:var(--muted); font-size:.82rem; }.modern-management-actions { display:flex; align-items:center; padding:4px; border-left:1px solid rgba(255,255,255,.22); }.modern-management-actions .btn-icon { width:15px; height:15px; }.modern-management-main .flock-age-badge { padding:0; border:0; background:transparent; }.modern-management-main .flock-age-badge-label { display:none; }.modern-management-form { display:grid; gap:10px; max-width:540px; margin-top:18px; padding:12px; border:1px solid rgba(255,255,255,.4); background:#41423f; }.modern-management-form .field { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:8px; }.modern-management-form .field button { margin-top:6px; justify-self:start; }
.modern-modal-backdrop { position:fixed; inset:0; z-index:10002; display:grid; place-items:center; padding:18px; background:rgba(18,19,18,.76); }.modern-modal-card { width:min(760px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:14px; border:1px solid rgba(255,255,255,.55); border-radius:5px; color:#fff; background:#3c3d3b; box-shadow:0 18px 48px rgba(0,0,0,.48); }.modern-house-settings-modal { width:min(760px,100%); }.modern-settings-editor { display:grid; gap:12px; }.modern-settings-editor .selected-query-header { padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.42); }.modern-settings-editor .panel-kicker, .modern-settings-editor .subpanel-kicker { color:#cfcfcf; }.modern-settings-editor .subpanel { padding:10px; border:1px solid rgba(255,255,255,.28); border-radius:4px; background:#454644; box-shadow:none; }.modern-settings-editor .field { display:grid; gap:5px; }.modern-settings-editor .field > span { color:#d4d4d4; font-size:.8rem; }.modern-settings-editor input, .modern-settings-editor select { min-height:34px; color:#fff; background:#30312f; border:1px solid rgba(255,255,255,.4); border-radius:4px; }.workspace-settings-menu-shell .workspace-settings-popover { gap:7px; padding:10px; border:1px solid rgba(255,255,255,.55); border-radius:4px; color:#fff; background:#3c3d3b; box-shadow:0 12px 28px rgba(0,0,0,.42); }.workspace-settings-menu-shell .workspace-settings-popover-title { color:#d0d0d0; }.workspace-settings-menu-shell .workspace-settings-menu-item { min-height:34px; border-radius:3px; color:#fff; }.workspace-settings-menu-shell .workspace-settings-menu-item:hover { background:rgba(255,255,255,.12); }.workspace-settings-menu-shell .workspace-settings-sensor-row { padding:8px; border-color:rgba(255,255,255,.25); border-radius:3px; background:#454644; }
@media (max-width: 720px) { .app-shell { padding:0; gap:0; }.modern-workspace { grid-template-columns:1fr; } }

@media (max-width: 720px) {
  .modern-timeline-track { touch-action:none; }
  .analysis-drawer-backdrop { align-items:flex-end; }
  .analysis-drawer { top:auto; right:0; bottom:0; width:100%; height:72vh; max-height:72vh; padding:8px 14px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.65); border-left:0; border-radius:12px 12px 0 0; box-shadow:0 -14px 35px rgba(0,0,0,.35); animation-name:analysis-drawer-rise; }
  .analysis-drawer.is-closing { animation-name:analysis-drawer-drop; }
}

@keyframes analysis-drawer-slide-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes analysis-drawer-slide-out { from { transform:translateX(0); } to { transform:translateX(100%); } }
@keyframes analysis-drawer-rise { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes analysis-drawer-drop { from { transform:translateY(0); } to { transform:translateY(100%); } }
.analysis-drawer-backdrop { position:fixed; inset:0; z-index:1200; display:flex; justify-content:flex-end; background:rgba(0,0,0,0); animation:analysis-backdrop-in 180ms ease-out both; }.analysis-drawer-backdrop.is-closing { animation:analysis-backdrop-out 180ms ease-in both; }.analysis-drawer { position:absolute; z-index:1; top:0; right:0; width:min(620px,52vw); height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; translate:0 var(--analysis-drawer-pull, 0px); padding:12px 14px 18px; background:#3b3c3a; border-left:1px solid rgba(255,255,255,.65); box-shadow:-14px 0 35px rgba(0,0,0,.35); animation:analysis-drawer-slide-in 180ms ease-out both; }.analysis-drawer:not(.is-pulling) { transition:translate 160ms ease-out; }.analysis-drawer.is-pulling { transition:none; }.analysis-drawer.is-closing { pointer-events:none; animation:analysis-drawer-slide-out 180ms ease-in both; }.analysis-drawer-handle { display:none; width:42px; height:4px; margin:0 auto 8px; border-radius:4px; background:rgba(255,255,255,.55); }.analysis-drawer-close { float:right; margin:0 0 10px 10px; }
@keyframes analysis-backdrop-in { from { background:rgba(0,0,0,0); } to { background:rgba(0,0,0,.12); } }
@keyframes analysis-backdrop-out { from { background:rgba(0,0,0,.12); } to { background:rgba(0,0,0,0); } }
@media (max-width: 720px) { .analysis-drawer-backdrop { align-items:flex-end; }.analysis-drawer { top:auto; right:0; bottom:0; width:100%; height:72vh; max-height:72vh; padding:8px 14px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.65); border-left:0; border-radius:12px 12px 0 0; box-shadow:0 -14px 35px rgba(0,0,0,.35); animation-name:analysis-drawer-rise; }.analysis-drawer.is-closing { animation-name:analysis-drawer-drop; }.analysis-drawer-handle { display:block; }.analysis-drawer-close { display:none; } }

/* Desktop house rail: icons remain visible; the house controls expand only on hover. */
@media (min-width: 801px) {
  .modern-workspace { grid-template-columns:60px minmax(0,1fr); align-items:start; }
  .modern-house-sidebar { position:sticky; top:0; align-self:start; width:60px; height:100dvh; min-height:0; padding:8px; transition:width 150ms ease; }
  .modern-house-sidebar:hover, .modern-house-sidebar:focus-within { width:300px; box-shadow:10px 0 24px rgba(0,0,0,.22); }
  .modern-house-sidebar:not(:hover):not(:focus-within) > :not(.modern-sidebar-actions) { visibility:hidden; pointer-events:none; }
  .modern-sidebar-actions { grid-template-columns:1fr; width:42px; border-bottom:0; }
  .modern-house-sidebar:hover .modern-sidebar-actions, .modern-house-sidebar:focus-within .modern-sidebar-actions { grid-template-columns:repeat(3,1fr); width:100%; border-bottom:1px solid rgba(255,255,255,.4); }
  .modern-house-tabs { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
}
.modern-weather-panel { width:270px; min-width:270px; }.modern-weather-panel .weather-badge-copy { overflow:visible; }.modern-weather-panel .weather-badge-copy strong, .modern-weather-panel .weather-badge-copy span { white-space:nowrap; overflow:visible; text-overflow:clip; }.modern-run-panel > button { width:100%; height:100%; padding:0; border:0; background:transparent; }.modern-run-panel > button:hover { background:rgba(255,255,255,.1); }

/* Mobile house dashboards use native disclosures so each dense section is opened intentionally. */
@media (max-width: 800px) {
  .modern-mobile-navigation { display:block; min-width:0; padding:0 8px; border:0; background:rgba(45,46,44,.32); }
  .modern-mobile-navigation > summary { display:flex; align-items:center; gap:6px; min-height:40px; padding:8px 4px; color:#fff; cursor:pointer; list-style:none; user-select:none; }
  .modern-mobile-navigation > summary::-webkit-details-marker { display:none; }
  .modern-mobile-navigation > summary .btn-icon { width:15px; height:15px; transition:transform 150ms ease; }
  .modern-mobile-navigation[open] > summary .btn-icon { transform:rotate(180deg); }
  .modern-mobile-navigation-content { display:flex; flex-direction:column; gap:8px; min-width:0; max-height:none; overflow:visible; }
  .modern-mobile-navigation-content .modern-house-tabs { min-height:0; max-height:none; overflow:visible; }
  .mobile-dashboard-section { display:block; min-width:0; padding:0 8px; border:1px solid rgba(255,255,255,.42); background:rgba(45,46,44,.42); }
  .mobile-dashboard-section > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:46px; padding:11px 4px; color:#fff; font-weight:600; cursor:pointer; list-style:none; user-select:none; }
  .mobile-dashboard-section > summary::-webkit-details-marker { display:none; }
  .mobile-dashboard-section > summary::after { flex:0 0 auto; color:rgba(255,255,255,.82); content:"+"; font-size:1.2rem; font-weight:400; line-height:1; }
  .mobile-dashboard-section[open] > summary::after { content:"−"; }
  .mobile-dashboard-section-content { display:grid; min-width:0; gap:8px; padding:0 4px 12px; }
  .mobile-dashboard-section-content .panel { min-width:0; border:0; background:transparent; }
  .mobile-dashboard-section-content .panel-title-block,
  .mobile-dashboard-section-content .house-upcoming-events-header,
  .mobile-dashboard-section-content .modern-timeline-header h2 { display:none; }
  .mobile-dashboard-section-content .selected-query-header { justify-content:flex-end; padding-bottom:0; border-bottom:0; }
  .mobile-dashboard-section-content .house-live-frame-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); justify-content:stretch; }
  .mobile-dashboard-section-content .house-live-frame-grid figure { max-width:none; }
  .mobile-dashboard-section-content .modern-timeline { padding:0; border:0; }
  .mobile-dashboard-section-content .modern-house-meta { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px; padding:0; border:0; }
  .mobile-dashboard-section-content .modern-house-meta > strong { grid-column:1 / -1; min-width:0; margin:0; padding:2px 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-dashboard-section-content .modern-meta-panel,
  .mobile-dashboard-section-content .modern-weather-panel { width:auto; min-width:0; height:48px; }
  .mobile-dashboard-section-content .modern-meta-panel > .weather-badge,
  .mobile-dashboard-section-content .modern-meta-panel > .edge-heartbeat-badge { overflow:hidden; }
  .mobile-dashboard-section-content .house-chat-panel { padding:0; }
}

/* Keep the primary navigation rows and event cards legible against the gray shell. */
.modern-house-tab { border-top-color:rgba(255,255,255,.18); border-right-color:rgba(255,255,255,.18); border-bottom-color:rgba(255,255,255,.18); }
.modern-management-row { border-top-color:rgba(255,255,255,.38); border-right-color:rgba(255,255,255,.38); border-bottom-color:rgba(255,255,255,.38); }
.house-upcoming-event { border-color:rgba(255,255,255,.58); }

.selected-query-header,
.subpanel-header,
.image-lightbox-header,
.assessment-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.brand-block h1,
.panel-title-block h2,
.empty-state h3,
.content-header h2,
.image-lightbox-header h2 {
  margin: 6px 0 0;
}

.brand-block h1 {
  font-size: 1.45rem;
}

.eyebrow,
.panel-kicker,
.subpanel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
}

.eyebrow::before,
.panel-kicker::before,
.subpanel-kicker::before {
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
}

.subpanel-kicker {
  margin-bottom: 10px;
}

.panel,
.subpanel {
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.panel {
  background: var(--panel);
  padding: 16px;
}

.subpanel {
  background: var(--subpanel);
  padding: 16px;
  min-width: 0;
}

.app-content {
  flex: 1;
  display: grid;
  gap: 18px;
  min-width: 0;
}

.app-content-workspace-map {
  display: block;
  min-height: 100vh;
}

.app-shell-workspace-map {
  gap: 0;
  min-height: 100vh;
  padding: 0;
}

.content-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  background:
    radial-gradient(circle at top right, rgba(93, 214, 192, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(13, 33, 49, 0.96), rgba(8, 20, 31, 0.96));
}

.content-header h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  margin: 4px 0 0;
}

.content-header p {
  margin: 4px 0 0;
  max-width: 66ch;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.2;
}

.content-header-compact-desc p {
  max-width: 52ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-search-field {
  margin-top: 8px;
  margin-bottom: 0;
  max-width: 320px;
}

.stage-search-row {
  margin-bottom: 2px;
}

.content-header-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.field span {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.muted-text {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.button-row,
.assessment-stack,
.admin-table,
.admin-form,
.pill-row {
  display: grid;
  gap: 8px;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
}

.primary-button,
.ghost-button {
  border-radius: 10px;
  padding: 10px 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease, border-color 120ms ease, background 120ms ease;
}

.primary-button {
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  color: #041218;
}

.ghost-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink);
}

.ghost-button-small {
  padding: 7px 10px;
}

.btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 6px;
}

.primary-button:hover,
.ghost-button:hover,
.table-row-button:hover {
  transform: translateY(-1px);
}

.primary-button:disabled,
.ghost-button:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.main-dashboard-shell,
.admin-shell {
  display: grid;
  gap: 18px;
  min-width: 0;
}

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

.workspace-grid-bottom {
  align-items: start;
}

.full-width-panel {
  width: 100%;
  min-width: 0;
}

.severity-timeline-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.severity-timeline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 18px;
  align-items: start;
}

.severity-timeline-grid > .severity-timeline-panel {
  min-width: 0;
  position: relative;
  z-index: 3;
}

.severity-timeline-panel-bottom {
  margin-top: 0;
}

.prompt-dashboard {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}

.prompt-sidebar,
.prompt-editor-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.prompt-sidebar-list {
  display: grid;
  gap: 10px;
  max-height: 70vh;
  overflow: auto;
  padding-right: 4px;
}

.prompt-sidebar-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 22, 34, 0.82);
  cursor: pointer;
  text-align: left;
}

.prompt-sidebar-item strong {
  font-size: 0.96rem;
}

.prompt-sidebar-item span {
  color: var(--muted);
  font-size: 0.85rem;
}

.prompt-sidebar-item-active {
  border-color: rgba(93, 214, 192, 0.45);
  background: linear-gradient(180deg, rgba(15, 38, 56, 0.96), rgba(10, 25, 38, 0.98));
}

.prompt-text-field textarea {
  min-height: 60vh;
  resize: vertical;
}

.stage-shell {
  display: grid;
  gap: 18px;
}

.stage-shell-compact {
  gap: 10px;
}

.stage-shell-compact .panel {
  padding: 12px;
}

.stage-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-toolbar-search {
  max-width: 320px;
}

.stage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stage-header-side {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.stage-header-side .field {
  margin-bottom: 0;
  min-width: 160px;
}

.house-overview-panel {
  display: grid;
  gap: 12px;
  border-color: rgba(93, 214, 192, 0.2);
  background:
    radial-gradient(circle at top right, rgba(93, 214, 192, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(11, 30, 45, 0.94), rgba(7, 19, 30, 0.96));
}

.house-overview-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.house-chat-panel { display: grid; gap: 12px; }
.house-chat-note { margin: 0; color: var(--muted); font-size: .9rem; }
.house-chat-transcript { display: grid; gap: 8px; max-height: 440px; overflow: auto; padding: 4px; }
.house-chat-message { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(4, 18, 28, .32); }
.house-chat-message p { margin: 6px 0 0; white-space: pre-wrap; line-height: 1.45; }
.house-chat-user { border-color: rgba(93, 214, 192, .3); }
.house-chat-agent { border-color: rgba(126, 159, 255, .26); }
.house-chat-markdown { margin-top: 6px; line-height: 1.5; overflow-wrap: anywhere; }
.house-chat-markdown > :first-child { margin-top: 0; }
.house-chat-markdown > :last-child { margin-bottom: 0; }
.house-chat-markdown h1, .house-chat-markdown h2, .house-chat-markdown h3, .house-chat-markdown h4, .house-chat-markdown h5, .house-chat-markdown h6 { margin: 1em 0 .45em; color: var(--ink); }
.house-chat-markdown h1 { font-size: 1.25rem; }
.house-chat-markdown h2 { font-size: 1.12rem; }
.house-chat-markdown h3, .house-chat-markdown h4, .house-chat-markdown h5, .house-chat-markdown h6 { font-size: 1rem; }
.house-chat-markdown p, .house-chat-markdown ul, .house-chat-markdown ol, .house-chat-markdown blockquote, .house-chat-markdown pre { margin: .65em 0; }
.house-chat-markdown ul, .house-chat-markdown ol { padding-inline-start: 1.4rem; }
.house-chat-markdown blockquote { padding-inline-start: .8rem; border-inline-start: 3px solid rgba(126, 159, 255, .5); color: var(--muted); }
.house-chat-markdown code { padding: .08em .28em; border-radius: 4px; background: rgba(126, 159, 255, .13); font-family: var(--mono); font-size: .92em; }
.house-chat-markdown pre { overflow: auto; padding: .7rem; border-radius: 8px; background: rgba(1, 10, 17, .68); }
.house-chat-markdown pre code { padding: 0; background: transparent; }
.house-chat-markdown table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }
.house-chat-markdown th, .house-chat-markdown td { padding: .38rem .55rem; border: 1px solid var(--line); text-align: start; vertical-align: top; }
.house-chat-markdown th { background: rgba(126, 159, 255, .12); }
.house-chat-markdown a { color: var(--accent); text-decoration: underline; }
.house-chat-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.house-chat-form textarea { resize: vertical; min-height: 64px; }

.house-analytics-panel {
  display: grid;
  gap: 16px;
}

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

.house-analytics-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(4, 18, 28, 0.32);
}

.house-analytics-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.house-analytics-card-header h3 {
  margin: 4px 0 0;
  font-size: 1rem;
}

.house-analytics-chart-shell {
  position: relative;
  min-height: 240px;
  height: 240px;
  min-width: 0;
}

.house-analytics-chart-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.house-analytics-empty,
.house-analytics-note {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.house-analytics-note {
  margin: 0;
}

.house-overview-header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.flock-age-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 58px;
  padding: 7px 9px;
  border: 1px solid rgba(93, 214, 192, 0.28);
  border-radius: 10px;
  background: rgba(93, 214, 192, 0.08);
  color: var(--ink);
  white-space: nowrap;
}

.flock-age-badge-value {
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1;
}

.flock-age-badge-label {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1;
}

.flock-age-badge-unavailable {
  border-color: rgba(141, 165, 186, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}

.edge-heartbeat-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 230px;
  padding: 7px 9px;
  border: 1px solid rgba(141, 165, 186, 0.24);
  border-radius: 10px;
  background: rgba(141, 165, 186, 0.07);
  color: var(--ink);
}

.edge-heartbeat-status {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
}

.edge-heartbeat-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.edge-heartbeat-copy strong,
.edge-heartbeat-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edge-heartbeat-copy strong {
  font-size: 0.76rem;
  line-height: 1.15;
}

.edge-heartbeat-copy span {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.15;
}

.edge-heartbeat-online .edge-heartbeat-status {
  background: #5dd6c0;
  box-shadow: 0 0 0 3px rgba(93, 214, 192, 0.12);
}

.edge-heartbeat-stale .edge-heartbeat-status {
  background: #e5b65f;
  box-shadow: 0 0 0 3px rgba(229, 182, 95, 0.12);
}

.weather-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(7, 19, 30, 0.72);
}

.weather-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
}

.weather-badge-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.weather-badge-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.weather-badge-copy strong {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.2;
}

.weather-badge-copy span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
}

.weather-badge-unavailable {
  border-color: rgba(141, 165, 186, 0.22);
  color: var(--muted);
}

.weather-badge-unavailable .weather-badge-icon {
  color: var(--muted);
}

.weather-badge-sun {
  border-color: rgba(255, 197, 92, 0.28);
}

.weather-badge-sun .weather-badge-icon {
  color: #ffc860;
}

.weather-badge-cloud {
  border-color: rgba(141, 165, 186, 0.22);
}

.weather-badge-cloud .weather-badge-icon {
  color: #a8bfd4;
}

.weather-badge-rain {
  border-color: rgba(93, 214, 192, 0.2);
}

.weather-badge-rain .weather-badge-icon {
  color: #7fe2d0;
}

.weather-badge-snow {
  border-color: rgba(188, 222, 255, 0.24);
}

.weather-badge-snow .weather-badge-icon {
  color: #caebff;
}

.weather-badge-fog {
  border-color: rgba(177, 193, 206, 0.18);
}

.weather-badge-fog .weather-badge-icon {
  color: #b9c7d3;
}

.chart-range-preset-field {
  min-width: 200px;
}

.chart-range-applied-pill {
  align-self: flex-end;
  border: 1px solid rgba(93, 214, 192, 0.24);
  background: rgba(93, 214, 192, 0.12);
  color: #9cf8e8;
}

.chart-range-picker-shell {
  position: relative;
  display: grid;
  gap: 8px;
  align-self: flex-end;
}

.chart-range-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 8;
  width: min(360px, 86vw);
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(12, 31, 47, 0.98), rgba(7, 18, 28, 0.98));
  box-shadow: var(--shadow);
}

.chart-range-popover-title {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-column,
.workspace-column-wide {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.workspace-column-wide {
  min-width: 0;
}

.query-table-panel,
.selected-query-panel {
  min-width: 0;
}

.table-shell {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.data-strip {
  width: 100%;
  min-width: 0;
}

.data-strip-head,
.data-strip-row {
  display: grid;
  align-items: stretch;
}

.data-strip-query-cols {
  grid-template-columns: minmax(220px, 2.1fr) minmax(200px, 1.9fr) minmax(160px, 1.35fr) minmax(180px, 1.55fr) minmax(110px, 0.7fr);
}

.data-strip-issue-cols {
  grid-template-columns: minmax(180px, 1.1fr) minmax(150px, 0.9fr) minmax(150px, 0.95fr) minmax(330px, 2.1fr) minmax(300px, 2fr) minmax(150px, 0.9fr);
}

.data-strip-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(8, 24, 37, 0.98);
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.data-strip-cell {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.data-strip-row {
  cursor: pointer;
  transition: background 120ms ease;
}

.data-strip-row:hover {
  background: rgba(93, 214, 192, 0.06);
}

.data-strip-row-active {
  background: rgba(93, 214, 192, 0.1);
}

.compact-table-shell {
  max-height: 260px;
}

.query-table-scroll-shell {
  max-height: 460px;
  overflow-y: auto;
}

.severity-timeline {
  display: grid;
  gap: 12px;
}

.severity-timeline-track {
  position: relative;
  min-height: 28px;
}

.severity-timeline-track-single {
  min-height: 152px;
  height: 152px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(4, 18, 28, 0.22);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.full-width-panel {
  width: 100%;
}

.severity-timeline-canvas-shell {
  height: 100%;
  min-width: 100%;
}

.severity-timeline-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.severity-hour-chart {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.severity-hour-chart-header,
.severity-hour-chart-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.severity-hour-chart-footer {
  color: var(--muted);
  font-size: 0.84rem;
  flex-wrap: wrap;
}

.severity-hour-chart-track {
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.severity-hour-chart-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.severity-hour-chart-shell {
  position: relative;
  width: max-content;
  min-height: 152px;
  height: 152px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(4, 18, 28, 0.22);
  overflow: visible;
  min-width: 100%;
}

.severity-hour-chart-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.severity-hour-tooltip {
  position: absolute;
  min-width: 220px;
  max-width: min(300px, calc(100% - 20px));
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(7, 18, 28, 0.96);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(12px, -100%);
  transition: opacity 120ms ease;
  z-index: 20;
}

.severity-hour-tooltip-visible {
  opacity: 1;
  pointer-events: auto;
}

.severity-hour-tooltip-inner {
  display: grid;
  gap: 8px;
}

.severity-hour-tooltip-title {
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.severity-hour-tooltip-note {
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.severity-hour-tooltip-rows {
  display: grid;
  gap: 6px;
}

.severity-hour-tooltip-row {
  width: 100%;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(15, 31, 46, 0.84);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

.severity-hour-tooltip-row:hover {
  border-color: rgba(93, 214, 192, 0.35);
}

.severity-hour-tooltip-row-hidden {
  opacity: 0.56;
  text-decoration: line-through;
}

.severity-hour-tooltip-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.severity-hour-tooltip-label {
  font-size: 0.82rem;
}

.severity-hour-tooltip-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px), (pointer: coarse) {
  .house-analytics-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .house-analytics-chart-shell {
    min-height: 220px;
    height: 220px;
  }

  .severity-timeline-track-single {
    height: 184px;
    padding: 12px 10px 10px;
  }

  .severity-timeline-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .severity-hour-chart-shell {
    height: 220px;
  }

  .severity-hour-tooltip {
    max-width: min(300px, calc(100vw - 48px));
  }
}

.severity-timeline-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.84rem;
}

.query-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  background: rgba(5, 15, 23, 0.52);
}

.query-table th,
.query-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.query-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(8, 24, 37, 0.98);
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.query-table tbody tr {
  cursor: pointer;
  transition: background 120ms ease;
}

.query-table tbody tr:hover {
  background: rgba(93, 214, 192, 0.06);
}

.query-row-active {
  background: rgba(93, 214, 192, 0.1);
}

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

.project-list {
  display: grid;
  gap: 10px;
}

.entity-card,
.project-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 22, 34, 0.86);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.entity-card {
  min-height: 180px;
  align-content: space-between;
}

.entity-card:hover,
.project-card:hover {
  border-color: rgba(93, 214, 192, 0.35);
  background: rgba(12, 30, 46, 0.94);
  transform: translateY(-1px);
}

.project-card-active {
  border-color: rgba(93, 214, 192, 0.5);
  background: linear-gradient(180deg, rgba(15, 38, 56, 0.96), rgba(10, 25, 38, 0.98));
  box-shadow: inset 0 0 0 1px rgba(93, 214, 192, 0.16);
}

.project-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.project-card-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.entity-card-body h3 {
  margin: 0;
  font-size: 1.1rem;
}

.entity-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.entity-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(93, 214, 192, 0.22);
  background: rgba(93, 214, 192, 0.08);
  color: var(--accent);
  flex: 0 0 auto;
}

.entity-card-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.entity-card-body p {
  margin: 8px 0 0;
  color: var(--muted);
}

.entity-card-actions,
.button-row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.entity-card-add {
  place-items: center;
  align-content: center;
  justify-items: center;
  min-height: 220px;
  background:
    linear-gradient(180deg, rgba(14, 36, 53, 0.88), rgba(8, 21, 32, 0.92));
  border-style: dashed;
  border-width: 2px;
}

.entity-card-add-plus {
  font-size: 4.5rem;
  line-height: 0.9;
  color: var(--accent);
  font-weight: 300;
}

.entity-card-add-label {
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.ghost-button-danger {
  border-color: rgba(255, 127, 127, 0.32);
  color: var(--error);
}

.editor-panel {
  display: grid;
  gap: 14px;
}

.field-wide {
  grid-column: 1 / -1;
}

.table-row-button {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.table-row-button-active {
  color: var(--accent);
}

.query-detail-stack {
  display: grid;
  gap: 12px;
}

.query-stage-header {
  align-items: center;
}

.query-stage-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.query-stage-time {
  color: var(--muted);
  font-size: 0.9rem;
}

.query-main-stack {
  display: grid;
  gap: 12px;
}

.query-final-summary-panel {
  display: grid;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(93, 214, 192, 0.12), rgba(7, 19, 30, 0.08)),
    var(--subpanel);
  border-color: rgba(93, 214, 192, 0.28);
}

.query-final-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.query-final-summary-body {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.98rem;
  line-height: 1.65;
}

.detailed-information-panel {
  display: grid;
  gap: 12px;
}

.detailed-information-panel[open] {
  background:
    radial-gradient(circle at top right, rgba(93, 214, 192, 0.06), transparent 26%),
    var(--subpanel);
}

.detailed-information-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
}

.detailed-information-summary::-webkit-details-marker {
  display: none;
}

.detailed-information-body {
  display: grid;
  gap: 12px;
}

.agentic-trace-panel {
  display: grid;
  gap: 8px;
}

.trace-flow {
  display: grid;
  gap: 6px;
}

.trace-event-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(7, 19, 30, 0.56);
}

.trace-event-card-failed,
.trace-event-card-incomplete {
  border-color: rgba(210, 76, 76, 0.68);
  background: rgba(74, 18, 18, 0.48);
}

.trace-event-card-degraded {
  border-color: rgba(214, 170, 61, 0.72);
  background: rgba(78, 62, 14, 0.48);
}

.trace-event-card-skipped {
  border-color: rgba(122, 132, 147, 0.55);
  background: rgba(44, 52, 62, 0.45);
}

.trace-event-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
}

.trace-event-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-event-summary::-webkit-details-marker {
  display: none;
}

.trace-event-card[open] .trace-event-summary {
  border-bottom: 1px solid var(--line);
}

.trace-event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.trace-event-meta {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trace-event-body p {
  margin: 0 0 4px;
}

.trace-json-box {
  max-height: 180px;
  margin-top: 6px;
}

.trace-event-body {
  padding: 8px 10px;
}

.metadata-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.metadata-list div {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.metadata-list dt {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.metadata-list dd {
  margin: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.detail-table th,
.detail-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.detail-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(8, 24, 37, 0.98);
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compact-metadata-list {
  gap: 8px;
}

.compact-metadata-list div {
  padding-bottom: 8px;
}

.result-box {
  min-height: 240px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: rgba(5, 14, 22, 0.88);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  overflow: auto;
}

.result-box-compact {
  min-height: 0;
  max-height: 220px;
  font-size: 0.92rem;
}

.result-box-thin {
  min-height: 0;
  max-height: 140px;
  margin: 0;
  padding: 10px 12px;
  font-size: 0.88rem;
}

.result-box-bottom-line {
  min-height: 160px;
  background: rgba(34, 25, 12, 0.46);
  border-color: rgba(244, 188, 98, 0.24);
}

.assessment-card,
.bottom-line-card {
  display: grid;
  gap: 10px;
}

.assessment-card-header {
  align-items: baseline;
}

.assessment-card-summary {
  cursor: pointer;
  list-style: none;
}

.assessment-card-summary::-webkit-details-marker {
  display: none;
}

.assessment-card summary strong::before {
  content: "+";
  display: inline-block;
  width: 14px;
  margin-right: 8px;
  color: var(--accent);
}

.assessment-card[open] summary strong::before {
  content: "-";
}

.assessment-model,
.query-time,
.query-rating {
  color: var(--muted);
  font-size: 0.82rem;
}

.severity-pill,
.pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pill {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

.pill-accent {
  background: rgba(93, 214, 192, 0.12);
  color: #9cf8e8;
}

.pill-ok,
.severity-pill-none {
  background: var(--accent-soft);
  color: #8ef2df;
}

.vet-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, opacity 120ms ease;
}

.vet-chip-selected {
  border-color: rgba(93, 214, 192, 0.45);
  background: rgba(93, 214, 192, 0.22);
  color: #9cf8e8;
}

.vet-chip-unselected {
  border-color: var(--line);
  background: rgba(8, 24, 37, 0.55);
  color: var(--muted);
}

.vet-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.playback-toggle-pill {
  min-width: 110px;
  justify-content: center;
}

.severity-pill-low {
  background: var(--warning-soft);
  color: var(--warning);
}

.severity-pill-medium {
  background: rgba(217, 137, 82, 0.16);
  color: #ff9f68;
}

.severity-pill-high {
  background: var(--error-soft);
  color: var(--error);
}

.severity-pill-unknown {
  background: rgba(141, 165, 186, 0.12);
  color: var(--muted);
}

.frame-image,
.frame-image-full,
.frame-thumbnail {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.frame-image {
  object-fit: contain;
  background: rgba(4, 11, 17, 0.86);
  max-height: 840px;
}

.frame-image-full {
  height: auto;
}

.frame-thumbnail {
  width: 156px;
  height: 92px;
  object-fit: cover;
  background: rgba(4, 11, 17, 0.86);
  border-radius: 12px;
}

.picture-preview-button {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6, 17, 27, 0.72);
  cursor: zoom-in;
}

.picture-table-shell {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.picture-table td:first-child {
  width: 30%;
  white-space: nowrap;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 13, 0.82);
  backdrop-filter: blur(10px);
  z-index: 1000;
}

.image-lightbox-inner {
  width: min(1400px, 100%);
  max-height: calc(100vh - 56px);
  padding: 16px;
  border-radius: 18px;
  background: rgba(8, 24, 37, 0.98);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.44);
  overflow: hidden;
}

.image-lightbox-stage {
  max-height: calc(100vh - 190px);
  overflow: auto;
  border-radius: 14px;
  background: rgba(4, 11, 17, 0.9);
  padding: 12px;
}

.review-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.comment-form {
  display: grid;
  gap: 10px;
}

.comment-list {
  display: grid;
  gap: 8px;
}

.comment-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(7, 20, 31, 0.58);
  padding: 10px;
}

.comment-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.comment-card p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.status {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.92rem;
}

.status.error {
  background: var(--error-soft);
  color: var(--error);
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: rgba(6, 16, 24, 0.42);
  text-align: center;
  padding: 18px;
}

.empty-state p {
  color: var(--muted);
  max-width: 42ch;
}

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

.login-page-card {
  width: min(960px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(93, 214, 192, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(12, 29, 44, 0.98), rgba(5, 16, 25, 0.96));
  box-shadow: var(--shadow);
}

.login-page-copy h1 {
  margin: 10px 0 12px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.97;
  letter-spacing: -0.05em;
}

.login-page-copy p {
  max-width: 38ch;
  color: var(--muted);
  font-size: 1.02rem;
}

.login-form {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(9, 23, 35, 0.82);
  border: 1px solid var(--line);
}

.admin-shell {
  grid-template-columns: 1fr;
  align-items: start;
}

.admin-panel-wide {
  grid-column: 1 / -1;
}

.admin-accordion {
  padding: 0;
  overflow: hidden;
}

.admin-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  background: rgba(8, 24, 37, 0.72);
}

.admin-accordion-summary::-webkit-details-marker {
  display: none;
}

.admin-accordion-title h2 {
  margin: 6px 0 0;
}

.admin-accordion-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-accordion-summary::after {
  content: "+";
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 700;
}

.admin-accordion[open] .admin-accordion-summary::after {
  content: "-";
}

.admin-accordion-body {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
}

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

.admin-form-grid-wide {
  grid-template-columns: 1fr;
}

.admin-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(7, 18, 28, 0.82);
}

.admin-row-button {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.admin-row-stack {
  grid-template-columns: 1fr;
}

.admin-entity-table {
  min-width: 760px;
}

.admin-entity-row {
  cursor: pointer;
  transition: background 120ms ease;
}

.admin-entity-row:hover {
  background: rgba(93, 214, 192, 0.06);
}

@media (max-width: 1180px) {
  .app-shell {
    flex-direction: column;
  }

  .workspace-grid,
  .card-grid,
  .prompt-dashboard,
  .admin-shell,
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .content-header {
    flex-direction: column;
  }

  .content-header-status {
    justify-content: flex-start;
  }

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

@media (max-width: 720px) {
  .app-shell {
    padding: 12px;
    gap: 12px;
  }

  .panel,
  .subpanel {
    padding: 14px;
  }

  .data-strip-cell {
    white-space: nowrap;
  }

  .selected-query-header,
  .image-lightbox-header,
  .stage-header {
    flex-direction: column;
  }
}

.app-shell-modern .image-lightbox { padding:14px; background:rgba(20,21,20,.84); backdrop-filter:blur(5px); }.app-shell-modern .image-lightbox-inner { width:min(1500px,100%); max-height:calc(100vh - 28px); padding:12px; border:0; border-radius:0; color:#fff; background:#3c3d3b; box-shadow:0 20px 60px rgba(0,0,0,.48); }.app-shell-modern .image-lightbox-header { align-items:center; min-height:38px; padding:0 0 10px; border-bottom:1px solid rgba(255,255,255,.34); }.app-shell-modern .image-lightbox-header h2 { margin:0; font-size:1rem; }.app-shell-modern .image-lightbox-header .panel-kicker { color:#d0d0d0; }.app-shell-modern .image-lightbox-stage { max-height:calc(100vh - 108px); padding:0; border:0; border-radius:0; background:#242523; }.app-shell-modern .image-lightbox-stage img { width:auto; max-width:100%; max-height:calc(100vh - 108px); margin:auto; object-fit:contain; border-radius:0; }.app-shell-modern .image-lightbox .ghost-button { min-height:30px; }
.app-shell-modern .analysis-frame-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:7px; margin-top:10px; }.app-shell-modern .analysis-frame-item { display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:7px; min-height:62px; padding:4px; text-align:left; overflow:hidden; }.app-shell-modern .analysis-frame-item.is-selected { background:linear-gradient(180deg, #71726d, #52534f); }.app-shell-modern .analysis-frame-thumbnail, .app-shell-modern .analysis-frame-missing { display:block; width:56px; height:52px; object-fit:cover; background:#292a28; }.app-shell-modern .analysis-frame-missing { display:grid; place-items:center; color:#cfcfcf; font-size:.7rem; text-align:center; }.app-shell-modern .analysis-frame-item span { min-width:0; }.app-shell-modern .analysis-frame-item strong, .app-shell-modern .analysis-frame-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.app-shell-modern .analysis-frame-item small { margin-top:3px; color:#dedede; font-size:.7rem; }
@media (max-width: 720px) { .app-shell-modern .image-lightbox { position:fixed; inset:0; display:flex; padding:0; }.app-shell-modern .image-lightbox-inner { display:flex; flex-direction:column; width:100vw; height:100dvh; max-height:none; padding:12px; }.app-shell-modern .image-lightbox-stage { flex:1; max-height:none; display:grid; place-items:center; min-height:0; }.app-shell-modern .image-lightbox-stage img { max-height:100%; }.app-shell-modern .analysis-frame-list { grid-template-columns:1fr 1fr; } }
.image-lightbox { z-index:2000; }
.app-shell-modern .image-lightbox-stage, .app-shell-modern .image-lightbox-stage img { max-height:calc(100vh - 28px); }
@media (max-width: 720px) { .app-shell-modern .image-lightbox-stage { max-height:none; }.app-shell-modern .image-lightbox-stage img { max-height:100%; } }