:root {
  color-scheme: dark;
  --bg: #07101b;
  --panel: #101c2a;
  --panel-raised: #142234;
  --panel-deep: #0a1521;
  --line: #294057;
  --line-strong: #3b5a76;
  --text: #eaf1f8;
  --muted: #9fb1c5;
  --cyan: #55c7e8;
  --cyan-deep: #183c50;
  --green: #71d99d;
  --green-deep: #173a2d;
  --amber: #f5c66e;
  --amber-deep: #443419;
  --red: #ff878d;
  --red-deep: #482126;
  --violet: #b59aff;
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 80% -20%, rgba(37, 94, 126, .22), transparent 34rem),
    var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

button, input, select, textarea {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #142337;
  color: var(--text);
  padding: 8px 10px;
}

button { cursor: pointer; }
button:hover { border-color: var(--cyan); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 23, 36, .96);
}

.topbar h1, .page-heading h2 { margin: 0; }
.topbar h1 { font-size: 23px; letter-spacing: -.02em; }

.eyebrow {
  margin: 0 0 2px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .15em;
}

.identity { display: flex; align-items: center; gap: 12px; }

.passive, .badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--muted);
  background: rgba(18, 31, 46, .8);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
}

.passive, .badge.good { border-color: #427b66; color: var(--green); background: var(--green-deep); }
.badge.warning { border-color: #856a35; color: var(--amber); background: var(--amber-deep); }
.badge.danger { border-color: #86464d; color: var(--red); background: var(--red-deep); }
.badge.neutral { color: var(--muted); }

.layout {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  min-height: calc(100vh - 88px);
}

nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 20px 12px;
  border-right: 1px solid var(--line);
  background: rgba(8, 18, 30, .72);
}

nav a {
  position: relative;
  display: block;
  color: var(--muted);
  padding: 9px 12px;
  margin: 2px 0;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 7px;
}

nav a:hover { background: var(--panel); color: var(--text); }
nav a.active {
  color: var(--text);
  background: linear-gradient(90deg, var(--cyan-deep), rgba(20, 34, 52, .9));
  border-color: #315b72;
}
nav a.active::before {
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--cyan);
  content: "";
}

main { padding: 22px; min-width: 0; max-width: 1720px; width: 100%; }

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}

.status { color: var(--amber); font-size: 13px; }
.status.connected { color: var(--green); }
.status.degraded { color: var(--red); }

.notice {
  border: 1px solid #765f2e;
  background: linear-gradient(90deg, #211c12, #171814);
  color: #f1d99f;
  padding: 10px 13px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.mode-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 7px 11px;
  border: 1px solid #554a2e;
  border-radius: 7px;
  background: rgba(44, 37, 20, .62);
  color: var(--muted);
  font-size: 12px;
}
.mode-strip strong { color: var(--amber); text-transform: uppercase; letter-spacing: .06em; }

.attack-banner {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 92px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: linear-gradient(115deg, #102437, #101c2a 65%);
  color: var(--text);
  text-decoration: none;
}
.attack-banner[href] { cursor: pointer; }
.attack-banner[href]:hover { border-color: var(--cyan); transform: translateY(-1px); }
.attack-banner.active { border-color: #91444c; background: linear-gradient(115deg, #3a1c22, #171b27 65%); }
.attack-banner.recovery { border-color: #836731; background: linear-gradient(115deg, #3d3019, #171b27 65%); }
.attack-banner.healthy { border-color: #34785e; background: linear-gradient(115deg, #15372b, #111e29 65%); }
.attack-banner > div { flex: 1; min-width: 0; }
.attack-banner h3 { margin: 0; font-size: 21px; }
.attack-banner p { margin: 2px 0 0; color: var(--muted); }
.attack-banner .attack-kicker { color: var(--cyan); font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.attack-banner .pulse { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 6px rgba(159,177,197,.09); }
.attack-banner.active .pulse { background: var(--red); box-shadow: 0 0 0 6px rgba(255,135,141,.12); }
.attack-banner.recovery .pulse { background: var(--amber); }
.attack-banner.healthy .pulse { background: var(--green); }

.metrics.operations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metrics article small { display: block; position: relative; z-index: 1; margin-top: 3px; color: #71879d; font-size: 11px; }
.metrics.operations strong { font-size: 24px; }

.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.section-heading h3 { margin: 0; }
.section-heading p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.section-link { color: var(--cyan); font-size: 12px; text-decoration: none; white-space: nowrap; }
.section-link:hover { text-decoration: underline; }
.table-count { color: var(--muted); font-size: 12px; white-space: nowrap; }

.chart-panel { position: relative; min-height: 320px; }
.time-chart { display: block; width: 100%; height: 220px !important; border-radius: 7px; background: rgba(5, 13, 22, .48); }
.chart-tooltip { position: absolute; z-index: 20; min-width: 190px; max-width: min(320px, calc(100% - 20px)); padding: 11px 12px 12px; pointer-events: none; color: #eef6ff; background: rgba(2, 8, 14, .96); border: 1px solid #38536a; border-radius: 7px; box-shadow: 0 10px 26px rgba(0, 0, 0, .38); font-size: 12px; line-height: 1.4; }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip-title { margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid #243b4e; color: #f6f9fc; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chart-tooltip-rows { display: grid; gap: 7px; }
.chart-tooltip-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 18px; }
.chart-tooltip-marker { display: block; width: 9px; height: 9px; border-radius: 2px; background: var(--tooltip-color, var(--cyan)); }
.chart-tooltip-label { min-width: 0; color: #c8d6e4; overflow-wrap: anywhere; }
.chart-tooltip-value { padding-left: 8px; color: #fff; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 13px; min-height: 22px; padding-top: 8px; color: var(--muted); font-size: 11px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { display: inline-block; width: 9px; height: 3px; border-radius: 3px; background: var(--legend-color, var(--cyan)); }
.range-switch { display: flex; gap: 3px; }
.range-switch button { padding: 4px 8px; color: var(--muted); font-size: 11px; }
.range-switch button.active { color: var(--cyan); border-color: #3f7891; background: var(--cyan-deep); }

.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px; margin: 0 0 13px; padding: 10px; border: 1px solid #22384b; border-radius: 8px; background: rgba(8, 18, 29, .55); }
.filter-bar label { min-width: 142px; margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.filter-bar label:first-child { flex: 1 1 260px; }
.filter-bar input, .filter-bar select { width: 100%; margin-top: 3px; color: var(--text); text-transform: none; letter-spacing: normal; }

.operator-table { min-width: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #22394d; border-radius: 8px; }
.operator-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.operator-table th { padding: 8px 10px; color: #8fa5ba; background: #0b1724; border-bottom: 1px solid #2b455c; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.operator-table td { padding: 10px; border-bottom: 1px solid #1e3346; color: #dbe6f1; vertical-align: middle; white-space: nowrap; }
.operator-table tbody tr:last-child td { border-bottom: 0; }
.operator-table tbody tr:hover { background: rgba(48, 86, 112, .12); }
.operator-table tbody tr.clickable-row { cursor: pointer; }
.operator-table tbody tr.clickable-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; background: rgba(48, 86, 112, .2); }
.operator-table td.wrap { min-width: 150px; white-space: normal; }
.operator-table td.numeric { font-variant-numeric: tabular-nums; }
.operator-table a { color: var(--text); font-weight: 700; text-decoration: none; }
.operator-table a:hover { color: var(--cyan); text-decoration: underline; }
.subvalue { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 400; }
.validation-cell { min-width: 120px; }
.mini-composition { display: block; width: 100%; height: 5px; margin-top: 5px; overflow: hidden; border: 0; border-radius: 5px; background: var(--amber-deep); accent-color: var(--green); }
.mini-composition::-webkit-progress-bar { background: var(--amber-deep); }
.mini-composition::-webkit-progress-value { background: var(--green); }

.loading-region:empty::before { display: block; padding: 20px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); content: "Loading observations…"; text-align: center; }
.region-state { padding: 18px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); text-align: center; }
.region-state.error-state { color: var(--red); border-color: #794148; background: rgba(72,33,38,.25); }
.region-state button { margin-top: 9px; }

.health-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #20364a; border-radius: 7px; background: #20364a; }
.health-strip > div { padding: 10px; background: #0c1926; }
.health-strip span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.health-strip strong { display: block; margin-top: 2px; }

.composition-summary { display: grid; gap: 12px; }
.composition-total { font-size: 28px; font-weight: 750; }
.composition-row { display: grid; grid-template-columns: 120px 1fr 70px; align-items: center; gap: 8px; }
.composition-progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 8px; background: #1c3042; accent-color: var(--cyan); }
.composition-progress.green { accent-color: var(--green); }
.composition-progress.amber { accent-color: var(--amber); }
.composition-progress.red { accent-color: var(--red); }
.composition-progress::-webkit-progress-bar { background: #1c3042; }
.composition-progress.green::-webkit-progress-value { background: var(--green); }
.composition-progress.amber::-webkit-progress-value { background: var(--amber); }
.composition-progress.red::-webkit-progress-value { background: var(--red); }

.detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 100px; margin-bottom: 14px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 11px; background: linear-gradient(130deg, #13283b, #101c2a); }
.detail-hero h3 { margin: 0; font-size: 23px; }
.detail-hero p { margin: 4px 0 0; color: var(--muted); }
.detail-hero .hero-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.incident-hero { min-height: 88px; padding: 15px 17px; }

.fact-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid #263f54;
  border-radius: 8px;
  background: #263f54;
}
.fact-strip .key-value { min-width: 0; padding: 10px 12px; background: #0c1926; }
.fact-strip span, .key-value-grid span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.fact-strip strong, .key-value-grid strong { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.fact-strip small, .key-value-grid small { display: block; color: var(--muted); font-size: 10px; }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.compact-chart { position: relative; min-width: 0; padding: 10px; border: 1px solid #20384c; border-radius: 8px; background: rgba(5, 13, 22, .32); }
.compact-chart h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 650; }
.timeline-panel { padding: 14px; }
.marker-key { display: flex; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 10px; }
.marker-key span::before { display: inline-block; width: 10px; height: 2px; margin-right: 5px; vertical-align: middle; background: var(--violet); content: ""; }
.marker-key .marker-amber::before { background: var(--amber); }

.key-value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #20364a; border-radius: 7px; background: #20364a; }
.key-value-grid .key-value { min-width: 0; padding: 9px 10px; background: #0c1926; }
.key-value-grid .key-value > span + span { color: var(--text); font-size: 13px; text-transform: none; letter-spacing: normal; }
.technical-details > summary { cursor: pointer; color: var(--text); font-size: 15px; font-weight: 700; }
.technical-details[open] > summary { margin-bottom: 12px; }

.evidence-list { display: grid; min-width: 0; gap: 8px; }
.evidence-item { min-width: 0; border: 1px solid #233a4e; border-radius: 7px; background: #0a1521; }
.evidence-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; cursor: pointer; }
.evidence-item summary::marker { color: var(--cyan); }
.evidence-item summary strong { min-width: 0; overflow-wrap: anywhere; }
.evidence-item summary span { min-width: 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; text-align: right; }
.evidence-item pre { max-height: 360px; overflow: auto; margin: 0; padding: 12px; border-top: 1px solid #203549; color: #cbd9e7; white-space: pre-wrap; font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }

.timeline { display: grid; gap: 0; }
.timeline-item { position: relative; display: grid; grid-template-columns: 150px 18px 1fr; gap: 10px; min-height: 68px; }
.timeline-item::after { position: absolute; left: 159px; top: 21px; bottom: -7px; width: 1px; background: #31516b; content: ""; }
.timeline-item:last-child::after { display: none; }
.timeline-time { color: var(--muted); font-size: 11px; text-align: right; }
.timeline-dot { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 6px; border: 2px solid #112131; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 2px #31516b; }
.timeline-content strong { display: block; }
.timeline-content span { color: var(--muted); font-size: 12px; }

.baseline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.baseline-card { padding: 13px; border: 1px solid #263f54; border-radius: 8px; background: #0a1622; }
.baseline-card h4 { margin: 0; }
.baseline-card p { margin: 3px 0 10px; color: var(--muted); font-size: 12px; }
.deviation-track { height: 8px; overflow: hidden; border-radius: 8px; background: #1b3042; }
.deviation-track span { display: block; height: 100%; background: var(--green); }
.deviation-track span.warning { background: var(--amber); }
.deviation-track span.danger { background: var(--red); }
.baseline-values { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 11px; }
.deviation-progress { display: block; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 8px; background: #1b3042; accent-color: var(--green); }
.deviation-progress.warning { accent-color: var(--amber); }
.deviation-progress.danger { accent-color: var(--red); }
.deviation-progress::-webkit-progress-bar { background: #1b3042; }
.deviation-progress.good::-webkit-progress-value { background: var(--green); }
.deviation-progress.warning::-webkit-progress-value { background: var(--amber); }
.deviation-progress.danger::-webkit-progress-value { background: var(--red); }

.legend-cyan { background: var(--cyan) !important; }
.legend-green { background: var(--green) !important; }
.legend-amber { background: var(--amber) !important; }
.legend-red { background: var(--red) !important; }
.legend-violet { background: var(--violet) !important; }
.good { color: var(--green); }
.warning { color: var(--amber); }
.danger { color: var(--red); }

.compact-note { display: flex; gap: 10px; color: var(--muted); font-size: 12px; }
.compact-note strong { color: var(--cyan); white-space: nowrap; }

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

.panel, .metrics article {
  min-width: 0;
  background: linear-gradient(145deg, rgba(17, 30, 45, .98), rgba(13, 25, 38, .98));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.panel { margin-bottom: 14px; }
.grid .panel { margin-bottom: 0; }
.panel h3 { margin: 0 0 5px; font-size: 17px; }
.panel > p { margin-top: 0; color: var(--muted); }
.metrics article { position: relative; overflow: hidden; }
.metrics span { display: block; color: var(--muted); }
.metrics strong { display: block; margin-top: 4px; font-size: 28px; line-height: 1.2; }

.record-list { display: grid; gap: 10px; min-width: 0; }
.feed-summary { margin: 0; color: var(--muted); font-size: 12px; }

.record {
  min-width: 0;
  border: 1px solid #21384c;
  border-left: 3px solid var(--cyan);
  background: var(--panel-deep);
  padding: 12px 13px;
  border-radius: 7px;
  overflow-wrap: anywhere;
}
.record.replay { border-left-color: var(--amber); }
.record.test { border-left-color: var(--violet); }

.record-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.record h4 { margin: 0 0 3px; font-size: 15px; line-height: 1.3; }
.record .meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 11px; }
.namespace { font-weight: 750; text-transform: uppercase; }
.namespace.live { color: var(--green); }
.namespace.replay { color: var(--amber); }
.namespace.test { color: var(--violet); }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 1px;
  margin: 12px 0 0;
  border: 1px solid #20364a;
  border-radius: 6px;
  overflow: hidden;
  background: #20364a;
}
.metric-strip > div { min-width: 0; padding: 7px 9px; background: #0e1a28; }
.metric-strip dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.metric-strip dd { margin: 1px 0 0; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }

.composition-bar { margin-top: 11px; }
.composition-labels { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.composition-labels span:first-child { color: var(--green); }
.composition-labels span:last-child { color: var(--amber); text-align: right; }
.composition-bar progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 4px;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
  background: var(--amber-deep);
  accent-color: var(--green);
}
.composition-bar progress::-webkit-progress-bar { background: var(--amber-deep); }
.composition-bar progress::-webkit-progress-value { background: linear-gradient(90deg, #4ebf83, var(--green)); }

.record details { margin-top: 9px; border-top: 1px solid #1f3345; padding-top: 7px; }
.record summary { width: max-content; color: var(--muted); cursor: pointer; font-size: 11px; }
.record pre {
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 5px;
  background: #07111b;
  color: #c9d8e7;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.load-state {
  display: grid;
  gap: 9px;
  min-height: 86px;
  place-content: center stretch;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  text-align: center;
}
.load-state p { margin: 0; }
.load-state.empty { font-style: italic; }
.load-state.error-state { color: var(--red); border-color: #794148; background: rgba(72, 33, 38, .34); }
.load-state button { justify-self: center; }
.skeleton-line {
  width: min(540px, 80vw);
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #162638 25%, #294057 50%, #162638 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
.skeleton-line:nth-of-type(2) { width: min(390px, 64vw); }
.skeleton-line:nth-of-type(3) { width: min(470px, 70vw); }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.filters button.active { border-color: var(--cyan); background: var(--cyan-deep); color: var(--cyan); }
label { display: grid; gap: 4px; margin: 9px 0; }
textarea { min-height: 90px; resize: vertical; }
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-card { width: min(440px, calc(100% - 30px)); padding: 28px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; }
.login-card input { width: 100%; }
.error { color: var(--red); }
.muted { color: var(--muted); font-size: 13px; }
output { display: block; margin-top: 10px; min-height: 1.5em; }

@media (max-width: 850px) {
  .layout { grid-template-columns: 1fr; }
  nav {
    position: static;
    display: flex;
    height: auto;
    overflow-x: auto;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: #0b1724;
  }
  nav a { flex: 0 0 auto; margin: 0 1px; }
  nav a.active::before { left: 10px; right: 10px; top: auto; bottom: 2px; width: auto; height: 2px; }
  main { padding: 18px; }
  .grid.two, .grid.metrics { grid-template-columns: 1fr 1fr; }
  .metrics.operations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .topbar { align-items: flex-start; padding: 15px 16px; }
  .topbar h1 { font-size: 19px; }
  .identity { flex-direction: column; align-items: flex-end; gap: 7px; }
  .identity > span:not(.passive) { display: none; }
  main { padding: 14px 12px; }
  .page-heading { align-items: flex-start; }
  .status { max-width: 140px; text-align: right; }
  .grid.two, .grid.metrics { grid-template-columns: 1fr; }
  .panel, .metrics article { padding: 13px; }
  .record-heading { align-items: flex-start; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attack-banner { align-items: flex-start; }
  .attack-banner > .badge { display: none; }
  .section-heading { align-items: flex-start; }
  .dashboard-charts { grid-template-columns: 1fr; }
  .health-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-item { grid-template-columns: 86px 14px 1fr; }
  .timeline-item::after { left: 96px; }
  .timeline-time { font-size: 9px; }
  .compact-note { display: grid; }
  .fact-strip, .chart-grid, .key-value-grid { grid-template-columns: 1fr; }
  .evidence-item summary { align-items: flex-start; }
  .evidence-item summary span { max-width: 90px; }
}