/* Kilo operator console: video first, compact telemetry, explicit state. */
:root {
  color-scheme: dark;
  --bg: #101317;
  --panel: #181d23;
  --line: #30363e;
  --muted: #a4adb8;
  --amber: #e2b76a;
  --text: #f0f2f5;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, .button {
  display: inline-block; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 4px; background: #222830; color: var(--text);
  cursor: pointer; text-decoration: none;
}
button:hover, .button:hover { background: #2b333d; border-color: #7c8795; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--amber); border-color: var(--amber); color: #161a20; font-weight: 650; }
button.stop { color: #ffc0ba; border-color: #b45149; background: #442323; font-weight: 700; }
a { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.shell { display: grid; grid-template-columns: 176px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 18px 12px;
  display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #14181d;
}
.brand { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; font-size: 21px; font-weight: 700; letter-spacing: 2px; }
.brand img { width: 32px; height: 32px; }
.brand small { display: block; font-size: 8px; letter-spacing: 1px; color: var(--muted); }
.site-tag { padding: 12px 2px; margin: 14px 0 10px; border-block: 1px solid var(--line); font-size: 12px; overflow-wrap: anywhere; }
.site-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
nav { display: grid; gap: 4px; }
.nav { text-align: left; padding: 8px 10px; background: transparent; border-color: transparent; color: var(--muted); }
.nav.active { background: #272c33; color: var(--text); border-left: 2px solid var(--amber); }
.sidebar-bottom { margin-top: auto; font-size: 11px; overflow-wrap: anywhere; }
.sidebar-bottom button { display: block; margin-top: 16px; width: 100%; }
main { width: 100%; max-width: 2400px; padding: 18px 22px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.topbar h1 { margin: 0; font-size: 23px; letter-spacing: -.6px; font-weight: 600; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.badge { display: inline-block; padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 11px; }
.disclosure { margin: 0 0 16px; padding: 8px 10px; border-left: 2px solid var(--amber); background: #24221c; color: #decda7; font-size: 12px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; border-block: 1px solid var(--line); margin-bottom: 14px; }
.metric { padding: 8px 12px; border-right: 1px solid var(--line); min-width: 0; }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric:last-child strong { font-size: 12px; line-height: 2; }
.metric span { display: block; font-size: 11px; color: var(--muted); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-title h2 { margin: 0; }
.section-title p, .muted { color: var(--muted); font-size: 12px; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
p { margin: 8px 0 16px; }
.camera-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.camera-card, .card { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.camera-stage { display: grid; place-items: center; aspect-ratio: 16/9; background: #050608; }
.camera-stage video, .camera-stage img { width: 100%; height: 100%; object-fit: contain; }
.camera-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.camera-caption h3 { text-transform: capitalize; }
.camera-caption p { margin: 0; font-size: 11px; color: var(--muted); }
.camera-caption button { font-size: 11px; padding: 7px 9px; }
.card { padding: 14px; margin-bottom: 12px; }
.row { padding: 10px 0; border-top: 1px solid var(--line); }
.row p { font-size: 12px; margin: 5px 0 10px; overflow-wrap: anywhere; }
.incident { border-left: 3px solid var(--amber); padding-left: 16px; margin-top: 12px; }
.actions, .hours { display: flex; gap: 8px; flex-wrap: wrap; }
.account-form { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: 12px; align-items: end; }
.account-form input, .account-form select { margin-top: 6px; width: 100%; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.actions button { font-size: 12px; }
.audit { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; }
.audit span { color: var(--muted); }
dl { display: grid; grid-template-columns: 160px 1fr; gap: 10px; font-size: 13px; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
.warning, .notice { border: 1px solid #955d43; color: #ffd0b9; background: #302420; padding: 12px; border-radius: 4px; }
.notice { border-color: #456d60; color: #bce0d1; background: #1c2a24; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 420px; padding: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.login-card img { width: 38px; margin-bottom: 14px; }
.login-card h1 { font-size: 26px; letter-spacing: -.6px; }
.login-card p { color: var(--muted); font-size: 13px; }
.login-card form { display: grid; gap: 12px; margin: 24px 0; }
.login-card small { color: var(--muted); font-size: 11px; }
.login-card button { margin-top: 12px; }
label { font-size: 12px; color: #c7ced7; }
input, select { display: block; padding: 10px; background: #11161c; border: 1px solid #56616e; border-radius: 4px; color: var(--text); min-width: 0; }
.interval { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.interval input { margin-top: 6px; }
.review-video { width: 100%; max-height: 560px; display: block; margin: 20px 0; }
footer { display: flex; justify-content: space-between; gap: 24px; padding-top: 20px; margin-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
@media (max-width: 1100px) {
  .shell { grid-template-columns: 176px 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(3) { padding-left: 0; border-top: 1px solid var(--line); }
  .metric:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 800px) {
  .account-form, .integration-grid { grid-template-columns: 1fr; }
  .camera-grid { grid-template-columns: 1fr; }
  .section-title { display: block; }
}
@media (max-width: 650px) {
  .shell { display: block; }
  .sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .brand { font-size: 22px; }
  .site-tag, .sidebar-bottom p { display: none; }
  .sidebar-bottom { position: absolute; right: 16px; top: 8px; }
  .sidebar-bottom button { width: auto; margin-top: 8px; font-size: 11px; }
  .sidebar-bottom .badge { display: none; }
  nav { display: flex; flex-wrap: wrap; margin-top: 16px; gap: 4px; }
  .nav { padding: 8px 12px; font-size: 12px; }
  main { padding: 20px 16px; }
  .topbar h1 { font-size: 26px; }
  .card { padding: 16px; }
  .audit, footer { display: block; }
  .audit span { display: block; margin-top: 5px; }
  dl { grid-template-columns: 100px 1fr; }
  .login-card { padding: 28px; }
}

/* Fleet demonstration: shared public sources and explicitly simulated telemetry. */
.demo-trailer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
.demo-selector,.demo-state,.demo-map-legend{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.demo-map{position:relative;background:#edf1f2;overflow:hidden;border:1px solid var(--line);border-radius:8px}
.demo-map svg{display:block;width:100%;height:clamp(200px,21vw,300px)}.demo-pin{cursor:pointer}.demo-pin circle{stroke:white;stroke-width:3}.pin-ready{fill:#167f61}.pin-warning{fill:#b96518}.demo-pin text{font-size:14px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:4;fill:#18312b}
.map-attribution{position:absolute;right:0;bottom:0;background:#ffffffe8;padding:3px 7px;font-size:11px;color:#18312b}
.demo-camera video,.demo-camera img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#172725;border-radius:6px;margin:14px 0}
.demo-camera-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:190px;background:var(--bg);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:20px;text-align:center;margin:14px 0}
.demo-schedule-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.demo-schedule-form fieldset,.demo-schedule-form .actions{grid-column:1/-1}.demo-schedule-form fieldset{display:flex;gap:14px;flex-wrap:wrap;border:1px solid var(--line);padding:12px}.demo-schedule-form fieldset label{display:flex;align-items:center;gap:6px}.demo-schedule-form input[type=checkbox]{width:auto}
progress{display:block;width:100%;height:18px;margin:12px 0;accent-color:#258463}
@media(max-width:1100px){.demo-trailer-grid{grid-template-columns:1fr}.demo-schedule-form{grid-template-columns:1fr}}

button.danger{color:#ffc0ba;border-color:#b45149;background:#442323;font-weight:700}.badge.warn{color:var(--amber);border-color:#846a3d}

.demo-camera iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:6px;margin:14px 0;background:#11161c}
/* Operator workspace: automation, energy and event investigation. */
.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.control-group{background:#11171d;border:1px solid var(--line);border-radius:8px;padding:12px}.control-group h3{margin:0}.control-group .actions{margin-bottom:0}.day-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.timeline-clock{display:flex;justify-content:space-between;margin-left:100px;font-size:12px;color:var(--muted)}.timeline-row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:0;margin:12px 0}.timeline-row>strong{font-size:13px}.timeline-track{position:relative;height:44px;border:1px solid var(--line);border-radius:5px;background:repeating-linear-gradient(to right,#11171d 0%,#11171d calc(25% - 1px),#30363e calc(25% - 1px),#30363e 25%);overflow:hidden}.power-summary{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:12px;align-items:center;margin:14px 0}.battery-meter{display:grid;gap:8px}.battery-meter strong{font-size:32px;line-height:1}.battery-meter span{font-size:13px;color:var(--muted)}.power-summary .metric{padding:0;border:0;background:none}.power-summary .metric strong{font-size:25px}.power-summary .metric span{font-size:12px}.chart-legend,.chart-times{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px;flex-wrap:wrap}.solar-key{color:#6dd1ac}.load-key{color:#e2b76a}.power-chart{display:block;width:100%;max-height:180px;margin-top:10px}.power-chart line{stroke:var(--line)}.power-chart text{fill:var(--muted);font-size:12px}.power-chart polyline{fill:none;stroke-width:3;stroke-linejoin:round}.solar-line{stroke:#6dd1ac}.load-line{stroke:#e2b76a}.empty-state{padding:30px 0;color:var(--muted)}.event-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:18px 0}.event-toolbar label{max-width:320px}.event-row{border-top:1px solid var(--line);padding:12px 0}.event-heading{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;border:0;padding:10px 0}.event-heading strong{flex:1}.event-row dl{padding:10px 24px;background:#11171d}.demo-shell .card{border-radius:6px}.demo-shell .notice{border-left:3px solid #6dd1ac}.demo-shell .section-title{align-items:center}.demo-shell button{transition:background .15s,border-color .15s}.demo-shell button:hover:not(:disabled){border-color:#6dd1ac;background:#26352f}
@media(max-width:1100px){.power-summary{grid-template-columns:repeat(3,1fr)}.control-grid{grid-template-columns:1fr}.event-toolbar{align-items:stretch;flex-direction:column}.event-heading{flex-wrap:wrap}.event-heading .muted{width:100%;order:3}}@media(max-width:650px){.power-summary{grid-template-columns:repeat(2,1fr)}.timeline-row{grid-template-columns:75px 1fr}.timeline-clock{margin-left:75px}.timeline-block{font-size:9px}.day-tabs button{font-size:12px;padding:8px}}

.timeline-track svg{width:100%;height:44px;display:block}.timeline-block{cursor:pointer}.timeline-block rect{stroke:none}.timeline-block.armed rect{fill:#6dd1ac}.timeline-block.lights rect{fill:#e2b76a}.timeline-block.recording rect{fill:#82afea}.timeline-block text{fill:#0c1714;font-size:12px}.timeline-block:hover rect,.timeline-block:focus rect{stroke:#fff;stroke-width:2}

/* Compact connectivity workspace, inspired by UniFi's traffic and health panels. */
.telemetry-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:12px;align-items:start}.network-panel .section-title{margin-bottom:10px}.network-topology{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0;color:var(--muted);font-size:11px}.network-node{padding:7px 10px;border:1px solid var(--line);border-radius:5px}.gateway-node{color:#8db9ff;background:#14223a;border-color:#324f73}.network-link{color:#3d6eaf;letter-spacing:-2px}.network-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);padding:10px 0;margin:12px 0}.network-stats .metric{padding:0 10px}.network-stats .metric:first-child{padding-left:0}.network-stats .metric strong,.network-stats .metric:last-child strong{font-size:18px;line-height:1.5}.graph-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0}.segmented{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}.segmented button{border:0;border-radius:0;background:transparent;padding:5px 9px;font-size:11px;min-height:32px;color:var(--muted)}.segmented button.selected{background:#203552;color:#9fc6ff}.graph-readout{display:flex;justify-content:space-between;gap:8px;align-items:center}.graph-readout strong{font-size:13px;font-variant-numeric:tabular-nums}.network-chart{display:block;width:100%;max-height:240px;margin-top:8px}.network-chart line{stroke:var(--line);stroke-dasharray:3 4}.network-chart text{fill:var(--muted);font-size:11px}.network-chart polyline{fill:none;stroke-width:2;stroke-linejoin:round}.network-area{fill:#307edb;fill-opacity:.12}.network-down{stroke:#559dff}.network-up{stroke:#66d3b2}.network-chart .network-cursor{stroke:#8bb8f8;stroke-dasharray:2 3}.network-reading{fill:#559dff;fill-opacity:.15;stroke:none;cursor:crosshair}.network-reading:hover,.network-reading:focus{fill-opacity:1;stroke:#fff;stroke-width:2}.network-health{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted);margin-top:12px}.network-health svg{display:block;flex:1;height:12px;background:#0e1319;border-radius:2px}.health-good{fill:#53bd91}.health-warning{fill:#e2b76a}.radio-stats{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:11px;color:var(--muted)}.connection-good{color:#6dd1ac;border-color:#315e4b}.graph-help{margin:8px 0 0}.power-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.power-summary .metric strong{font-size:20px}.demo-camera header{display:flex;align-items:center;justify-content:space-between;gap:10px}.demo-camera h2{margin:0}.demo-camera iframe,.demo-camera video{max-height:320px;margin:10px 0}.day-tabs{margin:12px 0}.timeline-row{margin:8px 0}.timeline-track,.timeline-track svg{height:36px}.demo-schedule-form{gap:10px}.demo-schedule-form fieldset{padding:8px;gap:10px}.event-row{padding:6px 0}.event-heading{padding:6px 0}.event-toolbar{margin:12px 0}.demo-shell .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.demo-shell .metrics .metric:last-child strong{font-size:16px;line-height:1.5}progress{height:12px;margin:8px 0}.demo-shell dl{gap:6px;grid-template-columns:110px 1fr}.demo-shell h2{margin-bottom:10px}.demo-shell .demo-camera h2{margin:0}.demo-shell .warning,.demo-shell .notice{padding:8px 10px}.topbar .eyebrow{font-size:10px}.demo-shell .control-group h3{font-size:13px}
@media(max-width:1300px){.telemetry-grid{grid-template-columns:1fr}.demo-trailer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.demo-trailer-grid{grid-template-columns:1fr}.network-stats{grid-template-columns:repeat(2,1fr);gap:10px}.network-stats .metric:nth-child(3){padding-left:0}.graph-readout{align-items:start;flex-direction:column}.graph-controls{flex-wrap:wrap}}@media(max-width:650px){main{padding:12px}.demo-shell .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.network-topology{gap:5px}.network-node{padding:5px}.nav{min-height:36px}.segmented button{min-height:36px}.demo-selector button{min-height:36px}.day-tabs button{min-height:36px}}

.pwa-tools{display:flex;align-items:center;gap:8px}.pwa-install{position:relative}.pwa-install summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:4px;padding:7px 10px;font-size:12px;background:#222830;white-space:nowrap}.pwa-install summary::-webkit-details-marker{display:none}.pwa-install summary:hover{border-color:#7c8795}.pwa-help{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(310px,calc(100vw - 32px));padding:16px;border:1px solid var(--line);border-radius:6px;background:#181d23;box-shadow:0 8px 30px #0008;font-size:12px}.pwa-help p{margin:10px 0}.pwa-help small{color:var(--muted)}.pwa-tools .badge{white-space:nowrap}.login-card .pwa-tools{margin-top:18px}.login-card .pwa-help{left:0;right:auto}
@media(max-width:650px){.pwa-tools{gap:4px}.pwa-tools .badge{max-width:120px;white-space:normal;font-size:10px}.pwa-install summary{padding:7px;min-height:36px}.top-actions{gap:6px}.topbar{gap:10px}}

/* Field Operations — calm surfaces, clear priorities, and a consistent service workflow. */
.demo-shell {
  color-scheme: light;
  --bg: #f4f5f1; --panel: #fff; --line: #dfe5de; --muted: #647269;
  --text: #1c3027; --amber: #17634c;
  --input: #fbfcfa; --soft: #f2f5ed; --hover: #edf4e9;
  --warn-bg: #fff8e9; --warn-text: #895716; --warn-line: #eddbb8;
  --good-bg: #edf7eb; --good-text: #236749; --good-line: #c6dfc7;
  --danger-bg: #fff1ec; --danger-text: #a7392b; --danger-line: #e8b7ab;
  background: var(--bg); color: var(--text);
  grid-template-columns: 218px minmax(0,1fr);
  font-size: 13px;
}
.demo-shell .sidebar { background: #152d26; border: 0; padding: 28px 16px 18px; color: #e9f1ec; overflow-y: auto; }
.demo-shell .brand { color: #fff; padding: 0 10px; letter-spacing: 3px; }
.demo-shell .brand small { color: #afc6ba; letter-spacing: 1.1px; font-size: 8px; }
.demo-shell .site-tag { margin: 26px 8px 18px; border-color: #ffffff20; color: #d1dfd6; line-height: 1.8; }
.demo-shell .site-label { color: #9ab4a6; }
.demo-shell nav { gap: 3px; }
.demo-shell .nav { background: transparent; display: flex; gap: 12px; align-items: center; min-height: 39px; padding: 9px 12px; border: 0; border-radius: 7px; color: #afc6ba; font-size: 12px; }
.demo-shell .nav svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.demo-shell .nav.active { color: #fff; background: #315347; box-shadow: inset 3px 0 #bde4b5; }
.demo-shell .nav:hover:not(:disabled) { background: #28463b; color: #fff; }
.demo-shell .sidebar-bottom { padding: 26px 8px 0; color: #a9c2b4; }
.demo-shell .sidebar-bottom .badge { background: #28463b; color: #c4d8ca; border-color: #ffffff30; }
.demo-shell .sidebar-bottom button { color: #dce9e0; border-color: #ffffff25; background: transparent; }
.demo-shell main { padding: 30px 36px; max-width: 1720px; margin: 0 auto; }
.demo-shell .topbar { margin-bottom: 24px; }
.demo-shell .topbar h1 { font-size: 25px; letter-spacing: -.8px; font-weight: 650; }
.demo-shell .eyebrow, .ws-kicker { font-size: 10px; letter-spacing: 1.5px; font-weight: 650; text-transform: uppercase; }
.demo-shell .topbar .eyebrow { margin-bottom: 6px; }
.demo-shell button, .demo-shell .button { background: var(--panel); border-color: var(--line); border-radius: 7px; color: var(--text); padding: 9px 13px; font-weight: 550; }
.demo-shell button:hover:not(:disabled), .demo-shell .button:hover { background: var(--hover); border-color: #91b49b; }
.demo-shell button.primary { background: #245d46; border-color: #245d46; color: #fff; }
.demo-shell button.primary:hover:not(:disabled) { background: #184b37; }
.demo-shell button.danger, .demo-shell button.stop { color: var(--danger-text); border-color: var(--danger-line); background: var(--danger-bg); }
.demo-shell label { color: var(--muted); font-size: 12px; font-weight: 550; }
.demo-shell input, .demo-shell select, .demo-shell textarea { color: var(--text); background: var(--input); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font: inherit; }
.demo-shell textarea { width: 100%; resize: vertical; min-height: 90px; }
.demo-shell input[type=checkbox] { accent-color: #245d46; }
.demo-shell .badge { background: var(--soft); border-color: var(--line); border-radius: 5px; color: var(--muted); font-size: 10px; font-weight: 550; padding: 5px 8px; }
.demo-shell .badge.warn { color: var(--warn-text); border-color: var(--warn-line); background: var(--warn-bg); }
.demo-shell .badge.good, .demo-shell .connection-good { color: var(--good-text); border-color: var(--good-line); background: var(--good-bg); }
.demo-shell .disclosure { background: #ecefe6; border-left: 2px solid #a7b98b; color: #626c51; padding: 9px 12px; border-radius: 0 6px 6px 0; font-size: 11px; margin-bottom: 24px; }
.demo-shell .card { padding: 24px; border-radius: 12px; border-color: var(--line); box-shadow: 0 3px 12px #24321a03; margin-bottom: 20px; }
.demo-shell h2 { font-size: 18px; letter-spacing: -.45px; font-weight: 650; }
.demo-shell h3 { font-size: 14px; }
.demo-shell .notice { background: var(--good-bg); color: var(--good-text); border-color: var(--good-line); }
.demo-shell .warning { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-line); }
.demo-shell .control-group, .demo-shell .event-row dl { background: var(--soft); }
.demo-shell .timeline-track { background: repeating-linear-gradient(to right,#f7f9f4 0%,#f7f9f4 calc(25% - 1px),#dfe5de calc(25% - 1px),#dfe5de 25%); }
.demo-shell .gateway-node { color: #356a95; background: #edf5fb; border-color: #c4d9e8; }
.demo-shell .solar-key { color: #277857; }.demo-shell .load-key { color: #a46b19; }
.demo-shell .solar-line { stroke: #389775; }.demo-shell .load-line { stroke: #c18b2e; }
.demo-shell .segmented { display: inline-flex; background: var(--soft); border-color: var(--line); padding: 3px; border-radius: 7px; }
.demo-shell .segmented button { border: 0; background: transparent; padding: 6px 13px; border-radius: 5px; font-size: 11px; }
.demo-shell .segmented button.selected { background: var(--panel); color: #23563d; box-shadow: 0 1px 4px #23371e15; }
.demo-shell .pwa-install summary { background: var(--panel); border-color: var(--line); border-radius: 6px; }
.demo-shell .pwa-help { background: var(--panel); color: var(--text); box-shadow: 0 8px 30px #23371e20; }
.ws-sitebar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 24px; gap: 16px; }
.ws-sitebar select { min-width: 240px; }
.ws-sitebar label { display: flex; align-items: center; gap: 12px; }
.ws-hero { position: relative; display: flex; align-items: center; justify-content: space-between; overflow: hidden; min-height: 260px; padding: 36px 40px; margin-bottom: 24px; border-radius: 14px; background: #e3ecdc; border: 1px solid #d7e3ce; }
.ws-hero>div:first-child { max-width: 570px; z-index: 1; }
.demo-shell .ws-hero h2 { max-width: 440px; font-size: clamp(28px,3.3vw,45px); line-height: 1.08; letter-spacing: -1.8px; margin: 15px 0; font-weight: 600; }
.ws-hero p { color: #596e54; max-width: 400px; font-size: 13px; line-height: 1.7; margin-bottom: 25px; }
.ws-kicker { color: #5a7556; }
.ws-hero .actions { gap: 10px; }.ws-hero .actions button { padding: 11px 15px; }.ws-hero button span { margin-left: 14px; }
.ws-orbit { position: relative; width: 220px; height: 220px; flex-shrink: 0; margin-right: 12px; display: grid; place-items: center; border: 1px solid #a7bf9d70; border-radius: 50%; }
.ws-orbit:before { content: ''; position: absolute; inset: -34px; border: 1px solid #a7bf9d40; border-radius: 50%; }
.ws-orbit-ring { position: absolute; inset: 30px; border: 1px dashed #99b28c; border-radius: 50%; }
.ws-orbit-core { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 24px; background: #294f39; color: #d8ecc8; font-size: 50px; font-weight: 400; box-shadow: 0 12px 30px #42613825; }
.ws-orbit i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #55774c; box-shadow: 0 0 0 7px #edf3e6; top: 28px; left: 24px; }
.ws-orbit i:nth-last-child(2) { left: auto; right: -5px; top: 100px; background: #b2914d; }.ws-orbit i:last-child { top: auto; bottom: 0; left: 60px; width: 10px; height: 10px; }
.ws-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.ws-metrics>div { padding: 21px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.ws-metrics span { color: var(--muted); font-size: 11px; }.ws-metrics strong { display: block; font-size: 34px; font-weight: 500; line-height: 1.5; letter-spacing: -1px; }.ws-metrics small { color: var(--muted); font-size: 10px; }
.ws-two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: stretch; }
.ws-attention { display: flex; align-items: center; gap: 13px; padding: 18px 0; border-top: 1px solid var(--line); }
.ws-attention>div:nth-child(2) { flex: 1; }.ws-attention strong { font-size: 12px; }.ws-attention p { font-size: 11px; color: var(--muted); margin: 5px 0 0; }.ws-attention button { border: 0; }
.ws-symbol { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--soft); color: #617d4d; }.ws-symbol svg { width: 19px; height: 19px; }
.ws-dot { width: 7px; height: 7px; background: #4b9570; border-radius: 50%; display: inline-block; flex-shrink: 0; }.ws-dot.amber { background: #c49a4a; }
.demo-shell .ws-step { display: flex; align-items: center; width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 0; text-align: left; background: transparent; gap: 15px; }
.ws-step>span { color: var(--muted); font-size: 11px; }.ws-step>div { flex: 1; }.ws-step strong { font-size: 12px; }.ws-step small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 400; }.ws-step b { font-weight: 400; }
.ws-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 30px 0 24px; }.demo-shell .ws-intro h2 { font-size: 26px; letter-spacing: -.9px; margin: 8px 0; }.ws-intro p:not(.eyebrow) { margin: 0; color: var(--muted); max-width: 650px; line-height: 1.7; font-size: 12px; }
.ws-empty { padding: 40px 20px; text-align: center; color: var(--muted); }.ws-empty-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; font-size: 22px; background: var(--soft); border: 1px dashed #ccd9c5; border-radius: 50%; margin-bottom: 15px; }.ws-empty h3 { color: var(--muted); }.ws-empty p { max-width: 340px; margin: 8px auto 0; font-size: 12px; line-height: 1.7; }
.ws-health-row { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }.ws-health-row:last-child { border: 0; }.ws-health-row>div { flex: 1; }.ws-health-row p { color: var(--muted); font-size: 12px; margin: 5px 0 0; }
.ws-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 20px; }.ws-form>label { display: grid; gap: 8px; align-content: start; }.ws-form input,.ws-form select { width: 100%; }.ws-wide { grid-column: 1/-1; }.ws-form .actions { align-items: center; padding-top: 8px; gap: 15px; }.ws-form .muted { font-size: 10px; }
.ws-checklist { display: grid; gap: 10px; padding: 16px; border-radius: 8px; background: var(--soft); }.ws-checklist label { display: flex; align-items: center; gap: 10px; font-weight: 400; }.ws-checklist input { width: 16px; height: 16px; }
.ws-case-layout { display: grid; grid-template-columns: minmax(260px,.65fr) minmax(0,1.5fr); gap: 22px; align-items: start; }
.demo-shell .ws-case { display: grid; width: 100%; text-align: left; gap: 7px; padding: 17px 14px; margin-top: 12px; border-color: var(--line); }.demo-shell .ws-case.selected { border-color: #90b289; background: var(--hover); }.ws-case strong { font-size: 12px; overflow-wrap: anywhere; }.ws-case small { color: var(--muted); font-weight: 400; font-size: 10px; }
.ws-severity { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: #64845c; }.ws-severity.high { color: #b5543b; }.ws-severity.medium { color: #a07831; }
.ws-details { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }.ws-details summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #396b40; }.ws-details .ws-form { grid-template-columns: 1fr; }
.ws-subheading { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }.ws-note { display: flex; gap: 14px; padding: 16px 0; }.ws-note .ws-dot { margin-top: 6px; }.ws-note strong { font-size: 11px; }.ws-note small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }.ws-note p { white-space: pre-wrap; font-size: 12px; line-height: 1.7; margin-bottom: 0; }
.ws-report-brand { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 2px solid #254c35; padding-bottom: 22px; margin-bottom: 28px; }.ws-report-brand strong { font-size: 25px; letter-spacing: 4px; }.ws-report-brand span { font-size: 9px; letter-spacing: 1px; color: #85917f; }.demo-shell .ws-report { padding: 34px; }.demo-shell .ws-report h2 { font-size: 28px; margin: 10px 0; }.ws-report>p { font-size: 12px; line-height: 1.7; }.ws-report h3 { margin-top: 25px; }.ws-report-stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 22px 0; margin: 24px 0; border-block: 1px solid var(--line); gap: 16px; }.ws-report-stats strong { display: block; font-size: 25px; font-weight: 500; }.ws-report-stats span { color: var(--muted); font-size: 10px; }.ws-report-event { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 11px; }.ws-report-event span { color: var(--muted); }.ws-report-event strong { font-weight: 500; }
.ws-request { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 24px 0; }.ws-request:last-child { border: 0; }.ws-request h3 { margin: 12px 0 8px; }.ws-request p { font-size: 12px; color: var(--muted); margin: 0 0 10px; }.ws-footnote { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 20px 0 0; }
.ws-lifecycle { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 24px; }.ws-lifecycle>div { padding: 18px; background: var(--soft); border-radius: 8px; color: #849477; }.ws-lifecycle>div.current { background: #32583d; color: #e1edd8; }.ws-lifecycle span { display: block; font-size: 10px; margin-bottom: 6px; }.ws-lifecycle strong { font-size: 12px; font-weight: 550; }
.demo-shell .ws-policy-explainer { padding: 32px; background: var(--soft); }.ws-policy-explainer .ws-symbol { background: #dce8cf; margin-bottom: 24px; }.ws-policy-explainer p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.ws-photo-stage { background: #172b23; border-radius: 9px; overflow: hidden; display: grid; place-items: center; margin-bottom: 20px; }.ws-photo-stage img { display: block; max-width: 100%; width: 100%; height: 400px; object-fit: contain; }.ws-filmstrip { display: flex; overflow-x: auto; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }.demo-shell .ws-filmstrip button { flex-shrink: 0; padding: 5px; width: 135px; }.demo-shell .ws-filmstrip button.selected { border: 2px solid #608e4f; }.ws-filmstrip img { display: block; width: 100%; height: 76px; object-fit: cover; border-radius: 4px; }.ws-filmstrip small { display: block; font-size: 8px; margin-top: 6px; color: var(--muted); }
@media(min-width:1650px) { .demo-shell main { padding-inline: 56px; } }
@media(max-width:1200px) { .demo-shell main { padding: 26px; }.ws-orbit { width: 170px; height: 170px; margin: 0; }.ws-hero { padding: 30px; }.ws-metrics { gap: 10px; }.ws-metrics>div { padding: 16px; }.ws-two-col { grid-template-columns: 1fr 1fr; }.ws-case-layout { grid-template-columns: minmax(230px,.65fr) minmax(0,1fr); }.ws-form { grid-template-columns: 1fr; }.ws-hero>div:first-child { max-width: 380px; } }
@media(max-width:1000px) { .demo-shell { grid-template-columns: 188px minmax(0,1fr); }.demo-shell .sidebar { padding-inline: 10px; }.demo-shell main { padding: 22px; }.ws-orbit { display: none; }.ws-two-col,.ws-case-layout { grid-template-columns: 1fr; }.ws-hero>div:first-child { max-width: 100%; }.ws-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }.ws-form { grid-template-columns: repeat(2,minmax(0,1fr)); }.ws-details .ws-form { grid-template-columns: 1fr; } }
@media(max-width:650px) { .demo-shell { display: block; }.demo-shell .sidebar { position: relative; height: auto; padding: 20px 12px 12px; overflow: visible; }.demo-shell .brand { padding-left: 6px; }.demo-shell nav { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-top: 20px; gap: 5px; padding-bottom: 4px; }.demo-shell .nav { flex-shrink: 0; padding: 10px; font-size: 11px; gap: 7px; }.demo-shell .nav svg { width: 15px; height: 15px; }.demo-shell .sidebar-bottom { padding: 0; right: 18px; top: 20px; }.demo-shell .sidebar-bottom button { margin: 0; }.demo-shell main { padding: 22px 16px; }.demo-shell .topbar { margin-bottom: 18px; }.demo-shell .topbar h1 { font-size: 22px; }.demo-shell .top-actions>.badge { display: none; }.ws-hero { padding: 25px; min-height: 260px; }.demo-shell .ws-hero h2 { font-size: 34px; }.ws-hero .actions { flex-direction: column; align-items: flex-start; }.ws-metrics>div { padding: 17px; }.ws-metrics strong { font-size: 30px; }.ws-metrics small { font-size: 9px; }.demo-shell .card { padding: 20px; }.ws-sitebar { align-items: stretch; flex-direction: column; gap: 10px; }.ws-sitebar select { min-width: 0; width: 100%; }.ws-sitebar label { display: grid; gap: 6px; }.ws-sitebar>.badge { align-self: flex-start; }.ws-intro { flex-direction: column; align-items: flex-start; margin-top: 24px; }.demo-shell .ws-intro h2 { font-size: 24px; }.ws-form { grid-template-columns: 1fr; }.ws-health-row { flex-wrap: wrap; gap: 12px; }.ws-health-row>div { flex-basis: 80%; }.ws-health-row>.badge { margin-left: 19px; }.ws-lifecycle { gap: 4px; }.ws-lifecycle>div { padding: 12px 8px; }.ws-lifecycle strong { font-size: 9px; }.ws-request { align-items: start; flex-direction: column; gap: 16px; }.ws-report-brand { align-items: start; }.ws-report-brand span { max-width: 110px; text-align: right; font-size: 8px; }.ws-report-event { grid-template-columns: 1fr; gap: 4px; }.ws-photo-stage img { height: 240px; }.ws-report footer .button { margin-top: 15px; } }
@media(prefers-reduced-motion:reduce) { .demo-shell * { scroll-behavior: auto; transition: none !important; } }
@media print {
  body:has(.ws-report) { background: white; }
  .demo-shell:has(.ws-report) { display: block; color: #172b23; background: white; }
  .demo-shell:has(.ws-report) .sidebar, .demo-shell:has(.ws-report) .topbar,
  .demo-shell:has(.ws-report) .ws-sitebar, .demo-shell:has(.ws-report) .ws-intro,
  .demo-shell:has(.ws-report) main>.notice, .demo-shell:has(.ws-report) main>.warning,
  .demo-shell:has(.ws-report) main>section, .demo-shell:has(.ws-report) main>footer,
  .demo-shell:has(.ws-report) .ws-case-layout>section, .ws-report footer .button, .ws-print { display: none !important; }
  .demo-shell:has(.ws-report) main, .demo-shell .ws-report { padding: 0; margin: 0; border: 0; box-shadow: none; }
  .demo-shell:has(.ws-report) .ws-case-layout { display: block; }
  .ws-report-event, .ws-report-stats, .ws-report-brand { break-inside: avoid; }
  .ws-report h3 { break-after: avoid; }
  @page { size: auto; margin: 18mm; }
}
/* Native Safari menus otherwise ignore input padding. */
.demo-shell select { appearance: none; min-height: 40px; padding-right: 32px; background-image: linear-gradient(45deg,transparent 50%,#647269 50%),linear-gradient(135deg,#647269 50%,transparent 50%); background-position: calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
/* Theme tokens cover every demo workspace; camera pixels retain their original colors. */
.demo-shell[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101a18; --panel: #192723; --line: #34463e; --muted: #acbeb3;
  --text: #e8f0e9; --amber: #a5dbb9; --input: #14201c;
  --soft: #22352c; --hover: #2d4438;
  --warn-bg: #392e1e; --warn-text: #f2cd89; --warn-line: #715b35;
  --good-bg: #213c2d; --good-text: #b0e3bd; --good-line: #466d4f;
  --danger-bg: #422b28; --danger-text: #ffbbb0; --danger-line: #87554b;
}
.demo-shell[data-theme="dark"] .sidebar { background: #0c1512; }
.demo-shell[data-theme="dark"] .segmented button.selected { color: #b0e3bd; }
.demo-shell[data-theme="dark"] .ws-details summary,
.demo-shell[data-theme="dark"] .ws-severity { color: #b0d5a7; }
.demo-shell[data-theme="dark"] .ws-severity.medium { color: #e2bf75; }
.demo-shell[data-theme="dark"] .ws-severity.high { color: #ffb099; }
.demo-shell[data-theme="dark"] .gateway-node { color: #a7d5fa; background: #213544; border-color: #466075; }
.demo-shell[data-theme="dark"] .solar-key { color: #8cddb6; }
.demo-shell[data-theme="dark"] .load-key { color: #edc478; }
.demo-shell[data-theme="dark"] .timeline-track { background: repeating-linear-gradient(to right,#22352c 0%,#22352c calc(25% - 1px),#415548 calc(25% - 1px),#415548 25%); }
.demo-shell[data-theme="dark"] .ws-symbol { color: #bbd7aa; }
.demo-shell[data-theme="dark"] .ws-policy-explainer .ws-symbol { background: #36513b; }
.demo-shell .theme-toggle { display: flex; gap: 2px; padding: 3px; background: var(--soft); border: 1px solid var(--line); border-radius: 9px; }
.demo-shell .theme-toggle button { display: flex; gap: 6px; align-items: center; border: 0; background: transparent; color: var(--muted); padding: 6px 9px; font-size: 11px; }
.demo-shell .theme-toggle button[aria-pressed="true"] { color: var(--text); background: var(--panel); box-shadow: 0 1px 5px #0002; }
.theme-toggle span { font-size: 16px; line-height: 1; }
.dashboard-intro { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 8px 0 24px; }
.demo-shell .dashboard-intro h2 { font-size: 30px; letter-spacing: -1px; margin: 5px 0; }
.dashboard-intro p:not(.eyebrow) { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.snapshot-dashboard { margin: 32px 0; }
.snapshot-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.snapshot-heading h2 { margin: 0; }
.snapshot-cadence { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.snapshot-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.snapshot-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.snapshot-site { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.snapshot-site>span:first-child { font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.snapshot-site strong { flex: 1; font-size: 12px; font-weight: 550; }
.snapshot-stage { position: relative; aspect-ratio: 16/9; background: #0a1210; overflow: hidden; }
.snapshot-stage>img { display: block; width: 100%; height: 100%; object-fit: contain; }
.snapshot-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #c5d4cb; }
.snapshot-placeholder svg { width: 28px; height: 28px; opacity: .65; }
.snapshot-placeholder strong { font-size: 12px; font-weight: 500; }
.snapshot-placeholder>span { font-size: 10px; }
.snapshot-state { position: absolute; left: 12px; top: 12px; background: #12291de8; color: #ceefcd; border: 1px solid #a0c9a555; font-size: 9px; border-radius: 4px; padding: 4px 7px; text-transform: uppercase; letter-spacing: .8px; }
.snapshot-state.stale { background: #362816ed; color: #ffe0a7; border-color: #c2a46466; }
.snapshot-stamp { position: absolute; bottom: 0; inset-inline: 0; padding: 27px 14px 12px; background: linear-gradient(transparent,#07120bea); color: #fff; display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.snapshot-stamp span { font-size: 8px; letter-spacing: 1.4px; color: #d2e2d6; }
.snapshot-stamp time { font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.snapshot-details { padding: 16px; }
.demo-shell .snapshot-details h3 { font-size: 13px; margin-bottom: 10px; }
.snapshot-freshness { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.snapshot-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
.snapshot-actions a { color: var(--muted); font-size: 10px; text-decoration: none; }
.snapshot-actions a:hover { text-decoration: underline; }
.demo-shell .snapshot-actions button { padding: 6px 9px; font-size: 10px; }
.snapshot-disclosure { color: var(--muted); font-size: 10px; line-height: 1.7; margin: 14px 0 0; max-width: 900px; }
@media(min-width:1500px) { .snapshot-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:800px) { .demo-shell .topbar { flex-wrap: wrap; }.demo-shell .top-actions { flex-wrap: wrap; }.snapshot-grid { grid-template-columns: 1fr; }.snapshot-heading { align-items: start; flex-direction: column; gap: 10px; }.dashboard-intro { align-items: start; flex-direction: column; }.demo-shell .dashboard-intro h2 { font-size: 26px; } }
@media print { .demo-shell[data-theme="dark"]:has(.ws-report) { color-scheme: light; --bg: white; --panel: white; --text: #172b23; --muted: #52684a; --line: #dfe5de; } }