:root {
  color-scheme: dark;
  --bg: #11151a;
  --panel: #1a2028;
  --panel-2: #232c37;
  --panel-3: #121922;
  --text: #ebf0f6;
  --muted: #a0adba;
  --border: #33404f;
  --ok: #1f9d55;
  --warn: #b7791f;
  --bad: #c53030;
  --accent: #5aa9ff;
  --shadow: 0 8px 30px rgba(0,0,0,.18);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: linear-gradient(180deg, #0f1318 0%, #11151a 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(1500px, calc(100% - 2rem)); margin: 0 auto; }
.site-header { border-bottom: 1px solid var(--border); background: #0d1117; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); }
.site-header .wrap { padding: 1rem 0; }
.header-grid { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.header-meta { display:grid; gap:.35rem; justify-items:end; }
h1, h2, h3 { margin: 0 0 .35rem; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
main.wrap { padding: 1rem 0 2rem; }
.panel {
  background: color-mix(in srgb, var(--panel) 92%, white 8%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.inset-panel { margin-bottom: 0; }
.panel-header { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; margin-bottom:.8rem; }
.grid-2, .grid-2-compact, .grid-3, .grid-4, .grid-main-side { display:grid; gap:1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-2-compact { grid-template-columns: repeat(2, minmax(0,1fr)); gap:.8rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap:.8rem; }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap:.8rem; }
.grid-main-side { grid-template-columns: minmax(0, 2.2fr) minmax(320px, .95fr); align-items:start; }
.dashboard-summary { margin-bottom: 1rem; }
.stat-panel { display:grid; gap:.25rem; align-content:start; }
.eyebrow { color: var(--muted); font-size:.82rem; text-transform: uppercase; letter-spacing:.06em; }
.stat-value { font-size:1.7rem; font-weight:700; }
@media (max-width: 1100px) { .grid-main-side { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .grid-2, .grid-2-compact, .grid-3, .grid-4 { grid-template-columns: 1fr; } .panel-header { flex-direction:column; align-items:flex-start; } .header-grid { flex-direction:column; } .header-meta { justify-items:start; } }

.col-received { min-width: 13rem; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; word-break: break-word; }
.table-wrap { overflow-x: auto; }
.stack { display:grid; gap:.9rem; }
.stack-tight { display:grid; gap:.2rem; }

table { width:100%; border-collapse:collapse; }
th, td { padding:.7rem; border-top:1px solid var(--border); text-align:left; vertical-align:top; }
thead th { border-top:none; background: var(--panel-2); position: sticky; top: 0; }
.dense-table th, .dense-table td { padding:.55rem .65rem; }

pre {
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  background:#0f141a;
  border:1px solid var(--border);
  border-radius:10px;
  padding:.8rem;
  font-size:.86rem;
  max-height: 28rem;
  overflow:auto;
}
.kv { display:grid; grid-template-columns: 160px 1fr; gap:.45rem 1rem; margin:0; }
.compact-kv { grid-template-columns: 150px 1fr; }
.kv dt { color: var(--muted); }
.kv dd { margin:0; }

label span { display:block; margin-bottom:.3rem; color:var(--muted); }
input, select, button, textarea {
  width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--border);
  background:#0f141a; color:var(--text); font:inherit;
}
textarea { resize:vertical; min-height:8rem; }
button { background:var(--accent); color:#08111c; font-weight:700; cursor:pointer; }
button:hover { filter:brightness(1.05); }
.badge {
  display:inline-block; padding:.2rem .55rem; border-radius:999px; font-size:.8rem;
  border:1px solid var(--border); text-transform:lowercase;
}
.badge.subtle { background: rgba(255,255,255,.05); color: var(--muted); }
.badge.fresh { background: rgba(31,157,85,.15); color:#9ae6b4; }
.badge.aging { background: rgba(183,121,31,.15); color:#f6ad55; }
.badge.stale, .badge.unknown { background: rgba(197,48,48,.15); color:#feb2b2; }
.badge.state-pending, .badge.state-acknowledged { background: rgba(90,169,255,.15); color:#90cdf4; }
.badge.state-completed { background: rgba(31,157,85,.15); color:#9ae6b4; }
.badge.state-failed, .badge.state-expired, .badge.state-cancelled { background: rgba(197,48,48,.15); color:#feb2b2; }
.badge.state-deferred, .badge.state-superseded { background: rgba(183,121,31,.15); color:#f6ad55; }

.alert { margin:0 0 1rem; padding:.8rem 1rem; border-radius:10px; border:1px solid var(--border); }
.alert.ok { background: rgba(31,157,85,.12); color:#9ae6b4; }
.alert.error { background: rgba(197,48,48,.12); color:#feb2b2; }

.catalog-card { display:grid; gap:.25rem; padding:.75rem; border-radius:12px; border:1px solid var(--border); background:var(--panel-3); }
.command-fields { display:none; gap:.8rem; }
.field-help { margin-top:.25rem; font-size:.82rem; color:var(--muted); }
.telemetry-stats { margin-bottom: 1rem; }
.telemetry-stat { font-size:1.65rem; font-weight:700; margin:.15rem 0; }
.chart-wrap { overflow-x:auto; }
.telemetry-chart { width:100%; height:auto; display:block; }
.telemetry-chart .chart-bg { fill: var(--panel-2); stroke: var(--border); }
.telemetry-chart .chart-axis, .telemetry-chart .chart-marker { stroke: var(--border); stroke-width:1; }
.telemetry-chart .chart-marker { stroke-dasharray:4 4; }
.telemetry-chart .chart-line { fill:none; stroke: var(--accent); stroke-width:2.2; vector-effect: non-scaling-stroke; }
.telemetry-chart .chart-title { fill: var(--text); font-size:14px; font-weight:600; }
.telemetry-chart .chart-label { fill: var(--muted); font-size:11px; }

details.collapsible > summary,
details.log-entry > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
details.collapsible > summary::-webkit-details-marker,
details.log-entry > summary::-webkit-details-marker { display:none; }
details.collapsible > summary::after,
details.log-entry > summary::after {
  content:"▸"; color:var(--muted); font-size:1rem; transition: transform .15s ease;
}
details[open] > summary::after { transform: rotate(90deg); }
.collapse-body { margin-top: .85rem; }
.log-entry { border:1px solid var(--border); border-radius:12px; padding:.75rem; background: #121922; }
.log-entry + .log-entry { margin-top:.6rem; }

.telemetry-chart .chart-point { fill: var(--accent); }
.telemetry-chart .chart-band { stroke: var(--border); stroke-width:1; stroke-dasharray:3 5; }
.telemetry-chart .event-dot { stroke: var(--panel-3); stroke-width:1.5; }
.telemetry-chart .severity-info { fill: var(--accent); }
.telemetry-chart .severity-warn { fill: var(--warn); }
.telemetry-chart .severity-error { fill: var(--bad); }
.telemetry-chart .severity-power { fill: var(--ok); }
.timeline-chart { min-height: 150px; }